@charset "utf-8";

/*--------------------------------------------------------------
  地図
--------------------------------------------------------------*/

#map {
    margin: 0;
    padding: 3rem 10% 3rem 10%;
    background-color: rgb(248, 243, 234);
}

#map>h3 {
    margin: 1rem 0 0 0;
    font-family: "Noto Serif JP", "Tinos", serif;
    font-weight: 200;
    text-align: center;
    letter-spacing: 0.1rem;
    opacity: 0.5;
}

#map>h3::first-letter {
    font-size: 3em;
}

#map>h5 {
    margin: 0 0 3rem 0;
    padding: 0;
    font-size: 1rem;
    text-align: center;
    opacity: 0.5;
}

#map .map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    row-gap: 1rem;
}

#map .address-grid {
    display: grid;
    justify-content: flex-start;
    /* 横方向の開始位置に配置 */
    align-items: start;
    /* 縦方向の上揃え */
    grid-template-columns: 5rem 1fr;
    column-gap: 1rem;
    row-gap: 1rem;

    font-size: 1rem;
    line-height: 1.2rem;
}

#map .address-grid>span:nth-child(2n+1) {
    text-align-last: justify;
}


#map iframe,
#map img {
    width: 100%;
    aspect-ratio: 1/1;
    border: 6px solid #ccc;
}

/* 初期状態では iframe を非表示に */
#map iframe {
    display: none;
}

#map button {
    font-size: 0.8rem;
    line-height: 0.8rem;
    margin: 0;
    padding: 0.2rem 1rem 0.2rem 1rem;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 1rem;
    cursor: pointer;
}

@media (max-width: 767.98px) {

    /* sm 以下の画面サイズの場合のスタイル */
    #map {
        margin: 0;
        padding: 3rem 1rem 3rem 1rem;
    }

    #map>.map-grid {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 3rem;
        row-gap: 1rem;
    }

}

@media (min-width: 768px) and (max-width: 991.98px) {

    /* md の画面サイズの場合のスタイル */
    #map {
        margin: 0;
        padding: 3rem 1rem 3rem 1rem;
    }

    #map>.map-grid {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 3rem;
        row-gap: 1rem;
    }
}

@media (min-width: 992px) {
    /* lg 以上の画面サイズの場合のスタイル */
}