/* ==============================================
   BowNow Webinar LP - Style Sheet
   高コンバージョン率を実現するモダンデザイン
   ============================================== */

/* ----- リセット & ベース設定 ----- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ----- 公式サイト準拠のトーン調整版 ----- */
:root {
    /* カラーパレット - BowNowブランドカラーに最適化 */
    --primary-color: #ca062b;     /* 公式の鮮やかなメインレッド */
    --primary-dark: #d6363b;      /* 深みのあるアクセントレッド */
    --primary-light: #ffd700;     /* アイコン背景などの超淡い赤 */
    --secondary-color: #1a1a2e;    /* 信頼感のあるネイビーブラック */
    --accent-color: #ffd700;
    --text-dark: #333333;         /* 真っ黒を避け、可読性を高めた濃いグレー */
    --text-light: #777777;        /* 補助テキスト用のグレー */
    --text-white: #ffffff;
    --bg-light: #f7f9fa;          /* 公式サイトで多用される背景グレー */
    --bg-dark: #1a1a2e;
    --border-color: #eceef1;      /* 境界線をよりソフトに（#e5e7ebから変更） */
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ca062b;
    
    /* タイポグラフィ */
    --font-main: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-accent: 'Inter', sans-serif;
    
    /* スペーシング - 縦幅をコンパクトにするため微調整 */
    --section-padding: 80px;      /* 120pxから80pxへ。スクロール負荷を軽減 */
    --container-max-width: 1200px;
    
    /* シャドウ - 資料のような浮き上がりを抑え、Web的な清潔感を優先 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
    
    /* トランジション */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}


body {
    font-family: var(--font-main);
    color: var(--text-dark);
    line-height: 1.6; /* 1.7から1.6へ。情報の密度を上げる */
    overflow-x: hidden;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased; /* 文字をより綺麗に見せる */
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ----- ヘッダー ----- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    transition: var(--transition-normal);
}

.header.scrolled {
    box-shadow: var(--shadow-md);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-accent);
    color: var(--text-dark);
    text-decoration: none;
}

.logo-icon {
    font-size: 32px;
}

.logo-accent {
    color: var(--primary-color);
}

.nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-fast);
    position: relative;
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: var(--transition-normal);
}

.nav-link:hover::after {
    width: 100%;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: var(--transition-normal);
}

.mobile-menu {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: white;
    padding: 20px;
    box-shadow: var(--shadow-md);
    transform: translateY(-100%);
    opacity: 0;
    transition: var(--transition-normal);
    z-index: 999;
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
}

.mobile-menu-link {
    display: block;
    padding: 15px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
}


/* 数字の後に「%」を自動で表示する */
.hero-stat-number[data-target="50"]::after,
.hero-stat-number[data-target="60"]::after {
    content: '%';
    font-size: 0.7em; /* 単位を少し小さくすると綺麗 */
    margin-left: 2px;
}

/* 「倍」を表示したい場合 */
.hero-stat-number[data-target="3.5"]::after {
    content: '倍';
    font-size: 0.7em;
    margin-left: 2px;
}



/* ----- ボタン ----- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-family: var(--font-main);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-white);
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(227, 30, 36, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
    color: var(--text-white);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

.btn-large {
    padding: 18px 40px;
    font-size: 18px;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

.btn-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(227, 30, 36, 0.3);
    }
    50% {
        box-shadow: 0 4px 30px rgba(227, 30, 36, 0.6);
    }
}

/* ----- ヒーローセクション ----- */
/* 1. ヒーロー全体の調整 */
.hero {
    position: relative;
    /* ヘッダーの高さ分、最小高さを確保（100vhだと削れて見えるため） */
    min-height: 100vh; 
    display: flex;
    align-items: center;
    /* padding-topをヘッダーの高さより大きく設定して、削れを防止 */
    padding-top: 100px; 
    padding-bottom: 60px;
    overflow: hidden;
    background-color: #fff;
}

/* 2. 背景画像の位置をヘッダーの下から始まるように調整 */
.hero-background {
    position: absolute;
    /* top: 0; だとヘッダーの裏に入り込むため、少しだけ調整 */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://bow-now.jp/dcms_media/image/bpo_lp_kv.png');
    background-size: cover;
    /* 画像の上部が削れないよう、centerから少し下にずらす(またはtop) */
    background-position: center 20%; 
    background-repeat: no-repeat;
    z-index: 1;
}

/* 3. 透過レイヤー（前回と同じ） */
.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.6); 
    z-index: 2;
}

/* 4. コンテンツ位置の微調整 */
.hero .container {
    position: relative;
    z-index: 10;
    /* コンテンツがヘッダーに近すぎる場合はここでさらに下げます */
    margin-top: 20px; 
}

/* スマホ用レスポンシブ：左側を優先的に表示 */
@media (max-width: 768px) {
    .hero {
        padding-top: 100px; /* ヘッダーとの距離を再調整 */
    }

    .hero-background {
        /* 0% = 左端基準 
           center = 上下中央 
        */
        background-position: 50% center !important; 
        background-size: cover;
    }

}

.hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.3);
}

.hero-title {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 30px;
    color: var(--text-dark);
}

.hero-title-main {
    display: block;
}

.hero-title-highlight {
    display: block;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 22px;
    color: var(--text-light);
    margin-bottom: 40px;
    line-height: 1.6;
}

