@charset "UTF-8";
/* =========================================================================
 *  SmartSide Hojokin Child - assets/css/style_min.css
 *  -------------------------------------------------------------------------
 *  mono-support.com（コマサポ）のデザインに寄せたスタイル設計。
 *
 *  主な特徴：
 *    - メインカラーはターコイズ系（#1ABCBC）＋濃紺アクセント
 *    - CTA は赤(電話)・青(メール)・緑(LINE) の3色で強くコントラスト
 *    - カードは大きめ角丸 + 深めシャドウで POP な印象
 *    - 見出しは中央寄せ + 二段組ライン下線
 *
 *  CSS 変数（:root）で配色を集中管理しているので、
 *  色味の調整は :root の値を変えるだけで全体に反映されます。
 * ========================================================================= */

/* -------------------------------------------------------------------------
 *  0. デザイントークン（CSS 変数）
 * ------------------------------------------------------------------------- */
:root {
    /* メインカラー：コマサポ風ターコイズ */
    --color-primary:        #1abcbc;     /* メインターコイズ */
    --color-primary-dark:   #0e8a8a;     /* 濃いめのターコイズ（ホバー） */
    --color-primary-light:  #5fd1d1;     /* 明るいターコイズ */
    --color-secondary:      #2c3e6f;     /* 濃紺（見出し・本文強調） */

    /* CTA 専用カラー（コマサポと同じ3色構成） */
    --color-cta-tel:        #e74c3c;     /* 赤：電話 */
    --color-cta-tel-dark:   #c0392b;
    --color-cta-mail:       #3498db;     /* 青：メール */
    --color-cta-mail-dark:  #2c80b4;
    --color-cta-line:       #06c755;     /* 緑：LINE 公式色 */
    --color-cta-line-dark:  #04a043;

    /* アクセント */
    --color-accent:         #f39c12;     /* 黄：強調アクセント */
    --color-warning:        #ff5252;     /* 注意喚起の赤 */

    /* テキスト・背景 */
    --color-text:           #333;
    --color-text-light:     #666;
    --color-text-mute:      #999;
    --color-bg:             #fff;
    --color-bg-soft:        #f5fafa;     /* ターコイズに馴染む薄い背景 */
    --color-bg-darker:      #e8f4f4;
    --color-border:         #d8e6e6;

    /* タイポ */
    --font-base:    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --font-en:      "Helvetica Neue", Arial, sans-serif;

    /* サイズ */
    --container:    1100px;
    --radius:       10px;
    --radius-lg:    20px;
    --shadow-sm:    0 2px 8px rgba(0,0,0,.06);
    --shadow:       0 6px 20px rgba(0,0,0,.08);
    --shadow-lg:    0 12px 32px rgba(0,0,0,.12);
}

/* -------------------------------------------------------------------------
 *  1. リセット / 基本タイポ
 * ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; vertical-align: bottom; }

a { color: var(--color-primary-dark); text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .75; }

.sp { display: none; }
@media (max-width: 767px) {
    .sp { display: inline; }
    .pc { display: none; }
}

.screen-reader-text {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* -------------------------------------------------------------------------
 *  共通：セクション見出し（コマサポ風の中央寄せ＋下線）
 * ------------------------------------------------------------------------- */
.section-heading {
    text-align: center;
    margin: 0 0 1em;
    color: var(--color-secondary);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: .04em;
    position: relative;
    padding-bottom: .5em;
}
.section-heading::after {
    content: "";
    display: block;
    width: 80px; height: 4px;
    background: var(--color-primary);
    margin: .5em auto 0;
    border-radius: 2px;
}

.section-lead {
    text-align: center;
    color: var(--color-text-light);
    margin: 0 auto 2.5em;
    max-width: 760px;
}

/* -------------------------------------------------------------------------
 *  2. ヘッダー：1段構成（左ロゴ + 中央ナビ + 右3色CTA）
 * ------------------------------------------------------------------------- */
.site-header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* ロゴ（左） */
.site-header__logo {
    margin: 0;
    flex: 0 0 auto;
}
.site-header__logo a {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--color-secondary);
}
.site-header__logo-img {
    width: auto;
    height: 44px;
    display: block;
}
.site-header__logo-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
}
.site-header__logo-name {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--color-secondary);
}
.site-header__logo-sub {
    font-size: .7rem;
    color: var(--color-text-light);
    font-weight: 500;
    letter-spacing: .05em;
    margin-top: .1em;
}

/* ナビ（中央 — flex で間に伸ばす） */
.site-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
.site-nav__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: .25rem 1.75rem;
    align-items: center;
}
.site-nav__list > li { position: relative; }
.site-nav__list > li > a {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: 1.4rem .25rem;
    color: var(--color-secondary);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .03em;
    border-bottom: 2px solid transparent;
    transition: border-color .15s, color .15s;
}
.site-nav__list > li > a:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    opacity: 1;
}
/* ドロップダウン親項目はクリック無効（ホバーで子項目を出すラベル扱い） */
.site-nav__list > li.menu-item-has-children > a {
    cursor: default;
    pointer-events: none;
}
.site-nav__list > li.menu-item-has-children .sub-menu a {
    pointer-events: auto;
    cursor: pointer;
}
/* ドロップダウン親項目に小さな下向き三角を出す */
.site-nav__list > li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: .35em;
    opacity: .65;
    transition: transform .2s;
}
.site-nav__list > li.menu-item-has-children:hover > a::after,
.site-nav__list > li.menu-item-has-children:focus-within > a::after {
    transform: rotate(180deg);
}

/* ドロップダウン（サブメニュー） */
.site-nav__list .sub-menu {
    list-style: none;
    margin: 0; padding: .35rem 0;
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 280px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    border-radius: 8px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s, visibility .15s, transform .15s;
    z-index: 50;
    border-top: 3px solid var(--color-primary);
}
.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.site-nav__list .sub-menu li { display: block; }
.site-nav__list .sub-menu a {
    display: block;
    padding: .65rem 1.25rem;
    color: var(--color-secondary);
    font-weight: 500;
    font-size: .9rem;
    line-height: 1.5;
    transition: background .15s, color .15s;
}
.site-nav__list .sub-menu a:hover {
    background: var(--color-bg-soft);
    color: var(--color-primary-dark);
    opacity: 1;
}

