/* ============================================================
   SUIGETSU Design Tokens v2 — 2026-07-18 リブランディング
   確定方針: リブランディング検討/03_確定方針_2026-07-18.md
   原則: 金は線でしか使わない / ライト主舞台+夜のHero・実績 /
         セクションスコープトークン([data-surface])
   ============================================================ */

:root {
    /* --- Primitive --- */
    --sumi: #1a1a1d;            /* 墨黒 */
    --washi: #fdfbf7;           /* 和紙白 */
    --washi-warm: #f7f3ea;      /* 生成り(交互リズム用) */
    --gold: #bf953f;            /* 金(線・ダーク面テキスト専用) */
    --gold-deep: #806527;       /* 金深(ライト面テキスト用。生成り#f7f3ea上でも4.9:1) */
    --gold-pale: #fcf6ba;       /* 淡金(ダーク面強調 15.74:1) */
    --green: #2c5e55;           /* 深緑(ライト面Lark準アクセント 7.16:1) */
    --charcoal: #4a4a4a;        /* ライト面副文 8.57:1 */
    --silver-warm: #a5a29b;     /* ダーク面副文 約7:1(新規トークン) */

    /* --- Semantic (light = default surface) --- */
    --bg: var(--washi);
    --bg-alt: var(--washi-warm);
    --text: var(--sumi);
    --text-sub: var(--charcoal);
    --accent-text: var(--gold-deep);
    --line-gold: var(--gold);   /* 罫線・輪郭専用(テキスト不可) */
    --lark: var(--green);
    --card-bg: #ffffff;
    --card-border: rgba(138, 110, 47, 0.28);

    /* --- Type scale --- */
    --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    --font-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
    --font-logo: 'Cinzel', serif;
    --fs-body: 1rem;            /* 16px 下限 */
    --fs-caption: 0.8125rem;    /* 13px 下限 */
    --fs-h2: clamp(1.5rem, 4.5vw, 2.1rem);
    --fs-h3: clamp(1.375rem, 3.6vw, 1.6rem); /* 明朝下限22px */
    --fs-hero: clamp(1.9rem, 7vw, 3.1rem);

    /* --- Spacing (8px base) --- */
    --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
    --sp-6: 48px; --sp-8: 64px; --sp-10: 80px; --sp-14: 112px;
    --radius-s: 8px; --radius-m: 12px; --radius-l: 16px;
    --maxw: 1200px;
    --maxw-text: 720px;
}

/* 夜面(Hero・実績): トークン一式を再定義 */
[data-surface="dark"] {
    --bg: var(--sumi);
    --bg-alt: #232326;
    --text: var(--washi);
    --text-sub: var(--silver-warm);
    --accent-text: var(--gold);      /* 6.27:1 */
    --lark: var(--washi);            /* 深緑はダーク面テキスト不可のため白へ */
    --card-bg: #232326;
    --card-border: rgba(191, 149, 63, 0.4);
}

/* ============ Reset & Base ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    background-color: var(--washi);
    color: var(--sumi);
    line-height: 1.8;
    font-feature-settings: "palt";
    line-break: strict;
    /* 語中での改行を防ぐ。auto-phrase は文節単位で折り返すため
       「取締/役」「大丈/夫」「設/計」のような分断が起きない。
       未対応ブラウザは normal にフォールバックする（従来どおりの挙動）。 */
    word-break: normal;
    word-break: auto-phrase;
    overflow-wrap: break-word;
    overflow-x: hidden;
}

/* 本文の孤立改行（最終行が1〜2文字）を避ける。
   text-wrap: pretty は最終行が極端に短くならないよう行分割を調整する。 */
p, li, dd, dt, figcaption, blockquote,
.role-main, .role-detail, .cta-note, .hero-lead, .achieve-lead {
    text-wrap: pretty;
}