.hero-benefits {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.hero-benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

.hero-benefit i {
    color: var(--success-color);
    font-size: 20px;
}

.hero-cta {
    margin-bottom: 60px;
}

.hero-cta-note {
    margin-top: 15px;
    font-size: 14px;
    color: var(--text-light);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 700px;
    margin: 0 auto;
}

.hero-stat {
    text-align: center;
}

/* 1. ヒーローセクションの数字をさらに巨大化 */
.hero-stat-number {
    font-size: 64px !important; /* 48pxから大幅アップ */
    font-weight: 900;
    color: var(--primary-color);
    font-family: 'Inter', sans-serif;
    line-height: 1;
    letter-spacing: -2px; /* 文字間を詰めてインパクトを出す */
    text-shadow: 0 4px 10px rgba(202, 6, 43, 0.1); /* ほんのり赤い影で浮かせる */
    display: inline-block;
}

.stat-percent {
    font-size: 32px;
}

.hero-stat-label {
    font-size: 14px;
    color: var(--text-light);
    font-weight: 600;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-light);
    font-size: 14px;
    animation: bounce 2s infinite;
    z-index: 3;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* ----- アニメーション ----- */
.fade-in {
    animation: fadeIn 0.8s ease;
}

.fade-in-delay-1 {
    animation: fadeIn 0.8s ease 0.2s both;
}

.fade-in-delay-2 {
    animation: fadeIn 0.8s ease 0.4s both;
}

.fade-in-delay-3 {
    animation: fadeIn 0.8s ease 0.6s both;
}

.fade-in-delay-4 {
    animation: fadeIn 0.8s ease 0.8s both;
}

.fade-in-delay-5 {
    animation: fadeIn 0.8s ease 1s both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ----- セクション共通 ----- */
section {
    padding: var(--section-padding) 0;
}

.section-header {
    text-align: center;
    margin-bottom: 80px;
}

.section-badge {
    display: inline-block;
    padding: 8px 20px;
    background: var(--bg-light);
    color: var(--primary-color);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.section-badge-white {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.section-badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.section-title {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.section-header-white .section-title {
    color: white;
}

.section-subtitle {
    font-size: 18px;
    color: var(--text-light);
    max-width: 1000px;
    margin: 0 auto;
}

.section-header-white .section-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

.text-highlight {
    color: var(--primary-color);
}

.text-danger {
    color: var(--danger-color);
}

.mobile-break {
    display: none;
}

/* --- RESULTS & TRUST：共通クラス統合・実績最大化版 --- */
.results-trust-section {
    padding: 120px 0;
    background-color: #1a1a2e;
}

.section-header-center {
    text-align: center;
    margin-bottom: 80px;
}

/* 他の見出し（48px）と完全に一致させる */
.main-title-white {
    color: #ffffff;
    font-size: 48px; 
    font-weight: 900;
    line-height: 1.3;
}

.text-red { color: #ef4248; }

/* グリッドレイアウト */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 50px auto 0;
}

/* カードデザイン：赤線・背景透過なし */
.value-card-dark {
    background: #252a41;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 45px 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 100%;
    transition: transform 0.3s ease;
}

.value-card-dark:hover {
    transform: translateY(-10px);
}

.card-header-v8 {
    padding: 0 35px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.icon-box-red {
    width: 55px;
    height: 55px;
    background: #ef4248;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 24px;
    flex-shrink: 0;
}

.card-title-white {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.card-body-white {
    padding: 0 35px;
    flex-grow: 1;
}

.card-lead-sm {
    color: #e0e0e0;
    font-size: 15.5px;
    line-height: 1.7;
    margin-bottom: 25px;
    font-weight: 500;
}

.check-list-green {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

.check-list-green li {
    color: #b0b5cf;
    font-size: 14.5px;
    padding-left: 25px;
    position: relative;
    margin-bottom: 12px;
    text-align: left;
}

.check-list-green li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: #00ffaa;
    font-weight: 900;
}

/* --- 実績表示：赤線なし・巨大数値 --- */
.result-display-area {
    padding: 0 35px;
    text-align: center;
}

.result-label-text {
    display: block;
    color: #ff4d5a;
    font-size: 20px; 
    font-weight: 800;
    margin-bottom: 12px;
}

.result-number-large {
    display: flex;
    justify-content: center;
    align-items: center;
}

.result-number-large .arrow {
    color: #ff4d5a;
    font-size: 32px;
    font-weight: 900;
    margin-right: 15px;
}

.result-number-large .val {
    color: #ff4d5a;
    font-size: 64px; 
    font-weight: 900;
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

.result-number-large .suffix {
    font-size: 22px;
    margin-left: 6px;
    font-weight: 800;
}

/* --- 田の字 最終調整版：中央寄せラベル & 内部テキスト配置最適化 --- */

/* 1. 白い箱（カード）の設定 */
.grid-step-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    position: relative;
    padding: 0;
    margin-top: 40px; /* 見出しが浮くためのスペース */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: visible; /* 見出しをはみ出させるために必須 */
}

.step-card-content {
    /* 上下の余白を広げ、左側に80pxの大きな余白を設定 */
    padding: 55px 25px 40px 80px !important; 
    text-align: left;
}

/* 2. 見出し（ラベル）：中央寄せ・サイトカラー・半分掛け配置 */
.title-v4-float {
    position: absolute;
    top: -24px; /* 高さ48pxの半分 */
    left: 50%;
    transform: translateX(-50%); /* カードの真ん中に配置 */
    width: 260px;
    height: 48px;
    background: #1a1a1a; /* サイトカラー：黒 */
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    z-index: 50;
}

/* 02, 03 用の赤背景 */
.title-v4-float.bg-light-red {
    background: #ef4248 !important; /* サイトカラー：赤 */
}

/* 3. 見出し内の要素 */

/* 数字：白ボックスに黒文字 */
.v4-num {
    background: #ffffff;
    color: #000000 !important;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 900;
    margin-right: 12px;
    flex-shrink: 0;
}

/* 見出しの文字：一回り大きく */
.v4-text {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff !important;
    margin: 0;
    flex-grow: 1;
    white-space: nowrap;
}

/* アイコン：白色・一回り大きく */
.v4-icon {
    font-size: 24px;
    color: #ffffff !important;
    margin-left: 10px;
}

/* 4. リストの調整（チェックアイコンの位置など） */
.step-card-list {
    margin-top: 5px;
}

.step-card-list li {
    font-size: 16px;
    margin-bottom: 12px;
    line-height: 1.5;
}

/* スマホ表示の調整（画面幅に合わせて余白をリセット） */
@media (max-width: 768px) {
    .step-card-content {
        /* スマホでは見切れを防ぐため余白を25pxに縮小 */
        padding: 45px 15px 30px 25px !important;
    }
    .title-v4-float {
        width: 220px;
    }
    .v4-text { font-size: 15px; }
    .v4-icon { font-size: 20px; }
}




/* スマホ対応 */
@media (max-width: 1024px) {
    .values-grid { grid-template-columns: 1fr; padding: 0 20px; }
    .main-title-white { font-size: 32px; }
}


/* --- Roadmap Section: 淡い赤背景に最適化した視認性強化版 --- */

.roadmap-section-red {
    padding: 100px 0;
    background-color: #fdf2f2; /* ご指定の薄い赤 */
    text-align: center;
}

/* メインタイトル：白文字から「濃いグレー」へ反転 */
.section-header-white .section-title-white {
    color: var(--text-dark); /* #333333 */
    font-size: 48px;
    font-weight: 900;
}

/* バッジ：白背景に赤文字でクッキリ浮かせる */
.section-badge-white {
    display: inline-block;
    padding: 8px 20px;
    background: #ffffff;
    color: var(--primary-color);
    border: 1px solid #ffded9; /* 薄い赤の境界線でボヤけ防止 */
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

/* 下線：白から赤へ */
.title-underline-white {
    width: 40px;
    height: 4px;
    background: var(--primary-color);
    margin: 20px auto 0;
}

.roadmap-container {
    position: relative;
    max-width: 1150px;
    margin: 80px auto 40px;
}

/* 中央の線：白から「薄いグレー/ベージュ」へ */
.roadmap-line-white {
    position: absolute;
    top: 25px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: #f1e4de; /* 背景に馴染む色 */
    z-index: 1;
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative;
    z-index: 2;
}

.roadmap-item {
    padding: 0 10px;
}

/* 数字の円：赤×オレンジのグラデーションで目立たせる */
.step-circle-white {
    width: 50px;
    height: 50px;
    background: var(--primary-grad); /* 赤×オレンジのグラデーション */
    color: #ffffff; /* 数字は白 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 900;
    margin: 0 auto 25px;
    box-shadow: 0 4px 15px rgba(239, 66, 72, 0.2);
}

/* 最後のゴールアイコン：ネイビーブラックで締める */
.step-circle-goal {
    width: 50px;
    height: 50px;
    background: var(--secondary-color);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin: 0 auto 25px;
}

/* 最後のゴール（フラッグ）：赤色で強力に強調 */
#flow .step-circle-goal {
    background-color: #ca062b !important; /* 定義済みの赤×オレンジ */
    color: #ffffff !important;
    font-size: 24px !important;     /* フラッグを少し大きく */
    box-shadow: 0 8px 20px rgba(239, 66, 72, 0.3) !important; /* 赤い影で浮かせる */
    transform: scale(1.1);          /* ゴールだけ少し大きくして存在感を出す */
}

/* ステップ内のタイトル：濃いグレーに変更 */
.step-title-white {
    color: var(--text-dark); /* #333333 */
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
}

/* ステップの説明文：中グレーに変更 */
.step-text-white {
    color: var(--text-light); /* #666666 */
    font-size: 14px;
    line-height: 1.6;
}

/* 足元の期間バッジ：白背景×黒文字に反転 */
.duration-badge-dark {
    display: inline-block;
    background: #ffffff;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 12px 40px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    margin-top: 40px;
    box-shadow: var(--shadow-sm);
}

/* --- 導入ステップ：1〜4をグレー、ゴールを赤に変更 --- */

/* 1〜4の数字の円をグレーにする */
#flow .step-circle-white {
    background: #e5e7eb !important; /* 明るいグレー */
    color: #6b7280 !important;      /* グレーの文字色 */
    box-shadow: none !important;    /* 影を消して目立たなくする */
}

/* 最後のゴール（フラッグ）を赤にする */
#flow .step-circle-goal {
    background-color: #ca062b !important; /* 赤×オレンジのグラデーション */
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(239, 66, 72, 0.3) !important; /* 赤い影で強調 */
}

/* 中央の線を少し薄くしてゴールを目立たせる */
#flow .roadmap-line-white {
    background: #e5e7eb !important;
}


/* --- スクロールアニメーションのベース設定 --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px); /* 30px下から開始 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* --- マウスホバー時のふわっと浮く演出 --- */
.merit-compact-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 変化を滑らかに */
    cursor: default;
}

.merit-compact-card:hover {
    transform: translateY(-8px); /* 8px上に浮く */
    box-shadow: 0 15px 40px rgba(227, 30, 36, 0.1); /* ブランドカラー（赤）を帯びた影に */
}

/* --- 画像にあったアイコン背景の強調 --- */
.icon-circle {
    width: 45px;
    height: 45px;
    background-color: #fff1f2; /* 薄い赤（指示画像の色） */
    color: #ef4248; /* ブランドレッド */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 15px; /* テキストとの間隔 */
    transition: transform 0.3s ease; /* ホバー時にアイコンを少し動かす演出用 */
}

/* カードにホバーしたときにアイコンも少し強調されるとより「ふわっと」します */
.merit-compact-card:hover .icon-circle {
    transform: scale(1.1); /* アイコンを一回り大きく */
    background-color: #ffe4e6; /* 背景を少しだけ濃く */
}

/* --- 循環図カードのホバーアニメーション --- */
.grid-step-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* 変化を滑らかに */
    cursor: default;
}

/* マウスオン（ホバー）時のスタイル */
.grid-step-card:hover {
    transform: translateY(-10px) !important; /* 10px上に浮かす */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); /* 影を強調して浮遊感を出す */
    border-color: #ef4248; /* ホバー時に枠線をブランドカラー（赤）に */
}

/* ホバー時に中のアイコンも少し強調する演出（任意） */
.grid-step-card:hover .step-card-icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* スマホ対応（縦に並べる） */
@media (max-width: 768px) {
    .roadmap-grid { grid-template-columns: 1fr; gap: 50px; }
    .roadmap-line-white { display: none; }
}

.value-compact-section { padding: 60px 0; background-color: #fff; }
.text-red { color: #ef4248; }

/* メリットカード */
.merit-compact-card { display: flex; border: 1px solid #eee; border-top: 5px solid #ef4248; margin-bottom: 40px; }

/* 左側：サイドエリア */
.m-aside { flex: 0 0 320px; padding: 25px; background: #fafafa; border-right: 1px solid #eee; display: flex; flex-direction: column; }
.m-badge { background: #ef4248; color: #fff; padding: 2px 10px; font-weight: 700; font-size: 11px; margin-bottom: 12px; display: inline-block; border-radius: 2px; }
.m-main-title { font-size: 19px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; }
.m-lead { font-size: 12.5px; color: #666; line-height: 1.5; margin-bottom: 15px; }

/* 左側：拡大ビジュアル */
.m-visual-large { margin-top: auto; padding: 25px; background: #fff; border: 1px solid #f0f0f0; text-align: center; border-radius: 4px; }
.m-visual-large i { font-size: 48px; color: #ef4248; margin-bottom: 10px; display: block; }
.m-visual-large p { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; margin: 0; color: #1a1a1a; }

/* 右側：メインコンテンツ */
.m-main { flex: 1; padding: 20px 35px; display: flex; flex-direction: column; justify-content: space-between; }
.m-feature { margin-bottom: 12px; }
.m-feature:last-child { margin-bottom: 0; }
.m-feature-head { display: flex; align-items: center; gap: 12px; margin-bottom: 0; }

/* 強調アイコン円形背景 */
.icon-circle {
    width: 34px; height: 34px; background-color: #fff1f2; color: #ef4248;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-circle i { font-size: 15px; }
.m-feature-head h4 { font-size: 15.5px; font-weight: 700; margin: 0; color: #1a1a1a; }

/* 説明文とタグ：縦幅最小化 */
.m-desc { font-size: 13px; color: #444; line-height: 1.4; margin: 2px 0 4px 0; padding-left: 46px; }
.m-tags { padding-left: 46px; display: flex; gap: 5px; flex-wrap: wrap; }
.m-tags span { background: #f1f5f9; color: #64748b; padding: 1px 8px; border-radius: 3px; font-size: 10.5px; font-weight: 600; }

/* 実績：横並びグリッド */
.impact-grid-compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 40px; }
.res-card { border: 1px solid #eee; border-radius: 6px; padding: 20px; text-align: center; background: #fff; transition: 0.3s; }
.res-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.05); }
.res-industry { font-size: 11px; font-weight: 700; color: #888; display: block; margin-bottom: 8px; }
.res-label { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.res-number { color: #ef4248; line-height: 1; margin-bottom: 8px; }
.res-number .val { font-family: 'Inter', sans-serif; font-size: 44px; font-weight: 900; letter-spacing: -1px; }
.res-number .unit { font-size: 16px; font-weight: 800; margin-left: 2px; }
.res-desc { font-size: 12px; color: #555; line-height: 1.5; margin: 0; }

@media (max-width: 992px) {
    .merit-compact-card { flex-direction: column; }
    .m-aside { flex: none; width: 100%; border-right: none; border-bottom: 1px solid #eee; }
    .impact-grid-compact { grid-template-columns: 1fr; }
}



/* --- 安心のサポート：横幅制限 & 余白凝縮 --- */
.support-trust-area {
    margin: 40px auto 0; /* 上のマージンを詰め、左右autoで中央寄せ */
    max-width: 1100px; /* ★ここを追加：3ステップのカード群より少し狭くするとバランスが良いです */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #eee;
}

.support-inner {
    display: flex;
    align-items: center;
    padding: 25px 35px; /* ★上下のパディングを 40px から 25px へ削減 */
}

.support-lead {
    flex: 0 0 240px; /* 少し幅をスリムに */
    text-align: left;
    border-right: 1px solid #eee;
    padding-right: 30px; /* 余白を削減 */
}

.support-title {
    font-size: 20px; /* ★24px から 20px へ。他セクションと合わせる */
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 5px; /* 余白を削減 */
    color: #1a1a1a;
}

/* 右側のアイコンリストの間隔を詰める */
.support-items-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px; /* ★縦の間隔を 20px から 15px へ削減 */
    padding-left: 35px;
}

.support-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.support-icon-mini {
    width: 38px; /* ★45px から 38px へ。一回りコンパクトに */
    height: 38px;
    background: #fff5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4248;
    font-size: 16px;
    flex-shrink: 0;
}

.support-text strong {
    display: block;
    font-size: 14px; /* ★15px から 14px へ */
    color: #1a1a1a;
    margin-bottom: 0px; /* ★見出し直下の余白をゼロに */
    line-height: 1.2;
}

.support-text span {
    font-size: 11px; /* ★12px から 11px へ */
    color: #777;
}

.support-lead {
    flex: 0 0 280px;
    text-align: left;
    border-right: 1px solid #eee;
    padding-right: 40px;
}

.support-badge {
    color: #ef4248;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid #ef4248;
    padding: 2px 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: inline-block;
}

.support-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.support-desc {
    font-size: 13px;
    color: #888;
}

/* 右側のアイコン付きリスト */
.support-items-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
    padding-left: 40px;
}

.support-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.support-icon-mini {
    width: 45px;
    height: 45px;
    background: #fff5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4248;
    font-size: 18px;
    flex-shrink: 0;
}

.support-text strong {
    display: block;
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.support-text span {
    font-size: 12px;
    color: #777;
}

/* スマホ対応 */
@media (max-width: 900px) {
    .support-inner { flex-direction: column; padding: 30px; }
    .support-lead { border-right: none; border-bottom: 1px solid #eee; padding: 0 0 30px 0; margin-bottom: 30px; width: 100%; text-align: center; }
    .support-items-grid { grid-template-columns: 1fr; padding-left: 0; }
}

/* ----- 課題セクション ----- */
.problems {
    background: var(--bg-light);
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.problem-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    border: 2px solid transparent;
}

.problem-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.problem-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 36px;
    color: var(--danger-color);
}

.problem-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.problem-description {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 20px;
}

.problem-impact {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    background: #fef2f2;
    border-radius: 10px;
    border-left: 4px solid var(--danger-color);
}

.impact-label {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
}

.impact-value {
    font-size: 20px;
    font-weight: 900;
    color: var(--danger-color);
}

.problems-summary {
    background: linear-gradient(135deg, var(--secondary-color), #2d2d44);
    padding: 50px;
    border-radius: 20px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    color: white;
}

.summary-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
}

.summary-content h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.summary-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
}

.summary-list i {
    color: var(--danger-color);
    font-size: 18px;
    flex-shrink: 0;
}

/* ----- ソリューションセクション ----- */
.solution {
    background: linear-gradient(135deg, var(--secondary-color), #2d2d44);
    color: white;
    position: relative;
    overflow: hidden;
}

.solution::before {
    content: '';
    position: absolute;
    top: -300px;
    right: -300px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(227, 30, 36, 0.2) 0%, transparent 70%);
    border-radius: 50%;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 1;
}

.solution-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-normal);
}

.solution-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-color);
    box-shadow: 0 20px 40px rgba(227, 30, 36, 0.3);
}

.solution-visual {
    position: relative;
    margin-bottom: 30px;
}

.solution-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: white;
    position: relative;
    z-index: 2;
}

.solution-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(20px);
    animation: pulse-effect 3s infinite;
}

@keyframes pulse-effect {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.1;
    }
}

.solution-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: white;
}

.solution-description {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 20px;
}

.solution-benefits {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.solution-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
}

.solution-benefits i {
    color: var(--success-color);
    font-size: 16px;
    flex-shrink: 0;
}

.solution-result {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(227, 30, 36, 0.2);
    border-radius: 10px;
    border: 1px solid var(--primary-color);
}

.result-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.result-arrow {
    color: var(--primary-color);
    font-size: 20px;
}

.result-value {
    font-size: 18px;
    font-weight: 900;
    color: var(--primary-color);
}

/* ----- 手動運営の罠セクション ----- */
.traps {
    background: var(--bg-light);
}

.traps-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.trap-item {
    background: white;
    padding: 35px;
    border-radius: 15px;
    box-shadow: var(--shadow-md);
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border-left: 4px solid var(--danger-color);
    transition: var(--transition-normal);
}

.trap-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-lg);
}

.trap-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--danger-color);
    flex-shrink: 0;
}

.trap-content {
    flex: 1;
}

.trap-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.trap-description {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 15px;
}

.trap-impact {
    text-align: right;
    flex-shrink: 0;
}

.trap-time {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: var(--danger-color);
    font-family: var(--font-accent);
    margin-bottom: 5px;
}

.trap-label {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 600;
}

.traps-cta {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
    padding: 60px;
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--shadow-xl);
}

.traps-cta-content h3 {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* ----- 特徴セクション ----- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.feature-card {
    background: white;
    padding: 50px;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    transition: var(--transition-normal);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
}

.feature-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 80px;
    font-weight: 900;
    color: rgba(227, 30, 36, 0.05);
    font-family: var(--font-accent);
    line-height: 1;
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: white;
    margin-bottom: 25px;
}

.feature-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.feature-description {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 25px;
}

.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dark);
    font-size: 15px;
}