/* ヘッダー CTA：シンプル版（TEL=テキスト表示 / メール=アウトライン / LINE=控えめ塗り） */
.site-header__cta {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}
.site-header__cta a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.site-header__cta a:hover { opacity: 1; }
.site-header__cta .cta-icon {
    font-size: 1rem;
    flex: 0 0 auto;
    line-height: 1;
}
.site-header__cta .cta-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* TEL：背景なし、ターコイズ色のアイコン + 濃紺の番号 */
.site-header__cta-tel a {
    color: var(--color-secondary);
    padding: .35rem .25rem;
}
.site-header__cta-tel .cta-icon { color: var(--color-primary); font-size: 1.1rem; }
.site-header__cta-tel .cta-num {
    font-family: var(--font-en);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--color-secondary);
}
.site-header__cta-tel .cta-hours {
    font-size: .65rem;
    color: var(--color-text-light);
    font-weight: 400;
    margin-top: .1em;
    letter-spacing: .03em;
}
.site-header__cta-tel a:hover { color: var(--color-primary-dark); }
.site-header__cta-tel a:hover .cta-num { color: var(--color-primary-dark); }

/* メール：濃紺アウトライン、ホバーで塗り */
.site-header__cta-mail a {
    color: var(--color-secondary);
    background: #fff;
    border: 1.5px solid var(--color-secondary);
    padding: .55rem 1rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: .85rem;
}
.site-header__cta-mail a:hover {
    background: var(--color-secondary);
    color: #fff;
}
.site-header__cta-mail .cta-num   { font-size: .85rem; font-weight: 700; }
.site-header__cta-mail .cta-hours { display: none; } /* シンプル化のため副文非表示 */
.site-header__cta-mail .cta-icon  { font-size: .95rem; }

/* LINE：LINEブランドカラーの塗り、小さめ */
.site-header__cta-line a {
    color: #fff;
    background: var(--color-cta-line);
    padding: .55rem 1rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: .85rem;
}
.site-header__cta-line a:hover {
    background: var(--color-cta-line-dark);
    transform: translateY(-1px);
}
.site-header__cta-line .cta-icon {
    font-size: .65rem;
    background: #fff;
    color: var(--color-cta-line);
    padding: .15em .4em;
    border-radius: 3px;
    font-weight: 800;
    letter-spacing: .05em;
}
.site-header__cta-line .cta-num   { font-size: .85rem; font-weight: 700; }
.site-header__cta-line .cta-hours { display: none; }

/* ハンバーガー（モバイル用）：白塗り + 濃紺バーの反転デザイン */
.site-nav__toggle {
    display: none;
    width: 42px; height: 42px;
    background: #fff;
    border: 1.5px solid var(--color-secondary);
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    padding: 11px 9px;
    border-radius: 6px;
    flex: 0 0 auto;
    transition: background .15s, border-color .15s;
}
.site-nav__toggle:hover,
.site-nav__toggle[aria-expanded="true"] {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}
.site-nav__toggle span:not(.screen-reader-text) {
    display: block;
    width: 100%; height: 2px;
    background: var(--color-secondary);
    transition: background .2s, transform .25s, opacity .2s;
}
.site-nav__toggle:hover span:not(.screen-reader-text),
.site-nav__toggle[aria-expanded="true"] span:not(.screen-reader-text) {
    background: #fff;
}

@media (max-width: 1200px) {
    .site-header__cta { gap: .65rem; }
    .site-nav__list { gap: .25rem 1.25rem; }
    /* メール・LINE はラベル省略してアイコンのみ。電話番号は重要なので残す */
    .site-header__cta-mail .cta-text,
    .site-header__cta-line .cta-text { display: none; }
    .site-header__cta-mail .cta-icon { font-size: 1.1rem; }
    .site-header__cta-mail a,
    .site-header__cta-line a { padding: .55rem .7rem; }
}
@media (max-width: 1050px) {
    /* 電話のhoursを省略 */
    .site-header__cta-tel .cta-hours { display: none; }
}
@media (max-width: 900px) {
    /* ヘッダーCTA は非表示（下部のフローティングCTAバーで代替） */
    .site-header__cta { display: none; }

    /* ナビ本体：通常は非表示、ハンバーガー押下で is-open が付くと展開 */
    .site-nav {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 12px 24px rgba(0,0,0,.12);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        z-index: 99;
        border-top: 1px solid var(--color-border);
    }
    .site-nav.is-open {
        display: block !important;
        animation: navSlideDown .2s ease-out;
    }
    @keyframes navSlideDown {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* リスト構造を縦並びに */
    .site-nav__list {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        padding: .25rem 0;
    }
    .site-nav__list > li {
        position: static;
        border-bottom: 1px solid var(--color-border);
    }
    .site-nav__list > li:last-child { border-bottom: 0; }
    .site-nav__list > li > a {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        border-bottom: 0;
        justify-content: flex-start;
        line-height: 1.4;
    }

    /* ドロップダウン親の▼マークは非表示（モバイルでは常に展開表示するため） */
    .site-nav__list > li.menu-item-has-children > a::after { display: none; }

    /* サブメニュー：絶対配置→静的配置に戻して常時インライン表示 */
    .site-nav__list .sub-menu {
        position: static;
        transform: none;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        background: var(--color-bg-soft);
        box-shadow: none;
        border: 0;
        border-top: 1px solid var(--color-border);
        border-radius: 0;
        min-width: 0;
        padding: 0;
        margin: 0;
    }
    .site-nav__list .sub-menu li { border-bottom: 1px solid var(--color-border); }
    .site-nav__list .sub-menu li:last-child { border-bottom: 0; }
    .site-nav__list .sub-menu a {
        padding: .85rem 2.25rem;
        font-size: .92rem;
    }
    .site-nav__list .sub-menu a::before {
        content: "└ ";
        opacity: .5;
        margin-right: .25em;
    }

    /* ハンバーガー */
    .site-nav__toggle { display: flex; margin-left: auto; }
    .site-nav__toggle span:not(.screen-reader-text) {
        transition: transform .25s, opacity .2s;
        transform-origin: center;
    }
    .site-nav__toggle[aria-expanded="true"] span:nth-of-type(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .site-nav__toggle[aria-expanded="true"] span:nth-of-type(2) {
        opacity: 0;
    }
    .site-nav__toggle[aria-expanded="true"] span:nth-of-type(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}
@media (max-width: 600px) {
    .site-header__inner { padding: .55rem .85rem; gap: .75rem; }
    .site-header__logo-img { height: 36px; }
    .site-header__logo-name { font-size: .95rem; }
    .site-header__logo-sub { display: none; }
    .site-header__cta { gap: .3rem; }
}

/* -------------------------------------------------------------------------
 *  3. ファーストビュー（明るい背景＋吹き出し＋金バッジ＋イラスト枠）
 * ------------------------------------------------------------------------- */
/* 写真背景：fv-bg.jpg を画面右寄せで敷き、左半分に白のフェードを掛けて文字を読みやすくする */
.fv {
    position: relative;
    background-color: #eaf6f8;
    background-image: url('../../img/fv-bg.jpg');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    color: var(--color-secondary);
    padding: 3rem 1rem 4rem;
    overflow: hidden;
}
.fv::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(234,246,248,.96) 0%,
            rgba(234,246,248,.92) 30%,
            rgba(234,246,248,.55) 60%,
            rgba(234,246,248,.15) 100%
        ),
        radial-gradient(ellipse at 10% 80%, rgba(44,62,111,.06) 0%, transparent 60%);
    pointer-events: none;
}
@media (max-width: 900px) {
    /* モバイルではテキストの可読性最優先で、写真を全体に薄く敷く */
    .fv::before {
        background:
            linear-gradient(180deg,
                rgba(234,246,248,.96) 0%,
                rgba(234,246,248,.85) 60%,
                rgba(234,246,248,.7) 100%
            );
    }
}
.fv__inner {
    max-width: var(--container);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2rem;
    align-items: center;
}

.fv__main { text-align: center; }

/* 吹き出し（リード文） */
.fv__bubble {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    color: var(--color-secondary);
    border: 2px solid var(--color-primary);
    padding: .7rem 1.4rem .7rem .7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: clamp(.95rem, 2vw, 1.1rem);
    margin: 0 0 1.25rem;
    box-shadow: 0 4px 14px rgba(26,188,188,.18);
    position: relative;
}
.fv__bubble::after {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 14px solid var(--color-primary);
}
.fv__bubble::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 11px solid #fff;
    z-index: 1;
}
.fv__bubble-avatar {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-darker);
    display: inline-flex; align-items: center; justify-content: center;
}
.fv__bubble-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fv__bubble-text { line-height: 1.4; }

