@charset "UTF-8";

/**
 * ==========================================================================
 * ファイル名: lifeline.css
 * 作成日: 2026-04-08
 * --------------------------------------------------------------------------
 * 【基本方針】
 * 1. 番号などのテキストを排除し、アイコン（Material Symbols）による視覚誘導を強化。
 * 2. 御幸ブルーとミユキピンクを使い分け、インフラとライフラインの属性を直感的に判別させる。
 * 3. 角丸 (24px) と十分な余白により、新入社員が読みやすいポップなUIを構築。
 * ==========================================================================
 */

/* --------------------------------------------------------------------------
   1. 全体レイアウト・ベース設定（Base Setup）
   --------------------------------------------------------------------------
   【設計理由】
   1) style.css の背景色を活かしつつ、個別に淡いグレーブルー (#f8fafc) を
      設定することで、白地のカードをより際立たせる。
   -------------------------------------------------------------------------- */
.is-pop-design {
    background-color: #f8fafc;
}

/* --------------------------------------------------------------------------
   2. アイコン付きセクションヘッダー（Section Header）
   --------------------------------------------------------------------------
   【設計理由】
   1) 番号を排除した代わりに、Material Symbolsを背景色付きのボックスで強調。
   2) タイトルとの適切な距離を保ち、情報の区切りを明確にする。
   -------------------------------------------------------------------------- */
.c-section-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 60px 0 30px;
}

.icon-main {
    font-size: 2.2rem !important;
    background: #0070b8; /* 御幸ブルーを背景に採用 */
    color: #fff;
    width: 64px;
    height: 64px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 20px; /* ポップな印象を与える大きめの角丸 */
    box-shadow: 0 4px 15px rgba(0, 112, 184, 0.2);
}

.c-section-header h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #1e293b;
    border: none;
    margin: 0;
}

/* --------------------------------------------------------------------------
   3. 文章解説カードの対比レイアウト（Explanation Row）
   --------------------------------------------------------------------------
   【設計理由】
   1) インフラ（器）とライフライン（中身）を左右に並列配置。
   2) 上部に各属性カラーのアクセントボーダー (8px) を設け、属性の違いを明示。
   -------------------------------------------------------------------------- */
.c-explanation-row {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
}

.c-explanation-box {
    flex: 1;
    background: #fff;
    padding: 30px;
    border-radius: 24px;
    border: 2px solid #e2e8f0;
    transition: transform 0.2s ease; /* ホバー時の微細な動きで親しみやすさを演出 */
}

.c-explanation-box:hover {
    transform: translateY(-5px);
}

.c-explanation-box.is-infra { border-top: 8px solid #0070b8; }   /* インフラ：御幸ブルー */
.c-explanation-box.is-lifeline { border-top: 8px solid #e6007e; } /* ライフライン：ミユキピンク */

.c-explanation-box h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   4. ポップな箇条書きリスト（Custom Pop List）
   --------------------------------------------------------------------------
   【設計理由】
   1) 標準の箇条書きを避け、1項目ずつ独立したカード形式にすることで可読性を向上。
   2) 疑似要素により Material Symbols のチェックマークを自動挿入。
   -------------------------------------------------------------------------- */
.c-pop-list {
    list-style: none;
    padding: 0;
}

