@charset "utf-8";
/* ==================================================
   エリア一覧ベース設定（PC・スマホ共通）
================================================== */
#area_list {
    margin: 30px auto;
	max-width: 1160px;
	
}

#area_list .t_area {
    font-size: 1.4rem;
    font-weight: bold;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* 枠線の設定 */
.prefmap.list dl {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
}

.prefmap.list dt,
.prefmap.list dd {
    box-sizing: border-box;
    margin: 0;
    border-bottom: 1px solid #ccc;
}

.prefmap.list dt {
    background-color: #f7f9fa; /* 見出しの背景色（薄いブルーグレー） */
    font-weight: bold;
    padding: 15px;
}

.prefmap.list dd {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

/* リンクの基本設定 */
.prefmap.list dd a {
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.prefmap.list dd a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.prefmap.list dt a {
    color: #0056b3;
    text-decoration: underline;
}

/* ==================================================
   PC用レイアウト（769px以上）
================================================== */
@media screen and (min-width: 769px) {
    .prefmap.list dt {
        width: 30%;
        border-right: 1px solid #ccc;
        display: flex;
        align-items: center; /* テキストを上下中央揃え */
    }

    .prefmap.list dd {
        width: 70%;
        gap: 10px 15px; /* リンク同士の余白（縦10px 横15px） */
    }
}

/* ==================================================
   スマホ用レイアウト（768px以下）
================================================== */
@media screen and (max-width: 768px) {
    .prefmap.list dt {
        width: 100%;
        border-bottom: none; /* スマホ時はddと繋げるため下線を消す */
        padding: 12px 15px 5px;
    }

    .prefmap.list dd {
        width: 100%;
        padding: 10px 15px 20px;
        gap: 8px; /* スマホ時の隙間 */
    }

    /* スマホ時はタップしやすいようにボタン風にする */
    .prefmap.list dd a {
        display: block;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    
    .prefmap.list dd a:active {
        background-color: #f0f0f0;
    }
}
/* ==================================================
   市区町村ページ用エリアテキスト設定
================================================== */
/* エリアテキストを囲うボックス */
#area_list .inside > div:not(#area_inquiry) {
    background-color: #f7f9fa; /* 前回の表の見出しと同じ薄いグレー */
    border: 1px solid #ccc;
    padding: 20px 25px;
    border-radius: 4px;
}

/* 中のテキスト */
#area_list .inside > div:not(#area_inquiry) p {
    margin: 0;
    line-height: 1.8; /* 行間を広めに取って読みやすく */
    font-size: 1rem;
    color: #333;
}

/* スマホ用レイアウト */
@media screen and (max-width: 768px) {
    #area_list .inside > div:not(#area_inquiry) {
        padding: 15px;
    }
    
    #area_list .inside > div:not(#area_inquiry) p {
        font-size: 0.95rem;
    }
}
/* ==================================================
   施工事例：準備中メッセージ
================================================== */
.prep-notice {
    background-color: #fff; /* 白抜きにして要素を際立たせる */
    border: 1px solid #e2e2e2; /* 控えめなグレーの枠線 */
    border-radius: 6px; /* 少し角丸にして柔らかい印象に */
    padding: 50px 20px; /* 余白をたっぷりとるのがデザイン性アップのコツ */
    margin: 30px auto;
    text-align: center; /* 中央揃え */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); /* ほんの少しだけ影を落とす */
}

.prep-notice-text {
    color: #666; /* 真っ黒ではなく、少し落ち着いた文字色に */
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
}

/* スマホ用レイアウト */
@media screen and (max-width: 768px) {
    .prep-notice {
        padding: 40px 15px;
    }
    .prep-notice-text {
        font-size: 0.95rem;
    }
}