/* ==========================================================================
 layout.css ― 庭生ししくら デモサイト

 v1.0（CSSファイル分割契約）
 役割：<main>の外側にある常設のページ骨格（demo-bar・header・footer・cta-bar・
 skip-link）と、複数セクションで共有される部品 .btn。
 厳守：tokens.css のカスタムプロパティは参照のみ。再定義しない。
 <main> 内のコンテンツ（hero〜contact）とその専用部品は sections.css の担当。
 ========================================================================== */

/* --------------------------------------------------------------------------
 0. 共通：センタリング用の左右パディングの「.btn以外は使用箇所ごと」の原則により、
 このファイルが担当する骨格要素にのみ適用する。sections.css 側にも同じ考え方の
 別グループを個別に定義する（重複定義ではなく、担当ファイルごとに完結させるため）。の左右余白（16/24/32px）とのブレークポイント（600/900px）に基づく。
 100%からコンテンツ最大幅を差し引いた半分とパディング下限の大きい方を採用することで、
 ラッパー要素を増やさずに「背景は全幅・中身はcontent-max幅で中央寄せ」を実現する。
 -------------------------------------------------------------------------- */
.header,
.footer__inner {
 padding-inline: var(--sp-3);
}

@media (min-width: 600px) {
 .header,
 .footer__inner {
 padding-inline: var(--sp-4);
 }
}

@media (min-width: 900px) {
 .header,
 .footer__inner {
 padding-inline: max(var(--sp-5), calc((100% - var(--content-max)) / 2));
 }
}

/* --------------------------------------------------------------------------
 1. skip-link
 ページ最初のフォーカス可能要素。既定は画面外、フォーカス時のみ出現する。
 -------------------------------------------------------------------------- */
.skip-link {
 position: absolute;
 top: -100%;
 left: var(--sp-3);
 z-index: var(--z-nav);
 display: inline-flex;
 align-items: center;
 min-height: 44px;
 padding-inline: var(--sp-4);
 background-color: var(--c-green);
 color: var(--c-bg);
 font-weight: 700;
 text-decoration: underline;
 text-underline-offset: 2px;
 border-radius: 4px;
 transition: top 150ms ease;
}

.skip-link:focus-visible {
 top: var(--sp-3);
 outline-color: var(--c-surface);
}

@media (prefers-reduced-motion: reduce) {
 .skip-link {
 transition-duration: 0ms;
 }
}

/* --------------------------------------------------------------------------
 2. demo-bar
 常時1行。position: static のためheroの高さ計算（--offset-top）に含まれる。
 -------------------------------------------------------------------------- */
.demo-bar {
 /* 暗い面の基底色。クラス指定を持たない要素が --c-text を継承して
 読めなくなる事故を構造的に防ぐ（2026-09-10 是正） */
 color: var(--c-bg-dim);
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: var(--demobar-h);
 padding-inline: var(--sp-3);
 background-color: var(--c-green-deep);
 text-align: center;
}

.demo-bar__text {
 color: var(--c-bg);
 font-size: 0.75rem; /* 320px幅でも1行に収める（実測：22字 × 約12px ≒ 264px） */
 line-height: 1.3;
 margin: 0;
}

@media (min-width: 900px) {
 .demo-bar__text {
 font-size: 0.8125rem;
 }
}

/* --------------------------------------------------------------------------
 3. header
 position: sticky; top: 0。demo-barの下から始まり、
 スクロール後は画面最上部に固定される。
 -------------------------------------------------------------------------- */
.header {
 /* 暗い面の基底色。クラス指定を持たない要素が --c-text を継承して
 読めなくなる事故を構造的に防ぐ（2026-09-10 是正） */
 color: var(--c-bg-dim);
 position: sticky;
 top: 0;
 z-index: var(--z-sticky);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--sp-2);
 min-height: var(--header-h);
 background-color: var(--c-green);
}

.header:focus-visible,
.header :focus-visible {
 outline-color: var(--c-surface);
}

