/* ===================================================================
   08_page_service.css
   Service/ フォルダ配下サービスページ
   gas.html / lpg.html / reform.html / eco_product.html / fureai24.html
   
   構成:
     [A] 共通レイアウト — 全サービスページで使用
         page-hero / breadcrumb-bar / service-layout / page-lead
         content-section / サイドバー / CTAボックス / 電話グリッド
     [B] gas.html     — 商品グリッド・メンテナンス・チェックリスト
     [C] lpg.html     — サービス詳細行・環境比較・料金テーブル
     [D] reform.html  — リフォームカード・特長カード
     [E] eco_product  — 商品カード・メリットグリッド・補助金注記
     [F] fureai24     — ふれあいバナー・安心機能・認定バナー
   =================================================================== */


/* --- [A] Service共通レイアウト（全サービスページ使用） ---------------------------- */

/*
 * page-hero の背景画像は各ページで個別指定:
 * .page-hero::before { background-image: url('...'); }
 */

/* ページヒーロー */
    .page-hero {
      background: var(--navy);
      position: relative;
      overflow: hidden;
    }
    /* .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1600&q=70') center/cover;
      opacity: 0.12;
    }*/
    .page-hero-content {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 56px 24px;
      color: #fff;
    }
    .page-hero-content h1 {
      font-family: 'Noto Serif JP', serif;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 700;
      margin-bottom: 12px;
    }
    .page-hero-content p {
      font-size: 1rem;
      opacity: 0.78;
      max-width: 600px;
      line-height: 1.8;
    }

    /* パンくず */
    .breadcrumb-bar {
      background: var(--light-bg);
      border-bottom: 1px solid var(--border);
      padding: 12px 24px;
    }
    .breadcrumb-bar-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.82rem;
      color: var(--text-muted);
    }
    .breadcrumb-bar-inner a { transition: color 0.2s; }
    .breadcrumb-bar-inner a:hover { color: var(--navy); }
    .breadcrumb-bar-inner .sep { opacity: 0.5; }
    .breadcrumb-bar-inner .current { color: var(--text); }

    /* メインレイアウト */
    .service-layout {
      max-width: 1200px;
      margin: 0 auto;
      padding: 56px 24px;
      display: grid;
      grid-template-columns: 1fr 260px;
      gap: 48px;
      align-items: start;
    }

    /* ページリード */
    .page-lead {
      font-size: 0.96rem;
      color: var(--text-muted);
      line-height: 1.85;
      margin-bottom: 48px;
      padding: 20px 24px;
      background: var(--light-bg);
      border-left: 3px solid var(--navy);
      border-radius: 0 var(--radius) var(--radius) 0;
    }

    /* セクション見出し */
    .content-section { margin-bottom: 56px; }
    .content-section-title {
      font-family: 'Noto Serif JP', serif;
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 24px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--navy);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .content-section-title span.icon {
      font-size: 1.3rem;
    }

    /* 商品グリッド */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 20px;
    }

    .product-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .product-img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      background: var(--light-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.5rem;
    }

    .product-body {
      padding: 18px 20px;
    }
    .product-body h3 {
      font-size: 0.98rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }
    .product-body p {
      font-size: 0.84rem;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 14px;
    }
    .product-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.82rem;
      color: var(--navy);
      font-weight: 600;
      transition: gap 0.2s;
    }
    .product-link:hover { gap: 8px; }

    .product-note {
      font-size: 0.84rem;
      color: var(--text-muted);
      padding: 14px 18px;
      background: var(--light-bg);
      border-radius: 8px;
      border: 1px solid var(--border);
    }

    /* メンテナンスボックス */
    .maintenance-box {
      background: linear-gradient(135deg, var(--blue-grad-start), var(--blue-grad-end));
      border: 1px solid #c5dff5;
      border-radius: var(--radius);
      padding: 32px;
      margin-bottom: 28px;
    }
    .maintenance-box p {
      font-size: 0.92rem;
      color: var(--blue-text);
      line-height: 1.8;
      margin-bottom: 24px;
    }
    .maintenance-cta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 20px;
    }
    .tel-grid {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    .tel-item {
      background: #fff;
      border: 1px solid #c5dff5;
      border-radius: 8px;
      padding: 12px 20px;
      font-size: 0.88rem;
      color: var(--blue-text);
      box-shadow: 0 2px 8px rgba(26,45,74,0.06);
    }
    .tel-item strong {
      display: block;
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-bottom: 2px;
    }
    .tel-item .tel-num {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: 0.04em;
    }

    /* 修理依頼チェックリスト */
    .checklist {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .checklist li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.88rem;
      color: var(--text);
      line-height: 1.65;
      padding: 10px 14px;
      background: var(--light-bg);
      border-radius: 8px;
      border: 1px solid var(--border);
    }
    .checklist li::before {
      content: '✓';
      width: 20px;
      height: 20px;
      background: var(--navy);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.68rem;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* サイドバー */
    .service-sidebar { display: flex; flex-direction: column; gap: 20px; }

    .local-nav-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .local-nav-header {
      background: var(--navy);
      color: #fff;
      padding: 14px 20px;
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    .local-nav-list { list-style: none; }
    .local-nav-list li a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 20px;
      font-size: 0.87rem;
      color: var(--text);
      border-bottom: 1px solid var(--border);
      transition: background 0.15s, color 0.15s;
    }
    .local-nav-list li:last-child a { border-bottom: none; }
    .local-nav-list li a:hover { background: var(--light-bg); color: var(--navy); }
    .local-nav-list li.active > a {
      background: var(--light-bg);
      color: var(--navy);
      font-weight: 700;
      border-left: 3px solid var(--navy);
    }
    .local-nav-list li a .arr { color: var(--text-muted); font-size: 0.75rem; }

    /* サブナビ（子階層） */
    .local-sub-nav { list-style: none; }
    .local-sub-nav li a {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 20px 9px 32px;
      font-size: 0.82rem;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      transition: background 0.15s, color 0.15s;
    }
    .local-sub-nav li:last-child a { border-bottom: none; }
    .local-sub-nav li a::before {
      content: '–';
      color: var(--navy);
      font-size: 0.75rem;
    }
    .local-sub-nav li a:hover { background: var(--light-bg); color: var(--navy); }

    /* お問合せサイドカード */
    .side-contact-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .side-contact-header {
      background: var(--navy);
      color: #fff;
      padding: 14px 20px;
      font-size: 0.88rem;
      font-weight: 700;
    }
    .side-contact-body { padding: 20px; }
    .side-contact-body p {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 14px;
    }
    .side-contact-body .btn-navy {
      display: block;
      text-align: center;
      background: var(--navy);
      color: #fff;
      padding: 11px;
      border-radius: 8px;
      font-size: 0.88rem;
      font-weight: 600;
      transition: background 0.2s;
      margin-bottom: 10px;
    }
    .side-contact-body .btn-navy:hover { background: var(--navy-lt); }
    .side-tel {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--navy);
      display: block;
      text-align: center;
      letter-spacing: 0.04em;
      margin-top: 8px;
    }
    .side-tel-label {
      font-size: 0.72rem;
      color: var(--text-muted);
      display: block;
      text-align: center;
      margin-top: 2px;
    }

    /* レスポンシブ */
    @media (max-width: 1024px) {
      .service-layout { grid-template-columns: 1fr; }
      .service-sidebar { display: grid; grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .product-grid { grid-template-columns: repeat(2, 1fr); }
      .maintenance-cta { flex-direction: column; align-items: stretch; }
      .service-sidebar { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .product-grid { grid-template-columns: 1fr; }
      .tel-grid { flex-direction: column; }
    }

/* --- [B] gas.html — 商品グリッド・メンテ・チェックリスト ------------------------- */

/* 修理依頼チェックリスト */
    .checklist {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
.checklist li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.88rem;
      color: var(--text);
      line-height: 1.65;
      padding: 10px 14px;
      background: var(--light-bg);
      border-radius: 8px;
      border: 1px solid var(--border);
    }
.checklist li::before {
      content: '✓';
      width: 20px;
      height: 20px;
      background: var(--navy);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.68rem;
      flex-shrink: 0;
      margin-top: 1px;
    }
/* メンテナンスボックス */
    .maintenance-box {
      background: linear-gradient(135deg, var(--blue-grad-start), var(--blue-grad-end));
      border: 1px solid #c5dff5;
      border-radius: var(--radius);
      padding: 32px;
      margin-bottom: 28px;
    }
.maintenance-box p {
      font-size: 0.92rem;
      color: var(--blue-text);
      line-height: 1.8;
      margin-bottom: 24px;
    }
.maintenance-cta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 20px;
    }
.maintenance-cta { flex-direction: column; align-items: stretch; }
.product-body {
      padding: 18px 20px;
    }
.product-body h3 {
      font-size: 0.98rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }
.product-body p {
      font-size: 0.84rem;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 14px;
    }
.product-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform 0.2s, box-shadow 0.2s;
    }
.product-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }
/* 商品グリッド */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 20px;
    }