.feature-list i {
    color: var(--success-color);
    font-size: 16px;
    flex-shrink: 0;
}

.feature-metric {
    padding: 20px;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-radius: 15px;
    text-align: center;
    border: 2px solid var(--primary-color);
}

.metric-value {
    font-size: 42px;
    font-weight: 900;
    color: var(--primary-color);
    font-family: var(--font-accent);
    margin-bottom: 5px;
}

.metric-label {
    font-size: 14px;
    color: var(--text-light);
    font-weight: 600;
}

/* ----- サポートフローセクション ----- */
.flow {
    background: var(--bg-light);
}

.flow-timeline {
    position: relative;
}

.flow-phase {
    margin-bottom: 60px;
    position: relative;
}

.flow-phase:last-child {
    margin-bottom: 0;
}

.flow-phase-number {
    position: absolute;
    left: -80px;
    top: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-accent);
    box-shadow: var(--shadow-md);
    z-index: 2;
}

.flow-phase-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    margin-left: 40px;
    border-left: 4px solid var(--primary-color);
}

.flow-phase-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
}

.flow-phase-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
}

.flow-phase-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
}

.flow-phase-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.flow-category {
    padding: 25px;
    background: var(--bg-light);
    border-radius: 15px;
}

.flow-category-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.flow-category-title i {
    color: var(--primary-color);
}

