/* ==========================================================================
   共通レイアウト（ヘッダー / フッター / SPメニュー / SP固定バー）
   出典: docs/design-spec/01_top.md「3. ヘッダー」「フッター」「5. インタラクション」
   ========================================================================== */

/* 固定ヘッダーの高さぶん本文を下げる */
body { padding-top: var(--header-h); }
@media (max-width: 1079px) {
  body {
    padding-top: var(--header-h-sp);
    /* SP は下部固定バーに隠れないよう余白を確保 */
    padding-bottom: calc(var(--spbar-h) + env(safe-area-inset-bottom, 0px));
  }
}
body.is-nav-open { overflow: hidden; }

/* --------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------- */
.l-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-cream);
  transition: transform .3s var(--ease);
}
/* 下スクロールで隠す（指示書 p01） */
.l-header.is-hidden { transform: translateY(-100%); }

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* ロゴ左端固定 / 以降右端固定（指示書 p02） */
  height: 100%;
  padding-inline: var(--pad-header);
}

.l-header__logo { flex: none; display: block; }
/* 1920px で 339px（Zeplin 実測）。1080〜1920 の中間幅では、ナビ＋ボタンが
   収まるように比例で縮める（縮めないと 1400px 以下でナビが折り返す）。 */
.l-header__logo img { width: clamp(200px, 17.66vw, 339px); height: auto; }

.l-header__right { display: flex; align-items: center; gap: clamp(10px, 1.04vw, 20px); }

/* 🚨 li を縮ませない。既定の flex-shrink:1 のままだと、幅が足りないときに
   ナビの文字が1文字ずつ縦に折り返す（1080〜1400px で実際に起きていた）。 */
.l-nav__list { display: flex; align-items: center; gap: clamp(13px, 1.25vw, 24px); }
.l-nav__list > li { flex: none; }
.l-nav__list a {
  position: relative;
  /* 下線を文字幅ぴったりに出すため、a のボックスを文字の外形に合わせる。
     line-height を既定（--lh-body）のままにすると箱が上下に 6px ずつ余り、
     下線が文字から離れる。 */
  display: block;
  line-height: 1;
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  white-space: nowrap;
}
/* 🚨 ヘッダーナビはホバーで文字色を変えない（2026-09-16 市川様のご判断）。
   指示書 p04 の #898989 は当初ここにも当てていたが、下線が出るときに
   文字がグレーになるのをやめ、**下線だけ**で表すことにした。
   フッターやリード文中のテキストリンクは従来どおり #898989 のまま。 */

/* 現在地・ホバーの下線（2026-09-16 市川様のご指摘 / Zeplin 実測）。
   実測: y=80..83（高さ 4px）・色 #8DC21F・幅は文字幅ぴったり。
   ナビ文字は y=52..70 なので、文字下端から 10px 下。 */
.l-nav__list a::after {
  content: "";
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  height: 4px;
  background: var(--c-green);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.l-nav__list a:hover::after,
.l-nav__list a[aria-current]::after,
.l-nav__list .is-current > a::after,
/* 以下は wp_nav_menu が付ける。単一ページ / 投稿一覧（お知らせ）/ 個別記事の順。 */
.l-nav__list .current-menu-item > a::after,
.l-nav__list .current_page_item > a::after,
.l-nav__list .current-menu-ancestor > a::after,
.l-nav__list .current_page_parent > a::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .l-nav__list a::after { transition: none; }
}

/* ナビ右端 → 緑ボタン 31px（Zeplin 実測） */
.l-header__right .l-nav { margin-right: clamp(6px, 0.57vw, 11px); }

.l-header__btn-mail img { width: 24px; height: 19px; }
.l-header__btn-shop img { width: 23px; height: 24px; }

/* ハンバーガー（SP のみ） */
.l-header__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -12px;   /* 見た目の右端を x=353 に合わせる */
}
.l-header__toggle span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  background: var(--c-text);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.l-header__toggle span:nth-child(1) { top: 14px; }
.l-header__toggle span:nth-child(2) { top: 22px; }
.l-header__toggle span:nth-child(3) { top: 30px; }
/* 展開時は × に */
.is-nav-open .l-header__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.is-nav-open .l-header__toggle span:nth-child(2) { opacity: 0; }
.is-nav-open .l-header__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1079px) {
  .l-header { height: var(--header-h-sp); }
  .l-header__inner { padding-inline: var(--gutter); }
  .l-header__logo img { width: 240px; }
  .l-header__toggle { display: block; }
  .l-header__right { display: none; }
}

/* --------------------------------------------------------------------
   SP ドロワーメニュー（docs/design-spec/01_top.md 5-4）
   375×50 の全幅行を 8 段。背景は #F7EFDC / #FBF7E9 の交互、最終行のみ橙
   -------------------------------------------------------------------- */