.header__brand {
 display: inline-flex;
 align-items: center;
 height: 44px;
 color: var(--c-bg);
 /* 2026-09-10：屋号を筆文字で、ヘッダー内でより大きく */
 font-family: var(--font-brand);
 font-weight: 400; /* Yuji Syuku は 400 のみ */
 font-size: clamp(1.375rem, 6vw, 1.625rem);
 letter-spacing: 0.06em;
 text-decoration: none;
 white-space: nowrap;
 flex-shrink: 0;
}

/* 屋号はページ先頭へ戻るリンクを兼ねる。
   ホバーの動きは付けない（2026-09-11 依頼者指示で削除）。
   キーボード操作時の所在は tokens.css の :focus-visible が示す */

@media (min-width: 900px) {
 .header__brand {
 font-size: 1.875rem;
 }
}

/* ハンバーガー：--nav-bp 未満で表示。1100px以上を横並びナビに置き換える。
   1024px（iPad Pro 縦）で横並びにするとナビ6項目が2行に折り返し、
   屋号・ナビ・電話の間隔が 8px しか残らないため（2026-09-10 実測・是正） */
.header__hamburger {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 flex-shrink: 0;
 background: transparent;
 border: none;
 padding: 0;
 cursor: pointer;
}

@media (min-width: 1100px) {
 .header__hamburger {
 display: none;
 }
}

.header__hamburger-icon,
.header__hamburger-icon::before,
.header__hamburger-icon::after {
 content: "";
 position: absolute;
 left: 50%;
 width: 22px;
 height: 2px;
 background-color: var(--c-bg);
 transform: translateX(-50%);
 transition: transform 200ms ease, opacity 200ms ease, top 200ms ease, background-color 200ms ease;
}

.header__hamburger-icon {
 top: 50%;
 margin-top: -1px;
}

.header__hamburger-icon::before {
 top: -7px;
}

.header__hamburger-icon::after {
 top: 7px;
}

/* 開状態：`.header` に `.is-open` が付く（・nav.js） */
.header.is-open .header__hamburger-icon {
 background-color: transparent;
}

.header.is-open .header__hamburger-icon::before {
 top: 0;
 transform: translateX(-50%) rotate(45deg);
}

