/* =========================================================
   株式会社ファパウス  Design: 「志を、誠実に掲げる」
   闇 → 暗金 → 明金 のキアロスクロ ＋ 群青×白の旗
   ========================================================= */
:root {
    color-scheme: light;
    /* Dark / hero */
    --ink: #15171B;          /* 硝煙の闇 */
    --ink-2: #1E212700;
    --brass: #6E653A;        /* 暗い金 */
    --gold: #C3B06A;         /* 明るい金 */
    --gold-deep: #9A8138;    /* 濃い金（リンク・強調） */
    --indigo: #274F7A;       /* 群青（志） */
    --indigo-deep: #1B3A5B;
    --paper-white: #F1ECDF;  /* ダーク上の見出し */
    --cool-grey: #A9AEB4;    /* ダーク上の補助 */
    --flag-white: #ECE7DB;
    /* Light / body */
    --paper: #F6F3EC;        /* ペーパー背景 */
    --white: #FFFFFF;
    --text: #1E2229;         /* インクブラック */
    --muted: #5A6068;        /* 補助文字 */
    --line: #E3DED3;         /* 罫線 */
    /* type */
    --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wrap: 1120px;
    /* ---- type scale（用途別フォントサイズ）----
       見出しは据え置き、ラベル・ナビ・リードなど中間層を底上げして
       ジャンプ率を圧縮し、全体のバランスを整える */
    --fs-eyebrow: 14px;                   /* ラベル（旧12px） */
    --fs-nav: 15px;                       /* グローバルナビ（旧14px） */
    --fs-body: 16px;                      /* 本文の基準 */
    --fs-sm: 14.5px;                      /* 補助・カード内テキスト */
    --fs-lead: 17.5px;                    /* リード文（旧16px） */
    --fs-h2: clamp(26px, 3.4vw, 36px);    /* セクション見出し */
    --fs-page-hero: clamp(28px, 3.7vw, 42px); /* 下層ページのヒーロー */
    --fs-hero: clamp(32px, 5vw, 54px);    /* トップのヒーロー見出し */
    --ls-label: .18em;                    /* ラベルの字間（日本語主体で詰める） */
    /* ---- logo ----
       ヘッダーロゴの表示高。文字は画像内で中心より17/500=約3.4%上にあるため、
       表示高に比例した translateY で光学中心をナビ文字の中心に合わせる */
    --logo-h: 64.8px;                     /* 基準54px の +20% */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--text);
    background: var(--paper);
    font-family: var(--sans);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.85;
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--gold-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.5; margin: 0; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: #fff; padding: 10px 16px; z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- layout helpers ---------- */
.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }
.site-main { display: block; }
.eyebrow {
    font-family: var(--sans);
    font-size: var(--fs-eyebrow); letter-spacing: var(--ls-label); font-weight: 500;
    color: var(--gold-deep); text-transform: uppercase; margin: 0 0 18px;
}
.section { padding: 92px 0; }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: var(--paper-white); }
.section__head { max-width: 760px; margin: 0 0 48px; }
.section__title { font-size: var(--fs-h2); }
.section__lead { color: var(--muted); font-size: var(--fs-lead); margin: 16px 0 0; }
.section--ink .section__lead { color: var(--cool-grey); }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-weight: 500; font-size: 15px;
    padding: 13px 30px; border-radius: 2px; border: 1px solid transparent;
    cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--gold { background: var(--gold); color: var(--indigo-deep); }
