@charset "UTF-8";

/* ====== 共通 ====== */

a:hover {
  text-decoration: none;
  opacity: 0.8;
}

header .navbar-brand {
  width: 20%;
}

header .navbar-brand .logo {
  width: 100%;
}

header .tel {
  font-size: 2rem;
  color: #fff;
}

header .tel a {
  color: #fff;
}

/* ====== TOTOP ====== */
/* ページトップ */
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 80%;
}

#page-top a {
  background: #c1574A;
  text-decoration: none;
  color: #fff;
  width: 100px;
  padding: 30px 25px 8px 25px;
  text-align: center;
  display: block;
  border-radius: 10px;
  border: 0.2px solid #fff;
  position: relative;
  font-weight: bold;
}

#page-top a::before{
  content:"／";
  color:#fff;
  font-weight: bold;
  position: absolute;
  top: 8px;
  left: 38px;
}

#page-top a::after{
  content:"＼";
  color:#fff;
  font-weight: bold;
  position: absolute;
  top: 8px;
  right: 38px;
}

#page-top a:hover {
  text-decoration: none;
  background: #c46d62;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
  color: #6c757d !important;
}

/* ====== TOP IMAGE ====== */

header.top-page {
  height: 100vh;
  overflow: hidden;
  padding-right: 0;
  padding-left: 0;
}

.jumbotron {
  background-image: url(../img/mainBackGroundImage.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.jumbotron .bg-rgba {
  background-color: rgba(255, 255, 255, 0.8);
}

.jumbotron h1 {
  word-wrap: break-word;
}

.jumbotron h2 {
  line-height: 1.8rem;
  text-shadow: 0px 1px 20px #865e04,0px -1px 20px #865e04,1px -1px 20px #865e04,1px 1px 20px #865e04;

  color: white;
  font-weight: bolder;
}

/* ====== TOPPAGE SECTION ====== */

#sec1 .card:nth-of-type(2) {
  border-left: none;
  border-right: none;
}

.ttl-bdr {
  font-size: 3rem;
  line-height: 1.5;
  position: relative;
  margin-bottom: 50px;
}

/* .ttl-bdr::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 5px solid #000;
  width: 12%;
  margin: 0 auto -15px;
} */

#sec3 {
  /* background-image: url("../img/bg-staff.jpg"); */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#sec4 table {
  width: 100%;
  background-color: #CCC;
  font: 12px;
  color: #666;
  table-layout: fixed;
  border-collapse: collapse;
}

#sec4 table th,
#sec4 table td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

#sec4 table th {
  background-color: #002795;
  color: #fff;
}

#sec4 table td {
  /* width: 14.2%; */
  font-size: 0.9rem;
}

#sec4 table td:nth-child(7n) {
  background-color: #5197E0;
  /* color: #fff; */
}

#sec4 table td:nth-child(7n+1) {
  /* background-color: #FF8A8C; */
  color: #fff;
}

/* ====== SNS ====== */
.social img {
  width: 36px;
  height: 36px;
}

/* ====== SNS ====== */

iframe {
  width: 100%;
  height: 450px;
}

/* ====== FOOTER ====== */
.footer-logo {
  width: 50%;
}

/* =============================================
メディアクエリ
============================================= */

/* 大デバイス（デスクトップ, 1200px 未満）
==============================================*/
@media screen and (max-width: 1199.98px) {
  .herounit h1 {
    margin-top: 10rem;
  }
}

/* END */
/* 中デバイス（タブレット, 992px 未満）
==============================================*/
@media screen and (max-width: 991.98px) {
  .container {
    max-width: 740px;
  }
}

/* END */
/* 小デバイス（横向きモバイル, 768px 未満）
==============================================*/
@media screen and (max-width: 767.98px) {
  h1 {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
  }

  /* #sec3 {
    /* background-image: none;
  } */

  header .navbar-brand {
    width: 20%;
  }

  header .navbar-brand .logo {
    width: 100%;
    height: 100%;
  }

  header .navbar-nav {
    border-top: 1px solid #fff;
  }

  .footer-logo {
    width: 100%;
  }

}

/* END */
/* 極小デバイス（縦向きモバイル, 576px 未満）
==============================================*/
@media screen and (max-width: 575.98px) {
  .display-3 {
    line-height: 0.8em;
  }

  .display-4 {
    font-size: 2rem;
    line-height: 1.2;
  }
}

/* END */

