@charset "UTF-8";
/* ////////////////////////////////////////////////////////////////////
///// CREATORS 一覧（Figma「PC_CREATORS - ALL」206:432）
///// 共通部品（背景・左のロゴ・ガラス調カード・見出し・単位 --d）は common/css/detail.css
///// 背景の写真（/index/img/bg_creator.jpg）は Figma の 1280×832 の見え方と同じ切り抜きなので位置指定なし
//////////////////////////////////////////////////////////////////// */

/* ==================================================
セクション（Creators / Creators Brand）
・SP：1列 / TAB：2列 / PC：3列（Figma：カード 287×261、間隔 48px、左 291px・右 32px）
================================================== */
.CreatorsAllArea,
.CreatorsBrandArea {
  position: relative;
  z-index: 10;
  padding: 0 calc(16 * var(--d));
}
.CreatorsAllArea {
  padding-top: calc(120 * var(--d));
}
.CreatorsBrandArea {
  padding-top: calc(80 * var(--d));
  padding-bottom: calc(80 * var(--d));
}
.CreatorsAllArea .dtSecTtlObj,
.CreatorsBrandArea .dtSecTtlObj {
  margin-bottom: calc(16 * var(--d));
}
.creatorLists {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(24 * var(--d));
}

/* ==================================================
カード：写真 255×166（上・左右 16。Figma は上 32 だが、2026-10-13 ユーザー指定で左右の余白に合わせた）、
その下 8px に名前と SNS アイコンの行（高さ 32、下 23）
・写真は NEWS と同じく白 10%＋ぼかしを重ね、hover ではっきり見せる（共通のサムネイルカード .dtThumbCard / .dtThumbImg。detail.css）
================================================== */
.creatorList .cardLink {
  display: block;
  padding: calc(16 * var(--d)) calc(16 * var(--d)) calc(23 * var(--d));
  color: inherit;
  text-decoration: none;
}
.creatorList .imgObj {
  overflow: hidden;
  aspect-ratio: 255 / 166;
}
/* 宣材写真は縦長なので、顔が入るよう上寄りで切り抜く（人ごとの調整は profiles.php の listPos） */
.creatorList .imgObj img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 20%);
  transition: transform 0.6s ease;
}
.creatorList .name {
  display: flex;
  align-items: center;
  height: calc(32 * var(--d));
  margin-top: calc(8 * var(--d));
  padding-right: calc(120 * var(--d)); /* SNS アイコン3つ分（32×3 ＋ 間隔 8×2）＋ 余白 */
  font-size: calc(16 * var(--d));
  line-height: 1.4;
  color: #231815;
}

/* SNS アイコン：カードの右下（右 16・下 23）の高さ 32 の行に、間隔 8px で天地中央に並べる
   大きさは Figma の 32px の Instagram・TikTok 60%（19.2px）、YouTube 70%（22.4px）（2026-10-13 ユーザー指定） */
.creatorList .snsLists {
  position: absolute;
  right: calc(16 * var(--d));
  bottom: calc(23 * var(--d));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--d));
  height: calc(32 * var(--d));
}
.creatorList .snsLists li {
  --iconScale: 0.6;
}
.creatorList .snsLists li.is-youtube {
  --iconScale: 0.7;
}
.creatorList .snsLists a {
  display: block;
  width: calc(32 * var(--iconScale) * var(--d));
  height: calc(32 * var(--iconScale) * var(--d));
  color: #2c0b0b;
  transition: opacity 0.3s ease;
}
.creatorList .snsLists svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@media (hover: hover) {
  .creatorList a.cardLink:hover .imgObj img {
    transform: scale(1.05);
  }
  .creatorList .snsLists a:hover {
    opacity: 0.6;
  }
}

@media screen and (min-width: 769px) {
  .creatorLists {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 961px) {
  /* 見出し：32px・行の高さ 1.7（54.4px）。Figma の中心 y=89.5 に合わせて上 62.3px、カードまで 26px */
  .CreatorsAllArea,
  .CreatorsBrandArea {
    padding: 0 calc(32 * var(--d)) 0 calc(291 * var(--d));
  }
  .CreatorsAllArea {
    padding-top: calc(62.3 * var(--d));
  }
  /* Creators のカードの下から Creators Brand の見出しまで 122.3px、Brand のカードの下からフッターまで 20vw（下層共通。Figma は 78px） */
  .CreatorsBrandArea {
    padding-top: calc(122.3 * var(--d));
    padding-bottom: var(--dtFtrGap);
  }
  .CreatorsAllArea .dtSecTtlObj,
  .CreatorsBrandArea .dtSecTtlObj {
    margin-bottom: calc(26 * var(--d));
  }
  .creatorLists {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(48 * var(--d));
  }
}