@charset "UTF-8";

/* ========================================================
                      * Variable *
===========================================================
  単位システム（coding-guidelines.md 1章参照）
  - SP特化型部分       : calc(N * var(--rem))      ※Nはデザインの値（単位なし）
  - SP（768px以下）    : calc(N * (100vw / アートボード幅))
  - PC（769px以上）    : rem（1rem = 10px）
  - line-height        : 単位なし
  - letter-spacing     : em

  ▼SP特化型デザインの場合: 以下の :root 一式を案件の値に合わせて使う。
    --pw          : PCデザイン幅（例 1600）
    --sw          : SPアートボード幅（例 750）
    --artboard-pw : PC上でSPレイアウトを表示する幅（例 500）
    --artboard-sw : SPアートボード幅（例 750）
  ▼SP特化型でない場合: この :root ブロックごと削除してよい。
========================================================= */
:root {
  --pw: 1440; /* PC幅 */
  --sw: 390; /* SP幅 */
  --artboard-pw: 390; /* PCアートボード幅（SPレイアウトを等倍表示） */
  --artboard-sw: 390; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  /* SP をベースに定義（768px 未満＝max-width:768px 相当）。
     整数 px の min/max ペアだと 768.x px で変数が未定義になり --rem が壊れるため、
     SP をデフォルト値として持たせ、PC のみ min-width で上書きする。 */
  --ratio: 1;
  --variable: calc(100vw / var(--sw));
}

@media (min-width: 769px) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}

/* ========================================================
                      * Design Token *
===========================================================
  LP固有のカスタムプロパティは :root ではなく .p-feature に定義する。
  色・フォントは案件のデザインに合わせて書き換える。
  Webフォントを使う場合は読み込みコードをユーザーから受領する
  （Claudeが外部から取得・kitId推測をしてはならない）。
========================================================= */
.p-feature {
  --base-font-color: #323232;
  --color-accent: #ea7d75;

  --lp-font-ja: "noto-sans-cjk-jp", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: "the-seasons", Arial, sans-serif;
  --lp-font-en_inter: "inter-18pt", Arial, sans-serif;

  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);
  --letter-spacing: .05em;

  /* z-index 採番（coding-guidelines.md 2-5）
     ▼サイト共通（マスターページ側。LP から変更しない）
       #header : 999   ← モーダルはこれより必ず上に出す
       #footer :   2   ← Site Common Override で指定
     ▼LP 内。生の数値ではなく必ずこの変数を使う */
  --z-behind: -1; /* 直近の親要素内で背面に回す装飾用 */
  --z-base: 1; /* 通常の重なり調整（画像の前後関係など） */
  --z-sticky: 10; /* LP 内の追従要素（追従CTA・SP特化型の左右ロゴ/ナビ）※ヘッダーより下 */
  --z-modal-overlay: 1000; /* モーダルの背景。#header(999) より上 */
  --z-modal: 1010; /* モーダル本体・閉じるボタン */

  /* 追従ヘッダー #header の実測高さ。script.js の initHeaderOffset() が上書きする。
     プレビュー HTML には #header が無いため 0px のまま（＝影響なし） */
  --header-h: 0px;
}

/* ========================================================
                      * Reset (LPスコープ内) *
===========================================================
  全ブランド共通で使う .lp_contents スコープ内リセット。
  :where() で詳細度を上げずに閉じ込める。原則ここは変更しない。
========================================================= */
.lp_contents {
  position: relative;
  font-family: var(--lp-font-ja);
  color: var(--base-font-color, #000);
  font-style: normal;
  letter-spacing: var(--letter-spacing);

  & * {
    font-feature-settings: "palt";
  }

  & *,
  & *:before,
  & *:after {
    box-sizing: border-box;
  }

  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup, b) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: var(--letter-spacing);
  }

  & ul,
  & li {
    list-style: none;
  }

  & :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }

  & sup {
    top: 0;
    font-size: .6em;
    vertical-align: super;
  }

  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition: opacity var(--duration) var(--timing), color var(--duration) var(--timing), background-color var(--duration) var(--timing), border-color var(--duration) var(--timing);
  }

  & :where(a) {
    color: inherit;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }

  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ========================================================
                      * Site Common Override *
===========================================================
  本番(aspx)でマスターページが出力するサイト共通要素の上書き。
  aspx 納品時は必ず入れる（coding-guidelines.md 6-7 参照）。
  - #Wrap   : 幅が効かず横スクロールが出る事例があるため width:100% を明示
  - #footer : LP 内の fixed / z-index 要素がフッターに重なるのを防ぐ
  プレビュー HTML には #Wrap / #footer が無いため無効（aspx 化後に効く）。
  .lp_contents スコープ外への例外的な指定。この 2 つ以外は追加しない。
========================================================= */
#Wrap {
  width: 100%;
}

#footer {
  position: relative;
  z-index: 100;
}

/* ========================================================
                      * Anchor Offset *
===========================================================
  本番のサイト共通ヘッダー #header は追従（fixed）のため、ページ内
  アンカーの着地位置をヘッダーの高さ分ずらす（coding-guidelines.md 3-1）。
  --header-h には script.js の initHeaderOffset() が実測値を入れる
  （高さは SP/PC・ブランドで異なるので固定値で持たない）。
  scroll-margin-top なので JS のスムーススクロールだけでなく、
  ハッシュ付き URL での直接着地・ブラウザバック・Tab フォーカスにも効く。
  アンカー上に余白も入れたい場合は calc(var(--header-h) + 20 * var(--rem)) 等にする。
========================================================= */
.lp_contents {
  & [id] {
    scroll-margin-top: var(--header-h, 0px);
  }
}

/* ========================================================
                      * Utility *
===========================================================
  u-d-lg : PC(769px以上)のみ表示 / u-d-md : SP(768px以下)のみ表示
========================================================= */
.lp_contents {
  & .u-d-lg {
    @media (max-width: 768px) {
      display: none !important;
    }
  }

  & .u-d-md {
    @media (min-width: 769px) {
      display: none !important;
    }
  }
}

/* ========================================================
                      * SP Content Wrap *
===========================================================
  SP特化型デザイン: PC(769px以上)では SP レイアウト（各 section）を
  アートボード幅(390px相当 = calc(390 * var(--rem)))に固定して中央配置する。
  左右の .project-pc-catch / .project-pc-nav（.u-d-lg）はこの制約の対象外。
========================================================= */
.lp_contents {
  @media (min-width: 769px) {
    /* PCフレーム全体の背景色（Figma PCフレーム #fff8d9）。
       左右固定エリアの白背景装飾（雲形吹き出し・ナビの半透明ピル）は
       この背景色が無いと視認できないため必須 */
    background-color: #fff8d9;

    & > :not(.u-d-lg) {
      max-width: calc(390 * var(--rem));
      margin-inline: auto;
    }
  }
}

/* ========================================================
                      * Accordion *
===========================================================
  script.js の accordion() と対。
  .js-accordion--body には .accordion__body を併記して使う
  （.js-* にスタイルを当てない規約のため）。不要なら削除。
========================================================= */
.lp_contents {
  & .accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--transition-timing);
  }
}

/* ========================================================
                      * Modal *
===========================================================
  script.js の modal() と対。
  .js-modal--container には .modal を併記して使う
  （.js-* にスタイルを当てない規約のため）。不要ならこのブロックを削除。

  z-index はサイト共通ヘッダー #header(999) より上に出すため
  --z-modal-overlay / --z-modal を使う（coding-guidelines.md 2-5）。
  ※祖先要素に transform / filter / opacity(<1) / will-change / contain が
    付くと新しいスタッキングコンテキストが作られ、いくら z-index を上げても
    #header より下に潜る。モーダルは .lp_contents 直下に置き、祖先に
    これらのプロパティを付けないこと（position: fixed も同様に壊れる）。

  サイズ・色・余白は案件のデザインに合わせて書き換える
  （var(--rem) は SP特化型用。それ以外の案件は単位を合わせる）。
========================================================= */
.lp_contents {
  & .modal {
    position: fixed;
    z-index: var(--z-modal-overlay);
    inset: 0;
    display: none;
    place-items: center;
    overflow-y: auto;
    padding: calc(40 * var(--rem, 1px));
    background: rgb(0 0 0 / .7);

    &.is-open {
      display: grid;
    }
  }

  & .modal__body {
    position: relative;
    z-index: var(--z-modal);
    width: 100%;
    max-width: calc(670 * var(--rem, 1px));
    background: #fff;
  }

  & .border {
    display: block;
    border-top: #EBC7A7 dotted calc(1 * var(--rem));
    margin: calc(40 * var(--rem)) auto;
  }

}

