/* ============ reset レイヤー ============ */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    /* 1rem = 10px 換算。ブラウザのズーム設定はremで尊重される */
    font-size: 62.5%;
    /* hiddenだとoverflow-yが自動autoになりposition:stickyが壊れるためclipにする */
    overflow-x: clip;
  }

  body {
    margin: 0;
    font-family: var(--font-base);
    /* ベース仕様: Noto Sans JP 14px Regular / #000 */
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    /* Swiperのloop複製で横スクロールが出るためbodyで止める(clipの理由はhtml側コメント参照) */
    overflow-x: clip;

    /* SP本文は640pxで20pxが基準。page層の無条件指定に勝てないため個別参照 */
    @media (max-width: 767px) {
      font-size: var(--fs-sp-default);
    }
  }

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

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

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

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

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

  /* prefers-reduced-motion を尊重し、動きを最小限にする */
  @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;
    }
  }
}

/* ============ common レイヤー：l-/p- はBlockごと入れ子、再利用する c- はフラットに書く ============ */
@layer common {
  /* 視覚的に隠し読み上げには残す（display:noneだと消える） */
  .u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
  }

  /* PC/SPで改行位置が違う長文用。brの表示切替で出し分ける */
  .u-sp-only {
    display: none;
  }

  @media (max-width: 767px) {
    .u-sp-only {
      display: inline;
    }

    .u-pc-only {
      display: none;
    }
  }

  /* 本文へスキップリンク：フォーカス時のみ表示する */
  .c-skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-sm);
    z-index: 999;
    padding: var(--space-2xs) var(--space-sm);
    color: var(--color-text);
    background-color: var(--color-bg);
    transition: top var(--transition-base);

    &:focus {
      top: var(--space-sm);
    }
  }

  /* スクロール検知用の目印。最上部にいる間だけ交差する */
  .js-scroll-sentinel {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    opacity: 0;
  }

  /* ============ リンクホバーの既定動作：サイト共通でopacity 0.7にする ============ */
  a {
    transition: opacity var(--transition-base);
  }

  @media (hover: hover) and (pointer: fine) {
    a:hover {
      opacity: 0.7;
    }
  }

  /* ============ c-logo：AFOLA ロゴ。ヘッダー・フッターで共有する ============ */
  .c-logo {
    display: inline-block;
    flex-shrink: 0;
    color: currentColor;
  }

  .c-logo__mark {
    display: block;
    width: auto;
    /* viewBox比率(131.44:23)を保ったまま高さで指定する。ヘッダーでの基準サイズ */
    height: 2.3rem;

    @media (max-width: 767px) {
      /* 640px実測30px。320pxまで比例縮小 */
      height: clamp(1.5rem, 4.6875vw, 3rem);
    }
  }

  /* ============ c-icon-btn：アイコンボタン共通部品（ページを跨いで再利用する） ============ */
  .c-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* タップ領域はPC60px、SP50px（下のmedia参照） */
    width: 6rem;
    height: 6rem;
    color: currentColor;
  }

  .c-icon-btn__icon {
    width: auto;
    /* viewBox比率(19.56:17.87)を保ったまま高さで指定する */
    height: 2rem;
    stroke: currentColor;
    /* 支給データの仕様通り、viewBoxのユーザー単位で1.56 */
    stroke-width: 1.56;
    fill: none;
  }

  /* 塗りのリング形状SVGのため、stroke主体の.c-icon-btn__iconだと二重線に見える */
  .l-header__sns-icon {
    width: auto;
    height: 2rem;
    fill: currentColor;
  }

  @media (hover: hover) and (pointer: fine) {
    .c-icon-btn:hover {
      opacity: 0.7;
    }
  }

  /* ============ c-fav-icon：ヘッダーのハートと登録件数。色と件数はcommon.jsが付け外し ============ */
  /* 文字サイズをハートの高さと同じにし、丸の位置・大きさをハートとの比(PDF実測)でemにする */
  .c-fav-icon {
    position: relative;
    display: block;
    font-size: 2rem; /* .c-icon-btn__icon の高さと同じ */
    line-height: 0;
  }

  .c-icon-btn.is-added .c-icon-btn__icon {
    fill: var(--color-fav);
    stroke: var(--color-fav);
  }

  .c-fav-icon__count {
    position: absolute;
    /* PDF実測：文字10px÷ハート高17.87px。丸の大きさ・位置はこの文字サイズの倍数 */
    font-size: 0.5596em;
    inset-block-start: 0.608em; /* PDF実測：ハート上端から6.08px */
    inset-inline-start: 1.378em; /* PDF実測：ハート左端から13.78px */
    display: grid;
    place-items: center;
    width: 2em; /* PDF実測：直径20px */
    height: 2em;
    border-radius: 50%;
    background-color: var(--color-fav);
    color: var(--color-text-invert);
    font-weight: var(--fw-heavy);
    line-height: 1;
    /* Avenirの数字は行の中で0.094em上に寄るため(実測)、上に倍の余白を足して丸の中心へ下げる */
    padding-block-start: 0.188em;

    /* [hidden]はdisplay:gridに負けて効かなくなるため明示する */
    &[hidden] {
      display: none;
    }
  }

  /* ============ c-button：白背景・黒枠の「もっと見る」系ボタン（配置はp-側で持つ） ============ */
  .c-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20rem; /* SVGカンプ実測（p-works/p-news/p-productsと共通） */
    height: 4.6rem;
    /* フォントの非対称で文字が上寄りに見えるためpaddingで下げる */
    padding-block: 0.26em 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-text);

    @media (max-width: 767px) {
      /* 640px実測280×64.4px(cls-36)。375pxはPC値まで縮小してよい */
      width: clamp(20rem, 8.6792rem + 30.1887vw, 28rem);
      height: clamp(4.6rem, 1.9962rem + 6.9434vw, 6.44rem);
      /* 640px実測22.4px(cls-25)。375pxはPC値16pxまで縮小してよい */
      font-size: clamp(1.6rem, 0.6943rem + 2.4151vw, 2.24rem);
    }
  }

  /* ============ c-work-card：施工事例カード（トップページ・各詳細ページの関連事例で共有） ============ */
  .c-work-card {
    position: relative;
    display: block;
  }

  .c-work-card__thumb {
    display: block;
    overflow: hidden; /* ホバー時に拡大する画像がタグ側へはみ出さないよう画像だけで囲う */
  }

  .c-work-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 69 / 44; /* 縦長の写真が入ってもカードの高さを揃えるため */
    object-fit: cover;
    transition: transform var(--transition-base);
  }

  @media (hover: hover) and (pointer: fine) {
    .c-work-card:hover .c-work-card__image {
      transform: scale(1.05);
    }
  }

  .c-work-card__tags {
    display: flex;
    flex-wrap: wrap; /* タグ3個(幅固定)がカード幅に収まらない時は折り返す(はみ出し防止) */
    gap: 1rem; /* SVGカンプ実測 */
    margin-block-start: 2.1rem; /* SVGカンプ実測(画像下端から) */
  }

  .c-work-card__tag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 3rem;
    padding-block: 0.2em 0; /* フォントの非対称で文字が上寄りに見えるため下げる */
    background-color: var(--color-text); /* SVGカンプ実測 */
    color: var(--color-text-invert);
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
  }

  .c-work-card__name {
    margin-block-start: 1.5rem; /* SVGカンプ実測(タグ下端から) */
    font-size: 1.8rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
  }

  @media (max-width: 767px) {
    .c-work-card {
      margin-inline: 0;
    }

    .c-work-card__tags {
      /* SP640px実測14px。375pxはPC値10pxまで縮小してよい */
      gap: clamp(1rem, 0.434rem + 1.5094vw, 1.4rem);
      /* SP640px実測29.94px。375pxはPC値21pxまで縮小してよい */
      margin-block-start: clamp(2.1rem, 0.8349rem + 3.3736vw, 2.994rem);
      margin-inline: 2rem; /* 親リストのpadding-inline:0が前提。テキストだけ内側へ戻す */
    }

    .c-work-card__tag {
      /* 640px実測112×42pxから少し詰めた値。375pxもPC値からさらに少し詰めた */
      width: clamp(7.2rem, 3.2378rem + 10.566vw, 10rem);
      height: clamp(3rem, 1.3019rem + 4.5283vw, 4.2rem);
      /* .cls-20実測16.8px(640px時)。375pxはPC値12pxまで縮小してよい */
      font-size: clamp(1.2rem, 0.5208rem + 1.8113vw, 1.68rem);
    }

    .c-work-card__name {
      /* SP640px実測38.3px。375pxはPC値15pxまで縮小してよい */
      margin-block-start: clamp(1.5rem, -1.7972rem + 8.7925vw, 3.83rem);
      margin-inline: 2rem; /* 親リストのpadding-inline:0が前提。テキストだけ内側へ戻す */
      /* .cls-21実測22px(640px時)。320pxまで比例縮小 */
      font-size: clamp(1.1rem, 3.4375vw, 2.2rem);
    }
  }

  /* ============ 一覧のカード写真を左から右へ見せる：付け外しはcommon.js（js-reveal） ============ */
  /* 写真を切り抜くとブラウザが見えていない扱いにして遅延読み込みが止まるため、上に幕をかぶせて右へ抜く */
  .is-reveal-ready :is(.c-product-card__media, .c-work-card__thumb) {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      inset: -1px; /* 幅の端数の丸めで写真の右端が1px覗くため、枠より少し大きくして枠の外は隠す */
      background-color: var(--color-bg); /* 商品は白い枠から見せる */
      transform-origin: right;
      transition: transform 1s cubic-bezier(0.77, 0, 0.18, 1) var(--reveal-delay, 0s);
      pointer-events: none;
    }
  }

  /* WORKSは白を敷かず、下層ページの地色（contents.cssの#main）と同じ幕にする */
  .is-reveal-ready .c-work-card__thumb::after {
    background-color: #f0f0f0;
  }

  .is-reveal-ready.is-revealed :is(.c-product-card__media, .c-work-card__thumb)::after {
    transform: scaleX(0);
  }

  /* ============ c-product-card：商品一覧の商品カード（図面はc-product-thumbと同じ%配置） ============ */
  .c-product-card {
    display: block;
  }

  .c-product-card__media {
    position: relative;
    display: block;
    overflow: hidden; /* ホバー時に拡大する画像がCAD/バッジ側へはみ出さないよう画像だけで囲う */
  }

  .c-product-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* PDF実測(390×219.3px) */
    object-fit: cover;
    transition: transform var(--transition-base);
  }

  /* 他ページ(c-work-card、トップのp-products__card)と共通のホバー拡大 */
  @media (hover: hover) and (pointer: fine) {
    .c-product-card:hover .c-product-card__image {
      transform: scale(1.05);
    }
  }

  .c-product-card__cad {
    position: absolute;
    inset-block-end: 4.56%; /* c-product-thumb__cadと同じ比率 */
    inset-inline-end: 2.56%;
    width: 28.2%;
    height: auto; /* 図面ごとに比率が違う（R101D等は縦長）ため、比率を固定せず図面に任せる */
    z-index: 2; /* 写真のホバー拡大と、写真を見せる幕(::after)の後ろに隠れないように */
  }

  .c-product-card__badges {
    position: absolute;
    inset-block-start: 1rem; /* PDF実測(10px) */
    inset-inline-start: 1rem;
    width: 100%; /* 無いと子のwidth%基準が不定になりバッジ数でサイズがズレる(c-product-thumb__awardsと同じ対策) */
    z-index: 2; /* 写真のホバー拡大と、写真を見せる幕(::after)の後ろに隠れないように */
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  /* SVGごとに実寸比率が違うため幅は統一せず%指定(統一すると一部が実寸より拡大して見えた) */
  .c-product-card__badge {
    display: block;
    height: auto;

    &.c-product-card__badge--good-design {
      width: 18%; /* PDF実測：SVG原寸69px(画像幅390px時) */
      aspect-ratio: 69 / 25;
    }

    &.c-product-card__badge--kids {
      width: 11.5%; /* PDF実測：SVG原寸44px(画像幅390px時) */
      aspect-ratio: 44 / 25;
    }

    &.c-product-card__badge--best100 {
      width: 24.1%; /* 一覧デザインのJPG実測：SVG原寸94px(画像幅390px時) */
      aspect-ratio: 94 / 25;
    }
  }

  .c-product-card__caption {
    display: block;
    margin-block-start: 1.6rem; /* PDF実測(15.8px)：画像下端から */
  }

  .c-product-card__name {
    display: block;
    font-size: 2rem; /* PDF実測(20px) */
    font-weight: var(--fw-heavy);
  }

  /* 名前の文字に合わせて縮むようemにする。SPのfont-size指定を別に持たないため */
  .c-product-card__new {
    margin-inline-start: 2em; /* 一覧デザインのJPG実測(24px) */
    font-size: 0.6em; /* 一覧デザインのJPG実測（名前20pxに対し12px） */
    font-weight: var(--fw-medium);
    color: var(--color-new);
  }

  .c-product-card__category {
    display: block;
    margin-block-start: 0.2rem;
    font-size: 1.2rem; /* PDF実測(12px) */
  }

  @media (max-width: 767px) {
    .c-product-card__name {
      /* PDF実測(PRODUCT-TOP-SP.jpg)：SP640px時32px */
      font-size: clamp(1.6rem, 5vw, 3.2rem);
    }

    .c-product-card__category {
      /* PDF実測(SP640px時20px) */
      font-size: var(--fs-sp-default);
    }
  }

  /* ============ is-cropped：上31%が無地のIMAGE写真を正方形に切り、上側だけ削る ============ */
  .is-cropped {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: bottom;
  }

  /* ============ c-product-thumb：商品画像に図面・受賞ロゴを重ねる（c-product-cardとは寸法が違う） ============ */
  .c-product-thumb {
    position: relative;
    display: block;
    overflow: hidden; /* ホバー時に拡大する画像を枠内に収める */
  }

  .c-product-thumb__image {
    display: block;
    width: 100%;
    transition: transform var(--transition-base);
  }

  /* リンク内に置いた時だけホバー拡大する（サンプル請求フォームはリンクでないため対象外） */
  @media (hover: hover) and (pointer: fine) {
    a:hover .c-product-thumb__image {
      transform: scale(1.05);
    }
  }

  .c-product-thumb__cad {
    position: absolute;
    /* %基準は幅/高さで分母が違うため右2.56%・下4.56%と別指定（PDF実測） */
    inset-block-end: 4.56%;
    inset-inline-end: 2.56%;
    width: 28.2%;
    height: auto; /* 図面ごとに比率が違うため、比率を固定せず図面に任せる */
  }

  /* コンテナだけ絶対配置し、中は通常フロー(flex)で1個の時も左詰めにする */
  .c-product-thumb__awards {
    position: absolute;
    inset-block-start: 4.56%; /* PDF実測：図面と上下左右対称の値 */
    inset-inline-start: 2.56%;
    width: 100%; /* 無いと子のwidth%基準が不定になりウィンドウ幅次第でズレる */
    display: flex;
    align-items: flex-start;
    gap: 3.59%; /* PDF実測：ロゴ間隔14px(画像幅390px時) */
  }

  /* SVGごとに実寸比率が違うため幅は統一せず%指定（画像幅390px時のSVG原寸から算出） */
  .c-product-thumb__award {
    &.c-product-thumb__award--good-design {
      width: 18%; /* 69px */
      aspect-ratio: 69 / 25;
    }

    &.c-product-thumb__award--best100 {
      width: 24%; /* 94px */
      aspect-ratio: 94 / 25;
    }

    &.c-product-thumb__award--kids {
      width: 11.5%; /* 44px */
      aspect-ratio: 44 / 25;
    }
  }

  /* ============ c-remove-btn：画像右上角に中心を重ねる丸い削除ボタン（お気に入り/サンプル請求） ============ */
  .c-remove-btn {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    translate: 50% -50%; /* PDF実測：画像右上角にボタン中心が重なる位置 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem; /* PDF実測20px */
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-text);
    color: var(--color-text-invert);
    /* サイト共通のaホバー(opacity 0.7)とアニメーションを揃える */
    transition: opacity var(--transition-base);
  }

  .c-remove-btn__icon {
    width: 1.3rem; /* PDF実測13px */
    height: 1.3rem;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .c-remove-btn:hover {
      opacity: 0.7;
    }
  }

  /* ============ c-checkbox：appearance:noneで差し替えたチェックボックス付きラベル ============ */
  /* CF7はチェックボックスのlabelにクラスを付けられないため、その出力にも同じ見た目を当てる */
  .c-checkbox,
  .wpcf7-list-item > label {
    display: flex;
    align-items: center;
    gap: 1rem; /* PDF実測(10px) */
    cursor: pointer;

    input {
      /* iOS Safari は無印appearanceだけだと角丸が残る端末があるため-webkit-も明示する */
      -webkit-appearance: none;
      appearance: none;
      flex-shrink: 0;
      width: 1.6rem;
      height: 1.6rem;
      margin: 0;
      background-color: transparent; /* PDF実測：未チェック時は塗りなし */
      border: 1px solid var(--color-text);
      border-radius: 0;

      &:checked {
        background-color: var(--color-text);
        /* チェックマークはSVGのbackground-image（input要素は::afterが効かないため） */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1.2rem;
      }
    }

    span {
      font-size: var(--fs-sm); /* PDF実測(14px)：見出しと同じサイズ。--fs-xs(12px)は誤り */
    }
  }

  @media (max-width: 767px) {
    .c-checkbox span,
    .wpcf7-list-item > label span {
      /* PDF実測(PRODUCT-TOP-SP-MENU.jpg)：SP640px時20px */
      font-size: var(--fs-sp-default);
    }
  }

  /* ============ c-hamburger：2本線⇔×に変形するボタン（ページを跨いで再利用する） ============ */
  .c-hamburger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* タップ領域はPC60px、SP50px（下のmedia参照） */
    width: 6rem;
    height: 6rem;

    /* 2本線は装飾のみのため疑似要素にする。同じ中心点からtranslateで開閉 */
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 2.6rem;
      height: 0.2rem;
      background-color: currentColor;
      transition:
        translate var(--transition-base),
        rotate var(--transition-base);
    }

    &::before {
      translate: -50% calc(-50% - 0.5rem);
    }

    &::after {
      translate: -50% calc(-50% + 0.5rem);
    }
  }

  /* SPはc-icon-btn/c-hamburgerとも当たり領域50px四方 */
  @media (max-width: 767px) {
    .c-icon-btn,
    .c-hamburger {
      width: 5rem;
      height: 5rem;
    }
  }

  .c-hamburger.is-open {
    &::before {
      translate: -50% -50%;
      rotate: 45deg;
    }

    &::after {
      translate: -50% -50%;
      rotate: -45deg;
    }
  }

  @media (max-width: 767px) {
    .c-icon-btn__icon {
      /* 640px実測23.75px(bbox+stroke)。320pxまで比例縮小 */
      height: clamp(1.1875rem, 3.7109vw, 2.375rem);
    }

    .l-header__sns-icon {
      /* c-icon-btn__iconと同じ考え方で他アイコンとサイズを揃える */
      height: clamp(1.1875rem, 3.7109vw, 2.375rem);
    }

    .c-fav-icon {
      /* .c-icon-btn__icon のSPの高さと同じ。丸もPDF(SP)の比と一致する */
      font-size: clamp(1.1875rem, 3.7109vw, 2.375rem);
    }

    .c-hamburger {
      &::before,
      &::after {
        /* 640px実測37px(積分法)。320pxまで比例縮小 */
        width: clamp(1.85rem, 5.7813vw, 3.7rem);
        /* 640px実測2px(積分法)。320pxまで比例縮小 */
        height: clamp(0.1rem, 0.3125vw, 0.2rem);
      }

      &::before {
        /* 中心間距離実測14.48px(重心法)。320pxまで比例縮小 */
        translate: -50% calc(-50% - clamp(0.362rem, 1.1313vw, 0.724rem));
      }

      &::after {
        translate: -50% calc(-50% + clamp(0.362rem, 1.1313vw, 0.724rem));
      }
    }
  }

  /* メガメニューを開いた瞬間は白、そこからメガメニュー本体の背景色へなじませる */
  @keyframes l-header-menu-bg {
    from {
      background-color: var(--color-bg);
    }
    to {
      background-color: var(--color-bg-alt);
    }
  }

  /* ============ l-header：ページ全体で共通のヘッダー（このページにしか無いためBlockごと入れ子にする） ============ */
  .l-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-header);

    /* ログイン中はWPの管理バー（782px以下は46px）がヘッダーに重なるため、その分下げる */
    body.admin-bar & {
      inset-block-start: 32px;

      @media (max-width: 782px) {
        inset-block-start: 46px;
      }
    }
    color: var(--color-text-invert);
    background-color: transparent;
    transition:
      color var(--transition-base),
      background-color var(--transition-base);

    /* スクロールで白背景を敷くため白文字だと読めず黒に切替 */
    &.is-scrolled {
      color: var(--color-text);
      background-color: var(--color-bg);

      /* デザイン指定のグレー。navは黒のまま変えない */
      .c-logo,
      .l-header__btns {
        color: var(--color-header-muted);
      }
    }

    /* メガメニュー展開中は背後が明るく白文字を維持できない。追従中は背景も敷く */
    &:has(.l-mega-menu.is-open) {
      color: var(--color-text);
      /* --transition-baseがeaseを含むため、timing-functionは重ねて書かない */
      animation: l-header-menu-bg var(--transition-base) forwards;

      /* 開いている間は通常ナビを隠す(メガメニュー側に集約するため) */
      .l-header__nav {
        display: none;
      }
    }

    .l-header__inner {
      /* メガメニュー(z-index:90)に未指定のまま負けるため明示 */
      position: relative;
      z-index: var(--z-header);
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* アイコン当たり領域60pxがy=0起点でそのまま行の高さになる */
      padding-inline: var(--content-padding);
      padding-block: 0;
    }

    .l-header__nav-list {
      display: flex;
      align-items: center;
      gap: var(--space-md);

      a {
        font-size: var(--fs-sm);
        font-weight: var(--fw-heavy);
        white-space: nowrap;
        letter-spacing: 0.1rem;
      }
    }

    .l-header__btns {
      display: flex;
      flex-shrink: 0;
      align-items: center;
    }

    /* ロゴとnavが接触し始める1016px超に余白を見て1100pxを切替点に */
    @media (max-width: 1099px) {
      .l-header__nav {
        display: none;
      }

      .l-header__inner {
        /* SPは上下余白なし。ロゴ側30px、アイコン側は右端ぴったり */
        padding-block: 0;
        padding-inline-start: 3rem;
        padding-inline-end: 0;
      }
    }
    /* ============ l-mega-menu：ハンバーガー展開時のオーバーレイ（ページ内に1つしか無いためBlockごと入れ子にする） ============ */
    .l-mega-menu {
      position: fixed;
      inset: 0;
      z-index: var(--z-mega-menu);

      /* ヘッダーと同じく、ログイン中は管理バーの下から始める */
      body.admin-bar & {
        inset-block-start: 32px;

        @media (max-width: 782px) {
          inset-block-start: 46px;
        }
      }
      /* 最下部までスクロールした後、背後のページへスクロールが伝播しないようにする */
      overscroll-behavior: contain;
      overflow-y: auto;
      color: var(--color-text);
      background-color: var(--color-bg-alt);
      visibility: hidden;
      /* 閉じる時は反応の速さを優先して短く。開く時は&.is-openで上書きする */
      transition: visibility var(--transition-fast);

      &.is-open {
        visibility: visible;
        transition: visibility var(--transition-base);

        .l-mega-menu__inner {
          opacity: 1;
          transition: opacity var(--transition-base);
        }
      }

      .l-mega-menu__inner {
        display: flex;
        gap: var(--space-2xl);
        /* ヘッダーはこの要素の外(兄弟)にいるためフェードの影響を受けない */
        opacity: 0;
        /* 閉じる時は反応の速さを優先して短く。開く時は&.is-openで上書きする */
        transition: opacity var(--transition-fast);
        /* ヘッダーはDOM移動せずtransformで追従させるだけなので、実高さ(5rem)分をここで確保する */
        padding-block: calc(var(--space-md) + 5rem) var(--space-md);
        padding-inline: var(--content-padding);

        @media (min-width: 768px) {
          /* カンプ実測83px(1920px時)。768pxは現状値64pxに接続 */
          gap: clamp(4rem, 5.134rem + 1.649vw, 8.3rem);
          /* ヘッダー実高さ6rem＋カンプ実測108px(1920px時)。768pxはヘッダー実高さ6rem＋現状値24pxに接続 */
          padding-block-start: clamp(8.4rem, 2.8rem + 7.2917vw, 16.8rem);
        }
      }

      .l-mega-menu__heading {
        margin-block-end: var(--space-lg);
        font-size: var(--fs-lg);
        font-weight: var(--fw-heavy);

        @media (min-width: 768px) {
          /* カンプ実測31px(1920px時、大文字比率0.7425で逆算)。768pxはSP側の値(25.84px)に接続 */
          font-size: clamp(2.584rem, 2.24rem + 0.4479vw, 3.1rem);
          /* カンプ実測68px(1920px時、line-height余白14.39px分を補正) */
          margin-block-end: clamp(3.2rem, 1.759rem + 1.8759vw, 5.361rem);
          letter-spacing: 0.4rem;
        }
      }

      .l-mega-menu__products {
        flex: 2 1 0;

        @media (min-width: 768px) {
          /* カンプはコンテンツ幅(画像実寸)なのでgrow/shrinkさせない */
          flex: 0 0 auto;
        }
      }

      /* 9件を3列×4行に列方向で流し込む。grid-auto-flow:columnで再現 */
      .l-mega-menu__product-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, auto);
        grid-auto-flow: column;
        gap: var(--space-sm);

        @media (min-width: 768px) {
          /* カンプ実測270px(1920px時)。768pxは比例縮小 */
          grid-template-columns: repeat(3, clamp(10.8rem, 14.0625vw, 27rem));
          /* カンプ実測20px(1920px時)。768pxは現状値16pxに接続 */
          gap: clamp(1.6rem, 1.333rem + 0.3472vw, 2rem);
        }
      }

      .l-mega-menu__product-thumb {
        display: block;
        width: 100%; /* img要素はheight:autoのままだとaspect-ratioと競合するため明示 */
        /* 実測219px:139pxの比率 */
        aspect-ratio: 8 / 5;
        object-fit: cover;
        margin-block-end: var(--space-3xs);
        /* 読み込み中のちらつき防止用の背景 */
        background-color: var(--color-border);

        @media (min-width: 768px) {
          /* カンプ実測270px:140px(1920px時) */
          aspect-ratio: 27 / 14;
          /* カンプ実測20px(1920px時)。768pxは現状値4pxに接続 */
          margin-block-end: clamp(0.4rem, -0.667rem + 1.3889vw, 2rem);
        }
      }

      .l-mega-menu__product-name {
        display: block;
        font-size: var(--fs-md);
        font-weight: var(--fw-heavy);

        @media (min-width: 768px) {
          /* カンプ実測20.69px(1920px時、アンチエイリアス込み実測15px÷0.725)。768pxは現状値16pxに接続 */
          font-size: clamp(1.6rem, 1.287rem + 0.4071vw, 2.069rem);
        }
      }

      .l-mega-menu__product-desc {
        display: block;
        font-size: var(--fs-xs);

        @media (min-width: 768px) {
          /* カンプ実測13.01px(1920px時、アンチエイリアス込み実測12px÷0.9225)。768pxは現状値12pxに接続 */
          font-size: clamp(1.2rem, 1.133rem + 0.0877vw, 1.301rem);
        }
      }

      .l-mega-menu__information {
        flex: 1 1 0;
      }

      .l-mega-menu__info-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);

        @media (min-width: 768px) {
          /* カンプ実測42px(1920px時、中心間距離)。768pxは現状値16pxに接続 */
          gap: 1.6rem;
        }
      }

      .l-mega-menu__info-list a {
        font-size: var(--fs-md);
        font-weight: var(--fw-heavy);
        letter-spacing: 0.2rem;

        @media (min-width: 768px) {
          /* カンプ実測14.81px(1920px時、大文字比率0.7425で逆算)。768pxは現状値16pxに接続 */
          font-size: clamp(1.481rem, 1.679rem - 0.1033vw, 1.6rem);
        }
      }

      .l-mega-menu__sns {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4rem;
        height: 4rem;
        margin-block-start: var(--space-2xl);
        background-color: var(--color-bg);
        border-radius: 50%;

        @media (min-width: 768px) {
          /* カンプ実測64px(1920px時)。768pxは現状値40pxに接続 */
          width: clamp(4rem, 2.4rem + 2.083vw, 5rem);
          height: clamp(4rem, 2.4rem + 2.083vw, 5rem);
        }
      }

      .l-mega-menu__sns-icon {
        width: 1.8rem;
        height: 1.8rem;
        fill: currentColor;

        @media (min-width: 768px) {
          /* 円のサイズ比率(1.6倍)に合わせて拡大 */
          width: clamp(1.8rem, 1.08rem + 0.9375vw, 2.88rem);
          height: clamp(1.8rem, 1.08rem + 0.9375vw, 2.88rem);
        }
      }

      /* SP下部固定の「閉じる」バー。PC版のカンプには存在しないためSP限定 */
      .l-mega-menu__close {
        display: none;
      }

      @media (max-width: 767px) {
        .l-mega-menu__inner {
          flex-direction: column;
          gap: var(--space-xl);
          padding-inline: var(--space-md);
          padding-block-end: 8rem; /* 下部固定の閉じるバーと重ならない余白 */
        }

        .l-mega-menu__heading {
          /* 実測27px(640px時、文字高さから推定25.84px)。PC値20pxまで縮小すると見た目が小さすぎるため固定 */
          font-size: 2.584rem;
        }

        .l-mega-menu__product-list {
          /* SPカンプは同じDOM順のまま2列・行優先(初期値)で読める並びになる */
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: none;
          grid-auto-flow: row;
        }

        .l-mega-menu__close {
          position: fixed;
          inset-block-end: 0;
          inset-inline: 0;
          z-index: var(--z-mega-menu);
          display: flex;
          align-items: center;
          justify-content: center;
          /* カンプ実測28px(640px時)から少し詰めた値。PC対応なしのため320pxまで比例縮小 */
          gap: clamp(1.1rem, 3.4375vw, 2.2rem);
          /* カンプ実測81px(640px時)。PC対応なしのため320pxまで比例縮小 */
          height: clamp(4.05rem, 12.65625vw, 8.1rem);
          color: var(--color-text-invert);
          background-color: var(--color-text);
        }

        .l-mega-menu__close-icon {
          /* カンプ実測: ×アイコン約25px四方 */
          width: 2.5rem;
          height: 2.5rem;
          stroke: currentColor;
          fill: none;
        }

        .l-mega-menu__close-label {
          /* カンプ実測20.6px(640px時)。PC対応なしのため320pxまで比例縮小 */
          font-size: clamp(1.03rem, 3.21875vw, 2.06rem);
          /* 既定line-heightだと上下の余白が非対称でXアイコンと中心がズレる */
          line-height: 1;
          /* line-height:1でも和文フォントの字面位置が上寄りになるため下にずらす */
          transform: translateY(0.166em);
        }
      }
    }
  }

  /* ============ l-footer：ページ全体で共通のフッター（このページにしか無いためBlockごと入れ子にする） ============ */
  .l-footer {
    background-color: var(--color-bg-alt);
    letter-spacing: 1.5px;

    .l-footer__grid {
      display: flex;
      flex-wrap: wrap; /* 縮めた時に列を潰さず、収まらない列を折り返す */
      align-items: stretch;
      /* カンプ実測: 各列の間隔は約105〜115px */
      column-gap: 11rem;
      row-gap: var(--space-2xl); /* 折り返した時の縦の間隔（デザインに無いため暫定） */
      padding-block: 10rem 12rem;
      padding-inline-start: var(--content-padding);
      /* p-catalog__inner(グレー背景、幅128rem中央寄せ)の右端に揃える。SVG実測と一致する式 */
      padding-inline-end: max(2rem, (100vw - 128rem) / 2);
    }

    .l-footer__brand {
      display: flex;
      min-width: 28rem; /* これ以上は縮めず、収まらなければ折り返す */
      flex-direction: column;
    }

    .l-footer__logo {
      /* ヘッダーロゴより大きい(cap高39px、約1.9倍) */
      .c-logo__mark {
        height: 4rem;
      }
    }

    .l-footer__catchcopy {
      /* カンプ実測: ロゴ下端からキャッチコピーまで約90px */
      margin-block-start: 9rem;
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      /* カンプ実測: 行間28px(14px×2.0) */
      line-height: 2;
    }

    .l-footer__sns {
      display: flex;
      align-items: center;
      justify-content: center;
      /* カンプ実測: 直径48.4px */
      width: 4.84rem;
      height: 4.84rem;
      /* 兄弟(ロゴ・キャッチコピー)の下に余白を空けず、列の下端に沈める */
      margin-block-start: auto;
      color: var(--color-text);
      background-color: var(--color-bg);
      border-radius: 50%;

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          opacity: 0.7;
        }
      }
    }

    .l-footer__sns-icon {
      /* カンプ実測: ロゴ幅約23.5px（直径48pxの円に対して約半分） */
      width: 2.35rem;
      height: 2.35rem;
      fill: currentColor;
    }

    .l-footer__blocks {
      display: flex;
      flex-wrap: wrap; /* ロゴ列との合計が収まらない幅では3列ごと2行目へ落ちる */
      column-gap: 11rem;
      row-gap: var(--space-2xl);
      /* 残りスペースを吸収し、3列グループごと右端に寄せる */
      margin-inline-start: auto;
    }

    .l-footer__block {
      flex: 0 0 auto;
      /* max-widthが無いと改行の無い長い住所がはみ出すため */
      max-width: 30rem;
    }

    .l-footer__heading {
      /* カンプ実測: 見出し上端から項目上端まで49px */
      margin-block-end: 1.85rem;
      font-size: var(--fs-sm);
      font-weight: var(--fw-heavy);
    }

    .l-footer__list {
      display: flex;
      flex-direction: column;
      /* カンプ実測: 項目の行間28px */
      gap: 0.5rem;

      a {
        font-size: var(--fs-xs);
        font-weight: var(--fw-heavy);
      }
    }

    .l-footer__company-name {
      /* カンプ実測: 会社名上端から最初の拠点名上端まで44px */
      margin-block-end: 1.5rem;
      /* Noto Sans JP Bold(700) 15px。Avenir Heavyとは別 */
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
    }

    .l-footer__office {
      font-style: normal; /* addressの既定の斜体を打ち消す */
      font-size: var(--fs-xs);
      font-weight: var(--fw-medium);
      /* カンプ実測: 拠点内の行間22px(12px×1.833) */
      line-height: 1.833;

      & + & {
        margin-block-start: 2.5rem;
      }
    }

    .l-footer__tel {
      /* PCでは発信できないため無効化。SPのみタップで発信できるようにする */
      pointer-events: none;

      @media (max-width: 767px) {
        pointer-events: auto;
      }
    }

    .l-footer__copyright {
      padding-block-end: 6rem;
      font-size: var(--fs-xs);
      font-weight: var(--fw-medium);
      text-align: center;
    }

    @media (max-width: 767px) {
      .l-footer__grid {
        flex-direction: column;
        gap: var(--space-lg);
        padding-inline: 2rem; /* p-catalogのSP余白と揃える */
        padding-block: var(--space-md);
      }

      /* SPはPCと順序が入れ替わる。orderで視覚順だけ直す */
      .l-footer__brand {
        order: 1;
      }

      .l-footer__sns {
        order: -1;
        margin-block-start: 0;
        margin-block-end: var(--space-lg);
      }

      .l-footer__catchcopy {
        margin-block-start: var(--space-lg);
      }

      .l-footer__blocks {
        flex-direction: column;
        gap: var(--space-lg);
        /* 縦積みではPC用の右寄せ挙動が不要なため打ち消す */
        margin-inline-start: 0;
      }
    }
  }
}