.flow-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flow-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.6;
}

.flow-list i {
    color: var(--success-color);
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.flow-highlight {
    margin-top: 25px;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
}

.flow-highlight i {
    font-size: 24px;
    flex-shrink: 0;
}

/* ----- 実績セクション ----- */
.results {
    background: linear-gradient(135deg, var(--secondary-color), #2d2d44);
    color: white;
    position: relative;
    overflow: hidden;
}

.results::before {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(227, 30, 36, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.results-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

.result-stat {
    text-align: center;
    padding: 40px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-normal);
}

.result-stat:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.result-stat-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: white;
    margin: 0 auto 25px;
}

.result-stat-number {
    font-size: 64px;
    font-weight: 900;
    color: var(--primary-color);
    font-family: var(--font-accent);
    margin-bottom: 10px;
    line-height: 1;
}

.result-stat-label {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.result-stat-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.results-clients {
    text-align: center;
    padding: 60px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}

.results-clients-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 40px;
    color: white;
}

.results-clients-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-bottom: 30px;
}

.client-logo {
    font-size: 32px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-accent);
    letter-spacing: 2px;
}

.results-clients-note {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* ----- 比較セクション ----- */
.comparison-table {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.comparison-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    background: var(--bg-light);
    padding: 25px 40px;
    font-weight: 700;
    border-bottom: 2px solid var(--border-color);
}

.comparison-header-manual {
    text-align: center;
    color: var(--text-light);
}

.comparison-header-bownow {
    text-align: center;
    color: var(--primary-color);
}

.comparison-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    padding: 25px 40px;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

.comparison-row:hover {
    background: var(--bg-light);
}

.comparison-label {
    font-weight: 600;
    color: var(--text-dark);
}

.comparison-manual,
.comparison-bownow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
}

.comparison-manual {
    color: var(--text-light);
}

.comparison-manual i {
    color: var(--danger-color);
    font-size: 20px;
}

.comparison-bownow {
    color: var(--success-color);
}

.comparison-bownow i {
    color: var(--success-color);
    font-size: 20px;
}

/* ----- お客様の声セクション ----- */
.testimonials {
    background: var(--bg-light);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.testimonial-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    position: relative;
    transition: var(--transition-normal);
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.testimonial-quote {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 48px;
    color: rgba(227, 30, 36, 0.1);
}

.testimonial-text {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 15px;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 20px;
    font-family: var(--font-accent);
}

.testimonial-name {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 3px;
}

.testimonial-company {
    font-size: 14px;
    color: var(--text-light);
}

.testimonial-result {
    padding: 15px;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.testimonial-result .result-label {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 600;
}

.testimonial-result .result-value {
    font-size: 18px;
    font-weight: 900;
    color: var(--primary-color);
}


/* 料金グリッド */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    align-items: flex-start;
    margin-top: 60px;
}

.pricing-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
}

/* ベーシック強調（左端） */
.pricing-card.main-plan {
    border: 2px solid #6b7280; /* グレー系の強調 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transform: scale(1.02);
    z-index: 10;
}
.pricing-card.main-plan .main-badge {
    background: #6b7280;
    color: #fff;
    text-align: center;
    padding: 6px;
    font-size: 12px;
    font-weight: bold;
}