.product-grid { grid-template-columns: repeat(2, 1fr); }
.product-grid { grid-template-columns: 1fr; }
.product-img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      background: var(--light-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.5rem;
    }
.product-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.82rem;
      color: var(--navy);
      font-weight: 600;
      transition: gap 0.2s;
    }
.product-link:hover { gap: 8px; }
.product-note {
      font-size: 0.84rem;
      color: var(--text-muted);
      padding: 14px 18px;
      background: var(--light-bg);
      border-radius: 8px;
      border: 1px solid var(--border);
    }

/* --- [C] lpg.html — サービス詳細行・環境比較・料金テーブル ------------------------ */

/* サービス詳細行（画像＋テキスト） */
    .service-row {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 28px;
      align-items: start;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow);
      margin-bottom: 16px;
    }
    .service-row-img {
      width: 180px;
      height: 140px;
      object-fit: cover;
      border-radius: 8px;
      background: var(--light-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.5rem;
      flex-shrink: 0;
    }
    .service-row-body h3 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
      line-height: 1.45;
    }
    .service-row-body p {
      font-size: 0.88rem;
      color: var(--text-muted);
      line-height: 1.8;
    }

    /* エコ比較セクション */
    .eco-section {
      background: linear-gradient(135deg, var(--blue-grad-start), var(--blue-grad-end));
      border: 1px solid #c5dff5;
      border-radius: var(--radius);
      padding: 32px;
      margin-bottom: 16px;
    }
    .eco-section h3 {
      font-family: 'Noto Serif JP', serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--blue-text);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .eco-section p {
      font-size: 0.9rem;
      color: #3d5a7a;
      line-height: 1.85;
    }
    .eco-compare {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 20px;
    }
    .eco-item {
      background: #fff;
      border-radius: 8px;
      padding: 18px 20px;
      border: 1px solid #c5dff5;
    }
    .eco-item-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text-muted);
      letter-spacing: 0.06em;
      margin-bottom: 6px;
    }
    .eco-item-value {
      font-family: 'Noto Serif JP', serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--navy);
    }
    .eco-item-desc {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-top: 4px;
      line-height: 1.5;
    }

    /* 料金テーブル */
    .price-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
      margin-bottom: 20px;
    }
    .price-table th,
    .price-table td {
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      vertical-align: top;
    }
    .price-table th {
      background: var(--light-bg);
      color: var(--text-muted);
      font-weight: 600;
      font-size: 0.85rem;
      width: 220px;
      white-space: nowrap;
    }
    .price-table td { color: var(--text); line-height: 1.9; }
    .price-table tr:last-child th,
    .price-table tr:last-child td { border-bottom: none; }
    .price-note {
      font-size: 0.83rem;
      color: var(--text-muted);
      line-height: 1.8;
      padding: 16px 20px;
      background: var(--light-bg);
      border-radius: 8px;
      border: 1px solid var(--border);
    }
    .price-note p + p { margin-top: 8px; }

    /* サイドバー（gas.htmlと共通） */

    @media (max-width: 1024px) {
    }
    @media (max-width: 768px) {
      .service-row { grid-template-columns: 1fr; }
      .service-row-img { width: 100%; height: 180px; }
      .eco-compare { grid-template-columns: 1fr; }
    }

