/* ベーススタイル（リセット含む） */
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        line-height: 1.6;
        color: #333;
        padding-bottom: 60px;
    }

    /* セクション全体 */
    .reason-section {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
    }

    /* 大見出し */
    .section-title {
        background-color: #d2e4fb;
        /* background-color: #d8f0c9; */
        color: #003366;
        /* color: #2e7d32; */
        text-align: center;
        padding: 15px 10px;
        margin-bottom: 30px;
        font-size: 24px;
        font-weight: bold;
        border-radius: 4px;
    }

    /* グリッドコンテナ（カードの配置） */
    .cards-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* PCは3列 */
        gap: 20px; /* カード間の隙間 */
    }

    /* 個別カード */
    .card {
        background: #fff;
        border: 1px solid #eee;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        padding: 15px;
        display: flex;
        flex-direction: column;
    }

    /* カードのタイトル */
    .card-title {
        /* color: #2e7d32; */
        color: #003366;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 10px;
        margin: 0 0 15px 0;
        border-bottom: 2px solid #003366;
        /* border-bottom: 2px solid #2e7d32; */
        line-height: 1.4;
    }
    .card-title span {
        display: block;
        font-size: 1.1em;
        margin-top: 5px;
    }

    /* カードの中身（画像＋テキスト） */
    .card-body {
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }

    /* 画像エリア */
    .card-image {
        flex: 0 0 80px; /* 画像の幅を固定 */
        text-align: center;
    }
    .card-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* テキストエリア */
    .card-text {
        font-size: 14px;
        margin: 0;
        text-align: left;
    }

    /* --- レスポンシブ対応 --- */

    /* タブレット向け (900px以下) */
    @media (max-width: 900px) {
        .cards-grid {
            grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
        }
        .section-title {
            font-size: 20px;
        }
    }

    /* スマホ向け (600px以下) */
    @media (max-width: 600px) {
        .cards-grid {
            grid-template-columns: 1fr; /* 1列に変更 */
        }
        .section-title {
            font-size: 18px;
            padding: 10px;
        }
        .card-body {
            align-items: center;
        }
    }

    .product-section {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        font-family: "Helvetica Neue", Arial, sans-serif;
    }

    /* 緑色の帯見出し */
    .product-section-title {
        background-color: #d2e4fb;
        /* color: #2e7d32; */
        color: #003366;
        padding: 15px 20px;
        margin-bottom: 20px;
        font-size: 24px;
        font-weight: bold;
        border-radius: 4px;
    }

    /* リード文 */
    .product-lead {
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 1.6;
    }

    /* 商品カード全体 */
    .product-card {
        border: 1px solid #ddd;
        border-top: 5px solid #ddd;
        background: #fff;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .product-card {
        border-top: none;
        border: 2px solid #e0e0e0;
    }

    /* 商品名見出し（左に緑のバー） */
    .product-name {
        font-size: 18px;
        font-weight: bold;
        margin: 0 0 20px 0;
        padding-left: 15px;
        border-left: 8px solid #014ca6;
        line-height: 1.4;
    }

    /* コンテンツエリア（左右分割） */
    .product-body {
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }

    /* 左側：スペック・画像 */
    .product-left {
        flex: 1;
        min-width: 0; /* Flexアイテムの縮小許容 */
    }

    .spec-text {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .product-img-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 15px 0;
    }
    .product-img-main {
        width: 70%;
        height: auto;
    }
    .product-img-remote {
        width: 15%;
        height: auto;
    }

    .dimension-text {
        font-size: 13px;
        color: #333;
        line-height: 1.5;
    }

    /* 右側：価格・ボタン */
    .product-right {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* 価格テーブル */
    .price-table {
        width: 100%;
        border: 1px solid #ccc;
        margin-bottom: 15px;
        border-collapse: collapse;
    }
    .price-table td {
        padding: 10px;
        border-bottom: 1px solid #ccc;
        vertical-align: middle;
    }
    .price-table tr:last-child td {
        border-bottom: none;
    }

    .price-label {
        font-size: 13px;
        color: #555;
    }
    .price-value-row {
        text-align: right;
    }
    .price-value-main {
        font-size: 24px;
        color: #d32f2f;
        font-weight: bold;
    }
    .price-tax {
        font-size: 12px;
        color: #333;
    }

    /* 合計金額エリア */
    .total-price-area {
        text-align: right;
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: bold;
    }
    .total-price-val {
        font-size: 32px;
        color: #d32f2f;
        margin-left: 10px;
    }

    /* 詳細ボタン */
    .detail-btn {
        display: block;
        background-color: #3980d6;
        color: #fff;
        text-align: center;
        padding: 15px;
        text-decoration: none;
        font-weight: bold;
        border-radius: 4px;
        transition: background-color 0.3s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .detail-btn:hover {
        background-color: #043b7f;
    }

    /* レスポンシブ対応 */
    @media (max-width: 768px) {
        .product-body {
            flex-direction: column;
        }
        .product-left, .product-right {
            width: 100%;
        }
        .product-section-title {
            font-size: 20px;
        }
        .total-price-val {
            font-size: 28px;
        }
    }

    /* --- コミコミ価格セクション用スタイル --- */
    .komikomi-section {
        max-width: 1000px;
        margin: 0 auto;
        padding: 40px 20px;
        background-color: #fff;
        font-family: "Helvetica Neue", Arial, sans-serif;
        color: #333;
    }

    /* 見出し（共通スタイル） */
    .komikomi-title {
        background-color: #d2e4fb;
        /* background-color: #d8f0c9; */
        color: #003366;
        padding: 15px 20px;
        margin-bottom: 20px;
        font-size: 22px;
        font-weight: bold;
        border-radius: 4px;
        text-align: center;
    }

    /* 説明文 */
    .komikomi-desc {
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 30px;
    }

    /* ビフォーアフター画像 */
    .before-after-box {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin-bottom: 40px;
    }
    .ba-img {
        width: 45%;
        max-width: 300px;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .ba-arrow {
        font-size: 30px;
        color: #003366;
    }

    /* 価格バナー */
    .price-banner {
        background-color: #f5f5f5;
        padding: 20px;
        text-align: center;
        margin-bottom: 30px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .price-banner-text {
        font-size: 18px;
        font-weight: bold;
    }
    .price-banner-val {
        font-size: 36px;
        color: #d32f2f;
        font-weight: bold;
        margin: 0 5px;
    }

    /* --- サービスパック図解エリア --- */
    .service-pack-container {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 10px;
        margin-bottom: 30px;
    }

    /* 共通カラム設定 */
    .pack-col {
        border: 1px solid #003366;
        border-radius: 4px;
        overflow: hidden; /* 角丸のため */
        display: flex;
        flex-direction: column;
    }
    .col-header {
        background-color: #003366;
        color: #fff;
        text-align: center;
        padding: 8px;
        font-weight: bold;
        font-size: 14px;
    }
    .col-body {
        padding: 15px;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #f9fff9;
    }

    /* 左カラム：商品代金 */
    .col-product {
        width: 20%;
    }
    .product-box-content {
        text-align: center;
        font-weight: bold;
        color: #003366;
    }
    .low-price-badge {
        background: #ffeb3b;
        color: #333;
        font-size: 18px;
        padding: 2px 6px;
        margin-bottom: 5px;
        display: inline-block;
        border-radius: 2px;
    }

    /* 中央カラム：サービスパック */
    .col-service {
        width: 55%;
    }
    .service-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        width: 100%;
    }
    .service-item {
        border: 1px solid #659ada;
        border-radius: 4px;
        background: #fff;
        padding: 10px 5px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        color: #003366;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 80px;
    }
    .service-item i {
        font-size: 24px;
        margin-bottom: 5px;
        color: #003366;
    }

    /* 右カラム：保証 */
    .col-warranty {
        width: 20%;
    }
    .warranty-icon {
        width: 60px;
        margin-bottom: 10px;
    }

    /* プラス記号 */
    .plus-sign {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        color: #003366;
        font-weight: bold;
        width: 20px;
    }

    /* 下部の強調テキスト */
    .bottom-highlight {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 20px;
        background: linear-gradient(transparent 60%, #ffeb3b 60%);
        display: inline-block;
        padding: 0 10px;
    }
    .center-wrapper {
        text-align: center;
    }

    /* 注意書き */
    .note-list {
        font-size: 12px;
        color: #666;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .note-list li {
        margin-bottom: 5px;
    }

    /* --- レスポンシブ (スマホ) --- */
    @media (max-width: 768px) {
        .service-pack-container {
            flex-direction: column;
            gap: 20px;
        }
        .col-product, .col-service, .col-warranty {
            width: 100%;
        }
        .plus-sign {
            width: 100%;
            height: 30px;
            transform: rotate(90deg);
            display: none;
        }

        .service-grid {
            grid-template-columns: repeat(2, 1fr); /* スマホでは2列 */
        }

        .price-banner-val {
            font-size: 28px;
        }
        .komikomi-title {
            font-size: 18px;
        }
    }

    /* --- オプション工事用スタイル --- */
    .option-section {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        font-family: "Helvetica Neue", Arial, sans-serif;
        color: #333;
    }

    /* 見出し（ストライプデザイン） */
    .option-title {
        background-color: #f1f8e9;
        /* 斜めストライプ */
        background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, transparent);
        background-size: 20px 20px;
        background-color: #e0ecf7; /* ベースの色 */

        color: #003366;
        padding: 10px 15px;
        margin-top: 40px;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: bold;
        border-left: 5px solid #003366;
    }

    /* テーブル全体 */
    .option-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 30px;
        font-size: 14px;
    }

    /* ヘッダー行 */
    .option-table th {
        background-color: #e0e0e0;
        padding: 12px;
        border: 1px solid #ccc;
        font-weight: bold;
        text-align: center;
        white-space: nowrap; /* テキストの折り返し防止 */
    }

    /* データ行 */
    .option-table td {
        padding: 12px;
        border: 1px solid #ccc;
        vertical-align: middle;
    }

    /* 列ごとの調整（PC表示時） */
    .col-name {
        width: 25%;
        font-weight: bold;
    }
    .col-price {
        width: 15%;
        text-align: right; /* 金額は右寄せが見やすいですが、画像に合わせて中央寄せにする場合は center に */
        text-align: center;
        font-weight: bold;
    }
    .col-desc {
        width: 60%;
    }

    /* --- レスポンシブ対応（スマホ：768px以下） --- */
    @media (max-width: 768px) {
        .option-table, 
        .option-table tbody, 
        .option-table tr, 
        .option-table td {
            display: block;
            width: 100%;
        }

        /* スマホではヘッダー（項目名）を非表示にする */
        .option-table thead {
            display: none;
        }

        /* 行をカードのように見せる */
        .option-table tr {
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-top: 3px solid #003366; /* 区切り線 */
            background-color: #fff;
        }

        .option-table td {
            border: none;
            border-bottom: 1px solid #eee;
            padding: 10px 15px;
            position: relative;
        }

        /* 最後のセルの下線は消す */
        .option-table td:last-child {
            border-bottom: none;
        }

        /* 工事詳細（スマホ用強調） */
        .col-name {
            background-color: #f9f9f9;
            font-size: 16px;
            color: #003366;
        }

        /* 価格（スマホ用強調） */
        .col-price {
            text-align: right; /* スマホでは右寄せにする */
            font-size: 18px;
            color: #d32f2f; /* 赤文字で見やすく */
        }
        .col-price::before {
            content: "追加費用：";
            font-size: 12px;
            color: #666;
            font-weight: normal;
        }
    }

    /* --- 比較セクション用スタイル --- */
    .compare-section {
        max-width: 1000px;
        margin: 0 auto;
        padding: 40px 20px;
        background-color: #fff;
        font-family: "Helvetica Neue", Arial, sans-serif;
        color: #333;
    }

    /* 比較グリッド（左右） */
    .compare-grid {
        display: flex;
        gap: 20px;
        margin-bottom: 40px;
        align-items: stretch;
    }

    /* カラム共通 */
    .compare-col {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* ヘッダー（タイトル） */
    .compare-header {
        color: #fff;
        font-weight: bold;
        text-align: center;
        padding: 15px;
        font-size: 18px;
        border-radius: 4px 4px 0 0;
        margin-bottom: 20px;
    }
    .header-bad { background-color: #757575; }
    .header-good { background-color: #0251a0; }

    /* 図解エリア */
    .diagram-area {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        padding: 0 10px;
    }

    /* --- 左側（他社）のスタイル --- */
    .stack-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        width: 45%;
    }
    .block-gray {
        background-color: #999;
        color: #fff;
        width: 100%;
        text-align: center;
        padding: 8px 5px;
        border-radius: 4px;
        font-weight: bold;
        font-size: 13px;
    }
    .block-gray-main {
        background-color: #757575;
        padding: 12px 5px;
        font-size: 15px;
    }
    .plus-icon {
        font-size: 24px;
        color: #757575;
        font-weight: bold;
        margin: -5px 0;
    }

    /* 吹き出し（追加費用があとから...） */
    .bubble-alert {
        border: 2px solid #ccc;
        border-radius: 20px;
        padding: 8px 10px;
        font-size: 12px;
        color: #555;
        font-weight: bold;
        background: #fff;
        text-align: center;
        margin-bottom: 10px;
        position: relative;
    }
    .bubble-alert::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 10px 10px 0;
        border-style: solid;
        border-color: #ccc transparent transparent transparent;
    }
    /* 吹き出しの内側を白くする擬似要素 */
    .bubble-alert::before {
        content: "";
        position: absolute;
        bottom: -7px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 10px 10px 0;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
        z-index: 1;
    }


    /* --- 右側（当社）のスタイル --- */
    .all-in-one-box {
        background-color: #d2e4fb;
        border: 2px solid #659ada;
        border-radius: 4px;
        width: 45%;
        padding: 15px 5px;
        text-align: center;
        color: #003366;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .all-in-title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
        border-bottom: 2px solid #fff;
        padding-bottom: 5px;
        display: inline-block;
    }
    .all-in-list {
        font-size: 13px;
        font-weight: bold;
        line-height: 1.8;
    }
    .bubble-good {
        border: 2px solid #659ada;
        color: #003366;
    }
    .bubble-good::after { border-color: #659ada transparent transparent transparent; }

    /* 人物イラストエリア */
    .person-img {
        width: 45%;
        max-width: 120px;
        text-align: center;
    }
    .person-img img {
        width: 100%;
        height: auto;
    }


    /* --- 下部の説明ボックス --- */
    .highlight-info-box {
        background-color: #fffbe6;
        padding: 30px;
        border-radius: 4px;
        margin-bottom: 20px;
    }
    .highlight-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #333;
    }
    .highlight-list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-weight: bold;
        font-size: 15px;
        line-height: 2;
    }
    .highlight-list li::before {
        content: "・";
        margin-right: 5px;
    }

    /* 注釈テキスト */
    .footer-note {
        font-size: 13px;
        line-height: 1.6;
        color: #555;
    }

    /* 下部の説明文 */
    .description-text {
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.8;
        text-align: center;
    }
    /* --- レスポンシブ --- */
    @media (max-width: 768px) {
        .compare-grid {
            flex-direction: column;
        }
        .highlight-title {
            font-size: 18px;
        }
        .diagram-area {
            gap: 10px;
        }
    }




/* --- 従来の問題点（他社）セクション --- */
/* 画像表示用にコンテナの高さを自動調整 */
    .diagram-container {
        position: relative;
        width: 100%;
        max-width: 900px;
        margin: 0 auto 30px auto;
        height: auto; /* 固定高さを解除 */
        background-color: transparent; /* 背景色を透明または白 */
        text-align: center; /* 画像を中央寄せ */
    }

    /* 画像自体のレスポンシブ設定 */
    .diagram-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

/* --- 写真撮影のすすめセクション --- */
    .photo-tip-section {
        max-width: 800px;
        margin: 0 auto;
        padding: 25px;
        border: 1px solid #e0e0e0;
        background-color: #fff;
        font-family: "Helvetica Neue", Arial, sans-serif;
        box-sizing: border-box;
    }

    /* 見出し */
    .tip-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        display: flex;
        align-items: center;
        margin: 0 0 20px 0;
        line-height: 1.4;
    }
    .tip-title::before {
        content: "";
        display: inline-block;
        width: 8px;      /* バーの太さ */
        height: 28px;    /* バーの高さ */
        background-color: #003366;
        margin-right: 12px;
    }

    /* コンテンツエリア（ビジュアル＋テキスト） */
    .tip-body {
        display: flex;
        gap: 30px;
        align-items: center; /* 垂直方向中央揃え */
    }

    /* 左側：ビジュアルグループ（男性＋エアコン写真） */
    .tip-visuals {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 45%; /* 幅を全体の45%に固定 */
        justify-content: center;
    }

    /* 男性イラストエリア */
    .visual-man {
        width: 40%;
    }
    .visual-man img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 写真エリア（縦並び） */
    .visual-photos {
        width: 60%;
        display: flex;
        flex-direction: column;
        gap: 8px; /* 写真間の隙間 */
    }
    .visual-photos img {
        width: 100%;
        height: 122px;
        display: block;
    }

    /* 右側：テキスト */
    .tip-text {
        flex: 1; /* 残りスペースを埋める */
        font-size: 15px;
        line-height: 1.6;
        color: #333;
    }

    /* --- レスポンシブ対応（スマホ） --- */
    @media (max-width: 600px) {
        .tip-body {
            flex-direction: column; /* 縦並び */
            gap: 20px;
        }
        .tip-visuals {
            flex: 0 0 100%;
            width: 100%;
            max-width: 400px;
        }
        .tip-text {
            width: 100%;
        }
    }

footer{
    width:100%;
    max-width:100%;
}