@charset "UTF-8";

/* ==========================================================================
   Variables & Reset
   ========================================================================== */
:root {
    /* メインカラー：赤に近いオレンジ */
    --color-primary: #FF4500; 
    --color-primary-dark: #cc3700;
    --color-primary-light: #FFF0ED;
    
    /* LINEカラー */
    --color-line: #06C755;
    --color-line-dark: #049c42;

    /* アクセントカラー */
    --color-accent: #FFD700;
    /* ベースカラー */
    --color-text: #333333;
    --color-bg-base: #FFFFFF;
    --color-bg-light: #F4F8EC; 
    --color-gray: #dddddd;
    
    /* フォント：Noto Sans JP */
    --font-base: 'Noto Sans JP', sans-serif;

    /* FV（lp-wrapper 幅500px基準。サイズ調整は cqw か下記コメントの px を参照） */
    --fv-photo-ratio: 500 / 580;
    --fv-dots-ratio: 170 / 520;

    /* 悩みセクション：グラデーション＆下部▼と同色でつなぐ */
    --trouble-bg-top: #263246;
    --trouble-bg-mid: #33465e;
    --trouble-bg-bottom: #3d516a;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    background-color: #f5f3f1;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   Layout 
   ========================================================================== */
.lp-wrapper {
    max-width: 500px;
    margin: 0 auto;
    background-color: var(--color-bg-base);
    position: relative;
    overflow-x: hidden;
    container-type: inline-size;
    container-name: lp;
}

.container {
    padding: 0 20px;
}

section {
    padding: 50px 0;
}

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

.pb-extra {
    padding-bottom: 80px;
}

/* ==========================================================================
   Typography & Utilities
   ========================================================================== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   スクロール表示（試用）
   対象要素に class="reveal-on-scroll" を付与 → 画面に入ったら JS が .is-revealed を付与
   ========================================================================== */
.reveal-on-scroll {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.text-primary { color: var(--color-primary); }
.text-line { color: var(--color-line); }
.text-line-dark { color: var(--color-line-dark); }
.font-bold { font-weight: 700; }

/* スマホ時のみ改行（viewport 500px以下） */
.br-sp {
    display: none;
}

@media (max-width: 500px) {
    .br-sp {
        display: block;
    }
}

.section-title {
    text-align: center;
    font-size: clamp(26px, 6.5vw, 30px);
    font-weight: 900;
    margin-bottom: 40px;
    line-height: 1.4;
}

.image-placeholder img {
    border-radius: 10px;
    width: 100%;
}

.highlight {
    background: linear-gradient(transparent 60%, var(--color-accent) 60%);
    font-weight: 700;
}

.section-eyebrow {
    display: block;
    width: fit-content;
    margin: 0 auto 12px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #fff;
    background: var(--color-primary);
    border-radius: 999px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-gray);
    display: flex;
    align-items: center;
}

@media (max-width: 500px) {
    .header {
        padding: 10px 20px;
    }
}

.header-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.25;
    text-decoration: none;
    color: inherit;
}

.header-logo-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
}

.header-logo-tagline {
    font-size: clamp(10px, 2.9vw, 11px);
    font-weight: 500;
    color: #888;
    letter-spacing: 0.02em;
    line-height: 1.35;
    max-width: 100%;
}

/* ==========================================================================
   1. ファーストビュー (FV)
   ========================================================================== */

/* --- 全体ラッパー --- */
.fv {
    position: relative;
    overflow: hidden;
    /* 写真エリア下の隙間がオレンジに見えるようバーと色を合わせる */
    background: var(--color-primary);
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

/* --- 背景写真 --- */
.fv-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    aspect-ratio: var(--fv-photo-ratio);
    height: auto;
    /* background-image: url("../img/fv-bg2.jpg");
    background-position: 72% 12%; */
    background-image: url("../img/fv-oshiro.jpg");
    background-position: 0 12%;
    background-size: cover;
    z-index: 0;
}

/* --- 白グラデオーバーレイ --- */
/* .fv-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 520px;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.97) 0%,
        rgba(255,255,255,0.88) 25%,
        rgba(255,255,255,0.40) 52%,
        rgba(255,255,255,0.22) 68%,
        rgba(255,255,255,0.50) 100%
    );
} */

/* --- 左上ドット装飾 --- */
.fv-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 34%;
    aspect-ratio: var(--fv-dots-ratio);
    height: auto;
    z-index: 2;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,69,0,0.22) 1.5px, transparent 1.5px);
    background-size: 13px 13px;
    mask-image: radial-gradient(ellipse 90% 90% at 0 0, #000 40%, transparent 75%);
}

/* --- 写真エリア（縦書き＋右コンテンツ） --- */
.fv-photo-area {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    width: 100%;
    aspect-ratio: var(--fv-photo-ratio);
    height: auto;
    overflow: visible;
}

/* --- 左：縦書きエリア --- */
.fv-left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 20px 16px;
    height: 100%;
}

/* 縦書き見出し */
.fv-vtitle {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin: 0;
    font-weight: 700;
    line-height: 1.25; /* 改行の窮屈さを緩和するため行間を少し広げる */
    letter-spacing: 0.1em;
    flex: 1;
    -webkit-text-stroke: 4px #fff;
    paint-order: stroke fill;
    transform: translateY(-16px);
}

.fv-vtitle__l {
    display: block;
    font-size: clamp(2rem, 11vw, 4rem); /* 文字サイズを少し小さくして改行の連続を緩和 */
    color: #0f172a;
}

.fv-vtitle__l--orange {
    color: var(--color-primary);
}

/* --- 右：サブコピー --- */
.fv-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 14px 70px 0; /* 下部の丸バッジとの被りを防ぐために余白を増やす */
    height: 100%;
}

/* サブコピーボックス */
.fv-subcopy {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 14px 18px; /* ボックスを少し広げる */
    box-shadow: 0 8px 22px rgba(0,0,0,0.09);
    max-width: 220px; /* 横長になりすぎないように制限 */
}

.fv-subcopy p {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: #0f172a;
}

.fv-subcopy p:last-child { margin-bottom: 0; }

.fv-subcopy strong {
    color: var(--color-primary);
    font-size: 1.08em;
}

/* ==========================================================================
   下部オレンジバー（バッジ＋CTA）
   ========================================================================== */
.fv-bar {
    position: relative;
    z-index: 4;
    padding-top: 12.8cqw; /* 64px @ 500px */
    background: linear-gradient(
        180deg,
        var(--color-primary) 0%,
        var(--color-primary-dark) 100%
    );
}

/* --- 丸バッジ（バーの上辺に重なる） --- */
.fv-badges {
    position: absolute;
    bottom: 19cqw; /* 100px @ 500px */
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    gap: 2.5%;
    list-style: none;
    margin: 0;
    padding: 0 4cqw; /* 20px @ 500px */
    z-index: 5;
}

.fv-badge {
    flex: 1;
    max-width: 29.6cqw; /* 148px @ 500px */
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 50%;
    background: #fff;
    outline: 1px solid rgba(255,255,255,0.85);
    outline-offset: 2px;
    box-shadow: 0 1.2cqw 3.6cqw rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6cqw;
    padding: 2.8cqw 2.4cqw;
    text-align: center;
}

.fv-badge-icon {
    display: flex;
    align-items: center;
    color: var(--color-primary);
    margin-bottom: 1px;
}

.fv-badge-icon svg {
    width: 4cqw;
    height: 4cqw;
}

.fv-badge-body {
    font-size: clamp(9px, 2.2cqw, 11px);
    font-weight: 700;
    line-height: 1.4;
    color: #333;
}

.fv-badge-num {
    font-size: 22px;
    color: var(--color-primary);
    font-style: normal;
}

.fv-badge-tag {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    margin-bottom: 3px;
    white-space: nowrap;
}

.fv-badge-lg {
    font-size: clamp(14px, 3.6cqw, 18px);
    color: var(--color-primary);
    font-style: normal;
}

