/* =======================================================
   Base & Reset
   ======================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
    background-color: #f0f8ff; /* LP背景色 */
    line-height: 1.6;
    min-height: 100vh;
    padding-bottom: 110px; /* 固定CTAの高さ分 */
}
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
ul {
    list-style: none;
}

/* =======================================================
   Utility & Typography (既存のクラスを再現)
   ======================================================= */
.inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
}
.reg-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    text-align: center;
    padding: 30px 15px;
}
.reg-title span {
    display: inline-block;
}
.cl-ye {
    color: #ffd700; /* 黄色っぽい強調色 */
}
.cl-red {
    color: #ff0000;
}
.y-line {
    /* 既存CSSの再現が必要な場合は別途定義 */
}

/* =======================================================
   Header & Hero Section
   ======================================================= */
header {
    position: relative; /* 固定を解除 */
    background-color: #fff;
    padding: 10px 0;
}
.header-pc {
    display: flex;
    justify-content: center; /* ロゴ中央寄せ */
    align-items: center;
}
.logo img {
    max-width: 150px;
}

.hero {
    background-color: #007bff;
    color: white;
    padding: 60px 20px;
    text-align: center;
}
.campaign-price {
    background-color: #ff0000;
    /* ... (その他のHero, Campaignスタイル定義) ... */
}
/* ... (その他のHero要素のスタイル) ... */

/* =======================================================
   Content Sections
   ======================================================= */
section {
    padding: 30px 0;
}

/* --- 悩みチェックリスト --- */
.bg-check {
    background-color: #fff; /* 既存のCSSに基づき調整 */
    padding: 20px 0;
}
.check-box li {
    font-size: 18px;
    margin-bottom: 10px;
}

/* ★レイアウト崩れ箇所への対処 */
.check-item {
    position: relative;
    text-align: center;
    padding: 20px 0;
}
.solution-block {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    color: #333;
    margin-top: 10px;
    /* この部分の装飾画像（緑の三角形など）はHTML構造が複雑なため、
       背景画像や疑似要素での定義を推奨します。ここではテキストのみの位置を確保。 */
}

/* --- エアコン料金表 --- */
.price-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.price-box .price-card,
.price-card-campaign {
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px; /* カード下のマージンを price-box.gapで吸収 */
}

.price-card-campaign {
    /* 目立つように大きな幅と強調スタイルを適用 */
    width: 100%; 
    max-width: 600px;
    margin: 0 auto 30px;
    border: 3px solid #ff0000;
}

/* PC向けの横並び保証 */
@media (min-width: 769px) {
    .price-box .price-card {
        flex: 0 1 calc(33.333% - 15px); 
    }
}
/* ... (その他の料金要素のスタイル) ... */

/* =======================================================
   Fixed CTA (Mobile/PC Switch)
   ======================================================= */
.fixed-cta {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    z-index: 9999; /* 最前面 */
}

.cta-container {
    width: 100%;
    max-width: 1000px;
    background-color: #fff;
    border-top: 4px solid #ff4500;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.cta-logo-pc { display: block; margin-right: 20px; }
.cta-logo-sp { display: none; }
.cta-pc-buttons, .cta-sp-buttons { display: flex; } /* JSで切り替え */

.fixed-cta .cta-link {
    display: block;
    text-align: center;
    margin: 0 5px;
    flex: 1; 
}
.fixed-cta .cta-link img {
    max-width: 180px; 
}

/* Mobile Layout */
@media (max-width: 768px) {
    body { padding-bottom: 120px; } 

    .cta-container {
        padding: 5px 0;
        flex-wrap: wrap; /* ボタンが2行に分かれても対応 */
    }
    /* モバイルロゴの配置 */
    .cta-logo-sp { 
        display: block; 
        padding: 5px 0; 
        width: 100%; 
        text-align: center;
        border-bottom: 1px solid #eee;
    }
    .cta-logo-pc { display: none; }
    
    /* モバイルCTAボタンの構成（電話とLINE） */
    .cta-pc-buttons { display: none; }
    .cta-sp-buttons { 
        display: flex; 
        width: 100%;
        justify-content: space-around;
        padding: 0 5px;
    }
    .fixed-cta .cta-link img {
        max-width: 100%; 
    }
}

/* PC Layout */
@media (min-width: 769px) {
    .cta-logo-sp { display: none; }
    
    /* PC CTAボタンの構成（フォームとLINE） */
    .cta-pc-buttons { 
        display: flex; 
        width: 50%; /* ロゴの横に配置 */
        justify-content: flex-end;
    }
    .cta-sp-buttons { display: none; }
}

/* ... (その他のセクション) ... */