/* ==========================================================================
   デザイナーズ手作業仕様：FV1000px連動・文字色＆視認性完全最適化版
   ========================================================================== */

/* 全体のリセット設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #23364f; /* ご指定のメインフォントカラー（ディープネイビー） */
    background-color: #ffffff;
    line-height: 1.6;
    -webkit-text-size-adjust: none; /* スマホによる勝手な文字サイズ変更を禁止 */
}

/* トンマナ：ご指定のカラー */
:root {
    --theme-color: #1cbbb2; /* メインカラー（翡翠グリーン） */
    --sub-color: #e5f9f6;   /* サブカラー（明るいミント） */
    --text-main: #23364f;   /* ご指定のメイン文字色 */
    --accent-red: #ff5722;  /* アクセントカラー */
}

/* コンテナ設定：1000pxのFV画像から視覚的に美しく繋がる横幅 */
.container {
    width: 100%;
    max-width: 1000px; /* FVの横幅1000pxに完全同期 */
    margin: 0 auto;
    padding: 90px 40px; /* 高級感を出すための大胆な余白 */
    text-align: center;
}
img.responsive-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   ご指定の文字サイズ（1000px幅基準の大型ジャンプ率）
   ========================================================================== */
#head1 { background: url("../images/header_01.png") no-repeat top center; height:    357px; } 
#head2 { background: url("../images/header_02.png") no-repeat top center; height:    460px; } 
#head3 { background: url("../images/header_03.png") no-repeat top center; height:    549px; } 
#head4 { background: url("../images/header_04.png") no-repeat top center; height:    114px; } 
#head5 { background: url("../images/header_05.png") no-repeat top center; height:    142px; }

.form { background: url("../images/form.png")  top center;}



   .section-title {
    font-size: 86px; /* ご指定の見出しサイズ */
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 60px;
    color: var(--text-main); /* メイン文字色を適用 */
    letter-spacing: -0.02em;
    word-break: break-all;
}

/* 小見出し */
.sub-title, 
.solution-connect h3, 
.balance-box h4, 
.step-card h4 {
    font-size: 55px; /* ご指定の小見出しサイズ */
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 30px;
    color: var(--theme-color);
}

.sub-title {
    display: inline-block;
    padding: 10px 30px;
    background-color: var(--sub-color);
    color: var(--theme-color);
    border-radius: 8px;
    margin-bottom: 40px;
}

/* 通常の文章・リスト内のテキストをすべてボールドの #23364f に統一 */
body, p, li, td, th, .bad-list li, .good-list li, .diagnosis-list li {
    font-size: 42px; /* ご指定の文章サイズ */
    font-weight: bold;
    color: var(--text-main); /* 全体の基本文字色 */
    line-height: 1.7;
}

