/* ...（既存のCSSはそのまま）... */

/* ===============================
事業所リスト
=============================== */
#office-list {
    padding: 6% 0 0 0;
}

.office-item {
    display: flex; /* テキストとマップを横並びにする */
    justify-content: space-between; /* 両端に配置 */
    gap: 4%; /* 要素間の隙間 */
    align-items: center; /* 上下中央揃え */
    max-width: 85%;
    margin: 0 auto; /* 中央寄せ */
    margin-bottom: 5%;
}

#office-list h1 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
}

/* 2つ目以降の事業所ブロックの上に余白を追加 */
.office-item + .office-item {
    margin-top: 80px; 
}

.office-info {
    width: 48%; /* 左側のテキストエリアの幅 */
    font-size: 16px;
    line-height: 1.8;
}

.office-name {
    display: inline-block; /* 背景色と余白を有効にするため */
    background: #e9e9e9; /* 参考サイトに近いグレー */
    padding: 8px 25px;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px; /* 事業所名と住所の間の余白 */
}

.office-map {
    width: 48%; /* 右側のマップエリアの幅 */
}

.office-map iframe {
    width: 100%; /* 親要素の幅に合わせる */
    height: 350px; /* 高さを指定 */
    vertical-align: middle; /* iframe下の余白を消す */
}


/* ...（既存の#con-sec, #footerなどのCSSはそのまま）... */


/* ===============================
SP (メディアクエリの修正)
=============================== */

/* ...（既存の940pxのメディアクエリはそのまま）... */


@media only screen and (max-width: 640px) {

    /* ...（既存のスタイル）... */

    /* ▼▼▼ 事業所リストのSP対応 ▼▼▼ */
    .office-item {
        flex-direction: column; /* 縦並びに変更 */
    }

    .office-item + .office-item {
        margin-top: 50px; /* SP用の余白 */
    }

    .office-info,
    .office-map {
        width: 100%; /* 幅を100%にして縦に積む */
    }
    
    .office-info {
        font-size: 14px;
        margin-bottom: 20px; /* テキストとマップの間の余白 */
    }

    .office-name {
        font-size: 16px;
        padding: 6px 20px;
    }
    
    .office-map iframe {
        height: 250px; /* SP用の高さ */
    }
    /* ▲▲▲ ここまで ▲▲▲ */


    /* ▼▼▼ 既存の不要なスタイルを削除またはコメントアウト ▼▼▼ */
    /* 古い#map_txtのスタイルは不要になります */
    /*
    #map_txt .cann {
        font-size: 14px;
        display: grid;
    }
    #map_txt .cann .map_l .coo {
        width: 0%;
        padding: 2% 6%;
        margin-right: 10px;
        background: #d3d3d3;
        float: left;
    }
    #map_txt .cann .map_l {
        padding: 4% 0;
        width: 100%;
    }
    #map_txt .cann .map_r {
        width: 100%;
        float: none;
    }
    */
}