/* ========================================================
                      * Animation *
===========================================================
  .js-intersection : スクロールで表示領域に入ったら is-active が付く
  （script.js の initScrollAnimations と対）。不要なら削除。
  ※SP特化型でない案件では var(--rem, 1px) がフォールバックの 1px になり
    移動量 40px 固定になる。案件の単位系に合わせて値を調整すること。
========================================================= */
.lp_contents {
  & .js-intersection {
    opacity: 0;
    translate: 0 calc(40 * var(--rem, 1px));
    transition: opacity .8s var(--transition-timing), translate .8s var(--transition-timing);

    &.is-active {
      opacity: 1;
      translate: 0 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents .js-intersection {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* ========================================================
                      * Mainvisual *
========================================================= */



/* ========================================================
                      * Section *
========================================================= */

/* ========================================================
                      * PC Catch *
===========================================================
  Figma: fileKey ecv9QCHPZF9MKHOSMstkYL / nodeId 331:7713（Group 303）
  SP特化型デザインのPC専用・左側固定エリア（キャッチコピー＋取扱店ロゴ）。
  親フレーム「PC」（1440幅）内での本ブロック左上座標 = x:39 / y:300。
  左右カラムのため coding-guidelines.md 1-3 のとおり calc(N * var(--rem-pc)) を使用
  （SP補正 var(--ratio) をかけない生のPC単位）。
  水平位置は画面中央からの相対計算式（720 = --pw(1440) / 2）:
    left: calc(50% - (720 - 39) * var(--rem-pc)) = calc(50% - 681 * var(--rem-pc))
  PC（769px以上）のみ表示。SPでは .u-d-lg（.lp_contents 側で定義済み）が非表示にする。

  ▼フォント要注意（要ユーザー確認。coding-guidelines.md 7章）
  Figma指定は "Noto Sans JP"。他セクション同様にWebフォントを追加せず
  var(--lp-font-ja) で近似（システムのゴシック体スタック）。
========================================================= */
.lp_contents {
  & .project-pc-catch {
    position: fixed;
    left: calc(50% - 681 * var(--rem-pc));
    top: calc(300 * var(--rem-pc));
    z-index: var(--z-sticky);
    width: calc(447.89 * var(--rem-pc));
    height: calc(264.14 * var(--rem-pc));
    font-family: var(--lp-font-ja);
    color: var(--base-font-color);
    text-align: center;

    & .project-pc-catch__deco {
      position: absolute;
      left: calc(16.65 * var(--rem-pc));
      top: calc(17.65 * var(--rem-pc));
      transform: rotate(5deg);
      display: block;

      & img {
        display: block;
        width: calc(429 * var(--rem-pc));
        height: calc(201 * var(--rem-pc));
      }
    }

    & .project-pc-catch__lead {
      position: absolute;
      left: calc(65.65 * var(--rem-pc));
      top: calc(65 * var(--rem-pc));
      width: calc(303 * var(--rem-pc));
      font-size: calc(14 * var(--rem-pc));
      font-weight: 500;
      line-height: 2;
      letter-spacing: .05em;
    }

    & .project-pc-catch__sub {
      position: absolute;
      left: calc(65.65 * var(--rem-pc));
      top: calc(94.14 * var(--rem-pc));
      width: calc(303 * var(--rem-pc));
      line-height: 2;
      letter-spacing: .05em;
    }

    & .project-pc-catch__sub-en {
      font-size: calc(17 * var(--rem-pc));
      font-weight: 700;
    }

    & .project-pc-catch__sub-note {
      font-size: calc(13 * var(--rem-pc));
      font-weight: 700;
    }

    & .project-pc-catch__sub-desc {
      font-size: calc(17 * var(--rem-pc));
      font-weight: 500;
    }

    & .project-pc-catch__copy {
      position: absolute;
      left: calc(30.65 * var(--rem-pc));
      top: calc(119.14 * var(--rem-pc));
      width: calc(379 * var(--rem-pc));
      font-size: calc(28 * var(--rem-pc));
      font-weight: 700;
      line-height: 2;
      letter-spacing: .05em;
      color: #ea7d75;
    }

    & .project-pc-catch__logo {
      position: absolute;

      & img {
        display: block;
      }
    }

    & .project-pc-catch__logo--ck {
      left: calc(60.65 * var(--rem-pc));
      top: calc(231.14 * var(--rem-pc));
      width: calc(144 * var(--rem-pc));
    }

    & .project-pc-catch__logo-main {
      width: calc(144 * var(--rem-pc));
      height: calc(18 * var(--rem-pc));
    }

    & .project-pc-catch__logo-sub {
      width: calc(127 * var(--rem-pc));
      height: calc(9 * var(--rem-pc));
      margin: calc(3.51 * var(--rem-pc)) auto 0;
    }

    & .project-pc-catch__logo--biople {
      left: calc(269.65 * var(--rem-pc));
      top: calc(228.14 * var(--rem-pc));
      width: calc(90 * var(--rem-pc));
      height: calc(36 * var(--rem-pc));

      & img {
        width: calc(90 * var(--rem-pc));
        height: calc(36 * var(--rem-pc));
      }
    }

    & .project-pc-catch__divider {
      position: absolute;
      left: calc(234.65 * var(--rem-pc));
      top: calc(235.14 * var(--rem-pc));
      display: block;
      height: calc(22 * var(--rem-pc));
      border-left: 1px solid #bbbbba;
    }
  }
}

/* ========================================================
                      * PC Nav *
===========================================================
  Figma: fileKey ecv9QCHPZF9MKHOSMstkYL / nodeId 359:7790（Group 312）
  SP特化型デザインのPC専用・右側固定エリア（ページ内アンカーナビ、4項目）。
  親フレーム「PC」（1440幅）内での本ブロック左上座標 = x:1044 / y:276。
  水平位置は画面中央からの相対計算式（720 = --pw(1440) / 2）:
    left: calc(50% + (1044 - 720) * var(--rem-pc)) = calc(50% + 324 * var(--rem-pc))
  PC（769px以上）のみ表示。SPでは .u-d-lg が非表示にする。

  ▼フォント要注意（要ユーザー確認。coding-guidelines.md 7章）
  英字サブテキストの書体はFigma上 "The Seasons"（有償・未支給）のため、
  他セクション（s3/s5/s6）に合わせて --font-en-accent でセリフ体フォールバックとした。
========================================================= */
.lp_contents {
  & .project-pc-nav {
    --font-en-accent: "the-seasons", "Hiragino Mincho ProN", "Yu Mincho", serif;

    position: fixed;
    left: calc(50% + 324 * var(--rem-pc));
    top: calc(276 * var(--rem-pc));
    z-index: var(--z-sticky);
    width: calc(270 * var(--rem-pc));
    height: calc(317 * var(--rem-pc));
    font-family: var(--lp-font-ja);

    & .project-pc-nav__list {
      position: relative;
      width: 100%;
      height: 100%;
      list-style: none;
    }

    & .project-pc-nav__item {
      position: absolute;
      left: 0;
      width: 100%;
      height: calc(68 * var(--rem-pc));
    }

    & .project-pc-nav__item--about {
      top: 0;
    }

    & .project-pc-nav__item--survey {
      top: calc(83 * var(--rem-pc));
    }

    & .project-pc-nav__item--staffpick {
      top: calc(166 * var(--rem-pc));
    }

    & .project-pc-nav__item--kit {
      top: calc(249 * var(--rem-pc));
    }

    & .project-pc-nav__link {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: calc(40 * var(--rem-pc));
      background-color: rgba(255, 255, 255, .6);
      text-decoration: none;
    }

    & .project-pc-nav__ttl {
      position: absolute;
      left: calc(30 * var(--rem-pc));
      top: calc(16 * var(--rem-pc));
      font-size: calc(15 * var(--rem-pc));
      font-weight: 700;
      line-height: 1;
      color: var(--base-font-color);
      white-space: nowrap;
    }

    & .project-pc-nav__ttl-note {
      font-size: calc(12 * var(--rem-pc));
    }

    & .project-pc-nav__en {
      position: absolute;
      left: calc(30 * var(--rem-pc));
      top: calc(39 * var(--rem-pc));
      font-family: var(--font-en-accent);
      font-style: normal;
      font-size: calc(13 * var(--rem-pc));
      line-height: 1;
      letter-spacing: .05em;
      color: #da525f;
      white-space: nowrap;
    }

    & .project-pc-nav__arrow {
      position: absolute;
      left: calc(229.25 * var(--rem-pc));
      top: calc(31.25 * var(--rem-pc));
      display: block;

      & img {
        display: block;
        width: calc(11.5 * var(--rem-pc));
        height: calc(6.5 * var(--rem-pc));
      }
    }

    & .project-pc-nav__item--about {
      & .project-pc-nav__ttl {
        top: calc(15 * var(--rem-pc));
        font-size: calc(17 * var(--rem-pc));
      }

      & .project-pc-nav__en {
        top: calc(40 * var(--rem-pc));
      }
    }
  }
}

/* ========================================================
                      * SP Nav *
===========================================================
  Figma: fileKey ecv9QCHPZF9MKHOSMstkYL / nodeId 323:5255（Group 295）
  SPフレーム(216:324)内での座標 = x:360 / y:171、幅30×高さ554（画面右端フチに固定）。
  縦書き（writing-mode: vertical-rl）のページ内アンカータブ4項目。
  アンカー先ID（#PmsAbout/#Survey/#StaffPick/#Kit）はPC Nav（.project-pc-nav）と共通。
  各タブの top/height は子要素の絶対座標をセクション先頭(y:171)からの相対値に変換:
    PMSとは？      y:171〜295 (高さ124・アクティブ配色 #e8918c)
    アンケート結果 y:300〜438 (高さ138)
    スタッフおすすめ y:444〜596 (高さ152)
    お得なキット   y:601〜725 (高さ124)
  SP（768px以下）のみ表示。PCでは .u-d-md が非表示にする（.lp_contents側で定義済み）。
========================================================= */
.lp_contents {
  & .project-sp-nav {
    position: fixed;
    top: calc(150 * var(--rem));
    right: calc(-30 * var(--rem));
    z-index: var(--z-sticky);
    width: calc(30 * var(--rem));
    height: calc(554 * var(--rem));
    transition: all 1s ease;
  }

  & .project-sp-nav.m_fixed {
    position: fixed;
    right: 0;
    width: calc(30 * var(--rem));
    transition: all 1s ease;
  }

  & .project-sp-nav__list {
    position: relative;
    width: 100%;
    height: 100%;
  }

  & .project-sp-nav__item {
    position: absolute;
    right: 0;
    width: 100%;
  }

  & .project-sp-nav__item--about {
    top: 0;
    height: calc(124 * var(--rem));
  }

  & .project-sp-nav__item--survey {
    top: calc(129 * var(--rem));
    height: calc(138 * var(--rem));
  }

  & .project-sp-nav__item--staffpick {
    top: calc(273 * var(--rem));
    height: calc(152 * var(--rem));
  }

  & .project-sp-nav__item--kit {
    top: calc(430 * var(--rem));
    height: calc(124 * var(--rem));
  }

  & .project-sp-nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: calc(15 * var(--rem)) 0 0 calc(15 * var(--rem));
    background-color: #fff;
    box-shadow: 0 0 calc(10 * var(--rem)) rgba(0, 0, 0, .1);
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: calc(13 * var(--rem));
    font-weight: 500;
    line-height: 1.1;
    color: #323232;
    text-decoration: none;
    letter-spacing: 0.15em;
  }

  & .project-sp-nav__link span {
    writing-mode: sideways-rl;
  }

  & .project-sp-nav__item--about .project-sp-nav__link {
    letter-spacing: 0.15em;
  }
}

/* ========================================================
                      * Mainvisual *
===========================================================
  Figma: SP frame 216:324 の子
  - 商品写真         : 312:1545（Mask group）※実データは円形マスクではなく矩形390×390の
                        トリミング済み写真だったため、そのまま矩形画像として実装
  - 背景（クリーム）  : 216:1077（Rectangle 69）#fff6ee
  - キャッチコピー    : 216:337
  - リード文          : 216:338
========================================================= */
.lp_contents {
  & .project-mainvisual {

    & .project-mainvisual__photo {
      margin: 0;
      line-height: 0;

      & img {
        display: block;
        width: 100%;
        height: calc(390 * var(--rem));
        object-fit: cover;
      }
    }

    & .project-mainvisual__body {
      padding: calc(40 * var(--rem)) calc(20 * var(--rem)) calc(60 * var(--rem));
      background-color: #fff6ee;
      text-align: center;
    }

    & .project-mainvisual__catch {
      max-width: calc(317 * var(--rem));
      margin: 0 auto;
      font-size: calc(15 * var(--rem));
      font-weight: 500;
      line-height: 2;
      color: #323232;
      letter-spacing: .05em;
    }

    & .project-mainvisual__catch-strong {
      font-weight: 700;
    }

    & .project-mainvisual__catch-small {
      font-size: calc(12 * var(--rem));
      letter-spacing: .05em;
    }

    & .project-mainvisual__lead {
      max-width: calc(324 * var(--rem));
      margin: calc(15 * var(--rem)) auto 0;
      font-size: calc(15 * var(--rem));
      font-weight: 500;
      line-height: 2;
      color: #323232;
      letter-spacing: .05em;
    }

    /* Figma: 305:1456（自分に合ったアイテムがわからない！という方にも／お試ししやすいキットをご用意しました。） */
    & .project-mainvisual__note {
      max-width: calc(361 * var(--rem));
      margin: calc(9 * var(--rem)) auto 0;
      font-size: calc(15 * var(--rem));
      font-weight: 500;
      line-height: 2;
      color: #323232;
      letter-spacing: .05em;
    }
  }
}

/* ========================================================
                      * PMSとは？ *
===========================================================
  Figma: SP frame 216:324 の子（y=904〜1571相当）
  - 背景（波形カード） : 216:332（Union）#fbf0e9 ※clip-pathで再現（画像化しない）
  - セクション背景      : 216:331（Rectangle 17）#fff9f3
  - ホルモン変動図解     : 216:542（Group 109）
  座標はすべて図解カード（350×318）の左上を原点とするローカル座標に変換して算出。

  ▼フォント要注意（要ユーザー確認）
  "What is PMS?" と グラフの日数ラベル(1/14/28)は Figma 上で "The Seasons"
  （有償の欧文スクリプト/セリフ体）が指定されている。Adobe Fonts kitId の推測・
  外部取得はできないため、暫定で明朝系フォールバックを充てている。実運用フォント
  が決まり次第 --font-en-accent を差し替えること。
  ▼テキストの誤字疑いあり（要ユーザー確認）
  凡例「ブロゲステロン」は Figma 上の表記そのまま実装した。一般名称は「プロゲス
  テロン」のため、デザイン側の表記ゆれの可能性がある。
========================================================= */
.lp_contents {
  & .project-pms-about {
    --font-en-accent: "the-seasons", "Hiragino Mincho ProN", "Yu Mincho", serif;

    position: relative;
    overflow: hidden;
    background-color: #fff9f3;

    & .project-pms-about__wave {
      position: absolute;
      inset: 0 0 auto 0;
      z-index: var(--z-base);
      display: block;
      width: 100%;
      height: calc(622 * var(--rem));
      background-color: #fbf0e9;
      clip-path: polygon(0 0, 100% 0, 100% 96.755%, 50% 100%, 0 96.755%);
    }

    & .project-pms-about__inner {
      position: relative;
      z-index: calc(var(--z-base) + 1);
      padding: calc(60 * var(--rem)) calc(20 * var(--rem)) calc(95 * var(--rem));
      text-align: center;
    }

    & .project-pms-about__title {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0;
    }

    & .project-pms-about__title-main {
      font-size: calc(24 * var(--rem));
      font-weight: 700;
      line-height: 1.5;
      color: #323232;
      letter-spacing: .05em;
    }

    & .project-pms-about__title-small {
      font-size: calc(15 * var(--rem));
      letter-spacing: .05em;
    }

    & .project-pms-about__title-en {
      display: block;
      margin-top: calc(8 * var(--rem));
      font-family: var(--font-en-accent);
      font-size: calc(18 * var(--rem));
      line-height: normal;
      color: #da525f;
      letter-spacing: .05em;
    }

    & .project-pms-about__lead {
      margin: calc(25 * var(--rem)) 0 0;
      font-size: calc(15 * var(--rem));
      font-weight: 600;
      line-height: 1.8;
      color: #323232;
      letter-spacing: .05em;
    }

    & .project-pms-about__text {
      margin: calc(10 * var(--rem)) 0 0;
      font-size: calc(14 * var(--rem));
      font-weight: 400;
      line-height: 1.8;
      color: #323232;
      letter-spacing: .05em;
    }

    /* ------------------------------
       ホルモン変動 図解カード
       350 x 318 を基準としたローカル座標
    ------------------------------ */
    & .project-pms-about__diagram {
      position: relative;
      width: calc(350 * var(--rem));
      height: calc(318 * var(--rem));
      margin: calc(20 * var(--rem)) auto 0;
      border-radius: calc(10 * var(--rem));
      background-color: #fff;
    }

    & .project-pms-about__diagram-pill {
      position: absolute;
      top: calc(10 * var(--rem));
      display: flex;
      align-items: center;
      justify-content: center;
      height: calc(30 * var(--rem));
      margin: 0;
      font-size: calc(12 * var(--rem));
      font-weight: 500;
      line-height: 1.8;
      letter-spacing: .05em;

      &.project-pms-about__diagram-pill--01 {
        left: calc(10 * var(--rem));
        width: calc(43 * var(--rem));
        border-radius: calc(4 * var(--rem)) 0 0 calc(4 * var(--rem));
        background-color: #e6c8bf;
        color: #763d43;
      }

      &.project-pms-about__diagram-pill--02 {
        left: calc(53 * var(--rem));
        width: calc(87 * var(--rem));
        background-color: #f9e7e2;
        color: #963a43;
      }

      &.project-pms-about__diagram-pill--03 {
        left: calc(140 * var(--rem));
        width: calc(70 * var(--rem));
        background-color: #faeecb;
        color: #7d6c3b;
      }

      &.project-pms-about__diagram-pill--04 {
        left: calc(210 * var(--rem));
        width: calc(130 * var(--rem));
        border-radius: 0 calc(5 * var(--rem)) calc(5 * var(--rem)) 0;
        background-color: #e6e4b3;
        color: #736f1e;
      }
    }

    & .project-pms-about__diagram-axis {
      position: absolute;
      left: calc(10 * var(--rem));
      top: calc(239 * var(--rem));
      display: block;
      width: calc(330 * var(--rem));
      height: calc(10 * var(--rem));

      &::before {
        content: "";
        position: absolute;
        top: calc(4.5 * var(--rem));
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #68523b;
      }
    }

    & .project-pms-about__diagram-axis-tick {
      position: absolute;
      top: 0;
      width: 1px;
      height: 100%;
      background-color: #68523b;

      &.project-pms-about__diagram-axis-tick--start {
        left: 0;
      }

      &.project-pms-about__diagram-axis-tick--mid {
        left: 50%;
      }

      &.project-pms-about__diagram-axis-tick--end {
        right: 0;
      }
    }

    & .project-pms-about__diagram-day {
      position: absolute;
      top: calc(259 * var(--rem));
      margin: 0;
      font-family: var(--font-en-accent);
      font-size: calc(14 * var(--rem));
      font-weight: 500;
      line-height: normal;
      color: #68523b;
      text-align: center;
      transform: translate(-50%, -50%);

      &.project-pms-about__diagram-day--01 {
        left: calc(12.5 * var(--rem));
      }

      &.project-pms-about__diagram-day--14 {
        left: calc(175 * var(--rem));
      }

      &.project-pms-about__diagram-day--28 {
        left: calc(329 * var(--rem));
      }
    }

    & .project-pms-about__diagram-day-unit {
      margin-left: .1em;
      font-family: var(--lp-font-ja);
      font-size: calc(8 * var(--rem));
      font-weight: 500;
      font-style: normal;
    }

    & .project-pms-about__diagram-legend {
      position: absolute;
      top: calc(290.5 * var(--rem));
      margin: 0;
      padding-left: 1.2em;
      font-size: calc(14 * var(--rem));
      font-weight: 500;
      line-height: 1.8;
      text-align: center;
      transform: translate(-50%, -50%);

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(7 * var(--rem));
        height: calc(7 * var(--rem));
        border-radius: 50%;
        transform: translateY(-50%);
      }

      &.project-pms-about__diagram-legend--estrogen {
        left: calc(116.5 * var(--rem));
        color: #9f333e;

        &::before {
          background-color: #9f333e;
        }
      }

      &.project-pms-about__diagram-legend--progesterone {
        left: calc(228.5 * var(--rem));
        color: #7d781c;

        &::before {
          background-color: #7d781c;
        }
      }
    }

    & .project-pms-about__diagram-curve {
      position: absolute;
      display: block;

      &.project-pms-about__diagram-curve--estrogen {
        top: calc(85 * var(--rem));
        left: calc(11 * var(--rem));
        width: calc(328 * var(--rem));
        height: calc(137 * var(--rem));
      }

      &.project-pms-about__diagram-curve--progesterone {
        top: calc(57 * var(--rem));
        left: calc(10 * var(--rem));
        width: calc(329 * var(--rem));
        height: calc(168 * var(--rem));
      }
    }

    & .project-pms-about__diagram-highlight {
      position: absolute;
      top: calc(46 * var(--rem));
      left: calc(214 * var(--rem));
      display: block;
      width: calc(126 * var(--rem));
      height: calc(187 * var(--rem));
      border-radius: calc(5 * var(--rem));
      background: linear-gradient(to bottom, rgb(235 167 220 / .45), rgb(248 196 197 / .45));
    }

    & .project-pms-about__diagram-icon {
      position: absolute;
      top: calc(97 * var(--rem));
      left: calc(243.76 * var(--rem));
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(26.06 * var(--rem));
      height: calc(33.77 * var(--rem));

      img {
        display: block;
        width: calc(26.86 * var(--rem));
        height: calc(16.49 * var(--rem));
        transform: rotate(60.32deg) skewX(9.59deg);
      }
    }

    & .project-pms-about__diagram-caption {
      position: absolute;
      top: calc(139 * var(--rem));
      left: calc(277 * var(--rem));
      margin: 0;
      font-size: calc(16 * var(--rem));
      font-weight: 700;
      line-height: normal;
      color: #c15761;
      letter-spacing: .05em;
      text-align: center;
      white-space: nowrap;
      transform: translate(-50%, -50%);

      span {
        font-size: calc(12 * var(--rem));
        letter-spacing: .05em;
      }
    }

    & .project-pms-about__diagram-caption {

    }
  }
}

/* ========================================================
                  * Survey (アンケート結果) *
===========================================================
  Figma: fileKey=ecv9QCHPZF9MKHOSMstkYL / SPフレーム 216:324 の子要素
  主要nodeId: 216:1096, 216:344(円グラフ), 216:352(凡例), 323:4287, 323:4273,
              331:6176, 331:6181, 323:4278, 331:6188, 331:6194, 312:4236
  SP特化型のため単位は calc(N * var(--rem))（Nはデザイン実測px、単位なし）。
  円グラフ(216:344)はFigmaの get_metadata バウンディングボックスが実描画と
  一致しなかったため、実レンダリングをピクセル計測して実寸(直径260px、
  SPフレーム内で水平中央)を採用している。角度比率(42/41/14/3)はエクスポート
  したSVGパス(260×260)から実測。表示ラベルの数値(42.7/41.5/14)はFigmaの
  テキストノードをそのまま転記（4区分目「今はない」はFigma上に数値ラベルが
  存在しないため未記載）。
  棒グラフのバー幅・グラデーション色は get_design_context のコードをそのまま
  転記（項目数が多いため、幅・色はHTML側でCSSカスタムプロパティ指定）。
========================================================= */
.lp_contents {
  & .project-survey {
    --survey-accent: #eb9474;
    --survey-text: #323232;
    --survey-mark: #ffeeb3;
    --survey-card-bg: #fdf2e8;
    --survey-card-border: #f6e6dc;

    position: relative;
    width: 100%;
    padding-inline: calc(21 * var(--rem));
    padding-bottom: calc(60 * var(--rem));
    box-sizing: border-box;
    background-color: #fff9f3;
    color: var(--survey-text);
  }

  /* ---- Intro heading (216:1096) ---- */
  & .project-survey__intro {
    text-align: center;
  }

  & .project-survey__intro-heading {
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 2;
  }

  & .project-survey__intro-line {
    display: block;
  }

  & .project-survey__intro-sub {
    margin-top: calc(4 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.8;
    /* .p-feature既定の--letter-spacing(.075em)のままだと3行に折り返るため
       他の要素同様.05em相当に指定してデザイン通り2行に収める */
    letter-spacing: .05em;
  }

  & .project-survey__sm {
    font-size: calc(14 * var(--rem));
    font-weight: 500;
  }

  & .project-survey__paren {
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    letter-spacing: .05em;
  }

  /* 1行目「…に対して」・2行目「どんなお悩みを抱えているか」それぞれの下の
     マーカー線(216:1095 / 216:1094)。画像化せずCSSの背景色で再現。
     各行に1本ずつ引く（以前は2本とも2行目に重ねて描画していた誤りを修正）。 */
  & .project-survey__mark {
      background: linear-gradient(transparent 70%, var(--survey-mark) 0%);
  }

  /* ---- Q&A吹き出し (323:4287 / 331:6176 / 331:6181 / 331:6188 共通) ---- */
  & .project-survey__block {
    /* Figma実測のブロック間隔（吹き出し上のオーバーシュート分を含む） */
    margin-top: calc(40 * var(--rem));
  }

  & .component-qa-bubble {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(347.33 * var(--rem));
    min-height: calc(160 * var(--rem));
    margin-inline: auto;
    padding: calc(18 * var(--rem)) calc(20 * var(--rem));

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url(../img/bg_survey_qa_bubble.svg) no-repeat center / 100% 100%;
    }
  }

  & .component-qa-bubble__text {
    position: relative;
    z-index: var(--z-base);
    font-size: calc(15 * var(--rem));
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .05em;
    text-align: center;
  }

  & .component-qa-bubble__text.__2 {
    margin-top: calc(-12 * var(--rem));
  }


  & .component-qa-bubble__mark {
    font-size: calc(21 * var(--rem));
    font-weight: 700;
    color: var(--survey-accent);
    font-family: var(--lp-font-en);
  }

  /* ---- 円グラフ (216:344 + 216:352) ---- */
  & .component-pie-chart {
    margin-top: calc(0 * var(--rem));
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .component-pie-chart__graph {
    position: relative;
    width: calc(260 * var(--rem));
    height: calc(260 * var(--rem));
    border-radius: 50%;
    /* 実データの割合: いつもある42.7% / ときどきある41.5% / 特にない14% / 今はない1.8%。
       凡例ドット(下記component-pie-chart__dot)と同じ色でフラットに塗る
       （デザインは各扇形が単色。グラデーションは使わない）。
       開始角度は -45deg（Figmaのスクリーンショットを角度サンプリングして実測）。 */
    background: conic-gradient(
      from -45deg,
      #f8a386 0% 42.7%,
      #93b0e3 42.7% 84.2%,
      #ecc76a 84.2% 98.2%,
      #ccc 98.2% 100%
    );
  }

  & .component-pie-chart__label {
    position: absolute;
    translate: -50% -50%;
    font-family: var(--lp-font-en_inter);
    font-size: calc(22 * var(--rem));
    font-weight: 700;
    color: #fff;
    white-space: nowrap;

    & i {
      font-size: calc(15 * var(--rem));
      font-style: normal;
    }

    /* 座標は各扇形の中心角度（from -45deg基準）から算出した円グラフ中心
       からの相対位置(%)。半径27%で扇形の中間あたりに配置。
       HTML順は --1=42.7%(いつもある) / --2=14%(特にない) / --3=41.5%(ときどきある) */
    &.component-pie-chart__label--1 {
      /* いつもある 42.7%（中心角度 約32deg） */
      left: 68%;
      top: 33%;
    }

    &.component-pie-chart__label--2 {
      /* 特にない 14%（中心角度 約283deg） */
      left: 20%;
      top: 45%;
    }

    &.component-pie-chart__label--3 {
      /* ときどきある 41.5%（中心角度 約183deg） */
      left: 52%;
      top: 77%;
    }
  }

  & .component-pie-chart__legend {
    margin-top: calc(20 * var(--rem));
    display: grid;
    grid-template-columns: repeat(2, auto);
    column-gap: calc(25 * var(--rem));
    row-gap: calc(5 * var(--rem));
    justify-content: center;

    & li {
      display: flex;
      align-items: center;
      gap: calc(6 * var(--rem));
      font-size: calc(13 * var(--rem));
      font-weight: 400;
      white-space: nowrap;
    }
  }

  & .component-pie-chart__dot {
    display: inline-block;
    width: calc(11 * var(--rem));
    height: calc(11 * var(--rem));
    border-radius: 50%;
    background: var(--dot-color, #ccc);
  }

  /* ---- サマリーボックス (312:4236) ---- */
  & .component-result-box {
    margin-top: calc(24 * var(--rem));
    padding: calc(15 * var(--rem)) calc(10 * var(--rem)) calc(10 * var(--rem));
    border: 1px solid var(--survey-card-border);
    border-radius: calc(10 * var(--rem));
    background: var(--survey-card-bg);
    text-align: center;

    & strong {
      display: block;
      font-size: calc(15 * var(--rem));
      font-weight: 700;
      line-height: 1.6;
      letter-spacing: .05em;
    }

    & span {
      display: block;
      margin-top: calc(3 * var(--rem));
      font-size: calc(14 * var(--rem));
      font-weight: 400;
      line-height: 1.8;
    }
  }

  /* ---- 棒グラフ (323:4273 / 323:4278) ---- */
  & .component-bar-chart {
    margin-top: calc(0 * var(--rem));
  }

  & .component-bar-chart__item {
    margin-bottom: calc(15.5 * var(--rem));

    &.component-bar-chart__item--last {
      margin-bottom: 0;
    }
  }

  & .component-bar-chart__label {
    margin-bottom: calc(5 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
  }

  & .component-bar-chart__row {
    display: flex;
    align-items: center;
    gap: calc(5 * var(--rem));
  }

  & .component-bar-chart__bar {
    width: calc(var(--bar-w) * var(--rem));
    height: calc(28 * var(--rem));
    flex-shrink: 0;
    border-radius: 0 calc(4 * var(--rem)) calc(4 * var(--rem)) 0;
    background: linear-gradient(90deg, var(--bar-from), var(--bar-to));
    opacity: .6;
  }

  & .component-bar-chart__value {
    flex-shrink: 0;
    font-family: var(--lp-font-en_inter);
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    color: var(--survey-accent);

    & i {
      font-size: calc(14 * var(--rem));
      font-style: normal;
    }
  }

  /* ---- ランキング (331:6194) ---- */
  & .component-ranking {
    margin-top: calc(5 * var(--rem));
    display: flex;
    flex-wrap: wrap;
    gap: calc(15 * var(--rem)) calc(14 * var(--rem));
  }

  /* Figmaでは円バッジがカード左端に一部重なる配置だが、テキスト中央揃えとの
     両立を優先し、バッジ+カードを隙間ありで並べるシンプルな横並びで再現する。 */
  & .component-ranking__item {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: calc(10 * var(--rem));
  }

  & .component-ranking__card {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: calc(4 * var(--rem));
    background: var(--survey-card-bg);
    text-align: center;
    font-weight: 500;
    padding-left: calc(10 * var(--rem));
  }

  & .component-ranking__badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    line-height: 1;

    & strong {
      font-family: var(--lp-font-en);
      font-weight: 700;
    }

    & em {
      font-style: normal;
      font-weight: 500;
      font-size: calc(14 * var(--rem));
    }
  }

  /* 1位〜3位: 全幅カード + カラー円バッジ(白文字) */
  & .component-ranking__item--1,
  & .component-ranking__item--2,
  & .component-ranking__item--3 {
    & .component-ranking__badge {
      color: #fff;
    }
  }

  & .component-ranking__item--1 {
    & .component-ranking__card {
      height: calc(50 * var(--rem));
      font-size: calc(16 * var(--rem));
    }

    & .component-ranking__badge {
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(50 * var(--rem));
      height: calc(50 * var(--rem));
      background: linear-gradient(135deg, #f0e0a4, #f0c837);

      & strong {
        font-size: calc(30 * var(--rem));
      }
    }
  }

  & .component-ranking__item--2 {
    & .component-ranking__card {
      display: flex;
      align-items: center;
      height: calc(45 * var(--rem));
      font-size: calc(14 * var(--rem));
      padding-left: calc(10 * var(--rem));
    }

    & .component-ranking__badge {
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(45 * var(--rem));
      height: calc(45 * var(--rem));
      background: linear-gradient(135deg, #c5cdd4, #9cb7c1);

      & strong {
        font-size: calc(26 * var(--rem));
      }
    }
  }

  & .component-ranking__item--3 {
    & .component-ranking__card {
      height: calc(45 * var(--rem));
      font-size: calc(14 * var(--rem));
    }

    & .component-ranking__badge {
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(45 * var(--rem));
      height: calc(45 * var(--rem));
      background: linear-gradient(135deg, #eec9ad, #d2a786);

      & strong {
        font-size: calc(26 * var(--rem));
      }
    }
  }

  /* 4位・5位: 半幅で横並び + グレー円バッジ(黒文字) */
  & .component-ranking__item--4,
  & .component-ranking__item--5 {
    flex: 1 1 calc(50% - 7 * var(--rem));

    & .component-ranking__card {
      height: calc(44.978 * var(--rem));
      font-size: calc(13 * var(--rem));
    }

    & .component-ranking__badge {
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(44.978 * var(--rem));
      height: calc(44.978 * var(--rem));
      background: linear-gradient(135deg, #f7f7f7, #e5e5e5);
      color: var(--survey-text);

      & strong {
        font-size: calc(26 * var(--rem));
      }
    }
  }

  /* ---- 注釈 (216:341/342/343) ---- */
  & .project-survey__note {
    margin-top: calc(20 * var(--rem));
    font-size: calc(11 * var(--rem));
    line-height: 1.75;
    text-align: center;
    letter-spacing: .05em;
  }
}


/* ========================================================
                * Ranking（その他のお悩みに寄り添うおすすめのアイテム） *
===========================================================
  Figma: fileKey=ecv9QCHPZF9MKHOSMstkYL / SPフレーム 216:324 内
  y=4249〜5342（Rectangle 26 = 216:461 が本セクションの背景）
  主なnodeId: 216:461, 305:1208, 305:1209, 323:4294, 331:7654,
              216:464, 216:502, 312:4228, 216:615,
              216:1224, 216:1225, 216:1239, 216:1243

  ※「Recommended Items」の英字・CHECKボタン・Pick upバッジの文字は
    デザイン上 The Seasons（装飾スクリプト書体）だが、本案件のフォント方針
    （planning.md）により独自フォントは使用せず var(--lp-font-en) + italic
    で近似する。Pick upバッジのみ画像（icn_ranking_pickup.png）を使用。
========================================================= */
.lp_contents {
  & .project-ranking {
    position: relative;
    overflow: hidden;
    padding: calc(60 * var(--rem)) 0 calc(60 * var(--rem));
    background: #fff6e9;

    & .project-ranking__wave {
      position: absolute;
      top: 0;
      z-index: var(--z-behind);
      width: auto;
      height: auto;

      &.project-ranking__wave--left {
        left: calc(-2 * var(--rem));
        width: calc(187.5 * var(--rem));
      }

      &.project-ranking__wave--right {
        right: 0;
        width: calc(152.3123 * var(--rem));
      }
    }
  }

  /* ---------- 見出し（リラックスしたいときにおすすめのアイテム） ---------- */
  & .project-ranking__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--rem));
    text-align: center;

    & .project-ranking__heading-jp {
      font-size: calc(24 * var(--rem));
      font-weight: 700;
      line-height: 1.5;
      color: #323232;
    }

    & .project-ranking__heading-en {
      font-family: var(--lp-font-en);
      font-size: calc(18 * var(--rem));
      line-height: 1;
      letter-spacing: .05em;
      color: #da525f;
    }
  }

  /* ---------- 商品カード（component-item-card：他セクションでも再利用想定） ---------- */
  & .component-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Slickの各スライド幅 */
    width: calc(320 * var(--rem));
    box-sizing: border-box;
    height: auto;
    padding: calc(20 * var(--rem)) calc(20 * var(--rem)) calc(30 * var(--rem));
    gap: calc(8 * var(--rem));
    border-radius: calc(20 * var(--rem));
    background: #fff;

    & .component-item-card__bubble {
      position: relative;
      width: calc(280 * var(--rem));
      box-sizing: border-box;
      margin: 0 auto;
      padding: calc(11 * var(--rem)) calc(14 * var(--rem));
      border: 1px solid #f1e9d0;
      border-radius: calc(14 * var(--rem));
      background: #fffdf7;
      font-size: calc(14 * var(--rem));
      font-weight: 500;
      line-height: 1.6;
      text-align: center;
      color: #323232;

      &::after {
        content: "";
        position: absolute;
        bottom: calc(-7 * var(--rem));
        left: 50%;
        width: calc(14 * var(--rem));
        height: calc(14 * var(--rem));
        background: #fffdf7;
        border-right: 1px solid #f1e9d0;
        border-bottom: 1px solid #f1e9d0;
        translate: -50% 0;
        rotate: 45deg;
      }
    }

    & .component-item-card__figure {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: calc(20 * var(--rem));
      width: calc(230 * var(--rem));
      height: calc(230 * var(--rem));

      & img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }

      & .component-item-card__figure-img--rotate {
        rotate: 25deg;
      }
    }

    & .component-item-card__body {
      display: flex;
      flex-direction: column;
      gap: calc(15 * var(--rem));
      width: 100%;
    }

    & .component-item-card__meta {
      display: flex;
      flex-direction: column;
      gap: calc(8 * var(--rem));
      color: #323232;

      & .component-item-card__brand {
        font-family: var(--lp-font-en);
        font-size: calc(14 * var(--rem));
        font-weight: 700;
        line-height: 1;
      }

      & .component-item-card__name {
        font-size: calc(14 * var(--rem));
        font-weight: 500;
        line-height: 1;
      }
    }

    & .component-item-card__foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      & .component-item-card__price {
        color: #323232;
        line-height: 1;

        & .component-item-card__price-num {
          font-family: var(--lp-font-en_inter);
          font-size: calc(20 * var(--rem));
          font-weight: 600;
        }

        & .component-item-card__price-tax {
          margin-left: .25em;
          font-family: var(--lp-font-en);
          font-size: calc(12 * var(--rem));
        }
      }

      & .component-item-card__check {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: calc(120 * var(--rem));
        height: calc(32 * var(--rem));
        border-radius: calc(50 * var(--rem));
        background: var(--check-bg, #dfebb5);
        font-family: var(--lp-font-en);
        font-size: calc(15 * var(--rem));
        letter-spacing: .05em;
        color: #323232;
      }
    }
  }

  /* ---------- その他のお悩みに寄り添うおすすめのアイテム（タグリスト） ---------- */
  & .project-ranking__pickup {
    position: relative;
    width: calc(360 * var(--rem));
    box-sizing: border-box;
    margin: calc(70 * var(--rem)) auto 0;
    padding: calc(30 * var(--rem)) calc(16 * var(--rem));
    border-radius: calc(20 * var(--rem));
    background: #fbf0e0;

    & .project-ranking__pickup-badge {
      position: absolute;
      top: calc(-17 * var(--rem));
      left: calc(-10 * var(--rem));
      width: calc(87 * var(--rem));
      height: auto;
    }

    & .project-ranking__pickup-heading {
      margin: 0 0 calc(15 * var(--rem));
      font-size: calc(16 * var(--rem));
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: .05em;
      text-align: center;
      color: #323232;
    }
  }

  & .project-ranking__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: calc(5 * var(--rem));
    row-gap: calc(7 * var(--rem));
  }

  /* ---------- タグピル（component-tag：他セクションでも再利用想定） ---------- */
  & .component-tag {
    padding: calc(12 * var(--rem)) calc(14 * var(--rem)) calc(14 * var(--rem));
    border: 1px solid #f1e9d0;
    border-radius: calc(50 * var(--rem));
    background: #fff;
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: #323232;
  }
}


/* ========================================================
                      * StaffPick *
===========================================================
  Figma: SP frame 216:324 の子（y=5342〜6663相当）
  - 背景（クリーム）    : 303:1181（Rectangle 79）#fffdf4
  - キッカー見出し      : 216:1423（Group 239）
  - リード文            : 216:1392
  - スタッフアバター    : 216:1385（Group 162。装飾イラスト書き出し画像）
  - 黄色カード背景      : 216:470（Rectangle 39）#fff9cf・上端のみ角丸30px
                          ※中身のテキスト/バッジは project-self-care（s7_selfcare.css）側で実装
  - 商品カルーセル      : 305:1221（Frame 260。No.01/02/03の3カード）
  単位: SP特化型のため calc(N * var(--rem))
  「No.」「CHECK」の英字書体はFigma上 "The Seasons"（未支給の装飾フォント）のため
  汎用セリフ体で代替（coding-guidelines.md 7章・要確認）。
========================================================= */
.lp_contents {
  & .project-staff-pick {
    position: relative;
    padding: calc(60 * var(--rem)) 0 calc(0 * var(--rem));
    background-color: #fffdf4;
    text-align: center;

    /* Figma: 323:4307（スタッフのおすすめアイテム / Staff Picks） */
    & .project-staff-pick__heading {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: calc(8 * var(--rem));
      margin: 0 0 calc(30 * var(--rem));
    }

    & .project-staff-pick__heading-jp {
      font-size: calc(24 * var(--rem));
      font-weight: 700;
      line-height: 1.5;
      color: #323232;
    }

    & .project-staff-pick__heading-en {
      font-family: var(--lp-font-en);
      font-size: calc(18 * var(--rem));
      line-height: 1;
      letter-spacing: .05em;
      color: #da525f;
    }

    & .project-staff-pick__kicker {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: calc(20 * var(--rem));
      margin: 0;
    }

    & .project-staff-pick__kicker-line {
      display: inline-block;
      width: calc(1 * var(--rem));
      height: calc(22 * var(--rem));
      background-color: #323232;
      /* 左「＼」・右「／」の八の字型（Figma実測） */
      rotate: -30deg;
    }

    & .project-staff-pick__kicker-line--right {
      rotate: 30deg;
    }

    & .project-staff-pick__kicker-text {
      font-size: calc(18 * var(--rem));
      font-weight: 700;
      line-height: 1.5;
      color: #323232;
      letter-spacing: .05em;
    }

    & .project-staff-pick__lead {
      /* 280pxだと「Cosme Kitchen / Biopleスタッフの3名に」の「に」だけ
         次行に折り返るため、意図した4行になるよう296pxに調整 */
      max-width: calc(296 * var(--rem));
      margin: calc(15 * var(--rem)) auto 0;
      font-size: calc(14 * var(--rem));
      font-weight: 400;
      line-height: 1.8;
      color: #323232;
      letter-spacing: .05em;
    }

    & .project-staff-pick__lead-annot {
      font-size: calc(12 * var(--rem));
    }

    & .project-staff-pick__avatars {
      display: flex;
      justify-content: center;
      gap: calc(30 * var(--rem));
      width: calc(290 * var(--rem));
      margin: calc(30 * var(--rem)) auto 0;
    }

    & .project-staff-pick__avatar-tab {
      flex: none;
      box-sizing: border-box;
      width: calc(75 * var(--rem));
      height: calc(75 * var(--rem));
      border-radius: 50%;
      /* リング表示はbox-shadowでレイアウトサイズを変えずに実現する */
      box-shadow: 0 0 0 0 transparent;
      cursor: pointer;
      transition: box-shadow .2s ease;

      & img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }

      &.is-active {
        box-shadow: 0 0 0 calc(2 * var(--rem)) #f0c837;
      }
    }

    & .project-staff-pick__card {
      /* position: relative は project-self-care__badge（s7）の絶対配置の基準にするため必須 */
      position: relative;
      margin: calc(52 * var(--rem)) 0 0;
      padding: 0 0 calc(60 * var(--rem));
      background-color: #fff9cf;
      border-radius: calc(30 * var(--rem)) calc(30 * var(--rem)) 0 0;

      /* .project-self-care（s7）はこのカードの最初の子として挿入される前提。
         上端からの55pxオフセットは s7 側の &__heading の margin-top で確保している */
    }

    /* Best 3（Figma 216:624。批判的レビューでの指摘に基づき、当初指示にあった
       .project-ranking ではなく実座標(y=6040)から.project-staff-pick__card内、
       商品カルーセル(.project-staff-pick__products)直上に実装。position:relative
       済みの.project-staff-pick__cardを基準に絶対配置。z-indexは指定せず(auto)、
       DOM順で後に来る.project-staff-pick__products（各カードはposition:relative）
       の下敷きになるようにする。z-index:負の値にすると兄弟要素だけでなく親カード
       自身の背景よりも奥に回ってしまい見えなくなるため使わない（coding-guidelines
       2-5のスタッキングコンテキストの罠と同種の事象） */

    /* & .project-staff-pick__best3 {
      position: absolute;
      top: calc(213 * var(--rem));
      left: 0;
      width: 100%;
      font-family: var(--lp-font-en);
      font-size: calc(70 * var(--rem));
      font-weight: 700;
      line-height: 1;
      text-align: center;
      color: #f4e18b;
      pointer-events: none;
    } */

    & .project-staff-pick__products-viewport {
      /* Slickが幅・余白・スナップを管理する。 */
      /* スタッフタブ切り替え: is-activeのBest3だけ表示する（3人とも同一内容の複製） */
      display: none;
      position: relative;
      margin: calc(20 * var(--rem)) 0 0;
      overflow: hidden;
      z-index: 0;

      &.is-active {
        display: block;
      }
    }

    & .project-staff-pick__products-viewport::before {
      position: absolute;
      content: "Best 3";
      top: calc(-10 * var(--rem));
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--lp-font-en);
      font-size: calc(70 * var(--rem));
      font-weight: 700;
      line-height: 1;
      color: #f5e393;
      z-index: -1;
    }


    & .project-staff-pick__product {
      position: relative;
      /* Slickの各スライド幅 */
      width: calc(320 * var(--rem));
      padding-bottom: calc(20 * var(--rem));
      background-color: #fff;
      border-radius: calc(20 * var(--rem));
      text-align: left;
    }

    & .project-staff-pick__product-no {
      position: absolute;
      top: calc(15 * var(--rem));
      right: calc(15 * var(--rem));
      display: flex;
      align-items: flex-start;
      gap: calc(2 * var(--rem));
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      color: #f3e18c;
      line-height: 1;
    }

    & .project-staff-pick__product-no-label {
      font-size: calc(20 * var(--rem));
      margin-top: calc(10 * var(--rem));
    }

    & .project-staff-pick__product-no-num {
      font-size: calc(55 * var(--rem));
      font-family: var(--lp-font-en);
    }

    & .project-staff-pick__product-photo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(290 * var(--rem));
      height: calc(200 * var(--rem));
      margin: calc(24 * var(--rem)) auto 0;

      img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
      }
    }

    & .project-staff-pick__product-info {
      display: flex;
      flex-direction: column;
      gap: calc(8 * var(--rem));
      margin: calc(20 * var(--rem)) 0 0;
      padding: 0 calc(20 * var(--rem));
    }

    & .project-staff-pick__product-brand {
      margin: 0;
      font-family: var(--lp-font-en_inter);
      font-size: calc(14 * var(--rem));
      font-weight: 700;
      line-height: 1;
      color: #323232;
    }

    & .project-staff-pick__product-name {
      margin: calc(5 * var(--rem)) 0 0 0;
      font-size: calc(14 * var(--rem));
      font-weight: 500;
      line-height: 1;
      color: #323232;
    }

    & .project-staff-pick__product-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: calc(16 * var(--rem)) 0 0;
      padding: 0 calc(20 * var(--rem));
      font-family: var(--lp-font-en_inter);
    }

    & .project-staff-pick__product-price {
      margin: 0;
      color: #323232;
    }

    & .project-staff-pick__product-price-num {
      font-family: var(--lp-font-en_inter);
      font-size: calc(20 * var(--rem));
      font-weight: 600;
    }

    & .project-staff-pick__product-price-tax {
      margin-left: .25em;
      font-size: calc(12 * var(--rem));
    }

    & .project-staff-pick__product-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(120 * var(--rem));
      height: calc(32 * var(--rem));
      background-color: #dfebb5;
      border-radius: calc(50 * var(--rem));
      font-family: var(--lp-font-en);
      font-size: calc(15 * var(--rem));
      letter-spacing: .05em;
      text-align: center;
    }

    & .project-staff-pick__product-comment {
      margin: calc(16 * var(--rem)) calc(15 * var(--rem)) 0;
      padding: calc(15 * var(--rem));
      background-color: #fffdf4;
      border-radius: calc(10 * var(--rem));
      font-size: calc(12 * var(--rem));
      line-height: 1.8;
      color: #323232;
    }
  }
}


