@charset "UTF-8";
/* ========================================
   common.css - 株式会社平田創設 全ページ共通スタイル
   テーマ：ベージュ基調 ＋ 和（かっこいい）／ティファニーブルーをアクセント
======================================== */

/* ================================
   :root カスタムプロパティ
================================ */
:root {
    /* ---------- カラー ---------- */
    /* 基調：ベージュ・白・グレー ／ 差し色：ティファニーブルー */

    /* ベージュ（温かみ・ベース面） */
    --color-beige: #EFE8DB;
    /* 標準・セクション地色のメイン */
    --color-beige-light: #F7F2EA;
    /* 薄い・白との中間、広い背景向け */
    --color-beige-down: #DDD1BD;
    /* 濃い・境界や帯、引き締め用 */

    /* 生成色（きなりいろ：和の深いアイボリー。セクション背景の切り替え用） */
    --color-ivory-dark: #EDEAE0;

    /* 帯色（service-intro / index-about 等の画像帯・装飾帯で共通利用。
       コンテンツ面と同系の青緑グレー。ここを変えれば帯色がまとめて変わる） */
    --st-band-color: #E6EAE6;

    /* 白（清潔感・抜け） */
    --color-white: #FFFFFF;
    /* 純白・カードやコントラスト用 */
    --color-white-light: #FCFBF8;
    /* 暖色寄りの白・全体背景向け */
    --color-white-down: #F3F1EC;
    /* くすみ白・白同士の段差づけ用 */

    /* グレー（引き締め・文字） */
    --color-gray: #6E6A63;
    /* 標準・本文や補助テキスト */
    --color-gray-light: #B4AFA6;
    /* 薄い・キャプションや罫線 */
    --color-gray-down: #3A3733;
    /* 濃い・見出しや強い文字、濃い面背景 */

    /* アクセント（ティファニーブルー：差し色） */
    --color-accent: #7FC5C0;
    /* 標準・差し色のメイン */
    --color-accent-light: #D6ECEA;
    /* 淡い面・背景の薄敷き用 */
    --color-accent-down: #5FA6A1;
    /* ホバー・押し込み・引き締め用 */

    /* メイン（濃い面：ウォームチャコール。旧・深緑から置き換え） */
    --color-primary: #3A3733;
    /* 濃い面のメイン（FV・ヒーロー・フッター・主ボタン等） */
    --color-primary-dark: #2A2724;
    /* メイン暗め（hover等） */
    --color-secondary: #8a7a5c;
    /* 帯・装飾用のくすみベージュブラウン */

    /* テキストブロック（index-about / index-ourwork の lead 濃い面）の背景。
       グレー寄りの黒（メインの濃い面より明るめ）。ここを変えれば両セクションの lead 色がまとめて変わる */
    --lead-bg: var(--color-primary-dark);

    --color-text: #3a352e;
    /* 本文テキスト（墨寄り） */
    --color-title: #2a2620;
    /* 見出しテキスト */
    --color-text-light: #6f675b;
    /* 補足・薄めテキスト */

    --color-bg: #f5f0e6;
    /* ページ背景（ベージュ／名刺基調） */
    --color-bg-light: #faf6ee;
    /* セクション背景（薄ベージュ） */
    --color-bg-cream: #efe7d6;
    /* やや濃いベージュ（差し色背景） */
    --color-surface: #ffffff;
    /* カード等の白面 */
    --color-border: #ddd2bd;
    /* ボーダー（ベージュ系） */
    --color-silver-beige: #b9b3a6;
    /* シルバー寄りベージュ（カード枠・ヘッダー下線など引き締めの罫線） */

    --color-ink: #2a2620;
    /* 墨（濃い装飾・フッター背景など） */

    /* 旧名エイリアス（既存コード参照の互換維持。順次 -down 等へ統一可） */
    --color-accent-dark: var(--color-accent-down);

    /* ---------- フォント ---------- */
    --font-family: 'Noto Sans JP', sans-serif;
    /* 本文（地の文：ゴシック） */
    --font-heading: 'Shippori Mincho', 'Noto Serif JP', serif;
    /* 見出し（明朝・和） */
    --font-en: 'Cormorant Garamond', 'Shippori Mincho', serif;
    /* 英字装飾 */
    --font-serif: 'Noto Serif JP', serif;
    /* 読ませる短文・ボタン（明朝） */

    --body-font-size-sp: 1.0rem;
    --body-font-size-pc: clamp(1.0rem, 1.6vw, 1.1rem);
    --body-line-height-sp: 1.9;
    --body-line-height-pc: 2.0;
    --body-letter-spacing: 0.06em;

    /* ---------- 影（和：control してやや控えめ） ---------- */
    --shadow-sm: 0 2px 10px rgba(42, 38, 32, 0.05);
    --shadow-md: 0 6px 22px rgba(42, 38, 32, 0.08);
    --shadow-lg: 0 12px 32px rgba(42, 38, 32, 0.14);

    /* ---------- スペーシング（8の倍数ベース・1rem=16px） ---------- */
    --spacing-xxs: 0.5rem;
    /* 8px */
    --spacing-xs: 1rem;
    /* 16px */
    --spacing-sm: 1.5rem;
    /* 24px */
    --spacing-md: 2rem;
    /* 32px */
    --spacing-lg: 3rem;
    /* 48px */
    --spacing-xl: 4rem;
    /* 64px */
    --spacing-xxl: 5.5rem;
    /* 88px */
    --spacing-3xl: 8rem;
    /* 128px */

    /* セクション上下パディング（レスポンシブ・段階的に拡大） */
    --spacing-section: 4rem;

    /* ---------- セクション幅 ---------- */
    --section-width-sm: 576px;
    --section-width-md: 720px;
    --section-width-lg: 1024px;
    --section-width-xl: 1200px;

    /* ---------- ヘッダー高さ ---------- */
    /* 各ブレークポイントごとの高さは -sp / -pc に定義。
       実際に参照する側は --header-height を使う（ブレークポイントでこの値だけ切り替え）。
       高さを変えるときは -sp / -pc の値を1箇所直せば全箸所に反映される */
    /* ロゴ画像の高さ（48 / 60 / 80px）＋上下余白に合わせた3段階。
       実際のヘッダー表示高さと一致させ、scroll-padding-top のオフセットを正確にする */
    --header-height-sp: 64px;
    /* ロゴ 48px + 余白 */
    --header-height-md: 76px;
    /* 576px以上：ロゴ 60px + 余白 */
    --header-height-pc: 96px;
    /* 1024px以上：ロゴ 80px + 余白 */
    --header-height: var(--header-height-sp);
}