.c-pop-list li {
    background: #fff;
    margin-bottom: 15px;
    padding: 18px 25px;
    border-radius: 16px;
    display: flex;
    align-items: flex-start;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.c-pop-list li::before {
    content: "verified"; /* Googleアイコン：確認済みマーク */
    font-family: 'Material Symbols Outlined';
    margin-right: 15px;
    color: #0070b8;
    font-size: 1.4rem;
}

/* --------------------------------------------------------------------------
   5. 実務注釈・プロのアドバイス（Tips Box）
   --------------------------------------------------------------------------
   【設計理由】
   1) 現場管理者の視点を強調するため、背景色をパステル調に変えて差別化。
   2) 電球アイコンやセキュリティアイコンで「重要性」を直感的に表現。
   -------------------------------------------------------------------------- */
.c-pro-tips {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f0f9ff;
    padding: 25px;
    border-radius: 20px;
    color: #0369a1;
    margin-top: 35px;
}

.c-pro-tips span { font-size: 2.5rem; }
.is-lifeline-tip { background: #fff1f2; color: #9f1239; }
.is-lifeline-tip span { color: #e11d48; }

/* --------------------------------------------------------------------------
   6. 比較表のカスタマイズ（Custom Pop Table）
   --------------------------------------------------------------------------
   【設計理由】
   1) 堅苦しい表のデザインを廃止し、セル間に余白を感じさせるデザイン。
   2) 行ごとに角丸を適用し、ポップな外観を維持。
   -------------------------------------------------------------------------- */
.c-pop-table-area {
    margin-top: 40px;
    overflow-x: auto;
}

.c-pop-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.c-pop-table th {
    background: #e2e8f0;
    color: #475569;
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
    border-radius: 10px;
}

.c-pop-table td {
    background: #fff;
    padding: 20px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.c-pop-table td:first-child { border-left: 1px solid #e2e8f0; border-radius: 15px 0 0 15px; }
.c-pop-table td:last-child { border-right: 1px solid #e2e8f0; border-radius: 0 15px 15px 0; }

/* --------------------------------------------------------------------------
   7. メディアクエリ（Mobile Response）
   --------------------------------------------------------------------------
   【設計理由】
   1) 900px以下のデバイスでは2カラムを解除し、視認性を確保。
   2) アイコンサイズを微調整し、画面幅を有効活用する。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
    .c-explanation-row { flex-direction: column; }
    .c-section-header h2 { font-size: 1.5rem; }
    .icon-main { width: 56px; height: 56px; }
}

/* --------------------------------------------------------------------------
   8. 概要用3カラムグリッド（Summary Grid 3-Col）
   --------------------------------------------------------------------------
   【設計理由】
   1) 概要情報を3つのカードに分割して横並びにすることで、情報の走査性を向上。
   2) Flexboxを採用し、画面幅に応じて適切なサイズで等間隔に配置。
   -------------------------------------------------------------------------- */
.c-grid-3col {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.c-info-card {
    flex: 1;
    background: #fff;
    padding: 25px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

/* インフラ側のカードアイコン色：御幸ブルー */
.c-info-card span {
    font-size: 2.5rem;
    color: #0070b8;
    margin-bottom: 15px;
}

/* ライフライン側のカードアイコン色：ミユキピンク */
.c-info-card.is-lifeline-accent span {
    color: #e6007e;
}

.c-info-card h4 {
    font-size: 1.1rem;
    color: #334155;
    margin-bottom: 10px;
}

.c-info-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* --------------------------------------------------------------------------
   9. メディアクエリ：グリッドのレスポンシブ（Mobile Response Grid）
   --------------------------------------------------------------------------
   【設計理由】
   1) スマートフォン表示（768px以下）では、3カラムだと横幅が不足するため
      縦1列（column）に切り替え、可読性を担保する。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .c-grid-3col {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   10. 干渉セクション：地下埋設物の深度表現（Depth Visualization）
   --------------------------------------------------------------------------
   【設計理由】
   1) 下から上への積み上げ構造を、ボーダーカラーの濃淡で表現する。
   2) 最も深い下水道を濃い青、浅い通信などを明るい青に設定し、直感性を高める。
   -------------------------------------------------------------------------- */

.is-deep-3 { border-left: 6px solid #1e3a8a !important; } /* 深層：濃紺 */
.is-deep-2 { border-left: 6px solid #3b82f6 !important; } /* 中層：青 */
.is-deep-1 { border-left: 6px solid #93c5fd !important; } /* 浅層：水色 */

/* --------------------------------------------------------------------------
   11. 警告用プロのアドバイス（Warning Tips）
   --------------------------------------------------------------------------
   【設計理由】
   1) 事故防止に関する記述のため、御幸ブルーではなく警告色のオレンジを採用。
   2) 視覚的に「注意すべき点」であることを学習者に強調する。
   -------------------------------------------------------------------------- */
.c-pro-tips.is-warning {
    background: #fff7ed;
    border: 2px solid #ffedd5;
    border-left: 8px solid #f97316;
    color: #9a3412;
}

.c-pro-tips.is-warning span {
    color: #f97316;
    font-variation-settings: 'FILL' 1; /* アイコンを塗りつぶしにして強調 */
}

/* --------------------------------------------------------------------------
   12. 文章解説リード文の装飾（Lead Text Style）
   --------------------------------------------------------------------------
   【設計理由】
   1) セクションの冒頭で「何が重要か」を一行で伝えるための背景装飾。
   -------------------------------------------------------------------------- */
.c-explanation-lead {
    padding: 20px;
    background-color: #fff;
    border-radius: 12px;
    margin-bottom: 25px;
    border: 1px solid #e2e8f0;
}

/* --------------------------------------------------------------------------
   13. 電線実態セクション：個別装飾（Electric Real Section）
   --------------------------------------------------------------------------
   【設計理由】
   1) 「空」や「電柱」をイメージさせるため、アイコンに空色のアクセントを付与。
   2) 現場での「見落とし」を防ぐため、プロのアドバイスに注意を促す装飾を適用。
   -------------------------------------------------------------------------- */

/* 電柱アイコン用のカラー設定 */
.c-info-card .material-symbols-outlined {
    transition: color 0.3s ease;
}

.c-info-card:hover .material-symbols-outlined {
    color: #0ea5e9; /* ホバー時に空色へ変化させ、上空への意識を促す */
}

/* --------------------------------------------------------------------------
   14. 上空注意の強調表示（Aerial Caution）
   --------------------------------------------------------------------------
   【設計理由】
   1) 感電事故は重大事故に直結するため、通常のチップスより枠線を太くし、
      視覚的なフック（引っ掛かり）を強くする。
   -------------------------------------------------------------------------- */
.c-pro-tips.is-aerial-caution {
    border: 3px solid #0070b8;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

.c-pro-tips.is-aerial-caution::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: #0070b8;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* --------------------------------------------------------------------------
   15. ライフライン各論：コンテンツボックス（Lifeline Detail Box）
   --------------------------------------------------------------------------
   【設計理由】
   1) 水、電気などの大きな括りごとに背景を白のカードで包み、情報の塊を強調。
   2) サブヘッダーにはアクセントカラーを使い、セクション内の区切りを明確化。
   -------------------------------------------------------------------------- */
.c-pop-content-box {
    background: #fff;
    padding: 30px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    margin-bottom: 40px;
}

.c-pop-sub-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px dashed #e2e8f0;
}

.c-pop-sub-header span {
    color: #e6007e; /* ライフラインカラー：ミユキピンク */
    font-size: 1.8rem;
}

.c-pop-sub-header h3 {
    font-size: 1.4rem;
    color: #1e293b;
    margin: 0;
}

/* --------------------------------------------------------------------------
   16. カードのホバーエフェクト（Lifeline Card Hover）
   --------------------------------------------------------------------------
   【設計理由】
   1) 各ライフラインのカードにマウスを合わせた際、ミユキピンクの縁取りが
      現れるようにし、インタラクティブな楽しさを付与。
   -------------------------------------------------------------------------- */
.c-info-card.is-lifeline-accent:hover {
    border-color: #e6007e;
    background-color: #fff1f2;
    transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   17. 物流統合：個別アクセントカラー（Logistics Integrated Color）
   --------------------------------------------------------------------------
   【設計理由】
   1) 物流を「動くライフライン」として表現するため、他のライフライン（ピンク系）
      とは異なる、信頼感のあるディープブルー (#1e40af) を採用。
   2) ホバー時の挙動を統一し、ページ全体の操作感を維持する。
   -------------------------------------------------------------------------- */

/* 物流カード専用のアイコン・ホバー装飾 */
.c-info-card.is-logistics-accent span {
    color: #1e40af; /* 物流：ディープブルー */
}

.c-info-card.is-logistics-accent:hover {
    border-color: #1e40af;
    background-color: #eff6ff;
    transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   18. カード内テキストの可視化調整（Card Text Alignment）
   --------------------------------------------------------------------------
   【設計理由】
   1) 3個並びのカードが複数行にわたる場合も、アイコンと見出しの位置を
      揃えることで、リストとしてのリズムを崩さないようにする。
   -------------------------------------------------------------------------- */
.c-info-card h4 {
    min-height: 3rem; /* 見出しの折り返しによる高さズレを防止 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   19. 引き込みセクション：接続の可視化（Connection Visualization）
   --------------------------------------------------------------------------
   【設計理由】
   1) 「外から中へ」という流れを強調するため、アイコンに動きのあるホバー設定を付与。
   2) 設備リストにはチェックマークの代わりに「建物アイコン」を配置し、室内設備
      であることを明示。
   -------------------------------------------------------------------------- */

/* 接続セクションのカードホバー：吸い込まれるような移動エフェクト */
#section-building-connection .c-info-card:hover {
    transform: scale(1.03) translateY(3px);
    border-color: #0070b8;
}

/* 建物設備リストのアイコンをカスタマイズ */
#section-building-connection .c-pop-list li::before {
    content: "domain"; /* 建物アイコン */
    color: #e6007e; /* ライフラインのピンク色 */
}

/* --------------------------------------------------------------------------
   20. セクション間セパレーター（Section Separator）
   --------------------------------------------------------------------------
   【設計理由】
   1) ページの最下部に向かって、情報の密度が高くなるため、
      セクション間の余白 (Margin) をPC/スマホで最適化する。
   -------------------------------------------------------------------------- */
.c-pop-section {
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 40px;
}

.c-pop-section:last-of-type {
    border-bottom: none;
}

/* --------------------------------------------------------------------------
   21. 物流ラストワンマイル：4カラムグリッド（Logistics 4-Col Grid）
   --------------------------------------------------------------------------
   【設計理由】
   1) 置き配スペースの追加により項目が4つになったため、3カラムから
      自動調整されるグリッド形式（grid-template-columns）に変更。
   2) PCでは4枚、タブレットでは2枚、スマホでは1枚と柔軟に可変させる。
   -------------------------------------------------------------------------- */

.c-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* 置き配アイコンの個別装飾 */
#section-logistics-lastmile .c-info-card .material-symbols-outlined {
    color: #1e293b; /* ダークネイビー */
}

/* --------------------------------------------------------------------------
   22. 置き配専用の安全配慮（Safety & Logic）
   --------------------------------------------------------------------------
   【設計理由】
   1) 置き配は「消防法（避難経路）」との関わりが深いため、実務的な注意を
      促すためのリストスタイルを適用。
   -------------------------------------------------------------------------- */
#section-logistics-lastmile .c-pop-list li:first-child::before {
    content: "lock_open"; /* スマートロックのイメージ */
    color: #1e293b;
}

/* --------------------------------------------------------------------------
   23. レスポンシブ調整：グリッド（Mobile Responsive Grid）
   --------------------------------------------------------------------------
   【設計理由】
   1) 画面幅が狭まった際もカードが潰れないよう、最小幅を維持しつつ改行させる。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .c-grid-wrapper {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   24. 施工と管理：セクション個別スタイル（Role Specific Style）
   --------------------------------------------------------------------------
   【設計理由】
   1) 施工（御幸ブルー：技術）と管理（ミユキピンク：安心）の
      イメージカラーをそれぞれのグリッドに適用し、専門性を視覚化する。
   -------------------------------------------------------------------------- */

/* 施工セクション用アイコンカラー */
#section-pro-responsibility .c-pop-sub-header span:first-child {
    color: #0070b8; /* 御幸ブルー */
}

/* --------------------------------------------------------------------------
   25. フッター直前の余白設定（Final Layout Adjustment）
   --------------------------------------------------------------------------
   【設計理由】
   1) ページ末尾まで学習者が集中できるよう、十分なボトムパディングを確保。
   -------------------------------------------------------------------------- */
.c-pop-section:last-of-type {
    padding-bottom: 60px;
    border-bottom: none;
}

/* カードの最小高さを揃える設定 */
.c-info-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* --------------------------------------------------------------------------
   26. ヒーローヘッダー：トップ画像設定（Hero Image Setup）
   --------------------------------------------------------------------------
   【設計理由】
   1) 背景画像をCSS側で定義することで、htmlのコードをクリーンに保つ。
   2) 背景画像の上に linear-gradient を重ね、文字の可読性を100%確保する。
   -------------------------------------------------------------------------- */
.hero-header-full.is-top-image {
    /* 指定画像の読み込みと、視認性確保のためのグラデーション処理 */
    background-image: 
        linear-gradient(135deg, rgba(0, 112, 184, 0.4), rgba(0, 0, 0, 0.6)),
        url('../img/lifeline/lifeline_top.jpg');
    background-size: cover;
    background-position: center;
}

/* ポップなバッジの装飾 */
.c-pop-badge {
    background-color: #e6007e; /* ミユキピンク */
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(230, 0, 126, 0.3);
}

/* --------------------------------------------------------------------------
   30. 共通フッター：ポップ・モダン（Modern Pop Footer）
   --------------------------------------------------------------------------
   【設計理由】
   1) ページの最下部を締めくくるため、御幸ブルー (#0070b8) を背景に採用。
   2) 上部を波状の曲線（SVG等）または大きめの角丸にすることで、ポップさを演出。
   3) 情報を整理し、コピーライトを中央に配置。
   -------------------------------------------------------------------------- */

.c-pop-footer {
    background-color: #0070b8; /* 御幸ブルー */
    color: #ffffff;
    padding: 60px 0 30px;
    margin-top: 80px;
    border-radius: 60px 60px 0 0; /* 上部のみ大胆な角丸でポップに */
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* フッター内のロゴ・企業名装飾 */
.c-pop-footer__brand {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.c-pop-footer__brand span {
    font-size: 1.8rem; /* アイコンを少し大きく */
}

/* リンクやコピーライトのテキスト */
.c-pop-footer__copy {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
}

/* 装飾用の背景アクセント：右下に薄くアイコンを配置 */
.c-pop-footer::after {
    content: "architecture";
    font-family: 'Material Symbols Outlined';
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 10rem;
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}
/* --------------------------------------------------------------------------
   31. 電気引き込みセクション：ビジュアルレイアウト（Electricity Visual）
   --------------------------------------------------------------------------
   【設計理由】
   1) 2枚の図解画像を並列に配置し、屋外から屋内への流れを比較しやすくする。
   2) スマホ表示では画像が小さくなりすぎないよう縦並びに切り替える。
   -------------------------------------------------------------------------- */

.c-electricity-visual {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.c-visual-box {
    flex: 1;
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.u-img-responsive {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.u-small {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 10px;
}

/* --------------------------------------------------------------------------
   32. レスポンシブ調整：画像エリア（Mobile Electricity Visual）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .c-electricity-visual {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   33. 給排水セクション：レイアウト調整（Water System Layout）
   -------------------------------------------------------------------------- */

.u-text-center {
    text-align: center;
}

.u-mb-20 {
    margin-bottom: 20px;
}

/* 画像が浮かないよう、少し影をつけてカードと馴染ませる */
.c-pop-content-box .u-img-responsive {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
}

/* 排水トラップの説明アイコン用：回転させてS字っぽく見せる遊び心 */
.material-symbols-outlined[data-icon="u_turn_left"] {
    transform: rotate(90deg);
}
/* --------------------------------------------------------------------------
   34. 給排水専用：左図・右説明レイアウト（Left Image Right Text）
   --------------------------------------------------------------------------
   【設計理由】
   1) 図を見ながら右側の詳細を順に追えるため、学習効率が高い。
   2) PC時は横並び（6:4）、画面幅が狭いデバイスでは縦並びに可変。
   -------------------------------------------------------------------------- */

.c-flex-layout {
    display: flex;
    gap: 30px;
    align-items: stretch; /* カードの高さを揃える */
    margin-bottom: 40px;
}

/* 左側：画像エリア（60%） */
.c-flex-visual {
    flex: 0 0 60%;
    background: #fff;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-img-fit {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* 右側：縦3連カード（残りのスペース） */
.c-flex-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: space-between;
}

/* --------------------------------------------------------------------------
   35. レスポンシブ調整（Flex Layout Response）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .c-flex-layout {
        flex-direction: column;
    }
    .c-flex-visual {
        flex: 1 1 auto;
        width: 100%;
    }
    .c-flex-cards {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   37. GAS設備専用：左図・右説明レイアウト（Left Image Right Text）
   --------------------------------------------------------------------------
   【設計理由】
   1) 都市ガスの所有境界や、LPガスの供給・消費区分の図解を左に大きく配置。
   2) 右側のカードを縦3列にすることで、図の番号や項目と対比させやすくする。
   -------------------------------------------------------------------------- */

/* GASセクション内のFlexコンテナ */
#section-gas-system .c-flex-layout {
    display: flex;
    gap: 30px;
    align-items: stretch; /* 左の画像高さにカード群を合わせる */
    margin-bottom: 40px;
}

/* 左側：図解エリア (60%) */
#section-gas-system .c-flex-visual {
    flex: 0 0 60%;
    background: #fff;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 右側：縦3列の説明カード (40%) */
#section-gas-system .c-flex-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* カード内のアイコンカラーをGAS用に調整 */
#section-gas-system .c-info-card span {
    color: #f97316; /* オレンジ系 */
}

/* --------------------------------------------------------------------------
   38. GASセクション：レスポンシブ対応
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    #section-gas-system .c-flex-layout {
        flex-direction: column;
    }
    #section-gas-system .c-flex-visual {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   41. 宅内全体図：図下3カラムレイアウト（Top Image Bottom Text）
   --------------------------------------------------------------------------
   【設計理由】
   1) 全体図が横長であるため、上部に最大幅で配置し、視認性を高める。
   2) 下部に3カラムのカードを置くことで、安定感のある「まとめ」の構図にする。
   -------------------------------------------------------------------------- */

.c-full-visual-area {
    background: #fff;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.u-mt-30 {
    margin-top: 30px;
}

/* カード内のテキストを中央寄りに調整し、図との親和性を高める */
#section-indoor-lifeline .c-info-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 25px;
}

#section-indoor-lifeline .c-info-card span {
    font-size: 2.8rem;
    margin-bottom: 15px;
}

/* --------------------------------------------------------------------------
   42. レスポンシブ：タブレット・スマホ
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .c-full-visual-area {
        padding: 10px;
    }
}