.header.is-open .header__hamburger-icon::after {
 top: 0;
 transform: translateX(-50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
 .header__hamburger-icon,
 .header__hamburger-icon::before,
 .header__hamburger-icon::after {
 transition-duration: 0ms;
 }
}

/* ナビ：1100px未満はドロワー、1100px以上は常時横並び。PC/SP同一DOM。
   ドロワーのときは absolute で通常フローから外れるため、ヘッダーの
   flex 項目は「屋号・電話・ハンバーガー」の3つになる */
.header__nav {
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 max-height: 0;
 overflow: hidden;
 opacity: 0;
 background-color: var(--c-green-deep);
 transition: max-height 300ms ease, opacity 200ms ease;
}

.header.is-open .header__nav {
 max-height: 520px;
 opacity: 1;
}

.header__nav-list {
 display: flex;
 flex-direction: column;
 gap: var(--sp-1);
 padding: var(--sp-3);
}

.header__nav-item {
 width: 100%; /* ドロワー内で行全体をタップ領域にする */
}

.header__nav-link {
 display: flex;
 align-items: center;
 min-height: 44px;
 padding-inline: var(--sp-3);
 color: var(--c-bg);
 font-size: 0.9375rem;
 text-decoration: none;
}

.header__nav-link {
 position: relative;
}

/* ホバー：下から細い罫が伸びる。和の意匠に合わせて控えめにする */
.header__nav-link::after {
 content: "";
 position: absolute;
 left: var(--sp-3);
 right: var(--sp-3);
 bottom: 8px;
 height: 1px;
 background-color: var(--c-bg);
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header__nav-link:hover {
 color: var(--c-bg);
}

.header__nav-link:hover::after,
.header__nav-link:focus-visible::after {
 transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
 .header__nav-link::after {
  transition: none;
 }
}

@media (min-width: 1100px) {
 .header__nav {
 position: static;
 max-height: none;
 overflow: visible;
 opacity: 1;
 background-color: transparent;
 transition: none;
 }

 .header__nav-list {
 flex-direction: row;
 align-items: center;
 /* 2026-09-11：見出し名を「会社概要→当店について」等に変えて2字増えたため、
 1100px では項目の間隔が 32px だとナビと電話の間が 21px まで詰まった。
 この幅では 24px に落とす（実測で間隔 61px を確保） */
 gap: var(--sp-4);
 padding: 0;
 }

 .header__nav-item {
 width: auto;
 }

 .header__nav-link {
 /* 横並びに変わっても 44px のタップ領域は確保する */
 min-height: 44px;
 padding-inline: 0;
 /* 「庭づくりの考え方」が文節で2行に折り返すのを止める。
    tokens.css の word-break: auto-phrase を、この1箇所だけ打ち消す */
 white-space: nowrap;
 }

 /* 左右パディングが 0 になるので、罫の内寄せも 0 に戻す。
    そうしないと文字幅より短い罫になる */
 .header__nav-link::after {
 left: 0;
 right: 0;
 }
}

/* 横幅に余裕が出たら、元の間隔へ戻す */
@media (min-width: 1280px) {
 .header__nav-list {
 gap: var(--sp-5);
 }
}

@media (prefers-reduced-motion: reduce) {
 .header__nav {
 transition-duration: 0ms;
 }
}

.header__phone {
 flex-shrink: 0;
 /* ドロワー時：電話とハンバーガーを右端にまとめる。
 space-between のままだと電話が中央に取り残される（2026-09-10 依頼者指示） */
 margin-left: auto;
}

@media (min-width: 1100px) {
 .header__phone {
 /* 横並びナビのときは、ナビと電話の間隔は space-between に任せる */
 margin-left: 0;
 }
}

/* ハンバーガーは必ず右端に置く（DOM でも最後、視覚でも最後）。
 フォーカス順序と視覚順序を一致させるため、CSS の order は使わない */
.header__hamburger {
 margin-left: var(--sp-2);
}

/* ヘッダーの電話は、白い箱だと浮いてしまう。
   地色に馴染ませ、細い枠線だけで存在を示す */
.header .btn.btn--primary.header__phone {
 background-color: transparent;
 color: var(--c-bg);
 border: none;
 padding-inline: var(--sp-2);
 font-weight: 400;
 letter-spacing: 0.08em;
 gap: var(--sp-2);
 transition: background-color 220ms ease, border-color 220ms ease;
}

.header .btn.btn--primary.header__phone:hover {
 background-color: transparent;
 color: var(--c-bg-dim);
}

@media (prefers-reduced-motion: reduce) {
 .header .btn.btn--primary.header__phone {
  transition: none;
 }
}

/* --------------------------------------------------------------------------
 3-B. nav-overlay（ドロワーを開いたときの背景の暗転）【2026-09-10 依頼者指示】
 ヘッダーの外・main の前に置く。header の子にすると、
 header が作る重ね合わせ文脈の中に閉じ込められて全画面を覆えないため。
 -------------------------------------------------------------------------- */
.nav-overlay {
 position: fixed;
 inset: 0;
 /* 暗転部分でのタッチ操作を、背景のスクロールに伝えない（iOS対策） */
 touch-action: none;
 overscroll-behavior: contain;
 z-index: var(--z-overlay);
 background-color: rgba(22, 38, 29, 0.55);
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 /* 閉じるときは、透明になりきってから visibility を切り替える */
 transition: opacity 260ms ease, visibility 0s linear 260ms;
}

.nav-overlay.is-open {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transition: opacity 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
 .nav-overlay {
  transition: none;
 }
}

/* 横並びナビのときはドロワーが無いので、暗転も存在させない */
@media (min-width: 1100px) {
 .nav-overlay {
 display: none;
 }
}

/* --------------------------------------------------------------------------
 3-C. ドロワー開閉にともなう文書全体の状態【2026-09-10 追加／2026-09-11 tokens.css から移設】
 <html> に付くクラスを見るため、要素セレクタだけで書けない。
 tokens.css は「クラスセレクタを1つも含まない」決まりなので本ファイルが持つ。
 -------------------------------------------------------------------------- */

/*
 ドロワーを開いている間は、背景（ページ本体）を動かさない。

 【overflow: hidden を使ってはならない】
 root の overflow を hidden にすると「スクロールできる入れ物」でなくなるため、
 position: sticky が解除され、追尾ヘッダーが文書の先頭まで落ちる。
 実測（2026-09-11・390×844）：scrollY=2000 で開いた瞬間、
 header の top が 0 → -1964px になり、画面には暗転しか残らなかった。
 前日は focus() がページを先頭へスクロールしていたため、この不具合が隠れていた。

 そのため固定は CSS ではなく nav.js が入力側（ホイール・タッチ・キー）で行う。
 ここでは、指でのスクロール操作をブラウザに渡さない指定だけを持つ。
*/
html.is-nav-open {
 touch-action: none;
}

/* ドロワーの中の操作は通す */
html.is-nav-open .header__nav {
 touch-action: auto;
}

/* smooth-scroll.js が動いたら、ブラウザ標準のスムーススクロールは止める。
 標準は所要時間を指定できず速すぎるため、JS 側で時間をかけて動かす。
 JS が動かない場合はこのクラスが付かず、tokens.css の smooth がそのまま残る */
html.js-smooth-scroll {
 scroll-behavior: auto;
}

/* --------------------------------------------------------------------------
 4. footer・
 常時ダーク面（--c-green-deep）。900px以上も2列のまま3列→2列に。
 -------------------------------------------------------------------------- */
.footer {
 /* 暗い面の基底色。クラス指定を持たない要素が --c-text を継承して
 読めなくなる事故を構造的に防ぐ（2026-09-10 是正） */
 color: var(--c-bg-dim);
 background-color: var(--c-green-deep);
 /* 2026-09-11：SP でフッターが 899px と画面より高くなっていたため、
 上下の余白を 64px → 48px に詰める。900px以上は従来どおり 96px */
 padding-block: var(--sp-6);
}

@media (min-width: 900px) {
 .footer {
 padding-block: var(--sp-8);
 }
}

.footer:focus-visible,
.footer :focus-visible {
 outline-color: var(--c-surface);
}

.footer__inner {
 display: grid;
 grid-template-columns: 1fr;
 /* 1列に積む SP では 48px だと間延びする。600px 以上で 32px、900px 以上で 48px に戻す */
 gap: var(--sp-5);
}

@media (min-width: 600px) {
 .footer__inner {
 grid-template-columns: repeat(2, 1fr);
 gap: var(--sp-5);
 }
}

/* サイト内ナビを足したので3列にする（2026-09-10 依頼者指示）。
   中央のナビ列は項目数が多いため、他2列より広く取る */
@media (min-width: 900px) {
 .footer__inner {
 grid-template-columns: 1fr 1.4fr 1fr;
 gap: var(--sp-6);
 }

}

.footer__col {
 display: flex;
 flex-direction: column;
 gap: var(--sp-2);
}

.footer__col-title {
 margin: 0 0 var(--sp-1);
 color: var(--c-bg);
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: 1rem;
}

/* --- フッターのサイト内ナビ（2026-09-10 追加） --- */
.footer__nav-list {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 column-gap: var(--sp-4);
}

.footer__nav-link {
 position: relative;
 display: inline-flex;
 align-items: center;
 min-height: 44px;
 width: fit-content;
 color: var(--c-bg-dim);
 font-size: 0.9375rem;
 text-decoration: none;
}

/* ホバー：ヘッダーナビと同じ「下から細い罫が伸びる」挙動に揃える */
.footer__nav-link::after,
.footer__phone-link::after,
.footer__tiktok-link::after,
.footer__totop::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 8px;
 height: 1px;
 background-color: var(--c-bg);
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer__nav-link:hover,
.footer__phone-link:hover,
.footer__tiktok-link:hover,
.footer__totop:hover {
 color: var(--c-bg);
}

.footer__nav-link:hover::after,
.footer__nav-link:focus-visible::after,
.footer__phone-link:hover::after,
.footer__phone-link:focus-visible::after,
.footer__tiktok-link:hover::after,
.footer__tiktok-link:focus-visible::after,
.footer__totop:hover::after,
.footer__totop:focus-visible::after {
 transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
 .footer__nav-link::after,
 .footer__phone-link::after,
 .footer__tiktok-link::after,
 .footer__totop::after {
  transition: none;
 }
}

.footer__tiktok-text {
 margin: 0;
 color: var(--c-bg-dim);
 font-size: 0.875rem;
}

/* --- ページの先頭へ戻る（2026-09-10 追加） --- */
.footer__totop-wrap {
 display: flex;
 justify-content: center;
 margin-top: var(--sp-5);
 padding-top: var(--sp-4);
 border-top: 1px solid rgba(239, 231, 213, 0.24);
}

@media (min-width: 900px) {
 .footer__totop-wrap {
 margin-top: var(--sp-6);
 padding-top: var(--sp-5);
 }
}

.footer__totop {
 position: relative;
 display: inline-flex;
 align-items: center;
 gap: var(--sp-2);
 min-height: 44px;
 padding-inline: var(--sp-2);
 color: var(--c-bg-dim);
 font-size: 0.9375rem;
 text-decoration: none;
}

/* 矢印は自前のCSS図形。外部のアイコン素材を持ち込まない */
/* 罫は文字の幅に合わせる（左右のパディングぶんは差し引く） */
.footer__totop::after {
 left: var(--sp-2);
 right: var(--sp-2);
}

.footer__totop-icon {
 width: 10px;
 height: 10px;
 flex-shrink: 0;
 border-top: 1.5px solid currentColor;
 border-right: 1.5px solid currentColor;
 transform: translateY(2px) rotate(-45deg);
}

.footer__address {
 margin: 0;
 color: var(--c-bg-dim);
 font-size: 0.8125rem;
}

/* 電話番号（暗い面）。フッター内で唯一ブラウザ既定の下線が残っていて、
   他のリンクを静かな作りに揃えたあとでは1本だけ浮いて見えた。
   下線はやめ、他と同じ「ホバーで罫が伸びる」挙動に統一する。
   主導線なので、文字色だけは他より明るい --c-bg のままにする
   （2026-09-11 依頼者指示「アンダーライン＋太文字を削除（フッター同様）」） */
.footer__phone-link {
 position: relative;
 display: inline-flex;
 align-items: center;
 min-height: 44px;
 width: fit-content;
 color: var(--c-bg);
 font-weight: 400;
 text-decoration: none;
}

/* TikTok はフッターが唯一の導線。
   枠付きのボタンにすると web の部品然として和の意匠から浮くため、
   囲みをやめて静かなテキストリンクにする。
   押せることは、アイコンとホバーの罫で示す（2026-09-11 依頼者指示） */
.footer__tiktok-link {
 position: relative;
 display: inline-flex;
 align-items: center;
 gap: var(--sp-2);
 min-height: 44px;
 width: fit-content;
 margin-top: var(--sp-1);
 color: var(--c-bg-dim);
 font-size: 0.875rem;
 text-decoration: none;
}

.footer__tiktok-name {
 line-height: 1.6;
}

/* 動画であることを示す印。丸に三角。
   自前のCSS図形で描き、外部のアイコン素材やサービスのロゴは持ち込まない
   （商用利用の可否・商標の扱いを抱え込まないため） */
.footer__tiktok-icon {
 position: relative;
 width: 18px;
 height: 18px;
 flex-shrink: 0;
 border: 1px solid currentColor;
 border-radius: 50%;
}

.footer__tiktok-icon::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-35%, -50%);
 border-left: 6px solid currentColor;
 border-top: 4px solid transparent;
 border-bottom: 4px solid transparent;
}