/* 共通パーツ */
.plan-header { padding: 30px 20px; text-align: center; background: #fff; }
.plan-name { font-size: 20px; margin-bottom: 8px; }
.plan-tagline { font-size: 13px; color: #666; margin-bottom: 20px; min-height: 3em; }
.price-value { font-size: 44px; font-weight: 900; }

.plan-content { padding: 25px; flex-grow: 1; }
.set-label { color: #999; font-size: 11px; text-align: center; margin-bottom: 15px; }
.plan-features { list-style: none; }
.plan-features li { 
    font-size: 14px; 
    padding-left: 25px; 
    margin-bottom: 12px; 
    position: relative; 
    font-weight: 500;
}
.plan-features li::before {
    content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; color: #ef4248;
}
/* 「全内容」は赤背景で強調 */
.plan-features li.is-all {
    background: #fff5f5;
    padding: 5px 5px 5px 25px;
    border-radius: 4px;
}

/* --------------------------------------------------
   1. 比較表：記号・アイコンのみ色付け（文字色は黒を維持）
   -------------------------------------------------- */

/* 共通：文字の色を黒（サイトカラー）に固定 */
.mark-ok-green, .mark-warn, .mark-ng, .mark-ok-red {
    color: #333 !important;
    display: inline-block !important; /* 記号の着色を有効にするため */
    font-weight: 700;
}

/* 今ある記号（✔, ⚠, ×）の1文字目だけを狙って染める（重複防止） */
.mark-ok-green::first-letter { color: #10b981 !important; } /* ✔ だけ緑 */
.mark-warn::first-letter     { color: #f59e0b !important; } /* ⚠ だけオレンジ */
.mark-ng::first-letter       { color: #9ca3af !important; } /* × だけグレー */

/* 弊社サービス列：iタグ（FontAwesome）だけを赤くする */
.mark-ok-red i {
    color: #ef4248 !important;
    margin-right: 5px;
    font-size: 1.1em;
}

/* 表ヘッダーのアイコン色調整 */
.header-content-flex i { color: #9ca3af !important; }
.header-main-label-flex i { color: #fff !important; }


/* --------------------------------------------------
   2. 比較表：弊社サービス列を赤い枠で囲う
   -------------------------------------------------- */
.comparison-table-v4 {
    border-collapse: separate; /* 枠線を綺麗に見せるため */
}

/* ヘッダーの赤枠 */
.comparison-table-v4 th.col-main-red-slim {
    border-top: 3px solid #ef4248 !important;
    border-left: 3px solid #ef4248 !important;
    border-right: 3px solid #ef4248 !important;
    background-color: #ef4248 !important;
}

/* ボディの赤枠と薄い背景 */
.comparison-table-v4 td.highlight-column {
    border-left: 3px solid #ef4248 !important;
    border-right: 3px solid #ef4248 !important;
    background-color: #fffafa !important; /* 非常に薄い赤 */
}

/* 最下部の赤枠閉じ */
.comparison-table-v4 tbody tr:last-child td.highlight-column {
    border-bottom: 3px solid #ef4248 !important;
}


/* --------------------------------------------------
   3. 比較表下の赤バナー（CTA）
   -------------------------------------------------- */
.comparison-cta {
    margin: 40px auto;
    max-width: 1100px;
    padding: 0 20px;
}

.cta-v14-inner {
    background: linear-gradient(90deg, #ef4248 0%, #d60000 100%);
    border-radius: 12px;
    padding: 25px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(239, 66, 72, 0.2);
}

.cta-v14-text h3 { color: #fff; font-size: 22px; font-weight: 900; margin-bottom: 5px; line-height: 1.3; }
.cta-v14-text p  { color: rgba(255, 255, 255, 0.9); font-size: 14px; margin: 0; }

.cta-v14-button {
    background: #fff;
    color: #ef4248 !important;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 900;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
    white-space: nowrap;
}

.cta-v14-button:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }


/* --------------------------------------------------
   4. フッター（公式サイト準拠デザイン）
   -------------------------------------------------- */
.main-footer {
    background-color: #1a1a2e; /* ネイビーブラック */
    padding: 80px 0 30px;
    color: #fff;
}

.footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.footer-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
    border-left: 4px solid #ef4248; /* 公式の赤いアクセント */
    padding-left: 15px;
}

.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { color: #b0b5cf; text-decoration: none; font-size: 14px; transition: 0.3s; }
.footer-col ul li a:hover { color: #ef4248; padding-left: 5px; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; text-align: center; }
.copyright { font-size: 12px; color: #777; }

/* スマホ対応 */
@media (max-width: 768px) {
    .footer-nav-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 15px; }
    .cta-v14-inner { flex-direction: column; text-align: center; gap: 20px; padding: 30px 20px; }
}



/* --- 料金プラン リストアイコンの出し分け調整 --- */

/* 基本：すべてのリストはレ点チェックにする */
.plan-features li::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f058'; /* チェックアイコン */
    position: absolute;
    left: 0;
    color: #ef4248; /* サイトカラーの赤 */
}

/* グロースプラン（growth-red, growth-blue）の時だけ、2番目以降をプラスにする */
.growth-red .plan-features li:nth-child(n+2)::before,
.growth-blue .plan-features li:nth-child(n+2)::before {
    content: '\f067'; /* プラスアイコン */
    color: #adb5bd;   /* グレー */
    font-size: 14px;
}

/* ベーシックプラン（main-plan）は上記の設定から除外されているため、
   すべてチェックマークのままになります */

/* ホバー時にプラスアイコンを赤くする演出（お好みで） */
.pricing-card:hover .plan-features li:nth-child(n+2)::before {
    color: #ef4248;
    transition: color 0.3s ease;
}

.plan-footer { padding: 15px; background: #fdfdfd; font-size: 12px; text-align: center; border-top: 1px solid #eee; color: #777; }

@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-card.main-plan { transform: none; }
}

/* --- 料金プラン：ベーシック（左端）を赤で最優先に目立たせる --- */

.pricing-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
    cursor: pointer;
    /* ベーシック以外は一旦グレー基調に */
    filter: grayscale(100%);
    opacity: 0.7;
}

/* --- ベーシックプラン（main-plan）を「赤」で強力に目立たせる --- */
.pricing-card.main-plan {
    filter: none; /* グレー解除 */
    opacity: 1;
    border: 2px solid #9ca3af; /* ブランドレッドの枠線 */
    transform: scale(1.05); /* 最初から少し大きく表示 */
    box-shadow: 0 10px 30px rgba(239, 66, 72, 0.1);
    z-index: 2;
}

/* ベーシックプランのホバー：さらに浮き上がらせる */
.pricing-card.main-plan:hover {
    transform: scale(1.07) translateY(-8px);
    box-shadow: 0 20px 40px rgba(239, 66, 72, 0.2);
    border-color: var(--accent-orange); /* ホバーでオレンジ色に変化 */
}

/* --- それ以外のプラン：ホバー時のみ少し色が戻る演出 --- */
.pricing-card.growth-red:hover,
.pricing-card.growth-blue:hover {
    filter: grayscale(50%); /* 半分だけ色が戻る */
    opacity: 0.9;
    transform: translateY(-5px);
    border-color: #9ca3af; /* 枠線も控えめなグレー */
}

/* --- 特殊アイコンやバッジの色変更 --- */
/* ベーシックのチェックアイコンだけを赤に維持 */
.pricing-card.main-plan .plan-features li::before {
    color: var(--primary-color);
}

/* それ以外はグレーに */
.pricing-card.growth-red .plan-features li::before,
.pricing-card.growth-blue .plan-features li::before {
    color: #9ca3af;
}


/* --- 比較表V2 カスタムデザイン --- */
.comparison-container {
    overflow-x: auto;
    margin-top: 40px;
}

.comparison-table-v2 {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    min-width: 800px;
}

/* ヘッダー周り */
.comparison-table-v2 th {
    padding: 30px 15px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    vertical-align: middle;
}

.header-icon {
    font-size: 24px;
    color: #9ca3af;
    margin-bottom: 10px;
}

/* --- 比較表下のCTA (V14スタイル) --- */
.comparison-cta {
    margin-top: -1px; /* テーブルとの隙間を埋める */
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 50px 20px;
}

.cta-v14-inner {
    background: linear-gradient(90deg, #ef4248 0%, #d60000 100%);
    border-radius: 12px;
    padding: 30px 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(239, 66, 72, 0.2);
}

.cta-v14-content {
    display: flex;
    align-items: center;
    gap: 25px;
}

.cta-v14-icon {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ef4248;
    font-size: 26px;
    flex-shrink: 0;
}

.cta-v14-text h3 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.cta-v14-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 500;
}

.cta-v14-button {
    background: #ffffff;
    color: #ef4248;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.cta-v14-button:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* レスポンシブ調整 */
@media (max-width: 992px) {
    .cta-v14-inner {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 40px 30px;
    }
    .cta-v14-content {
        flex-direction: column;
        gap: 15px;
    }
    .cta-v14-text h3 {
        font-size: 20px;
    }
}

/* 弊社サービス（メイン列）のヘッダー */
.comparison-table-v2 th.col-main {
    padding: 0;
    background: #ef4248; /* 強烈な赤 */
    color: #fff;
    border: none;
    position: relative;
}

.header-main-box {
    padding: 20px 10px;
}

.crown-icon {
    font-size: 20px;
    margin-bottom: 5px;
}

.main-label {
    display: block;
    font-size: 20px;
    font-weight: 900;
}

.main-sub-label {
    display: block;
    font-size: 12px;
    opacity: 0.9;
}

/* ボディ（行）の設定 */
.comparison-table-v2 td {
    padding: 25px 15px;
    border: 1px solid #f3f4f6;
    text-align: center;
    transition: background 0.3s;
}

.row-label {
    background: #fdfdfd;
    font-weight: 700;
    width: 20%;
    font-size: 15px;
}

.row-label span {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

/* コンテンツ内のテキスト */
.cell-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.sub-text {
    font-size: 12px;
    color: #9ca3af;
}

/* 記号の色 */
.check-ok { color: #10b981; font-weight: 700; }
.check-ng { color: #d1d5db; font-weight: 700; }
.check-warn { color: #f59e0b; font-weight: 700; }

/* --- 弊社サービス強調列（縦の赤枠） --- */
.main-highlight-cell {
    border-left: 3px solid #ef4248 !important;
    border-right: 3px solid #ef4248 !important;
    background: #fff5f5; /* 非常に薄い赤背景 */
    position: relative;
}

/* 最後のセルだけ下線を赤くする */
tr:last-child .main-highlight-cell {
    border-bottom: 3px solid #ef4248 !important;
}

/* 特殊アイコン（ロケット・コーヒー） */
.main-text {
    color: #ef4248;
    font-size: 24px;
    font-weight: 900;
}

.main-sub {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

.rocket-icon, .coffee-icon {
    color: #ef4248;
    font-size: 20px;
    font-weight: 900;
}

.main-highlight-text {
    background: #ef4248;
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* ホバー時のリアクション */
.comparison-table-v2 tr:hover td:not(.main-highlight-cell) {
    background: #f9fafb;
}


/* --- Transformation：楽に見える工夫デザイン --- */
.tasks-section {
    padding: 120px 0;
    background-color: #f9fafb; /* 薄いグレー背景でカードを際立たせる */
}

.tasks-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* 40pxから少し詰めてコンパクトに */
    margin: 60px auto 0; /* 上に60px、左右はautoで中央寄せ */
    max-width: 1100px; /* ★ここを追加：横幅を100%にせず制限する */
    width: 90%; /* スマホ等で画面端に触れないよう調整 */
}

.task-card-v2 {
    background: #ffffff;
    border-radius: 12px;
    padding: 0; /* ヘッダーとボディを分けるため */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.task-card-v2:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(227, 30, 36, 0.1);
    border-color: var(--primary-color);
}

/* ヘッダー部分：番号とアイコンを横並びに */
.task-header {
    display: flex;
    align-items: center;
    padding: 30px 30px 0;
    justify-content: space-between;
}

.task-num {
    font-size: 42px;
    font-weight: 900;
    color: #e5e7eb; /* グレーを少し濃くして視認性確保 */
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

.task-card-v2:hover .task-num {
    color: var(--primary-color); /* ホバー時に番号が赤くなる演出 */
    opacity: 0.3;
}

.task-icon-wrap {
    width: 60px;
    height: 60px;
    background: #fdf2f2; /* 薄い赤 */
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: var(--primary-color);
}

/* ボディ部分 */
.task-body {
    padding: 25px 30px 40px;
}

.task-title-v2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #1a1a1a;
    text-align: left;
}

.task-desc-v2 {
    font-size: 16px;
    line-height: 1.7;
    color: #555; /* グレーを濃くして読みやすく */
    text-align: left;
}

/* 足元の注釈 */
.tasks-note {
    margin-top: 50px;
    text-align: center;
}

.tasks-note p {
    display: inline-block;
    background: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    border: 2px dashed #ddd;
    color: #666;
    font-size: 15px;
}

.tasks-note strong {
    color: var(--primary-color);
}

/* スマホ対応 */
@media (max-width: 1024px) {
    .tasks-grid-modern {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


/* --- 循環図：1200pxワイド & バッジ浮かしデザイン --- */
.cycle-section {
    padding: 100px 0; /* 140pxから100pxへ */
    background: #fff;
    overflow: hidden;
}

/* カード内の上下余白を少し詰めて高さを抑える */
.step-card-content {
    padding: 35px 40px; /* 上下50pxから35pxへ */
}

/* --- 887行目付近：循環図のグリッド設定 --- */
.cycle-grid-wide {
    position: relative;
    max-width: 1100px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 120px;
    row-gap: 30px;
}

/* ★ここを追記：HTMLの並び順に関わらず、PC版で03を左、04を右にする */

/* STEP 03（HTMLで2番目に書かれているカード）を左側に配置 */
.cycle-grid-wide .grid-step-card:nth-child(2) {
    order: 1;
}

/* STEP 04（HTMLで1番目に書かれているカード）を右側に配置 */
.cycle-grid-wide .grid-step-card:nth-child(1) {
    order: 2;
}

/* タイトルとリストの間の余白を詰める */
.title-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px; /* 30pxから15pxへ */
}

/* グレーの軌道円（サイズ拡大） */
.cycle-orbit-path {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;  /* 750pxから700pxへ微調整 */
    height: 600px; /* 750pxから600pxへ：高さを低くして楕円に近づける */
    border: 20px solid #eceef1; /* 太さを15pxから20pxに、色を#f8f9faから少し濃い#eceef1へ */
    border-radius: 50%;
    z-index: 1;
}

/* 中央コア（サイズ拡大） */
.cycle-grid-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 240px;
    background: #fff;
    border: 8px solid #ef4248;
    border-radius: 50%;
    z-index: 30;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 50px rgba(227, 30, 36, 0.3);
}

.core-box { text-align: center; }
.core-box i { font-size: 60px; color: #ef4248; margin-bottom: 8px; }
.core-box p { font-size: 18px; font-weight: 700; line-height: 1.5; color: #1a1a1a; }
.core-box p strong { color: #ef4248; font-size: 26px; }

/* ステップカード全体 */
.grid-step-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
    z-index: 20;
    border: 1px solid #f0f0f0;
    position: relative;
    transition: transform 0.3s ease;
}

/* バッジ：半分外に出る配置 */
.step-badge-pill {
    position: absolute;
    top: -24px; /* バッジの高さの半分（48px/2） */
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    padding: 8px 32px;
    border-radius: 30px;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1.5px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.bg-black { background-color: #1a1a1a; }
.bg-red   { background-color: #ef4248; }

/* カード内部コンテンツ */
.step-card-content {
    padding: 25px 30px; /* 50px 40px から大幅に削減 */
}

/* 中央の円との干渉を避けるため、左右で文字の寄せ方を調整 */
.card-tl .step-card-content, .card-bl .step-card-content {
    padding-left: 80px; /* 左側カードは右に寄せる */
}
.card-tr .step-card-content, .card-br .step-card-content {
    padding-left: 80px; /* 右側カードは左に寄せる */
}

/* 2. 見出し（H4）とリストの間の隙間をゼロに近づける */
.title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px; /* 30px から 5px へ削減 */
}

/* 3. アイコンと見出しのサイズを少しコンパクトに調整 */
.step-card-icon {
    font-size: 24px; /* 36px から 24px へ */
    color: #adb5bd;
}

.step-card-title {
    font-size: 26px; /* 文字を大きく */
    font-weight: 800;
    color: #1a1a1a;
}

/* リスト文 */
.step-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-card-list li {
    font-size: 17.5px; /* さらに文字を大きく */
    color: #444;
    padding-left: 32px;
    position: relative;
    margin-bottom: 15px;
    line-height: 1.6;
    font-weight: 500;
}

.step-card-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: #ef4248;
    font-weight: bold;
    font-size: 18px;
    top: 2px;
}

/* スマホ対応 */
@media (max-width: 1000px) {
    .cycle-grid-wide {
        grid-template-columns: 1fr;
        max-width: 550px;
        column-gap: 0;
    }
    .cycle-orbit-path, .cycle-grid-core { display: none; }
    .card-tl .step-card-content, .card-bl .step-card-content,
    .card-tr .step-card-content, .card-br .step-card-content {
        padding: 40px 30px;
    }
}


/* --- 比較表：ホバー演出復活 & スリム版 --- */
.comparison-table-v4 {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
    table-layout: fixed;
}

/* ヘッダー全体の高さ調整 */
.comparison-table-v4 th {
    padding: 18px 10px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    vertical-align: middle;
}

/* アイコンとテキストの横並び設定 */
.header-content-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #4b5563;
}

/* 弊社サービス列：スリムヘッダー */
.comparison-table-v4 th.col-main-red-slim {
    background: #ef4248;
    color: #fff;
    border: none;
    position: relative; /* 影を出すため */
}

.header-main-label-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 900;
}

/* ボディ行・セル設定 */
.comparison-table-v4 td {
    padding: 20px 15px;
    border: 1px solid #f3f4f6;
    text-align: center;
    vertical-align: middle;
    transition: all 0.2s ease; /* ホバー時の変化を滑らかに */
}

/* --- 復活！ホバーアクション --- */

/* 1. 行全体のホバー：見ている行をグレーにして視認性アップ */
.comparison-table-v4 tbody tr:hover td {
    background-color: #f9fafb;
}

/* 2. 弊社サービス列（highlight-column）のホバー：さらに赤く強調 */
.comparison-table-v4 tbody tr td.highlight-column {
    border-left: 3px solid #ef4248 !important;
    border-right: 3px solid #ef4248 !important;
    background: #fffafa; /* デフォルトの薄い赤 */
    position: relative;
}

.comparison-table-v4 tbody tr:hover td.highlight-column {
    background-color: #fdf2f2 !important; /* ホバー時、より「赤み」を増す */
    transform: scale(1.01); /* わずかに浮き上がる演出 */
    z-index: 10;
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.1); /* 軽い影で強調 */
}

/* 1. 列全体に薄い赤背景を敷く */
.comparison-table-v4 td.highlight-column {
    background-color: #fffafa !important;
    border-left: 3px solid #ef4248 !important; /* 左の縦線 */
    border-right: 3px solid #ef4248 !important; /* 右の縦線 */
    position: relative;
}

/* 2. 一番上のヘッダー（弊社サービス）の上の線を赤くする */
.comparison-table-v4 th.col-main-red-slim {
    border-top: 3px solid #ef4248 !important;
    border-left: 3px solid #ef4248 !important;
    border-right: 3px solid #ef4248 !important;
}

/* 3. 一番下のセルの下の線を赤くして枠を閉じる */
.comparison-table-v4 tbody tr:last-child td.highlight-column {
    border-bottom: 3px solid #ef4248 !important;
}

/* 4. 【おまけ】さらに目立たせるための影（浮き上がり効果） */
.comparison-table-v4 th.col-main-red-slim,
.comparison-table-v4 td.highlight-column {
    box-shadow: 5px 0 15px rgba(239, 66, 72, 0.05);
}


/* 3. アイコンの動き：ホバー時に少し動く */
.comparison-table-v4 tbody tr:hover .mark-ok-red i {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}

/* 特徴ラベル（左端） */
.row-label {
    background: #fdfdfd;
    font-weight: 700;
}

/* 弊社列のテキストとアイコン */
.mark-ok-red {
    color: #ef4248;
    font-size: 17px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.txt-main-red {
    color: #ef4248;
    font-size: 13px;
    font-weight: 700;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .comparison-container { overflow-x: auto; }
    .comparison-table-v4 { min-width: 800px; }
}


/* ----- FAQセクション ----- */
.faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-normal);
}

.faq-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-question {
    padding: 25px 30px;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: var(--transition-fast);
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-question i {
    color: var(--primary-color);
    transition: var(--transition-normal);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding: 0 30px 25px 30px;
    color: var(--text-light);
    line-height: 1.8;
}

/* ----- CTAセクション ----- */
.cta {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    font-weight: 700;
    margin-bottom: 30px;
}

.cta-title {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 20px;
}

.cta-description {
    font-size: 18px;
    margin-bottom: 40px;
    opacity: 0.9;
}

.cta-benefits {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.cta-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.cta-benefit i {
    color: var(--accent-color);
    font-size: 20px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.cta-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.8;
}

/* ----- フォームセクション ----- */
.form-section {
    background: var(--bg-light);
}

.form-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    padding: 60px;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
}

.form-header {
    text-align: center;
    margin-bottom: 50px;
}

.form-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.form-description {
    color: var(--text-light);
    font-size: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.form-required {
    color: var(--danger-color);
    font-size: 12px;
    margin-left: 5px;
}

.form-optional {
    color: var(--text-light);
    font-size: 12px;
    margin-left: 5px;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 16px;
    font-family: var(--font-main);
    transition: var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.1);
}

.form-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form-checkbox-privacy {
    margin-bottom: 30px;
}

.form-link {
    color: var(--primary-color);
    text-decoration: underline;
}

/* ----- フッター ----- */
.footer {
    background: var(--secondary-color);
    color: rgba(255, 255, 255, 0.8);
    padding: 80px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 50px;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-description {
    margin-bottom: 25px;
    line-height: 1.8;
}

.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: var(--transition-fast);
}

.footer-social-link:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
}

.footer-title {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer-links a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.footer-contact {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-contact i {
    color: var(--primary-color);
    width: 20px;
}

.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 14px;
}

/* ----- スクロールトップボタン ----- */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 999;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background: var(--primary-dark);
    transform: translateY(-5px);
}

/* ----- レスポンシブデザイン ----- */
@media (max-width: 1024px) {
    :root {
        --section-padding: 80px;
    }

    .section-title {
        font-size: 40px;
    }

/* 上段：待つだけで... */
.hero-title-highlight {
    font-size: 24px !important; /* 1行に収まるサイズ */
    line-height: 1.2 !important;
    white-space: nowrap !important; /* 絶対に改行させない */
    display: block !important;
    margin-bottom: 5px !important;
}

    .problems-grid,
    .solution-grid,
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .features-grid,
    .results-stats {
        grid-template-columns: 1fr;
    }

    .traps-container {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----- レスポンシブデザイン（最適化版） ----- */
@media (max-width: 1024px) {
    :root { --section-padding: 80px; }
    .section-title { font-size: 40px; }
    .hero-title { font-size: 48px; }

    .problems-grid, .solution-grid, .testimonials-grid,
    .features-grid, .results-stats, .traps-container {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root { --section-padding: 60px; }
    
    br {
        display: none;
    }
    

    /* 1. ヘッダー干渉対策：メニューを隠し、ロゴのみにする */
    .nav { display: none !important; }
    .mobile-menu-toggle { display: flex; }

    /* 2. ヒーロー：文字の重なりと不自然な改行を解消 */
    .hero { min-height: auto; padding: 100px 0 40px; }
    .hero-title { 
        font-size: 32px !important; 
        line-height: 1.3 !important; 
        margin-bottom: 20px;
    }
    .hero-title br { display: none; } /* スマホでは強制改行を無効化 */
    .hero-subtitle { font-size: 16px; line-height: 1.6; }

    /* 3. 導入ステップ：影響を#flow内に限定し、他セクションの文字色を守る */
    #flow.roadmap-section-red { background-color: #fdf2f2 !important; }
    #flow .section-title-white, 
    #flow .step-title-white { color: #333333 !important; } /* ここだけ黒 */
    #flow .step-text-white { color: #666666 !important; }
    #flow .roadmap-grid { grid-template-columns: 1fr !important; gap: 40px; }
    #flow .roadmap-line-white { display: none; } /* 横線はスマホでは消す */

    /* 4. チェックリスト：中央寄せでバランス調整 */
    .hero-benefits { 
        flex-direction: column; 
        align-items: center; /* 中央寄せ */
        gap: 12px; 
    }
    .hero-benefit { width: fit-content; text-align: left; }

    /* 5. その他の調整 */
    .hero-stats { grid-template-columns: 1fr; gap: 30px; }
    .section-title, .cta-title { font-size: 28px; }
    .form-row, .form-checkboxes { grid-template-columns: 1fr; }
    .form-wrapper { padding: 30px 20px; }

    /* 6. フッター：2列にしてコンパクトに */
    .main-footer .footer-nav-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px 15px;
    }
    
}

@media (max-width: 768px) {
    .cycle-grid-wide {
      display: flex;          /* ← SPだけ */
      flex-direction: column;
    }
  
    /* 表示順を番号順に固定 */
    .card-tl { order: 1; } /* 01 */
    .card-tr { order: 2; } /* 02 */
    .card-bl { order: 3; } /* 03（将来用） */
    .card-br { order: 4; } /* 04 */



    /* 1. アイコンの色を赤に固定 */
    .summary-content li i, 
    .solution-benefits li i,
    .problems-summary i {
        color: #ef4248 !important;
        min-width: 18px !important;
        margin-right: 8px !important;
    }

    /* 2. 「見切れ」防止のレスポンシブ設定 */
    .summary-content li, 
    .solution-benefits li {
        display: flex !important;
        align-items: flex-start !important; /* 文字が2行になってもアイコンを上に置く */
        
        /* nowrapを解除し、単語の途中で切れないように調整 */
        white-space: normal !important; 
        word-break: keep-all !important; 
        overflow-wrap: anywhere !important;
        
        font-size: 13px !important; /* 見切れ防止のため1px下げる */
        line-height: 1.5 !important;
        width: 100% !important;
    }

    /* 3. 余白を削って文字スペースを限界まで広げる */
    .problems-summary, .solution-card {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


@media (max-width: 480px) {
    .hero-title, .section-title { font-size: 26px !important; }
    .hero-stat-number { font-size: 32px; }
    .result-stat-number { font-size: 40px; }
    }

    /* 1〜4の円のサイズを少し
    

/* --- フッター基本設定 --- */
.main-footer {
    background-color: #1a1a2e; /* 信頼感のあるネイビーブラック */
    padding: 80px 0 30px;
    color: #ffffff;
    font-family: var(--font-main);
}

.footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.footer-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
    position: relative;
    padding-bottom: 10px;
}


.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #b0b5cf;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--primary-color);
}

.mt-20 {
    margin-top: 30px;
}

/* --- コピーライトエリア --- */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    text-align: center;
}

.copyright {
    font-size: 13px;
    color: #777;
    letter-spacing: 0.5px;
}

/* --- フッターレスポンシブ --- */
@media (max-width: 992px) {
    .footer-nav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
}

@media (max-width: 480px) {
    .main-footer {
        padding: 50px 0 30px;
    }
    .footer-nav-grid {
        grid-template-columns: 1fr;
    }
    .footer-col {
        text-align: center;
    }
    .footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ==============================================
   スマホ表示（768px以下）の最終ブラッシュアップ
   ============================================== */
   @media (max-width: 768px) {
    .hero-title {
        padding-top: 40px !important;
        padding-left: 0px !important;  /* 画面端に少しだけ隙間を作る */
        padding-right: 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. フォントサイズを最大化（1行に収まる限界まで） */
    .hero-title-highlight {
        font-size: 28px !important;    /* 24pxから拡大 */
        white-space: nowrap !important;
        letter-spacing: -1px !important; /* 文字間を詰めてさらに大きく */
        display: block !important;
    }

    .hero-title-main {
        font-size: 28px !important;    /* 26pxから拡大 */
        white-space: nowrap !important;
        letter-spacing: -1px !important;
        display: block !important;
    }

    /* 2. チェックリスト：横並び1列に集約 */
    .hero-benefits {
        flex-direction: row !important; /* 縦から横へ */
        justify-content: center;
        gap: 8px !important;
        flex-wrap: nowrap; /* 折り返さない */
        margin-bottom: 30px !important;
    }
    .hero-benefit {
        font-size: 11px !important; /* 1列に収めるため小さく */
        gap: 4px !important;
        white-space: nowrap;
    }
    .hero-benefit i {
        font-size: 14px !important;
    }

    /* 3. 実績数値（3.5倍等）：横並びグリッド化 */
    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* 3列横並び */
        gap: 10px !important;
        padding: 0 5px;
    }
    .hero-stat-number {
        font-size: 40px !important; /* 横並び用に縮小 */
    }    

    .hero-stat-label {
        font-size: 10px !important;
        line-height: 1.2;
        transform: scale(0.9); /* さらに小さくして見切れ防止 */
    }

    /* 4. 課題セクション：アイコンと見出しを横並びに */
    .problem-card {
        padding: 25px !important;
        text-align: left !important;
    }
    .problem-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
        margin-bottom: 15px !important;
        display: inline-flex !important;
        vertical-align: middle;
    }
    .problem-title {
        display: inline-block;
        vertical-align: middle;
        margin-left: 15px;
        margin-bottom: 15px !important;
        font-size: 18px !important;
        width: calc(100% - 75px); /* アイコンの横に収める */
    }

    /* 5. 循環図タイトル：中央寄せとマージン確保 */
    .cycle-section .section-header {
        padding: 0 20px;
        text-align: center !important;
    }
    .cycle-section .section-title {
        margin-left: 0 !important;
        text-align: center !important;
    }
    .tasks-section .section-subtitle {
        margin-bottom: 30px !important; /* 下段マージンを30pxに固定 */
        line-height: 1.6 !important;
        padding: 0 15px !important;    /* 左右の余白を整えて読みやすく */
    }

    .section-header {
        margin-bottom: 30px !important;
    }



    /* 6. 余白の圧縮（安心サポート & 資産構築） */
    .support-trust-area {
        margin-top: 20px !important;
    }
    .support-inner {
        padding-bottom: 10px !important; /* 下段マージン削減 */
    }
    .value-compact-section {
        padding-bottom: 20px !important; /* セクション下部マージン削減 */
    }
    .merit-compact-card {
        margin-bottom: 25px !important; /* カード間の余白を詰める */
    }

    /* 7. 実績セクション：見出しの余白調整 */
    .results-trust-section .section-header-center {
        padding: 0 20px;
        margin-bottom: 40px !important;
    }
    .main-title-white {
        font-size: 24px !important;
        text-align: center !important;
        width: 100%;
    }

    .problems-summary .summary-icon {
        display: none !important;
    }

    .hero-scroll-indicator {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        /* absoluteを解除して無効化 */
        position: static !important; 
    }

    /* 2. 枠内の余白を調整（左詰めを解消し、左右対称に） */
    .problems-summary {
        display: block !important; /* flexからblockに変更して余白を制御しやすく */
        padding: 30px 20px !important; /* 左右を20pxで均等に */
        margin: 0 10px !important; /* 画面端との隙間 */
        width: auto !important;
    }

    /* 3. 見出しの中央寄せ */
    .summary-content h3 {
        text-align: center !important;
        font-size: 18px !important;
        margin-bottom: 20px !important;
    }

    /* 4. リストが左に寄りすぎないよう調整 */
    .summary-list {
        padding-left: 5px !important; /* アイコンがなくなった分、内側の余白を微調整 */
    }

    

    .summary-list li {
        font-size: 13px !important;
        margin-bottom: 15px !important;
        line-height: 1.5 !important;
    }
    
    /* 親要素のレイアウトをリセット */
    .solution-card .solution-visual {
        display: inline-flex !important; /* 横並びの基点 */
        align-items: center !important;
        margin-bottom: 0 !important;
        margin-right: 10px !important;
        width: auto !important;
        position: relative !important;
        float: left !important; /* 強制的に左へ */
    }

    /* アイコンを小さく固定 */
    .solution-card .solution-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 18px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }

    /* タイトルを横に並べて改行を禁止 */
    .solution-card .solution-title {
        display: inline-block !important;
        width: auto !important;
        margin: 0 !important;
        padding-top: 8px !important; /* アイコンとの高さを微調整 */
        font-size: 18px !important;
        white-space: nowrap !important; /* 絶対に改行させない */
        clear: none !important; /* 横並びを維持 */
    }

    /* 説明文だけを下の行に強制落下 */
    .solution-card .solution-description {
        clear: both !important;
        display: block !important;
        padding-top: 15px !important;
    }

    /* 邪魔な光るエフェクトを消去 */
    .solution-card .solution-effect {
        display: none !important;
    }

    .support-lead {
        flex: none !important;      /* 固定幅を解除 */
        width: 100% !important;
        padding: 0 !important;      /* パディングを全リセット */
        margin: 0 0 20px 0 !important; /* 下にだけ少し隙間を作る */
        border-right: none !important;
        border-bottom: 1px solid #eee; /* 区切り線は残す */
        padding-bottom: 15px !important;
    }

    /* 2. 「安心のサポート」バッジとタイトルの隙間 */
    .support-badge {
        margin-bottom: 8px !important;
    }

    .support-title {
        margin-bottom: 5px !important;
        font-size: 20px !important;
    }

    /* 3. リスト全体のパディング（これが最大の原因です） */
    .support-items-grid {
        padding-left: 0 !important;   /* 左の余白を完全に消す */
        gap: 12px !important;         /* リスト同士の間隔を最小限に */
    }

    /* 4. アイコンとテキストの行間 */
    .support-item {
        margin-bottom: 0 !important;
    }
    
    .support-text strong {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }
    
    .support-text span {
        font-size: 12px !important;
        display: block;
        margin-top: 2px;
    }

}