@charset "UTF-8";

/*フッターの設定必要*/
.wrapper{
  background-color:#fcf8ee;
  min-height: 100vh;
  position: relative;/*←相対位置*/
  padding-bottom: 30px;/*footer高さ*/
  box-sizing: border-box;/*min-height:100vh*/
}

/*フォント*/
body {
  font-family:"Source Sans Pro", Helvetica, Arial, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif;
  }

/*ヘッダー*/
header{
  width: 100%;
  padding: 15px 8% 15px;
  background-color: rgb(248, 242, 241);
  position: fixed;
  top: 0;
  display:flex;
  align-items: center;
  z-index: 1;
}
h1{
    margin:0; 
}

/*メニューー*/
ul{
  list-style: none;
  display: flex;
  margin: 0;
}

li{
  margin: 0 0 0 30px;
  font-size: 20px;
}

.top{
  display: none;
}

nav {
    margin: 0 0 0 auto;
}

/*ヘッダー画像*/

.main-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  max-width: 100%;
  background: url('../img/header.png') top center / cover no-repeat;
  
}
.main-visual img {
  margin-top: 240px;
  width:100%;
  max-width: 100%;
  height: auto; 
  
}

.main-visual p {
  font-size: 20px;
  color: #fff;
  text-align: center;
}

/*メイン部*/

.main{
  max-width: 80vw;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}
.main h1{
  text-align: center;
  color: #FF9900;
  padding: 0;
  font-size: 40px;
  margin-top: 30px;
}
 
/*料理詳細*/
.contents {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
    
  }

.content{
  margin: 0px 50px;
 }
.content img {
  width: 410px;
  height: auto; 
  max-width: 100%;
  height: auto;  
  border-radius: 20px;
  border: rgb(255, 255, 255) solid;
  border-width :5px;
    
}

.content .Img{
  height: 390px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content p{
  font-size: 30px;
}

.content_col{
  margin: 0px 50px;
  content:"";
  display: block;
  width: 410px;
}

.plate{
  margin: 0 auto;
  text-align: center;
}

.plate p{
  text-align: left;
  display: inline-block;
}

 /*googlemap*/
.googlemap{
   text-align: center;
   height: 0;
   overflow: hidden;
   padding-bottom: 56.25%;
   position: relative;
   margin: 20px;
}

.googlemap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 20px;
}

/*アクセス*/
table {
  width: 80%;
  font-size: 30px;
  margin: 0 auto;
}
table th {
  padding: 15px;
  font-weight: bold;
  text-align: center;
}
table td {
  padding: 15px;
  text-align: left;
  width: 50%;
}



  /*フッター*/
footer{
  width: 100%;
  background-color: #fa940e;
  color: #fff;
  font-size: 15px;
  padding: 10px 0;
  position: absolute;/*←絶対位置*/
  bottom: 0; /*下に固定*/
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/*トップへ*/
#top_page{
  text-align: right;
  margin-bottom: 10px;
}

#top_page img{
  width: 25px;
  height: 20px;
}



/*スマホ対応*/
@media screen and (max-width: 1023px ) {
  /* bager menu */
  header #navi {
    transition: all 0.6s;
    overflow-y: auto;
    padding-top: 40px;
    width: 130px;
    height: 100vh;
    z-index: 200;
    top: 0;
    right: -320px;
    background-color: #fff;
    position: fixed;
    flex-direction: column;
    align-items: baseline;
  }
  header #navi li:not(.top) {
    padding: 10px;
    font-size: 18px;
    border-bottom: 1px solid #000000;
  }

  header #navi li.top{
    padding:10px 28px 10px 10px ;
    font-size: 18px;
    border-bottom: 1px solid #000000;
  
  }
  header .nav_btn {
    width: 44px;
    height: 44px;
    z-index: 300;
    top: auto;
    right: 7px;
    cursor: pointer;
    position: absolute;
  }
  .hamburger_line {
    transition: all 0.6s;
    width: 34px;
    height: 2px;
    left: 5px;
    background-color: #000;
    position: absolute;
  }
  .hamburger_line1 {
    top: 10px;
  }
  .hamburger_line2 {
    top: 21px;
  }
  .hamburger_line3 {
    top: 32px;
  }
  .nav_bg {
    opacity: 0;
    transition: all 0.6s;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    top: 0;
    left: 0;
    visibility: hidden;
    background-color: #000;
    cursor: pointer;
    position: fixed;
  }
  /* 表示された時用のCSS */
  .nav_open header #navi {
    right: 0;
  }
  .nav_open .nav_bg {
    opacity: 0.8;
    visibility: visible;
  }
  .nav_open .hamburger_line1 {
    transform: rotate(45deg);
    top: 20px;
  }
  .nav_open .hamburger_line2 {
    width: 0;
    left: 50%;
  }
  .nav_open .hamburger_line3 {
    transform: rotate(-45deg);
    top: 20px;
  }

  

  /*アクセス*/
  table th, table td {
    display: block;
    width: 100%;
    text-align: center;
  }
  table tr:last-child td:last-child {
    border-bottom: 1px solid #ccc;
  }
  table{
    font-size: 14px;
  }

  #top_page img{
    width: 20px;
    height: 18px;
  }

  .main-visual {
    height: 50vh;
  }

  .content .Img{
    height: 100%;
  }
  .content img{
    width:100%;
  }
  .content .Img{
    height: initial;
  }

  .main-visual img {
    width:50%;
    max-width: 50%;
    height: auto; 
    text-align: center;
    margin-top: 100px;
  }

  .main-visual div{
    text-align: center;
  }

  header h1 a p{
    display: none;
  }

  .top{
    display:initial
  }
}

/*大きいモニター*/

@media only screen 
and (min-width : 1921px) {

  .main-visual img {
    margin-top: 410px;
    width:100%;
    max-width: 100%;
    height: auto; 
    
  }
  .main-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 80vw;
    margin: 0 auto;
  }
  
  header{
    font-size: 30px;
  }

}

#new{
  margin-top: 10px;
  text-align: center;
}

#new h2{
  font-size: 24px;
}