/* ～～～～～～～～～～～～～～～～～～～ */
/* ご案内のｃｓｓ */
/* ～～～～～～～～～～～～～～～～～～～ */


@charset "utf-8";
*{
    padding: 0;
    margin: 0;
}
/* ご案内頭の画像 */
.goannnai-head-image{
    position: relative;
    text-align: center;
}

/* ロゴ */
.logo{
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50% -50%);
background-color:  rgba(0, 0, 0, 0.6);
width: 11%;
}
.logo img{
    width: 100%;
}
/* ご案内の文字 */
.goannnai{
    position:absolute;
    writing-mode: vertical-rl;
    letter-spacing: 0.5rem;
    top: 25%;
    left: 90%;
    font-family:  "Shippori Mincho", serif;
    font-size: 4vw;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1%;
}

/* メニュー */
.menu ul{
    display: flex;
    justify-content: space-around;
    margin:  2%;  
}
.menu a{
    color: black;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 1.5vw;
    letter-spacing: 0.05em;
}

/* メニューボタンの色の変化 */
.menu a:hover{
color: #a22041;
background-color: rgba(162, 32, 65, 0.1);
}

/* ～～～～～～～～～～～～～～～～
ご案内メインのグリッド
～～～～～～～～～～～～～～～～ */
.container{
    display: grid;
    grid-template-columns: 2fr 7fr 1fr 8fr 2fr;
    grid-template-rows: 40px 60px 240px 40px 60px 240px 100px 40px 150px 150px 150px 250px 250px;
    grid-template-areas: "rit seki   seki   seki   left"
                         "rit shoku  shoku  hannko left"
                         "rit isuime isuime zaime  left"
                         "rit hosoku hosoku hosoku left"
                         "rit koshi  koshi  koshi  left"
                         "rit sumi   sumi   hiroma left"
                         "rit hiiki  hiiki  hiiki  left"
                         "rit ann    ann    ann    left"
                         "rit jyu    kara   kara   left"
                         "rit denn   kara   kara   left"
                         "rit tei    kara   kara   left"
                         "rit eigyo  map    map    left"
                         "rit kureka map    map    left"
                         ;
    margin-top: 10%;
}

/* グリッド範囲設定 */
/* 左端 */
.rit{
    grid-area: rit;
}
/* お席 */
.seki{
    grid-area: seki;
}
.seki h3{
    font-size: 2vw;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    letter-spacing: 0.5em; 
    border-bottom: 2px solid #888e7e;   
}
/* 食堂部 */
.shoku{
    grid-area: shoku;
}
.shoku h3{
    font-size: 1.6vw;
    font-family: "Shippori Mincho", serif;
    font-weight: 400; 
    padding: 5%;
}
/* 奥の半個室 */
.hannko{
    grid-area: hannko;
}
.hannko h3{
    font-size: 1.6vw;
    font-family: "Shippori Mincho", serif;
    font-weight: 400; 
    padding: 5%;
}
/* イス席画像 */
.isuime{
    grid-area: isuime;
    padding-left: 20%;
    padding-top: 3%;
}
/* 半個室画像 */
.zaime{
    grid-area: zaime;
    padding-left: 20%;
    padding-top: 3%;
}
/* 一階補足 */
.hosoku{
    grid-area: hosoku;
    padding-left: 10%;
    padding-top: 2%;
    font-size: 1.2vw;
    color: black;
    font-weight: 400;
    font-family: sans-serif;
    line-height: 1.5;
}

/* 個室 */
.koshi{
    grid-area: koshi;
}
.koshi h3{
    font-size: 1.6vw;
    font-family: "Shippori Mincho", serif;
    font-weight: 400; 
    padding: 5%;  
}
/* すみれ画像 */
.sumi{
    grid-area: sumi;
    padding-left: 20%;
    padding-top: 3%;
}
/* ３階画像 */
.hiroma{
    grid-area: hiroma;
    padding-left: 20%;
    padding-top: 3%;
}
/* ご贔屓様用補足 */
.hiiki{
    grid-area: hiiki;
    padding-left: 10%;
    padding-top: 2%;
    font-size: 1.2vw;
    color: black;
    font-weight: 400;
    font-family: sans-serif;
    line-height: 1.5;
}
/* 案内 */
.ann{
    grid-area: ann;
}
.ann h3{
    font-size: 25px;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    letter-spacing: 0.2em; 
    border-bottom: 2px solid #888e7e;
}
/* 住所 */
.jyu{
    grid-area: jyu;
    padding: 4%;
    letter-spacing: 0.2em;
    line-height: 2;
    font-family:  "Shippori Mincho", serif;
    font-size: 1.2vw;
}
.jyu a{
    text-decoration: underline;
}
/* 右の空白 */
.kara{
    grid-area: kara;
}
/* 電話番号 */
.denn{
    grid-area: denn;
    padding: 4%;
    letter-spacing: 0.3em;
    line-height: 2;
    font-family:  "Shippori Mincho", serif;
    font-size: 1.2vw;
}
/* 営業時間 */
.jikann{
    font-size: 1.1vw;
}
/* 定休日 */
.tei{
    grid-area: tei;
    padding: 4%;
    letter-spacing: 0.2em;
    line-height: 2;
    font-family:  "Shippori Mincho", serif;
    font-size: 1.2vw;
}
/* 営業時間 */
.eigyo{
    grid-area: eigyo;
    padding: 4%;
    letter-spacing: 0.2em;
    line-height: 2;
    font-family:  "Shippori Mincho", serif;
    font-size: 1.2vw;
}
/* 右の地図 */
.map{
    grid-area: map;
    text-align: right;
}
.map img{
    width: 90%;
}
/* 支払 */
.kureka{
    grid-area: kureka;
    padding: 4%;
    letter-spacing: 0.2em;
    line-height: 2;
    font-family:  "Shippori Mincho", serif;
    font-size: 1.2vw;
}
.visa{
    font-size: 1vw;
    letter-spacing: 0.01em;
}
/* 右端 */
.left{
    grid-area: left;
}


/* フッター */
footer{
    text-align: center;
    font-family: serif;
    background-color: black;
    color: white;
}