/* 語中で改行させたくない短い語句に付ける。
   word-break: auto-phrase はブラウザ実装に差があり当てにできないため、
   「取締役」「大丈夫」のように割れると読みにくい語はこれで明示的に括る。
   長い文には使わないこと（横スクロールの原因になる）。 */
.nobr { white-space: nowrap; }

img, video { max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 { text-wrap: balance; line-height: 1.4; }

section { padding: var(--sp-10) var(--sp-2); background: var(--bg); color: var(--text); }

.inner { max-width: var(--maxw); margin: 0 auto; }
.inner-text { max-width: var(--maxw-text); margin: 0 auto; }

/* 見出し体系: 明朝はh2級(22px以上)のみ */
.heading-serif {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: var(--fs-h2);
    letter-spacing: 0.06em;
    color: var(--text);
    text-align: center;
    margin-bottom: var(--sp-2);
}

.heading-en {
    display: block;
    font-family: var(--font-logo);
    font-weight: 700;
    font-size: var(--fs-caption);
    letter-spacing: 0.3em;
    color: var(--accent-text);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: var(--sp-1);
}

/* 金の罫線(Gold as Line) */
.gold-rule {
    width: 56px; height: 1px;
    background: var(--line-gold);
    border: none;
    margin: var(--sp-3) auto var(--sp-4);
}

.section-lead {
    color: var(--text-sub);
    text-align: center;
    max-width: var(--maxw-text);
    margin: 0 auto var(--sp-6);
}

/* ============ Buttons ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 32px;
    border-radius: var(--radius-m);
    font-weight: 700;
    font-size: var(--fs-body);
    letter-spacing: 0.06em;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    cursor: pointer;
}

.btn:hover { transform: translateY(-2px); }

/* 主CTA: LINE（LINE緑×白文字は2.26:1で規約不適合のため墨黒文字。実測7.6:1） */
.btn-primary {
    background: #06c755;
    color: var(--sumi);
    box-shadow: 0 6px 20px rgba(6, 199, 85, 0.28);
}
.btn-primary:hover { background: #05b34c; color: var(--sumi); }

/* 副CTA: 線の金(夜面) / 金深(昼面) */
.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--line-gold);
}
.btn-ghost:hover { box-shadow: 0 4px 16px rgba(191, 149, 63, 0.25); }

.btn-icon-img { width: 22px; height: 22px; object-fit: contain; }

/* ============ Cards ============ */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-m);
    padding: var(--sp-4);
    box-shadow: 0 4px 24px rgba(26, 26, 29, 0.05);
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}

@media (min-width: 768px) {
    .card-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ============ SITE HEADER（一般的なヘッダー＋ナビ） ============ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(253, 251, 247, 0.94);
    border-bottom: 1px solid var(--card-border);
    backdrop-filter: blur(6px);
}

.site-header-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: 10px var(--sp-2);
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--sumi);
    min-height: 44px;
}

.site-brand img { width: 40px; height: 40px; }

.site-brand .brand-text {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.06em;
}

.site-brand .brand-text small {
    display: block;
    font-family: var(--font-logo);
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    color: var(--gold-deep);
}

.site-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    text-decoration: none;
    color: var(--sumi);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-s);
}

.site-nav a:hover { background: var(--washi-warm); color: var(--gold-deep); }

.site-nav a.nav-cta {
    background: var(--green);
    color: #ffffff;
    font-weight: 500;
    margin-left: 6px;
    border-radius: 3px;
}

.site-nav a.nav-cta:hover { background: #24504a; color: #ffffff; }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-s);
    background: #ffffff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--sumi);
}

@media (max-width: 768px) {
    .nav-toggle { display: inline-flex; }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--washi);
        border-bottom: 1px solid var(--card-border);
        box-shadow: 0 12px 24px rgba(26, 26, 29, 0.08);
    }

    .site-nav.open { display: block; }

    .site-nav ul { flex-direction: column; align-items: stretch; padding: var(--sp-1) var(--sp-2) var(--sp-2); }

    .site-nav a { width: 100%; }

    .site-nav a.nav-cta { margin-left: 0; justify-content: center; }
}