/* --- [D] reform.html — リフォームカード・特長カード・CTA ---------------------- */

/* リフォームカテゴリグリッド */
    .reform-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .reform-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .reform-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .reform-card-icon {
      width: 100%;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      background: var(--light-bg);
    }

    .reform-card-body {
      padding: 18px 20px;
    }
    .reform-card-body h3 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }
    .reform-card-body ul {
      list-style: none;
      margin-top: 8px;
    }
    .reform-card-body ul li {
      font-size: 0.83rem;
      color: var(--text-muted);
      padding: 4px 0;
      display: flex;
      align-items: flex-start;
      gap: 7px;
      line-height: 1.5;
    }
    .reform-card-body ul li::before {
      content: '›';
      color: var(--navy);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* 特長セクション */
    .feature-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 28px;
    }
    .feature-item {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px 20px;
      text-align: center;
      box-shadow: var(--shadow);
    }
    .feature-item-icon { font-size: 2.2rem; margin-bottom: 12px; display: block; }
    .feature-item h4 {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }
    .feature-item p {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    /* お問い合わせCTAボックス */
    .cta-box {
      background: linear-gradient(135deg, var(--blue-grad-start), var(--blue-grad-end));
      border: 1px solid #c5dff5;
      border-radius: var(--radius);
      padding: 32px;
    }
    .cta-box p {
      font-size: 0.92rem;
      color: var(--blue-text);
      line-height: 1.8;
      margin-bottom: 20px;
    }
    .cta-box-actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 20px;
    }
    .tel-grid {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    .tel-item {
      background: #fff;
      border: 1px solid #c5dff5;
      border-radius: 8px;
      padding: 12px 20px;
      box-shadow: 0 2px 8px rgba(26,45,74,0.06);
    }
    .tel-item strong {
      display: block;
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-bottom: 2px;
    }
    .tel-item .tel-num {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: 0.04em;
    }

    /* サイドバー（共通） */

    @media (max-width: 1024px) {
    }
    @media (max-width: 768px) {
      .reform-grid { grid-template-columns: repeat(2, 1fr); }
      .feature-row { grid-template-columns: 1fr; }
      .cta-box-actions { flex-direction: column; align-items: stretch; }
      .tel-grid { flex-direction: column; }
    }
    @media (max-width: 480px) {
      .reform-grid { grid-template-columns: 1fr; }
    }

/* --- [E] eco_product.html — 商品カード・メリットグリッド・補助金注記 --------------- */

/* ===== エネルギーミックスバナー ===== */
    .energy-mix-box {
      background: linear-gradient(135deg, var(--blue-grad-start), var(--blue-grad-end));
      border: 1px solid #c5dff5;
      border-radius: var(--radius);
      padding: 28px 32px;
      margin-bottom: 48px;
    }
    .energy-mix-box h3 {
      font-family: 'Noto Serif JP', serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--blue-text);
      margin-bottom: 10px;
    }
    .energy-mix-box p {
      font-size: 0.9rem;
      color: var(--blue-text);
      line-height: 1.85;
    }

    /* ===== 商品カード ===== */
    .eco-product-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 32px;
    }
    .eco-product-header {
      background: var(--navy);
      color: #fff;
      padding: 18px 24px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .eco-product-header .prod-icon { font-size: 1.6rem; }
    .eco-product-header h3 {
      font-family: 'Noto Serif JP', serif;
      font-size: 1.05rem;
      font-weight: 700;
    }
    .eco-product-header .prod-tag {
      margin-left: auto;
      font-size: 0.72rem;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.3);
      color: rgba(255,255,255,0.85);
      padding: 3px 10px;
      border-radius: 20px;
      white-space: nowrap;
    }
    .eco-product-body { padding: 24px 28px; }
    .eco-product-body > p {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.9;
      margin-bottom: 20px;
    }

    /* メリットグリッド（2列） */
    .merit-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-bottom: 16px;
    }
    .merit-item {
      background: var(--light-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px 18px;
    }
    .merit-item h4 {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .merit-item p {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.75;
    }

    /* データハイライト */
    .data-highlight {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--navy);
    }
    .data-highlight .unit {
      font-size: 0.78rem;
      font-weight: 400;
      color: var(--text-muted);
    }

    /* 補助金注記 */
    .subsidy-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 0.83rem;
      color: #92400e;
      line-height: 1.7;
      margin-top: 14px;
    }
    .subsidy-note .note-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

    /* CTAボックス */
    .cta-box {
      background: linear-gradient(135deg, var(--blue-grad-start), var(--blue-grad-end));
      border: 1px solid #c5dff5;
      border-radius: var(--radius);
      padding: 32px;
    }
    .cta-box p {
      font-size: 0.92rem;
      color: var(--blue-text);
      line-height: 1.8;
      margin-bottom: 20px;
    }
    .cta-box-actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 20px;
    }
    .tel-grid { display: flex; gap: 16px; flex-wrap: wrap; }
    .tel-item {
      background: #fff;
      border: 1px solid #c5dff5;
      border-radius: 8px;
      padding: 12px 20px;
      box-shadow: 0 2px 8px rgba(26,45,74,0.06);
    }
    .tel-item strong {
      display: block;
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-bottom: 2px;
    }
    .tel-item .tel-num {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: 0.04em;
    }

    /* サイドバー（reform.htmlと共通） */

    @media (max-width: 1024px) {
    }
    @media (max-width: 768px) {
      .merit-grid { grid-template-columns: 1fr; }
      .cta-box-actions { flex-direction: column; align-items: stretch; }
      .tel-grid { flex-direction: column; }
      .eco-product-header .prod-tag { display: none; }
    }

