@charset "UTF-8";

/* パンくず下の余白（LPはパンくずとMVの間に余白がないため） */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* ===============================================
  初期設定
=============================================== */
.p-feature {
  /* SP特化型のため SP / PC で同じデザイン値を使う。
     - SP(〜767px): calc(● * (100vw / 375))
     - PC(768px〜): アートボード 1400 基準の vw で、コンテンツ幅が 480px（= 375 × 1.28）になるよう換算
     サイト共通 CSS が 1200px 以下で html の font-size を縮めるため、PC で rem を基準にすると
     768〜1199px でコンテンツ幅が意図せず縮む。参考 LP（anyfee 260625）と同じ vw 基準に揃える。
     --formula    … SPデザイン値（375 基準）の換算用
     --formula-pc … PCネイティブ値（1400 基準。左右レール・ロゴ・PCナビ）の換算用 */
  --sp-artboard-width: 375;
  --pc-artboard-width: 1400;
  --pc-content-width: 480;

  --variable: calc(100vw / var(--sp-artboard-width));
  --ratio: 1;
  --formula: calc(var(--variable) * var(--ratio));
  --formula-pc: var(--variable);

  --color-black: #191d1f;
  --color-white: #fff;
  --color-gray: #838586;
  --color-buy: #050505;

  --font-eng: var(--helvetica-neue);
  --font-jp: var(--noto-sans);

  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-jp);
}

@media only screen and (min-width: 768px) {
  .p-feature {
    --variable: calc(100vw / var(--pc-artboard-width));
    --ratio: calc(var(--pc-content-width) / var(--sp-artboard-width));

    /* 1400px でデザインどおり 480px。
       下限 1px … 1093px 未満ではコンテンツ幅を SP アートボードと同じ 375px に保ち、
                   文字が 10px を割って読めなくなるのを防ぐ
       上限 1.28px … 1400px 超でコンテンツ幅を 480px で止め、支給画像（750px）の拡大を防ぐ
       いずれも境界は連続で、段差は生じない */
    --formula: clamp(1px, calc(var(--variable) * var(--ratio)), calc(var(--pc-content-width) / var(--sp-artboard-width) * 1px));
    --formula-pc: min(var(--variable), 1px);
  }
}

.p-feature :where(img, svg) {
  width: 100%;
  height: auto;
}

/* ハッシュ直アクセス（URL 直打ち・ブラウザの戻る）でも見出しがサイト共通の固定ヘッダーに
   潜らないようにする。--header-offset は script.js が #Head の実寸から書き戻す */
.p-feature .section-item,
.p-feature .section-novelty {
  scroll-margin-top: var(--header-offset, 0px);
}

/* S-1/S-2: Splide の CSS は初期化前の .splide を visibility:hidden にする。
   script.js や CDN が読めないときにスライダーの中身が丸ごと消えるため、既定を可視に戻す。
   未初期化でも素の並びで破綻しないよう、フェード側のスライド幅も指定しておく */
.p-feature .splide {
  visibility: visible;
}

.section-novelty__slider .splide__slide {
  width: 100%;
}

/* ===============================================
  レイアウト（PC: 左レール / 本体480px / 右レール）
=============================================== */
@media only screen and (min-width: 768px) {
  .p-feature__layout {
    display: flex;
    /* align-items は既定の stretch のまま。flex-start にするとレールが中身の高さまでしか
       伸びず、sticky の可動域が 0 になって追従しなくなる */
    justify-content: center;
  }

  /* 本体の幅は中身と同じ --formula 基準で出す（SPアートボード 375 の実寸）。
     --formula-pc で出すとクランプ後に中身と幅がずれて右レールへはみ出す */
  .p-feature__main {
    flex: 0 0 calc(var(--sp-artboard-width) * var(--formula));
    width: calc(var(--sp-artboard-width) * var(--formula));
  }

  .p-feature__rail {
    flex: 1 1 0;
    min-width: 0;
  }

  /* 左右カラムの中身は sticky で追従（Figma コメント指定） */
  .p-feature__rail-inner {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* ビューポートが低く中身が入り切らない場合でも先頭が切れないようにする */
    justify-content: safe center;
    box-sizing: border-box;
    height: 100vh;
    overflow-y: auto;
    padding: calc(40 * var(--formula-pc)) calc(15 * var(--formula-pc));
    scrollbar-width: none;
  }

  .p-feature__rail-inner::-webkit-scrollbar {
    display: none;
  }

  .p-feature__rail-inner > * {
    flex: 0 0 auto;
  }
}

