@charset "UTF-8";

html
{
  font-size: 62.5%;
}

body
{  
  text-align: center;
  font-size: 1.4rem;
  font-family: Raleway, cursive, "Hiragino Kaku Gothic ProN",  "メイリオ",  sans-serif, 'Roboto';
  color: black;
  background-image: url(../images/heike16.png);
  background-repeat: repeat;
}

/* ヘッダー */
.header
{
  background-color: #fff;
}

.belt
{
  background-color: rgba( 204, 29, 37);
  width: 100%;
  height: 130px;
}

.belt img
{
  text-align: left;
  display: inline-block;
}

/* フェードイン・フェードアウト */
.slide 
{
  width: 800px;
  height: 524px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.slide-item
{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  display: inline-block;
  width: 800px;
  height: auto;
}

.slide-item img
{
  width: 100%;

}
/* .slide
{
  background-size: cover;
  width: 850px;
  
  
} */

.global-nav
{
  text-align: right;
  display: inline-block;
  vertical-align: top;
}

.nav-item
{
  display: inline-block;
  margin: 0 10px;
  margin-top: 50px;
}

.nav-item a
{
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0 10px;
  color: white;
  transition: color 0.15s;
  text-decoration: none;
}

.nav-item a:hover
{
  color: black;
}


/* 詳細なメニューへのリンク */
.menu-link
{
  padding-top: 60px;
}
.menu-link a
{
  font-size: 1.9rem;
  
  font-weight: bold;
  padding: 0 10px;
  color: black;
  transition: color 0.15s;
}

.menu-link a:hover
{
  color: #ddd;
}


/* 店長挨拶 */
.profile
{
  padding: 0px 40px;
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  
}

.heading
{
  margin: 60px 0 100px;
  width: 350px;
}
.jibie-heading
{
  margin: 60px 0 0;
  width: 350px;
}

.prof-wrapper
{
  display: flex;
  width: 100%;
  table-layout: fixed;
  margin: 0 auto;
}


.prof-img
{
  margin: 0 auto 120px;
  /* display: inline-block; */
  /* width: 30%; */
}

.hurman
{
  display: inline-block;
  /* float: left; */
  width: 300px;
}

.prof-description
{
  /* display: inline-block; */
  width: 100%;
  text-align: left;
  font-weight: bold;
  line-height: 1.8;
  width: 100%;
  font-weight: bold;
  line-height: 1.8;
  margin: 0 5px 3px;
  font-weight: bold;
}

/* メニューリンク */
.menu
{
  padding: 120px 40px;
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
}

.menu-one, .menu-two
{
  width: 100%;
  display: flex;
}

.menu-box
{
  display: inline-block;
  width: 500px;
  height: auto;
  margin: 5px auto;
  position: relative;
  overflow: hidden;
}

.menu-image
{
  display: inline-block;
  width: 100%;
  height: 100%;
}

.menu-text
{
  display: inline-block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.caption
{
  margin-top: 130px;
  font-size: 5.0rem;
  color: #fff;
  text-align: center;
}

.menu-box:hover .menu-text
{
  opacity: 1;
}

/* グーグルマップ */
.google
{
  padding: 60px 40px 120px;
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
}



/* フッター */
.footer
{
  background-color: rgba( 204, 29, 37);
  padding: 120px 40px 0;
  border: 7px solid black;
}

.info
{
  display: inline-block;
  padding: 0 40px;
}

.info-text
{
  text-align: left;
  font-size: 1.5rem;
  font-weight: bold;

}

.info-text a
{
  /* color: black; */
  transition: color 0.15s;
  text-decoration: none;
}

.info-text a:hover
{
  color: #ddd;
}

.info-text ul
{
  list-style: none;/* 黒点消す */
}
.info-text li
{
  color: white;
}
/* フッターナビゲーション */
.horizontal
{
  padding: 60px 0 60px;
}

.horizontal-list
{
  margin: 0 auto;
}

.horizontal-item
{
  display: inline-block;
  padding: 0 15px;
  letter-spacing: 1px;
  
}

.horizontal-list .horizontal-item + .horizontal-item
{
  border-left: 1px solid black;
}

.horizontal-list .horizontal-item a
{
  color: white;
  font-size: 1.1rem;
  transition: color 0.15s;
  text-decoration: none;
}

.horizontal-list .horizontal-item a:hover
{
  color: black;
}

/* SNSリスト */
.sns-list
{
  list-style: none;
  padding-top: 50px;
}

.sns-item
{
  display: inline-block;
}

.sns-list li a
{
  text-decoration: none;
  color: white;
  transition: color 0.15s;
  font-size: 1.5rem;
  padding: 0 10px;
  font-weight: bold;
}

.sns-list a:hover
{
  color: black;
}

.satoryo
{
  bottom: 5px;
  text-decoration: none;
  color: rgb(156, 156, 156);
}


/* -----------------------------------『ここから焼肉ページ』↓↓------------------------ */
.yakiniku
{
  padding: 0px 40px 120px;
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
}

.link
{
  display: inline-block;
  list-style: none;
  opacity: 1;
  background-color: rgba(255, 255, 255);
  transition: all 0.2s ease;
}

.link:hover
{
  opacity: 0.5;
}

/* ジビエ */
.jibie
{
  padding: 120px 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
}



.kounou
{
  font-size: 4rem;
  font-weight: bold;
  color: rgb(51, 51, 51);
}

.jibie-pair
{
  width: 100%;
  display: table;
  margin-top: 20px; 
}


.jibie-box
{
  display: inline-block;
  width: 50%;
  height: auto;
  float: left;
}

.jibie-box img
{
  max-width: 100%;
}

.jibie-text
{
  display: inline-block;
  width: 50%;
  height: auto;
  position: relative;
  
}

.jibie-text p
{
  font-size: 1.8rem;
  text-align: left;
  position: absolute;
  top: 20px;
  padding-left: 20px;
}

.jibie-pair:nth-child(2) .jibie-box
{
  float: right;
}

.jibie-pair:nth-child(2) .jibie-text p
{
  padding-right: 20px; 
}

/* ホルモン */
.horumon-box
{
  padding: 120px 40px;
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
}
.horumon-wrapper
{
  display: flex;
  width: 100%;
  /* margin: 100px auto 0; */
  table-layout: fixed;
  margin: 0 auto;
}

.horumon-box
{
  display: inline-block;
  width: 33.3%;
  padding: 1%;
}

/* あかにく */
.akaniku
{
  padding: 120px 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
}

.akaniku-pair
{
  width: 100%;
  display: table;
  margin-top: 20px; 
}


.akaniku-box
{
  display: inline-block;
  width: 50%;
  padding: 0 5px;
}

/* にくさし */
.nikusasi
{
  padding: 120px 40px;
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
}

.nikusasi-main
{
  width: 100%;
}

.nikusasi-list
{
  margin-top: 80px;
}

.nikusasi-item
{
  width: 70%;
  margin: 50px 0;
  border: 1px solid black;
}

.nikusasi-right
{
  margin-right: 40%;
}

.nikusasi-left
{
  margin-left: 30%;
}


/* -----------------------------------『ここからごはんものページ』↓↓------------------------ */
.gohanmono
{
  padding: 0 40px 120px;
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
  /* background-image: url(../images/webサイト背景.png);
  background-repeat: repeat; */
}

.gohan
{
  width: 90%;
  margin: 0 auto;
}

.ramen
{
  width: 100%;
  margin: 120px 0 60px;
}

.board
{
  width: 80%;
}

.zero-super
{
  width:100%;
  margin: 120px 0 60px;
}

.zero-tyu
{
  width: 80%;
}

.ippin
{
  padding: 120px 40px;
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
}

.ippin-list
{
  width: 100%;
  margin: 120px auto 0;
}

.ippin-item
{
  width: 70%;
  margin: 50px 0;
  border: 1px solid black;
}

/* .ippin-left
{
  margin-left: 30%;
}

.ippin-right
{
  margin-right: 40%;
} */


/* お飲み物 */
.drink
{
  margin: 0 auto;
}

.drink-wrapper
{
  width: 90%;
  margin: 120px auto;
}

.drink-photo
{
  display: flex;
  width: 100%;
  table-layout: fixed;
  margin: 0 auto;
}

.drink-photo-item
{
  display: inline-block;
  width: 20%;
  margin: 0 2px;
}

.sake
{
  font-size: 2.8rem;
  padding-top: 60px;
  font-weight: bold;
}

.drink-photo-item/* 囲む線 */
{
  border: 2px solid rgba( 204, 29, 37);
}



/* -----------------------------------『ここからメインメニューページ』↓↓------------------------ */

.main-menu
{
  padding: 0px 40px 120px;
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
}
.odoble
{
    border: 1px solid black;
    display: inline-block;
    font-size: 2rem;
    color: black;
    padding: 10px 35px;
    margin: 30px;
    background-color: yellow;
    font-weight: bold;
}
.big-menu
{
 width: 100%;
}
.mobile-menu
{
  display: none;
}
.drink-mobile-plan
{
  display: none;
}

.drink-plan
{
  margin: 60px;
  border: 1px solid black;
  width: 80%;
}

/* ハンバーガーメニュー */
.hamberger
{
  display: none;
}
.menu-trigger,
.menu-trigger span 
{
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  top: -1000px;/* レスポンシブ対応でtopを画面外から消す */
  width: 50px;
  height: 44px;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
  top: -80px;
  left: 40%;
  z-index: 100;
}

.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #333;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 20px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

/* ハンバーガー */
.delete
{
  transform: translate3d(270px, 0, 0);
}

#wrapper, #nav
{
  transition: transform 0.1s;
}
/* ドロワーが開かれた時のスタイル */
.show
{
  transform: translate3d(-270px, 0, 0);
}

#wrapper, #nav
{
  transition: transform 0.2s;
}



#nav {
  padding: 24px 24px 0 24px;
  background: rgba( 204, 29, 37, 0.8);
  color: #333;
}

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav li a {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid #000;
  text-decoration: none;
  color: white;
  font-weight: bold;
}

#nav li a:hover {
  background: #fff;
}