.footer__notice {
 margin: var(--sp-4) 0 0;
 padding-top: var(--sp-3);
 color: var(--c-bg-dim);
 font-size: 0.8125rem;
 text-align: center;
}

/* PC では従来どおりの余裕を持たせる。
   基底が margin ショートハンドなので、必ずこの規則より後ろに置くこと
   （前に置くとショートハンドに上書きされて効かない） */
@media (min-width: 900px) {
 .footer__notice {
 margin-top: var(--sp-6);
 padding-top: var(--sp-4);
 }
}

/* --------------------------------------------------------------------------
 5. cta-bar・・
 スマホのみ表示。「お電話」「お問い合わせ」の2本（2026-09-10 依頼者指示）。
 fixed のため通常フローの高さを占有しない（--offset-topの計算対象外）。
 FV が見えている間と、お問い合わせ以降では引っ込む（同上）。
 -------------------------------------------------------------------------- */
.cta-bar {
 /* 暗い面の基底色。クラス指定を持たない要素が --c-text を継承して
 読めなくなる事故を構造的に防ぐ（2026-09-10 是正） */
 color: var(--c-bg-dim);
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: var(--z-cta-bar);
 display: flex;
 gap: var(--sp-2);
 /* 2026-09-10 依頼者指示：枠の縁（バー自体の余白）を細くする。
 ボタンの 44px タップ領域は動かさないので、8 + 44 + 8 = 60px が下限 */
 min-height: 60px;
 padding: var(--sp-2);
 padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
 background-color: var(--c-green-deep);
 transform: translateY(100%);
 transition: transform 300ms ease-out;
}