/* ここからオリジナル装飾 */
.index-main{
  background-image: url("../img/japanese-paper_00034.jpeg");
}

.washi{
  background-image: url("../img/washi-pattern-01.jpeg");  
}
.navbar{
  background-color: black;
}

.navbar a{
  color: #fff;
}

.card-header{
  background-color: #C1574A;
}
.card-header a{
  color: #fff;
}

.text-body{
  color: #fff;
}
.menu-topic{
  font-family: "ヒラギノ明朝 ProN";
  font-weight: bold;
}

.menu-topic2{
  text-align: end;
}

.menu-btnArea{
  text-align: center;
}


.menu-btnArea a{
  background-color: #C1574A;
  color: white;
}

.phone_number{
  font-size: 24px;
}

.phone_number::before{
  content:"";
  background-image:url(../img/icon_tel.png);
  background-color: #C1574A;
  display: inline-block;
  background-repeat: no-repeat;
  width: 21px;
  height: 28px;
  position: relative;
  margin-left: 15px;
  margin-right: 15px;
  top: 3px;
}

.takeoutimg{
  width: 50%;
  height: 50%;
}

.takeOut{
  font-size:24px
}

.takeOutPhone{
  width: 21px;
  height: 23px;
}

.takeOutNum{
  background-color: #c1574A;
  color:#fff;
  font-size: 18px;
  margin: 8px 5px;
  padding: 8px;
}

.takeOutContent{
  border: 1px solid #c1574A;
  border-radius: 3px;
  background-color: #fff;
  position: relative;
  margin-bottom: 30px;
}

.takeOutTxt{
  margin: auto 5px;
  font-size: 1rem;
}

.txt{
  font-size: 18px;
}

.orderTtl{
  font-size: 24px;
  font-weight: bold;
  color:#c1574A;
  position: relative;
}

.orderTtl::after{
  content:"";
  border-bottom: 3px solid #c1574A;
  width: 40px;
  display: block;
  margin: 5px auto;
}

.takeOutOrder::after{
  content:"▼";
  font-size: 1.2rem;
  width:100%;
  height: 30px;
  position: absolute;
  top:60px;
  display: block;
  text-align: center;
}

.txtPhone{
  font-size: 15px;
}

.yakitori-img{
  height: 100%;
  width: 4rem;
}

.card-interior-img{
  width: 100%;
  height: 100%;
}

.card-interior-info{
  width: 100%;
  height: 30%;
}

.card-interior-info_1{
  width: 80%;
}

.card-interior-info_2{
  width: 100%;
  height: 80%;
}

.interior-info{
  text-align: center;
  height: 25%;
}

.reserve-btn{
  background-color: #C1574A;
  color: white;
}

.reserve-btn a{
  text-decoration: none;
  color:#fff;
}

.menu-nav{
  margin: 0 auto;
  margin-bottom: 30px;
  text-align: right;
}

.food-card{
  width: 100%;
  height: 60%;
}

.select{
  border: 1px solid;
  padding:0 4px;
}

.header-img{
  width: 20%;
}

.header-img2{
  height: 50px;
  width: 80px;
}

.main-key-logo{
  height: 100%;
  width: 300px;
  margin-bottom: 30px;
}

main{
  /* background-color: #C1574A; */
  background-image: url("../img/washi-pattern-01.jpeg");
}

.sns-info{
  font-size: 18px;
  text-align: center;
}

#sec5{
  font-size: 0.8rem;
}

#top-yakitori-row{
  height: 90%;
}

.menu-card{
  height: 195px;
  width:  285px;
}

.menu-card-img{
  height:100%;
  object-fit: cover;
  object-position: bottom;
}

/* お店情報部分 iPhoneのSafariでは無効 */
.storeInfoTable-info{
  color:white;
  background-color: #ecafa7;
  width: 100%;
  padding: 0.2rem 0.2rem;
}

.storeInfoTable-content{
  background-color: #fff;
  width: 100%;
  /* padding: 0.8rem 0.2rem; */
}

/* SNSやってますの下線部分 */
.sns-info span{
  background: #f3b530;
  height: 5px;
  width:140px;
  text-align: center;
  /* position: absolute;
  top: 30px;
  left:200px; */
  border-radius:3px;
}

.nav-item a{
  font-size: 1.1rem;
}

.head-lead{
  font-size: 0.97rem;
}

