@charset "UTF-8";

/*　-----------------共通部分----------------------*/

html{
    /*ユーザーの設定した文字サイズを正しく反映*/
    font-size: 100%;
}
body{
    /*書体の設定、行の高さの設定、色の指定*/
    font-family: "Kanit", sans-serif;
    font-family: "Noto Sans JP", sans-serif;
    width: 90vw;
    margin-left: 5vw;
}
img{
    /*画像の最大幅を100%に設定*/
    max-width: 100vw;
    height: auto;
}
a{
    /*<a>タグの線の指定*/
    text-decoration: none;
}
.kanit-medium {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-style: normal;
}



/*---------Header------------*/

.page-header{
    display: flex;
    justify-content: space-between;
    padding: 0px 0px 0px;

}

.logo{
  margin-top: 7vh;
  width: 40vw;
}

.main-nav{
    margin-right: 5vw;
    margin-top: 10vh;
    display: flex;
    text-transform: uppercase;
    list-style: none;
    font-family: "Kanit", sans-serif;
    font-size: 1.7rem;
}

.main-nav li{
    padding-right: 10px;
    padding-left: 10px;
}

.main-nav a{
    color: #432;
}
.main-nav a:hover{
    color: #9DCD8C;
}




/*---------Body---------*/
li {
  list-style: none;
}
/* ↓ スライドの外枠 */
.slide-wrapper {
  width: 90vw;
  height: 45vw;
  position: relative;
  overflow: hidden; /* はみ出したスライドを隠す */
  border: #BDDAAB 3px solid;
}
/*  ↓ スライド（コンテンツ） */
.slide { /*スライド全体 */
  width: 300%;
  height: 100%;
  display: flex;
  transition: all 0.5s;
}
.slide div { /* スライド */
  width: 33.33%;
  height: 100%;
  font-size: 16px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.slide1 { /* スライドさせるために必要なクラス */
  transform: translateX(0);
}
.slide2 { /* スライドさせるために必要なクラス */
  transform: translateX(-33.33%);
}
.slide3 { /* スライドさせるために必要なクラス */
  transform: translateX(-66.66%);
}
.slide div:nth-of-type(1){ /* 背景色 */
  background-image: url(../images/img1.jpg);
  background-size: cover;
}
.slide div:nth-of-type(2){ /* 背景色 */
  background-image: url(../images/img2.jpg);
  background-size: cover;
}
.slide div:nth-of-type(3){ /* 背景色 */
  background-image: url(../images/img3.jpg);
  background-size: cover;
}
/* ↓ 左右のボタン */
.next {
  position: absolute;
  width: 15px;
  height: 15px;
  right: 10px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #BDDAAB;
  border-right: solid 3px #BDDAAB;
  -webkit-transform: rotate(45deg) translateY(50%);
  transform: rotate(45deg) translateY(50%);
}
.prev {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 25px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #BDDAAB;
  border-right: solid 3px #BDDAAB;
  -webkit-transform: rotate(-135deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
}


.soubudai-page{
  margin-top: 5vh;
  width: 90vw;
  border: rgb(157,150,46) 3px solid;
  border-radius: 10px;
}



.sub-title {
    position: relative;
    font-size: 1.5em;
    padding-bottom: 0.35em;
    border-bottom: 4px solid #F5EEE3;
    color: #333;
  }
  
.sub-title::before,
.sub-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    height: 4px;
  }
  
.sub-title::before {
    left: 0;
    width: 50px;
    background-color: #9DCD8C;
  }
  
.sub-title::after {
    left: 50px;
    width: 2px;
    background-color: #F5EEE3;
  }


.guidance{
    padding: 2px 10px 2px;
    background: rgba(255, 255, 255, .5);
    box-shadow: 0 0 10px 10px rgba(255, 255, 255, .5);
    border-left: 3px #BDDAAB solid;
  }

.time{
    padding: 2px 10px 2px;
    background: rgba(255, 255, 255, .5);
    border-left: 3px #BDDAAB solid;
    box-shadow: 0 0 10px 10px rgba(255, 255, 255, .5);
    display: block;
    position: relative;
}

#price{
  padding: 2px 10px 2px;
  background: rgba(255, 255, 255, .5);
  border-left: 3px #BDDAAB solid;
  box-shadow: 0 0 10px 10px rgba(255, 255, 255, .5);
  display: block;
  position: relative;
}