.cta-bar.is-visible {
 transform: translateY(0);
}

.cta-bar:focus-visible,
.cta-bar :focus-visible {
 outline-color: var(--c-surface);
}

.cta-bar__link {
 flex: 1 1 0;
 /* 上下パディングは min-height(44px) に任せ、バーを厚くしない */
 padding-block: 0;
 /* 2本並ぶので、長いほうのラベルが折り返さない下限を確保する */
 min-width: 0;
 padding-inline: var(--sp-2);
 font-size: 0.875rem;
}

/* 追尾バーは暗い面。従ボタンの枠と文字を明るい側へ反転する */
.cta-bar .btn--secondary {
 border-color: var(--c-bg-dim);
 color: var(--c-bg);
}

.cta-bar .btn--secondary:hover {
 background-color: var(--c-green);
}

/* 受話器のアイコン。ヘッダーと同じ意匠に揃える */
.cta-bar__icon {
 width: 15px;
 height: 15px;
 flex-shrink: 0;
 background-color: currentColor;
 -webkit-mask: var(--icon-phone) center / contain no-repeat;
 mask: var(--icon-phone) center / contain no-repeat;
}

@media (min-width: 900px) {
 .cta-bar {
 display: none;
 }
}

@media (prefers-reduced-motion: reduce) {
 .cta-bar {
 transition-duration: 0ms;
 }
}