/* ヘッダー高さ：ロゴ画像のサイズ切替と同じブレークポイントで段階切替（参照側は --header-height のみ） */
@media (min-width: 576px) {
    :root {
        --header-height: var(--header-height-md);
    }
}

@media (min-width: 1024px) {
    :root {
        --header-height: var(--header-height-pc);
    }
}

/* セクション上下パディング：段階的に拡大（ロープマン式） */
@media (min-width: 768px) {
    :root {
        --spacing-section: 6rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --spacing-section: 6.5rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --spacing-section: 7rem;
    }
}

@media (min-width: 1440px) {
    :root {
        --spacing-section: 7.5rem;
    }
}

@media (min-width: 1600px) {
    :root {
        --spacing-section: 8rem;
    }
}

/* ================================
   ボックスモデルのリセット
================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ================================
   ベーススタイル
================================ */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    /* アンカー遷移時の到達基準点を固定ヘッダーの高さ分下げる（全アンカー一括） */
    scroll-padding-top: var(--header-height);
    overflow-x: hidden;
    overscroll-behavior-y: none;
}

html:not(.js-ready) {
    scroll-behavior: auto;
}

/* 375px以下：コンテンツを全体縮小（iPhone SE / 12・13 mini 等）
   375px基準で作ったレイアウトを、それ未満の幅では scale で一括縮小して
   はみ出しや窓屈さを防ぐ（個別の font-size 調整ではなく全体を縮める） */
@media (max-width: 375px) {
    html {
        width: 375px;
        transform-origin: top left;
        transform: scale(calc(100vw / 375));
    }

    /* position:fixed は html が包含ブロックになるため、モバイルナビの
       幅を375pxに固定し、高さは scale 逆数で割り戻して実画面を埋める（ロープマン式）
       高さは JS が設定する実ビューポート高（--drawer-height）を使う。未設定時は100dvh */
    .header__mobile-nav {
        width: 375px;
        height: calc(var(--drawer-height, 100dvh) / (100vw / 375));
    }
}

body {
    margin: 0;
    font-family: var(--font-family);
    color: var(--color-text);
    background-color: var(--color-bg);
    font-size: var(--body-font-size-sp);
    line-height: var(--body-line-height-sp);
    letter-spacing: var(--body-letter-spacing);
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
    body {
        font-size: var(--body-font-size-pc);
        line-height: var(--body-line-height-pc);
    }
}

/* 和紙風のごく薄いテクスチャ（背景の奥行き） */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 15%, rgba(138, 122, 92, 0.05) 0, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(95, 191, 179, 0.05) 0, transparent 45%);
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

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

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

p {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.5;
}

address {
    font-style: normal;
}

button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* メニュー開時のスクロールロック（JSでクラス付与） */
body.menu-open {
    overflow: hidden;
}

/* ================================
   スプラッシュスクリーン（トップ初回訪問時のみ・animation.jsで制御）
================================ */
.splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-dark);
    /* 初期は表示。is-hidden でフェードアウト */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.splash.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.splash__inner {
    /* ロゴの描画アニメはSVG/CSS自体が即発火（is-revealed待ち不要） */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ロゴ（蔵吉電工方式：stroke描画 → 完了後にPNGを重ねる） */
.splash__logo-wrap {
    position: relative;
    width: clamp(180px, 56vw, 320px);
}

.splash-logo-svg {
    display: block;
    width: 100%;
    height: auto;
    /* PNGが現れるタイミングでSVGをフェードアウト */
    animation: splashSvgHide 0.4s ease 2.3s forwards;
}

/* 全パスを線（stroke）で一筆書き。fillは打ち消して描画に任せる */
.splash-logo-svg polygon,
.splash-logo-svg path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: splashLogoDraw 2s cubic-bezier(0.45, 0, 0.25, 1) 0.3s forwards;
}

@keyframes splashLogoDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes splashSvgHide {
    to {
        opacity: 0;
    }
}

/* 描画完了後にフェードインする完成版PNG */
.splash-logo-png {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    opacity: 0;
    animation: splashPngIn 0.5s ease 2.3s forwards;
}

@keyframes splashPngIn {
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .splash,
    .splash__inner {
        transition-duration: 0.001ms !important;
    }
}