/* ===============================================
  左レール：ロゴ（PCのみ）
=============================================== */
@media only screen and (min-width: 768px) {
  .p-feature__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--formula-pc));
    line-height: 1.25;
    white-space: nowrap;
  }

  .p-feature__logo-en {
    font-family: var(--font-eng);
    font-size: calc(16 * var(--formula-pc));
    font-weight: 700;
    letter-spacing: 0.15em;
  }

  .p-feature__logo-jp {
    font-family: var(--font-jp);
    font-size: calc(20 * var(--formula-pc));
    font-weight: 700;
    letter-spacing: 0.05em;
  }
}

/* ===============================================
  メインビジュアル
=============================================== */
.p-feature__mv img {
  display: block;
}

/* ===============================================
  リード
=============================================== */
.p-feature__lead {
  padding: calc(60 * var(--formula)) 0 calc(40 * var(--formula));
  letter-spacing: 0.05em;
  text-align: center;
}

.p-feature__lead-title {
  font-size: calc(16 * var(--formula));
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.05em;
}

.p-feature__lead-text {
  margin-top: calc(26 * var(--formula));
  font-size: calc(13 * var(--formula));
  line-height: 2;
  letter-spacing: 0.05em;
}

/* ===============================================
  機能アイコン
=============================================== */
.p-feature__icons {
  display: flex;
  justify-content: center;
  gap: calc(30 * var(--formula));
  width: calc(345 * var(--formula));
  margin: 0 auto;
}

.p-feature__icon {
  position: relative;
  width: calc(90 * var(--formula));
  height: calc(90 * var(--formula));
}

.p-feature__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像に焼き込まれたラベルを白ボックスで隠し、テキストで置き換える（デザイン準拠） */
.p-feature__icon-label {
  position: absolute;
  top: calc(70 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* 画像に焼き込まれた文字（90px幅）を必ず覆いつつ、文言が長くても白地からはみ出さない */
  min-width: 100%;
  width: max-content;
  padding: calc(5 * var(--formula)) calc(10 * var(--formula));
  background-color: var(--color-white);
  color: #000;
  font-family: var(--font-jp);
  font-size: calc(10 * var(--formula));
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
}

/* ===============================================
  バナー
=============================================== */
.p-feature__banner {
  width: calc(345 * var(--formula));
  margin: calc(60 * var(--formula)) auto 0;
}

/* ===============================================
  無限ループスライダー（8枚）
=============================================== */
.p-feature__loop {
  margin-top: calc(60 * var(--formula));
}

.p-feature__loop .splide__slide {
  width: calc(150 * var(--formula));
}

/* ===============================================
  商品セクション
=============================================== */
.section-item {
  margin-top: calc(80 * var(--formula));
}

.section-item:first-of-type {
  margin-top: calc(60 * var(--formula));
}

/* 見出し */
.c-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--formula));
  padding-bottom: calc(30 * var(--formula));
  line-height: 1;
}

.c-heading--novelty {
  padding-bottom: calc(20 * var(--formula));
}

.c-heading__number {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(7 * var(--formula));
}

.c-heading__series {
  font-family: var(--font-eng);
  font-size: calc(13 * var(--formula));
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

.c-heading__series--jp {
  font-family: var(--font-jp);
}

.c-heading__title {
  font-family: var(--font-eng);
  font-size: calc(26 * var(--formula));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
}

.c-heading__sub {
  font-family: var(--font-jp);
  font-size: calc(13 * var(--formula));
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
}

/* 画像グループ */
.c-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--formula));
}

.c-images--nogap {
  gap: 0;
}

.c-images--gap20 {
  padding-top: calc(20 * var(--formula));
}

.c-images__full {
  width: 100%;
}

.c-images__mid {
  width: calc(300 * var(--formula));
}

.c-images__pair {
  display: flex;
  width: 100%;
}

.c-images__pair img {
  width: 50%;
}

/* 商品情報 */
.c-products {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(8 * var(--formula));
  padding: calc(15 * var(--formula)) calc(15 * var(--formula)) 0 0;
}

.c-products--gap20 {
  padding-top: calc(20 * var(--formula));
}

.c-products__item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: calc(25 * var(--formula));
}

.c-products__name {
  width: calc(130 * var(--formula));
  font-family: var(--font-eng);
  font-size: calc(12 * var(--formula));
  letter-spacing: 0.08em;
  line-height: 1;
}

.c-products__buy {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(5 * var(--formula)) calc(6 * var(--formula));
  background-color: var(--color-buy);
  color: var(--color-white);
  font-family: var(--font-eng);
  font-size: calc(13 * var(--formula));
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
}

/* ===============================================
  SPECIAL NOVELTY
=============================================== */
.section-novelty {
  margin-top: calc(80 * var(--formula));
  padding: calc(40 * var(--formula)) 0;
  background-color: #FAFAFA;
}

.section-novelty__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(30 * var(--formula));
}