/* ==========================================================================
 6. .btn（共通部品／
 header・cta-bar（本ファイル）と hero・contact（sections.css）の両方で使われる
 唯一の共有部品。本ファイルが定義を所有する。sections.css側は色・形を再定義せず、
 位置調整のみ子孫セレクタで行う。
 ========================================================================== */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: var(--sp-2);
 min-height: 44px;
 min-width: 44px;
 padding: var(--sp-3) var(--sp-4);
 border: none;
 /* 角丸をやめ、直線で構成する。和の意匠に合わせ、字間を広く取る */
 border-radius: 0;
 background-color: transparent;
 letter-spacing: 0.08em;
 color: inherit;
 font-family: var(--font-body);
 font-weight: 700;
 font-size: 0.9375rem;
 line-height: 1;
 letter-spacing: 0.04em;
 text-decoration: none;
 white-space: nowrap;
 cursor: pointer;
 transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 150ms ease;
}

@media (min-width: 900px) {
 .btn {
 padding: var(--sp-3) var(--sp-5);
 font-size: 1rem;
 }
}

.btn:active {
 transform: scale(0.98);
}

.btn:disabled {
 opacity: 0.4;
 cursor: not-allowed;
 pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
 .btn {
 transition-duration: 0ms;
 }

 .btn:active {
 transform: none;
 }
}