/* ================================
   共通レイアウトユーティリティ
================================ */
.section {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 576px) {
    .section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1024px) {
    .section {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* ================================
   page-top-section：FV 直下の「ページ最初のセクション」を FV に食い込ませて
   せり上がらせる（重なりの演出）。ブロックを重ねるため、セクション自身の
   上下パディングは0にし、余白は中身側（__layout / __inner 等）で持たせる。
   負マージンで FV 下端に食い込み、z-index で FV の上に乗せる。
   背景色は FV 画像を透かせないため各セクション側で必ず不透明に指定すること。
   --fv-overlap で食い込み量を1箇所管理（SP控えめ→PC大きめ） ================================ */
.page-top-section {
    --fv-overlap: 40px;
    position: relative;
    z-index: 1;
    margin-top: calc(var(--fv-overlap) * -1);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 768px) {
    .page-top-section { --fv-overlap: 72px; }
}

@media (min-width: 1024px) {
    .page-top-section { --fv-overlap: 100px; }
}

.section__inner {
    margin: 0 auto;
    width: 100%;
}

.section--narrow .section__inner {
    max-width: var(--section-width-md);
}

.section--cream {
    background-color: var(--color-bg-cream);
}

.section--light {
    background-color: var(--color-bg-light);
}

/* ================================
   共通セクションタイトル（和：縦書き日本語＋右肩に英字）
================================ */
/* キャッチ内のキーワード強調（index-about / index-ourwork / greeting 等共用）。
   その語だけアクセント（引き締め青緑）にしてコピーの核を際立たせる */
.catch__key {
    color: var(--color-accent-down);
}

.title__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 中央寄せ：英字とタイトルの中心を揃える */
    margin-bottom: var(--spacing-lg);
}

.title__en {
    /* 右肩に小さく横組みで添える（主役は縦書き日本語） */
    font-family: var(--font-en);
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: 1rem;
    padding-left: 0.35em;
    transform: skewX(-8deg);
    transform-origin: left center;
}

.title__ja {
    /* ベース（～1023px）：縦書きをやめ横書き見出しに。読みやすさ優先 */
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-title);
    letter-spacing: 0.12em;
    line-height: 1.5;
    text-align: center;
}

/* 1024px以上：縦書きの和の主役見出しに */
@media (min-width: 1024px) {
    .title__ja {
        writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: 2rem;
        letter-spacing: 0.18em;
        line-height: 1.4;
        text-align: initial;
    }
}

/* 見出し左寄せバリエーション（代表挨拶など） */
.title__header--left {
    align-items: flex-start;
}

.title__header--left .title__en {
    padding-left: 0;
}

/* ================================
   共通ボタン（平行四辺形：本体を skew、中身は逆 skew で水平に戻す）
   hover時は ::before が左→右に伸びて塗りつぶす
================================ */
.btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.8rem;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    transform: skewX(-12deg);
    transition: color 0.25s ease, transform 0.25s ease;
}

/* 576px以上：ボタンを通常サイズに（576px未満は上記の少し小さめ） */
@media (min-width: 576px) {
    .btn {
        padding: 0.9rem 2.4rem;
        font-size: 0.95rem;
    }
}

/* hover時に左上の三角（ティファニーブルー）が対角方向に広がり、平行四辺形全体を塗りつぶす。
   左上頂点を起点に clip-path の polygon を小→大へ拡大して表現。
   本体が skew しているため、両端に隣間が出ないよう左右に少し広げて覆う */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    right: -4px;
    background-color: var(--color-accent);
    /* 初期：左上の小さな三角だけ */
    -webkit-clip-path: polygon(0 0, 24px 0, 0 24px);
    clip-path: polygon(0 0, 24px 0, 0 24px);
    transition: -webkit-clip-path 0.6s ease, clip-path 0.6s ease;
    z-index: 0;
}

/* hover：三角が全体を覆う大きな多角形へ広がる */
.btn:hover::before {
    -webkit-clip-path: polygon(0 0, 200% 0, 0 200%);
    clip-path: polygon(0 0, 200% 0, 0 200%);
}

/* ボタンの中身（テキスト）は逆方向に skew して水平に戻す。塗りの上に重ねる */
.btn>span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    transform: skewX(12deg);
}

/* テキスト右の矢印：全辺カクカクした「>」をSVGで描画（線端・角を丸めず鋭角に）。
   色は currentColor（ボタンの文字色＝白）に追従させるため、SVGの stroke を white で指定 */
.btn>span::after {
    content: '';
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M3 1 L10 8 L3 15 L1 13 L6 8 L1 3 Z' fill='%23ffffff' stroke='%23ffffff' stroke-width='0.5' stroke-linejoin='miter' stroke-linecap='butt'/%3E%3C/svg%3E");
}

.btn--primary {
    background-color: var(--color-primary);
    color: #fff;
}

.btn--accent {
    background-color: var(--color-accent);
    color: #fff;
}

/* accent は地色がティファニーブルーなので、広がる塗りは濃めに */
.btn--accent::before {
    background-color: var(--color-accent-dark);
}

/* outline もデフォルト黒塗りに統一（黒地・白文字） */
.btn--outline {
    background-color: var(--color-primary);
    color: #fff;
}

/* ================================
   ボタン形状バリエーション：左上・右下を角切りした長方形（平行四辺形の skew をやめる）
   .btn--cut を .btn に併用。about の画像と角切りの向き（左上）を揃える。
   --btn-cut で角切り量を管理
================================ */
.btn--cut {
    --btn-cut: 12px;
    transform: none;
    -webkit-clip-path: polygon(var(--btn-cut) 0, 100% 0, 100% calc(100% - var(--btn-cut)), calc(100% - var(--btn-cut)) 100%, 0 100%, 0 var(--btn-cut));
    clip-path: polygon(var(--btn-cut) 0, 100% 0, 100% calc(100% - var(--btn-cut)), calc(100% - var(--btn-cut)) 100%, 0 100%, 0 var(--btn-cut));
}

/* 中身は skew 戻しが不要（本体が skew していないため）。逆skewを打ち消す */
.btn--cut>span {
    transform: none;
}