/* ============ HERO（和紙白・左寄せ・会長デザインの樹を復元） ============ */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(82svh, 760px);
    padding: var(--sp-8) var(--sp-2);
    overflow: hidden;
    background: var(--washi);
}

/* 樹はヒーローの高さいっぱいに描画（v1と同じ右端配置・scaleX(-1)後は
   background-position: left が視覚的な右端になる点に注意） */
.hero-bg-tree {
    position: absolute;
    inset: 0;
    background-image: url('assets/bg_tree_900.webp');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto 66%;
    opacity: 0.45;
    transform: scaleX(-1);
    pointer-events: none;
}

@media (min-width: 1024px) {
    .hero-bg-tree {
        background-image: url('assets/bg_tree_1600.webp');
        background-position: left center;
        background-size: auto 96%;
        opacity: 0.9;
        -webkit-mask-image: linear-gradient(to right, black 62%, transparent 100%);
        mask-image: linear-gradient(to right, black 62%, transparent 100%);
    }
}

/* テキスト保護層: 樹の手前・文字の背後に和紙白グラデーション（全幅共通） */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        var(--washi) 30%,
        rgba(253, 251, 247, 0.72) 52%,
        rgba(253, 251, 247, 0) 74%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    max-width: var(--maxw);
    margin: 0 auto;
    width: 100%;
}

.hero-text { max-width: 620px; }

.hero-eyebrow {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--green);
    margin-bottom: var(--sp-3);
}

/* 受賞ラベル: 金の細罫のみ（ベタ塗り・バッジ画像は使わない） */
.hero-award {
    display: inline-block;
    margin-top: var(--sp-4);
    padding: 10px 22px;
    border: 1px solid var(--line-gold);
    border-radius: 2px;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    color: var(--gold-deep);
    background: rgba(255, 255, 255, 0.5);
}

.hero-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.6rem, 4.6vw, 2.4rem);
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin-bottom: var(--sp-3);
}

/* 文節単位で折り返し、孤立改行を防ぐ */
.hero-title span { display: inline-block; }

/* 見出しを文節単位で折り返し、孤立改行を防ぐ */
.heading-serif span { display: inline-block; }