/* 主ボタン：電話発信専用。既定＝light面（地--c-green／文字--c-surface） */
.btn--primary,
.btn--submit {
 background-color: var(--c-green);
 color: var(--c-surface);
}

.btn--primary:hover,
.btn--submit:hover {
 background-color: var(--c-green-deep);
}

/* 従ボタン：アンカー遷移専用。既定＝light面（透明地・枠2px・文字--c-green） */
.btn--secondary {
 border: 1px solid var(--c-green);
 padding-block: calc(var(--sp-3) - 1px);
 color: var(--c-green);
 background-color: transparent;
}

.btn--secondary:hover {
 background-color: var(--c-green-soft);
}

/* dark面での反転（「dark面：地--c-surface／文字--c-green」）。
 使用箇所：header（本ファイル）・hero・cta-bar1本構成に */
.header .btn--primary,
.hero .btn--primary,
.cta-bar .btn--primary {
 background-color: var(--c-surface);
 color: var(--c-green);
}

.header .btn--primary:hover,
.hero .btn--primary:hover,
.cta-bar .btn--primary:hover {
 background-color: var(--c-bg-dim);
}

.hero .btn--secondary {
 border-color: var(--c-bg);
 color: var(--c-bg);
}

.hero .btn--secondary:hover {
 background-color: var(--c-green-deep);
}

/* スマホでは、白いボタンの面積がキャッチより大きく見えて主従が逆になっていた。
   タップ領域 44px は保ったまま、横幅と文字を絞って一段下げる
   （2026-09-10 依頼者指摘「この文言より電話やサービスボタンが大きい」） */
@media (max-width: 899px) {
 .hero .btn {
 padding-block: var(--sp-2);
 padding-inline: var(--sp-3);
 font-size: 0.875rem;
 }

 .hero .btn--secondary {
 padding-block: calc(var(--sp-2) - 1px);
 }
}

/* 追尾バーは「お問い合わせ」以降では引っ込むようになったため（cta-bar.js）、
   フッター末尾の一文がバーに隠れることはない。
   ページ末尾の余白は、バーが引っ込む途中で一瞬だけ重なる分の保険として
   高さの半分だけ残す（2026-09-10 是正） */
@media (max-width: 899px) {
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* 受話器のアイコン。文字だけでは何のボタンか伝わらないため添える */
.header__phone-icon {
 width: 16px;
 height: 16px;
 flex-shrink: 0;
 background-color: currentColor;
 -webkit-mask: var(--icon-phone) center / contain no-repeat;
 mask: var(--icon-phone) center / contain no-repeat;
}

.header__phone-text {
 position: relative;
 white-space: nowrap;
}

/* ホバー：ナビ項目とまったく同じ挙動（下から細い罫が伸びる）を与える。
   電話だけ挙動が違うと、ヘッダー内で浮いて見えるため（2026-09-10 依頼者指示） */
.header__phone-text::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: -6px;
 height: 1px;
 background-color: var(--c-bg);
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header__phone:hover .header__phone-text::after,
.header__phone:focus-visible .header__phone-text::after {
 transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
 .header__phone-text::after {
  transition: none;
 }
}