/* hover の塗り：本体が長方形なので左右の余分な広げ（-4px）は不要。
   clip-path は本体側でかかるので、::before は通常の三角拡大のまま */
.btn--cut::before {
    left: 0;
    right: 0;
}

/* ================================
   ナビ：ja/en フリップ（共通パーツ）
================================ */
.nav-flip {
    position: relative;
    display: inline-grid;
    vertical-align: middle;
    line-height: 1.6;
    padding-bottom: 8px;
}

.nav-flip__ja,
.nav-flip__en {
    position: relative;
    grid-area: 1 / 1;
    justify-self: center;
    width: -moz-max-content;
    width: max-content;
    display: block;
    white-space: nowrap;
    line-height: 1.6;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

/* 初期：日本語表示、英語は下に退避して透明 */
.nav-flip__en {
    transform: translateY(40%);
    opacity: 0;
    font-family: var(--font-en);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-accent-dark);
}

/* hover：日本語を上に抜いて消し、英語を中央に */
a:hover>.nav-flip .nav-flip__ja,
.nav-flip:hover .nav-flip__ja {
    transform: translateY(-40%);
    opacity: 0;
}

a:hover>.nav-flip .nav-flip__en,
.nav-flip:hover .nav-flip__en {
    transform: translateY(0);
    opacity: 1;
}

/* 現在ページマーカー：各言語の文字幅に追従する平行四辺形 */
.nav-flip__ja::after,
.nav-flip__en::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 6px;
    background-color: var(--color-accent);
    transform: skewX(-18deg) scaleX(0);
    transform-origin: left;
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0;
}

/* hover：表示中（英語）のマーカーを控えめに出す */
.nav-flip:hover .nav-flip__en::after {
    transform: skewX(-18deg) scaleX(1);
    opacity: 0.55;
}

/* 現在ページ：表示中の日本語にはっきり表示、hoverで英語に切り替え */
.is-current .nav-flip__ja::after {
    transform: skewX(-18deg) scaleX(1);
    opacity: 0.8;
}

.is-current:hover .nav-flip__ja::after {
    opacity: 0;
}

.is-current:hover .nav-flip__en::after {
    transform: skewX(-18deg) scaleX(1);
    opacity: 0.8;
}

/* ================================
   お問い合わせCTA（共通誘導ブロック：電話＋フォーム誘導）
   contact-cta.php を include したページで共通利用
================================ */
/* セクション幅：段階的 max-width（576 → 720 → 1200） */
.contact-cta {
    background-color: var(--color-primary);
    position: relative;
    /* 背景が大きく変わる境目を引き締める：上側にアクセントボーダー */
    border-top: 2px solid var(--color-accent);
}

/* 和の幾何パターン（青海波風のドット）。page-hero と同じ水玉スタイルを背面に敷く。
   中身（見出し・actions）は個別の z-index で前面に出す */
.contact-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at center, rgba(95, 191, 179, 0.18) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: 0.5;
}

/* 見出しが絶対配置でセクション外に飛び出すが、上余白は設けず詰める */
.contact-cta__inner {
    max-width: var(--section-width-sm);
}

@media (min-width: 768px) {
    .contact-cta__inner {
        max-width: 720px;
    }
}

@media (min-width: 1024px) {
    .contact-cta__inner {
        max-width: var(--section-width-xl);
    }
}

/* 英語タイトル（Contact）はこのセクションでは非表示 */
.contact-cta .title__en {
    display: none;
}

/* 見出しは濃い背景（primary）＋ティファニーブルーのボーダーで囲む。
   全ブレークポイントでセクション上端に絶対配置し、上半分がセクション外に飛び出す。
   飛び出した部分が明るい地の上に乗っても読めるよう、見出しに濃い帯（primary）を持たせる。
   768px未満：水平中央配置（飛び出しは維持）。768px以上：左上へ寄せ、left はセクション左右パディングに合わせる（768px 2rem → 1024px 3rem） */
.contact-cta .title__header {
    display: inline-flex;
    background-color: var(--color-accent);
    padding: 0.6rem 1.5rem;
    position: absolute;
    top: 0;
    left: 5%;
    width: auto;
    margin: 0;
    align-items: center;
    transform: translate(0, -50%);
    z-index: 2;
    /* 左上・右下の角切り。本体をアクセント色の角切り塗りにし、
       ::before で 2px 内側に primary-dark の角切りを重ねる。差分の2pxが斜辺含む全周の枠に見える */
    -webkit-clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    isolation: isolate;
}

/* 内側の背景面：2px小さい角切り。これと本体の差分が枠線に見える */
.contact-cta .title__header::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    z-index: -1;
    background-color: var(--color-primary-dark);
    -webkit-clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
}

@media (min-width: 1024px) {
    /* コンテンツ幅（inner max-width 1200px を中央寄せ）の左端に揃える。
       セクション左パディング(3rem) ＋ 画面が1200pxを超えた分の中央寄せ余白。
       1200px以下は余白0なので 3rem になる */
    .contact-cta .title__header {
        left: calc(3rem + max(0px, (100vw - 6rem - var(--section-width-xl)) / 2));
    }
}

/* 見出し：濃い背景上なので白文字化。縦書きにせず常時横書き（1024px以上の縦書きを上書き）。
   被りの見出しなので共通サイズより小さく、画面幅に応じて段階的に（576px未満 1.15rem → 576px以上 1.3rem → 768px以上 1.5rem） */
.contact-cta .title__ja {
    color: #fff;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    line-height: 1.5;
}

@media (min-width: 576px) {
    .contact-cta .title__ja {
        font-size: 1.3rem;
    }
}

@media (min-width: 768px) {
    .contact-cta .title__ja {
        font-size: 1.5rem;
    }
}

