@charset "UTF-8";
@import url(./common.css);

/* ------------------------------
トップの画像
------------------------------ */
.head_img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* ------------------------------
ナビゲーション
------------------------------ */
/* 小さいテキスト */
.global_navigation .focus > span::after {
    content: "Information";
}

/* ------------------------------s
h2
------------------------------ */
.sec_h2 .h2_block {
    padding: 1em;
}

/* ------------------------------s
Information
------------------------------ */
.sec_h2 .info_table {
    border-collapse: collapse;
}
.sec_h2 .info_table tr {
    border-bottom: solid 1px var(--borderColor);
}
.sec_h2 .info_table th {
    width: 8em;
    font-weight: normal;
    text-align: left;
}
.sec_h2 .info_table th,
.sec_h2 .info_table td {
    padding: 1em;
}
/* reserve側 */
.info .reservation {
    padding: 1em;
    border: solid 1px var(--borderColor);
    margin: 1em;
}
.info .reservation > .line_qr {
    width: 100px;
    aspect-ratio: 1;
    border: solid 1px var(--textColor-1);
    margin: 1em auto;
}

/* 地図 */
.sec_h2 .google_map iframe {
    width: 100%;
    outline: none;
    border: none;
    filter: grayscale(100%);
}


/* ------------------------------s
スマホ向け
------------------------------ */
@media screen and (max-width: 767px) {

}

/* ------------------------------
タブレット向け
------------------------------ */
@media screen and (min-width: 768px) and (max-width: 959px) {

}
/* ------------------------------
タブレット以下で共通
------------------------------ */
@media screen and (max-width: 959px) {

    /* ------------------------------
    トップの画像
    ------------------------------ */
    .head_img {
        aspect-ratio: 3 / 1;
        background-image: url(../image/head-image/info-800.jpg);
    }

    /* ------------------------------
    レイアウト
    ------------------------------ */
    .sec_h2 {
        padding: 0 1em;
    }

    /* ------------------------------
    Information
    ------------------------------ */
    /* テーブル */
    .info .info_table {
        width: 100%;
    }
    /* 地図 */
    .sec_h2 .google_map iframe {
        aspect-ratio: 3 / 2;
    }
}

/* ------------------------------
ノートパソコン向け
------------------------------ */
@media screen and (min-width: 960px) and (max-width: 1280px) {


}

/* ------------------------------
デスクトップパソコン向け
------------------------------ */
@media screen and (min-width: 1281px) {


}

/* ------------------------------
ノートパソコン以上で共通
------------------------------ */
@media screen and (min-width: 960px) {

    /* ------------------------------
    トップの画像
    ------------------------------ */
    .head_img {
        aspect-ratio: 4 / 1;
        background-image: url(../image/head-image/info-2000.jpg);
    }

    /* ------------------------------
    Information
    ------------------------------ */
    .info .flex_wrapper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1em;
    }
    .info .flex_wrapper > .info_table {
        width: 59%;
    }
    .info .flex_wrapper > .reservation {
        width: 39%;
    }
    /* 地図 */
    .info .google_map iframe {
        aspect-ratio: 3 / 1;
    }
    
}