/* ============================================================
 * EX REDESiGN — Google Maps
 *
 * トップページ末尾・フッター上・固定ページ（テンプレート）に出る
 * Google Maps Embed iframe のスタイル。高さは動的に
 * --ex-gmaps-h-desktop / --ex-gmaps-h-mobile で接補される。
 * ============================================================ */

.ex-gmaps {
    width: 100%;
    line-height: 0; /* iframe 下のスペースを除去 */
    margin: 0;
    padding: 0;
}

.ex-gmaps iframe {
    width: 100%;
    height: var(--ex-gmaps-h-desktop, 400px);
    border: 0;
    display: block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

/* variant 別調整ポイント (現状ともに margin ゼロ、使い分けていない、将来拡張用) */
.ex-gmaps--footer,
.ex-gmaps--content {
    margin-top: 0;
    margin-bottom: 0;
}

/* WordPress core の <main> 親グループの block-gap で
   <footer class="wp-block-template-part"> に margin-top が付いてしまうため、
   トップページ末尾 Google Maps とフッターとの間に余白が出る。
   フッターラッパーの上下マージンをゼロ化してキャンセル。 */
footer.wp-block-template-part {
    margin-block: 0;
}

@media (max-width: 600px) {
    .ex-gmaps iframe {
        height: var(--ex-gmaps-h-mobile, 300px);
    }
}