/* PC：見出しの絶対配置・二導線の上余白は全域指定に統一したため、ここでの個別指定は不要（上記参照） */

.contact-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 720px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .contact-cta__actions {
        flex-direction: row;
        gap: 1.5rem;
    }
}

.contact-cta__tel,
.contact-cta__form {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    padding: 2rem 1.5rem;
    position: relative;
    isolation: isolate;
    /* 左上・右下の角切り。本体を枠色（やや濃めの白）の角切り塗りにし、
       ::before で 1px 内側にカード背景の角切りを重ねる。差分の1pxが斜辺含む枠に見える */
    background-color: rgba(255, 255, 255, 0.28);
    -webkit-clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}

/* カード内側の背景面：1px小さい角切り。本体との差分が枠線に見える */
.contact-cta__tel::before,
.contact-cta__form::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    z-index: -1;
    background-color: var(--color-primary);
    -webkit-clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

.contact-cta__tel-label,
.contact-cta__form-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.06em;
}

.contact-cta__tel-number {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-family);
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    transition: opacity 0.2s;
}

.contact-cta__tel-number:hover {
    opacity: 0.8;
}

.contact-cta__tel-note {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.contact-cta__form-label {
    margin-bottom: 0.5rem;
}

/* ================================
   Instagram連携（バナー：全ページ共通 include。instagram.php）
   左＝Instagramテキスト・右＝見出し＋ボタンを、768px以上で左右に色分け
================================ */
/* セクション地：生成色（和のアイボリー）。上側にグレーのボーダー。
   上下の余白は各コンテンツ側に持たせるためセクション上下パディングは0、
   中身を端まで届けるため左右パディングも0（innerも打ち消し） */
.instagram {
    background-color: var(--color-ivory-dark);
    border-top: 2px solid var(--color-gray);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

.instagram__inner {
    padding-left: 0;
    padding-right: 0;
}

/* 768px未満（縦積み）：上（text-col）はセクション地のアイボリー、
   下（action-col）を #F3F1EC で上下に色分け。バナーの gap を打ち消して面を接し、
   各ブロックに上下パディングを持たせる */
.instagram-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}

.instagram-banner__text-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.instagram-banner__action-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    /* 下パディングは、直下のお問い合わせセクション見出しの飛び出し分（見出し高さの半分≒約1.5rem）を加算 */
    padding: 4rem 1.5rem 5.5rem;
    background-color: var(--color-white-down);
}

/* 576px以上：左＝Instagramテキスト・右＝見出し＋ボタンの左右分割。
   線ではなく色で分ける：左はセクション地（アイボリー）、右は #F3F1EC を斜めにクリップして敷く。
   576〜767：左30%・右70%。768以上：50:50（下記で上書き）。
   色面は全幅、中身だけ最大600pxに収める */
@media (min-width: 576px) {
    .instagram-banner {
        position: relative;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 0;
    }

    /* 右側の #F3F1EC 面：左辺を斜めにクリップ。576〜767は境界 left:40%（右60%） */
    .instagram-banner::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 40%;
        background-color: var(--color-white-down);
        -webkit-clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
        z-index: 0;
    }

    /* 左：Instagram テキスト。576〜767は40%幅 */
    .instagram-banner__text-col {
        position: relative;
        z-index: 1;
        flex: 0 0 40%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        text-align: center;
        padding-top: var(--spacing-section);
        padding-bottom: var(--spacing-section);
        padding-left: 2rem;
        padding-right: 2.5rem;
    }

    .instagram-banner__text-col>* {
        width: 100%;
        max-width: 600px;
    }

    /* 右：見出し＋ボタン。色面は斜めクリップの ::before に任せ、自身は透明。
       576〜767は60%幅。中身を最大600pxでカラム中央配置 */
    .instagram-banner__action-col {
        position: relative;
        z-index: 1;
        flex: 0 0 60%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 1.25rem;
        background-color: transparent;
        padding-top: var(--spacing-section);
        padding-bottom: var(--spacing-section);
        padding-left: 2.5rem;
        padding-right: 2rem;
    }

    /* 中身を最大600pxに収めるが、ボタンは全幅にせず内容幅のまま（btnは除外） */
    .instagram-banner__action-col>*:not(.btn) {
        width: 100%;
        max-width: 600px;
    }
}

/* 768px以上：左右を 50:50 に戻し、色面の境界も left:50% に */
@media (min-width: 768px) {
    .instagram-banner::before {
        left: 50%;
    }

    .instagram-banner__text-col {
        flex: 1;
    }

    .instagram-banner__action-col {
        flex: 1;
    }
}

@media (min-width: 1024px) {
    .instagram-banner__text-col {
        padding-left: 3rem;
        padding-right: 4rem;
    }

    .instagram-banner__action-col {
        padding-left: 4rem;
        padding-right: 3rem;
    }
}

.instagram-banner__en {
    font-family: var(--font-en);
    font-size: 1.8rem;
    letter-spacing: 0.25em;
    color: var(--color-gray);
}

/* 768px以上：左カラムの主役なので大きく見せる */
@media (min-width: 768px) {
    .instagram-banner__en {
        font-size: 2.6rem;
        letter-spacing: 0.2em;
    }
}

@media (min-width: 1024px) {
    .instagram-banner__en {
        font-size: 3.2rem;
    }
}

.instagram-banner__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-title);
}

/* 576〜767（横並び開始・右カラムが60%）は見出しを少し小さく */
@media (min-width: 576px) {
    .instagram-banner__title {
        font-size: 1.35rem;
    }
}

@media (min-width: 768px) {
    .instagram-banner__title {
        font-size: 1.6rem;
    }
}