.hero-lead {
    color: var(--charcoal);
    margin-bottom: var(--sp-4);
    max-width: 540px;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* 握手の透かし（会長デザインの復元・信頼のモチーフ） */
.bg-handshake-watermark {
    position: absolute;
    right: -6%;
    bottom: -12%;
    width: min(420px, 60vw);
    opacity: 0.12;
    filter: grayscale(100%) sepia(60%);
    pointer-events: none;
}

/* ============ セクション背景（素材ベースの装飾） ============ */
section { position: relative; }

/* 相談例: 上からの柔らかい光 */
.section-consult {
    background:
        radial-gradient(1100px 420px at 50% 0%, #fffdf6 0%, var(--washi-warm) 78%);
}

/* できること: 回路テクスチャの透かし */
.section-services {
    background-color: var(--washi);
    overflow: hidden;
}

.section-services::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/tree_circuit_bg.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.06;
    pointer-events: none;
}

/* 実績: 金のグラデーション面 + 三日月ロゴの透かし */
.section-achievement {
    background: linear-gradient(160deg, #f4ecd8 0%, var(--washi-warm) 55%, #fdfbf7 100%);
    overflow: hidden;
}

.moon-watermark {
    position: absolute;
    width: min(480px, 70vw);
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
}

.section-achievement .moon-watermark {
    right: -8%;
    top: 50%;
    transform: translateY(-50%);
}

/* プロフィール: 三日月の淡い透かし（左） */
.section-profile { overflow: hidden; }

.section-profile .moon-watermark {
    left: -10%;
    bottom: -14%;
    opacity: 0.05;
}

/* CTA: 深緑の全幅面（A2準拠） */
.section-cta-green {
    background-color: var(--green);
    background-image: url('assets/bg_green_texture.webp');
    background-size: cover;
    background-position: center bottom;
    color: var(--washi);
    text-align: center;
    padding: var(--sp-14) var(--sp-2);
    overflow: hidden;
}

.section-cta-green .heading-serif { color: var(--washi); }

.section-cta-green .gold-rule { background: rgba(191, 149, 63, 0.8); }

.section-cta-green .cta-note {
    color: rgba(253, 251, 247, 0.85);
    font-size: var(--fs-caption);
    letter-spacing: 0.06em;
    margin-top: var(--sp-3);
}

/* 深緑面上の白ボタン */
.btn-on-green {
    background: #ffffff;
    color: var(--sumi);
    border: none;
    min-width: 280px;
}

.btn-on-green:hover { background: #f4f1e8; color: var(--sumi); }

/* つながる: 握手の透かし（縁のモチーフ） */
.section-morning {
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf6 100%);
}

.section-morning .bg-handshake-watermark {
    right: -4%;
    bottom: -8%;
    width: min(380px, 52vw);
    opacity: 0.1;
}

/* ============ アニメーション（prefers-reduced-motionで全停止） ============ */

/* 樹の呼吸（v1から復元） */
@keyframes breathe-tree {
    0%, 100% { transform: scaleX(-1) scale(1); }
    50% { transform: scaleX(-1) scale(1.02); }
}

.hero-bg-tree { animation: breathe-tree 18s ease-in-out infinite; }

/* ヒーロー登場（時差） */
@keyframes riseIn {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-text > * { opacity: 0; animation: riseIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.hero-text > *:nth-child(1) { animation-delay: 0.1s; }
.hero-text > *:nth-child(2) { animation-delay: 0.22s; }
.hero-text > *:nth-child(3) { animation-delay: 0.36s; }
.hero-text > *:nth-child(4) { animation-delay: 0.5s; }

/* カード類の段差表示（revealと連動） */
.reveal.visible .consult-item,
.reveal.visible .svc-card,
.reveal.visible .step-item {
    animation: riseIn 0.65s ease backwards;
}

.reveal.visible .consult-item:nth-child(2),
.reveal.visible .svc-card:nth-child(2),
.reveal.visible .step-item:nth-child(2) { animation-delay: 0.14s; }

.reveal.visible .consult-item:nth-child(3),
.reveal.visible .svc-card:nth-child(3),
.reveal.visible .step-item:nth-child(3) { animation-delay: 0.28s; }

/* ボタンの光沢スイープ（v1から復元） */
.btn, .contact-btn { position: relative; overflow: hidden; }

.btn::after, .contact-btn::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: translateX(-110%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.btn:hover::after, .contact-btn:hover::after { transform: translateX(110%); }

/* ナビの金色下線スイープ */
.site-nav a:not(.nav-cta) { position: relative; }

.site-nav a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px;
    bottom: 6px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.site-nav a:not(.nav-cta):hover::after { transform: scaleX(1); }

/* 実績カードのバッジ浮遊 */
@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.award-label { animation: floatBadge 4s ease-in-out infinite; display: inline-block; }

/* ============ 相談例 ============ */
.consult-list { display: grid; gap: var(--sp-2); max-width: var(--maxw-text); margin: 0 auto; }

.consult-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--line-gold);
    border-radius: var(--radius-s);
    padding: var(--sp-3);
}

.consult-item svg { flex-shrink: 0; margin-top: 3px; }

.consult-item p { color: var(--text); font-weight: 500; }
.consult-item .consult-note { display: block; font-size: var(--fs-caption); color: var(--text-sub); font-weight: 400; margin-top: 4px; }

/* ============ できること（A2準拠：小さなアイコン・低いカード） ============ */
.svc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    max-width: 980px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .svc-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
}

.svc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: var(--sp-4) var(--sp-2);
    min-height: 128px;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.svc-card:hover {
    border-color: var(--line-gold);
    background: #ffffff;
    transform: translateY(-2px);
}

.svc-card svg { width: 30px; height: 30px; }

.svc-card .svc-name {
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text);
}

/* 補足の1行カード */
.svc-wide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 980px;
    margin: var(--sp-2) auto 0;
    padding: var(--sp-3) var(--sp-2);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    color: var(--text);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    min-height: 56px;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.svc-wide:hover { border-color: var(--line-gold); background: #ffffff; }

.svc-wide svg { width: 24px; height: 24px; flex-shrink: 0; }

/* Lark詳細への導線 */
.svc-more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
    margin-top: var(--sp-3);
    color: var(--green);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.svc-more:hover { text-decoration: underline; }

/* ============ 実績（墨黒面・A2準拠：装飾を削ぎ落とす） ============ */
.section-achievement-dark {
    background-color: var(--sumi);
    background-image: url('assets/bg_dark_texture.webp');
    background-size: cover;
    background-position: center;
    color: var(--washi);
    text-align: center;
    padding: var(--sp-14) var(--sp-2);
}

.section-achievement-dark .heading-serif { color: var(--washi); }

.achieve-emblem {
    width: 34px;
    height: 34px;
    margin: 0 auto var(--sp-2);
    display: block;
    opacity: 0.9;
}

.achieve-product {
    font-family: 'Shippori Mincho', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 3.6vw, 1.9rem);
    letter-spacing: 0.04em;
    color: var(--gold);
    margin-bottom: var(--sp-3);
}

.achieve-lead {
    color: var(--silver-warm);
    max-width: 620px;
    margin: 0 auto var(--sp-6);
}

/* 金の細い縦罫で区切る小さなメトリクス行 */
.achieve-metrics {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 640px;
    margin: 0 auto;
}

.achieve-metrics li {
    list-style: none;
    padding: 4px var(--sp-4);
    font-size: var(--fs-caption);
    letter-spacing: 0.1em;
    color: var(--washi);
    border-left: 1px solid rgba(191, 149, 63, 0.55);
}

.achieve-metrics li:first-child { border-left: none; }

.achieve-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--sp-4);
    color: var(--gold);
    font-size: var(--fs-caption);
    letter-spacing: 0.1em;
    text-decoration: none;
    border-bottom: 1px solid rgba(191, 149, 63, 0.6);
    padding-bottom: 3px;
}