.menu-container{
  margin-top: 5vh;
}
.cut-menu{
  border-bottom: 3px #BDDAAB solid;
}

.menu-img{
  border-radius: 7px;
  border: 2px #BDDAAB solid;
  width: 80vw;
  margin-left: 2.5vw;
}

.yen{
  margin: -.5vh 0 -1vh 32vw;
}


.main-content{
    background-image: url(../images/bg_main.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 75% 0;
    margin-bottom: 5vh;
}




/*--------営業時間-----------*/
.biz-hour {
    margin-left: 10vw;
    display: block;
    border-collapse: collapse;
    /* overflow-x: scroll;で、
    スマホ画面幅に表が入りきらない場合は
    横スクロールしてくれます */
    overflow-x: scroll;
  }
  
  .biz-hour th {
    /* １番上の線 */
    border-top: 1px solid #432;
  }
  
  .biz-hour th, .biz-hour td {
    padding: 7px 10px;
    text-align: center;
    /* ２番目以降の線 */
    /* 色はお好みで */
    border: 1px solid #432;
  }
  
  .biz-hour th {
    font-weight: normal;
  }
  
  /* 「土」の文字色 */
  .biz-hour th.sat {
    color: #a9bbed;
  }
  
  /* 「日」の文字色 */
  .biz-hour th.sun {
    color: #ffa89e;
  }




/*--------アクセス--------*/
.access{
    background: rgba(255, 255, 255, .5);
    box-shadow: 0 0 10px 10px rgba(255, 255, 255, .5);
}

.soubudai,.harataima{
    margin-bottom: 10px;
    padding: 1rem;
    width: 90%; /* ボックス幅 */
    border-style: solid;
    border-color: #BDDAAB; /* 枠の色 */
    border-width: 5px 1px 1px;
    background-color: #f7f7f7; /* 背景色 */
    color: #432; /* テキスト色 */
   }
   
.title-soubudai,.title-harataima{
    position: absolute;
    top: 8px;
    left: 15px;
    background-color: #f7f7f7; /* タイトル背景色 */
    color: #80b995; /* タイトル色 */
    font-size: 1.25em;
    font-weight: bold;
}


.footer-main{
  background-image: url(../images/bg_main.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 75% 0;
  margin-bottom: 5%;
}





/*--------Footer---------*/
.footer {
  margin-left: -5vw;
  margin-right: -5vw;
  margin-bottom: -1vh;
  padding: 1% 5vw 1%;
  font-size: 1.25rem;
  color: #432;
  background: #BDDAAB;
}

.footer-logo{
  width: 40vw;
}

.footer-nav{
  list-style: none;
  padding-left: 1%;
  margin-top: -1%;
}
.footer-nav li{
  margin-left: 5%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
}
.footer-nav a{
  color: #432;
}
.footer-nav a:hover{
  color: #BADEEE;
}
.copyright{
  font-size: 0.7rem;
  text-align: center;
}




/*--------menu css---------*/

#price{
  margin-bottom: 10vh;
  padding-bottom: 3vh;
}

.menu-container {
  max-width: 1200px;
  padding: 10px;
  background-color: rgba(255, 255, 255, .4);
}


.price-title {
  font-size: 2rem;
  color: #333;
  margin-top: 5vh;
}

.all-menu, .all-menu11, .all-menu1 {
  width: 100%;
  border-collapse: collapse;
  border-top: #9DCD8C 3px solid;
  border-bottom: #9DCD8C 3px solid;
}

.all-menu11{
  margin-top: 2vh;
}

.all-menu th, .all-menu11 th, .all-menu1 th {
  border-bottom: #BDDAAB 3px solid;
  color: #333;
  text-align: left;
  font-size: 1.3rem;
  padding: 5px 15px 5px;
}

.all-menu td, .all-menu11 td, .all-menu1 td {
  border-bottom: #BDDAAB 1px solid;
  padding: 15px;
  vertical-align: top;
  width: 30%;
}

.price-menu {
  font-weight: bold;
}

.add-info, .add-info1 {
  font-size: 0.8em;
  color: #777;
  margin-top: 5px;
}

.add-info1{
  font-size: 1rem;
  color: #333;

}

.dot-border {
  border-top: 2px dotted #BDDAAB;
}


/*--------footer css---------*/
.other{
  background-color: rgba(255, 255, 255, .4);
}