/* ==========================================================================
   top.css
   トップページ専用のスタイル。
   variable.css → common.css → top.css の順で読み込むこと。

   ※ ここに書くのは「トップページにしか出てこない」パーツのみ。
      ヘッダー/フッター/ボタンなど全ページ共通のものは common.css に書く。
   ========================================================================== */

@layer page {
  /* --- KV（トップページのファーストビュー：幅100%、高さは画像の縦横比に追従） ---- */
  .p-kv {
    position: relative;
    width: 100%;
    /* PCは画面の高さを器にして、画像はobject-fit:coverで敷く。
       これにより幅を縮めてもKVの高さは変わらず、画像の左右が切り取られる。
       （旧: 画像のheight:autoに任せていたため、幅を縮めると高さも道連れで縮んでいた）
       100vh ではなく 100svh を使うのは、モバイルでアドレスバーが出入りしても
       高さが暴れないようにするため。 */
    height: 100svh;
    overflow: hidden; /* coverではみ出した画像をここで隠す */

    .p-kv__bg {
      display: block;
      width: 100%;
      height: 100%;
      line-height: 0; /* imgの下の余白を消す */

      .p-kv__bg-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    /* SPは従来通り「画像の縦横比で高さが決まる」挙動を維持する（今回はPCのみ変更）。
       height:autoに戻せばimgは自然比で表示され、object-fitは効かなくなる。 */
    @media (max-width: 768px) {
      height: auto;

      .p-kv__bg,
      .p-kv__bg-img {
        height: auto;
      }
    }

    /* 見出し（Figma実測：1440px幅を基準に中央寄せしたコンテナ内でのオフセット） */
    .p-kv__inner {
      position: absolute;
      inset: 0;
      max-width: 1440px;
      margin: 0 auto;
    }

    .p-kv__ttl {
      position: absolute;
      /* ⚠️ この左上位置はFigma実測値（left:160px / top:190px = 11.111% / 21.111%）から
         意図的に外している（ゴー承認済み・2026-07-27）。
         理由：KVの器を100svhにしたことで、窓の高さによって画像がobject-fit:coverで
         上下から切り取られ、商品がせり上がって見出しに寄ってしまうため。
         カンプは「画像の縦横比で高さが決まる」前提の数値なので、そのままでは使えない。

         左位置：親(.p-kv__inner)はmax-width:1440pxなので、%なら1440px以上で
         1440*8% = 115.2px に固定され、それ未満では幅に比例して詰まる。
         vwだと1440px超で値が膨らむため%を使う。 */
      left: 8%;
      /* 上位置：器の高さ(100svh)に対する比率。縦900pxの画面で126px。 */
      top: 14%;
      color: #222;
      font-family: var(--font-heading);
      font-weight: 600;
      /* 1440pxで37px、768pxで27.563px（SP指定値）になる直線補間。
         768pxでSPの値と一致するので、ブレークポイントで文字サイズが飛ばない。 */
      font-size: clamp(2.7563rem, 1.678rem + 1.4043vw, 3.7rem);
      line-height: 1;
      letter-spacing: 0.03em; /* 37px時に1.11px。emにして文字サイズと一緒に縮む */

      .p-kv__ttl-strong {
        color: #ab8743;
      }

      /* ⚠️ 位置をemで持つのは、タイトルが縮んだ時に文言が重ならないようにするため。
         left/topのemは「この要素自身のfont-size」基準なので、24px換算で指定する
         （130/24=5.4167em、57/24=2.375em）。font-sizeのemだけは親基準（24/37）。
         これでタイトルとの間隔が常に一定比率で保たれ、どの幅でも被らない。 */
      .p-kv__ttl-sub {
        position: absolute;
        left: 5.4167em; /* 1440px時に130px */
        top: 2.375em; /* 1440px時に57px。タイトル1行分(1em)より下なので重ならない */
        font-size: 0.6486em; /* 親37pxに対して24px */
        letter-spacing: 0.02em; /* 24px時に0.48px */
        white-space: nowrap;
      }

      @media (max-width: 768px) {
        left: 50%;
        top: 167px;
        width: max-content; /* ⚠️ leftのみ指定だと残り半分の幅で折り返し計算されてしまうため必須 */
        transform: translateX(-50%);
        font-size: 2.7563rem; /* 27.563px */
        letter-spacing: 0.8269px;

        .p-kv__ttl-sub {
          left: 108.28px; /* 141.28 - 33 */
          top: 41.02px; /* 208.02 - 167 */
          font-size: 1.7719rem; /* 17.719px */
          letter-spacing: 0.3544px;
        }
      }
    }

    /* スクロール誘導バー（Figma実測：PC track120px/line30px/left60px、SP track130px/line40px/left30px） */
    .p-kv__scroll {
      position: absolute;
      left: 60px;
      bottom: 40px;
      width: 1px;
      height: 120px;
      overflow: hidden;

      @media (max-width: 768px) {
        left: 30px;
        height: 130px;
      }
    }

    .p-kv__scroll-track {
      position: absolute;
      inset: 0;
      background-color: #fff;
    }

    .p-kv__scroll-line {
      position: absolute;
      left: 0;
      top: 0;
      width: 1px;
      height: 30px;
      background-color: #5c5c5b;

      @media (max-width: 768px) {
        height: 40px;
      }
    }
  }

  /* p-lead見出し：1文字ずつ色が変化しながら現れる演出
     （参考：https://kawai-text-animation.pages.dev/ の26番「Color Shift」） */
  @keyframes colorShift {
    0% {
      color: var(
        --color-primary
      ); /* 明るい背景のセクションのため、白ではなく見出し本来の色にする */
      opacity: 0;
    }
    33% {
      color: #d1bb61;
      opacity: 1;
    }
    66% {
      color: #ffc59c;
      opacity: 1;
    }
    100% {
      color: var(--color-primary);
      opacity: 1;
    }
  }

  /* --- LEAD（美しさ×持続：テキスト＋2枚の写真の非対称レイアウト） ----
     ⚠️ このセクションはFigma実測で左右paddingが非対称（左180px・右42px）。
     他セクションのような180px均等ではなく、実測通りに左右別々の値を使う。 */
  .p-lead {
    .p-lead__inner {
      max-width: 1440px;
      margin-inline: auto;
      display: flex;
      align-items: flex-start;
      gap: clamp(60px, 9.7vw, 140px); /* 140 / 1440 */
      padding: 100px clamp(24px, 2.9vw, 42px) 143px clamp(32px, 12.5vw, 180px);
    }

    .p-lead-contents {
      flex: 1 1 480px;
      min-width: 280px;
      margin-top: 70px; /* 画像より70px下から始まる（1070 - 1000） */
    }

    .p-lead__ttl {
      /* ⚠️ c-section-ttlの英字ラベル用スタイルは使わない単独見出しのため、
         サイズ・字間はこのセクション固有の値で上書きする */
      font-size: 3.5rem; /* 35px */
      letter-spacing: 0.7px;
      gap: 0;

      /* ⚠️ .c-section-ttl span（英字ラベル用の共通ルール：14px・太字・大文字化・
         グラデーションのtransparent文字）は「span」タグ全体にかかる指定のため、
         文字ラッパー(.p-lead__ttl-chars)自身も対象になってしまう。
         inheritだとそのラッパーの(壊れた)値を拾ってしまうため、値を直接指定する */
      .p-lead__ttl-chars,
      .char {
        font-family: var(--font-heading);
        font-weight: 400;
        font-size: 3.5rem; /* 35px。.p-lead__ttlと同じ値 */
        letter-spacing: 0.7px;
        line-height: 1;
        text-transform: none;
        background: none;
        -webkit-background-clip: unset;
        background-clip: unset;
      }

      .char {
        display: inline-block;
        white-space: pre;
        opacity: 0;
        animation: colorShift 1s ease forwards;
      }
    }

    .p-lead__txt {
      margin-top: 20px;
      font-family: var(--font-base);
      font-weight: 300;
      font-size: 1.5rem; /* 15px */
      line-height: 2.2;
      letter-spacing: 0.6px;
      color: var(--color-secondary);

      &:first-of-type {
        margin-top: 60px; /* 見出しから最初の段落まで */
      }
    }

    .c-btn-arrow-black {
      margin-top: 60px;
    }

    .p-lead-img {
      position: relative;
      flex: 1 1 598px;
      min-width: 280px;
      aspect-ratio: 598 / 543;
    }

    /* ⚠️ 2枚の写真はwrapperに対する%位置で配置。wrapper自体がflexで伸縮するので
       中間幅でも2枚の相対的な位置関係（Figma実測）が崩れずそのまま縮小される */
    .p-lead-img01 {
      position: absolute;
      left: 0;
      top: 0;
      width: 60.5%; /* 362 / 598 */
      height: 92.1%; /* 500 / 543 */
      background-image: url("../images/top/pic-lead-01-pc.webp");
      background-size: cover;
      background-position: center;
    }

    .p-lead-img02 {
      position: absolute;
      left: 67.2%; /* 402 / 598 */
      top: 43.3%; /* 235 / 543 */
      width: 32.8%; /* 196 / 598 */
      height: 56.7%; /* 308 / 543 */
      background-image: url("../images/top/pic-lead-02-pc.webp");
      background-size: cover;
      background-position: center;
    }

    /* スクロールで画面内に入ったら、左→右へワイプするように現れる演出（Figma未指定・独自演出）
       02は01の途中から遅れて始まるようtransition-delayをずらす */
    .p-lead-img01,
    .p-lead-img02 {
      clip-path: inset(0 100% 0 0);
      transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .p-lead-img02 {
      transition-delay: 0.4s;
    }
    .p-lead-img.is-inview .p-lead-img01,
    .p-lead-img.is-inview .p-lead-img02 {
      clip-path: inset(0 0 0 0);
    }
    @media (prefers-reduced-motion: reduce) {
      .p-lead-img01,
      .p-lead-img02 {
        clip-path: none;
        transition: none;
      }
    }

    @media (max-width: 768px) {
      .p-lead__inner {
        flex-direction: column;
        padding: 90px 32px 100px;
        /* ⚠️ 基本ルールのgap:clamp(60px,...)がSP幅では下限60pxのまま効いてしまい、
           .p-lead-imgのmargin-top(60px)と二重に空いてしまうため明示的に打ち消す */
        gap: 0;
      }

      .p-lead-contents {
        flex-basis: auto;
        min-width: 0;
        margin-top: 0;
      }

      .p-lead__ttl {
        font-size: 2.8rem; /* 28px */
        letter-spacing: 0.56px;
      }

      .p-lead__txt {
        font-size: 1.5rem; /* 15px（SPも同じ） */

        &:first-of-type {
          margin-top: 50px; /* SP実測：見出しから最初の段落まで */
        }
      }

      .c-btn-arrow-black {
        margin-top: 60px;
      }

      .p-lead-img {
        /* ⚠️ Figma実測：画像だけ左端は画面端までベタ付け（ブリード）、右端はテキストと同じ32pxの余白。
           左右均等パディングにしない。親(.p-lead__inner)の左パディング分だけ左にはみ出させて再現する */
        flex-basis: auto;
        width: calc(100% + 32px);
        margin-left: -32px;
        min-width: 0;
        aspect-ratio: 358 / 326;
        margin-top: 60px; /* ボタン下端から画像まで */
      }

      .p-lead-img01 {
        width: 67%; /* 240 / 358 */
        height: 87.7%; /* 286 / 326 */
        background-image: url("../images/top/pic-lead-01-sp.webp");
      }

      .p-lead-img02 {
        left: 72.1%; /* 258 / 358 */
        top: 52.1%; /* 170 / 326 */
        width: 27.9%; /* 100 / 358 */
        height: 47.9%; /* 156 / 326 */
        background-image: url("../images/top/pic-lead-02-sp.webp");
      }
    }
  }

  /* --- CLINIC（医療機関様向け情報） ---------------------------------- */
  .p-clinic {
    position: relative;
    background-color: #f7f4f2; /* Figma：base/beige */
    background-image: url("../images/top/bg-clinic-pc.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* 中身はmax-width 1440pxのコンテナに収め、どのウィンドウ幅でも中央に来るようにする。
       768〜1440pxの中間幅はFigma指定が無いため、clampでの可変幅＋flex-wrapで
       崩れず自然に詰まっていくようにしている（この帯域は目視での調整） */
    .p-clinic__inner {
      max-width: 1440px;
      margin-inline: auto;
      padding: 100px clamp(32px, 12.5vw, 180px) 135px;
      display: flex;
      flex-wrap: wrap;
      gap: clamp(40px, 8vw, 116px);
    }

    /* ⚠️ textarea:lists = 320:644（Figma実測比）。flex-basis:0 + flex-growの比率指定で、
       どの幅でもこの比率を厳密に保ったまま伸縮する（1440px時点で必ず320px/644pxになる） */
    .p-clinic__textarea {
      flex: 320 1 0;
      min-width: 240px;

      .p-clinic__txt {
        margin-top: 60px;
        font-family: var(--font-base);
        font-weight: 300;
        font-size: 1.3rem; /* 13px */
        line-height: 1.8;
        letter-spacing: 0.52px;
        color: var(--color-secondary);
      }
    }

    .p-clinic__lists {
      flex: 644 1 0;
      min-width: 460px;
      display: flex;
      flex-direction: column;
      gap: 15px;

      li {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start; /* Figma：タイトルと説明文は上端揃え */
        padding: 30px 36px 30px 56px; /* 644 - 56 - 264 - 288 = 36（右側の余白） */
        border-radius: 15px;
        background-color: rgba(
          255,
          255,
          255,
          0.3
        ); /* Figma実測不可のため近似値 */
        box-shadow: inset 20px 20px 25px rgba(0, 0, 0, 0.04);

        /* ⚠️ タイトル:詳細 = 264:288（Figma実測比）。同じくflex-grow比率で厳密に維持 */
        .p-clinic__lists-ttl {
          flex: 264 1 0;
          min-width: 180px;
          font-family: var(--font-base);
          font-weight: 400;
          font-size: 1.8rem; /* 18px */
          line-height: 1.8;
          letter-spacing: 0.72px;
          color: var(--color-primary);
        }

        .p-clinic__detail {
          flex: 288 1 0;
          min-width: 220px;

          .p-clinic__detail-text {
            font-family: var(--font-base);
            font-weight: 400;
            font-size: 1.4rem; /* 14px */
            line-height: 1.7;
            letter-spacing: 0.56px;
            color: var(--color-secondary);
          }

          .c-btn-black,
          .c-btn-white {
            margin-top: 30px;
          }

          /* ボタン自体は左揃えの位置のまま動かさず、その下の注意書きだけを
             ボタンの幅を基準に中央寄せする。inline-flexでラッパー自体を
             ボタン(一番幅がある子要素)の幅に縮めるのがポイント */
          .p-clinic__detail-action {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
          }

          .c-notice {
            margin-top: 8px;
          }
        }
      }
    }

    @media (max-width: 768px) {
      background-image: url("../images/top/bg-clinic-sp.webp");

      .p-clinic__inner {
        flex-direction: column;
        padding: 90px 32px 100px;
        gap: 30px;
      }

      .p-clinic__textarea {
        flex-basis: auto;
        min-width: 0;

        .p-clinic__txt {
          margin-top: 30px;
        }
      }

      .p-clinic__lists {
        min-width: 0;
        gap: 15px;

        li {
          flex-direction: column;
          align-items: flex-start;
          /* 左右28px：カード内幅=326-56=270px。「ご契約医療機関様はこちら」ボタン(約269px)が
             収まりきらずはみ出るのを防ぐ。Figmaのボタン位置(カード端から約29px)ともほぼ一致 */
          padding: 59px 28px;

          .p-clinic__lists-ttl {
            flex-basis: auto;
            min-width: 0;
            margin-bottom: 24px;
          }

          .p-clinic__detail {
            flex-basis: auto;
            min-width: 0;
            width: 100%;

            /* SPはボタンごとカード中央に配置する（PCは左揃えのまま）。
               .p-clinic__detail-actionで包まれていない単独のボタン(新規取扱のご案内)にも
               同じ指定が必要なので、ボタン自体にも指定する
               （ラッパーの中のボタンに対しては、ラッパーが既にボタン幅ぴったりのため無害） */
            .c-btn-black,
            .c-btn-white {
              display: flex;
              width: fit-content;
              margin-inline: auto;
              margin-top: 30px;
            }

            .p-clinic__detail-action {
              margin-inline: auto;
            }

            .c-notice {
              margin-top: 8px;
            }
          }
        }
      }
    }
  }

  /* --- SHOP（お取り扱いクリニック） ---------------------------------- */
  .p-shop {
    position: relative;
    min-height: 462px; /* 中間幅で折り返しても背景写真が窮屈にならないようmin-heightに */
    overflow: hidden; /* パララックスではみ出す背景をここで隠す */

    /* 背景（スクロールに応じてJSでtranslateYさせる専用レイヤー） */
    .p-shop__bg {
      position: absolute;
      /* パララックスの可動域ぶん上下に余裕を持たせる。
         ⚠️ top.js の parallaxRatio と連動する。ratioを上げるとここも広げないと
         背景が余白を使い切って端が見え、セクションの上下に隙間が出る。
         現在: ratio 0.15 → 最大移動量 約144px（画面高1000px時）なので -180px で確保。 */
      inset: -180px 0;
      z-index: -1;
      background-image: url("../images/top/bg-shop-pc.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      will-change: transform;
    }

    /* 中身はmax-width 1440pxのコンテナに収め、どのウィンドウ幅でも中央に来るようにする。
       768〜1440pxはFigma指定が無いため、clampでの可変幅＋flex-wrapで
       崩れず自然に詰まっていくようにしている（この帯域は目視での調整） */
    .p-shop__inner {
      max-width: 1440px;
      margin-inline: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      padding: 120px clamp(32px, 4vw, 60px) 60px clamp(32px, 16.7vw, 240px);
      gap: clamp(40px, 11vw, 160px);
    }

    .p-shop__ttl {
      flex: 1 1 260px;
      min-width: 260px;
      color: var(--color-text-light);
    }

    .p-shop__textarea {
      flex: 1 1 320px;
      min-width: 320px;

      .p-shop__txt {
        font-family: var(--font-base);
        font-weight: 400;
        font-size: 1.4rem; /* 14px */
        line-height: 2;
        letter-spacing: 0.56px;
        color: var(--color-text-light);
      }

      .c-btn-arrow-white {
        margin-top: 78px;
      }
    }

    @media (max-width: 768px) {
      min-height: auto;

      .p-shop__bg {
        background-image: url("../images/top/bg-shop-sp.webp");
      }

      .p-shop__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 120px 32px 100px;
        gap: 44px;
      }

      .p-shop__ttl {
        flex-basis: auto;
        min-width: 0;
      }

      .p-shop__textarea {
        flex-basis: auto;
        min-width: 0;

        .p-shop__txt {
          margin-bottom: 80px;
        }

        .c-btn-arrow-white {
          margin-top: 0;
        }
      }
    }
  }

  /* --- PRODUCTS（製品一覧） ------------------------------------------ */
  .p-products {
    background-color: #f6f5f4; /* Figma：base/gray */

    /* 中身はmax-width 1440pxのコンテナに収め、どのウィンドウ幅でも中央に来るようにする。
       左右paddingはpx固定ではなくclampで可変にし、1440px時点で厳密に180px/コンテンツ幅1080pxになる */
    .p-products__inner {
      max-width: 1440px;
      margin-inline: auto;
      padding: 100px clamp(32px, 12.5vw, 180px);
    }

    .c-products__ttl-wrap {
      display: flex;
      justify-content: space-between;
      align-items: flex-end; /* Figma：見出しと補足文は下端揃え */
      gap: 24px;
      flex-wrap: wrap;
    }

    .p-products__txt {
      max-width: 450px;
      font-family: var(--font-base);
      font-weight: 300;
      font-size: 1.3rem; /* 13px */
      line-height: 1.8;
      letter-spacing: 0.52px;
      color: var(--color-secondary);
    }

    /* ⚠️ 1440px時点でコンテンツ幅は必ず1080px（180pxパディング×2を引いた値）になるため、
       grid自体もmax-width:1080pxに揃え、列は1frで均等割り＝252pxを厳密に再現する。
       1080未満の幅では1frが自然に縮み、カード内画像もそれに追従して縮む（崩れない） */
    .p-products__lists {
      margin-top: 50px; /* 1900(カード行上端) - 1850(見出しラップ下端) = 50 */
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      max-width: 1080px;
      gap: 30px 24px;

      li {
        list-style: none;
        /* 画面内に入ったら下から順に現れる演出。
           delayはJS側(top.js)でDOM順（左→右、行末で次の段）に割り振る */
        opacity: 0;
        transform: translateY(10px);
        transition:
          opacity 4s cubic-bezier(0.16, 1, 0.3, 1),
          transform 4s cubic-bezier(0.16, 1, 0.3, 1);

        a {
          display: flex; /* ⚠️ display:blockだと最初の子要素(画像)のmargin-topが
             カード自身の外側に相殺(margin collapse)されて漏れ出し、白背景の開始位置が
             ズレてしまう。flexコンテナにすると子要素は独立した書式コンテキストになり
             相殺が起きなくなるため、Figma通りの内側の余白がそのまま再現される。 */
          flex-direction: column;
          position: relative;
          min-height: 358px; /* Figma実測。長いタイトルでも欠けないようmin-heightに */
          background-color: #fff;
          border-radius: 4px;
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);

          /* --- 右下の矢印ボタン。装飾なのでHTMLに要素を置かず疑似要素で描く ---
             丸い枠と矢印の図形で2層必要なため、::before と ::after を1つずつ使う。
               ::before = 丸い枠（36×36）
               ::after  = 矢印の図形（20×20、SVGをmaskで抜く）
             どちらもposition:absoluteなのでカードのレイアウトには影響しない
             （Figmaにも矢印ぶんの余白は無い）。 */
          &::before {
            content: "";
            position: absolute;
            right: 12px;
            bottom: 12px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid #f2f2f2;
            transition: var(--transition-base);
          }

          &::after {
            content: "";
            position: absolute;
            /* 円（right:12px・36px幅）の中央に20pxの矢印を置く：12 + (36 - 20) / 2 = 20 */
            right: 20px;
            bottom: 20px;
            width: 20px;
            height: 20px;
            background-color: var(--color-primary);

            mask-image: url("../images/common/icon/icon-arrow.svg");
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;

            -webkit-mask-image: url("../images/common/icon/icon-arrow.svg");
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
          }

          @media (hover: hover) and (pointer: fine) {
            &:hover {
              opacity: 1;
              /* 丸い枠（::before）の線を濃くする */
              &::before {
                border-color: #5c5c5b;
              }
              /* 画像を軽く拡大。カード幅252pxに対し画像はmax-width:180pxで
                 中央配置（左右に36pxずつ余白）なので、1.05倍でもはみ出さない。
                 そのため親にoverflow:hiddenを足す必要がない。 */
              .p-products__lists-img {
                transform: scale(1.05);
              }
            }
          }
        }

        /* NEWバッジ：絶対配置なので有無でレイアウトが動かない */
        .p-products__lists-new {
          position: absolute;
          left: 8px;
          top: 6px;
          padding: 4px;
          background-color: #e84d32; /* red/NEW */
          border-radius: 2px;
          font-family: var(--font-base);
          font-weight: 400;
          font-size: 1.1rem; /* 11px */
          line-height: 1;
          letter-spacing: 0.44px;
          color: var(--color-text-light);
        }

        .p-products__lists-img {
          display: block;
          width: 100%;
          max-width: 180px;
          aspect-ratio: 1; /* 幅が縮んでもimg同様に正方形を保つ */
          margin: 25px auto;
          object-fit: contain;
          transition: transform 0.4s ease; /* ホバー時の拡大用 */
        }

        .p-products__lists-cat {
          width: fit-content;
          margin: 0 20px;
          padding: 5px 12px;
          border: 1px solid #d6d6d6; /* 線/中 */
          border-radius: 20px;
          font-family: var(--font-base);
          font-weight: 400;
          font-size: 1.1rem; /* 11px */
          line-height: 1;
          letter-spacing: 0.44px;
          color: var(--color-secondary);
        }

        .p-products__lists-ttl {
          margin: 10px 20px 0; /* 252 - 20*2 = 212（Figma実測のタイトル幅） */
          font-family: var(--font-base);
          font-weight: 400;
          font-size: 1.4rem; /* 14px */
          line-height: 1.7;
          letter-spacing: 0.28px;
          color: var(--color-primary);
        }
      }

      &.is-inview li {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ========================================================================
       ⚠️ 一時対応：製品ページが未公開のため、カードのリンクを無効化している。
       公開する時は、このブロックごと削除するだけでよい（他は何も変更不要）。

       ・pointer-events:none でクリックもホバーも発火しなくなるため、
         画像の拡大・矢印の色変化・resetのa:hover{opacity:.6} がすべて止まる。
       ・矢印は position:absolute なので、消してもレイアウトは動かない。

       ※ 現状 href="#" のダミーリンク前提。実URLを入れる場合は、
         pointer-events はキーボード操作を止められない（Tab+Enterで遷移できる）ため、
         テンプレート側で href ごと出し分けること。
       ======================================================================== */
    .p-products__lists a {
      pointer-events: none;
      cursor: default;

      /* 矢印（::before=丸枠 / ::after=矢印図形）をまとめて隠す */
      &::before,
      &::after {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .p-products__inner {
        padding: 90px 20px 100px;
      }

      .c-products__ttl-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-inline: 12px;
      }

      .p-products__txt {
        max-width: none;
      }

      .p-products__lists {
        margin-top: 60px;
        grid-template-columns: repeat(2, 1fr);
        max-width: none;
        gap: 15px 10px;

        li a {
          .p-products__lists-img {
            max-width: 140px;
          }
        }
      }
    }
  }

  /* --- INSTAGRAM（Social Feed Galleryプラグインの見た目をFigmaに合わせる）--- */
  .p-instagram {
    padding-block: 120px; /* PC/SP共通 */
    text-align: center; /* Figma：見出し・補足文とも中央揃え */

    .p-instagram__txt {
      margin-top: 30px; /* Figma実測：見出しとの間隔 */
      font-family: var(--font-base);
      font-weight: 300;
      font-size: 1.3rem; /* 13px */
      line-height: 1.8;
      letter-spacing: 0.52px;
      color: var(--color-secondary);
    }

    /* Figma実測：@ハンドルリンク（PC：icon12px/text14px、下線代わりに下ボーダー） */
    .p-instagram__link {
      margin-top: 40px;
      padding-bottom: 10px;
      border-bottom: 1px solid #b8b8b8; /* Figma：線/濃 */
      font-family: var(--font-en); /* Cormorant Garamond */
      font-weight: 500;
      font-size: 1.4rem; /* 14px */
      letter-spacing: 0.56px;
      color: var(--color-primary);

      &::before {
        width: 12px;
        height: 12px;
        margin-inline-end: 10px;
      }

      /* ホバーは .c-btn-arrow-black と同じ仕様に揃える（common.css参照）。
         reset の a:hover{opacity:.6} を打ち消し、下線だけを濃くする。
         アイコンは currentColor で描いているので、文字色を変えなければ追従しない。 */
      @media (hover: hover) and (pointer: fine) {
        &:hover {
          opacity: 1;
          border-bottom-color: #5c5c5b;
        }
      }
    }

    /* プラグイン標準のホバー時マスク・アイコン表示は使わない */
    .instagram-gallery-item__media-mask,
    .instagram-gallery-item__icon {
      opacity: 0 !important;
    }

    /* Followボタンを管理画面で非表示にしても、空の<div>自体は残りmargin分の
       隙間だけが残ってしまうため、要素ごと消す */
    .instagram-gallery__actions {
      display: none !important;
    }

    /* プラグイン標準のホバー時リフトアニメーション(translateY(-2px)+shadow)は活かす。
       ただし.instagram-gallery-item自体のoverflow:hiddenで影が、
       .swiper-containerのoverflow:hiddenで上への移動分がそれぞれ見切れていたため、
       画像のクロップは.media-wrap側のoverflow:hiddenで既に効いているのを確認のうえ
       ここだけvisibleにし、swiper-containerには浮き上がる分の余白を確保する。
       swiper-containerの横方向のスライド隠しは維持したいので、overflowはvisibleにせず
       paddingで縦方向の余白だけ確保する */
    .p-instagram__feed--pc .swiper-container {
      padding-block: 4px 8px !important;
    }

    .p-instagram__feed--pc .instagram-gallery-item {
      overflow: visible !important;
    }

    /* PC：Carousel（id=0）／SP：Gallery（id=1）で別フィードを出し分ける */
    .p-instagram__feed--sp {
      display: none;
    }

    .p-instagram__feed--pc {
      margin-top: 50px;
    }

    /* PC：プラグインのCarousel表示は正方形(padding-top:100%)固定のため、
       Figma実測の168:210(4:5)の縦長比率に上書きする。
       "instagram-gallery-square"クラスはSP(Gallery)側にも付くため、
       PC(--pc)配下に限定して選択する */
    .p-instagram__feed--pc
      .instagram-gallery-square
      .instagram-gallery-item__media-wrap {
      padding-top: 125% !important;
    }

    /* PC：コンテナ自体を888px(168px*5 + 12px*4)に収めて中央寄せする。
       columns方式は%計算のため、コンテナ幅をFigma実測の合計値に合わせれば
       1枚あたりも自動的に168pxになる（width指定の上書きはSwiperの
       スライド位置計算とズレるため避ける） */
    .p-instagram__feed--pc .instagram-gallery-feed {
      max-width: 888px;
      margin-inline: auto;
    }

    @media (max-width: 768px) {
      .p-instagram__feed--pc {
        display: none;
      }

      .p-instagram__feed--sp {
        display: block;
      }

      /* SP：Gallery表示も正方形固定のため、Figma実測の168:210(4:5)に上書きし、
         PCには無い角丸6pxを付ける */
      .p-instagram__feed--sp .instagram-gallery-item {
        aspect-ratio: 4 / 5 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
      }

      /* プラグインは無償版だとモバイル幅で列数・間隔をJS側で強制フォールバックする
         (Tablet/Mobileの設定欄がPremium限定で保存されないため、列数は1・間隔は6pxになる)。
         CSS変数を直接!importantで上書きして意図した値(列数2・間隔14px)を維持する。
         id指定でフィード1(SP)だけに閉じる */
      #instagram-gallery-feed-1 {
        --qligg-columns: 2 !important;
        --qligg-spacing: 14px !important;
      }

      /* SP：画面端に画像がくっついてしまうため、左右20pxの余白を確保する */
      .p-instagram__feed--sp {
        padding-inline: 20px;
      }

      /* SPのみ：フィードの上に40pxの余白を確保する */
      .p-instagram__feed--sp .instagram-gallery-feed {
        margin-top: 40px;
      }

      /* Figma実測：SPの@ハンドルリンクはPCと異なりicon16px/text18px */
      .p-instagram__link {
        font-size: 1.8rem; /* 18px */
        letter-spacing: 0.72px;

        &::before {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
}