#nav .logo {
  margin-bottom: 20px;
}

#nav/* nav大きさ/位置 */
{
  position: fixed;
  right: -270px;
  top: 0;
  width: 270px;
  height: 100%;
}

.corona
{
  margin: 20px 0;
  width: 70%;
}

/* メディアクエリ */
@media(max-width: 1137px)
{
  
  .slide 
  {
    width: 600px;
  }

  .slide-item
  {
    width: 600px;
  }
  .slide
  {
    height: 397px;
  }
  /* プロフィール */
  .prof-wrapper 
  {
    margin: 0 auto;
    display: block;
  }
  .prof-img
  {
    margin: 0 auto;
    width: 300px;
  }
  .prof-text
  {
    text-align: center;
  }
  .prof-description
  {
    text-align: center;
  }
  .hurman
  {
    width: 250px;
  }


  .menu
  {
    padding: 0px 40px 120px;
  }
  .caption
  {
    margin-top: 100px;
  }
  /* ヘッダー削除 */
  .global-nav 
  {
    display: none;
  }
  .jibie
  {
    padding: 0 40px;
  }

  .jibie-wrapper
  {
    text-align: center;
  }

  .jibie-box
  {
    display: inline-block;
    width: 80%;
    margin: 0 auto;
  }
  
  .jibie-text
  {
    display: inline-block;
    height: auto;
    width: 100%;
    padding: 20px;
  }
  .jibie-text p
  {
    font-size: 1.8rem;
    padding-left: 20px;
    position: static;
  }
   /* ハンバーガーメニュー */
   .hamberger
  {
    display: block;
    height: 0;
  }
  .menu-trigger
  {
    top: -80px;
    left: 40%;
    z-index: 100;
  }
  
}
@media(max-width: 768px)
{
  .slide 
  {
    width: 500px;
  }

  .slide-item
  {
    width: 500px;
  }
  .slide
  {
    height: 370px;
  }
    
  /* .yakiniku */
  /* yakiniku .link削除 */
  .yakiniku
  {
    width: 90%;
  }

  .link img
  {
    display: none;
  }
  

  .horumon-wrapper
  {
    display: block;
  }
  .horumon-box
  {
    width: 70%;
    padding: 1%;
    margin-bottom: 40px;
  }

  .akaniku-box
  {
    width: 80%;
    margin-bottom: 40px; 
  }

  .akaniku
  {
    padding: 0 40px;
  }
  
  .nikusasi
  {
    width: 100%;
    padding: 0 40px;
  }
  .nikusasi-right, .nikusasi-left
  {
    margin: 0 auto;
  }
  .nikusasi-item
  {
    width: 70%;
    margin-bottom: 40px;
  }
  
   /* .gohanmono */
  .gohanmono
  {
    width: 90%;
  }

  .ippin
  {
    width: 100%;
    
  }
  .ippin-left, .ippin-right
  {
    margin: 0 auto;
    margin-bottom: 40px;
  }
  
  .menu-nav/* メニューの詳細（リンク） */
  {
    margin: 100px 0;
  }

  .menu-link
  {
    padding: 0;
  }
  .caption
  {
    margin-top: 60px;
    font-size: 4rem;
  }
  /* プロフィールflex解除 */
  .prof-wrapper
  {
    display: block;
  }

  /* .google */
  iframe
  {
    width: 100%;
    height: 400px;
  }
  /* おしながき */
  .odoble
  {
    font-size: 1.5rem;
  }
  .big-menu
  {
    display: none;
  }
  .mobile-menu
  {
    display: inline-block;
    width: 90%;
  }
  .drink-mobile-plan
  {
    display: inline-block;
    width: 60%;
  }

  .drink-plan
  {
    display: none;
  }
  .fotter
  {
    padding: 60px 40px 60px;
  }
}

