/* ==========================================================================
   1. Reset
   ========================================================================== */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-height: 100svh;
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
  }

  img,
  picture,
  svg {
    max-width: 100%;
    display: block;
  }

  img {
    height: auto;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  @media (hover: hover) and (pointer: fine) {
    a,
    button {
      transition: var(--transition-base);
      &:hover {
        opacity: 0.6;
      }
    }
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  /* アクセシビリティ：モーション低減設定を尊重 */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* フォーカス時のアウトライン（キーボード操作時のみ表示） */
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}

/* ==========================================================================
       2. Common
       ========================================================================== */
@layer common {
  /* --- 矢印付きテキストリンク（下線＋20×20矢印アイコン） --- */
  .c-btn-arrow-white,
  .c-btn-arrow-black {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid;
    font-family: var(--font-base);
    font-weight: 300;
    font-size: 1.4rem; /* 14px */
    letter-spacing: 1.4px;
    line-height: 1;

    &::after {
      content: "";
      display: inline-block;
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      background-color: currentColor;

      /* ⚠️ Figma実測：矢印の実寸は8×9で、20×20の箱の中に小さく収まっている
         （contain指定だと20×20いっぱいまで拡大されてしまい、実物より大きくなる） */
      mask-image: url("../images/common/icon/icon-arrow.svg");
      mask-size: 20px;
      mask-repeat: no-repeat;
      mask-position: center;

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

    @media (max-width: 768px) {
      gap: 16px;
      padding-bottom: 24px;
      font-size: 1.5rem; /* 15px */
      letter-spacing: 1.5px;
    }
  }

  .c-btn-arrow-white {
    color: var(--color-text-light);
    border-bottom-color: rgba(255, 255, 255, 0.5);
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        opacity: 1;
        border-bottom-color: #fff;
      }
    }
  }

  .c-btn-arrow-black {
    /* Figma実測（p-lead「DREXがめざすもの」ボタン）で確認済み */
    color: var(--color-primary);
    border-bottom-color: #bebebe;
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        opacity: 1;
        border-bottom-color: #5c5c5b;
      }
    }
  }

  /* --------------------------------------------------------------------
           Layout（ページ全体の骨組み。l- プレフィックス）
         -------------------------------------------------------------------- */
  .l-container {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--content-padding);
  }

  .l-section {
    padding-block: var(--space-xl);
  }

  .l-section--sm {
    padding-block: var(--space-lg);
  }

  @media (max-width: 1024px) {
    .l-section {
      padding-block: var(--space-lg);
    }
  }

  @media (max-width: 480px) {
    .l-container {
      padding-inline: var(--space-sm);
    }
  }

  /* --------------------------------------------------------------------
           Utility（1つの役割だけを持つ汎用クラス。u- プレフィックス）
         -------------------------------------------------------------------- */
  .u-text-center {
    text-align: center;
  }
  .u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @media (max-width: 768px) {
    .u-hide-sp {
      display: none !important;
    }
  }
  @media (min-width: 769px) {
    .u-hide-pc {
      display: none !important;
    }
  }

  /* --------------------------------------------------------------------
           Component（c- プレフィックス）
         -------------------------------------------------------------------- */

  /* --- 矢印アイコン（8×9） --- */
  .c-icon-arrow {
    display: inline-flex;
    align-items: center;

    &::after {
      content: "";
      display: inline-block;
      width: 8px;
      height: 9px;
      margin-inline-start: 4px;
      background-color: currentColor;

      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;
    }
  }

  /* --- 外部リンクアイコン（10×10） --- */
  .c-icon-blank {
    display: inline-flex;
    align-items: center;

    &::after {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-inline-start: 8px;
      background-color: currentColor;

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

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

  /* --- Instagramアイコン（14×14） --- */
  .c-icon-instagram {
    display: inline-flex;
    align-items: center;

    &::before {
      content: "";
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-inline-end: 6px;
      background-color: currentColor;

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

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

  /* --- セクション見出し（英字ロゴタイプ＋和文の2行構成） --- */
  .c-section-ttl {
    display: flex;
    flex-direction: column;
    gap: 22px;
    font-weight: 400;
    font-size: 2.8rem; /* 28px */
    letter-spacing: 2.24px;
    line-height: 1;
    color: var(--color-primary);

    span {
      font-family: var(--font-en);
      font-weight: 600;
      font-size: 1.4rem; /* 14px */
      letter-spacing: 5.6px;
      line-height: 1;
      text-transform: uppercase;
      background: linear-gradient(90deg, #d1bb61 25%, #ffc59c 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    @media (max-width: 768px) {
      font-size: 2.4rem; /* 24px */
      letter-spacing: 1.92px;

      span {
        font-size: 1.2rem; /* 12px */
        letter-spacing: 4.8px;
      }
    }
  }

  /* --- ボタン（黒塗り／白抜きの丸ピル） --- */
  .c-btn-black,
  .c-btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px 13px;
    border-radius: 20px;
    font-family: var(--font-base);
    font-weight: 300;
    font-size: 1.4rem; /* 14px */
    letter-spacing: 1.4px;
    line-height: 1;
    white-space: nowrap;

    @media (max-width: 768px) {
      padding: 20px 36px;
      border-radius: 40px;
      font-size: 1.5rem; /* 15px */
      letter-spacing: 1.5px;
    }
  }

  .c-btn-black {
    background-color: var(--color-primary);
    color: var(--color-text-light);
  }

  .c-btn-white {
    border: 1px solid #bebebe;
    color: var(--color-primary);
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        opacity: 1;
        border-color: #5c5c5b;
      }
    }
  }

  /* --- 注意書き --- */
  .c-notice {
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1rem; /* 10px */
    letter-spacing: 0.4px;
    line-height: 1;
    color: #5c5c5b;

    @media (max-width: 768px) {
      font-size: 1.1rem; /* 11px */
      letter-spacing: 0.44px;
    }
  }

  /* --- モーダル（新規取扱のご案内：医療関係者確認ダイアログ） ---
       背景クリックでは閉じない仕様。「いいえ」ボタンのみで閉じる。 --- */
  .c-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--transition-slow),
      visibility 0s linear var(--transition-slow);

    &.is-open {
      opacity: 1;
      visibility: visible;
      transition: opacity var(--transition-slow);
    }

    .c-modal__overlay {
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .c-modal__panel {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      max-width: calc(100% - 40px);
      height: 400px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .c-modal__notice {
      position: absolute;
      top: 70px;
      left: 50%;
      transform: translateX(-50%);
      width: 480px;
      max-width: calc(100% - 40px);
      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);
      text-align: center;
      white-space: nowrap;
    }

    .c-modal__heading {
      position: absolute;
      top: 168px;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-base);
      font-weight: 400;
      font-size: 2rem; /* 20px */
      letter-spacing: 0.8px;
      color: var(--color-primary);
      white-space: nowrap;
    }

    .c-modal__actions {
      position: absolute;
      top: 228px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 20px;
    }

    .c-modal__btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 300px;
      height: 80px;
      border-radius: 4px;
      cursor: pointer;
    }

    .c-modal__btn-main {
      font-family: var(--font-base);
      font-size: 1.8rem; /* 18px */
      line-height: 1.8;
      letter-spacing: 0.72px;
    }

    .c-modal__btn-sub {
      font-family: var(--font-base);
      font-size: 1.4rem; /* 14px */
      line-height: 1.7;
      letter-spacing: 0.56px;
    }

    .c-modal__btn--black {
      background-color: var(--color-primary);
      color: var(--color-text-light);
    }

    .c-modal__btn--gray {
      background-color: #ebebeb;
      color: var(--color-primary);
    }

    @media (max-width: 768px) {
      .c-modal__panel {
        width: 370px;
        height: 452px;
      }

      .c-modal__notice {
        top: 70px;
        width: 310px;
        white-space: normal;
      }

      .c-modal__heading {
        top: 182px;
      }

      .c-modal__actions {
        top: 242px;
        flex-direction: column;
        gap: 20px;
      }
    }
  }

  /* --------------------------------------------------------------------
           下層ページ共通レイアウト
         -------------------------------------------------------------------- */
  /* コンテンツ幅は880px（左右280px）・800px（左右320px）の2パターンがある */
  .l-container-sub {
    max-width: 1440px;
    margin-inline: auto;
  }

  .l-container-sub--880 {
    padding-inline: clamp(24px, 19.44vw, 280px); /* 280 / 1440 */
  }

  .l-container-sub--800 {
    padding-inline: clamp(24px, 22.22vw, 320px); /* 320 / 1440 */
  }

  /* ⚠️ 上の2つと同じ詳細度（クラス1つ）のため、ソース順で後に書いた方が勝つ。
       SP上書きは.l-container-sub--880/--800より後ろに置くこと。 */
  @media (max-width: 768px) {
    .l-container-sub--880,
    .l-container-sub--800 {
      padding-inline: 32px;
    }
  }

  /* --- 下層ページ見出し（英字ラベル＋日本語h1、中央寄せ） --- */
  .c-page-ttl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    text-align: center;

    .c-page-ttl__en {
      font-family: var(--font-en);
      font-weight: 600;
      font-size: 1.5rem; /* 15px */
      letter-spacing: 6px;
      line-height: 1;
      text-transform: uppercase;
      background: linear-gradient(90deg, #d1bb61 25%, #ffc59c 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    .c-page-ttl__ttl {
      font-family: var(--font-base);
      font-weight: 300;
      font-size: 3.4rem; /* 34px */
      letter-spacing: 1.36px;
      line-height: 1;
      color: var(--color-primary);
    }

    @media (max-width: 768px) {
      gap: 20px;

      .c-page-ttl__en {
        font-size: 1.3rem; /* 13px */
        letter-spacing: 5.2px;
      }

      .c-page-ttl__ttl {
        font-size: 2.7rem; /* 27px */
        letter-spacing: 1.08px;
      }
    }
  }

  /* --- パンくず（Yoast SEO：footer.php内でyoast_breadcrumbから出力） ---
       ⚠️ ボーダーは#breadcrumbs自体ではなく.l-footer--sub側に持たせる。
       #breadcrumbsはmax-width:1440+中央寄せで幅が画面幅より狭くなるため、
       ここにborder-topを付けると線が画面いっぱいに伸びず1440px分しか出ない。
       線は footer タグ（100%幅）の上端につけ、140pxの余白もその手前に確保する。 --- */
  .l-footer--sub {
    margin-top: 140px;
    border-top: 1px solid #b8b8b8;

    @media (max-width: 768px) {
      margin-top: 80px;
    }
  }

  #breadcrumbs {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(
      32px,
      12.5vw,
      180px
    ); /* 180 / 1440、他セクションと同じ比率 */
    height: 46px;
    display: flex;
    align-items: center;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.2rem; /* 12px */
    letter-spacing: 0.48px;
    color: var(--color-primary);

    /* ⚠️ 区切り文字（Yoastの設定次第で » や > が自動で入る）はここでは追加しない。
         二重に入ってしまうのを避けるため、実際の出力を見てから必要なら調整する。 */
    a {
      color: #a6a5a2;
    }

    @media (max-width: 768px) {
      padding-inline: 12px;
      height: 60px;
    }
  }

  /* ==========================================================================
       Header
       ========================================================================== */
  .l-header {
    position: fixed; /* フローから外し、KV等のコンテンツに常に重なるように */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: top var(--transition-base);

    /* ⚠️ このl-header自身にはtransform/backdrop-filter/filter等を付けないこと。
       これらのプロパティはnone以外の値を持つ限り、子孫のposition:fixed要素の
       基準点をこの要素自身に変えてしまう。SPドロワー（.l-header__nav-wrap）は
       position:fixedで画面全体を覆う必要があるため、祖先にこれらのプロパティが
       付くと画面全体ではなくl-header自身の小さい箱を基準に描画されてしまう。
       隠す動きはtransformではなくtopオフセットで行い、ぼかし効果は
       兄弟要素の.l-header__bgに独立して持たせている。 */

    /* 下スクロールで隠れる（likki.co.jp参考）。topオフセットなので基準点に影響しない */
    &.is-hidden {
      top: -200px; /* どのヘッダー高さ（68〜100px）よりも確実に大きい値 */
    }

    /* ぼかし背景専用レイヤー（nav-wrapの祖先にはならない兄弟要素） */
    .l-header__bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      background-color: transparent; /* 通常時は透明（Figma：背景指定なし） */
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      transition:
        backdrop-filter var(--transition-slow),
        -webkit-backdrop-filter var(--transition-slow);
    }

    &.is-scrolled .l-header__bg {
      backdrop-filter: blur(
        25px
      ); /* Figma：塗りは無色のまま、GLASSエフェクトだけ */
      -webkit-backdrop-filter: blur(25px);
    }

    .l-header__inner {
      max-width: 1440px; /* 全体幅1440px */
      margin: 0 auto; /* 中央寄せ */
      padding-left: 50px; /* 左余白 50px */
      padding-right: 32px; /* 右余白 32px */
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: space-between; /* 左右のナビとボタン群を両端に寄せる */
      position: relative; /* ⚠️ ロゴの中央配置の基準点にする */
      transition: var(--transition-base);

      /* ナビ全体ラッパー：PCではdisplay:contentsで透過し中身がl-header__innerの
         直接のflexアイテムになる（今までのnav-main/right-group配置を維持）。
         SPでは実体を持つ全画面ドロワーに切り替わる。中身（nav-main/right-group）は
         使い回しで、SP専用の見た目はメディアクエリ側で上書きする。 */
      .l-header__nav-wrap {
        display: contents;

        @media (max-width: 1080px) {
          display: flex;
          flex-direction: column;
          position: fixed;
          inset: 0;
          overflow-y: auto;
          background-color: #faf4f0;
          padding: 86px 40px 40px;
          z-index: var(--z-drawer);
          opacity: 0;
          visibility: hidden;
          transition:
            opacity var(--transition-slow),
            visibility 0s linear var(--transition-slow);

          &.is-open {
            opacity: 1;
            visibility: visible;
            transition: opacity var(--transition-slow);
          }
        }

        /* SP専用：ヘッダーに元々無いコンテンツ（Instagram・下部リンク） */
        .l-header__sp-menu-instagram {
          display: none;

          @media (max-width: 1080px) {
            display: flex;
            flex-direction: column;
            gap: 13px;
            margin-top: 50px;

            a {
              display: flex;
              align-items: center;
              font-family: var(--font-base);
              font-weight: 400;
              font-size: 1.2rem;
              line-height: 1;
              letter-spacing: 0.36px;
              color: var(--color-primary);
            }
          }
        }

        .l-header__sp-menu-links {
          display: none;

          @media (max-width: 1080px) {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 60px;

            a {
              display: block;
              font-family: var(--font-base);
              font-weight: 300;
              font-size: 1.3rem;
              line-height: 1;
              letter-spacing: 0.52px;
              color: var(--color-secondary);
            }
          }
        }
      }

      /* 左側のメインナビ */
      .l-header__nav-main {
        /* orderは不要になります */
        ul {
          display: flex;
          gap: 24px; /* ナビ同士の間隔 */
          padding: 0;
          margin: 0;
          list-style: none;

          li a {
            font-size: 1.2rem;
            font-weight: 500;
            line-height: 100%;
            letter-spacing: 0.36px;
            text-decoration: none;
            color: inherit;
          }

          /* SP：nav-wrapドロワー内で縦積みリスト表示に切り替え */
          @media (max-width: 1080px) {
            flex-direction: column;
            gap: 0;
            border-top: 1px solid #d6d6d6;

            li {
              border-bottom: 1px solid #d6d6d6;
            }

            li a {
              display: block;
              padding: 22px 0;
              font-family: var(--font-base);
              font-weight: 300;
              font-size: 1.5rem;
              line-height: 1;
              letter-spacing: 0.6px;
              color: var(--color-primary);
            }
          }
        }
      }

      /* ⚠️ 中央のロゴ（絶対配置で完全中央へ） */
      .l-header__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        transition: var(--transition-base);

        @media (max-width: 1080px) {
          width: 95px; /* SPロゴ幅（Figma FV状態の実測） */
        }
      }

      /* 右側のボタンエリア（2つのボタンを右に寄せるグループ） */
      .l-header__right-group {
        display: flex;
        align-items: center;
        gap: 12px; /* ボタン同士の間隔 */
        margin-left: auto; /* nav-mainがSPで消えても右端に固定されるように */

        /* SP：透過してnav-wrapの直接の子として縦積みにする（clinic/bizを個別に配置） */
        @media (max-width: 1080px) {
          display: contents;
        }

        /* クリニックボタン */
        .l-header__nav-clinic {
          color: #fff;
          font-size: 1.2rem;
          font-weight: 500;
          line-height: 100%;
          letter-spacing: 0.36px;
          border-radius: 4px;
          display: flex;
          height: 38px;
          justify-content: center;
          align-items: center;
          position: relative;
          z-index: 1;
          overflow: hidden;
          background: linear-gradient(90deg, #e9bead 28.98%, #ccd0d2 100%);
          cursor: pointer;

          &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(90deg, #ccd0d2 28.98%, #e9bead 100%);
            opacity: 0;
            transition: var(--transition-base);
          }

          &:hover::before {
            opacity: 1;
          }

          a {
            width: 163px;
            height: 38px;
            transition: var(--transition-base);
            display: flex;
            justify-content: center;
            align-items: center;
          }

          /* SP：Figma通り、ボタンではなくリストの1項目として表示 */
          @media (max-width: 1080px) {
            color: var(--color-primary);
            background: none;
            border-radius: 0;
            height: auto;
            justify-content: flex-start;
            border-bottom: 1px solid #d6d6d6;

            &::before {
              display: none;
            }

            a {
              width: 100%;
              height: auto;
              padding: 22px 0;
              justify-content: flex-start;
              font-family: var(--font-base);
              font-weight: 300;
              font-size: 1.5rem;
              line-height: 1;
              letter-spacing: 0.6px;
              color: inherit;
            }
          }
        }

        /* 医療機関様向け情報（アコーディオン） */
        .l-header__nav-biz {
          width: 161px;
          position: relative;
          border-radius: 4px;
          border: 1px solid #a6a5a2;
          background: #fff;
          font-size: 1.2rem;
          font-weight: 500;
          line-height: 100%;
          letter-spacing: 0.36px;
          /* 開いた時に下の角丸を消して繋げるためのアニメーション設定 */
          transition: border-radius 0.2s ease;

          /* ⚠️ メニューが開いている時の親の角丸調整 */
          &:has(.is-open) {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
          }

          .l-header__nav-biz-ttl {
            display: flex;
            align-items: center;
            padding: 12px 12px 12px 20px;
            cursor: pointer;
            background: none;
            border: none;
            font: inherit;
            color: inherit;
            gap: 7px;
            width: 100%;

            @media (max-width: 1080px) {
              display: none;
            }

            .l-header__nav-biz-icon {
              color: #5d6161;
              transition: transform 0.3s ease;
            }

            &.is-open .l-header__nav-biz-icon {
              transform: rotate(180deg);
            }
          }

          /* ドロップダウン部分（heightアニメーション方式：JS側でpx実測して制御） */
          .l-header__nav-biz-body {
            position: absolute;
            top: 100%;
            left: -1px;
            right: -1px;

            /* ⚠️ grid-template-rows(fr単位)によるジワジワ潰れる残像を避けるため、
                 height(px)ベースのシンプルなアニメーションに変更。
                 初期値はheight:0、JS側でscrollHeightを測ってpxで開閉させる */
            overflow: hidden;
            height: 0;

            /* ⚠️ 閉じてる間は背景も透明にして、親(.l-header__nav-biz)の
                 border-bottomを隠さないようにする */
            background: transparent;

            /* 常時1px分のborderスペースを確保し、色だけtransparentにしておく */
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
            border-bottom: 1px solid transparent;
            border-radius: 0 0 4px 4px;
            z-index: 10;

            will-change: height;

            /* ⚠️ 閉じる時（.is-openが外れた時）はこちらのtransitionが使われる。
                 heightが縮み切るまではborder/背景を維持し（transition-delay）、
                 縮み終わった瞬間に一気に消す。中身が消える前に下線だけ先に
                 薄くなっていく違和感を避けるための措置。 */
            transition:
              height 0.5s ease,
              border-color 0s ease 0.5s,
              background-color 0s ease 0.5s;

            > ul {
              list-style: none;
              padding: 0;
              margin: 0;

              li a,
              li button {
                display: block;
                width: 100%;
                padding: 10px 0;
                text-align: center;
                cursor: pointer;
              }
            }

            &.is-open {
              /* ⚠️ 開いた時だけ白背景を出す（heightの値自体はJSがインラインで指定） */
              background: #fff;
              border-left-color: #a6a5a2;
              border-right-color: #a6a5a2;
              border-bottom-color: #a6a5a2;

              /* ⚠️ 開く時（.is-openが付いた瞬間）はこちらが優先される。
                   border-color/backgroundを瞬時に切り替えて、
                   開く動きの最初から枠線が見えるようにする。heightは0.3s */
              transition:
                height 0.3s ease,
                border-color 0s ease,
                background-color 0s ease;
            }
          }

          /* SP：アコーディオンではなく、常時表示のボタン2つとして表示（Figma準拠） */
          @media (max-width: 1080px) {
            width: 100%;
            border: none;
            background: none;
            margin-top: 50px;

            .l-header__nav-biz-body {
              position: static;
              height: auto !important; /* JSが付けるインラインheightを無効化 */
              overflow: visible;
              background: none;
              border: none;

              > ul {
                display: flex;
                flex-direction: column;
                gap: 15px;

                li a,
                li button {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 100%;
                  height: 52px;
                  padding: 0;
                  border: 1px solid #5c5c5b;
                  font-family: var(--font-base);
                  font-weight: 300;
                  font-size: 1.5rem;
                  line-height: 1;
                  letter-spacing: 0.6px;
                  color: var(--color-primary);
                  cursor: pointer;
                }
              }
            }
          }
        }
      }

      /* ハンバーガーボタン（SP専用・l-header__innerの直接の子） */
      .l-header__hamburger {
        display: none;
        position: relative;
        width: 50px;
        height: 50px;
        flex-shrink: 0;
        margin-left: auto; /* nav-wrapがSPでfixedになり通常フローから外れても右端に固定されるように */
        z-index: calc(
          var(--z-drawer) + 1
        ); /* パネル展開時も×が上に見えるように */

        @media (max-width: 1080px) {
          display: block;
        }

        .l-header__hamburger-line {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 44px;
          height: 1px;
          background-color: var(--color-primary);
          transform: translate(-50%, -50%) translateY(-3px);
          transition: transform var(--transition-base);

          &:last-child {
            transform: translate(-50%, -50%) translateY(3px);
          }
        }

        &.is-open {
          .l-header__hamburger-line {
            transform: translate(-50%, -50%) rotate(-20deg);

            &:last-child {
              transform: translate(-50%, -50%) rotate(20deg);
            }
          }
        }
      }

      @media (max-width: 1080px) {
        height: 86px; /* SPヘッダー高さ（Figma「FV」状態） */
      }
    }

    /* スクロール時の縮小（ぼかし効果は上の.l-header__bg側で付与済み） */
    &.is-scrolled {
      .l-header__inner {
        height: 80px;
        .l-header__logo {
          width: 90px;

          @media (max-width: 1080px) {
            width: 80px; /* SPロゴ幅（Figma「追従」状態の実測） */
          }
        }

        @media (max-width: 1080px) {
          height: 68px; /* SPヘッダー高さ（Figma「追従」状態） */
        }
      }
    }
  }

  /* ==========================================================================
       Footer
       ========================================================================== */
  .l-footer {
    /* 背景で流れ続ける製品写真スライダー（クリック不可・装飾のみ）。
       動きはJS（script.jsのinitFooterSlider）がtransformで制御するコンベア方式 */
    .l-footer__slider {
      position: relative;
      overflow: hidden;
      height: 370px; /* Figma実測：PCコンテナ高さ */

      .l-footer__slider-lists {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        width: max-content;
        /* transform はJSがフレームごとに設定する */

        li {
          flex-shrink: 0;
          width: 370px;
          height: 370px; /* PC実素材(740×740)は正方形 */

          picture {
            /* <picture>はデフォルトinlineでliに伸びないため、明示的に埋める */
            display: block;
            width: 100%;
            height: 100%;
          }

          img {
            display: block;
            width: 100%;
            height: 100%;
            /* 実素材は740×740の正方形のため、object-fit:coverの標準の中央クロップに任せる */
            object-fit: cover;
          }
        }
      }

      .l-footer__slider-ttl {
        position: absolute;
        left: -10px;
        bottom: -27px;
        pointer-events: none;
        font-family: var(--font-en);
        font-weight: 300;
        /* clampで画面幅に応じて縮小し、小さいウィンドウでも見切れないようにする。
           文字間隔はemにしているため、フォントサイズが変わっても比率は保たれる */
        font-size: clamp(2.4rem, 14vw, 14rem); /* 最大140px(PC) */
        line-height: 1;
        letter-spacing: 0.01em; /* 1.4px(140px時) */
        color: var(--color-text-light);
        white-space: nowrap;

        .l-footer__slider-ttl-word {
          letter-spacing: -0.01em; /* -1.4px(140px時) */
        }

        .l-footer__slider-ttl-space:first-of-type {
          letter-spacing: -0.22em; /* -30.8px(140px時) */
        }

        .l-footer__slider-ttl-space:last-of-type {
          letter-spacing: -0.27em; /* -37.8px(140px時) */
        }
      }

      @media screen and (max-width: 767px) {
        height: 400px; /* Figma実測：SPコンテナ高さ */

        .l-footer__slider-lists {
          li {
            width: 326px;
            height: 408px; /* Figma実測：SP li高さ（コンテナ400pxに対し8px分は上下クロップ） */
          }
        }

        .l-footer__slider-ttl {
          left: -4px;
          bottom: -10px;
        }
      }
    }

    /* フッターコンテンツ */
    .l-footer__inner {
      max-width: 1200px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 1px solid #f2f2f2;
      margin: auto;
      padding: 60px 24px 60px 0;
      @media screen and (max-width: 1300px) {
        padding: 60px 20px;
      }
      @media screen and (max-width: 767px) {
        display: block;
        padding: 60px 40px;
      }
      .l-footer__brand {
        @media screen and (max-width: 767px) {
          margin-bottom: 100px;
        }
        .l-footer__logo {
          width: 80px;
          color: var(--color-primary);
          transition: var(--transition-base);
          margin-bottom: 40px;
          @media screen and (max-width: 767px) {
            width: 83px;
          }
          @media (hover: hover) and (pointer: fine) {
            &:hover {
              opacity: 0.6;
            }
          }
        }
        .l-footer__company-link {
          font-size: 1.3rem;
          font-style: normal;
          font-weight: 400;
          line-height: 100%; /* 13px */
          letter-spacing: 0.39px;
          margin-bottom: 10px;
        }
        .l-footer__address {
          font-size: 1.2rem;
          font-style: normal;
          font-weight: 400;
          line-height: 150%; /* 18px */
          letter-spacing: 0.48px;
          margin-bottom: 30px;
        }
        .l-footer__instagram {
          display: flex;
          flex-direction: column;
          gap: 11px;
          @media screen and (max-width: 767px) {
            gap: 20px;
          }
          li {
            a {
              font-size: 13px;
              font-style: normal;
              font-weight: 400;
              line-height: 100%; /* 13px */
              letter-spacing: 0.39px;
            }
          }
        }
      }
      .l-footer__nav {
        /* PCはgridで列を作る。flex-wrapだと各項目の幅が文字数まかせになり、
           段ごとに列の位置がずれる（旧実装では2列目・3列目が11pxずれていた）。
           トラック幅はautoで中身に追従するので、文言が変わっても列は揃ったままになる。 */
        display: grid;
        grid-template-columns: repeat(4, auto);
        justify-content: start;
        max-width: 396px;
        gap: 30px;

        /* 文字数が突出して長い項目にだけ付ける。
           付けないと3列目のトラック幅がその項目に合わせて広がり、
           1段目の「お知らせ」の後に大きな余白ができてしまう。
           2列ぶん使わせることで、3列目は短い項目の幅のままで済む。 */
        .l-footer__nav-wide {
          grid-column: span 2;
        }

        @media screen and (max-width: 767px) {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-auto-flow: column;
          grid-template-rows: repeat(4, auto);
          gap: 25px;
          list-style: none;
          padding: 0;
          margin: 0;

          /* SPは2列構成なので span を効かせない。
             効かせると行の割り付けが崩れ、フッターが約50px高くなる（実測） */
          .l-footer__nav-wide {
            grid-column: auto;
          }
        }
        li {
          a {
            font-size: 1.3rem;
            font-style: normal;
            font-weight: 400;
            line-height: 100%; /* 13px */
            letter-spacing: 0.39px;
          }
        }
      }
    }
    /* フッターコピーライト */
    .l-footer__copyright {
      font-size: 11px;
      font-style: normal;
      font-weight: 400;
      line-height: 100%; /* 11px */
      letter-spacing: 0.33px;
      color: #a6a5a2;
      text-align: center;
      padding-block: 30px;
    }
  }
}