@charset "UTF-8";

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

.p-feature__mv-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 960;
}

/* ==========================================================================
   intro (lead_area)
   ========================================================================== */
.p-feature__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* gap: calc(120 * (100vw / 1440)); */
  margin-top: 18rem;
  padding: 0 60px;
  box-sizing: border-box;
  /* width: calc(1320 * (100vw / 1440)); */
  margin-inline: auto;
}

.p-feature__intro-heading {
  /* width: 60rem; */
  flex: 1 1 0;
  margin: 0;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 2;
  color: #000;
}

.p-feature__intro-heading-br {
  display: inline;
}

.p-feature__intro-lead {
  /* width: 60rem; */
  display: block;
  flex: 1 1 0;
  margin: 0;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #000;
}

/* ==========================================================================
   item (商品セクション共通)
   ========================================================================== */
.p-feature__item {
  margin-top: calc(300 * (100vw / 1440));
}

.p-feature__item--first {
  margin-top: calc(240 * (100vw / 1440));
}

.p-feature__item-title {
  position: sticky;
  top: calc(var(--header-height, 0px) + 4rem);
  z-index: 10;
  margin: 0;
  padding: 0 calc(60 * (100vw / 1440));
  transition: top 0.3s ease-in-out;
  font-family: var(--font-barbour-sans);
  font-weight: 300;
  font-size: 4rem;
  line-height: 1;
  text-align: center;
  color: #000;
}

.p-feature__item-images {
  display: flex;
  flex-direction: column;
  gap: calc(20 * (100vw / 1440));
  margin-top: calc(120 * (100vw / 1440));
}

.p-feature__item-row--double {
  display: flex;
  gap: 0;
}

.p-feature__item-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Figma の画像フレーム比率に合わせて表示 bounds を固定する
   (全幅カット 1440x960 = 3/2、2分割・スライド用カット 720x900 = 4/5) */
.p-feature__item-row--single .p-feature__item-image {
  aspect-ratio: 3 / 2;
}

.p-feature__item-row--double .p-feature__item-image {
  width: 50%;
  min-width: 0;
  aspect-ratio: 4 / 5;
}

/* フェードイン（ぼかし→くっきり）: 画像行・プロフィールエリアのみ対象
   JS 未実行時にも要素が見えるよう、初期状態は data-fade-hidden (JS が付与) がある時だけ隠す */
[data-fade-in] {
  transition: opacity 0.8s ease, filter 0.8s ease;
}

[data-fade-in][data-fade-hidden] {
  opacity: 0;
  filter: blur(20px);
}

/* カラー/モノクロ 無限スライド（右→左） */
.p-feature__item-marquee {
  overflow: hidden;
  width: 100%;
}

.p-feature__item-marquee-track {
  display: flex;
  width: 200%;
  animation: p-feature-marquee 16s linear infinite;
}

/* 4枚 = 表示窓 2 枚分。1 枚 = 窓の 50% (1440px 時 720px) */
.p-feature__item-marquee-track .p-feature__item-image {
  width: 25%;
  min-width: 0;
  flex-shrink: 0;
  aspect-ratio: 4 / 5;
}

@keyframes p-feature-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.p-feature__item-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: calc(60 * (100vw / 1440));
  padding: 0 calc(60 * (100vw / 1440));
}

.p-feature__item-name {
  margin: 0;
  font-family: var(--font-barbour-sans);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}

.p-feature__item-price-area {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * (100vw / 1440));
}

.p-feature__item-price {
  margin: 0;
  font-family: var(--font-barbour-sans);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}