@media(max-width: 650px)
{
  .slide 
  {
    width: 400px;
  }

  .slide-item
  {
    width: 400px;
  }
  .slide
  {
    height: 262px;
  }
}
    

@media(max-width: 550px)
{
  .slide 
  {
    width: 300px;
  }
  .slide-item
  {
    width: 300px;
  }
  .slide
  {
    height: 196.5px;
  }
  .main-menu, .yakiniku
  {
    padding: 0;
    background-color: #fff;
    width: 90%;
    margin: 0 auto;
  }

  .heading 
  {
    margin: 60px 0 60px;
    width: 150px;
  }
  .jibie-heading
  {
    margin: 60px 0 0;
  }
  .kounou
  {

    font-size: 2rem;
  }
  .plan
  {
    margin: 10px 0;
  }

  .sns-list
  {
    padding-top: 40px;
  }
  .sns-item
  {
    display: block;
    margin: 5px;
  }
  .info
  {
    padding: 10px 0px;
  }
  .info-text
  {
    font-size: 1rem;
  }
  /* .horizontal
  {
    display: none;
  } */

  .profile
  {
    padding: 10px 0;
    background-color: #fff;
    width: 90%;
    margin: 0 auto;
  }
  .hurman
  {
    display: inline-block;
    width: 200px;
  }
  .prof-text
  {
    padding: 5px;
  }
  .prof-description
  {
    font-size: 1rem;
    text-align: left;
  }
  .prof-img
  {
    margin: 0 auto;
    width: 200px;
  }
  .menu 
  {
    padding: 0px 5px 120px;
  }
  .menu-one, .menu-two
  {
    width: 100%;
    display: block;
  }
  .menu-box
  {
    display: inline-block;
    width: 70%;
    height: auto;
    margin: 5px auto;
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(236, 235, 235);
  }
  .menu-nav
  {
    margin: 0 0 100px;
  }
  .caption
  {
    margin-top: 50px;
    font-size: 3rem;
  }
  .google
  {
    padding: 0px 5px 50px;
  }

  .yakiniku-link
  {
    padding: 0;
    width: 260px;
  }
  .jibie
  {
    padding: 0px;
  }
  .jibie-text p
  {
    font-size: 1.1rem;
  }

  .akaniku, .nikusasi,.ippin
  {
    padding: 0px;
  }

  .gohan-subtitle
  {
    width: 260px;
    margin: 0 0 60px;
  }
  .ramen
  {
    margin: 0 0 60px;
  }
  .ippin-subtitle
  {
    width: 260px;
    margin: 120px 0 60px;
  }
  .gohanmono
  {
    padding: 0px 0px 60px;
  }
  .gohan
  {
    width: 100%;
  }

  .ippin-list
  {
    width: 100%;
    margin: 0 0 60px;
  }
  .ippin-item
  {
    width: 90%;
  }
  .drink-sub-title
  {
    width: 260px;
  }
  .sake
  {
    font-size: 2rem;
    padding-top: 30px;
    font-weight: bold;
  }
  .drink-wrapper
  {
    width: 100%;
    margin: 120px auto;
    text-align: center;
  }
  .drink-photo
  {
    margin: 0;
  }
  .drink-photo-item
  {
    margin: 0px;
    height: 20%;
  }
  iframe
  {
    height: 200px;
  }
  
  .corona
  {
    margin: 10px 0;
    width: 90%;
  }
}

@media(max-width: 340px)
{
  .slide 
  {
    width: 250px;
  }

  .slide-item
  {
    width: 250px;
  }
  .slide
  {
    height: 163.75px;
  }

}