.achieve-more:hover { color: var(--gold-pale); }

/* ============ プロフィール ============ */
.profile-wrap {
    display: grid;
    gap: var(--sp-4);
    max-width: var(--maxw-text);
    margin: 0 auto;
}

.profile-head { display: flex; align-items: center; gap: var(--sp-3); }

.profile-face {
    width: 88px; height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line-gold);
    padding: 3px;
    flex-shrink: 0;
}

.profile-name { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); }
.profile-name-en { font-size: var(--fs-caption); color: var(--accent-text); letter-spacing: 0.2em; margin-top: 4px; }

.role-list { list-style: none; display: grid; gap: var(--sp-2); }

.role-list li {
    padding-left: var(--sp-3);
    border-left: 2px solid var(--line-gold);
}

.role-list .role-main { font-weight: 700; color: var(--text); }
.role-list .role-detail { font-size: var(--fs-caption); color: var(--text-sub); }

.profile-message { color: var(--text-sub); }

/* ============ 相談の流れ + つながる (朝) ============ */
.section-morning { background: #ffffff; }

.steps { counter-reset: step; display: grid; gap: var(--sp-3); max-width: var(--maxw-text); margin: 0 auto var(--sp-6); }

.step-item {
    counter-increment: step;
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    background: var(--washi);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-m);
    padding: var(--sp-3);
}

.step-item::before {
    content: counter(step);
    font-family: var(--font-logo);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--gold-deep);
    border: 1px solid var(--line-gold);
    border-radius: 50%;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-item h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: 4px; }