.p-feature__item-buy {
  display: block;
  width: calc(70 * (100vw / 1440));
  border: 1px solid #000;
  font-family: var(--font-barbour-sans);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  text-align: center;
  color: #000;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

/* ==========================================================================
   profile (section06)
   ========================================================================== */
.p-feature__profile {
  margin-top: calc(300 * (100vw / 1440));
  padding: calc(180 * (100vw / 1440)) calc(60 * (100vw / 1440)) calc(125 * (100vw / 1440));
  background-color: #000;
  background-image: url(../images/noisebg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.p-feature__profile-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.p-feature__profile-main {
  display: flex;
  flex-direction: column;
  gap: calc(104 * (100vw / 1440));
  width: 42rem;
}

.p-feature__profile-name {
  display: flex;
  flex-direction: column;
  gap: calc(20 * (100vw / 1440));
}

.p-feature__profile-name-en {
  margin: 0;
  font-family: var(--font-barbour-sans);
  font-weight: 300;
  font-size: 6.4rem;
  line-height: 1;
  color: #fff;
}

.p-feature__profile-name-ja {
  margin: 0;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1;
  color: #fff;
}

.p-feature__profile-photo-area {
  display: flex;
  flex-direction: column;
  gap: calc(20 * (100vw / 1440));
}

.p-feature__profile-photo {
  display: block;
  width: 24rem;
  height: auto;
  object-fit: cover;
}

.p-feature__profile-bio {
  margin: 0;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2;
  color: #fff;
}

.p-feature__profile-qa {
  display: flex;
  flex-direction: column;
  gap: calc(60 * (100vw / 1440));
  width: 42rem;
}

.p-feature__profile-qa-item {
  display: flex;
  flex-direction: column;
  gap: calc(30 * (100vw / 1440));
}

.p-feature__profile-question {
  margin: 0;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.444;
  color: #fff;
}

.p-feature__profile-answer {
  margin: 0;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2;
  color: #fff;
}

/* ==========================================================================
   cta (btn_area)
   ========================================================================== */
/* .p-feature__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(960 * (100vw / 1440));
  margin: calc(300 * (100vw / 1440)) auto 0;
  padding: calc(20 * (100vw / 1440));
  background-color: #4e4e4e;
} */

.p-feature__cta-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(960 * (100vw / 1440));
  margin: calc(300 * (100vw / 1440)) auto 0;
  padding: calc(20 * (100vw / 1440));
  background-color: #4e4e4e;
  border: solid 1px #4e4e4e;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.p-feature__cta-link:hover {
  background-color: #fff;
  color: #4e4e4e;
}

.intro_half {
  width: 60rem;
}

/* ==========================================================================
   SP (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .p-feature {
    padding-bottom: calc(180 * (100vw / 402));
  }

  .p-feature__mv-image {
    aspect-ratio: 402 / 536;
  }

  .p-feature__intro {
    flex-direction: column;
    gap: calc(60 * (100vw / 402));
    margin-top: calc(100 * (100vw / 402));
    padding: 0 calc(21 * (100vw / 402));
    width: unset;
  }

  .intro_half {
    width: calc(360 * (100vw / 402));
  }

  .p-feature__intro-heading {
    width: 100%;
  }

  .p-feature__intro-heading-br {
    display: none;
  }

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

  .p-feature__item {
    margin-top: calc(240 * (100vw / 402));
  }

  .p-feature__item--first {
    margin-top: calc(160 * (100vw / 402));
  }

  .p-feature__item-title {
    top: calc(var(--header-height, 0px) + 20 * (100vw / 402));
    padding: 0 calc(21 * (100vw / 402));
    font-size: calc(24 * (100vw / 402));
    line-height: 1;
  }

  .p-feature__item-images {
    gap: calc(20 * (100vw / 402));
    margin-top: calc(40 * (100vw / 402));
  }

  /* SP は 2分割ペアも縦積みで、ペア内の間隔は 0 (Figma: 502px 画像が y 連続) */
  .p-feature__item-row--double {
    flex-direction: column;
    gap: 0;
  }

  /* SP の縦カット枠は 402x502 (PC の 720x900 と僅差のため SP 側で上書き) */
  .p-feature__item-row--double .p-feature__item-image,
  .p-feature__item-marquee-track .p-feature__item-image {
    aspect-ratio: 402 / 502;
  }

  .p-feature__item-row--double .p-feature__item-image {
    width: 100%;
  }

  /* 4枚 = 表示窓 4 枚分。1 枚 = 窓の 100% (402px 時 402px) */
  .p-feature__item-marquee-track {
    width: 400%;
  }

  .p-feature__item-link {
    margin-top: calc(40 * (100vw / 402));
    padding: 0 calc(21 * (100vw / 402));
  }

  .p-feature__item-name,
  .p-feature__item-price {
    font-size: calc(14 * (100vw / 402));
    line-height: 1;
  }

  .p-feature__item-price-area {
    gap: calc(10 * (100vw / 402));
  }

  .p-feature__item-buy {
    width: calc(70 * (100vw / 402));
    font-size: calc(13 * (100vw / 402));
    line-height: 1;
  }

  .p-feature__profile {
    margin-top: calc(240 * (100vw / 402));
    padding: calc(140 * (100vw / 402)) calc(21 * (100vw / 402));
  }

  .p-feature__profile-inner {
    flex-direction: column;
  }

  .p-feature__profile-main {
    gap: calc(92 * (100vw / 402));
    width: 100%;
  }

  .p-feature__profile-name {
    gap: calc(20 * (100vw / 402));
  }

  .p-feature__profile-name-en {
    font-size: calc(48 * (100vw / 402));
    line-height: 1;
  }

  .p-feature__profile-name-ja {
    font-size: calc(18 * (100vw / 402));
    line-height: 1.444;
  }

  .p-feature__profile-photo-area {
    gap: calc(20 * (100vw / 402));
  }

  .p-feature__profile-photo {
    width: calc(240 * (100vw / 402));
  }

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

  .p-feature__profile-qa {
    gap: calc(60 * (100vw / 402));
    width: calc(300 * (100vw / 402));
    margin-top: calc(234 * (100vw / 402));
    margin-left: calc(60 * (100vw / 402));
  }

  .p-feature__profile-qa-item {
    gap: calc(30 * (100vw / 402));
  }

  .p-feature__profile-question {
    font-size: calc(18 * (100vw / 402));
    line-height: 1.444;
  }

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

  /* .p-feature__cta {
    width: calc(360 * (100vw / 402));
    margin: calc(180 * (100vw / 402)) auto 0;
    padding: calc(20 * (100vw / 402));
  } */

  .p-feature__cta-link {
    width: calc(360 * (100vw / 402));
    margin: calc(180 * (100vw / 402)) auto 0;
    padding: calc(20 * (100vw / 402));
    font-size: calc(14 * (100vw / 402));
    line-height: 1;
  }
}