.footer-list ul li::before{
  content:"-";
  margin-right: 5px;
}

.footer-list p::before{
  content:"■";
  margin-right: 5px;
}

.footer-list a{
  text-decoration: none;
  color: #666;
}
/* メニューページ */

body{
  background-image: url("../img/japanese-paper_00034.jpeg");
}

#collapseOne a{
  color: #6c757d;
}

.menu-letter{
  height: 30%;
  width: 100%;
}

.menuImg{
  height: 100%;
}
.letter-yakitori{
  object-fit: contain;
  position: relative;
}

.letter-yakitori::after{
  content:"";
  background: url("../img/letter&logo/yakitori_alphabet.PNG");
  height: 5rem;
  width:100%;
  display: block;
  position: absolute;
  top:0;
  left:20px;
}

.price{
  color: #C1574A;
  display: flex;
  align-items: baseline;

}

.price-color{
  color: #C1574A;
}

.tax-in{
  color: #C1574A;
  font-size: 0.8rem;
}

.tax-out{
  color: #C1574A;
}

.selection{
  font-size: 0.8rem;
}
.side-info{
  position: relative;
}

.tori-card{
  height: 9rem;
}

.anno1{
  font-size: 12px;
}

.creative-food{
  position: relative;
}

.accent{
  width: 5rem;
  position: relative;
}

.accent-img{
  width: 100%;
  vertical-align: top;
  position: absolute;
  top:-20px;
}
.accent-img-a{
  width: 100%;
  vertical-align: top;
  position: absolute;
  top:-20px;
  left: -90px;
}

.accent-img-wpic{
  width: 100%;
  vertical-align: top;
}

/* 野菜サラダの「定番部分のみ」 */

.accent-a{
  width: 2rem;
  position: relative;
}

.accent-img-b{ 
  width: 4rem;
  vertical-align: top;
  position: absolute;
  top:-10px;
  left: -60px;
}

/* トッピングの注釈 */
.side-anno{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 0px;
  right: 30px;
  display: flex;
  align-items: center;
}

.anno-txt{
  font-size: 14px;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
}

/* ここからドリンクページ */
/* .drink-catefory{
  /* border-bottom: 1px solid #C1574A; */
  /* margin-bottom: 15px; 
*/

.drink-catefory::before{
  content: "●";
  color: #C1574A;
  font-size: 24px;
  vertical-align: unset;
}
.drink-section{
  padding: 20px;
}

/* ボトルキープ部分 */
.drink-catefory-a{
  color: #C1574A;
}
.drink-catefory-a::before{
  content: "●";
  color: #C1574A;
  font-size: 1rem;
  vertical-align: unset;
}

.illust{
  height:3rem;
}

.drink-illust{
  height: 100%;
}

.line{
  border-bottom: solid 1px #C1574A;

}

/* ここからこだわりページ */
.commit-txt{
  font-size: 18px;
}

.lead-txt{
  border-bottom: 1px solid #C1574A;
}

.nav-tabs{
  background-color: #C1574A;
  padding: 5px;
}
.nav-tabs li{
  width: 24%;
  background-color: #C1574A;
}

.nav-tabs li a{
  text-align: center;
  font-size: 0.9rem;
}

.ttl-bdr{
  font-family: "ヒラギノ明朝 ProN";
}

.second-topic{
  color:#C1574A
}

.commitLead{
  font-size: 1.2rem;
  border: 2px solid #C1574A;
  border-radius: 5px;
  padding: 10px;
  font-weight: 500;
}

/* ハンバーガーメニューの装飾 */
/* ボタン外フチ、ボーダーの色はclassで指定 */
.navbar-toggler{
  height: 40px;
  width: 40px;
  position: relative;
}

/* 棒線を作成 */
.navbar-toggler-icon{
  background: #fff;
  height: 2px;
  display: inline-block;
  position: absolute;
  left:4px;
}
/* 順番に位置をずらす */
.navbar-toggler-icon:nth-of-type(1){
  top:5px;
}
.navbar-toggler-icon:nth-of-type(2){
  top:11px;
}
.navbar-toggler-icon:nth-of-type(3){
  top:17px;
}

.navbar-toggler-icon:nth-of-type(3)::after{
  content:"MENU";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:7px;
  left:0.3px;
  color: #fff;
  font-size: 0.6rem;
}
/* ハンバーガーメニューの装飾。ここまで */

.row::before, .row::after {
  display: none;
}