/* --- [F] fureai24.html — ふれあいバナー・安心機能・認定バナー -------------------- */

/* ===== ふれあい24 ハイライトバナー ===== */
    .fureai-banner {
      background: linear-gradient(135deg, var(--blue-grad-start), var(--blue-grad-end));
      border: 1px solid #c5dff5;
      border-radius: var(--radius);
      padding: 28px 32px;
      margin-bottom: 48px;
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .fureai-banner-icon { font-size: 3rem; flex-shrink: 0; }
    .fureai-banner-text h3 {
      font-family: 'Noto Serif JP', serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--blue-text);
      margin-bottom: 6px;
    }
    .fureai-banner-text p {
      font-size: 0.88rem;
      color: var(--blue-text);
      line-height: 1.8;
    }

    /* ===== 4つの安心機能 ===== */
    .safety-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .safety-item {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 22px 24px;
      box-shadow: var(--shadow);
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .safety-item-icon {
      font-size: 1.8rem;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .safety-item-body h4 {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }
    .safety-item-body p {
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.75;
    }

    /* ===== 認定バナー ===== */
    .cert-banner {
      background: var(--navy);
      color: #fff;
      border-radius: var(--radius);
      padding: 28px 32px;
      margin-top: 32px;
    }
    .cert-banner h3 {
      font-family: 'Noto Serif JP', serif;
      font-size: 1.05rem;
      font-weight: 700;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .cert-banner p {
      font-size: 0.88rem;
      line-height: 1.85;
      color: rgba(255,255,255,0.85);
    }
    .cert-badge-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 16px;
    }
    .cert-badge-item {
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 8px;
      padding: 10px 18px;
      font-size: 0.85rem;
      color: rgba(255,255,255,0.9);
      font-weight: 600;
    }
    .cert-banner .cert-note {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.6);
      margin-top: 10px;
      line-height: 1.7;
    }

    /* ===== 経済産業省資料リンク ===== */
    .pdf-links {
      display: flex;
      gap: 12px;
      margin-top: 16px;
      flex-wrap: wrap;
    }
    .pdf-link-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.3);
      color: rgba(255,255,255,0.9);
      font-size: 0.82rem;
      padding: 7px 14px;
      border-radius: 6px;
      transition: background 0.2s;
    }
    .pdf-link-item:hover { background: rgba(255,255,255,0.25); }

    /* CTAボックス */
    .cta-box {
      background: linear-gradient(135deg, var(--blue-grad-start), var(--blue-grad-end));
      border: 1px solid #c5dff5;
      border-radius: var(--radius);
      padding: 32px;
    }
    .cta-box p {
      font-size: 0.92rem;
      color: var(--blue-text);
      line-height: 1.8;
      margin-bottom: 20px;
    }
    .cta-box-actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 20px;
    }
    .tel-grid { display: flex; gap: 16px; flex-wrap: wrap; }
    .tel-item {
      background: #fff;
      border: 1px solid #c5dff5;
      border-radius: 8px;
      padding: 12px 20px;
      box-shadow: 0 2px 8px rgba(26,45,74,0.06);
    }
    .tel-item strong {
      display: block;
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-bottom: 2px;
    }
    .tel-item .tel-num {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: 0.04em;
    }

    /* サイドバー */

    /* 24時間バッジ（サイドバー用） */
    .fureai-side-badge {
      background: var(--navy);
      color: #fff;
      border-radius: var(--radius);
      padding: 20px;
      text-align: center;
      box-shadow: var(--shadow);
    }
    .fureai-side-badge .badge-num {
      font-family: 'Noto Serif JP', serif;
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1;
      display: block;
      margin-bottom: 4px;
    }
    .fureai-side-badge .badge-label {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.75);
      display: block;
    }

    @media (max-width: 1024px) {
    }
    @media (max-width: 768px) {
      .safety-grid { grid-template-columns: 1fr; }
      .fureai-banner { flex-direction: column; gap: 12px; }
      .cta-box-actions { flex-direction: column; align-items: stretch; }
      .tel-grid { flex-direction: column; }
    }