/* メインタイトル */
.fv__title {
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    line-height: 1.45;
    margin: 0 0 1.25rem;
    color: var(--color-secondary);
    letter-spacing: .02em;
}
.fv__title-line {
    display: block;
    border-bottom: 2px solid var(--color-secondary);
    padding: 0 0 .15em;
    margin: 0 0 .15em;
}
.fv__title-line:last-child { border-bottom: 0; }
.fv__title em {
    color: var(--color-primary);
    font-style: normal;
    font-weight: 800;
}

/* 約束（無料相談） */
.fv__promise {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--color-secondary);
    font-weight: 700;
    margin: 0 0 1.25rem;
    letter-spacing: .03em;
}
.fv__promise strong { color: var(--color-primary); font-size: 1.15em; }
.fv__promise-slash { color: var(--color-text-mute); font-weight: 700; margin: 0 .25em; }

/* 金メダル風バッジ × 3 */
.fv__badges {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    justify-items: center;
}
.fv__badge {
    width: clamp(110px, 18vw, 150px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, #ffe9a8 0%, #e0b85a 35%, #b88527 70%, #7c5a17 100%);
    border: 4px solid #f6d36b;
    box-shadow:
        0 0 0 2px #b88527 inset,
        0 8px 18px rgba(0,0,0,.18);
    color: #1a2a4a;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    line-height: 1.2;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    position: relative;
}
.fv__badge::before {
    content: "★ ★ ★";
    position: absolute;
    top: 8%;
    left: 0; right: 0;
    font-size: .55rem;
    letter-spacing: .35em;
    color: rgba(26,42,74,.55);
}
.fv__badge-label {
    font-size: clamp(.75rem, 1.4vw, .9rem);
    margin-top: .9em;
}
.fv__badge-num {
    font-family: var(--font-en);
    font-size: clamp(1.25rem, 3vw, 1.9rem);
    line-height: 1;
    margin: .1em 0;
}
.fv__badge-num small { font-size: .55em; margin-left: .1em; }
.fv__badge-num--text {
    font-family: var(--font-base);
    font-size: clamp(.95rem, 1.8vw, 1.15rem);
    line-height: 1.15;
}
.fv__badge-suffix { font-size: clamp(.7rem, 1.3vw, .85rem); }

/* ボタン */
.fv__buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0;
}
.fv__btn {
    display: inline-block;
    padding: .9em 2rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    transition: transform .15s, box-shadow .15s;
    box-shadow: var(--shadow);
}
.fv__btn--primary {
    background: var(--color-primary);
    color: #fff;
}
.fv__btn--secondary {
    background: #fff;
    color: var(--color-secondary);
    border: 2px solid var(--color-primary);
}
.fv__btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); opacity: 1; }

/* イラスト枠（右側） */
.fv__visual {
    text-align: center;
}
.fv__visual img {
    max-width: 100%;
    max-height: 480px;
    width: auto;
    filter: drop-shadow(0 12px 24px rgba(44,62,111,.18));
}

@media (max-width: 900px) {
    .fv__inner { grid-template-columns: 1fr; }
    .fv__visual { order: -1; }
    .fv__visual img { max-height: 280px; }
}
@media (max-width: 600px) {
    .fv { padding: 2rem 1rem 3rem; }
    .fv__buttons { flex-direction: column; align-items: stretch; }
    .fv__btn { width: 100%; }
    .fv__badges { gap: .5rem; }
    .fv__badge { width: clamp(90px, 28vw, 120px); }
}

/* -------------------------------------------------------------------------
 *  4. お悩みセクション（イラスト＋雲型吹き出し＋導線矢印）
 * ------------------------------------------------------------------------- */
.worry {
    padding: 4.5rem 1rem 3.5rem;
    background: #fff;
    position: relative;
}
.worry__inner { max-width: var(--container); margin: 0 auto; }

