/* =========================================
   1. 基本設定・トンマナ修正（ロゴカラー適用）
   ========================================= */

/* 背景色の変更（ベージュ除去） */
body.home .siteContainer .reasonsContent,
body.home .siteContainer .voiceContent,
body.contact .contactColumn__box {
    background: #f4fcf4 !important;
}

/* オレンジ色のボタン・アクセントをグリーン＆ブルーへ */
body .site-header .headerInner .headerRight .headerEstimate a,
body a.page_top p.pagetop,
body p.copy,
body .internalScreenbtmBtn a,
body .internalForm__box .postBtn .postDeco .postBg::before,
body .internalForm__box .postBtn .postDeco .postBg::after,
/* トップビジュアルのボタン（擬似要素）を強制的にグリーンへ */
body.home .topVisualFoot .topVisualBtn a .visualBg::before,
body.home .topVisualFoot .topVisualBtn a .visualBg::after {
    background: #8bc53f !important;
    background: linear-gradient(135deg, #8bc53f 0%, #29abe2 100%) !important;
    border-color: #fff !important;
    display: block !important;
    opacity: 1 !important;
}

/* ホバー時の挙動 */
body .site-header .headerInner .headerRight .headerEstimate a:hover {
    background: #fff !important;
    color: #8bc53f !important;
}

/* テキストカラーの変更 */
body .internalTitle span,
body.home .topVisualText p span,
body.home .siteContainer .compareSubtitle,
body.home .siteContainer .reasonsMiddle__top.-bg_ore .mark,
body.home .siteContainer .reasonsFoot__box p,
body.contact .contactComment,
body.error .siteContainer .errorTitle {
    color: #8bc53f !important;
}

body .internalScreenbtmText {
    color: #29abe2 !important;
}

/* 枠線・装飾 */
body .internalForm__box .postArea .zip-code1,
body .internalForm__box .postArea .zip-code2,
body.home .siteContainer .reasonsMiddle__box,
body.home .siteContainer .reasonsFoot__box {
    border-color: #8bc53f !important;
}

/* 見出しの装飾 */
body .internalLowerTitle::before {
    background: #8bc53f !important;
}
body .internalLowerSubtitle::before,
body.home .siteContainer .compareSubtitle::before {
    background: #29abe2 !important;
}

/* ナビゲーションのアクセント */
body footer.siteFooter .footerNav ul li::before,
body .site-header .headerInner .headerRight nav.navigation ul li a:before {
    background: #29abe2 !important;
}
body footer.siteFooter .footerNav ul li a:after,
body .site-header .headerInner .headerRight nav.navigation ul li a:after {
    background: #8bc53f !important;
}

/* フォーム・アコーディオン */
body .internalForm__head {
    background: linear-gradient(90deg, #29abe2 0%, #8bc53f 100%) !important;
}
body .internalForm__box .postCode {
    background: #e6f7ff !important;
}
body.home .siteContainer .faqGroup details.js-details[open] .js-summary .summaryInner {
    background: #d1eff7 !important;
}
body.home .siteContainer .faqGroup details.js-details summary.js-summary .summaryInner {
    background: #f0f9f0 !important;
}
body.home .siteContainer .faqGroup details.js-details summary.js-summary .summaryInner .ore {
    color: #8bc53f !important;
}

/* 三角矢印 */
body .internalScreenbtmBtn a::after,
body .internalForm__box .postBtn .postDeco::after,
body.home .topVisualFoot .topVisualBtn a::after {
    border-color: transparent transparent transparent #8bc53f !important;
}


/* =========================================
   2. メインビジュアル修正（幅広・中央寄せ・画像背景）
   ========================================= */

.topVisualArea {
    background: url('https://solar-meister.com/wp-content/themes/astra-child/assets/img/home/main_image.jpg') no-repeat center center / cover !important;
    min-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.topVisualArea::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    z-index: 1 !important;
}

/* コンテンツコンテナ：ここを広くする */
.topVisualInner {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1400px !important;
    text-align: center !important;
}

/* キャッチコピーとボタンのコンテナ幅 */
.topVisualCopy,
.topVisualFoot {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

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

/* キャッチコピー本体 */
.catchphrase {
    color: #ffffff !important;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.05em !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 15px rgba(41, 171, 226, 0.6) !important;
    text-align: center !important;
    font-size: 26px !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    /* ★ここを変更：下線用の背景設定を削除します */
    background: none !important; /* 背景色を削除 */
    display: inline-block !important; /* 必要であれば残す */
    box-decoration-break: clone !important; /* 必要であれば残す */
    -webkit-box-decoration-break: clone !important; /* 必要であれば残す */
}

/* キャッチコピーの親要素の幅制限を解除 */
body.home .topVisualSubtitile {
    width: 100% !important;
    max-width: 100% !important;
}

/* ボタン形状とサイズ */
.topVisualBtn {
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
}

.topVisualBtn a {
    display: inline-block !important;
    width: auto !important;
    min-width: 350px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}

/* ボタンの中身 */
.topVisualBtn a .visualBg {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 80px !important;
    padding: 15px 40px !important;
    background: linear-gradient(135deg, #8bc53f 0%, #29abe2 100%) !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    font-size: 18px !important;
}

.visualBg span {
    display: block !important;
    font-size: 14px !important;
    margin-bottom: 5px !important;
    opacity: 0.9;
    color: #fff !important;
}

/* PCサイズ調整 */
@media screen and (min-width: 768px) {
    .topVisualArea {
        min-height: 90vh !important;
    }
    .topVisualCopy {
        margin-bottom: 40px !important;
    }
    .catchphrase {
        font-size: 50px !important;
    }
    .topVisualBtn a {
        min-width: 450px !important;
    }
    .topVisualBtn a .visualBg {
        width: 100% !important;
        font-size: 24px !important;
        min-height: 90px !important;
    }
    .visualBg span {
        font-size: 16px !important;
    }
}

/* =========================================
   3. メインビジュアル下のボタンとテキストの横並び調整（さらに特大・ボタン白色枠線・テキスト明るい緑版）
   ========================================= */

/* 親要素（topVisualFoot）: 配置設定 */
.topVisualFoot {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 60px !important; /* 隙間をさらに広げてインパクトを出す */
    width: 100% !important;
    max-width: 1500px !important; /* 親要素の最大幅も少し広げる */
    margin: 60px auto 0 !important; /* 上に余白を追加 */
    padding: 0 30px !important; /* 左右にもパディング */
    flex-direction: row !important;
    box-sizing: border-box !important;
}

/* --- ボタンの装飾 --- */

/* ボタンのコンテナ */
.topVisualBtn {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* ホバー時のトランジションを追加 */
}
.topVisualBtn:hover {
    transform: translateY(-8px) !important; /* ホバーでさらに大きく浮く */
    box-shadow: 0 18px 40px rgba(41, 171, 226, 0.6) !important; /* ホバー時の影を強調 */
}

/* ボタンの中身（aタグ） */
.topVisualBtn a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 550px !important; /* ボタンの幅を最大限に大きく */
    height: auto !important;
    text-decoration: none !important;
    border-radius: 60px !important;
    box-shadow: 0 15px 35px rgba(41, 171, 226, 0.5) !important; /* 影を強調 */
    border: 4px solid #ffffff !important; /* 白い枠線 */
    position: relative !important;
    overflow: visible !important;
}

/* ボタン背景とテキスト */
.topVisualBtn a .visualBg {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 120px !important; /* 高さを最大限に大きく */
    padding: 25px 70px 25px 50px !important; /* 右側に矢印用の余白を増やす */
    background: linear-gradient(135deg, #8bc53f 0%, #29abe2 100%) !important;
    border-radius: 56px !important;
    
    /* メインテキスト */
    color: #fff !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    font-size: 38px !important; /* 文字サイズを最大限に大きく */
    letter-spacing: 0.08em !important; /* 文字間隔を広げて視認性向上 */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; /* 文字の影も強調 */
}

/* ボタン内のサブテキスト（span） */
.visualBg span {
    display: block !important;
    font-size: 20px !important; /* 文字サイズアップ */
    font-weight: 700 !important;
    margin-bottom: 5px !important;
    opacity: 1 !important;
    color: #ffffdd !important; /* さらに明るい黄色でアクセント */
    background: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* ボタンの右矢印アイコン（疑似要素で作成） */
.topVisualBtn a::after {
    content: '' !important;
    display: block !important;
    width: 18px !important; /* 矢印を大きく */
    height: 18px !important;
    border-top: 5px solid #fff !important; /* 矢印の線を太く */
    border-right: 5px solid #fff !important;
    transform: rotate(45deg) !important;
    position: absolute !important;
    right: 50px !important; /* 位置調整 */
    top: 50% !important;
    margin-top: -12px !important; /* 垂直中央補正 */
}


/* --- テキストの装飾 --- */

/* テキストのコンテナ */
.topVisualText {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 700px !important; /* テキストの最大幅もさらに広げる */
    text-align: left !important;
    margin: 0 !important;
    /* 前回追加した枠線・パディング・背景・影を削除 */
    padding: 0 !important;
    box-sizing: border-box !important;
    border: none !important; /* 枠線を削除 */
    border-radius: 0 !important;
    background-color: transparent !important; /* 背景色を透明に */
    box-shadow: none !important; /* 影を削除 */
}

/* テキスト本体 */
.topVisualText p {
    margin: 0 !important;
    font-size: 30px !important; /* 文字サイズ */
    line-height: 1.8 !important;
    font-weight: 700 !important;
    /* 文字の影を調整し、明るい背景でも読みやすく */
    text-shadow: 0 2px 5px rgba(0,0,0,0.6) !important; 
    color: #e0ffe0 !important; /* ★明るい緑色に変更 */
}

/* テキスト内の強調部分（span） */
.topVisualText p span {
    font-size: 42px !important; /* さらに大きく */
    color: #fffa50 !important; /* さらに鮮やかな黄色で強調 */
    background: none !important;
    border-bottom: 5px solid #fffa50 !important; /* 下線を太く */
    /* padding-bottom: 5px !important; */
    /* margin: 0 10px !important; */
}


/* --- モバイル表示での調整（767px以下） --- */
@media screen and (max-width: 767px) {
    .topVisualFoot {
        flex-direction: column !important;
        gap: 35px !important;
        margin-top: 35px !important;
        padding: 0 20px !important;
    }

    .topVisualBtn {
        width: 100% !important;
        max-width: 400px !important;
    }
    
    .topVisualBtn a {
        width: 100% !important;
        min-width: unset !important;
        border: 3px solid #ffffff !important; /* スマホ用枠線 */
    }
    
    .topVisualBtn a .visualBg {
        font-size: 18px !important;
        min-height: 90px !important;
        padding: 20px 40px !important;
    }
    .visualBg span {
        font-size: 16px !important;
    }

    .topVisualBtn a::after {
        width: 12px !important;
        height: 12px !important;
        border-top: 4px solid #fff !important;
        border-right: 4px solid #fff !important;
        right: 30px !important;
        margin-top: -8px !important;
    }

    .topVisualText {
        width: 100% !important;
        max-width:100% !important;
        text-align: center !important;
        /* スマホ用も枠線・背景・影を削除 */
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
    
    .topVisualText p {
        text-align: center !important;
        font-size: 18px !important;
        color: #e0ffe0 !important; /* スマホも明るい緑 */
    }
    
    .topVisualText p span {
        font-size: 33px !important;
        /* border-bottom: 4px solid #fffa50 !important; */
    }
}

/* =========================================
   4. 新しいトップページコンテンツのスタイル (業者ランキング、原則、補助金)
      - 「電気料金が高すぎませんか」セクションのトンマナに合わせた調整
   ========================================= */

/* 全体的なセクションの共通スタイル */
.new-front-section {
    padding: 80px 0 !important; /* 左右のパディングはコンテンツで調整 */
    text-align: center !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    position: relative !important; /* 背景画像や要素の配置用 */
    overflow: hidden !important; /* はみ出し防止 */
}
.new-front-section .astra-container {
    max-width: 1200px !important; /* コンテンツの最大幅 */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
/* internalTitle は既存CSSを利用 */
.new-front-section p.section-description {
    font-size: 1.25em !important;
    line-height: 1.8 !important;
    max-width: 900px !important;
    margin: 0 auto 50px !important;
    color: #444 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
.new-front-section .cta-button {
    display: inline-flex !important; /* アイコンとテキストを中央揃え */
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 50px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1.4em !important;
    font-weight: bold !important;
    border-radius: 60px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25) !important;
    transition: all 0.3s ease !important;
    border: none !important;
    letter-spacing: 0.05em !important;
}
.new-front-section .cta-button:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important;
    opacity: 0.9 !important;
}
.new-front-section .cta-button i {
    margin-left: 15px !important;
    font-size: 1.1em !important;
}


/* 1. 太陽光発電設置業者ランキングセクション (Locca風デザイン) */
.ranking-section {
    background-color: #f8fcfd !important;
    color: #333 !important;
}

.ranking-section .ranking-grid {
    display: flex !important;
    flex-direction: column !important; /* 縦に積むスタイル */
    gap: 50px !important;
    max-width: 1000px !important; /* カード幅を少し広げる */
    margin: 0 auto !important;
}

/* カード全体 */
.ranking-card {
    background-color: #fff !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
    position: relative !important;
    border: 2px solid #e0e0e0 !important;
    padding: 0 !important; /* 内部レイアウトでパディング調整 */
    text-align: left !important;
}

/* 1位を目立たせる */
.ranking-card.rank-1 {
    border: 3px solid #ffd700 !important; /* 金色の枠線 */
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.2) !important;
}

/* ランキングバッジ */
.ranking-card .rank-badge {
    position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    background: #ffd700 !important; /* 金色 */
    color: #fff !important;
    width: 70px !important;
    height: 80px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 1.2em !important;
    z-index: 10 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    border: 4px solid #fff !important;
}
.ranking-card.rank-2 .rank-badge { background: #c0c0c0 !important; } /* 銀 */
.ranking-card.rank-3 .rank-badge { background: #cd7f32 !important; } /* 銅 */

/* 業者名ヘッダー */
.ranking-card h3.company-name {
    background-color: #29abe2 !important; /* メインカラー */
    color: #fff !important;
    padding: 15px 0px 15px 0px !important; /* バッジの分空ける */
    margin: 0 !important;
    font-size: 1.6em !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* メインエリア（キャッチコピー + 画像 + テーブル） */
.ranking-main-area {
    padding: 20px 30px !important;
}

/* キャッチコピーバナー */
.ranking-catch-banner {
    background: linear-gradient(to right, #fffae0, #fff) !important;
    border-left: 5px solid #f39c12 !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.ranking-catch-banner .catch-sub {
    font-size: 0.9em !important;
    color: #f39c12 !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
}
.ranking-catch-banner .catch-main {
    font-size: 1.4em !important;
    color: #e67e22 !important; /* 濃いオレンジ */
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

/* 画像とテーブルの横並び */
.ranking-content-flex {
    display: flex !important;
    gap: 30px !important;
    margin-bottom: 20px !important;
}
.ranking-image {
    flex: 0 0 40% !important; /* 画像エリアの幅 */
}
.ranking-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    border: 1px solid #eee !important;
}

/* スペックテーブル */
.ranking-spec-table {
    flex: 1 !important;
}
.ranking-spec-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.95em !important;
}
.ranking-spec-table th,
.ranking-spec-table td {
    padding: 10px !important;
    border-bottom: 1px solid #eee !important;
    text-align: left !important;
}
.ranking-spec-table th {
    background-color: #f9f9f9 !important;
    width: 30% !important;
    font-weight: normal !important;
    color: #666 !important;
}
.ranking-spec-table td.price {
    color: #e74c3c !important; /* 価格を目立たせる赤 */
    font-weight: bold !important;
    font-size: 1.2em !important;
}
.ranking-spec-table .stars {
    color: #ffc107 !important;
}

/* 特徴リスト */
.ranking-features {
    background-color: #f0f8ff !important; /* 薄い青背景 */
    padding: 20px 30px !important;
    margin: 0 !important;
    list-style: none !important;
}
.ranking-features li {
    margin-bottom: 10px !important;
    color: #333 !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: flex-start !important; /* アイコン位置調整 */
    font-size: 1.05em !important;
}
.ranking-features li:last-child {
    margin-bottom: 0 !important;
}
.ranking-features li i {
    color: #e74c3c !important; /* チェックアイコンを赤に */
    margin-right: 10px !important;
    margin-top: 4px !important; /* テキストとの位置合わせ */
}

/* ボタン */
.ranking-card .detail-button {
    display: block !important;
    width: 100% !important;
    padding: 18px !important;
    text-align: center !important;
    background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important; /* 緑ボタン */
    color: #fff !important;
    font-weight: bold !important;
    font-size: 1.2em !important;
    text-decoration: none !important;
    transition: opacity 0.3s !important;
    box-sizing: border-box !important; /* パディングを含める */
}
.ranking-card .detail-button:hover {
    opacity: 0.9 !important;
}

/* モバイル対応 */
@media screen and (max-width: 767px) {
    .ranking-card h3.company-name {
        font-size: 1.3em !important;
        padding-left: 70px !important;
    }
    .ranking-content-flex {
        flex-direction: column !important; /* 縦並びに */
        gap: 15px !important;
    }
    .ranking-image {
        width: 80% !important;
        margin: 0 auto !important;
    }
    .ranking-spec-table th {
        width: 35% !important;
        font-size: 0.85em !important;
    }
    .ranking-spec-table td {
        font-size: 0.9em !important;
    }
    .ranking-catch-banner .catch-main {
        font-size: 1.2em !important;
    }
    .ranking-features {
        padding: 15px 20px !important;
    }
    .ranking-features li {
        font-size: 0.95em !important;
    }
}


/* 2. 失敗しない業者選びの3原則セクション */
.principles-section {
    background-color: #fff !important; /* 白基調 */
    color: #333 !important;
    /* 背景図形を追加 */
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e0f2f7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 60V0h60v60h-60zm1-59h58v58H1V1z'/%3E%3Cpath d='M60 0H0v60h60V0zM1 1v58h58V1H1z' fill-opacity='0.1'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: 30px 30px !important;
}
.principles-section h2 {
    color: #8bc53f !important; /* 緑系統 */
}
.principles-section .principles-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 40px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}
.principles-section .principle-card {
    background-color: #fff !important;
    border-radius: 15px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
    padding: 30px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}
.principles-section .principle-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}
.principles-section .principle-card .icon-wrapper {
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    margin: 0 auto 25px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #29abe2 0%, #8bc53f 100%) !important; /* アイコン背景 */
    color: #fff !important;
    font-size: 2.5em !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}
.principles-section .principle-card h3 {
    font-size: 1.8em !important;
    color: #29abe2 !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
.principles-section .principle-card p {
    font-size: 1em !important;
    color: #666 !important;
    line-height: 1.7 !important;
}
.principles-section .cta-button {
    background: linear-gradient(135deg, #8bc53f 0%, #28a745 100%) !important;
}


/* 3. 補助金でお得に設置セクション */
.subsidy-section {
    background: linear-gradient(135deg, #29abe2 0%, #8bc53f 100%) !important; /* メイングラデーション */
    color: #fff !important;
    /* 背景に波紋パターンを追加 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='401' r='497' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231f8fbe'/%3E%3Cstop offset='1' stop-color='%2319729d'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='400' cy='400' r='500' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2329abe2'/%3E%3Cstop offset='1' stop-color='%238bc53f'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23a)' fill-opacity='0.3'%3E%3Ccircle cx='400' cy='400' r='100'/%3E%3Ccircle cx='400' cy='400' r='200'/%3E%3Ccircle cx='400' cy='400' r='300'/%3E%3Ccircle cx='400' cy='400' r='400'/%3E%3Ccircle cx='400' cy='400' r='500'/%3E%3C/g%3E%3Cg fill='url(%23b)' fill-opacity='0.3'%3E%3Ccircle cx='400' cy='400' r='100'/%3E%3Ccircle cx='400' cy='400' r='200'/%3E%3Ccircle cx='400' cy='400' r='300'/%3E%3Ccircle cx='400' cy='400' r='400'/%3E%3Ccircle cx='400' cy='400' r='500'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-attachment: fixed !important; /* 背景固定 */
    background-size: cover !important;
}
.subsidy-section h2 {
    color: #fff !important;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
}
.subsidy-section p.section-description {
    color: #eee !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}
.subsidy-section .subsidy-content {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-radius: 15px !important;
    padding: 40px !important;
    max-width: 900px !important;
    margin: 0 auto 50px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    color: #333 !important;
    text-align: left !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}
.subsidy-section .subsidy-content h3 {
    font-size: 2em !important;
    color: #29abe2 !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}
.subsidy-section .subsidy-content h3 i {
    margin-right: 15px !important;
    color: #f39c12 !important;
}
.subsidy-section .subsidy-content p {
    font-size: 1.1em !important;
    line-height: 1.8 !important;
    margin-bottom: 25px !important;
    color: #555 !important;
}
.subsidy-section .subsidy-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}
.subsidy-section .subsidy-content ul li {
    margin-bottom: 12px !important;
    font-size: 1em !important;
    color: #444 !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.5 !important;
}
.subsidy-section .subsidy-content ul li i {
    margin-right: 12px !important;
    color: #8bc53f !important;
    font-size: 1.2em !important;
}
.subsidy-section .cta-button {
    background: #fff !important;
    color: #29abe2 !important;
    box-shadow: 0 6px 20px rgba(255,255,255,0.4) !important;
}
.subsidy-section .cta-button:hover {
    color: #8bc53f !important;
    box-shadow: 0 10px 25px rgba(255,255,255,0.6) !important;
}


/* モバイル対応 (767px以下) */
@media screen and (max-width: 767px) {
    .new-front-section {
        padding: 50px 0 !important;
    }
    .new-front-section h2 {
        font-size: 2em !important;
        margin-bottom: 20px !important;
    }
    .new-front-section p.section-description {
        font-size: 1em !important;
        margin-bottom: 30px !important;
    }
    .new-front-section .cta-button {
        padding: 15px 30px !important;
        font-size: 1.1em !important;
    }
    .new-front-section .cta-button i {
        margin-left: 10px !important;
    }

    /* 各カードのスタイル調整 */
    .ranking-section .ranking-card,
    .principles-section .principle-card,
    .subsidy-section .subsidy-content {
        padding: 25px !important;
        margin-bottom: 30px !important;
        text-align: center !important; /* モバイルでは中央寄せ */
    }
    .ranking-section .ranking-card h3,
    .principles-section .principle-card h3,
    .subsidy-section .subsidy-content h3 {
        font-size: 1.0em !important;
    }
    .ranking-section .ranking-card ul,
    .subsidy-section .subsidy-content ul {
        text-align: left !important; /* リストは左寄せ維持 */
        display: inline-block !important; /* 中央配置のため */
    }
    .principles-section .principle-card .icon-wrapper {
        width: 60px !important;
        height: 60px !important;
        line-height: 60px !important;
        font-size: 2em !important;
        margin-bottom: 20px !important;
    }
    .subsidy-section .subsidy-content h3 {
        justify-content: center !important; /* モバイルでアイコンと見出しを中央寄せ */
    }
    .subsidy-section .subsidy-content h3 i {
        font-size: 1.5em !important;
        margin-right: 10px !important;
    }
    .subsidy-section .subsidy-content p,
    .subsidy-section .subsidy-content ul li {
        font-size: 0.9em !important;
    }
}

/* =========================================
   5. ヘッダー要素の追加スタイル
   ========================================= */

/* 右上「LINEで補助金診断」ボタンのスタイル */
.headerEstimate.line-button {
    margin-left: 20px; /* ナビゲーションとの間隔 */
}
.headerEstimate.line-button a {
    display: inline-flex; /* アイコンとテキストを横並び */
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #29abe2 0%, #8bc53f 100%); /* グラデーション */
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    font-size: 1.1em; /* フォントサイズ調整 */
    letter-spacing: 0.05em;
    min-width: 180px; /* ボタンの最小幅 */
}

.headerEstimate.line-button a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    opacity: 0.9;
}

.headerEstimate.line-button a i {
    margin-right: 8px; /* アイコンとテキストの間隔 */
    font-size: 1.3em; /* アイコンサイズ調整 */
}

/* モバイル時の調整 (必要であれば) */
@media screen and (max-width: 767px) {
    .headerEstimate.line-button {
        display: none; /* モバイルでは表示しない、またはSPメニュー内に含める */
    }
    /* SPメニュー内の「LINEで補助金診断」リンクのスタイル */
    .ham_menu .accordion .menu.slide.firing a[href$="/estimate/"] { /* /estimate/ にリンクするaタグ */
        background: linear-gradient(135deg, #29abe2 0%, #8bc53f 100%);
        color: #fff;
        padding: 15px 20px;
        margin: 10px 20px; /* 上下左右に余白 */
        border-radius: 5px;
        display: block;
        text-align: center;
        font-weight: bold;
        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
        transition: background 0.3s ease;
    }
    .ham_menu .accordion .menu.slide.firing a[href$="/estimate/"]:hover {
        opacity: 0.9;
    }
    .ham_menu .accordion .menu.slide.firing a[href$="/estimate/"] i {
        margin-right: 8px;
    }
}

/* =========================================
   6. スマートフォン表示の追加調整 (レイアウト崩れ・視認性改善)
   ========================================= */

@media screen and (max-width: 767px) {
    /* 全体的なフォントサイズと行間の調整 */
    body {
        font-size: 16px; /* 基本フォントサイズをモバイルで読みやすく */
        line-height: 1.6;
    }

    /* internalTitle (セクションタイトル) の調整 */
    .internalTitle {
        width:80%;
        font-size: 1.8em !important; /* モバイルでの視認性向上 */
        line-height: 1.4 !important;
        margin-bottom: 30px !important;
        padding: 0 15px !important; /* 左右の余白 */
        word-break: keep-all; /* 日本語の不自然な改行を抑制 */
        overflow-wrap: break-word; /* 長い単語は強制改行 */
    }
    .internalTitle span {
        display: inline; /* SPでもspan要素で強調したい場合、改行させない */
    }

    /* new-front-section のパディング調整 */
    .new-front-section {
        padding: 40px 0 !important;
    }
    .new-front-section .astra-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .new-front-section p.section-description {
        font-size: 0.95em !important;
        margin-bottom: 30px !important;
        padding: 0 10px;
        line-height: 1.7;

    }

    /* ヘッダーロゴの調整 */
    .site-header #siteID img {
        max-width: 50%; /* モバイルでのロゴの最大幅 */
        height: auto;
        display: block;
        padding:0px 0px 0px 50px;

    }
    .site-header .headerInner {
        padding: 10px 15px; /* ヘッダーの左右パディング */
        display: flex; /* ロゴとハンバーガーメニューの配置 */

    }
    .site-header .headerLeft {
        flex-grow: 1; /* ロゴを中央に寄せるために幅を広げる */
        text-align: left; /* ロゴは左寄せのまま、全体で調整 */
    }
    .site-header #siteID { /* ロゴのh1要素 */
        margin: 0;
    }

    /* SPメニューボタンの配置 */
    .sp_nav {
        flex-shrink: 0; /* スペース確保 */
    }

    /* SPメニュー本体の背景と位置調整 */
    .ham_menu {
        background-color: rgba(41, 171, 226, 0.98) !important; /* 青系統の背景色を適用 */
        position: fixed !important; /* 画面に固定 */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 9999 !important; /* 他の要素より手前に表示 */
        overflow-y: auto !important; /* メニューが多い場合にスクロール可能に */
        -webkit-overflow-scrolling: touch; /* iOSでのスムーズスクロール */
        padding-top: 60px; /* ヘッダーと被らないように */
        box-sizing: border-box;
        display: none; /* デフォルトは非表示 */
        opacity: 0; /* フェードイン/アウト用 */
        transition: opacity 0.3s ease;
    }
    .ham_menu.active { /* JavaScriptでactiveクラスが付与されたら表示 */
        display: block;
        opacity: 1;
    }

    .ham_menu .ham_inner {
        padding: 20px 15px;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.2); /* 区切り線 */
        margin-bottom: 20px;
    }
    .ham_menu .accordion {
        padding: 0 15px !important;
    }
    .ham_menu .accordion .menu.slide.firing a {
        color: #fff !important;
        padding: 15px 10px !important;
        font-size: 1.1em !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important; /* 各メニュー項目の区切り線 */
        display: block;
        text-align: left;
        text-decoration: none;
    }
    .ham_menu .accordion .menu.slide.firing:last-child a {
        border-bottom: none !important;
    }

    /* 各セクションのカード要素の調整 */
    .ranking-section .ranking-card,
    .principles-section .principle-card,
    .subsidy-section .subsidy-content {
        padding: 25px !important;
        margin-bottom: 30px !important;
        text-align: left !important; /* 基本は左寄せに戻す */
    }
    .ranking-section .ranking-card .rank-badge {
        /* margin-bottom: 15px !important; */
    }
    .principles-section .principle-card .icon-wrapper {
        margin: 0 auto 20px !important; /* 中央寄せ */
    }
    .principles-section .principle-card h3 {
        font-size: 1.6em !important;
        line-height: 1.4;
    }
    .subsidy-section .subsidy-content h3 {
        font-size: 1.6em !important;
        justify-content: flex-start !important; /* 左寄せに戻す */
    }
    .subsidy-section .subsidy-content h3 i {
        font-size: 1.3em !important;
    }
    .new-front-section .cta-button {
        padding: 15px 35px !important;
        font-size: 1.1em !important;
    }

    /* トップビジュアルエリアの調整 */
    .topVisualArea {
        padding: 60px 0 !important; /* 上下のパディング調整 */
        min-height: auto !important; /* 高さの固定を解除 */
    }
    .topVisualInner {
        padding: 0 15px !important;
    }
    .topVisualSubtitile p.catchphrase {
        font-size: 1.3em !important; /* キャッチコピーのフォントサイズ */
        line-height: 1.5 !important;
        word-break: keep-all; /* 日本語の不自然な改行抑制 */
    }
    .topVisualFoot {
        flex-direction: column; /* ボタンとテキストを縦並び */
        align-items: center;
    }
    .topVisualBtn {
        margin-bottom: 20px !important; /* ボタンとテキストの間隔 */
        width: 100%; /* ボタン幅を広げる */
        max-width: 300px; /* 最大幅 */
    }
    .topVisualBtn a {
        /* padding: 18px 0 !important; */ /* パディング調整 */
        font-size: 1.2em !important;
    }
    .topVisualText {
        width: 50%; /* ボタン幅を広げる */
        font-size: 0.9em !important;
        text-align: center; /* これを追加 */
    }

}

/* principles-section のアイコンと丸の調整 */
.principles-grid .principle-card .icon-wrapper {
    display: flex; /* Flexboxを有効にする */
    justify-content: center; /* 子要素（アイコン）を水平方向の中央に揃える */
    align-items: center;     /* 子要素（アイコン）を垂直方向の中央に揃える */

    /* 必要に応じて、アイコンのサイズ調整もここで行います */
    /* 例:
    width: 80px;  // 丸のサイズに合わせる
    height: 80px; // 丸のサイズに合わせる
    border-radius: 50%; // もし丸の形状がここで定義されているなら
    */
}

/* アイコン自体のスタイル調整（もし必要なら） */
.principles-grid .principle-card .icon-wrapper .fas {
    /* アイコンのfont-sizeが丸に対して小さすぎる、大きすぎる場合に調整 */
    /* font-size: 3em; */ /* 必要に応じて調整 */
    /* color: #FFD700; */ /* アイコンの色を変更したい場合 */
    /* line-height: 1; */ /* 行の高さのリセットは Flexbox を使う場合は必須ではないことが多いですが、
                          * 念のため入れても良いでしょう */
}

/* ranking-grid の全体レイアウト (PC向け) */
.ranking-grid {
    display: grid; /* Grid レイアウトを使う */
    grid-template-columns: repeat(3, 1fr); /* 3列均等幅 */
    gap: 30px; /* カード間の間隔 */
    padding: 20px;
    max-width: 1200px; /* 最大幅を設定 */
    margin: 0 auto; /* 中央揃え */
}

/* 各ランキングカードの基本スタイル */
.ranking-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 25px;
    text-align: center;
    position: relative; /* バッジ配置のため */
    display: flex; /* 内部コンテンツをFlexで管理 */
    flex-direction: column; /* 縦並び */
    justify-content: space-between; /* コンテンツを上下に配置 */
}

/* No.1カードの特別なスタイル (例: 青いボーダーと影、少し上に浮かせたような効果) */
.ranking-card:first-child { /* 最初のカードに適用 */
    border: 3px solid #007bff; /* 目立つボーダー */
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2); /* 強めの影 */
    transform: translateY(-10px); /* 少し上に浮かせたように見せる */
    transition: transform 0.3s ease; /* ホバーエフェクト用 */
}
.ranking-card:first-child:hover {
    transform: translateY(-15px);
}


/* ランキングバッジのスタイル */
.ranking-card .rank-badge {
    position: absolute;
    top: -15px; /* カードから少しはみ出すように調整 */
    left: -15px;
    background-color: #ffc107; /* 目立つ色 */
    color: #fff;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1em;
    transform: rotate(-10deg); /* 少し回転させる */
    z-index: 10;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
/* No.1のバッジは色を変えるなど、さらに目立たせても良いでしょう */
.ranking-card:first-child .rank-badge {
    background-color: #007bff; /* 例: 青色 */
}


/* 業者名のスタイル */
.ranking-card h3 {
    font-size: 1.5em;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #333;
}

/* 星評価のスタイル */
.ranking-card .stars {
    color: #ffc107; /* 星の色 */
    font-size: 1.2em;
    margin-bottom: 20px;
}
.ranking-card .stars .fas, .ranking-card .stars .far {
    margin-right: 2px;
}

/* 特徴リストのスタイル */
.ranking-card ul {
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0;
    margin: 20px 0;
    text-align: left; /* リスト項目を左寄せに */
    flex-grow: 1; /* コンテンツが伸びるように */
}
.ranking-card ul li {
    display: flex; /* アイコンとテキストを横並び中央揃え */
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.95em;
    color: #555;
}
.ranking-card ul li .fas {
    color: #28a745; /* チェックアイコンの色 */
    margin-right: 10px;
    font-size: 1.1em;
}

/* CTAボタンのスタイル */
.ranking-card .detail-button {
    display: block; /* ブロック要素にして幅いっぱいに */
    background: linear-gradient(45deg, #007bff, #0056b3); /* グラデーション背景 */
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: background 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}
.ranking-card .detail-button:hover {
    background: linear-gradient(45deg, #0056b3, #007bff);
}
.ranking-card .detail-button .fas {
    margin-left: 8px; /* 矢印アイコンとテキストの間隔 */
}

/* ====== レスポンシブ対応 (スマートフォン向け) ====== */
@media (max-width: 768px) { /* 768px以下で適用 */
    .ranking-grid {
        grid-template-columns: 1fr; /* 1列にする */
        gap: 20px;
        padding: 15px;
    }

    .ranking-card {
        padding: 20px;
    }

    .ranking-card:first-child {
        transform: translateY(0); /* スマホでは浮かせない */
        border: 2px solid #007bff;
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.15);
    }
    .ranking-card:first-child:hover {
        transform: translateY(0);
    }

    .ranking-card .rank-badge {
        top: -10px;
        left: -10px;
        padding: 6px 12px;
        font-size: 1em;
    }

    .ranking-card h3 {
        font-size: 1.3em;
    }

    .ranking-card .stars {
        font-size: 1.1em;
        margin-bottom: 15px;
    }

    .ranking-card ul {
        margin: 15px 0;
    }

    .ranking-card ul li {
        font-size: 0.9em;
        margin-bottom: 8px;
    }

    .ranking-card .detail-button {
        padding: 10px 15px;
        font-size: 0.95em;
    }
}

/* =========================================
   基本レイアウトとヘッダー
   ========================================= */
.site-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #fff; /* デフォルトの背景色 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.headerInner {
    display: flex;
    /* justify-content: space-between; */ /* ロゴを中央に寄せるため削除またはコメントアウト */
    justify-content: center; /* ロゴを水平方向に中央揃え */
    align-items: center;
    max-width: 1200px; /* 最大幅 */
    margin: 0 auto;
    padding: 15px 20px;
}

/* headerLeftは不要になったが、HTMLに残す場合はflexのコンテナとして機能させる */
.headerLeft {
    /* flex-grow: 0; flex-shrink: 0; */ /* 不要なflexプロパティは削除 */
    /* width: auto; */
    text-align: center; /* ロゴ自体を中央に */
}

#siteID {
    margin: 0; /* h1タグのデフォルトマージンをリセット */
    padding: 0;
}

#siteID a {
    display: block; /* aタグをブロック要素にして中央揃えを確実に */
}

#siteID img {
    height: 70px; /* ロゴの高さ調整 (PC向け) */
    width: auto;
    max-width: 100%; /* 親要素からはみ出さないように */
    display: block; /* 画像のinline余白をなくす */
    margin: 0 auto; /* ロゴ画像を水平中央に配置 */
}

/* 不要になったナビゲーション関連のスタイルは全て削除またはコメントアウト */
/*
.navigation { display: none; }
.sp_nav { display: none; }
.ham_menu { display: none; }
#ham_nav { display: none; }
body.no-scroll { overflow: auto !important; }
*/

/* =========================================
   メディアクエリ (スマホ向け)
   ========================================= */
@media screen and (max-width: 767px) {
    .headerInner {
        padding: 10px 15px; /* スマホでのパディング */
    }

    #siteID img {
        height: 35px; /* スマホでのロゴの高さ */
    }
}