@media (min-width: 1024px) {
    .instagram-banner__title {
        font-size: 1.75rem;
    }
}

@media (min-width: 1200px) {
    .instagram-banner__title {
        font-size: 1.9rem;
    }
}

.instagram-banner__text {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 1.9;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

/* フォローボタン：共通ボタン（.btn .btn--primary）を適用。
   文脈に合わない矢印を非表示にし、インスタグラムアイコンの余白だけ整える */
.instagram-banner__btn>span::after {
    content: none;
}

.instagram-banner__btn i {
    margin-right: 0.1em;
}

/* フォローボタン：ベース（～767px）はミニサイズ。768px以上で共通 .btn の通常サイズに戻す */
.instagram-banner__btn {
    padding: 0.55rem 1.4rem;
    font-size: 0.78rem;
}

@media (min-width: 768px) {
    .instagram-banner__btn {
        padding: 0.9rem 2.4rem;
        font-size: 0.95rem;
    }
}

/* ================================
   セクション区切り（divider）：中央60%の極細罫＋中央に菱形アクセント。
   背景色が変わらず単調になる境目だけに、セクション間へ挿入する装飾。
   使い方：区切りたい2セクションの間に
     <div class="section-divider" aria-hidden="true"></div>
================================ */
.section-divider {
    --divider-color: var(--color-silver-beige);
    --divider-accent: var(--color-accent);
    --divider-width: 60%;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1;
    height: auto;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--divider-width);
    height: 1px;
    background: linear-gradient(90deg, transparent 0, var(--divider-color) 20%, var(--divider-color) 80%, transparent 100%);
}

/* 576px以上：4/1、1024px以上：5/1（幅が広いほど区切り高さを押さえて横長に） */
@media (min-width: 576px) {
    .section-divider {
        aspect-ratio: 4 / 1;
    }
}

@media (min-width: 1024px) {
    .section-divider {
        aspect-ratio: 5 / 1;
    }
}

/* ================================
   スクロールリビール（animation.js と連動）
   左上から右下へ、じわじわ浮き上がるフェードイン。
   初期は左上にオフセット＋透明、is-revealed で定位置＋表示へ
================================ */
.js-reveal {
    opacity: 0;
    transform: translate(-24px, -24px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal.is-revealed {
    opacity: 1;
    transform: translate(0, 0);
}

.js-reveal--delay-1 {
    transition-delay: 0.12s;
}

.js-reveal--delay-2 {
    transition-delay: 0.24s;
}

.js-reveal--delay-3 {
    transition-delay: 0.36s;
}

/* 右上から左下へ浮き上がるバリエーション（初期は右上にオフセット） */
.js-reveal--from-tr {
    transform: translate(24px, -24px);
}

.js-reveal--from-tr.is-revealed {
    transform: translate(0, 0);
}

/* ブラーフェード（やわらかにピントが合うように登場。和の儲なさ）。
   filter をトランジション対象に含めるため transition を上書き。移動は伴わずブラーと透明度のみ */
.js-reveal--blur {
    transform: none;
    filter: blur(2px);
    transition: opacity 0.9s ease, filter 0.9s ease;
}

.js-reveal--blur.is-revealed {
    transform: none;
    filter: blur(0);
}

/* ================================
   テキスト個別リビール（B-2：ブロックではなくテキスト要素ごとに発火）
   見出し・段落・ボタンなど .js-reveal-text を付けた要素が、
   それぞれ画面に入った瞬間にブラーフェードで登場（既存 --blur と同質感：移動なし）。
   同一ブロック内は JS が出現順に transition-delay を段階付与して軽いスタッガーを出す。
================================ */
.js-reveal-text {
    opacity: 0;
    filter: blur(2px);
    transition: opacity 0.9s ease, filter 0.9s ease;
    will-change: opacity, filter;
}

.js-reveal-text.is-revealed {
    opacity: 1;
    filter: blur(0);
}

/* ================================
   アクセシビリティ
================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

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

/* ========================================
   ヘッダー / ナビ / フッター（旧 layout.css を統合）
======================================== */

/* ================================
   ヘッダー
================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(245, 240, 230, 0.98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-silver-beige);
    box-shadow: var(--shadow-sm);
    /* 和紙テクスチャの乗算をヘッダー内に閉じ込める（背面に染み出させない） */
    isolation: isolate;
}

/* 和紙テクスチャ：ベージ地に乗算で重ねる（透明度0.6）。
   最背面（z-index:0）に敷き、ロゴ・ナビ（z-index:1001等）は前面に出す */
.header::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../images/washi.webp");
    background-repeat: repeat;
    background-size: 200px;
    background-attachment: fixed;
    opacity: 0.6;
    mix-blend-mode: multiply;
}

.header__inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}

.header__main {
    flex: 1;
    min-width: 0;
}

.header__main-bg {
    background-color: transparent;
}

/* メニュー展開時：ロゴ以外のヘッダー帯を primary に。
   .header の背景を primary で不透明に上書きし、backdrop-filter（blur）を無効化して
   前面の明るいナビ面が透けるのを防ぐ。washi（.header::after）も非表示にしてベージュ質感を消す。
   ロゴ面（.header__logo）は独自背景＋z-index:1001 で前面のため色は変わらない */
body.menu-open .header {
    background-color: var(--color-primary);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.menu-open .header::after {
    display: none;
}

/* メニュー展開時：ロゴ面も primary で塗りつぶし、ロゴ画像・washi を非表示にして
   ヘッダー全体を黒くする（ロゴは隠す）。キャンセル（×印）は表示継続 */
body.menu-open .header__logo {
    background-color: var(--color-primary);
}

body.menu-open .header__logo::before {
    display: none;
}

body.menu-open .header__logo-img {
    visibility: hidden;
}

.header__inner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--header-height);
    padding-left: 0.75rem;
    padding-right: 0;
    position: relative;
}