/* 見出し（下向きシェブロン付き） */
.worry__heading {
    text-align: center;
    color: var(--color-secondary);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0 0 2.5rem;
    position: relative;
    padding-bottom: 1.25rem;
}
.worry__heading-arrow {
    display: block;
    width: 40px; height: 22px;
    margin: 1rem auto 0;
    background: var(--color-primary);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 2カラム：イラスト + 雲吹き出し群 */
.worry__layout {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 2rem;
    align-items: center;
    margin: 0 0 2rem;
}
.worry__layout--no-visual {
    grid-template-columns: 1fr;
    margin-left: auto;
    margin-right: auto;
}
.worry__visual { text-align: center; }
.worry__visual img {
    max-width: 100%;
    max-height: 280px;
    width: auto;
}

.worry__list {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
}

/* 雲型バブル（角の丸い円形 + 4つの円形バンプを疑似要素で重ねた簡易雲） */
.worry__bubble {
    background: #eef4f6;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-secondary);
    font-weight: 600;
    line-height: 1.55;
    padding: 1rem;
    position: relative;
    font-size: clamp(.85rem, 1.5vw, .95rem);
    box-shadow: 0 4px 10px rgba(44,62,111,.06);
}
.worry__bubble::before,
.worry__bubble::after {
    content: "";
    position: absolute;
    background: #eef4f6;
    border-radius: 50%;
}
.worry__bubble::before {
    width: 22%; height: 22%;
    top: 6%; left: 14%;
}
.worry__bubble::after {
    width: 18%; height: 18%;
    bottom: 8%; right: 12%;
}

/* 汗マーク（CSS で雫） */
.worry__sweat {
    position: absolute;
    top: -6px; right: 8%;
    width: 18px; height: 26px;
    background: #4ab8e6;
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    transform: rotate(-15deg);
    box-shadow:
        14px 6px 0 -3px #4ab8e6,
        -10px 4px 0 -4px #4ab8e6;
    z-index: 2;
}
.worry__sweat::after {
    content: "";
    position: absolute;
    top: 4px; left: 4px;
    width: 5px; height: 8px;
    background: rgba(255,255,255,.55);
    border-radius: 50%;
    transform: rotate(15deg);
}

/* 解決策へ導く下向き矢印（大） */
.worry__arrow {
    width: 60px; height: 36px;
    margin: 1.5rem auto 1.5rem;
    background: var(--color-primary);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 解決策見出し */
.worry__solution {
    text-align: center;
    font-weight: 700;
    color: var(--color-secondary);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    line-height: 1.6;
    margin: 0 0 1rem;
}
.worry__solution strong {
    color: var(--color-primary);
}
.worry__detail {
    text-align: center;
    color: var(--color-text);
    line-height: 1.9;
    margin: 0 auto 0;
    max-width: 760px;
}

@media (max-width: 767px) {
    .worry__layout { grid-template-columns: 1fr; }
    .worry__visual img { max-height: 200px; }
    .worry__list { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}
@media (max-width: 420px) {
    .worry__list { grid-template-columns: 1fr; }
    .worry__bubble { aspect-ratio: auto; padding: 1rem 1.25rem; }
}

/* -------------------------------------------------------------------------
 *  5. 選ばれる理由（巨大ウォーターマーク番号 + 横並び画像 + テキスト）
 * ------------------------------------------------------------------------- */
.reason {
    padding: 4.5rem 1rem 4rem;
    background: var(--color-bg-soft);
}
.reason__inner { max-width: var(--container); margin: 0 auto; }

.reason__heading {
    text-align: center;
    color: var(--color-primary-dark);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    margin: 0 0 3rem;
    letter-spacing: .03em;
    line-height: 1.55;
}
.reason__heading-brand { color: var(--color-secondary); }

.reason__item {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2.5rem;
    align-items: center;
    padding: 3.25rem 0 3rem;
    margin: 0 0 1rem;
}
.reason__item + .reason__item { border-top: 1px dashed var(--color-border); }

/* 巨大ウォーターマーク番号 */
.reason__num {
    position: absolute;
    top: 0;
    left: -.25rem;
    font-family: var(--font-en);
    font-size: clamp(5rem, 14vw, 11rem);
    font-weight: 800;
    line-height: 1;
    color: rgba(26,188,188,.18);
    letter-spacing: -.02em;
    pointer-events: none;
    z-index: 0;
}

.reason__body {
    position: relative;
    z-index: 1;
}
.reason__title {
    display: inline-block;
    background: var(--color-secondary);
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 700;
    padding: .55em 1.25em;
    border-radius: 6px;
    margin: 0 0 1rem;
    letter-spacing: .03em;
    line-height: 1.4;
}
.reason__lead {
    color: var(--color-secondary);
    font-weight: 600;
    line-height: 1.85;
    margin: 0 0 .75rem;
    font-size: 1rem;
}
.reason__lead br + * { display: none; } /* fallback safety */
.reason__text {
    color: var(--color-text);
    line-height: 1.9;
    margin: 0;
    font-size: .95rem;
}

.reason__visual {
    position: relative;
    z-index: 1;
    text-align: center;
}
.reason__visual img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(44,62,111,.15);
}

/* 偶数番（02）は左右反転して画像を左に */
.reason__item--reverse { grid-template-columns: 1fr 1.2fr; }
.reason__item--reverse .reason__num { left: auto; right: -.25rem; }
.reason__item--reverse .reason__body { order: 2; }
.reason__item--reverse .reason__visual { order: 1; }

@media (max-width: 767px) {
    .reason__item,
    .reason__item--reverse {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 2.5rem 0 2rem;
    }
    .reason__item--reverse .reason__body { order: 0; }
    .reason__item--reverse .reason__visual { order: 0; }
    .reason__num { font-size: 5rem; left: 0; }
    .reason__item--reverse .reason__num { left: 0; right: auto; }
}

/* -------------------------------------------------------------------------
 *  6. 補助金カード一覧
 * ------------------------------------------------------------------------- */
.hojokin-section {
    padding: 5rem 1rem 4rem;
    background: var(--color-bg-soft);
}
.hojokin-section__inner { max-width: var(--container); margin: 0 auto; }

.hojokin-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.hojokin-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.hojokin-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.hojokin-card__link {
    display: flex;
    flex-direction: column;
    color: inherit;
    height: 100%;
}
.hojokin-card__thumb {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-darker);
}
.hojokin-card__thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform .3s;
}
.hojokin-card:hover .hojokin-card__thumb img { transform: scale(1.05); }

