/* =================================== */
/* === 基本設定 (PC & スマホ共通) === */
/* =================================== */
body {
    margin: 0; padding: 0;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 15px; color: #333;
    background-color: #fff; /* ページ全体の背景色 */
}
img { max-width: 100%; height: auto; display: block; vertical-align: middle; }
p, h2, h3, h4, figure { margin: 0; padding: 0; }
p { line-height: 1.75; }
p.section-paragraph{font-family: serif;}

/* =================================== */
/* === PCデザイン (横幅769px以上) === */
/* =================================== */

/* --- 全体レイアウト --- */
.head-container { max-width: 820px; margin: 0 auto; background-color: #fff; }
.page-container { max-width: 820px; margin: 0 auto; background-color: #faf7e8; }
.main-content { padding: 40px 40px; }

/* --- セクション共通スタイル --- */
.content-section { margin-bottom: 40px; }
.content-section:last-child { margin-bottom: 0; }
.white-card { padding: 35px;  background-color: #fff; }
.no-padding { padding: 0; }
.section-title { font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 30px; color: #4a4a4a; font-family: serif;}
h3 { font-size: 20px; font-weight: bold; margin-bottom: 20px; text-align: center; font-family: serif;}
h4 { font-size: 16px; font-weight: bold; margin-bottom: 15px; text-align: center; font-family: serif;}
.text-block { margin-top: 30px; }
.text-block p { margin-bottom: 1em; text-align: justify; font-family: serif;}
.text-block h4 { font-size: 18px; text-align: center; }
/* ★★★【修正箇所】注釈を右寄せに ★★★ */
.disclaimer {
    font-size: 11px;
    text-align: right;
    color: #666;
    margin-top: 20px;
    padding: 0; /* 不要な余白を削除 */
}

/* --- ヘッダー・フッター・汎用画像 --- */
.hero-header { margin-bottom: 5px; }
.intro-image { max-width: 680px; margin: 0 auto; }
.content-figure { max-width: 720px; margin: 30px auto 0 auto; }
.footer { background-color: #fff; padding: 40px 20px; text-align: center; }
.footer-title { font-weight: bold; font-size: 16px; margin-bottom: 15px; color: #4a4a4a; }
.footer-logo { max-width: 300px; margin: 0 auto; }

/* --- 金色のタイトルブロック --- */
.title-block-gold { background-color: #b99c58; padding: 15px 10px; text-align: center; }
.title-block-text { color: #fff; font-size: 30px; font-weight: bold; line-height: 1.6;  font-family: serif;}
.title-block-text::before, .title-block-text::after { content: ''; display: block; width: 120px; height: 1px; background-color: #b99c58; margin: 15px auto; }
.three-benefits-image { max-width: 600px; margin: 40px auto 0 auto; }
.room-diagram { max-width: 100%; margin-top: 40px; }

/* --- 各セクションのタイトルバー --- */
.title-bar { padding: 12px; margin-bottom: 30px; }
.title-bar h2 { color: #fff; font-size: 24px; text-align: center; font-weight: bold;  font-family: serif;}
.color-blue { background-color: #033261; }
.color-brown { background-color: #421e0c; }
.color-green { background-color: #006d48; }

/* --- 各セクションのサブヘッドライン --- */
.sub-headline-block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    max-width: 720px;
    margin: 30px auto;
}
.icon-figure {
    max-width: 120px;
    flex-shrink: 0;
}
.sub-headline-text {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    text-align: left;
}

/* --- 「より快適な暮らしへ」セクション --- */
.benefits-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px; }
.benefit-item { background-color: #0d2c55; color: #fff; border-radius: 8px; padding: 15px; text-align: center; font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: center; min-height: 50px; }
.diagram-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: start; margin-top: 40px; }
.diagram-item { text-align: center; }
.diagram-item h3 { font-size: 18px; }
.diagram-item .diagram-subtitle { font-size: 14px; margin-bottom: 15px; }

/* --- 「光熱費の削減」セクション --- */
.equipment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 40px; }
.equipment-item { text-align: center; }
.equipment-item h4 { font-size: 16px; margin-bottom: 8px; }
.equipment-item p { font-size: 13px; line-height: 1.6; }
.equipment-item figure { margin-top: 15px; }

/* --- 「環境への配慮」セクション --- */
.side-by-side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: center; margin-top: 30px;}
.roadmap-figure { margin-top: 30px; }

/* ======================================= */
/* === スマートフォン表示 (横幅768px以下) === */
/* ======================================= */
@media (max-width: 768px) {
    body { font-size: 14px; }
    .main-content { padding: 15px; }
    .content-section, .white-card { margin-left: 0; margin-right: 0; }
    .white-card { padding: 25px 15px; margin-bottom: 25px; box-shadow: none; }
    .content-section.no-padding { margin-bottom: 25px; }
    .section-title, .title-bar h2, .sub-headline-text, .title-block-text { font-size: 23px; }
    h3 { font-size: 18px; }
    .text-block p { text-align: left; }
    
    .sub-headline-block,
    .diagram-grid,
    .equipment-grid,
    .benefits-container,
    .side-by-side-grid {
        grid-template-columns: 1fr;
    }

    .sub-headline-block {
        display: block;
        text-align: center;
    }
    .icon-figure {
        margin: 0 auto ;
        max-width: 100px;
    }
    .sub-headline-text {
        text-align: center;
    }
}

.br-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .br-pc {
    display: none;
  }

  .br-sp {
    display: inline-block;
  }
}