@media (min-width: 1024px) {
    .header__inner-content {
        padding: 0 1rem;
    }
}

@media (min-width: 1200px) {
    .header__inner-content {
        padding: 0 1.25rem;
    }
}

/* ロゴ：配置部を --color-white-down で塗り、右端を斜め（skew同方向）にカット。
   align-self:stretch でヘッダー全高、左パディングで左端まで色を届け、右パディングで斜めカット分の余地を作る。
   色面はロゴ画像の幅にフィットし、中身（リンク）は縦中央配置 */
.header__logo {
    display: flex;
    align-items: center;
    align-self: stretch;
    position: relative;
    z-index: 1001;
    padding-left: 0.75rem;
    padding-right: 1.5rem;
    margin-left: -0.75rem;
    background-color: var(--color-bg-cream);
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

/* ロゴ面のベージ地にも和紙を乗算で重ねる（ヘッダー本体と同じサイズ・透明度）。
   最背面に敷き、ロゴ画像（.header__logo-link）は前面に出して画像には乗算をかけない */
.header__logo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../images/washi.webp");
    background-repeat: repeat;
    background-size: 200px;
    background-attachment: fixed;
    opacity: 0.6;
    mix-blend-mode: multiply;
}

.header__logo-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

@media (min-width: 1024px) {
    .header__logo {
        padding-left: 1rem;
        margin-left: -1rem;
    }
}

@media (min-width: 1200px) {
    .header__logo {
        padding-left: 1.25rem;
        margin-left: -1.25rem;
    }
}

/* 1440px以上：ロゴ面を画面左端まで伸ばす。
   .header__inner の中央寄せ余白 (100vw-1440px)/2 と
   .header__inner-content の左パディング 1.25rem を足した分だけ
   左パディングを拡張し、同量を負マージンで引いて色面を画面左端まで届ける。
   和紙はロゴ面の ::before だけなので色合いは完全に一致する */
@media (min-width: 1440px) {
    .header__logo {
        padding-left: calc((100vw - 1440px) / 2 + 1.25rem);
        margin-left: calc(-1 * ((100vw - 1440px) / 2 + 1.25rem));
    }
}

.header__logo-img {
    /* ヘッダー高さから上下余白（16px）を引いた高さに収める。
       こうすると --header-height を変えるだけでロゴも追従し、高さのズレが再発しない。
       （旧値と同等：SP 64-16=48 / 576以上 76-16=60 / 1024以上 96-16=80） */
    display: block;
    height: calc(var(--header-height) - 16px);
    width: auto;
}

/* PCナビ（1024px以上） */
.header__nav {
    display: none;
}

@media (min-width: 1024px) {
    .header__nav {
        display: block;
        margin-left: auto;
    }

    .header__nav-list {
        display: flex;
        align-items: center;
        gap: 1.75rem;
    }

    .header__nav-link {
        display: inline-flex;
        align-items: center;
        font-family: var(--font-heading);
        font-size: 0.95rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        color: var(--color-title);
        position: relative;
        padding-bottom: 0.25rem;
    }
}

/* 電話・お問い合わせ（PC） */
.header__tel {
    display: none;
}

@media (min-width: 1024px) {
    .header__tel {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-left: 1.5rem;
    }

    .header__tel-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.2;
    }

    .header__tel-link {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-family: var(--font-family);
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--color-primary);
    }

    .header__tel-icon {
        font-size: 0.85rem;
        line-height: 1;
    }

    .header__tel-note {
        font-size: 0.65rem;
        color: var(--color-text-light);
        letter-spacing: 0.05em;
    }

    .header__contact-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.6rem 1.1rem;
        background-color: var(--color-accent);
        color: #fff;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        transition: background-color 0.25s ease, transform 0.25s ease;
        /* 左上・右下の角切り（サイト共通の clip-path パターン） */
        -webkit-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }

    .header__contact-btn:hover {
        background-color: var(--color-accent-dark);
        transform: translateY(-2px);
    }
}

/* 電話＋Instagram＋ハンバーガー（1024px未満） */
.header__sp-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1001;
}

@media (min-width: 1024px) {
    .header__sp-actions {
        display: none;
    }
}

.header__sp-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-primary);
    font-size: 1.55rem;
    transition: color 0.3s ease;
}

.header__sp-tel:hover {
    color: var(--color-accent);
}

.header__sp-tel-img {
    width: 30px;
    height: 30px;
    -o-object-fit: contain;
    object-fit: contain;
    transition: filter 0.3s ease;
}

/* ハンバーガー */
.header__menu-trigger {
    display: flex;
    align-items: center;
    padding-right: 0.75rem;
}

@media (min-width: 1024px) {
    .header__menu-trigger {
        display: none;
    }
}

.header__toggle {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.header__toggle span:not(.header__menu-text) {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-primary);
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* メニュー展開時：背景が黒くなるためハンバーガー（×印）を白ラインに */
body.menu-open .header__toggle span:not(.header__menu-text) {
    background-color: #fff;
}

/* メニュー展開時：×印左の Instagram・電話アイコンも白に。
   Instagram はフォントアイコンなので color、電話は PNG なのでフィルターで白化 */
body.menu-open .header__sp-tel {
    color: #fff;
}

body.menu-open .header__sp-tel-img {
    filter: brightness(0) invert(1);
}

.header__menu-text {
    font-family: var(--font-en);
    font-size: 0.5rem;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    margin-top: 2px;
}

.header__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.header__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* モバイルナビ */
.header__mobile-nav {
    position: fixed;
    inset: 0;
    height: 100%;
    height: var(--drawer-height, 100dvh);
    z-index: 999;
    background-color: var(--color-primary);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow-y: auto;
    padding: calc(var(--header-height) + 1.5rem) 1.5rem 2.5rem;
}

.header__mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 1024px) {
    .header__mobile-nav {
        display: none;
    }
}