.hojokin-card__amount-badge {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--color-warning);
    color: #fff;
    padding: .35em .9em;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.hojokin-card__body {
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.hojokin-card__title {
    color: var(--color-secondary);
    font-size: 1.1rem;
    margin: 0 0 .5rem;
    line-height: 1.5;
}
.hojokin-card__amount {
    color: var(--color-warning);
    font-weight: 700;
    margin: 0 0 .5rem;
    font-size: .95rem;
}
.hojokin-card__amount strong { font-size: 1.3em; }
.hojokin-card__excerpt {
    color: var(--color-text-light);
    font-size: .9rem;
    margin: 0 0 1rem;
    flex-grow: 1;
}
.hojokin-card__more {
    display: inline-block;
    color: #fff;
    background: var(--color-primary);
    padding: .5em 1.5em;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    text-align: center;
    align-self: flex-start;
}
.hojokin-card:hover .hojokin-card__more {
    background: var(--color-primary-dark);
}

@media (max-width: 900px) { .hojokin-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hojokin-list { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
 *  7. 採択実績テーブル（2カラム）
 * ------------------------------------------------------------------------- */
.results { padding: 5rem 1rem 4rem; }
.results__inner { max-width: var(--container); margin: 0 auto; }
.results__tables {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.results__table-wrap { overflow-x: auto; }
.results__table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    overflow: hidden;
}
.results__table th,
.results__table td {
    padding: .9rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.results__table thead th {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
}
.results__table tbody tr:nth-child(even) td {
    background: var(--color-bg-soft);
}
.results__table tr:last-child td { border-bottom: 0; }
.results__table td:nth-child(2) {
    color: var(--color-warning);
    font-weight: 700;
}
.results__note {
    color: var(--color-text-mute);
    font-size: .85rem;
    margin: 1.5rem 0 0;
    text-align: center;
}

@media (max-width: 767px) {
    .results__tables { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 *  8. ご相談の流れ（タイムライン風：番号バッジ + 縦コネクタ + カード）
 * ------------------------------------------------------------------------- */
.flow {
    padding: 4.5rem 1rem 4rem;
    background: #fff;
}
.flow__inner { max-width: 860px; margin: 0 auto; }

.flow__list {
    list-style: none;
    padding: 0; margin: 2.5rem 0 0;
    position: relative;
}
/* 縦コネクタ線（背面） */
.flow__list::before {
    content: "";
    position: absolute;
    top: 32px; bottom: 32px;
    left: 36px;
    width: 4px;
    background: linear-gradient(to bottom, var(--color-primary-light) 0%, var(--color-primary) 100%);
    border-radius: 2px;
    opacity: .5;
}

.flow__item {
    position: relative;
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 1.5rem;
    align-items: stretch;
    padding: 0 0 1.5rem;
}
.flow__item:last-child { padding-bottom: 0; }

/* 番号バッジ（左側、丸） */
.flow__step {
    grid-column: 1;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: var(--font-en);
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(26,188,188,.35);
    position: relative;
    z-index: 1;
    margin: 0;
    letter-spacing: 0;
    padding: 0;
}
.flow__step::before {
    content: "STEP";
    font-size: .55rem;
    letter-spacing: .15em;
    opacity: .9;
    margin-bottom: .15em;
}
.flow__step::after {
    content: attr(data-step);
    font-size: 1.5rem;
}

/* カード本体（右側） */
.flow__card {
    grid-column: 2;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: 1.1rem 1.4rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.flow__icon {
    font-size: 1.5rem;
    color: var(--color-primary-dark);
    line-height: 1;
    margin: 0;
}
.flow__item h3 {
    color: var(--color-secondary);
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.4;
}
.flow__item p {
    color: var(--color-text);
    font-size: .92rem;
    line-height: 1.75;
    margin: 0;
}

@media (max-width: 600px) {
    .flow__list::before { left: 24px; }
    .flow__item { grid-template-columns: 52px 1fr; gap: 1rem; }
    .flow__step { width: 52px; height: 52px; }
    .flow__step::after { font-size: 1.1rem; }
    .flow__step::before { font-size: .5rem; }
    .flow__card { padding: 1rem 1.1rem; }
}

/* -------------------------------------------------------------------------
 *  9. 料金（白カード + 上部ヘッダー帯 + 強調プライス）
 * ------------------------------------------------------------------------- */
.price {
    padding: 4.5rem 1rem 4rem;
    background: var(--color-bg-soft);
}
.price__inner { max-width: 900px; margin: 0 auto; }
.price__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.price__card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(44,62,111,.08);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s;
}
.price__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(44,62,111,.14);
}
.price__card h3 {
    margin: 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--color-secondary) 0%, #3a4f8a 100%);
    color: #fff;
    font-size: 1.15rem;
    text-align: center;
    letter-spacing: .04em;
}
.price__amount {
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0;
    padding: 1.5rem 1.25rem 1rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-align: center;
    flex: 1;
}
.price__note {
    font-size: .85rem;
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    color: var(--color-text-light);
    text-align: center;
    line-height: 1.7;
}

.price__highlight {
    background: #fff;
    border: 2px solid var(--color-accent);
    padding: 1.1rem 1.5rem;
    border-radius: 10px;
    text-align: center;
    color: var(--color-secondary);
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(243,156,18,.12);
}
.price__highlight strong {
    color: var(--color-warning);
    font-size: 1.1em;
    margin-right: .25em;
}

@media (max-width: 600px) { .price__cards { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
 *  10. お問い合わせ CTA（3色ボタン：default = 濃紺フル幅、inline = 明色角丸ボックス）
 * ------------------------------------------------------------------------- */
.contact-cta { position: relative; overflow: hidden; }
.contact-cta__inner { position: relative; z-index: 1; }

/* === default（濃紺グラデフル幅） === */
.contact-cta--default {
    background: linear-gradient(135deg, #1f3142 0%, #2c5468 50%, #1f3142 100%);
    color: #fff;
    padding: 4rem 1rem;
    text-align: center;
}
.contact-cta--default .contact-cta__heading {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 700;
    margin: 0 0 .65rem;
    letter-spacing: .04em;
    color: #fff;
}
.contact-cta--default .contact-cta__sub {
    color: rgba(255,255,255,.85);
    margin: 0 0 2rem;
    font-size: .95rem;
    letter-spacing: .03em;
}

/* === inline（明色角丸ボックス：本文中に挟む CTA） === */
.contact-cta--inline {
    padding: 0 1rem;
    margin: 1.5rem 0 0;
}
.contact-cta--inline .contact-cta__inner {
    max-width: 920px;
    margin: 0 auto;
    background: #d6ecf2;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1.5rem;
    box-shadow: 0 4px 14px rgba(44,62,111,.08);
}
.contact-cta--inline .contact-cta__heading {
    background: var(--color-secondary);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-size: clamp(1rem, 2vw, 1.15rem);
    padding: .65em 1em;
    margin: 0 0 .9rem;
    font-weight: 700;
    letter-spacing: .03em;
}

/* === 共通：見出し・ボタン群 === */
.contact-cta__heading {
    font-size: 1.6rem;
    margin: 0 0 1.75rem;
    position: relative;
    z-index: 1;
}
.contact-cta__buttons {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}
.contact-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    color: #fff;
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 320px;
    transition: transform .15s, box-shadow .15s, filter .15s;
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
    font-weight: 700;
    text-align: left;
    line-height: 1.3;
}
.contact-cta__btn:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.22); opacity: 1; filter: brightness(1.05); }
.contact-cta__btn--tel  { background: var(--color-cta-mail); }   /* 青 */
.contact-cta__btn--mail { background: #f08a3d; }                 /* オレンジ */
.contact-cta__btn--line { background: var(--color-cta-line); }  /* 緑 */
.contact-cta__btn-icon {
    flex: 0 0 auto;
    font-size: 1.4rem;
    width: 1.6em;
    text-align: center;
    line-height: 1;
}
.contact-cta__btn--line .contact-cta__btn-icon {
    font-size: .85rem;
    font-weight: 800;
    background: #fff;
    color: var(--color-cta-line);
    padding: .15em .45em;
    border-radius: 4px;
    width: auto;
}
.contact-cta__btn-body {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.contact-cta__btn-label { font-size: .75rem; opacity: .9; font-weight: 400; }
.contact-cta__btn-main  { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }
.contact-cta__btn-sub   { font-size: .75rem; opacity: .92; font-weight: 400; margin-top: .15em; }

/* default 版：白塗り / 白枠アウトライン / ゴールド の3種ボタン */
.contact-cta--default .contact-cta__buttons {
    gap: 1rem;
    max-width: 1000px;
}
.contact-cta--default .contact-cta__btn {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: .9em 1.75em;
    min-width: 240px;
    flex: 0 1 auto;
    text-align: center;
    border-radius: 6px;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    border: 1.5px solid transparent;
}
.contact-cta--default .contact-cta__btn-icon {
    font-size: 1.05em;
    width: auto;
}
.contact-cta--default .contact-cta__btn-body {
    flex-direction: row;
    align-items: baseline;
    gap: .5em;
}
.contact-cta--default .contact-cta__btn-main {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
}
/* default 版ではサブテキスト（平日 9:00〜 など）は非表示にしてスッキリさせる */
.contact-cta--default .contact-cta__btn-sub { display: none; }

/* TEL：白塗り + 濃紺テキスト */
.contact-cta--default .contact-cta__btn--tel {
    background: #fff;
    color: var(--color-secondary);
}

/* MAIL：透明背景 + 白枠 + 白テキスト */
.contact-cta--default .contact-cta__btn--mail {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.65);
    box-shadow: none;
}
.contact-cta--default .contact-cta__btn--mail:hover {
    background: rgba(255,255,255,.08);
}

/* LINE：ゴールド塗り + 白テキスト（アイコンの白角ラベルは default では非表示） */
.contact-cta--default .contact-cta__btn--line {
    background: #d4a45a;
    color: #fff;
}
.contact-cta--default .contact-cta__btn--line:hover {
    background: #c79447;
}
.contact-cta--default .contact-cta__btn--line .contact-cta__btn-icon {
    display: none;
}

@media (max-width: 700px) {
    .contact-cta__buttons { flex-direction: column; align-items: stretch; }
    .contact-cta__btn { max-width: none; }
}

/* -------------------------------------------------------------------------
 *  11. 最新ブログ（カードグリッド + 日付バッジ + 矢印 more ボタン）
 * ------------------------------------------------------------------------- */
.latest-blog {
    padding: 4.5rem 1rem 4rem;
    background: #fff;
}
.latest-blog__inner { max-width: var(--container); margin: 0 auto; }
.latest-blog__list {
    list-style: none;
    padding: 0; margin: 2.5rem 0 2.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.latest-blog__item a {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    color: inherit;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    height: 100%;
}
.latest-blog__item a:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(44,62,111,.12);
    border-color: var(--color-primary);
    opacity: 1;
}
.latest-blog__thumb {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-darker);
}
.latest-blog__thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform .3s;
}
.latest-blog__item a:hover .latest-blog__thumb img { transform: scale(1.05); }

.latest-blog__date {
    margin: 0;
    padding: .9rem 1rem 0;
    color: var(--color-primary-dark);
    font-family: var(--font-en);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.latest-blog__date::before {
    content: "";
    width: 16px;
    height: 2px;
    background: var(--color-primary);
}
.latest-blog__title {
    margin: .35rem 0 0;
    padding: 0 1rem 1.25rem;
    font-size: 1rem;
    color: var(--color-secondary);
    line-height: 1.55;
    font-weight: 700;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-blog__more { text-align: center; margin: 0; }
.latest-blog__more a {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: var(--color-secondary);
    background: #fff;
    border: 2px solid var(--color-secondary);
    padding: .75em 2.25em;
    border-radius: 999px;
    font-weight: 700;
    transition: background .15s, color .15s;
}
.latest-blog__more a::after {
    content: "→";
    transition: transform .15s;
}
.latest-blog__more a:hover {
    background: var(--color-secondary);
    color: #fff;
    opacity: 1;
}
.latest-blog__more a:hover::after { transform: translateX(3px); }

@media (max-width: 900px) { .latest-blog__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .latest-blog__list { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
 *  12. ページヘッダー
 *  ・既定：明るい背景 + 濃紺タイトル + ターコイズ下線（クリーンなページ見出し）
 *  ・アイキャッチ画像が設定されている時のみ：写真背景 + 濃紺グラデオーバーレイ + 白タイトル
 * ------------------------------------------------------------------------- */
.page-header {
    position: relative;
    background:
        linear-gradient(180deg, #f4fafb 0%, var(--color-bg-soft) 100%);
    color: var(--color-secondary);
    padding: 3.5rem 1rem 3rem;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    background-size: cover;
    background-position: center;
}
.page-header::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-primary);
    margin: 1.1rem auto 0;
    border-radius: 2px;
    position: relative;
    z-index: 2;
}
.page-header__inner {
    max-width: var(--container);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.page-header__title {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    margin: 0;
    color: var(--color-secondary);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
    text-shadow: none;
}
.page-header__breadcrumb {
    font-size: .85rem;
    margin: 0 0 .65rem;
    color: var(--color-text-light);
}
.page-header__breadcrumb a {
    color: var(--color-primary-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}
.page-header__breadcrumb a:hover { border-bottom-color: var(--color-primary-dark); }
.page-header__meta {
    font-size: .85rem;
    margin: .5rem 0 0;
    color: var(--color-text-light);
}

/* アイキャッチが設定されているときだけ：写真背景 + 濃い暗色オーバーレイ + 白タイトル */
.page-header.page-header--has-thumb {
    background-color: var(--color-secondary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    border-bottom: 0;
    padding: 4.5rem 1rem 4rem;
}
.page-header.page-header--has-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%),
        linear-gradient(135deg, rgba(44,62,111,.7) 0%, rgba(14,138,138,.55) 100%);
    pointer-events: none;
    z-index: 1;
}
/* タイトル：濃紺の半透明バッジ + 白文字 + 影 で写真の上でも確実に読める */
.page-header.page-header--has-thumb .page-header__title,
.page-header.page-header--has-thumb h1.page-header__title {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.55), 0 0 4px rgba(0,0,0,.35);
    background: rgba(31, 49, 66, .35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: inline-block;
    padding: .55em 1.25em;
    border-radius: 8px;
    line-height: 1.4;
    border: 1px solid rgba(255,255,255,.18);
}
.page-header.page-header--has-thumb .page-header__breadcrumb,
.page-header.page-header--has-thumb .page-header__meta {
    color: rgba(255,255,255,.95);
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.page-header.page-header--has-thumb .page-header__breadcrumb a {
    color: #fff;
    text-decoration: underline;
}
.page-header.page-header--has-thumb::after {
    background: rgba(255,255,255,.85);
}

/* -------------------------------------------------------------------------
 *  13. 補助金詳細ページ
 * ------------------------------------------------------------------------- */
.hojokin-detail { padding: 3rem 1rem; }
.hojokin-detail__inner { max-width: var(--container); margin: 0 auto; }

.hojokin-detail__summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    background: var(--color-bg-soft);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 0 0 2rem;
}
.hojokin-detail__summary-item { text-align: center; }
.hojokin-detail__summary-item .label {
    color: var(--color-text-light);
    font-size: .85rem;
    margin: 0;
}
.hojokin-detail__summary-item .value {
    color: var(--color-secondary);
    font-weight: 700;
    font-size: 1.2rem;
    margin: .25em 0 0;
}
.hojokin-detail__content { line-height: 1.85; margin: 0 0 3rem; }
.hojokin-detail__content h2 {
    border-left: 6px solid var(--color-primary);
    padding-left: .9rem;
    color: var(--color-secondary);
    margin-top: 2.5rem;
    background: var(--color-bg-soft);
    padding-top: .5em;
    padding-bottom: .5em;
    border-radius: 0 6px 6px 0;
}
.hojokin-detail__content h3 {
    color: var(--color-primary-dark);
    margin-top: 2rem;
    border-bottom: 2px dashed var(--color-primary-light);
    padding-bottom: .25em;
}
.hojokin-detail__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}
.hojokin-detail__content th,
.hojokin-detail__content td {
    border: 1px solid var(--color-border);
    padding: .65rem 1rem;
}
.hojokin-detail__content th { background: var(--color-bg-soft); }

.hojokin-detail__related { margin-top: 4rem; }

@media (max-width: 600px) {
    .hojokin-detail__summary { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 *  14. アーカイブ・固定ページ・404
 * ------------------------------------------------------------------------- */
.page-content,
.archive-list,
.single-post,
.not-found { padding: 3rem 1rem; }
.page-content__inner,
.archive-list__inner,
.single-post__inner,
.not-found__inner { max-width: 800px; margin: 0 auto; line-height: 1.85; }

.archive-list__items { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.archive-list__item a {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.archive-list__item a:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    opacity: 1;
}
.archive-list__thumb { flex: 0 0 140px; }
.archive-list__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; }
.archive-list__date { font-size: .85rem; color: var(--color-primary-dark); margin: 0; font-weight: 600; }
.archive-list__title { color: var(--color-secondary); margin: .25em 0 .5em; font-size: 1.05rem; }
.archive-list__excerpt { color: var(--color-text-light); font-size: .9rem; margin: 0; }
.archive-list__pagination { margin-top: 2rem; text-align: center; }

@media (max-width: 600px) {
    .archive-list__item a { flex-direction: column; }
    .archive-list__thumb { flex: 1; }
}

.not-found__lead { text-align: center; color: var(--color-text-light); }
.not-found__action { text-align: center; margin: 2rem 0 0; }
.btn {
    display: inline-block;
    padding: .9em 2em;
    border-radius: 999px;
    font-weight: 700;
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); opacity: 1; }

/* -------------------------------------------------------------------------
 *  15. フッター（4カラム：事務所情報 / サービス / 情報 / アクション+SNS）
 * ------------------------------------------------------------------------- */
.site-footer {
    background: #1f3142;
    color: #cdd5dc;
}
.site-footer__cta { padding: 0; }

.site-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 3.5rem 1.5rem 3rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2.5rem;
    align-items: flex-start;
}

/* === 1. 事務所情報カラム === */
.site-footer__about { color: #cdd5dc; }
.site-footer__logo {
    margin: 0 0 1.25rem;
}
.site-footer__logo a {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .03em;
}
.site-footer__about-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    font-size: .9rem;
    line-height: 1.6;
    color: #cdd5dc;
}
.site-footer__about-list a { color: #cdd5dc; }
.site-footer__about-list a:hover { color: var(--color-primary-light); opacity: 1; }

/* === 2-4. メニューカラム共通 === */
.site-footer__col {
    color: #cdd5dc;
    position: relative;
    padding-top: 1.25rem;
}
.site-footer__col::before {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    background: var(--color-primary);
    margin-bottom: 1.5rem;
    position: absolute;
    top: 0; left: 0;
}
.site-footer__nav-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    font-size: .9rem;
}
.site-footer__nav-list a {
    color: #cdd5dc;
    transition: color .15s;
}
.site-footer__nav-list a:hover {
    color: var(--color-primary-light);
    opacity: 1;
}

/* === 4. アクション + SNS === */
.site-footer__col--actions { display: flex; flex-direction: column; gap: 1.25rem; }
.site-footer__sns {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}
.site-footer__sns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 0;
    transition: background .15s, transform .15s;
}
.site-footer__sns a:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
    opacity: 1;
}

/* === コピーライト === */
.site-footer__copyright {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 1.25rem 1rem;
    text-align: center;
    color: #8aa0b3;
    font-size: .8rem;
    letter-spacing: .03em;
}

@media (max-width: 900px) {
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}
@media (max-width: 600px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.25rem 2rem;
    }
    .site-footer__col { padding-top: 1rem; }
    .site-footer__col::before { margin-bottom: 1rem; }
}

/* -------------------------------------------------------------------------
 *  16. 固定 FAB（モバイル下部の追従バー：サイトカラーに合わせた塗りボタン）
 * ------------------------------------------------------------------------- */
.floating-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: none;
    background: #fff;
    box-shadow: 0 -6px 18px rgba(0,0,0,.12);
    z-index: 90;
    padding: .35rem;
    gap: .35rem;
}
.floating-cta__btn {
    flex: 1;
    text-align: center;
    padding: .8rem .25rem;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .08em;
    border-radius: 8px;
    transition: transform .15s, filter .15s, box-shadow .15s;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    line-height: 1.3;
}
.floating-cta__btn:hover,
.floating-cta__btn:active {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 6px 14px rgba(0,0,0,.22);
    opacity: 1;
}

/* 電話：プライマリカラー（ターコイズ） */
.floating-cta__btn--tel  { background: var(--color-primary); }

/* メール：濃紺（セカンダリ） */
.floating-cta__btn--mail { background: var(--color-secondary); }

/* LINE：ブランドカラー */
.floating-cta__btn--line { background: var(--color-cta-line); }

@media (max-width: 767px) {
    .floating-cta { display: flex; }
    body { padding-bottom: 64px; }
}

/* -------------------------------------------------------------------------
 *  17. Google 口コミ
 * ------------------------------------------------------------------------- */
.google-reviews {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
}
.google-reviews__heading { color: var(--color-secondary); margin: 0 0 .5rem; }
.google-reviews__rating { font-size: 1.1rem; color: var(--color-accent); margin: 0 0 1rem; font-weight: 700; }
.google-reviews__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.google-reviews__item {
    background: var(--color-bg-soft);
    border-radius: var(--radius);
    padding: 1rem;
}
.google-reviews__author { font-weight: 700; margin: 0; color: var(--color-secondary); }
.google-reviews__stars  { color: var(--color-accent); margin: .25em 0; }
.google-reviews__text   { margin: 0; color: var(--color-text-light); font-size: .9rem; }

/* -------------------------------------------------------------------------
 *  18. お問い合わせフォーム
 * ------------------------------------------------------------------------- */
.contact-form {
    background: var(--color-bg-soft);
    padding: 4.5rem 1rem 5rem;
}
.contact-form__inner {
    max-width: 880px;
    margin: 0 auto;
}
.contact-form__eyebrow {
    text-align: center;
    color: var(--color-primary-dark);
    font-family: var(--font-en);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .35em;
    margin: 0 0 .5rem;
    padding-left: .35em; /* offset for letter-spacing visual centering */
}
.contact-form__heading {
    text-align: center;
    color: var(--color-secondary);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 2.5rem;
    padding-bottom: .9rem;
    position: relative;
    letter-spacing: .04em;
}
.contact-form__heading::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-primary);
    margin: .9rem auto 0;
    border-radius: 2px;
}