.btn--gold:hover { background: #cfbd7c; }
.btn--ghost { background: transparent; color: var(--paper-white); border-color: rgba(241,236,223,.4); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
/* hero は背景が動くため、ゴーストボタンは半透明の白＋磨りガラスで可読性を確保 */
.hero .btn--ghost {
    background: rgba(255,255,255,.10);
    border-color: rgba(241,236,223,.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.hero .btn--ghost:hover { background: rgba(255,255,255,.18); border-color: var(--gold); color: var(--gold); }
.btn--outline { background: transparent; color: var(--indigo); border-color: var(--indigo); }
.btn--outline:hover { background: var(--indigo); color: #fff; }
.btn--lg { padding: 16px 40px; font-size: 16px; }

/* ---------- header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(21,23,27,.96); color: var(--paper-white);
    border-bottom: 1px solid rgba(195,176,106,.22);
    backdrop-filter: saturate(120%) blur(6px);
}
.header-inner {
    width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 78px; gap: 20px;
}
.site-logo { display: inline-flex; align-items: center; gap: 13px; color: var(--paper-white); }
.site-logo:hover { text-decoration: none; }
.site-logo__flag {
    width: 9px; height: 29px; border-radius: 1px;
    background: linear-gradient(var(--indigo) 0 50%, var(--flag-white) 50% 100%);
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
    transform: translateY(4px);
}
.site-logo__name { font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: .06em; }
.site-logo__img { height: var(--logo-h); width: auto; display: block; }
.site-nav__list {
    list-style: none; display: flex; align-items: center; gap: 26px; margin: 0; padding: 0;
}
.site-nav__list a {
    color: var(--paper-white); font-size: var(--fs-nav); font-weight: 500; letter-spacing: .04em;
    padding: 6px 0; position: relative;
}
.site-nav__list a:hover { color: var(--gold); text-decoration: none; }
.site-nav__list a[aria-current="page"] { color: var(--gold); }
.site-nav__list a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold);
}
.site-nav__cta a { padding: 10px 22px; font-size: var(--fs-nav); color: var(--indigo-deep); }
.site-nav__cta a:hover { color: var(--indigo-deep); }

.nav-toggle {
    display: none; width: 42px; height: 42px; background: transparent; border: 0; cursor: pointer;
    flex-direction: column; justify-content: center; gap: 5px; padding: 0;
}
.nav-toggle span { display: block; height: 2px; width: 24px; background: var(--paper-white); margin-inline: auto; transition: .2s; }

/* ---------- HERO ---------- */
.hero { position: relative; background: var(--ink); color: var(--paper-white); overflow: hidden; }
.hero__layout { display: flex; min-height: min(78vh, 640px); position: relative; z-index: 1; }

/* hero 背景アニメーション（幾何学＋流線。上質・低コントラスト・ゆっくり） */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .85; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(44px); will-change: transform, opacity; }
.hero__glow--gold {
    width: 52vw; height: 52vw; right: -6vw; top: -6%;
    background: radial-gradient(circle, rgba(206,186,112,0.80) 0%, rgba(206,186,112,0.28) 46%, rgba(206,186,112,0) 72%);
    animation: heroBeatGold 10s ease-in-out infinite;
}
.hero__glow--indigo {
    width: 48vw; height: 48vw; left: -12vw; bottom: -16%;
    background: radial-gradient(circle, rgba(66,118,178,0.78) 0%, rgba(66,118,178,0.26) 46%, rgba(66,118,178,0) 72%);
    animation: heroBeatIndigo 10s ease-in-out infinite;
}
/* 安静時の呼吸（約6回/分＝10秒/呼吸）。吸って灯り、吐いて消える。暗の底は完全消灯 */
@keyframes heroBeatGold {
    0%   { opacity: 0;   transform: scale(1); }
    45%  { opacity: .50; transform: scale(1.05); }
    100% { opacity: 0;   transform: scale(1); }
}
@keyframes heroBeatIndigo {
    0%   { opacity: 0;   transform: scale(1); }
    45%  { opacity: .48; transform: scale(1.045); }
    100% { opacity: 0;   transform: scale(1); }
}
/* 流線は Canvas（app.js の heroCanvas）で毎フレーム描画：
   線に沿って幅2〜20pxが膨縮し、線ごとの波形で間隔が波打ち、交差・重なりは加算合成で光る */
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__flag { flex: 0 0 auto; display: flex; }
.hero__flag span { display: block; width: 12px; }
.hero__flag .fl-indigo { background: var(--indigo); }
.hero__flag .fl-white { width: 8px; background: var(--flag-white); }
.hero__body {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
    padding: 72px clamp(28px, 5vw, 80px);
}
.hero__eyebrow { color: var(--gold); letter-spacing: var(--ls-label); font-size: var(--fs-eyebrow); font-weight: 500; margin: 0 0 22px; }
.hero__title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-hero); line-height: 1.42; color: var(--paper-white); }
.hero__sub { color: var(--cool-grey); font-size: clamp(15px, 1.7vw, 18px); margin: 22px 0 0; max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__light { flex: 0 0 auto; display: flex; }
.hero__light .lt-brass { width: clamp(40px, 8vw, 110px); background: var(--brass); }
.hero__light .lt-gold { width: clamp(18px, 3.5vw, 46px); background: var(--gold); }

/* hero 画像版（偶数日）。WebP対応時のみ画像＋オーバーレイを敷き、旗・光バーを隠す。 */
html:not(.no-webp) .hero--image::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url("/assets/img/back/1.webp") center right / cover no-repeat;
}
html:not(.no-webp) .hero--image::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(90deg,
        rgba(21,23,27,0.96) 0%, rgba(21,23,27,0.84) 34%,
        rgba(21,23,27,0.48) 70%, rgba(21,23,27,0.26) 100%);
}
html:not(.no-webp) .hero--image .hero__flag,
html:not(.no-webp) .hero--image .hero__light { display: none; }
/* 画像版の日は写真が背景なので、背景アニメは出さない（画像無しの日にだけ表示） */
html:not(.no-webp) .hero--image .hero__bg { display: none; }
.hero--image .hero__layout { position: relative; z-index: 1; }
/* WebP非対応時は .hero--image を素の .hero（画像無し・バー有り＝奇数日と同一）として扱う */

/* ---------- flow / chiaroscuro strip ---------- */
.chiaro { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: stretch; }
.chiaro__step { border-radius: 8px; padding: 26px 22px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; }
.chiaro__step small { font-size: 12px; letter-spacing: .1em; opacity: .85; }
.chiaro__step b { font-family: var(--serif); font-weight: 600; font-size: 18px; margin-top: 6px; }
.chiaro__step p { font-family: var(--sans); font-weight: 400; font-size: 13.5px; line-height: 1.6; opacity: .9; margin: 12px 0 0; }
.chiaro__arrow { align-self: center; color: var(--cool-grey); font-size: 20px; }
.chiaro .s-dark { background: var(--ink); color: var(--gold); }
.chiaro .s-mid { background: var(--brass); color: var(--paper-white); }
.chiaro .s-light { background: var(--gold); color: var(--indigo-deep); }

/* ---------- value pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.pillar {
    background: var(--white); border: 1px solid var(--line); border-radius: 4px;
    padding: 30px 26px; position: relative;
}
.pillar::before {
    content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px;
    background: linear-gradient(var(--indigo), var(--gold));
}
.pillar__no { font-family: var(--serif); font-size: 13px; color: var(--gold-deep); letter-spacing: .1em; }
.pillar__title { color: var(--text); font-size: 19px; margin: 10px 0 12px; }
.pillar__text { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ---------- service split ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.svc-card {
    background: var(--white); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
    display: flex; flex-direction: column;
}
.svc-card__top { background: var(--ink); color: var(--paper-white); padding: 30px 28px; position: relative; }
.svc-card__top::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 46px; background: linear-gradient(var(--brass), var(--gold)); }
.svc-card__label { color: var(--gold); font-size: 12px; letter-spacing: .2em; margin: 0 0 10px; }
.svc-card__title { font-size: 22px; color: var(--paper-white); }
.svc-card__body { padding: 26px 28px; }
.svc-card__body ul { margin: 0 0 20px; padding-left: 1.2em; color: var(--muted); font-size: 14.5px; }
.svc-card__body li { margin-bottom: 6px; }

/* ---------- reasons / stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px; }
.stat { text-align: center; padding: 24px 16px; border: 1px solid rgba(195,176,106,.3); border-radius: 6px; }
.stat__num { font-family: var(--serif); font-size: 40px; color: var(--gold); line-height: 1; }
.stat__label { color: var(--cool-grey); font-size: 13px; margin-top: 12px; }
.stat__title { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--gold); line-height: 1.4; }
.stat__text { color: var(--cool-grey); font-size: 13.5px; line-height: 1.7; margin: 10px 0 0; }

/* ---------- generic prose blocks ---------- */
.lead-block { max-width: 780px; }
.lead-block p { font-size: 16.5px; color: var(--text); }
.note { color: var(--muted); font-size: 13.5px; }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.feature-list li { padding-left: 30px; position: relative; }
.feature-list li::before {
    content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 12px;
    background: var(--indigo); border-radius: 1px; box-shadow: 4px 4px 0 var(--gold);
}
.feature-list b { font-family: var(--serif); font-weight: 600; }

/* accordion (悩み別) */
.chapter { border: 1px solid var(--line); border-radius: 6px; background: var(--white); margin-bottom: 16px; overflow: hidden; }
.chapter > summary {
    cursor: pointer; list-style: none; padding: 22px 26px; font-family: var(--serif); font-weight: 600;
    font-size: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.chapter > summary::-webkit-details-marker { display: none; }
.chapter > summary::after { content: "＋"; color: var(--gold-deep); font-family: var(--sans); }
.chapter[open] > summary::after { content: "－"; }
.chapter__body { padding: 0 26px 24px; color: var(--muted); }
.chapter__body .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chapter__body .tags span { font-size: 12.5px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px; color: var(--text); }
.chapter__body .ai-note { margin-top: 14px; padding: 12px 16px; background: #101820; color: var(--gold); border-radius: 4px; font-size: 13.5px; }

/* steps */
.steps { counter-reset: step; display: grid; gap: 18px; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 24px 26px; }
.step__no { counter-increment: step; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 20px; }
.step__no::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: 18px; margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* case cards */
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.case { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 26px; }
.case__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.case__meta span { font-size: 12px; background: var(--paper); color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 3px 12px; }
.case__meta span.is-gold { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.case__result { font-family: var(--serif); font-size: 20px; color: var(--indigo-deep); margin: 0 0 8px; }
.case__text { color: var(--muted); font-size: 14px; margin: 0; }

/* company table */
.info-card {
    background: var(--white); border: 1px solid var(--line); border-radius: 6px;
    position: relative; overflow: hidden; padding: 6px clamp(20px, 3vw, 36px);
}
.info-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(var(--indigo), var(--gold));
}
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { text-align: left; vertical-align: top; padding: 18px 8px; border-bottom: 1px solid var(--line); font-size: 15px; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: 0; }
.info-table th { width: 32%; font-family: var(--serif); font-weight: 600; color: var(--indigo-deep); white-space: nowrap; }
.info-table td { color: var(--text); }
.biz-list { display: grid; gap: 22px; }
.biz-cat {
    background: var(--white); border: 1px solid var(--line); border-radius: 6px;
    padding: 30px clamp(22px, 3vw, 36px); position: relative; overflow: hidden;
}
.biz-cat::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(var(--indigo), var(--gold));
}
.biz-cat h3 {
    font-size: 18px; color: var(--indigo-deep); margin: 0 0 20px;
    padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.biz-cat dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px 34px; }
.biz-cat dt { font-weight: 600; font-size: 15px; color: var(--text); position: relative; padding-left: 17px; }
.biz-cat dt::before {
    content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px;
    background: var(--gold); transform: rotate(45deg);
}
.biz-cat dd { margin: 5px 0 0 17px; color: var(--muted); font-size: 13.5px; line-height: 1.75; }

/* contact form */
.form { max-width: 680px; display: grid; gap: 20px; }
.form label { font-weight: 500; font-size: 14.5px; display: block; margin-bottom: 8px; }
.form .req { color: #B3402F; font-size: 12px; margin-left: 6px; }
.form input, .form select, .form textarea {
    width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 4px;
    font-family: var(--sans); font-size: 15px; background: var(--white); color: var(--text);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--indigo); outline-offset: 1px; border-color: var(--indigo); }
.form textarea { min-height: 160px; resize: vertical; }
.form__note { color: var(--muted); font-size: 13px; }
.form-alert { border-radius: 6px; padding: 18px 20px; font-size: 14.5px; line-height: 1.7; margin-bottom: 26px; }
.form-alert--ok { background: rgba(39,79,122,.07); border: 1px solid var(--indigo); color: var(--indigo-deep); }
.form-alert--error { background: rgba(179,64,47,.07); border: 1px solid #B3402F; color: #8F2F22; }
.form-alert__title { font-family: var(--serif); font-weight: 600; font-size: 17px; margin: 0 0 6px; }
.form-alert p { margin: 0; }
.field-err { color: #B3402F; font-size: 13px; margin: 7px 0 0; }
.form [aria-invalid="true"] { border-color: #B3402F; }
.hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* breadcrumb */
.breadcrumb { background: var(--ink); color: var(--cool-grey); font-size: 12.5px; padding: 12px 0; }
.breadcrumb a { color: var(--cool-grey); }
.breadcrumb a:hover { color: var(--gold); }

/* page hero (下層) */
.page-hero { background: var(--ink); color: var(--paper-white); position: relative; }
.page-hero__inner { display: flex; align-items: stretch; }
.page-hero__flag { width: 12px; background: var(--indigo); }
.page-hero__flag + span { width: 7px; background: var(--flag-white); display: block; }
.page-hero__body { padding: 60px clamp(24px,4vw,60px); flex: 1; }
.page-hero__light { width: clamp(30px,6vw,80px); background: linear-gradient(var(--brass), var(--gold)); }
.page-hero__eyebrow { color: var(--gold); letter-spacing: var(--ls-label); font-size: var(--fs-eyebrow); font-weight: 500; margin: 0 0 14px; }
.page-hero__title { font-size: var(--fs-page-hero); color: var(--paper-white); }
.page-hero__sub { color: var(--cool-grey); font-size: var(--fs-lead); margin: 16px 0 0; max-width: 40em; }

/* CTA band */
.cta-band { background: var(--ink); color: var(--paper-white); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--indigo); }
.cta-band::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 46px; background: linear-gradient(var(--brass), var(--gold)); }
.cta-band__inner { width: min(760px, calc(100% - 48px)); margin-inline: auto; padding: 76px 0; }
.cta-band__lead { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 3vw, 30px); color: var(--paper-white); margin: 0 0 14px; }
.cta-band__sub { color: var(--cool-grey); margin: 0 0 30px; }
.cta-band__note { color: var(--cool-grey); font-size: 12.5px; margin: 18px 0 0; opacity: .82; }
/* 狭い画面では左右の装飾バーが本文にかかるため細くする */
@media (max-width: 860px) {
    .cta-band::before { width: 6px; }
    .cta-band::after { width: 16px; }
}

/* footer */
.site-footer { background: #101216; color: var(--cool-grey); }
.site-footer__inner { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; padding: 56px 0 32px; }
.site-footer__name { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--paper-white); margin: 0 0 10px; }
.site-footer__logo { height: 52px; width: auto; display: block; margin: 0 0 12px; }
.site-footer__janame { font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: .08em; color: var(--paper-white); margin: 0 0 8px; }
.site-footer__catch { color: var(--gold); font-size: 14px; margin: 0 0 4px; }
.site-footer__tagline { font-size: 13px; margin: 0; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.site-footer__nav li { margin-bottom: 10px; }
.site-footer__nav a { color: var(--cool-grey); font-size: 13.5px; }
.site-footer__nav a:hover { color: var(--gold); text-decoration: none; }
.site-footer__base { border-top: 1px solid rgba(255,255,255,.08); }
.site-footer__base small { display: block; width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; padding: 20px 0; font-size: 12px; }

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js-enabled .reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
    .nav-toggle { display: flex; }
    :root { --logo-h: 52.8px; }        /* 基準44px の +20%。中心補正は calc で自動追従 */
    .site-nav {
        position: fixed; inset: 78px 0 auto 0; background: rgba(21,23,27,.99);
        max-height: 0; overflow: hidden; transition: max-height .3s ease; border-bottom: 1px solid rgba(195,176,106,.2);
    }
    .site-nav.is-open { max-height: 80vh; }
    .site-nav__list { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 20px; }
    .site-nav__list li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.06); }
    .site-nav__list a { display: block; padding: 14px 0; width: 100%; }
    .site-nav__cta { border-bottom: 0 !important; margin-top: 14px; }
    .site-nav__cta a { display: inline-block; }
    .hero__light { display: none; }
    .chiaro { grid-template-columns: 1fr; }
    .chiaro__arrow { transform: rotate(90deg); }
    .section { padding: 64px 0; }
    .info-table th { width: 38%; }
}

@media (max-width: 520px) {
    .hero__flag span { width: 8px; }
    .hero__flag .fl-white { width: 6px; }
    .wrap { width: calc(100% - 32px); }
    .header-inner { width: calc(100% - 32px); }
}