.fv-badge-sub {
    display: inline-block;
    margin-top: 1cqw;
    font-size: clamp(10px, 2.4cqw, 12px);
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

/* --- CTA エリア --- */
.fv-cta {
    padding: 0 4cqw 4.8cqw;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.fv-cta-note {
    display: inline-block;
    margin: 0 0 -1.6cqw;
    padding: 0.8cqw 4cqw;
    border-radius: 999px;
    background: #fff;
    color: var(--color-line-dark); /* 吹き出しの文字も緑系に */
    font-size: clamp(10px, 2.4cqw, 12px);
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    position: relative;
    z-index: 2;
}

.fv-cta-note span { color: var(--color-line); }

/* FVボタンの黄緑化・アイコン付きデザイン */
.fv-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 12.4cqw;
    padding: 1.6cqw 4.8cqw;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(180deg, #35D776 0%, var(--color-line) 100%);
    box-shadow: 0 1.4cqw 0 var(--color-line-dark), 0 2.8cqw 5.6cqw rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    transition: transform 0.12s, box-shadow 0.12s;
}

.fv-cta-btn:hover,
.fv-cta-btn:active {
    transform: translateY(6px);
    box-shadow: 0 1px 0 var(--color-line-dark), 0 4px 8px rgba(0,0,0,0.15);
}

.fv-cta-icon-box {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fv-cta-icon-box svg {
    width: 28px;
    height: 28px;
}

.fv-cta-text {
    width: 100%;
    font-size: clamp(15px, 3.5cqw, 18px);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
}

.fv-cta-arrow {
    position: absolute;
    right: 1.6cqw;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.fv-cta-arrow svg { width: 4cqw; height: 4cqw; }

/* 完全無料テキスト */
.fv-free {
    margin: 3.2cqw 0 0;
    display: inline-flex;
    align-items: center;
    gap: 1.2cqw;
    font-size: clamp(12px, 3cqw, 15px);
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    letter-spacing: 0.06em;
}

.fv-free svg { width: 4cqw; height: 4cqw; }

/* --- スマホのみ：FV微調整（PCは lp-wrapper 幅500pxでも viewport>500 なら未適用） --- */
@media (max-width: 500px) {
    .fv-bg {
        background-position: 12% 4%;
    }

    .fv-bar {
        margin-top: -8.6cqw;  /* 写真との隙間を詰める（-28px @ 500px） */
        padding-top: 11.2cqw; /* 56px @ 500px */
    }

    .fv-badges {
        bottom: 19.6cqw; /* 108px @ 500px */
    }

    .fv-cta-btn {
        box-shadow: 0 1.1cqw 0 var(--color-line-dark), 0 2cqw 4.2cqw rgba(0, 0, 0, 0.14);
    }

    .fv-cta-btn:hover,
    .fv-cta-btn:active {
        box-shadow: 0 1px 0 var(--color-line-dark), 0 3px 6px rgba(0, 0, 0, 0.12);
    }
}

/* --- レスポンシブ補正（極小端末） --- */
@media (max-width: 360px) {
    .fv-vtitle__l { font-size: 1.5rem; }
    .fv-vtitle { transform: translateY(-12px); }
    .fv-right { padding-bottom: 60px; }
    .fv-badge-body { font-size: 9.5px; }
    .fv-badge-num { font-size: 17px; }
}

/* ==========================================================================
   エジェガチャとは？（FV直下）
   ========================================================================== */
.eje-what {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-base);
    padding-bottom: 40px;
}

.eje-what-dots {
    position: absolute;
    pointer-events: none;
    width: 42%;
    height: 38%;
    background-image: radial-gradient(rgba(255, 69, 0, 0.16) 1.4px, transparent 1.4px);
    background-size: 14px 14px;
}

.eje-what-dots--tl {
    top: 0;
    left: 0;
    mask-image: radial-gradient(ellipse 90% 90% at 0 0, #000 35%, transparent 72%);
}

.eje-what-dots--br {
    bottom: 0;
    right: 0;
    mask-image: radial-gradient(ellipse 90% 90% at 100% 100%, #000 35%, transparent 72%);
}

.eje-what-title {
    text-align: center;
    font-size: clamp(1.9rem, 1.1rem + 4.2vw, 2.55rem);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
    color: #111;
}

.eje-what-title-towa {
    font-size: 0.86em;
    font-weight: 700;
    letter-spacing: 0;
}

.eje-what-qmark {
    display: inline-block;
    margin-left: 2px;
    font-size: 1.35em;
    line-height: 1;
    color: var(--color-primary);
    font-weight: 700;
}

.eje-what-bubble-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 10px;
    max-width: 100%;
    padding-bottom: 0;
}

/* 上段ボックスの下に続く下段ボックス */
.eje-what-bubble-stack--after-efd {
    margin-top: 26px;
}

/* 「エジェガチャとは？」内の本文＋図解ボックス（吹き出ししっぽなし） */
.eje-what-bubble {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding: 22px 20px;
    background: var(--color-primary-light);
    border: 2px solid rgba(255, 69, 0, 0.22);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(255, 69, 0, 0.07);
    z-index: 1;
}

/* 問題提起ブロック：グレー系＋図解を内包 */
.eje-what-bubble--gray {
    background: #e8ecf1;
    border: 2px solid #bcc4d4;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}

.eje-what-bubble--gray .eje-what-body {
    color: #475569;

}

.eje-what-bubble--gray .eje-what-body strong {
    color: #1e293b;
    font-weight: 800;
}

.eje-what-bubble-efd {
    margin-top: 16px;
}

.eje-what-bubble--gray .efd-diagram--others {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 0 0;
}

/* オレンジボックス内の図解も枠なし（大枠のみ） */
.eje-what-bubble-efd .efd-diagram--after {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 0 0;
}

/* エジェガチャ図解：アイコン丸の背景を白（枠で区切り） */
.eje-what-bubble-efd .efd-diagram--after .efd-icon {
    background: #fff;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

.eje-what-bubble-efd .efd-diagram--after .efd-icon.bg-gray {
    color: #64748b;
}

.eje-what-bubble-efd .efd-diagram--after .efd-icon.bg-orange {
    border-color: rgba(255, 69, 0, 0.35);
    color: var(--color-primary);
}

.eje-what-puzzled {
    position: relative;
    z-index: 2;
    width: clamp(104px, 36vw, 132px);
    height: auto;
    margin-top: 22px;
    opacity: 0.95;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.08));
}

.eje-what-puzzled-img {
    display: block;
    width: 100%;
    height: auto;
}

.eje-what-lead {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

.eje-what-body {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.75;
    color: #333;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
}

.eje-what-body:last-child {
    margin-bottom: 0;
}

.eje-what-highlight {
    font-weight: 700;
    background: linear-gradient(transparent 58%, rgba(255, 215, 0, 0.55) 58%, rgba(255, 215, 0, 0.55) 95%, transparent 95%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}



/* ==========================================================================
   スケジュール比較セクション
   ========================================================================== */
.schedule-compare {
    position: relative;
    overflow: hidden;
    /* 上の白セクションと切り替わりが分かるよう、爽やかな淡いブルー〜ミント系 */
    background:
        radial-gradient(ellipse 95% 55% at 50% 0%, rgba(255, 255, 255, 0.75) 0%, transparent 62%),
        linear-gradient(168deg, #e8f4fb 0%, #f0faf6 42%, #f6faf3 100%);
}

.schedule-compare .section-title,
.schedule-compare__title {
    text-align: center;
    margin-bottom: 32px;
    line-height: 1.32;
    letter-spacing: -0.02em;
}

.schedule-compare .sc-title-line1 {
    display: inline-block;
    font-size: clamp(1.28rem, 0.72rem + 2.6vw, 1.58rem);
    font-weight: 700;
    color: #111;
}

.schedule-compare .sc-title-line2 {
    display: inline-block;
    margin-top: 6px;
    font-size: clamp(1.85rem, 1rem + 4.2vw, 2.52rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.sc-lead {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 35px;
    color: #444;
}

.sc-board {
    display: flex;
    gap: 12px;
    position: relative;
    max-width: 460px;
    margin: 0 auto;
}

/* 左右のカラム */
.sc-col {
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sc-col--normal {
    flex: 0.95; /* 左側を少し細く */
    background: #f4f5f7;
    border: 1px solid #d1d5db;
}

.sc-col--eje {
    flex: 1.05; /* 右側（エジェガチャ）を少し広くして強調 */
    background: #fff;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 15px rgba(255, 69, 0, 0.15);
}

/* カラムヘッダー */
.sc-col-header {
    padding: 10px 5px;
    text-align: center;
}

.sc-col-header p {
    font-weight: 700;
    font-size: 14px;
    margin: 0;
}

.sc-col--normal .sc-col-header {
    background: #e5e7eb;
    color: #4b5563;
}

.sc-col--eje .sc-col-header {
    background: var(--color-primary);
    color: #fff;
}

/* フロー全体 */
.sc-flow {
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

/* スタートバッジ */
.sc-flow-start {
    background: #94a3b8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 15px;
}

.sc-flow-start--eje {
    background: var(--color-accent);
    color: #333;
}

/* 各ステップボックス */
.sc-step {
    background: #fff;
    border-radius: 8px;
    padding: 10px 5px;
    width: 100%;
    text-align: center;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.sc-step--eje {
    border: 2px solid var(--color-primary-light);
    box-shadow: 0 4px 8px rgba(255,69,0,0.08);
}

.sc-step .sc-icon {
    display: flex;
    justify-content: center;
    color: #64748b;
    margin-bottom: 4px;
}

.sc-step .sc-icon svg { width: 22px; height: 22px; }

.sc-step--eje .sc-icon { color: var(--color-primary); }
.sc-step--eje .sc-icon svg { width: 28px; height: 28px; }

.sc-step p {
    font-size: 11px;
    font-weight: 700;
    color: #334155;
    margin: 0;
    line-height: 1.4;
}

.sc-arrow {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.sc-arrow svg { width: 16px; height: 16px; }

/* 圧倒的時短：矢印に重ねる。白背景は使わず白縁（stroke）で視認性を確保 */
.sc-arrow-skip {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    min-height: 180px;
}

/* スマホ：緑矢印の長さ（min-height では伸びない → 線に height を直接指定） */
@media (max-width: 500px) {
    .sc-arrow-skip {
        flex: 0 0 auto;
        min-height: 0;
    }

    .sc-arrow-skip-body {
        flex: 0 0 auto;
    }

    /* ★ 矢印の長さはこの height を変更（例: 120px / 150px） */
    .sc-arrow-skip--impact .sc-arrow-skip-line {
        flex: none;
        height: 130px;
        min-height: 130px;
    }
}

.sc-arrow-skip-body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
}

.sc-arrow-skip--impact .sc-arrow-skip-line {
    flex: 1 1 0;
    width: 11px;
    min-height: 235px;
    background: linear-gradient(
        to bottom,
        #86efac 0%,
        #4ade80 28%,
        #22c55e 58%,
        #15803d 100%
    );
    /* 下端は角丸にしない（▼と隙間が空かないように） */
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.sc-arrow-skip--impact .sc-arrow-skip-head {
    flex-shrink: 0;
    width: 0;
    height: 0;
    margin-top: -4px;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 14px solid #15803d;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}

.sc-arrow-skip-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5.5deg);
    z-index: 2;
    width: 100%;
    padding: 0 6px;
    text-align: center;
    pointer-events: none;
}

.sc-arrow-skip-copy {
    margin: 0;
    line-height: 1.2;
    /* 全角記号まわりの余白を詰める（！の左右など） */
    font-feature-settings: "palt" 1, "pkna" 1;
    font-variant-east-asian: proportional-width;
}

.sc-arrow-skip-line-a,
.sc-arrow-skip-line-b {
    display: inline-block;
    color: #111;
    font-weight: 800;
    -webkit-text-stroke: 3.5px #fff;
    paint-order: stroke fill;
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.95),
        0 2px 10px rgba(255, 255, 255, 0.55);
}

.sc-arrow-skip-line-a {
    font-size: clamp(2.25rem, 6.4vw, 3rem);
    letter-spacing: 0.03em;
    line-height: 1.15;
}

.sc-arrow-skip-line-b {
    font-size: clamp(2.7rem, 8vw, 3.55rem);
    letter-spacing: 0;
    line-height: 1.1;
}

/* 「時短」の二字間だけ字間を広げる（！は外に出して詰まりすぎないように） */
.sc-arrow-skip-jitan {
    letter-spacing: 0.05em;
}

/* ゴールバッジ */
.sc-flow-goal {
    width: 100%;
    text-align: center;
    padding: 8px 5px;
    border-radius: 6px;
    margin-top: 10px;
}

.sc-flow-goal p {
    font-weight: 700;
    font-size: 11px;
    margin: 0;
}

.sc-flow-goal--normal {
    background: #e2e8f0;
    color: #475569;
}

.sc-flow-goal--eje {
    background: var(--color-primary);
    color: #fff;
    margin-top: auto; /* スキップ矢印のすぐ下に配置 */
}

@media (max-width: 500px) {
    .sc-flow-goal--eje {
        margin-top: 0;
    }
}

/* 結論部分 */
.sc-result {
    margin-top: 15px;
    text-align: center;
}

.sc-result p {
    font-size: 14px;
    line-height: 1.55;
    font-weight: 500;
    margin: 0;
}

@media (max-width: 500px) {
    .sc-result p {
        font-size: 11px;
        line-height: 1.6;
    }
}

.sc-result--bad p { color: #64748b; }
.sc-result--bad strong { color: #334155; font-size: 17px; }

@media (max-width: 500px) {
    .sc-result--bad strong {
        font-size: 14px;
    }
}

.sc-result--good p { color: #333; }
.sc-result--good strong { color: var(--color-primary); font-size: 18px; }

.sc-result-icon {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.sc-result-icon svg { width: 36px; height: 36px; }
.sc-result--bad .sc-result-icon { color: #94a3b8; }
.sc-result--good .sc-result-icon { color: var(--color-primary); }

/* ==========================================================================
   2. 悩みセクション
   ========================================================================== */
.trouble {
    position: relative;
    padding-top: 60px;
    z-index: 1;
    /* 背景画像は使わず、下端色が▼と一致するシンプルなグラデーション */
    background: linear-gradient(
        180deg,
        var(--trouble-bg-top) 0%,
        var(--trouble-bg-mid) 52%,
        var(--trouble-bg-bottom) 100%
    );
}

/* 悩みセクション直下：中央▼で次セクション（白）へ視線をつなぐ */
.trouble-bridge-arrow {
    position: relative;
    z-index: 2;
    height: clamp(34px, 9vw, 50px);
    margin-top: calc(-1 * clamp(34px, 9vw, 50px));
    margin-bottom: calc(-1 * clamp(18px, 5vw, 26px));
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
}

.trouble-bridge-arrow::before {
    content: "";
    width: clamp(88px, 24vw, 132px);
    height: 100%;
    /* セクショングラデ下端と同色（浮きを抑える） */
    background: var(--trouble-bg-bottom);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.trouble-title {
    font-size: clamp(1.45rem, 5.8vw, 1.8rem);
    font-weight: 900;
    color: #ffffff; /* 背景が暗いため白文字に変更 */
    margin-bottom: 45px;
    text-align: center;
    line-height: 1.38;
    letter-spacing: 0.03em;
}

/* 「最適なエージェント」：文字色を黄色にし、行の高さいっぱいにオレンジ背景 */
.trouble-highlight {
    color: #ffffff;
    font-weight: 900;
    background-color: rgba(255, 69, 0, 0.9);
    padding: 0.03em 4px;
    margin: 0 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.trouble-bubble-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 50px; /* 下部のデータボックスとの余白 */
}

.trouble-bubble-item {
    width: 100%;
}

.trouble-bubble-item:not(:last-child) {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.trouble-bubble-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.trouble-bubble-row {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
}

/* 悩みに続く「担当からの返答」：吹き出し左・担当アイコン右（ユーザー行と同じ幅・ギャップ） */
.trouble-reply {
    width: 100%;
}

.trouble-reply-row {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.trouble-reply-bubble {
    flex: 1;
    min-width: 0;
    padding: 16px 20px;
    border-radius: 20px;
    background: linear-gradient(145deg, #fffefb 0%, #fff5eb 100%);
    border: 2px solid rgba(255, 140, 66, 0.45);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* ユーザー吹き出しのしっぽと対称：右側へ担当アイコン方向 */
.trouble-reply-bubble::before,
.trouble-reply-bubble::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: auto;
    border-radius: 50%;
    background: #fff5eb;
}

.trouble-reply-bubble::before {
    width: 14px;
    height: 14px;
    right: -18px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

.trouble-reply-bubble::after {
    width: 8px;
    height: 8px;
    right: -30px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03);
}

.trouble-reply-person {
    flex-shrink: 0;
    width: 85px;
}

.trouble-reply-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    background: #e2e8f0;
    /* 円内の写真：拡大率・上下の位置はここで調整（px / 無単位の数値のみ変更でOK） */
    /* --trouble-reply-photo-scale: 1.6;
    --trouble-reply-photo-shift-y: 12px; */
    --trouble-reply-photo-scale: 1.5;
    --trouble-reply-photo-shift-y: 4px;
}

.trouble-reply-photo {
    width: 100%;
    height: 100%;
    max-width: none; /* 全体の img { max-width:100% } によるトリミング不具合を防ぐ */
    object-fit: cover;
    object-position: center 38%;
    display: block;
    transform: translateY(var(--trouble-reply-photo-shift-y, 0px))
        scale(var(--trouble-reply-photo-scale, 1.32));
    transform-origin: center center;
}

.trouble-reply-text {
    margin: 0;
    font-size: clamp(13.5px, 3.6vw, 17.5px);
    font-weight: 700;
    line-height: 1.6;
    color: #334155;
    text-align: left;
    width: 100%;
}

/* アンサー内の強調：ピンク文字＋黄色マーカー */
.trouble-reply-mark {
    color: #be185d;
    font-weight: 800;
    /* 下線付近のマーカー（中央ではなく文字の足元側に帯を置く） */
    background-image: linear-gradient(
        to top,
        rgba(253, 224, 71, 0.92) 0,
        rgba(253, 224, 71, 0.92) 0.42em,
        transparent 0.42em
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 0.06em 0.04em;
}

/* アバター部分 */
.trouble-person {
    flex-shrink: 0;
    width: 85px;
}

.trouble-avatar-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.trouble-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* 吹き出し部分 */
.trouble-speech {
    background: #fff;
    padding: 16px 15px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 暗い背景に合わせて影を少し強調 */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 思考の吹き出し（ぽわぽわ）のしっぽ */
.trouble-speech::before,
.trouble-speech::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.trouble-speech::before {
    width: 14px;
    height: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.trouble-speech::after {
    width: 8px;
    height: 8px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.02);
}

/* ユーザー吹き出し：アイコンが左なのでしっぽは左 */
.trouble-bubble-row .trouble-speech::before { left: -18px; }
.trouble-bubble-row .trouble-speech::after { left: -30px; }

.trouble-speech p {
    margin: 0;
    font-size: clamp(13.5px, 3.6vw, 17.5px);
    font-weight: 700;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

.trouble-blue {
    color: #0284c7;
}

/* ==========================================================================
   悩みセクション内：後悔データブロック
   ========================================================================== */
.trouble-fact-box {
    background: #fff;
    border: 3px solid var(--color-primary-light);
    border-radius: 16px;
    padding: 30px 20px 20px;
    position: relative;
    /* 波紋（spread）が上下の要素にかぶらない程度の余白 */
    margin-top: 14px;
    margin-bottom: 18px;
    /* 奥行き＋オレンジの波紋（参考: spread の ripple） */
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.06),
        0 0 0 0 rgba(255, 69, 0, 0.5),
        0 0 0 0 rgba(255, 140, 66, 0);
    animation: trouble-fact-ripple 2.4s ease-out infinite;
}

@keyframes trouble-fact-ripple {
    /* 1本目：内側から広がって消える */
    0% {
        box-shadow:
            0 4px 18px rgba(0, 0, 0, 0.06),
            0 0 0 0 rgba(255, 69, 0, 0.52),
            0 0 0 0 rgba(255, 140, 66, 0);
    }
    38% {
        box-shadow:
            0 4px 18px rgba(0, 0, 0, 0.06),
            0 0 0 22px rgba(255, 69, 0, 0),
            0 0 0 0 rgba(255, 140, 66, 0.45);
    }
    /* 2本目：1本目の後半で発生して追いかける */
    55% {
        box-shadow:
            0 4px 18px rgba(0, 0, 0, 0.06),
            0 0 0 0 rgba(255, 69, 0, 0),
            0 0 0 10px rgba(255, 140, 66, 0.22);
    }
    88% {
        box-shadow:
            0 4px 18px rgba(0, 0, 0, 0.06),
            0 0 0 0 rgba(255, 69, 0, 0),
            0 0 0 26px rgba(255, 140, 66, 0);
    }
    100% {
        box-shadow:
            0 4px 18px rgba(0, 0, 0, 0.06),
            0 0 0 0 rgba(255, 69, 0, 0.52),
            0 0 0 0 rgba(255, 140, 66, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .trouble-fact-box {
        animation: none;
        box-shadow:
            0 4px 18px rgba(0, 0, 0, 0.06),
            0 0 0 6px rgba(255, 69, 0, 0.18),
            0 0 28px rgba(255, 69, 0, 0.22);
    }
}

.tf-title {
    font-size: 18px;
    font-weight: 900;
    color: #333;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 20px;
    font-feature-settings: "palt";
    letter-spacing: 0.08em;
}

.tf-highlight {
    color: var(--color-primary);
    font-size: 22px;
}

.tf-question {
    background: #f8fafc;
    border-left: 4px solid #94a3b8;
    padding: 12px 15px;
    border-radius: 4px 8px 8px 4px;
    margin-bottom: 25px;
}

.tf-question p {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    line-height: 1.5;
}

/* 横棒グラフ */
.tf-bar-area {
    margin-bottom: 15px;
}

.tf-bar-wrap {
    display: flex;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.tf-bar-yes {
    background: linear-gradient(90deg, #ff8c40 0%, var(--color-primary) 100%);
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.tf-bar-no {
    background: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右寄せ */
    padding: 0 15px;
}

.tf-bar-text {
    display: flex;
    flex-direction: column;
    color: #fff;
    line-height: 1.1;
}

.tf-bar-no .tf-bar-text {
    color: #475569;
    align-items: flex-end; /* テキスト右寄せ */
}

.tf-label {
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 2px;
}

.tf-percent {
    font-size: 20px;
    font-weight: 900;
}

.tf-percent small {
    font-size: 12px;
}

.tf-note {
    text-align: right;
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
}

/* 極小スマホ対応 */
@media (max-width: 360px) {
    .trouble-title { font-size: clamp(1.28rem, 5.2vw, 1.65rem); }
    .trouble-person { width: 70px; }
    .trouble-speech p { font-size: 14.5px; }
    .trouble-reply-person { width: 70px; }
    .tf-title { font-size: 16px; }
    .tf-highlight { font-size: 20px; }
    .tf-bar-yes, .tf-bar-no { padding: 0 8px; }
    .tf-label { font-size: 9px; }
}


/* ==========================================================================
   解決策へのブリッジセクション
   ========================================================================== */
   .solution-bridge {
    position: relative;
    z-index: 1;
    background: #fff;
    padding-top: clamp(52px, 12vw, 64px);
    text-align: center;
    padding-bottom: 0;
}

/* ── 小見出しタグ ── */
.sb-eyebrow {
    display: inline-block;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: clamp(15px, 4.2vw, 18px);
    font-weight: 900;
    letter-spacing: 0.1em;
    padding: 8px 22px;
    border-radius: 20px;
    margin-bottom: 22px;
}

/* ── メインコピー ── */
.sb-headline-block {
    /* 「がカギです！」下〜解決エリアまでの余白 */
    margin-bottom: clamp(48px, 12vw, 72px);
}

.sb-heading {
    font-size: clamp(1.45rem, 6.5vw, 1.95rem);
    font-weight: 900;
    color: #333;
    line-height: 1.5;
    letter-spacing: 0.04em;
    margin: 0;
}

.sb-heading-em {
    font-style: normal;
    color: var(--color-primary);
    position: relative;
    /* 黄色マーカー */
    background: linear-gradient(transparent 58%, var(--color-accent) 58%, var(--color-accent) 90%, transparent 90%);
    padding: 0 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ── 解決エリア（色付き背景・横幅いっぱい） ── */
.sb-solution-box {
    position: relative;
    background-color: #fff8f5; /* 薄いオレンジ */
    padding: 55px 0 60px;
}

.sb-solution-inner {
    position: relative;
    z-index: 2;
}

/* ── 吹き出しバッジ ── */
.sb-speech-badge {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    font-size: clamp(16px, 4.4vw, 19px);
    font-weight: 900;
    padding: 11px 28px;
    border-radius: 40px;
    box-shadow: 0 4px 12px rgba(255, 69, 0, 0.25);
    white-space: nowrap;
    z-index: 10;
    display: flex;
    align-items: center;
    letter-spacing: 0.05em;
}

.sb-speech-badge::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid var(--color-primary);
}

/* ── ブランドロゴ ── */
.sb-brand {
    font-size: clamp(1.9rem, 7.5vw, 2.3rem);
    font-weight: 900;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    letter-spacing: 0.02em;
}

/* ── 白いコンテンツカード ── */
.sb-white-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 26px 20px 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    text-align: center;
    border: 2px solid #fff;
}

.sb-white-main {
    font-size: clamp(13px, 3.6vw, 19px);
    font-weight: 700;
    line-height: 1.85;
    color: #333;
    background: #f8fafc;
    padding: 20px 14px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.sb-white-main strong {
    font-size: clamp(18px, 5.1vw, 22px);
    color: var(--color-line-dark);
}

.sb-white-illust svg {
    width: 70px;
    height: 70px;
    color: var(--color-line-dark);
    margin: 10px auto;
    opacity: 0.9;
}

@media (max-width: 500px) {
    .sb-white-illust svg {
        width: 60px;
        height: 60px;
    }
}

/* 極小スマホ対応 */
@media (max-width: 360px) {
    .sb-heading { font-size: 1.28rem; }
    .sb-speech-badge { font-size: 14px; padding: 9px 18px; }
    .sb-brand { font-size: 1.7rem; }
    .sb-white-main { font-size: 15px; }
    .sb-white-main strong { font-size: 17px; }
}



/* ==========================================================================
   選ばれる理由（新）
   ========================================================================== */
   .reasons-new {
    background: #fdfdfd;
    padding-top: 0;
    padding-bottom: 0;
}

.reasons-new-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, #ff7300 100%);
    padding: 30px 20px 40px;
    text-align: center;
    /* 下部をV字の切り込みにするデザイン */
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    margin-bottom: 30px;
}

.reasons-new-title {
    color: #fff;
    font-size: clamp(1.6rem, 6vw, 2rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0;
    letter-spacing: 0.05em;
    /* text-shadow: 0 2px 4px rgba(0,0,0,0.15); */
}

.rn-title-num {
    font-size: 1.4em;
    color: var(--color-accent);
    padding: 0 4px;
}

/* ── 3つのボックスのコンテナ（四角形） ── */
.rn-box-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 40px;
    padding: 0 5px;
    overflow: visible;
}

@media (max-width: 500px) {
    .rn-box-container {
        margin-bottom: 30px;
    }
}

/* 個別のボックス */
.rn-box {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 5px 6px 15px;
    text-align: center;
    border: 1px solid #fee2e2;
    box-shadow: 0 6px 15px rgba(0,0,0,0.06);
    overflow: visible;
    position: relative;
}

.rn-box-icon {
    background: transparent;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 500px) {
    .rn-box-icon {
        width: 45px;
        height: 45px;
    }
}

.rn-box-icon svg {
    width: 26px;
    height: 26px;
    color: var(--color-primary);
}

.rn-box-text {
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    margin: 0;
}

.rn-box-text strong {
    display: inline-block;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.rn-box-text .rn-large {
    font-size: 1.35em;
}

@media (max-width: 500px) {
    .rn-box {
        padding: 5px 4px 12px;
    }

    .rn-box-text {
        font-size: 10px;
        line-height: 1.5;
        letter-spacing: -0.02em;
        word-break: keep-all;
    }

    .rn-box-text .rn-large {
        font-size: 1.35em;
        margin-bottom: 4px;
    }
}

@media (max-width: 360px) {
    .rn-box-text {
        font-size: 8.5px;
    }
}

/* ── インパクトボード（オリジナル実績デザイン） ── */
.rn-impact-board {
    background: #fff;
    border-radius: 20px;
    padding: 45px 20px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    position: relative;
    margin-bottom: 32px;
    border: 2px solid var(--color-primary-light);
    overflow: hidden;
}

@media (max-width: 500px) {
    .rn-impact-board {

    }
}

/* 左上のゴールドメダル風バッジ */
.rn-ib-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    padding: 8px 20px 8px 15px;
    border-radius: 0 0 25px 0;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 2px 2px 8px rgba(255, 165, 0, 0.3);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}

.rn-ib-badge svg {
    width: 18px;
    height: 18px;
}

.rn-ib-title {
    margin: 14px 0 0;
    padding: 0 6px 8px;
    line-height: 1.22;
}

.rn-ib-title-prefix {
    display: inline-block;
    font-size: clamp(1.12rem, 4.8vw, 1.38rem);
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.07em;
    margin-bottom: 6px;
}

.rn-ib-title-pre {
    display: inline-block;
    font-size: clamp(1.2rem, 5vw, 1.45rem);
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.08em;
}

.rn-ib-title-hit {
    display: inline-block;
    margin-top: 8px;
    font-size: clamp(1.55rem, 8vw, 2.2rem);
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.15;
    background: linear-gradient(120deg, #ea580c 0%, var(--color-primary) 45%, #ff6b35 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 12px rgba(255, 69, 0, 0.3));
}

/* 棒グラフ風ビジュアル（数値・比較表現は含まない装飾） */
.rn-ib-chart {
    margin: 22px auto 0;
    max-width: 260px;
    padding: 0 6px 4px;
}

.rn-ib-chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(8px, 2.5vw, 14px);
    height: 88px;
}

.rn-ib-vbar {
    flex: 1;
    max-width: 32px;
    height: calc(88px * var(--p, 0.5));
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #ffd8c4 0%, var(--color-primary) 55%, #e63e00 100%);
    box-shadow: 0 6px 14px rgba(255, 69, 0, 0.18);
}

.rn-ib-vbar--peak {
    box-shadow: 0 8px 20px rgba(255, 69, 0, 0.28);
}

.rn-ib-chart-axis {
    height: 4px;
    margin-top: 10px;
    background: linear-gradient(90deg, #e2e8f0, #cbd5e1, #e2e8f0);
    border-radius: 999px;
}

/* ── ヒアリング誘導カード ── */
.rn-guide-block {
    margin-top: 0;
    overflow: hidden;
}

/* 上半分：上部は#fdfdfdからLINEグリーン→濃いグリーンへグラデーション */
.rn-guide-header {
    background: linear-gradient(
        to bottom,
        var(--color-line) 0%,
        var(--color-line-dark) 72%,
        var(--color-line-dark) 100%
    );
    padding: 40px 20px 35px;
    text-align: center;
    position: relative;
}

@media (max-width: 500px) {
    .rn-guide-header {
        padding: 30px 20px 25px;
    }
}

.rn-guide-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: var(--color-line-dark);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    padding: 3px 14px;
    margin-bottom: 14px;
}

.rn-guide-heading {
    font-size: clamp(1.3rem, 5.4vw, 1.7rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.65;
    letter-spacing: 0.03em;
    margin: 0;
}

.rn-guide-em {
    font-style: normal;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 0 4px;
}


/* 下半分：薄いグリーンで次セクションと区別 */
.rn-guide-body {
    background: #f0fdf4;
    padding: 30px 20px 36px;
}

.rn-guide-time-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 16px;
    background: #fff;
    border: 1.5px solid #86efac;
    border-radius: 10px;
    font-size: clamp(14px, 3.8vw, 19.5px);
    font-weight: 700;
    color: #166534;
    margin-bottom: 20px;
    letter-spacing: 0.03em;
}

.rn-guide-time-badge strong {
    font-size: 1.1em;
    color: var(--color-line-dark);
}

.rn-guide-time-badge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-line);
}

.rn-guide-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rn-guide-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    font-size: clamp(16px, 4.4vw, 20px);
    font-weight: 700;
    color: #1e293b;
    border-bottom: 1px solid #bbf7d0;
}

.rn-guide-list li:last-child {
    border-bottom: none;
}

.rn-guide-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--color-line-dark);
    display: flex;
}

.rn-guide-check svg {
    width: 100%;
    height: 100%;
}

/* 数字を囲う薄いオレンジのボックス */
.rn-ib-number-box {
    background: linear-gradient(to right, #fff8f5, #fff0ed);
    border-radius: 16px;
    padding: 15px 10px;
    display: flex;
    align-items: center; /* 横並びの中央揃え */
    justify-content: center;
    margin-bottom: 15px;
    border: 1px dashed rgba(255, 69, 0, 0.3);
}

/* 数字をグラデーションカラーにしてリッチに */
.rn-ib-num {
    font-size: clamp(4.5rem, 16vw, 6.5rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, var(--color-primary) 0%, #ff4b2b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 4px 6px rgba(255,69,0,0.2));
}

.rn-ib-unit-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 8px;
}

.rn-ib-unit {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1.1;
}

.rn-ib-more {
    font-size: clamp(1.2rem, 4vw, 1.5rem);
    font-weight: 900;
    color: #333;
    margin-top: 2px;
}

.rn-cta {
    padding-bottom: 0;
}

/* ==========================================================================
   担当相談（選ばれる理由ブロックの直後）
   ========================================================================== */
.consultant-reception {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 40%, #fff5f0 100%);
    padding-top: 44px;
    padding-bottom: 60px;
}

.consultant-reception .container {
    text-align: center;
}

.cr-promise {
    margin: 0 0 18px;
    font-size: clamp(1.05rem, 4.2vw, 1.3rem);
    font-weight: 900;
    line-height: 1.55;
    letter-spacing: 0.03em;
    color: #0f172a;
}

.cr-title {
    margin-bottom: 14px;
    font-size: clamp(1.35rem, 5.8vw, 1.75rem);
    line-height: 1.45;
}

.cr-lead {
    margin: 0 0 22px;
    font-size: clamp(13px, 3.5vw, 16px);
    font-weight: 600;
    line-height: 1.75;
    color: #475569;
    text-align: center;
}

.cr-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

.cr-photo-wrap {
    position: relative;
    width: min(156px, 46vw);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #e8edf2;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    /* 縦位置の微調整（object-position に加えて確実に動かす場合は px で指定） */
    --cr-photo-shift-y: 10px;
    --cr-photo-scale: 1.4;
}

.cr-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 12%;
    display: block;
    transform: translateY(var(--cr-photo-shift-y, 0px)) scale(var(--cr-photo-scale, 1.4));
    transform-origin: center center;
}

.cr-note {
    margin: 20px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
    text-align: center;
}

@media (max-width: 500px) {
    .cr-note {
        font-size: 10px;
    }
}


/* ==========================================================================
   サービス概要
   ========================================================================== */
.service-concept {
    background: #fff;
}

/* ヘッダー */
.sc-header {
    text-align: center;
    margin-bottom: 32px;
}

.sc-heading {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.45;
    margin: 12px 0 16px;
    letter-spacing: 0.01em;
}

.sc-subline {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* マッチングビジュアル */
.sc-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
    background: linear-gradient(135deg, #f5f3ff 0%, #fff0ed 100%);
    border-radius: 20px;
    padding: 28px 16px;
}

.sc-visual-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.sc-visual-node-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.sc-visual-node-icon svg {
    width: 32px;
    height: 32px;
}

.sc-visual-node--seeker .sc-visual-node-icon {
    background: #4f46e5;
    color: #fff;
}

.sc-visual-node--agent .sc-visual-node-icon {
    background: var(--color-primary);
    color: #fff;
}

.sc-visual-node-label {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    color: #333;
}

.sc-visual-node-label small {
    font-size: 11px;
    font-weight: 500;
    color: #666;
}

/* ブリッジ（中央の接続部分） */
.sc-visual-bridge {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0;
    max-width: 130px;
    margin: 0 8px;
    padding-bottom: 28px;
}

.sc-visual-bridge-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #c7c5f0, #ffb89a);
}

.sc-visual-bridge-badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
    border: 1.5px solid #e8e4ff;
    font-size: 11px;
    font-weight: 700;
    color: #4f46e5;
    white-space: nowrap;
}

.sc-visual-bridge-badge svg {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

/* コンセプトパネル */
.sc-panel {
    background: #fff;
    border-radius: 18px;
    padding: 24px 20px;
    border: 1.5px solid rgba(0,0,0,0.07);
    box-shadow:
        0 2px 0 rgba(0,0,0,0.03),
        0 12px 28px rgba(0,0,0,0.07);
}

.sc-panel-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 14px;
    letter-spacing: 0.04em;
}

.sc-panel-kicker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-primary-light);
    border-radius: 8px;
    flex-shrink: 0;
}

.sc-panel-kicker-icon svg {
    width: 17px;
    height: 17px;
    color: var(--color-primary);
}

.sc-panel-lead {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.85;
    color: #333;
    margin: 0 0 20px;
}

.sc-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-primary-light);
    border-radius: 12px;
    border-left: 4px solid var(--color-primary);
}

.sc-callout-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    color: var(--color-primary);
    margin-top: 1px;
}

.sc-callout-icon svg {
    width: 100%;
    height: 100%;
}

.sc-callout-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
    color: #333;
    margin: 0;
}

/* ==========================================================================
   解決したい課題
   ========================================================================== */
.service-issues {
    background: var(--color-bg-light);
}

.si-header {
    text-align: center;
    margin-bottom: 28px;
}

.si-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 14px;
}

.si-lead {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    color: #555;
    background: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.07);
    margin: 0;
    text-align: left;
}

/* カードグリッド */
.issue-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.issue-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
}

/* カードヘッダー */
.issue-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 16px;
}

.issue-card--seeker .issue-card-head {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-bottom: 2px solid #c7d2fe;
}

.issue-card--agent .issue-card-head {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-bottom: 2px solid #fed7aa;
}

.issue-card-head-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #4f46e5;
    color: #fff;
    box-shadow: 0 4px 8px rgba(79,70,229,0.25);
}

.issue-card-head-icon--agent {
    background: var(--color-primary);
    box-shadow: 0 4px 8px rgba(255,69,0,0.25);
}

.issue-card-head-icon svg {
    width: 28px;
    height: 28px;
}

.issue-card-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: #4f46e5;
    margin: 0 0 4px;
}

.issue-card-eyebrow--agent {
    color: var(--color-primary);
}

.issue-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e1b4b;
    margin: 0;
    line-height: 1.3;
}

.issue-card-title--agent {
    color: #7c2d12;
}

/* リスト */
.issue-list {
    list-style: none;
    margin: 0;
    padding: 8px 0 8px;
}

.issue-list > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.issue-list > li:last-child {
    border-bottom: none;
}

.issue-list-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.issue-list-icon--seeker {
    background: #eef2ff;
    color: #4f46e5;
}

.issue-list-icon--agent {
    background: #fff7ed;
    color: var(--color-primary);
}

.issue-list-icon svg {
    width: 18px;
    height: 18px;
}

.issue-list-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;
    color: #333;
    flex: 1;
    min-width: 0;
    padding-top: 6px;
}

/* コネクター */
.issue-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 0;
}

.issue-connector-text {
    font-size: 13px;
    font-weight: 700;
    color: #666;
    letter-spacing: 0.04em;
}

.issue-connector svg {
    width: 26px;
    height: 26px;
    color: var(--color-primary);
}

/* 結論ボックス */
.issue-conclusion {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 20px 20px;
    background: #fff;
    border-radius: 16px;
    border: 2px solid var(--color-primary);
    box-shadow: 0 6px 20px rgba(255,69,0,0.10);
    text-align: left;
}

.issue-conclusion-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.issue-conclusion-icon svg {
    width: 24px;
    height: 24px;
}

.issue-conclusion p {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0;
    color: #333;
}

/* ==========================================================================
   3. 解決策（比較）セクション
   ========================================================================== */
.comparison-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.comparison-item {
    background: #fff;
    border: 2px solid var(--color-gray);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
}

.comparison-item.good {
    border-color: var(--color-primary);
    border-width: 4px;
    box-shadow: 0 8px 15px rgba(255, 69, 0, 0.15);
}

.comparison-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    background: #eee;
    padding: 5px;
    border-radius: 5px;
}

.comparison-item.good .comparison-title {
    background: var(--color-primary-light);
}

.comparison-item ul {
    list-style: none;
    text-align: left;
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 14px;
}

.comparison-item ul li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 5px;
}

.comparison-item.bad ul li::before {
    content: "×";
    position: absolute;
    left: 0;
    color: #999;
}

.comparison-item.good ul li::before {
    content: "○";
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

.comparison-vs {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #999;
    margin: -10px 0;
}

/* ==========================================================================
   4. 選ばれる理由
   ========================================================================== */
.reason-card {
    background: #fff;
    border-radius: 15px;
    padding: 30px 20px 20px;
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.reason-num {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    border: 3px solid #fff;
}

.reason-card h3 {
    color: var(--color-primary);
    font-size: 18px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.reason-card p {
    font-size: 14px;
    text-align: left;
    font-weight: 500;
}

/* ==========================================================================
   5. フロー
   ========================================================================== */
.step-box {
    background: #fff;
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    position: relative;
}

.step-label {
    background: var(--color-primary);
    color: #fff;
    display: inline-block;
    padding: 4px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
    margin-top: -35px;
    margin-bottom: 15px;
}

.step-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.step-box p {
    font-size: 14px;
    font-weight: 500;
}

.step-arrow {
    display: flex;
    justify-content: center;
    color: var(--color-primary);
    margin: 15px 0;
}

.step-arrow svg {
    width: 32px;
    height: 32px;
}

/* ==========================================================================
   6. FAQ (アコーディオン)
   ========================================================================== */

.faq {
    background: var(--color-primary-light);
    padding: 40px 0 48px;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.accordion-item {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.accordion-header {
    width: 100%;
    text-align: left;
    padding: 18px 20px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    line-height: 1.5;
}

.q-mark, .a-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.q-mark {
    background-color: var(--color-primary);
}

/* 添付スクリーンショットの A バッジと同系のグレー */
.a-mark {
    background-color: #bdbdbd;
}

.toggle-icon {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.toggle-icon svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}

.accordion-item.active .toggle-icon svg {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #fffdfb;
}

.accordion-content p {
    padding: 14px 20px 22px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 95% 55% at 50% 0%, rgba(255, 255, 255, 0.75) 0%, transparent 62%),
        linear-gradient(168deg, #e8f4fb 0%, #f0faf6 42%, #f6faf3 100%);
    color: var(--color-text);
    text-align: center;
    padding: 30px 20px;
    padding-bottom: calc(22px + 118px + env(safe-area-inset-bottom, 0px));
    font-size: 12px;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.footer-nav a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: color 0.2s;
}

.footer-nav a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.footer-nav__sep {
    color: #aaa;
    font-size: 11px;
    user-select: none;
}

.footer-copy {
    margin: 0;
}

/* ==========================================================================
   Legal Pages（運営会社・プライバシーポリシー）
   ========================================================================== */
.page-default {
    padding: 40px 0 60px;
}

.legal-page {
    padding: 0 0 60px;
}

.legal-page .container {
    padding-top: 32px;
}

.legal-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 48px 20px;
    text-align: center;
    background-image: url("../img/header-img.jpeg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.legal-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(28, 42, 58, 0.58);
}

.legal-hero__inner {
    position: relative;
    z-index: 1;
}

.legal-hero__title {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 6vw, 30px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
}

.legal-hero__subtitle {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
}

@media (max-width: 500px) {
    .legal-hero__subtitle {
        margin-top: 5px;
    }
}

.company-page .legal-section {
    margin-bottom: 24px;
    padding: 20px 0;
}

.privacy-page .legal-section {
    margin-bottom: 20px;
    padding: 20px 0;
}

.legal-article {
    font-size: 14px;
    line-height: 1.85;
}

.legal-intro {
    margin-bottom: 32px;
}

.legal-section {
    margin-bottom: 36px;
}

.legal-section__heading {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary-light);
}

.company-page .legal-section__heading {
    font-size: 18px;
}

.legal-section__body p + p {
    margin-top: 1em;
}

.company-vision p + p {
    margin-top: 1.8em;
}

.company-vision__lead {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.9;
}

.company-vision em {
    font-style: normal;
    font-weight: 700;
    color: var(--color-primary);
}

.company-vision__bridge {
    padding-top: 0.6em;
    border-top: 1px dashed #e0e0e0;
}

.company-vision__closing {
    margin-top: 1.5em;
    padding: 14px 16px;
    background: #f7f5f3;
    border-radius: 6px;
    line-height: 1.9;
}

.privacy-contact a {
    color: var(--color-primary);
    text-decoration: none;
}

.privacy-contact a:hover {
    text-decoration: underline;
}

.company-info {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
}

.company-info__row {
    display: grid;
    grid-template-columns: 100px 1fr;
    border-bottom: 1px solid #e8e8e8;
}

.company-info__row:last-child {
    border-bottom: none;
}

.company-info__row dt {
    padding: 14px 12px;
    font-weight: 700;
    font-size: 13px;
    background: var(--color-primary-light);
    border-right: 1px solid #e8e8e8;
}

.company-info__row dd {
    padding: 14px 16px;
    margin: 0;
    font-size: 13px;
}

.company-info__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.company-info__list li {
    position: relative;
    padding-left: 1em;
}

.company-info__list li::before {
    content: "・";
    position: absolute;
    left: 0;
}

.company-info__list li + li {
    margin-top: 0.4em;
}

.privacy-article__title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text);
}

.privacy-article p + p {
    margin-top: 1em;
}

.privacy-article .privacy-list + p {
    margin-top: 1.5em;
}

.privacy-list {
    margin: 12px 0 0;
    padding-left: 1.4em;
}

ol.privacy-list {
    list-style-type: decimal;
    padding-left: 1.8em;
}

.privacy-list li + li {
    margin-top: 0.5em;
}

.privacy-contact {
    margin-top: 16px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
}

.privacy-contact__row {
    display: grid;
    grid-template-columns: 145px 1fr;
    border-bottom: 1px solid #e8e8e8;
}

.privacy-contact__row:last-child {
    border-bottom: none;
}

.privacy-contact__row dt {
    padding: 12px;
    font-weight: 700;
    font-size: 12px;
    background: var(--color-primary-light);
    border-right: 1px solid #e8e8e8;
}

.privacy-contact__row dd {
    padding: 12px 14px;
    margin: 0;
    font-size: 13px;
}

.legal-enacted {
    margin-top: 20px;
    text-align: right;
    font-size: 12px;
    color: #666;
}

body.is-legal-page .fixed-cta {
    display: none;
}

body.is-legal-page .footer {
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   固定 CTA ボタン (LINE仕様)
   ========================================================================== */
.fixed-cta {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: 500px;
    z-index: 100;
    padding: 10px 15px 20px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,1) 100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* FVをスクロールで抜けたら表示 */
.fixed-cta.is-visible {
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.cta-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-balloon {
    background-color: #fff;
    border: 2px solid var(--color-primary); 
    color: var(--color-text);
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: -10px;
    z-index: 2;
    position: relative;
}

.cta-balloon.line-color {
    border-color: var(--color-line);
}

.cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    padding: 15px 44px;
    border-radius: 40px;
    transition: all 0.2s;
    color: #fff;
    position: relative;
}

.cta-button.btn-line {
    background: linear-gradient(180deg, #35D776 0%, var(--color-line) 100%);
    box-shadow: 0 6px 0 var(--color-line-dark), 0 10px 15px rgba(0,0,0,0.2);
}

.cta-button.btn-line:hover,
.cta-button.btn-line:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 var(--color-line-dark), 0 4px 5px rgba(0,0,0,0.2);
}

@media (max-width: 500px) {
    .cta-button.btn-line {
        box-shadow: 0 5px 0 var(--color-line-dark), 0 7px 12px rgba(0, 0, 0, 0.16);
    }

    .cta-button.btn-line:hover,
    .cta-button.btn-line:active {
        box-shadow: 0 0 0 var(--color-line-dark), 0 3px 5px rgba(0, 0, 0, 0.16);
    }
}

.cta-icon-box {
    background-color: #fff;
    color: var(--color-line);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cta-icon-box svg {
    width: 26px;
    height: 26px;
}

.cta-button.btn-line .cta-main-text {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.cta-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.cta-arrow svg {
    width: 4cqw;
    height: 4cqw;
}



/* ==========================================================================
   エジェガチャとは？内 新図解 (左→右のフロー型)
   ========================================================================== */
.efd-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    background: #fffdfc;
    border: 2px solid var(--color-primary-light);
    border-radius: 12px;
    padding: 20px 10px;
    margin-top: 0;
    box-shadow: 0 6px 15px rgba(255, 69, 0, 0.08);
}

/* ── 左：ユーザー ── */
.efd-left {
    flex: 0 0 22%;
    max-width: 26%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.efd-bubble {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #f1f5f9;
    color: #334155;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 8px;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.efd-bubble::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 5px solid #f1f5f9;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.efd-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
    flex-shrink: 0;
}

.efd-icon svg { width: 28px; height: 28px; }
.efd-icon.bg-gray { background: #f1f5f9; color: #64748b; }
.efd-icon.bg-orange { background: var(--color-primary-light); color: var(--color-primary); }
.efd-icon.bg-slate { background: #e2e8f0; color: #475569; }

/* 上段：一般的なエージェント（スレート系で既存図と差別化） */
.efd-diagram--others {
    margin-top: 0;
    background: #f8fafc;
    border-color: #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.efd-diagram--others .efd-center-box .efd-icon svg {
    width: 26px;
    height: 26px;
}

.efd-diagram--others .efd-tail .efd-end-box .efd-icon svg {
    width: 26px;
    height: 26px;
}

.efd-name {
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
    text-align: center;
    letter-spacing: 0.02em;
}

@media (max-width: 500px) {
    .efd-name {
        font-size: 11px;
    }
}

/* ── 中央・右：矢印＋丸アイコン＋ラベル（同型） ── */
.efd-middle,
.efd-tail {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.efd-arrow-in {
    width: 20px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 500px) {
    .efd-arrow-in {
        width: 12px;
    }
}

.efd-arrow-in svg {
    width: 22px;
    height: 22px;
}

.efd-center-box,
.efd-end-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.efd-caption {
    margin-top: 40px;
    text-align: center;
    font-size: clamp(15px, 4.2vw, 21px);
    color: #1e293b;
    line-height: 1.7;
    font-weight: 600;
}

.efd-mark {
    background: linear-gradient(transparent 55%, #ffe066 55%);
    color: inherit;
    font-weight: 800;
    padding: 0 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.efd-brand-text {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-primary);
    background: #fff;
    border: 1px solid var(--color-primary);
    padding: 2px 6px;
    border-radius: 999px;
    margin-bottom: 6px;
    white-space: nowrap;
    text-align: center;
    margin-top: -12px;
}

/* スマホ表示時の微調整 */
@media (max-width: 360px) {
    .efd-bubble { font-size: 9px; padding: 4px 6px; }
    .efd-brand-text { font-size: 9px; padding: 2px 4px; }
    .efd-diagram--others .efd-name { font-size: 11px; line-height: 1.25; }
    .efd-left { flex: 0 0 20%; max-width: 24%; }
    .efd-icon { width: 38px; height: 38px; }
    .efd-icon svg { width: 20px; height: 20px; }
    .efd-arrow-in svg { width: 18px; height: 18px; }
}

/* ==========================================================================
   図解アニメーション（エジェガチャなら）― 無限ループ・ハイライト方式
   全要素が 7s サイクルで、ずらし再生
   ========================================================================== */

/* アイコン丸「あなた」：右端と同系のオレンジで強調 */
@keyframes efd-hl-icon {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
    12%  { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.28); }
    28%  { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
}

/* テキスト：プライマリカラーに変色 */
@keyframes efd-hl-text {
    0%   { color: #1e293b; }
    12%  { color: var(--color-primary); }
    28%  { color: #1e293b; }
    100% { color: #1e293b; }
}

/* 矢印：左アイコンと同系色で少し動く */
@keyframes efd-hl-arrow {
    0%   { color: #64748b; transform: translateX(0); }
    12%  { color: #475569; transform: translateX(4px); }
    28%  { color: #64748b; transform: translateX(0); }
    100% { color: #64748b; transform: translateX(0); }
}

/* 中央アイコン丸「エジェガチャ」：右端と同系のオレンジで発光 */
@keyframes efd-hl-center {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
    12%  { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.28); }
    28%  { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
}

/* 右端オレンジ丸：発光（下段図解アニメ用） */
@keyframes efd-hl-tail-icon {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
    12%  { transform: scale(1.08);  box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.28); }
    28%  { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
}

/* テキスト強調（右端ラベル用） */
@keyframes efd-hl-card-text {
    0%   { color: #1e293b; }
    12%  { color: var(--color-primary); }
    28%  { color: #1e293b; }
    100% { color: #1e293b; }
}

/* --- 再生クラス：全要素 5s サイクルで無限ループ --- */
.efd-diagram--after.efd-play .efd-left .efd-icon {
    animation: efd-hl-icon 5s 0s ease infinite;
}
.efd-diagram--after.efd-play .efd-left .efd-name {
    animation: efd-hl-text 5s 0s ease infinite;
}

.efd-diagram--after.efd-play .efd-middle .efd-arrow-in svg {
    animation: efd-hl-arrow 5s 0.85s ease infinite;
}

.efd-diagram--after.efd-play .efd-tail .efd-arrow-in svg {
    animation: efd-hl-arrow 5s 2.05s ease infinite;
}

.efd-diagram--after.efd-play .efd-center-box .efd-icon {
    animation: efd-hl-center 5s 1.6s ease infinite;
}
.efd-diagram--after.efd-play .efd-center-box .efd-name {
    animation: efd-hl-text 5s 1.6s ease infinite;
}

.efd-diagram--after.efd-play .efd-tail .efd-icon.bg-orange {
    animation: efd-hl-tail-icon 5s 2.35s ease infinite;
}
.efd-diagram--after.efd-play .efd-tail .efd-name {
    animation: efd-hl-card-text 5s 2.35s ease infinite;
}



/* ==========================================================================
   インフルエンサー推薦セクション
   ========================================================================== */
   .recommendation {
    background: #fdfdfd;
}

.rec-inner {
    padding-top: 28px;
    padding-bottom: 36px;
    background: linear-gradient(
        180deg,
        #fff8f3 0%,
        #faf6f2 18%,
        #f4f6f9 45%,
        #f0f2f6 100%
    );
}

/* 上のインパクトボードと同じ枠幅・一体型（ヘッダー＋白カード） */
.rec-stack {
    max-width: 100%;
    margin: 0 auto;
    border-radius: 20px;
    border: 2px solid var(--color-primary-light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: #fff;
}

.rec-header {
    text-align: center;
    margin-bottom: 0;
    padding: 26px 18px 28px;
    background: linear-gradient(
        165deg,
        #ffffff 0%,
        #fffdfb 40%,
        #fff5ed 100%
    );
    border-radius: 0;
    border: none;
    box-shadow: none;
    position: relative;
    border-bottom: 1px solid rgba(255, 69, 0, 0.1);
}

.rec-header::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-primary),
        var(--color-accent),
        var(--color-primary),
        transparent
    );
    opacity: 0.85;
}

.rec-eyebrow {
    display: inline-block;
    background: linear-gradient(
        145deg,
        #ff6a33 0%,
        var(--color-primary) 45%,
        var(--color-primary-dark) 100%
    );
    color: #fff;
    font-size: clamp(13px, 3.5vw, 15px);
    font-weight: 800;
    padding: 9px 22px 10px;
    border-radius: 999px;
    margin-bottom: 16px;
    letter-spacing: 0.06em;
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 4px 14px rgba(255, 69, 0, 0.28);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.rec-title-main {
    margin-bottom: 0;
    font-size: clamp(1.6rem, 6.2vw, 2.1rem);
    line-height: 1.35;
    position: relative;
    z-index: 1;
}

.rec-title-small {
    display: inline-block;
    font-size: clamp(0.88rem, 3.4vw, 1.05rem);
    font-weight: 700;
    color: #3d4f63;
    letter-spacing: 0.02em;
    line-height: 1.45;
    margin-bottom: 6px;
    max-width: 100%;
    white-space: normal;
}

.rec-title-end {
    font-weight: 900;
    color: #1e293b;
}

/* 推薦カード（ヘッダーと縦につなぐ） */
.rec-card {
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 22px 20px 24px;
    box-shadow: none;
}

/* 人物紹介エリア */
.rec-person {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px dashed #e2e8f0;
}

.rec-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    background: #fff;
    flex-shrink: 0;
}

.rec-avatar--text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: #f0f0f0;
    color: #1a1a1a;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1;
}

.rec-name {
    font-size: 20px;
    font-weight: 900;
    color: #1e293b;
    margin: 0 0 6px;
    line-height: 1.2;
}

.rec-title-sub {
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
}

.rec-desc {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    color: #475569;
    margin: 0;
}

/* コメントエリア */
.rec-comment {
    position: relative;
    padding: 20px 18px;
    background: #f8fafc;
    border-radius: 12px;
}

/* 背景の引用符マーク */
.rec-comment::before {
    content: "“";
    position: absolute;
    top: -10px;
    left: 8px;
    font-size: 70px;
    font-family: Georgia, serif;
    color: var(--color-primary-light);
    line-height: 1;
    z-index: 0;
}

.rec-text {
    position: relative;
    z-index: 1;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.75;
    color: #334155;
    margin: 0;
}

.rec-text strong {
    color: var(--color-primary);
    background: linear-gradient(transparent 60%, rgba(255, 215, 0, 0.45) 60%);
    font-weight: 800;
}