/* 通知 */
.contact-form__notice {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
    font-size: .95rem;
    font-weight: 600;
    text-align: center;
}
.contact-form__notice--success {
    background: #e6f8ef;
    color: #0e7a47;
    border: 1px solid #a8e0c4;
}
.contact-form__notice--error {
    background: #fdecea;
    color: #c0392b;
    border: 1px solid #f5b7b1;
}

/* 白カード */
.contact-form__card {
    background: #fff;
    border-radius: 14px;
    padding: 2rem 2rem 2.25rem;
    box-shadow: 0 8px 24px rgba(44,62,111,.08);
    border: 1px solid var(--color-border);
}

/* 行（PCで2列） */
.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.75rem;
    margin: 0 0 1.25rem;
}

/* フィールド */
.contact-form__field {
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.contact-form__row .contact-form__field { margin: 0; }

.contact-form__field label {
    color: var(--color-secondary);
    font-weight: 700;
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    letter-spacing: .03em;
}
.contact-form__required {
    display: inline-block;
    background: #e8744d;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .15em .55em;
    border-radius: 3px;
    letter-spacing: .05em;
    line-height: 1.4;
}

/* インプット類 */
.contact-form__field input[type="text"],
.contact-form__field input[type="tel"],
.contact-form__field input[type="email"],
.contact-form__field select,
.contact-form__field textarea {
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: .75rem .9rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-text);
    line-height: 1.5;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.contact-form__field textarea {
    resize: vertical;
    min-height: 160px;
    line-height: 1.7;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26,188,188,.15);
}
.contact-form__field select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-secondary) 50%),
        linear-gradient(135deg, var(--color-secondary) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* ハニーポット（視覚的に隠す） */
.contact-form__honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* 送信ボタン */
.contact-form__submit {
    text-align: center;
    margin: 2rem 0 0;
}
.contact-form__submit button {
    background: var(--color-primary-dark);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 1em 4em;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: .1em;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 4px 12px rgba(14,138,138,.25);
}
.contact-form__submit button:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(26,188,188,.3);
}
.contact-form__submit button:active {
    transform: translateY(0);
}

@media (max-width: 700px) {
    .contact-form { padding: 3rem 1rem 4rem; }
    .contact-form__card { padding: 1.5rem 1.25rem 1.75rem; }
    .contact-form__row { grid-template-columns: 1fr; gap: 0; margin: 0; }
    .contact-form__row .contact-form__field { margin: 0 0 1.25rem; }
    .contact-form__submit button { padding: .9em 3em; width: 100%; max-width: 320px; }
}

/* -------------------------------------------------------------------------
 *  19. アンカーオフセット（sticky ヘッダー考慮）
 * ------------------------------------------------------------------------- */
[id] { scroll-margin-top: 80px; }