.step-item p { font-size: var(--fs-caption); color: var(--text-sub); }

.no-push-note {
    text-align: center;
    color: var(--charcoal);
    font-size: var(--fs-caption);
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-6);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
    max-width: 460px;
    margin: 0 auto;
}

.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-s);
    background: #ffffff;
    color: var(--sumi);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--fs-caption);
    letter-spacing: 0.08em;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(191,149,63,0.18); }

.contact-btn img { width: 20px; height: 20px; object-fit: contain; }

.contact-note { text-align: center; font-size: var(--fs-caption); color: var(--text-sub); margin-top: var(--sp-3); }

.contact-note a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
}

/* ============ Footer ============ */
footer {
    background: var(--sumi);
    color: var(--silver-warm);
    text-align: center;
    padding: var(--sp-4) var(--sp-2);
    font-size: var(--fs-caption);
    letter-spacing: 0.08em;
}

footer .footer-brand {
    font-family: var(--font-logo);
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--gold);
    display: block;
    margin-bottom: var(--sp-1);
}

/* ============ QR モーダル (dialog) ============ */
.qr-open-btn {
    position: fixed;
    bottom: 18px; right: 14px;
    z-index: 100;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: var(--sumi);
    color: var(--gold-pale);
    font-family: var(--font-logo);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    cursor: pointer;
}

dialog.qr-dialog {
    border: 1px solid var(--gold);
    border-radius: var(--radius-l);
    padding: var(--sp-4);
    max-width: 340px;
    width: calc(100% - 32px);
    text-align: center;
    background: #ffffff;
    color: var(--sumi);
}

dialog.qr-dialog::backdrop { background: rgba(26, 26, 29, 0.7); backdrop-filter: blur(4px); }

.qr-dialog .qr-brand { font-family: var(--font-logo); font-weight: 700; letter-spacing: 0.2em; color: var(--gold-deep); }
.qr-dialog .qr-name { font-size: var(--fs-body); font-weight: 700; margin: 4px 0 var(--sp-2); }
.qr-dialog img { width: 180px; height: 180px; margin-bottom: var(--sp-2); }
.qr-dialog p { font-size: var(--fs-caption); color: var(--charcoal); margin-bottom: var(--sp-3); }

/* ============ lark.html 専用 ============ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2);
    max-width: var(--maxw);
    margin: 0 auto;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--charcoal);
    font-size: var(--fs-caption);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-s);
    background: #ffffff;
}

.lark-hero {
    text-align: center;
    background: linear-gradient(180deg, #f3faf8 0%, var(--washi) 100%);
    padding-top: var(--sp-8);
}

.lark-hero .lark-answer {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.4rem, 4.6vw, 2rem);
    letter-spacing: 0.05em;
    max-width: 800px;
    margin: 0 auto var(--sp-2);
}

.lark-hero .lark-answer strong { color: var(--green); }

.lark-hero-img { max-width: min(760px, 100%); height: auto; margin: var(--sp-4) auto 0; border-radius: var(--radius-m); box-shadow: 0 12px 40px rgba(26,26,29,0.1); }

.scene-grid { display: grid; gap: var(--sp-2); max-width: var(--maxw-text); margin: 0 auto; }

.scene-item {
    background: #f4f4f2;
    border-radius: var(--radius-s);
    padding: var(--sp-3);
    color: var(--charcoal);
}

.scene-item.after {
    background: #f3faf8;
    border-left: 3px solid var(--green);
    color: var(--sumi);
}

.scene-item .scene-time { font-size: var(--fs-caption); font-weight: 700; color: var(--gold-deep); display: block; margin-bottom: 4px; }

.honest-note {
    max-width: var(--maxw-text);
    margin: var(--sp-4) auto 0;
    padding: var(--sp-3);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-s);
    background: #fffdf5;
    color: var(--charcoal);
    font-size: var(--fs-caption);
}

/* ツール対応表 */
.tool-map { max-width: var(--maxw-text); margin: 0 auto; border-collapse: collapse; width: 100%; }