/* ========================================================
                      * SelfCare *
===========================================================
  Figma: SP frame 216:324 の子（y=5826〜6641相当）
  - バッジ    : 303:1180（Group 250。アバターアイコン + 「MDマネージャー」「A.S」）
  - 見出し    : 216:471「私はこんなセルフケア・対策をしています！」
  - 本文      : 216:472（スタッフの声）
  背景（216:470 / #fff9cf・角丸30px）は s6_staffpick.css の .project-staff-pick__card 側で実装。
  このファイルは .project-staff-pick__card の中に挿入される前提の「中身」のみを担当する
  （.project-self-care__badge の position:absolute は親の .project-staff-pick__card
  （position: relative 済み）を基準に、カード上端をまたぐ位置に配置する）。
  単位: SP特化型のため calc(N * var(--rem))
========================================================= */
.lp_contents {
  & .project-self-care {
    /* position: relative は付けない。__badge の絶対配置は親の
       .project-staff-pick__card（position: relative 済み）を基準にする */
    /* スタッフタブ切り替え: is-activeのパネルだけ表示する */
    display: none;

    &.is-active {
      /* display: flow-root で BFC を作り、__heading の margin-top が
         親の外（.project-staff-pick__card）まで突き抜けるマージン相殺を防ぐ */
      display: flow-root;
    }
    padding: 0 calc(40 * var(--rem));
    text-align: left;

    & .project-self-care__badge {
      position: absolute;
      top: calc(-32 * var(--rem));
      left: 50%;
      display: flex;
      align-items: center;
      gap: calc(6 * var(--rem));
      margin: 0;
      padding: calc(5 * var(--rem)) calc(20 * var(--rem)) calc(5 * var(--rem)) calc(5 * var(--rem));
      background-color: #fff;
      border-radius: calc(100 * var(--rem));
      translate: -50% 0;
      white-space: nowrap;
    }

    & .project-self-care__badge-avatar {
      display: block;
      width: calc(53 * var(--rem));
      height: calc(53 * var(--rem));
      border-radius: 50%;
    }

    & .project-self-care__badge-text {
      display: flex;
      flex-direction: column;
      gap: calc(4 * var(--rem));
    }

    & .project-self-care__badge-role {
      font-size: calc(12 * var(--rem));
      font-weight: 700;
      line-height: 1.4;
      color: #323232;
      letter-spacing: .05em;
    }

    & .project-self-care__badge-name {
      font-size: calc(14 * var(--rem));
      font-weight: 700;
      line-height: 1;
      color: #323232;
      letter-spacing: .05em;
    }

    & .project-self-care__heading {
      margin: calc(55 * var(--rem)) 0 0;
      font-size: calc(16 * var(--rem));
      font-weight: 700;
      line-height: 1.5;
      color: #323232;
      letter-spacing: .05em;
      text-align: left;
    }

    & .project-self-care__text {
      margin: calc(10 * var(--rem)) 0 0;
      font-size: calc(14 * var(--rem));
      font-weight: 400;
      line-height: 1.8;
      color: #323232;
      letter-spacing: .05em;
      text-align: justify;
    }
  }
}


