@charset "UTF-8";
/* ////////////////////////////////////////////////////////////////////
///// クリエイター詳細（Figma「PC_CREATORS - DETAIL」206:511。6人共通）
///// 共通部品（背景・左のロゴ・ガラス調カード・見出し・単位 --d）は common/css/detail.css
/////   --d：PC（961px〜）は 1280px 基準、SP・TAB は 375px 基準（最大 1.4px）
///// 背景の写真（/index/img/bg_creator.jpg）は一覧ページと同じ。2画面目以降も固定背景を見せる（Figma は #f9f9f9）
///// SP・TAB は Figma が無いので、カードの中を縦に積む
//////////////////////////////////////////////////////////////////// */

/* ==================================================
プロフィール：ガラス調カード 964×611（左 284・上 192）
・写真 413.5×547.4（カードの内側 32）、文章は写真の右 62.5 から 424 幅
・文字は Figma どおり Zen Kaku Gothic New（名前 48px Medium、本文 16px・行間 1.7）
・名前の下の SNS アイコンはアカウントがある媒体だけ（Figma は Instagram のみ。一覧ページに合わせた）
================================================== */
.CreatorDetailArea {
  position: relative;
  z-index: 10;
  padding: calc(110 * var(--d)) calc(16 * var(--d)) 0;
}
.profileGlp {
  display: flex;
  flex-flow: column;
  gap: calc(24 * var(--d));
  padding: calc(16 * var(--d)) calc(16 * var(--d)) calc(24 * var(--d));
}
.profileGlp .mainImg {
  width: min(100%, calc(311 * var(--d)));
  aspect-ratio: 413.5 / 547.4;
  overflow: hidden;
}
.profileGlp .mainImg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 横長の写真は profiles.php の detailPos で人物が真ん中に来る位置を指定する */
  object-position: var(--pos, 50% 50%);
}
.profileGlp .profileTxt {
  color: var(--dtTxt);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: calc(14 * var(--d));
  line-height: 1.7;
}
.profileGlp .name {
  font-size: calc(32 * var(--d));
  font-weight: 500;
  line-height: 1.2;
}
.profileGlp .snsIconLists {
  display: flex;
  gap: calc(8 * var(--d));
  margin-top: calc(8 * var(--d));
}
.profileGlp .snsIconLists a {
  display: block;
  width: calc(26 * var(--d));
  height: calc(26 * var(--d));
  color: var(--dtTxt);
}
.profileGlp .snsIconLists svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.profileGlp .catchObj,
.profileGlp .txtObj {
  line-height: 1.7; /* p の共通の行間（1.5）より優先 */
}
.profileGlp .catchObj {
  margin-top: calc(32 * var(--d));
  font-weight: 700;
}
.profileGlp .txtObj {
  margin-top: 1.7em; /* Figma は見出しと本文の間に空行1つ */
}
.profileGlp .factList {
  margin-top: calc(14 * var(--d));
  font-weight: 700;
}
.profileGlp .factSet {
  display: flex;
  gap: 0.3em;
}

/* ==================================================
SNS 投稿（Instagram / TikTok / YouTUBE）
・見出しは共通の .dtSecTtlObj（32px・wght 640）
・投稿：ガラス調カードの内側 16 にサムネイル
    Instagram・TikTok：カード 217（正方形）を PC 4列（間隔 横 32・縦 16）、SP 2列
    YouTube：カード 287×197（画像 255×165）を PC 3列（間隔 48）、SP 1列
・View More（Figma 3354:888）はカードの下 16、右寄せ。部品は common/css/layout.css の .liquidMore
================================================== */
.CreatorSnsArea {
  position: relative;
  z-index: 10;
  padding: calc(64 * var(--d)) calc(16 * var(--d)) calc(120 * var(--d));
  /* View More の液体の層（hover でふくらむ丸のぶん右に大きい）が SP・TAB で画面の右端を越え、横スクロールが出るのを防ぐ */
  overflow-x: clip;
}
.snsSection + .snsSection {
  margin-top: calc(64 * var(--d));
}
.snsSection .dtSecTtlObj {
  margin-bottom: calc(16 * var(--d));
}
.snsLists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(12 * var(--d));
}
.snsSection.is-youtube .snsLists {
  grid-template-columns: minmax(0, 1fr);
  gap: calc(16 * var(--d));
}
.snsList a {
  display: block;
  padding: calc(12 * var(--d));
  text-decoration: none;
}
.snsList .imgObj {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--dtGray);
}
.snsSection.is-youtube .snsList .imgObj {
  aspect-ratio: 255 / 165;
}
.snsList img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.snsMore {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(16 * var(--d));
}
/* 文字の最小は従来どおり 10px */
.snsMore .liquidMore {
  --u: var(--d);
  --liquidMoreFsMin: 10px;
}

@media screen and (min-width: 769px) {
  .snsLists {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(16 * var(--d));
  }
  .snsSection.is-youtube .snsLists {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (min-width: 961px) {
  .CreatorDetailArea {
    padding: calc(192 * var(--d)) 0 0 calc(284 * var(--d));
  }
  .profileGlp {
    flex-flow: row;
    align-items: flex-start;
    gap: calc(62.5 * var(--d));
    min-height: calc(611 * var(--d));
    padding: calc(32 * var(--d));
  }
  .profileGlp .mainImg {
    flex: none;
    width: calc(413.5 * var(--d));
  }
  .profileGlp .profileTxt {
    flex: 1;
    font-size: calc(16 * var(--d));
  }
  .profileGlp .name {
    font-size: calc(48 * var(--d));
  }
  /* 名前の上端から 63.5 にアイコン（Figma の Instagram アイコンは約 27×25） */
  .profileGlp .snsIconLists {
    margin-top: calc(6 * var(--d));
  }
  /* アイコンの下端から 105.4 に見出し（Figma：名前の上端から 195） */
  .profileGlp .catchObj {
    margin-top: calc(105.4 * var(--d));
  }

  .CreatorSnsArea {
    padding: calc(88 * var(--d)) 0 var(--dtFtrGap) calc(284 * var(--d)); /* 下はフッターまで 20vw（下層共通） */
  }
  .snsSection + .snsSection {
    margin-top: calc(96 * var(--d));
  }
  .snsSection .dtSecTtlObj {
    margin-bottom: calc(29.6 * var(--d));
  }
  .snsLists {
    gap: calc(16 * var(--d)) calc(32 * var(--d));
  }
  .snsSection.is-youtube .snsLists {
    gap: calc(48 * var(--d));
  }
  .snsList a {
    padding: calc(16 * var(--d));
  }
}