/* 装飾用パーツ */
.marker {
    background: linear-gradient(transparent 50%, #fff275 50%);
    font-weight: 900;
}
.highlight {
    color: var(--theme-color);
}
.highlight-red {
    color: var(--accent-red);
}

/* ==========================================================================
   各セクション：完全縦並びデザイナーズ・ストリーム
   ========================================================================== */

/* ■ 2. 共感セクション */
.empathy-section { background-color: #ffffff; }
.bad-list {
    list-style: none;
    text-align: left;
    margin-bottom: 50px;
}
.bad-list li {
    position: relative;
    padding: 30px 30px 30px 90px;
    margin-bottom: 25px;
    background-color: var(--sub-color);
    border-radius: 12px;
    border-left: 12px solid var(--accent-red);
    color: var(--text-main);
}
.bad-list li::before {
    content: "✕";
    position: absolute;
    left: 35px;
    color: var(--accent-red);
    font-weight: 900;
}
.alert-box {
    background-color: #fff8f6;
    border: 3px dashed #ffa7a7;
    border-radius: 16px;
    padding: 40px;
    text-align: left;
}

/* ■ 3. 問題の本質セクション */
.essence-section { background-color: var(--sub-color); }
.essence-body p { margin-bottom: 40px; text-align: left; }
.fade-text { color: var(--text-main); opacity: 0.7; margin: 50px 0 30px; text-align: center !important; }

.negative-loop {
    background-color: #ffffff;
    padding: 40px 30px;
    border-radius: 24px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0, 118, 122, 0.05);
}
.loop-step {
    background-color: var(--sub-color);
    padding: 25px;
    border-radius: 12px;
    font-weight: 900;
    color: var(--text-main);
}
.loop-arrow { 
    color: var(--theme-color); 
    margin: 15px 0; 
    font-size: 35px; 
    font-weight: bold;
}
.result-text { 
    font-size: 46px !important;
    color: var(--accent-red) !important; 
    text-align: center !important;
}

/* ■ 4. 解決策セクション（★背景が濃い緑の部分：文字は全て#fff） */
.solution-section { background-color: var(--theme-color); }
.solution-section .section-title.white { color: #ffffff !important; }
.solution-section .sub-title.white { background-color: rgba(255,255,255,0.2); color: #ffffff !important; }
.solution-section p, .solution-section .sol-footer { color: #ffffff !important; }

.clear-box {
    display: block; 
    margin-bottom: 40px;
}
.clear-item {
    background-color: #ffffff;
    color: var(--text-main) !important; /* カード内部はネイビーにして可読性確保 */
    padding: 40px;
    border-radius: 20px;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.clear-item p { color: var(--text-main) !important; }
.clear-item .label {
    display: inline-block;
    font-weight: 900;
    padding: 5px 25px;
    border-radius: 8px;
    font-size: 28px;
    margin-bottom: 20px;
    color: #fff !important;
}
.clear-item.target .label { background-color: var(--theme-color); }
.clear-item.nontarget .label { background-color: #778899; }
.sol-footer { font-size: 46px; font-weight: 900; }

/* ■ 5. CTAエリア */
.cta-area { width: 100%; max-width: 1000px; margin: 0 auto; padding: 40px 20px; text-align: center; }

/* ■ 6. 強み（コア）セクション */
.core-section { background-color: #ffffff; }
.block-label {
    display: inline-block;
    padding: 10px 35px;
    font-weight: 900;
    border-radius: 12px 12px 0 0;
    font-size: 32px;
}
.block-label.bad { background-color: #78909c; color: #fff; }
.block-label.good { background-color: var(--theme-color); color: #fff; }

.problem-disconnect {
    border: 4px solid #cfd8dc;
    border-radius: 0 20px 20px 20px;
    padding: 40px 30px;
    margin-bottom: 60px;
    background-color: #f8f9fa;
}
.dis-list { 
    list-style: none; 
    display: block; 
    margin: 25px 0; 
}
.dis-list li { 
    background-color: #ffffff; 
    border: 2px solid #cfd8dc; 
    padding: 20px; 
    border-radius: 12px; 
    margin-bottom: 15px;
    color: #607d8b; 
    text-align: center;
}

.solution-connect {
    border: 5px solid var(--theme-color);
    border-radius: 0 24px 24px 24px;
    padding: 50px 30px;
    background-color: var(--sub-color);
}
.solution-connect h3 { color: var(--text-main); margin-bottom: 20px; }
.connect-lead { margin-bottom: 45px; }

.role-grid { 
    display: block; 
    margin-bottom: 40px; 
}
.role-card {
    display: block; 
    background-color: #ffffff;
    border-radius: 16px;
    margin-bottom: 25px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 118, 122, 0.08);
    text-align: left;
}
.role-name {
    background-color: var(--theme-color);
    color: #fff;
    font-weight: 900;
    width: 100%; 
    padding: 15px 30px;
    font-size: 42px;
}
.role-card p { padding: 30px; color: var(--text-main); }
.core-summary { font-size: 46px; font-weight: 900; border-top: 3px dashed #b2dfdb; padding-top: 40px; }

/* ■ 7. 広告活用（差別化） */
.ad-section { background-color: #ffffff; }
.balance-grid { display: block; margin-bottom: 40px; }
.balance-box { padding: 40px; border-radius: 20px; text-align: left; margin-bottom: 30px; }
.balance-box.merit { background-color: var(--sub-color); border: 2px solid #b2dfdb; }
.balance-box.demerit { background-color: #fafafa; border: 2px solid #e0e0e0; }
.balance-box h4 { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 4px solid #ccc; }
.balance-box.merit h4 { color: var(--theme-color); border-bottom-color: var(--theme-color); }
.balance-box.demerit h4 { color: var(--text-main); border-bottom-color: #cccccc; }
.balance-box ul { list-style: none; }
.balance-box li { margin-bottom: 20px; position: relative; padding-left: 45px; color: var(--text-main); }
.balance-box.merit li::before { content: "●"; position: absolute; left: 0; color: var(--theme-color); }
.balance-box.demerit li::before { content: "・"; position: absolute; left: 0; color: #888; }

.ad-conclusion { background-color: #fff9c4; border: 2px solid #fff59d; border-radius: 20px; padding: 40px; position: relative; }
.conclusion-badge { position: absolute; top: -25px; left: 40px; background-color: var(--accent-red); color: #fff; font-size: 24px; font-weight: 900; padding: 5px 25px; border-radius: 8px; }

/* ■ 8. 仕組みセクション */
.system-section { background-color: var(--sub-color); }
.step-container { display: block; margin-bottom: 40px; }
.step-card {
    position: relative;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px 40px 40px 140px;
    text-align: left;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}
.step-num {
    position: absolute;
    left: 40px;
    top: 45px;
    background-color: var(--theme-color);
    color: #fff;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 36px;
}
.step-card h4 { margin-bottom: 10px; color: var(--theme-color); font-weight: 900; }
.step-card p { color: var(--text-main); }
.system-footer { font-size: 46px; font-weight: 900; }

/* ==========================================================================
   ■ 9. 導入後の変化セクション（★白文字バグ修正箇所）
   ========================================================================== */
.after-section { 
    background-color: var(--sub-color); /* 明るいミント背景 */
    border-top: 6px solid var(--theme-color); 
    border-bottom: 6px solid var(--theme-color); 
}

/* タイトルとサブタイトルを強制的にディープネイビー（#23364f）に指定 */
.after-section .section-title.gr {
    color: #23364f !important;
}
.after-section .sub-title.white {
    background-color: rgba(0, 118, 122, 0.15);
    color: var(--theme-color) !important;
}

/* 縦並びのチェックリスト */
.good-list { 
    list-style: none; 
    text-align: left; 
    margin: 0 auto 40px; 
    padding: 0;
}
.good-list li { 
    position: relative; 
    padding: 25px 25px 25px 90px; 
    margin-bottom: 20px; 
    background-color: #ffffff; /* 各リストを白いカードにして読みやすく独立 */
    border-radius: 12px; 
    color: #23364f !important; /* フォントカラーを確実にネイビーに指定 */
    font-size: 42px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.good-list li::before {
    content: "✓";
    position: absolute;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-color);
    font-weight: 900;
    font-size: 50px;
}

/* 下部のまとめボックス */
.change-summary { 
    font-size: 46px; 
    font-weight: 900; 
    background-color: #ffffff; 
    padding: 40px; 
    border-radius: 20px; 
    border: 4px solid var(--theme-color); 
    color: #23364f !important; /* フォントカラーを確実にネイビーに指定 */
}
.gold-text { 
    color: var(--theme-color) !important; /* 文字を目立つメインの翡翠色へ変更 */
    font-size: 52px; 
    display: block; 
    margin-top: 15px; 
    font-weight: 900; 
}

/* ==========================================================================
   ■ 10. 比較表セクション
   ========================================================================== */
/* ==========================================================================
   ■ 10. 比較表セクション（2列構成・After緑枠完全最適化）
   ========================================================================== */
.compare-section { 
    background-color: #ffffff; 
}

/* スマホでの画面ハミ出しを防ぐコンテナ */
.table-responsive { 
    width: 100%; 
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 20px;
}

/* 1000px基準の大型2列テーブル設計 */
.compare-table { 
    width: 100%; 
    min-width: 900px; /* 巨大な文字が潰れないよう横幅を確保 */
    border-collapse: collapse; 
    table-layout: fixed; /* 2列の横幅を完全に均等（50%ずつ）にする設定 */
}

.compare-table th, 
.compare-table td { 
    border: 3px solid #e0e0e0; 
    padding: 40px 20px; /* 文字サイズに合わせて余白を贅沢に確保 */
    text-align: center; 
    font-size: 42px; /* ご指定の文章サイズ */
    font-weight: bold;
    width: 50%; /* 2列なので均等配置 */
}

/* --------------------------------------------------------------------------
   【最重要】2列構造に合わせたBefore / Afterのカラー制御
   -------------------------------------------------------------------------- */

/* 左側：1列目【Before】をグレーダウンさせて引き立て役に */
.compare-table th:nth-child(1) { 
    background-color: #e0e0e0 !important; 
    color: #555555 !important; 
}
.compare-table td:nth-child(1) { 
    background-color: #fafafa !important; 
    color: #777777 !important; 
    font-weight: bold;
}

/* 右側：2列目【After（トレタ）】をメインカラーの緑枠＆薄緑背景にして大強調 */
.compare-table th:nth-child(2) { 
    background-color: var(--theme-color) !important; /* 翡翠グリーン */
    color: #ffffff !important; /* 文字色は白（#fff） */
}
.compare-table td:nth-child(2) { 
    background-color: var(--sub-color) !important; /* 明るいミント背景 */
    color: var(--text-main) !important; /* 読みやすいディープネイビー */
    font-weight: 900; /* After側をより太くして視覚的勝利を演出 */
    border: 5px solid var(--theme-color) !important; /* 目立つ緑枠 */
}

/* 既存のHTMLクラス名（toreta-col や text-red）の干渉を強制リセット */
.font-bold { 
    font-weight: 900; 
}
.toreta-col, .text-red { 
    /* HTML側に残っている古い赤文字や背景のクラスを無効化し、
       1列目のグレーダウンに自動で馴染ませるプロのバグ回避技 */
    background-color: transparent !important;
    color: inherit !important; 
}

.after_col{
	color: #1cbbb1 !important;
}
/* ■ 11. メッセージセクション */
.message-section { background: linear-gradient(180deg, #ffffff, var(--sub-color)); }
.message-p { font-size: 46px; margin-bottom: 20px; font-weight: 900; color: var(--text-main); }
.message-p.font-large { font-size: 52px; line-height: 1.6; margin-top: 40px; }

/* ■ 12. オファーセクション（★背景が黒〜紺の非常に濃い部分：文字は全て#fff） */
.offer-section { background: linear-gradient(135deg, #111e24 0%, #1a3038 100%); }
.offer-section .section-title.white { color: #ffffff !important; }
.offer-section .sub-title.white { background-color: rgba(255,255,255,0.2); color: #ffffff !important; }
.offer-section p, .offer-section li { color: #ffffff !important; }
.diagnosis-list { list-style: none; text-align: left; margin: 0 auto 40px; }
.diagnosis-list li { 
    position: relative; 
    padding: 25px 25px 25px 80px; 
    margin-bottom: 20px; 
    background-color: rgba(255,255,255,0.05); 
    border-radius: 12px; 
}
.diagnosis-list li::before {
    content: "●";
    position: absolute;
    left: 35px;
    color: var(--theme-color);
    top: 24px;
}
.offer-footer { font-size: 46px; font-weight: 900; color: #fff176 !important; }

/* ■ 13. フッター */
.footer-section { background-color: #111a1d; color: #ffffff; text-align: center; padding: 60px 20px; }
.footer-links { margin-bottom: 25px; }
.footer-links a { color: #b2dfdb; text-decoration: none; margin: 0 20px; font-weight: bold; font-size: 32px; }
.copyright { color: #607d8b; margin-top: 25px; font-size: 28px; }

/* 大画面（PC等）の最大幅制御 */
@media (min-width: 1001px) {
    body { background-color: #eef2f3; }
    .empathy-section, .essence-section, .solution-section, .core-section, .ad-section, .system-section, .after-section, .compare-section, .message-section, .offer-section, .footer-section {
        max-width: 1000px;
        margin: 0 auto;
    }
}

#footer {  
	background-color: #135da4;
	text-align: center;
	color: #fff;
	padding: 0;
	font-size: 15px;
}

.footer_a{
	text-decoration: none;
	color: #fff;
	font-size: 15px;
}