/* ========================================================
                      * Kit *
===========================================================
  Figma: SPフレーム(216:324) 216:476 / 216:680 / 216:1447 / 331:6174 ほか
  y=6641〜7546 相当。担当セクション「お得なキット」。
  単位は SP特化型ルールに合わせ calc(N * var(--rem)) を使用。
  文字色は Figma 指定の #323232 に合わせる（.p-feature 既定の #000 とは別値のため個別指定）。
========================================================= */
.lp_contents {
  & .project-kit {
    position: relative;
    overflow: hidden;
    padding: calc(60 * var(--rem)) 0 calc(60 * var(--rem));
    background: #f6f9e6;
    color: #323232;
  }

  & .project-kit__deco {
    position: absolute;
    z-index: var(--z-base);
    pointer-events: none;

    & img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  & .project-kit__deco--01 {
    top: calc(1.5 * var(--rem));
    right: calc(1.5 * var(--rem));
    width: calc(170.5 * var(--rem));
  }

  & .project-kit__deco--02 {
    bottom: 0;
    left: 0;
    width: calc(376 * var(--rem));
  }

  & .project-kit__inner {
    position: relative;
    z-index: var(--z-base);
  }

  /* Figma: 323:4314（お得なキット / Specail Kit） */
  & .project-kit__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--rem));
    margin: 0 0 calc(30 * var(--rem));
  }

  & .project-kit__title-jp {
    font-size: calc(24 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    color: #323232;
  }

  & .project-kit__title-en {
    font-family: var(--lp-font-en);
    font-size: calc(18 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
    color: #da525f;
  }

  & .project-kit__lead {
    max-width: calc(299 * var(--rem));
    margin: 0 auto;
    font-size: calc(15 * var(--rem));
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: .05em;
    text-align: center;
  }

  & .project-kit__heading {
    max-width: calc(346 * var(--rem));
    margin: calc(10 * var(--rem)) auto 0;
    font-size: calc(15 * var(--rem));
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: .05em;
    text-align: center;

    & strong {
      font-weight: 700;
    }
  }

  /* ---- Slider (Slick) ---- */
  & .project-kit__slider {
    position: relative;
    margin-top: calc(0 * var(--rem));
    overflow: hidden;
  }

  & .project-kit__item {
    position: relative;
    /* Slickの各スライド幅 */
    width: calc(320 * var(--rem));
    padding-bottom: calc(20 * var(--rem));
    border-radius: calc(20 * var(--rem));
    background: #fff;
  }

  & .project-kit__tag {
    display: block;
    width: calc(280 * var(--rem));
    /* height: calc(37 * var(--rem)); */
    margin: calc(20 * var(--rem)) auto 0;
    border-radius: calc(5 * var(--rem));
    background: #f9efe6;
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    /* line-height: calc(37 * var(--rem)); */
    letter-spacing: .05em;
    text-align: center;
    padding: calc(10 * var(--rem));
    line-height: 1.5;
  }

  & .project-kit__photo {
    overflow: hidden;
    width: calc(280 * var(--rem));
    height: calc(280 * var(--rem));
    margin: calc(12 * var(--rem)) auto 0;
    border-radius: calc(10 * var(--rem));

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .project-kit__name {
    margin-top: calc(15 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .05em;
    text-align: center;
  }

  & .project-kit__desc {
    margin-top: calc(6 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .05em;
    text-align: center;
  }

  /* ---- 「内容」アコーディオン開閉トリガー ----
     雛形の .js-accordion--container 構造をそのまま使用（script.js の accordion() が開閉を制御）。
     .js-accordion--body には .accordion__body を併記済み（style.css の Accordion ブロックと対）。 */
  & .project-kit__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--rem));
    width: 100%;
    margin-top: calc(5 * var(--rem));
    padding: calc(8 * var(--rem)) calc(20 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .05em;
    color: inherit;
    text-align: center;
  }

  & .project-kit__toggle-line {
    flex: 1 1 auto;
    height: 1px;
    background: #d8d8d8;
  }

  & .project-kit__toggle-label {
    flex: none;
    white-space: nowrap;
  }

  & .project-kit__toggle-icon {
    flex: none;
    width: calc(12 * var(--rem));
    height: calc(7 * var(--rem));
    transition: rotate .3s var(--transition-timing);
  }

  & .project-kit__accordion.is-open .project-kit__toggle-icon {
    rotate: 180deg;
  }

  & .project-kit__contents {
    margin: 0 calc(20 * var(--rem));
    padding: calc(12 * var(--rem)) calc(14 * var(--rem));
    border: 1px solid #d8d8d8;
    border-radius: calc(8 * var(--rem));

    & li {
      display: flex;
      gap: calc(12 * var(--rem));

      & + li {
        margin-top: calc(8 * var(--rem));
      }
    }
  }

  & .project-kit__contents-brand {
    flex: none;
    width: calc(50 * var(--rem));
    font-size: calc(13 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .05em;
    color: #767676;
  }

  & .project-kit__contents-name {
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .05em;
    text-decoration: underline;
  }

  & .project-kit__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: calc(10 * var(--rem)) calc(20 * var(--rem)) 0;
  }
  

  & .project-kit__price {
    font-family: var(--lp-font-en_inter);
    color: inherit;
  }

  & .project-kit__price-num {
    font-size: calc(20 * var(--rem));
    font-weight: 600;
  }

  & .project-kit__price-tax {
    margin-left: .25em;
    font-size: calc(12 * var(--rem));
    font-weight: 500;
  }

  & .project-kit__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(120 * var(--rem));
    height: calc(32 * var(--rem));
    border-radius: calc(50 * var(--rem));
    background: #dfebb5;
    font-family: var(--lp-font-en);
    font-size: calc(15 * var(--rem));
    font-weight: 700;
    letter-spacing: .05em;
    color: inherit;
    text-align: center;

    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }

  
  & .project-kit__sale {
    margin: auto;
    width: max-content;
    font-family: var(--lp-font-en_inter);
    font-size: calc(14 * var(--rem));
    color: #fff;
    background: var(--color-accent);
    padding: calc(1 * var(--rem)) calc(15 * var(--rem));
    /* border: calc(1 * var(--rem)) solid var(--color-accent); */
    border-radius: calc(4 * var(--rem));
    margin-bottom: calc(5 * var(--rem));
}

}


/* ========================================================
                      * Closing *
===========================================================
  Figma: SPフレーム(216:324) 216:1448 / 216:748 / 216:1122 / 323:4317 / 305:1223
  y=7546〜7897 相当。担当セクション「まとめ」。
  305:1223 は末尾に配置されたスタッフ紹介的な装飾アバター（実写真ではなくイラストアイコン）。
========================================================= */
.lp_contents {
  & .project-closing {
    position: relative;
    overflow: hidden;
    padding: calc(86 * var(--rem)) 0 calc(0 * var(--rem));
    background: #fffceb;
  }

  /* Figma: 323:4317（吹き出し背景）。バウンディングボックスはx=370.17/w=432.27だが、
     これはSPアートボード(390px)の外側にほぼ飛び出す値でありセクション全体を覆う
     吹き出しの見た目と矛盾する。実装済みアセット(bg_closing_deco.svg, 386×207)の
     幅に合わせ、吹き出しがセクション幅の中央に来るよう水平中央寄せに修正 */
  & .project-closing__deco {
    position: absolute;
    z-index: var(--z-base);
    top: calc(45 * var(--rem));
    left: 50%;
    translate: -50% 0;
    width: calc(386 * var(--rem));
    pointer-events: none;

    & img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  & .project-closing__inner {
    position: relative;
    z-index: var(--z-base);
  }

  & .project-closing__heading {
    max-width: calc(316 * var(--rem));
    margin: 0 auto;
    font-size: calc(15 * var(--rem));
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .05em;
    text-align: center;
  }

  & .project-closing__annot {
    font-size: calc(12 * var(--rem));
  }

  & .project-closing__text {
    max-width: calc(337 * var(--rem));
    margin: calc(20 * var(--rem)) auto 0;
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: .05em;
    text-align: center;
  }

  & .project-closing__staff {
    max-width: calc(323 * var(--rem));
    margin: calc(30 * var(--rem)) auto 0;
    height: calc(92 * var(--rem));
    text-align: center;

    & img {
      display: inline-block;
      width: 100%;
      height: auto;
    }
  }
}


.lp_contents {
  & .slider {
    margin-top: calc(50 * var(--rem));
    margin-inline: auto;
    width: 100%;
  }
    & .slider-img {
      margin: 0 calc(7 * var(--rem));
  }

    & .slick-dots li button:before {
    content: "";
    width: calc(30 * var(--rem));
    height: calc(4 * var(--rem));
    border-radius: 999px;
    background: #e7cdbc;
    opacity: 1;
  }

  & .project-staff-pick .slick-dots li button:before  {
    background: #e6cd91;
  }

  & .project-kit .slick-dots li button:before  {
    background: #d6dcb8;
  }
  

    & .slick-dots li.slick-active button:before {
    background: #DEA178;
  }

  & .project-staff-pick .slick-dots li.slick-active button:before  {
    background: #E7B53F;
  }

  & .project-kit .slick-dots li.slick-active button:before  {
    background: #C5D477;
  }

    & .slick-dots li {
      margin: 0 8px;
    }

    & .slick-dots {
      margin-bottom: calc(-12 * var(--rem));
    }

    & .slick-list {
      height: auto !important;
    }
}


@media only screen and (max-width: 768px) {	
  #FooterWrap {
    margin-top: calc(-21 * var(--rem));
  }
}