.header__mobile-nav-inner {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header__mobile-nav-list {
    border-top: 1px solid rgba(245, 240, 230, 0.2);
}

.header__mobile-nav-item {
    border-bottom: 1px solid rgba(245, 240, 230, 0.2);
}

.header__mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 0.5rem;
    color: #fff;
    transition: color 0.25s ease;
}

/* ホバー：日本語テキスト（リンク色を継承）をアクセント水色に */
.header__mobile-nav-link:hover {
    color: var(--color-accent);
}

.header__mobile-nav-link.is-current {
    color: var(--color-accent);
}

.mobile-nav-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.mobile-nav-text-en {
    font-family: var(--font-en);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.mobile-nav-text-ja {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}

.mobile-nav-arrow {
    font-size: 0.8rem;
    color: rgba(245, 240, 230, 0.5);
}

/* 画面高さ 667px 未満（低い端末・横向き等）：メニュー展開時にリンクを少し小さくして
   全項目が収まりやすくする（縦パディングと文字サイズを縮める） */
@media (max-height: 666.98px) {
    .header__mobile-nav-link {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    .mobile-nav-text-en {
        font-size: 0.62rem;
    }

    .mobile-nav-text-ja {
        font-size: 0.98rem;
    }
}

.mobile-nav-tel-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 2rem;
}

.mobile-nav-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background-color: var(--color-accent);
    color: #fff;
}

/* ================================
   フッター
================================ */
.footer {
    background-color: var(--color-ink);
    color: var(--color-bg);
    padding: var(--spacing-xl) 1.5rem var(--spacing-md);
}

@media (min-width: 768px) {
    .footer {
        padding: var(--spacing-xxl) 2rem var(--spacing-lg);
    }
}

.footer__inner {
    max-width: var(--section-width-xl);
    margin: 0 auto;
}

/* 上：ロゴエリア（中央配置） */
.footer__logo-area {
    text-align: center;
    margin-bottom: 3rem;
}

.footer__logo-link {
    display: inline-block;
}

.footer__logo-img {
    height: 72px;
    width: auto;
}

@media (min-width: 1024px) {
    .footer__logo-img {
        height: 80px;
    }
}

.footer__logo-catch {
    font-size: 0.8rem;
    color: rgba(245, 240, 230, 0.6);
    letter-spacing: 0.08em;
    margin-top: 0.75rem;
}

/* 下：Sitemap・会社情報・マップ（横並び） */
.footer__body {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .footer__body {
        flex-direction: row;
        gap: 3rem;
        align-items: stretch;
    }

    .footer__col {
        flex: 1;
    }

    .footer__map {
        flex: 1.4;
    }
}

.footer__section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(245, 240, 230, 0.15);
}

.footer__nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.5rem;
}

.footer__nav-link {
    font-size: 0.9rem;
    color: rgba(245, 240, 230, 0.85);
    transition: color 0.25s ease;
    text-align: left;
}

/* フッターのサイトナビだけ：共通 nav-flip は中央寄せだが、ここでは左寄せに上書き
   （.nav-flip__ja / __en の justify-self:center を start に） */
.footer__nav-link .nav-flip {
    justify-items: start;
}

.footer__nav-link .nav-flip__ja,
.footer__nav-link .nav-flip__en {
    justify-self: start;
    text-align: left;
}

/* フッターナビの日本語テキストだけ Noto Serif JP（明朝）に。英字（__en）は装飾フォントのまま */
.footer__nav-link .nav-flip__ja {
    font-family: var(--font-serif);
}

.footer__nav-link:hover,
.footer__nav-link.is-current {
    color: var(--color-accent);
}

.footer__company-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.footer__address {
    font-size: 0.85rem;
    color: rgba(245, 240, 230, 0.75);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer__contact-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: rgba(245, 240, 230, 0.85);
}

.footer__contact-icon {
    color: var(--color-accent);
    line-height: 1;
    flex-shrink: 0;
}

.footer__contact-link {
    font-family: var(--font-family);
    font-size: 1.05rem;
    font-weight: 700;
    transition: color 0.25s ease;
}

.footer__contact-link:hover {
    color: var(--color-accent);
}

/* マップ */
.footer__map {
    min-height: 240px;
    overflow: hidden;
    border: 1px solid rgba(245, 240, 230, 0.15);
}

@media (min-width: 768px) {
    .footer__map {
        min-height: 0;
    }
}

.footer__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    filter: grayscale(0.2) contrast(1.05);
}

/* フッター下部 */
.footer__bottom {
    background-color: var(--color-ink);
    text-align: center;
    padding: 1.5rem 1rem 2rem;
    position: relative;
    overflow: hidden;
}

.footer__copyright {
    font-size: 0.75rem;
    color: rgba(245, 240, 230, 0.55);
    letter-spacing: 0.08em;
    position: relative;
    z-index: 1;
}

.footer__watermark {
    font-family: var(--font-en);
    /* nonakahatsuri 方式：画面幅に連動しつつ、文字列全幅が約1200px幅の80%を9文字相当で割った値を上限にクランプ（横はみ出し防止） */
    font-size: min(9vw, calc(1200px * 0.8 / 9));
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(245, 240, 230, 0.04);
    line-height: 1;
    margin-top: 0.5rem;
    user-select: none;
    white-space: nowrap;
}