@charset "UTF-8";

/* ========================================
   LP共通ベース
======================================== */
.p-feature {
  overflow-x: clip;
  padding-bottom: 30rem;
}

.p-feature img {
  display: block;
  max-width: 100%;
}

/* フェードイン */
.p-feature__fade {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.p-feature__fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   MV — CSSアニメーションで確実にフェードイン
======================================== */
@keyframes p-feature-mv-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.p-feature__mv {
  width: 100%;
  line-height: 0;
  animation: p-feature-mv-fade-in 0.8s ease both;
  animation-delay: 0.05s;
}

.p-feature__mv picture,
.p-feature__mv img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   リード文エリア
======================================== */
.p-feature__lead {
  padding: 18rem 0 24rem;
}

.p-feature__lead__inner {
  display: flex;
  justify-content: space-between;
  margin: 0 6rem;
  align-items: flex-start;
}

.p-feature__lead__title {
  flex: 0 0 calc(600 * (100vw / 1440));
}

.p-feature__lead__heading {
  font-family: var(--font-zen-kaku-gothic-new), sans-serif;
  font-size: 2.4rem;
  line-height: 2;
  font-weight: 500;
  margin: 0;
}

.p-feature__lead__body {
  width: calc(600 * (100vw / 1440));
  flex: 0 0 auto;
}

.p-feature__lead__body p {
  font-family: var(--font-zen-kaku-gothic-new), sans-serif;
  font-size: 1.5rem;
  line-height: 2;
  font-weight: 500;
  margin: 0;
}

/* ========================================
   アーティストセクション 共通
======================================== */
.p-feature__person {
  position: relative;
}

/* ---- name-area (sticky): 3列フラット配置 ---- */
.p-feature__person__name-area {
  position: sticky;
  top: 40px;
  z-index: 10;
  display: flex;
  align-items: center;
  padding-left: calc(20 * (100vw / 1440));
  padding-right: calc(19 * (100vw / 1440));
  margin: 0;
  transform: translateZ(0);
}

.p-feature__person__number {
  flex: 0 0 calc(340 * (100vw / 1440));
  font-family: var(--font-barbour-sans), sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.p-feature__person__name-group {
  flex: 1;
  display: flex;
  align-items: center;
}

.p-feature__person__name {
  flex: 0 0 calc(721 * (100vw / 1440));
  font-family: var(--font-zen-kaku-gothic-new), sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 500;
  text-align: center;
  margin: 0;
}

/* 英語名: Barbour Sans Regular */
#komi .p-feature__person__name,
#himi .p-feature__person__name,
#yurino .p-feature__person__name,
#roy .p-feature__person__name,
#julia .p-feature__person__name,
#machina .p-feature__person__name {
  font-family: var(--font-barbour-sans), sans-serif;
  font-weight: 400;
}

.p-feature__person__role {
  flex: 0 0 calc(340 * (100vw / 1440));
  font-family: var(--font-zen-kaku-gothic-new), sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 500;
  text-align: right;
}

/* ---- テキストエリア ---- */
.p-feature__person__text__block {
  width: 36rem;
  margin-bottom: 6rem;
}

.p-feature__person__text__block:last-child {
  margin-bottom: 0;
}

.p-feature__person__text__heading {
  font-family: var(--font-zen-kaku-gothic-new), sans-serif;
  font-size: 2rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin: 0 0 3rem;
}

.p-feature__person__text__body {
  font-family: var(--font-zen-kaku-gothic-new), sans-serif;
  font-size: 1.5rem;
  line-height: 2;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin: 0;
}

/* ---- アイテムリンク ---- */
.p-feature__person__item__name {
  font-family: var(--font-barbour-sans), sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 400;
  margin: 0 0 2rem;
}

.p-feature__person__item__price-row {
  display: flex;
  align-items: center;
  gap: calc(10 * (100vw / 1440));
}

.p-feature__person__item__price {
  font-family: var(--font-barbour-sans), sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 400;
}

.p-feature__person__item__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 1.8rem;
  min-width: 60px;
  min-height: 16px;
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  font-family: var(--font-barbour-sans), sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.p-feature__person__item__buy:hover {
  background-color: #000;
  color: #fff;
}

.p-feature__person:last-child .p-feature__person__body {
  margin-bottom: 0;
}

/* ========================================
   PC レイアウト (min-width: 768px)
======================================== */
@media (min-width: 768px) {
  .p-feature__person__name-area {
    margin-bottom: 2rem;
  }

  /* ---- body: CSS Grid ---- */
  /* col1=左マージン(120) | col2=左コンテンツ幅(540) | col3=中央ギャップ(120) | col4=右コンテンツ幅(540) | col5=右マージン(120) */
  .p-feature__person__body {
    display: grid;
    grid-template-columns:
      calc(120 * (100vw / 1440))
      calc(540 * (100vw / 1440))
      calc(120 * (100vw / 1440))
      calc(540 * (100vw / 1440))
      calc(120 * (100vw / 1440));
    grid-template-rows:
      calc(900 * (100vw / 1440))  /* row1: ギャラリー */
      auto;                        /* row2: portrait-l / text-col / item を同一行に配置 */
    margin-bottom: 30rem;
    position: relative;
  }

  /* ---- ギャラリー: 全幅 row 1 ---- */
  .p-feature__person__gallery {
    position: static;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: calc(900 * (100vw / 1440));
    overflow: visible !important;
  }

  .p-feature__person__gallery .swiper-wrapper {
    display: flex !important;
    transform: none !important;
    height: 100% !important;
  }

  .p-feature__person__gallery .swiper-slide {
    width: 50% !important;
    height: 100% !important;
    flex-shrink: 0;
    margin-right: 0 !important;
  }

  .p-feature__person__gallery .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---- portrait-l: row 2 / align-self: start → margin-top で縦位置を制御 ---- */
  .p-feature__person__portrait-l {
    position: static;
    top: auto;
    left: auto;
    grid-row: 2;
    align-self: start;
  }

  /* ---- item: row 2 / align-self: end → portrait-s と底辺を常に揃える ---- */
  .p-feature__person__item {
    position: static;
    top: auto;
    left: auto;
    grid-row: 2;
    align-self: end;
  }

  .p-feature__person__portrait-l {
    width: calc(540 * (100vw / 1440));
    height: calc(675 * (100vw / 1440));
    overflow: hidden;
    /* 160px gap to item top + 56px item height = 216px → 広い画面でも portrait-l と item の間を常に 160px 確保 */
    margin-bottom: 21.6rem;
  }

  .p-feature__person__portrait-l img,
  .p-feature__person__portrait-s img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .p-feature__person__portrait-s {
    width: calc(420 * (100vw / 1440));
    height: calc(525 * (100vw / 1440));
    overflow: hidden;
  }

  .p-feature__person__item {
    width: calc(540 * (100vw / 1440));
  }

  /* ---- text-col: テキスト + portrait-s を縦積みするラッパー ----
     DOM順: portrait-s → text
     flex-direction: column-reverse で視覚順: text (上) → 120px gap → portrait-s (下)
     align-self: end → portrait-s 底辺を item 底辺と常に揃える
     margin-top がグリッド行高に加算され、テキストが gallery 下端から 120px の位置に来る */
  .p-feature__person__text-col {
    position: static;
    grid-row: 2;
    align-self: end;
    display: flex;
    flex-direction: column-reverse;
    gap: 12rem;
  }

  /* ---- 奇数セクション (--odd): portrait-l・item = col2 / text-col = col4 ---- */
  .p-feature__person--odd .p-feature__person__portrait-l {
    grid-column: 2;
  }

  .p-feature__person--odd .p-feature__person__text-col {
    grid-column: 4;
    margin-top: 12rem;
  }

  .p-feature__person--odd .p-feature__person__text {
    margin-left: calc(180 * (100vw / 1440));
    text-align: left;
  }

  .p-feature__person--odd .p-feature__person__item {
    grid-column: 2;
    text-align: left;
  }

  .p-feature__person--odd .p-feature__person__item__price-row {
    justify-content: flex-start;
  }

  /* ---- 偶数セクション (--even): portrait-l・item = col4 / text-col = col2 ---- */
  .p-feature__person--even .p-feature__person__portrait-l {
    grid-column: 4;
  }

  .p-feature__person--even .p-feature__person__text-col {
    grid-column: 2;
    margin-top: calc(120 * (100vw / 1440));
  }

  .p-feature__person--even .p-feature__person__text {
    text-align: left;
  }

  .p-feature__person--even .p-feature__person__portrait-s {
    margin-left: calc(120 * (100vw / 1440));
  }

  .p-feature__person--even .p-feature__person__item {
    grid-column: 4;
    text-align: right;
  }

  .p-feature__person--even .p-feature__person__item__price-row {
    justify-content: flex-end;
  }

  /* ---- セクション別 portrait-l 縦位置 (Figmaの座標からギャラリー下端を引いた値) ----
     item は align-self: end のため margin-top 指定不要 */
  /* 01 kaneko (ODD) */
  #kaneko .p-feature__person__portrait-l { margin-top: 36rem; }

  /* 02 komi (EVEN) */
  #komi .p-feature__person__portrait-l   { margin-top: 39.4rem; }

  /* 03 himi (ODD) */
  #himi .p-feature__person__portrait-l   { margin-top: 42.4rem; }

  /* 04 yurino (EVEN) */
  #yurino .p-feature__person__portrait-l { margin-top: 42.5rem; }

  /* 05 roy (ODD) */
  #roy .p-feature__person__portrait-l    { margin-top: 45.4rem; }

  /* 06 julia (EVEN) */
  #julia .p-feature__person__portrait-l  { margin-top: 48.4rem; }

  /* 07 machina (ODD) */
  #machina .p-feature__person__portrait-l { margin-top: 45.4rem; }

  /* 08 tetsutaro (EVEN) */
  #tetsutaro .p-feature__person__portrait-l { margin-top: 54.4rem; }
}

/* ========================================
   SP レイアウト (max-width: 767px)
======================================== */
@media (max-width: 767px) {
  /* text-col: SP では display:contents で透過し、子要素が親の通常フローに参加 */
  .p-feature__person__text-col {
    display: contents;
  }

  /* リード文 */
  .p-feature__lead {
    padding: calc(100 * (100vw / 402)) 0 calc(160 * (100vw / 402));
  }

  .p-feature__lead__inner {
    display: block;
    margin: 0 calc(21 * (100vw / 402));
  }

  .p-feature__lead__title {
    flex: none;
    margin-bottom: calc(60 * (100vw / 402));
  }

  .p-feature__lead__heading {
    font-size: calc(24 * (100vw / 402));
    line-height: 2;
  }

  .p-feature__lead__body {
    flex: none;
    width: auto;
  }

  .p-feature__lead__body p {
    font-size: calc(14 * (100vw / 402));
    line-height: 2;
  }

  /* name-area SP: 番号左 / 名前+肩書き右列縦積み */
  .p-feature__person__name-area {
    top: 20px;
    align-items: flex-start;
    justify-content: space-between;
    padding-left: calc(21 * (100vw / 402));
    padding-right: calc(21 * (100vw / 402));
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: calc(20 * (100vw / 402));
  }

  .p-feature__person__number {
    flex: 0 0 calc(90 * (100vw / 402));
    font-size: calc(14 * (100vw / 402));
    padding-top: 0.3rem;
  }

  .p-feature__person__name-group {
    flex: 0 0 calc(270 * (100vw / 402));
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: calc(16 * (100vw / 402));
  }

  .p-feature__person__name {
    flex: none;
    font-size: calc(20 * (100vw / 402));
    line-height: 1.2;
    text-align: right;
    width: 100%;
  }

  .p-feature__person__role {
    flex: none;
    font-size: calc(14 * (100vw / 402));
    line-height: 1;
    text-align: right;
    width: 100%;
  }

  /* body: 通常フロー */
  .p-feature__person__body {
    position: static;
    margin-bottom: calc(160 * (100vw / 402));
  }

  /* ギャラリー: Swiper有効 */
  .p-feature__person__gallery {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: calc(450 * (100vw / 402));
    overflow: hidden !important;
    margin-bottom: calc(60 * (100vw / 402));
  }

  .p-feature__person__gallery .swiper-slide {
    width: calc(360 * (100vw / 402)) !important;
    height: 100% !important;
  }

  .p-feature__person__gallery .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ポートレート画像: 通常フロー */
  .p-feature__person__portrait-l,
  .p-feature__person__portrait-s {
    position: relative;
    left: auto;
    top: auto;
    overflow: hidden;
  }

  .p-feature__person__portrait-l img,
  .p-feature__person__portrait-s img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 奇数セクション SP */
  .p-feature__person--odd .p-feature__person__portrait-l {
    width: calc(270 * (100vw / 402));
    height: calc(338 * (100vw / 402));
    margin-left: calc(21 * (100vw / 402));
    margin-top: calc(10 * (100vw / 402));
  }

  .p-feature__person--odd .p-feature__person__portrait-s {
    width: calc(240 * (100vw / 402));
    height: calc(300 * (100vw / 402));
    margin-left: calc(141 * (100vw / 402));
    margin-top: calc(20 * (100vw / 402));
  }

  /* 偶数セクション SP */
  .p-feature__person--even .p-feature__person__portrait-l {
    width: calc(270 * (100vw / 402));
    height: calc(338 * (100vw / 402));
    margin-left: calc(111 * (100vw / 402));
    margin-top: calc(10 * (100vw / 402));
  }

  .p-feature__person--even .p-feature__person__portrait-s {
    width: calc(240 * (100vw / 402));
    height: calc(300 * (100vw / 402));
    margin-left: calc(21 * (100vw / 402));
    margin-top: calc(20 * (100vw / 402));
  }

  /* テキストエリア SP */
  .p-feature__person__text {
    position: static;
    width: auto;
    top: auto;
    left: auto;
    margin: calc(60 * (100vw / 402)) calc(21 * (100vw / 402)) 0;
  }

  .p-feature__person__text__block {
    width: auto;
    max-width: none;
    margin-bottom: 6rem;
  }

  .p-feature__person__text__heading {
    font-size: calc(18 * (100vw / 402));
    line-height: 1;
    margin: 0 0 3rem;
  }

  .p-feature__person__text__body {
    font-size: calc(14 * (100vw / 402));
    line-height: 2;
  }

  /* アイテムリンク SP */
  .p-feature__person__item {
    position: static;
    width: auto;
    top: auto;
    left: auto;
    margin: calc(100 * (100vw / 402)) calc(21 * (100vw / 402)) calc(20 * (100vw / 402));
  }

  .p-feature__person--odd .p-feature__person__item {
    text-align: left;
  }

  .p-feature__person--even .p-feature__person__item {
    text-align: right;
  }

  .p-feature__person--odd .p-feature__person__item__price-row {
    justify-content: flex-start;
  }

  .p-feature__person--even .p-feature__person__item__price-row {
    justify-content: flex-end;
  }

  .p-feature__person__item__name {
    font-size: calc(14 * (100vw / 402));
    margin: 0 0 1.6rem;
  }

  .p-feature__person__item__price-row {
    gap: 1rem;
  }

  .p-feature__person__item__price {
    font-size: calc(14 * (100vw / 402));
  }

  .p-feature__person__item__buy {
    width: calc(60 * (100vw / 402));
    height: calc(15 * (100vw / 402));
    min-width: 50px;
    min-height: 14px;
    font-size: calc(13 * (100vw / 402));
  }

  /* SP ページ末尾余白 */
  .p-feature {
    padding-bottom: calc(160 * (100vw / 402));
  }
}