.l-drawer {
  position: fixed;
  top: var(--header-h-sp);
  left: 0;
  z-index: 99;
  width: 100%;
  max-height: calc(100dvh - var(--header-h-sp));
  overflow-y: auto;
  background: var(--c-cream);

  /* 開くときは上から下へ広がり、閉じるときは下から上へ閉まる（2026-09-16 市川様のご指定）。
     clip-path の下辺を 100% → 0 に動かすだけ。中身は動かないので文字が潰れない。

     🚨 visibility も一緒に遷移させる。visibility は離散値だが
        「表示 → 非表示」のときだけ**遷移の最後まで表示のまま**という特別扱いがあり、
        閉じきるまで中身が消えない（よくある質問のアコーディオンと同じ手）。
        display:none は高さが飛んでアニメーションしないので使わない。 */
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  /* 🚨 イージングは共通の --ease（cubic-bezier(.22,.61,.36,1)）を使わない。
     前半で一気に動くカーブなので、幕が「バッと開いて止まる」ように見える。
     メニューは等速に近いほうが落ち着くので、この遷移だけ専用カーブにする。 */
  transition:
    clip-path .38s cubic-bezier(.4, 0, .2, 1),
    visibility .38s;
}
.l-drawer.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .l-drawer { transition: none; }
}
/* ショップ URL 未設定時は <span> になるため a / span の両方を対象にする */
.l-drawer :is(a, span) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}
.l-drawer li:nth-child(odd) :is(a, span)  { background: var(--c-cream-2); }
.l-drawer li:nth-child(even) :is(a, span) { background: var(--c-cream); }
.l-drawer li.is-shop :is(a, span) {
  background: var(--c-orange);
  color: var(--c-cream);
}
.l-drawer li.is-shop img { width: 20px; height: 21px; }

@media (min-width: 1080px) { .l-drawer { display: none; } }

/* --------------------------------------------------------------------
   SP 下部固定バー（指示書 p05）
   -------------------------------------------------------------------- */
.l-spbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: flex;
  height: calc(var(--spbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.l-spbar a {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--c-white);
}
.l-spbar__tel  { background: var(--c-orange); }
.l-spbar__tel img  { width: 31px; height: 31px; }
.l-spbar__mail { background: var(--c-green); }
.l-spbar__mail img { width: 30px; height: 22px; }

@media (min-width: 1080px) { .l-spbar { display: none; } }

/* --------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------- */
.l-footer { background: var(--c-white); }
/* フッターの高さはデザイン（01_top_pc.png）で 8010..8290 の 280px。
   ロゴ＋住所だけだと 215px にしかならず、コピーライトの行ぶんが足りない
   （2026-09-16 市川様のご指摘）。min-height で 280px を確保する。 */
.l-footer__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: min(100% - var(--gutter) * 2, var(--w-content));
  min-height: 280px;
  margin-inline: auto;
  padding-block: 80px 18px;
}
.l-footer__brand { flex: none; width: 480px; }   /* ロゴ x=380 → ナビ x=860 */
.l-footer__logo img { width: 384px; height: auto; }
.l-footer__address {
  margin-top: 22px;
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--c-text);
}
/* ナビ 1 行目の行ボックス上端はロゴ上端 8090 のわずか下（8094.5）。 */
.l-footer__nav { padding-top: 5px; }
/* 🚨 max-width を絞りすぎると 1 行目が 4 項目で折り返す。
   デザインは 1 行目 5 項目（お知らせまで・x 860..1398 の 539px）／2 行目 2 項目。
   コンテナ右端 1540 までは余裕があるので 620px まで許す。 */
.l-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  max-width: 620px;
  font-size: 18px;
  font-weight: var(--fw-medium);
  line-height: 40px;
}
.l-footer__list a:hover { color: var(--c-text-hover); }   /* 指示書 p04 */
.l-footer__copy {
  position: absolute;
  right: 0;
  bottom: 18px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

@media (max-width: 1079px) {
  .l-footer__inner {
    display: block;
    min-height: 0;
    padding-block: 40px 30px;
  }
  .l-footer__brand { width: auto; }
  .l-footer__logo img { width: 320px; }
  .l-footer__address { margin-top: 13px; }
  .l-footer__nav { padding-top: 24px; }
  .l-footer__list {
    max-width: 318px;
    gap: 0 15px;   /* 市川様の指定（2026-09-16 / 元 20px） */
    font-size: 16px;
    line-height: 30px;
  }
  .l-footer__copy {
    position: static;
    margin-top: 24px;
    text-align: right;
  }
}