@charset "UTF-8";

/* ==========================================================================
   【管理メモ：完全版・最終調整】
   ・PC版：完成済みの3列スタイルを完全維持。
   ・スマホ版：横線区切りを維持しつつ、リスト項目のみ「左揃え」に修正。
   ========================================================================== */

/* ---------------------------------------------------------
   1. PC版設定（現在の完成状態を維持）
--------------------------------------------------------- */
.p-infographic-grid,
.p-usage-text-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 20px !important;
    margin: 30px 0 !important;
}

.p-info-card,
.p-usage-text-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 30px 20px !important;
    border-radius: 20px !important;
    background: #fff;
    box-sizing: border-box !important;
    min-height: 250px !important;
    text-align: left!important;
}

.p-usage-text-card { border-top: 6px solid #ccc !important; }
.u-border-residence  { border-top-color: #4caf50 !important; }
.u-border-commercial { border-top-color: #ff9800 !important; }
.u-border-industrial { border-top-color: #455a64 !important; }

.p-info-card .material-icons {
    font-family: 'Material Icons' !important;
    font-size: 3.5rem !important;
    text-transform: lowercase !important;
    margin-bottom: 10px !important;
}

.p-usage-visual img {
    display: block !important;       /* センター寄せのためにブロック要素化 */
    margin: 0 auto !important;       /* 左右の余白を自動にして中央へ */
    width: 100% !important;
    max-width: 900px !important;
    height: auto !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; /* ★柔らかく深いシャドウ */
}
/* PC版：重要・混同注意ボックスのレイアウト修正 */
.p-info-card.u-full-width {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: row !important; /* 全体は横並び */
    align-items: center !important;
    padding: 30px 40px !important;
    background: #f6b352 !important;
    min-height: auto !important;
}

/* 左側：アイコンと「重要・混同注意」を縦に並べる塊 */
.p-info-card.u-full-width .p-card-header {
    display: flex !important;
    flex-direction: column !important; /* ⚠ と テキストを縦並びに */
    align-items: center !important;
    justify-content: center !important;
    margin-right: 30px !important;    /* 右側の説明文との間隔 */
    min-width: 150px !important;      /* 左側の幅を固定して安定させる */
    flex-shrink: 0 !important;
    background: none !important;      /* 背景リセット */
    padding: 0 !important;
}

/* ⚠ アイコンの調整 */
.p-info-card.u-full-width .material-icons {
    font-size: 3.5rem !important;
    margin-bottom: 5px !important;   /* 下の「重要・混同注意」との隙間 */
    color: #fff !important;
}

/* 「重要・混同注意」テキストの調整 */
.p-info-card.u-full-width .p-card-title {
    font-size: 1rem !important;
    font-weight: bold !important;
    color: #fff !important;
    white-space: nowrap !important;   /* 改行させない */
}

/* 右側：説明文の調整 */
.p-info-card.u-full-width .p-card-body {
    flex: 1 !important;
    text-align: left !important;
    color: #fff !important;
    padding: 0 !important;
    line-height: 1.8 !important;
}
/* 「具体的な用途地域13種類」タイトルの装飾 */
.p-detail-subhead {
    font-size: 1.4rem !important;      /* 文字をひと回り大きく */
    font-weight: bold !important;      /* 太字で力強く */
    color: #333 !important;            /* 濃いグレーで読みやすく */
    border-left: 6px solid #4caf50 !important; /* 左側に緑のアクセント棒 */
    padding: 5px 0 5px 15px !important;  /* 棒と文字の間の余白 */
    margin: 40px 0 25px !important;    /* 上下に適切な空間を確保 */
    letter-spacing: 0.05em !important;   /* 文字間を広げて高級感を出す */
    line-height: 1.4 !important;       /* 行間を整える */
    display: block !important;         /* 確実にブロック要素として扱う */
}

/* ---------------------------------------------------------
   2. スマホ版設定（リスト左揃え最適化）
--------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .p-infographic-grid,
    .p-usage-text-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .p-info-card,
    .p-usage-text-card {
        flex-direction: column !important;
        padding: 0 !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    /* 上部エリア：タイトルは中央揃え */
    .p-info-card .p-card-header,
    .p-usage-text-card .u-bold {
        width: 100% !important;
        padding: 20px 15px 15px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        text-align: center !important;
        display: block !important;
    }
    
    .p-info-card .p-card-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    /* 下部エリア：リスト項目は「左揃え」に変更 */
    .p-info-card .p-card-body,
    .p-usage-text-card .u-small-list {
        width: 100% !important;
        padding: 20px 25px !important; /* 左の余白を少し多めに */
        font-size: 0.9rem !important;
        line-height: 1.8 !important;
        text-align: left !important;  /* ★ここを左揃えに */
        margin: 0 !important;
        box-sizing: border-box !important;
        display: inline-block !important; /* 幅を維持 */
    }

    /* リスト項目のポレット記号（・）の重なりを防ぐ */
    .u-small-list {
        list-style-position: outside !important;
        padding-left: 1.5em !important;
    }

    /* アイコンと文字サイズの微調整 */
    .p-info-card .material-icons { font-size: 2.8rem !important; display: block !important; margin: 0 auto 5px !important; }
    .p-card-title { font-size: 1.1rem !important; font-weight: bold !important; display: block !important; }

    .p-info-card.u-bg-teal { grid-column: auto !important; width: 100% !important; }
    .p-info-card.u-full-width { flex-direction: column !important; padding: 0 !important; }
}