.tool-map th, .tool-map td {
    padding: 14px 10px;
    border-bottom: 1px solid var(--card-border);
    text-align: left;
    font-size: var(--fs-caption);
    vertical-align: middle;
}

.tool-map th { color: var(--charcoal); font-weight: 700; letter-spacing: 0.06em; }

.tool-map .tool-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tool-map .tool-cell img { width: 20px; height: 20px; object-fit: contain; }

.tool-map .lark-cell { color: var(--green); font-weight: 700; }

/* 費用比較 */
.cost-compare { display: grid; gap: var(--sp-3); max-width: var(--maxw-text); margin: 0 auto; }

@media (min-width: 768px) { .cost-compare { grid-template-columns: 1fr 1fr; } }

.cost-card { border-radius: var(--radius-m); padding: var(--sp-4); }

.cost-card.before { background: #f4f4f2; color: var(--charcoal); }

.cost-card.after { background: #f3faf8; border: 1px solid var(--green); }

.cost-card h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: var(--sp-2); }

.cost-card ul { list-style: none; font-size: var(--fs-caption); display: grid; gap: 8px; margin-bottom: var(--sp-2); }

.cost-card .cost-total { font-size: 1.3rem; font-weight: 700; }

.cost-card.after .cost-total { color: var(--green); }

.cost-note { max-width: var(--maxw-text); margin: var(--sp-3) auto 0; font-size: var(--fs-caption); color: var(--charcoal); text-align: center; }

/* FAQ */
.faq-list { max-width: var(--maxw-text); margin: 0 auto; display: grid; gap: var(--sp-2); }

.faq-list details {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-s);
    background: #ffffff;
}

.faq-list summary {
    padding: var(--sp-3);
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
    list-style-position: inside;
}

.faq-list details p { padding: 0 var(--sp-3) var(--sp-3); color: var(--charcoal); font-size: var(--fs-caption); }

/* ============ Reveal animation ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============ Accessibility ============ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* OSダークモード: 昼面を柔らげる(夜面はそのまま) */
@media (prefers-color-scheme: dark) {
    body:not([data-force-light]) { background-color: var(--washi); }
    /* ライト基調ブランドのため、昼面は維持。過度な反転はブランド毀損のため行わない */
}

/* ============================================================
   lark.html リニューアル（What is Lark）— 2026-07-23
   参考: KAIEI LP の「定義→機能カード→メリット」構成を
   瑞月の和モダン（月×金×明朝）へ翻訳。だらだら横書きを排し
   スキャンできるカード/2カラムに再構成する。
   ============================================================ */

/* --- Hero: 左テキスト＋右に金の回路図版（index heroに準拠） --- */
.lk-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(70svh, 620px);
    padding: var(--sp-8) var(--sp-2);
    overflow: hidden;
    background: linear-gradient(180deg, var(--washi-warm) 0%, var(--washi) 100%);
}

.lk-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('assets/lark_hero.webp');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 96%;
    pointer-events: none;
}

.lk-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        var(--washi) 24%,
        rgba(253, 251, 247, 0.68) 50%,
        rgba(253, 251, 247, 0) 78%);
    pointer-events: none;
}

.lk-hero-inner { position: relative; max-width: var(--maxw); margin: 0 auto; width: 100%; }

.lk-hero-text { max-width: 560px; }

.lk-hero-eyebrow {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--green);
    margin-bottom: var(--sp-2);
}

.lk-hero-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(2rem, 7.5vw, 3rem);
    letter-spacing: 0.06em;
    line-height: 1.35;
    margin-bottom: var(--sp-3);
}

.lk-hero-title span { display: inline-block; }

.lk-hero-lead {
    color: var(--charcoal);
    font-size: 1.0625rem;
    margin-bottom: var(--sp-4);
    max-width: 480px;
}