.section-novelty__subheading {
  box-sizing: border-box;
  width: calc(345 * var(--formula));
  padding: calc(10 * var(--formula)) 0;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-jp);
  font-size: calc(13 * var(--formula));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
}

.section-novelty__slider {
  width: calc(300 * var(--formula));
  margin: 0 auto;
}

/* クロスフェードでの自動切り替え（3枚）。
   重ね合わせは Splide 側（core CSS の opacity/z-index ＋ スライドへの translateX）が担うため、
   position や width を自前で書き換えない（書き換えると translateX と競合して位置がずれる）。
   ここでは透過のトランジションだけを指定する。 */
.section-novelty__slider .splide__track--fade > .splide__list > .splide__slide {
  transition: opacity 1.2s ease;
}

.section-novelty__text {
  padding-top: calc(20 * var(--formula));
  font-family: var(--font-jp);
  letter-spacing: 0.05em;
  text-align: center;
}

.section-novelty__text-title {
  font-size: calc(16 * var(--formula));
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.05em;
}

.section-novelty__text-body {
  margin-top: calc(26 * var(--formula));
  font-size: calc(13 * var(--formula));
  line-height: 2;
  letter-spacing: 0.05em;
}

.section-novelty__note {
  margin-top: calc(26 * var(--formula));
  color: var(--color-gray);
  font-size: calc(11 * var(--formula));
  line-height: 2;
  letter-spacing: 0.05em;
}

/* ===============================================
  下部ボタン
=============================================== */
.p-feature__buttons {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--formula));
  width: calc(345 * var(--formula));
  margin: 0 auto;
  padding: calc(40 * var(--formula)) 0 calc(80 * var(--formula));
}

.c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: calc(50 * var(--formula));
  font-family: var(--font-jp);
  font-size: calc(16 * var(--formula));
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-decoration: none;
}

.c-button--outline {
  border: 1px solid var(--color-black);
  color: var(--color-black);
}

.c-button--fill {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* ===============================================
  アンカーナビ
  SP: 画面下部に固定（リードを通過したら表示）/ PC: 右レール内で sticky 追従
=============================================== */
.p-feature__nav {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  overflow-x: auto;
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.p-feature__nav::-webkit-scrollbar {
  display: none;
}

/* 「リードを通過したら表示」は JS が動いているときだけの挙動にする。
   script.js が読めない / JS 無効の環境では .js-lp が付かず、ナビは出たままになる */
@media only screen and (max-width: 767px) {
  .js-lp .p-feature__nav {
    visibility: hidden;
    opacity: 0;
    transform: translateY(100%);
  }

  .js-lp .p-feature__nav.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  /* S-5: 固定ナビがフッター下端を恒久的に隠さないよう、ナビの高さぶんの逃げを作る */
  body {
    padding-bottom: calc(49 * (100vw / 375));
  }

  /* S-4: サイト共通のページトップボタン（既定 bottom:40）が固定ナビと重なりタップを奪うため、
     デザインどおりナビの上（ナビ48px + 余白12px）へ逃がす */
  body.is-nav-visible .footer__pagetop-button,
  body.is-nav-visible .pagetop-button {
    bottom: calc(60 * (100vw / 375));
  }
}

.p-feature__nav-list {
  display: flex;
  width: max-content;
}

.p-feature__nav-item {
  flex: 0 0 auto;
}

.p-feature__nav-item a {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--formula));
  box-sizing: border-box;
  height: calc(48 * var(--formula));
  padding: 0 calc(15 * var(--formula));
  border-top: 1px solid var(--color-black);
  border-right: 1px solid var(--color-black);
  border-bottom: 1px solid var(--color-black);
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-eng);
  font-size: calc(16 * var(--formula));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.p-feature__nav-item:last-child a {
  border-right: 0;
}

.p-feature__nav-arrow {
  flex: 0 0 auto;
  width: calc(20 * var(--formula));
}

@media only screen and (min-width: 768px) {
  .p-feature__nav {
    position: static;
    width: calc(300 * var(--formula-pc));
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .p-feature__nav-list {
    display: block;
    width: 100%;
  }

  .p-feature__nav-item a {
    justify-content: space-between;
    gap: calc(10 * var(--formula-pc));
    height: calc(60 * var(--formula-pc));
    padding: 0 calc(15 * var(--formula-pc));
    border-top: 0;
    border-right: 0;
    font-size: calc(16 * var(--formula-pc));
  }

  .p-feature__nav-item:first-child a {
    border-top: 1px solid var(--color-black);
  }

  .p-feature__nav-item:last-child a {
    border-right: 0;
  }

  .p-feature__nav-arrow {
    width: calc(20 * var(--formula-pc));
  }

  .p-feature__buttons{
    padding: calc(80 * var(--formula)) 0 calc(30 * var(--formula));  
  }
}