.lk-hero-lead strong { color: var(--green); font-weight: 700; }

.lk-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); }

.lk-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    font-size: var(--fs-caption);
    color: var(--charcoal);
    letter-spacing: 0.04em;
}

.lk-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

.lk-hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

@media (max-width: 768px) {
    .lk-hero { min-height: auto; padding-top: var(--sp-6); }
    .lk-hero-bg { background-size: auto 52%; background-position: right bottom; opacity: 0.55; }
    .lk-hero-overlay {
        background: linear-gradient(180deg, var(--washi) 48%, rgba(253, 251, 247, 0.4) 100%);
    }
}

/* --- ひとことで（定義カード：左テキスト＋右図） --- */
.lk-define {
    display: grid;
    gap: var(--sp-4);
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-l);
    padding: var(--sp-6);
    box-shadow: 0 8px 30px rgba(26, 26, 29, 0.05);
}

@media (min-width: 768px) { .lk-define { grid-template-columns: 1fr 1fr; padding: var(--sp-8); } }

.lk-define-icon { width: 48px; height: 48px; margin-bottom: var(--sp-2); }

.lk-define h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: var(--fs-h3);
    letter-spacing: 0.04em;
    margin-bottom: var(--sp-2);
    line-height: 1.6;
}

.lk-define h3 .accent { color: var(--green); }

.lk-define p { color: var(--text-sub); font-size: var(--fs-body); }

.lk-define-badge {
    display: inline-block;
    margin-bottom: var(--sp-2);
    padding: 5px 14px;
    background: #f3faf8;
    border: 1px solid rgba(44, 94, 85, 0.28);
    border-radius: 999px;
    color: var(--green);
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.lk-define-fig { text-align: center; }
.lk-define-fig img { border-radius: var(--radius-m); max-width: 100%; }

/* --- 機能グリッド（スキャンできるカード＝だらだら横書きの対極） --- */
.feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    max-width: 980px;
    margin: 0 auto;
}

@media (min-width: 768px) { .feat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } }

.feat-card {
    background: #ffffff;
    border: 1px solid var(--card-border);
    border-top: 2px solid var(--line-gold);
    border-radius: 4px;
    padding: var(--sp-3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(26, 26, 29, 0.07); }

.feat-tag {
    font-family: var(--font-logo);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    color: var(--gold-deep);
    display: block;
    margin-bottom: 10px;
}

.feat-card svg { width: 28px; height: 28px; margin-bottom: 10px; display: block; }

.feat-name {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.feat-desc { font-size: var(--fs-caption); color: var(--text-sub); }

.feat-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 980px;
    margin: var(--sp-2) auto 0;
    padding: var(--sp-3) var(--sp-2);
    min-height: 56px;
    border: 1px dashed var(--card-border);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--text-sub);
    font-size: var(--fs-caption);
    letter-spacing: 0.06em;
    text-align: center;
}

/* --- メリット（4つ・短く） --- */
.merit-grid { display: grid; gap: var(--sp-2); max-width: 900px; margin: 0 auto; }

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

.merit-item {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--green);
    border-radius: var(--radius-s);
    padding: var(--sp-3);
}

.merit-item svg { width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px; }

.merit-item h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: 4px; letter-spacing: 0.04em; }

.merit-item p { font-size: var(--fs-caption); color: var(--text-sub); }

/* --- 短い正直メモ（帯） --- */
.lk-honest {
    max-width: var(--maxw-text);
    margin: var(--sp-6) auto 0;
    padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--line-gold);
    background: #fffdf5;
    color: var(--charcoal);
    font-size: var(--fs-caption);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

.lk-honest strong { color: var(--gold-deep); }

/* ============ Responsive (全社標準BP) ============ */
@media (max-width: 640px) {
    section { padding: var(--sp-8) var(--sp-2); }
    .hero { padding-top: var(--sp-6); }
    .contact-grid { grid-template-columns: 1fr 1fr; }
}