@charset "UTF-8";

/*==================================================
① トップバナー
===================================*/
.wrapper-topbanner {
    background: url(../img/common/blackbord00.jpg) no-repeat;
  background-size: cover;
  padding-top: 150px;
}
.top-banner {
 width: 100%;
 object-fit: cover;
}
.top-banner-sp {
  display: none;
  width: 100%;
  object-fit: cover;
}
/*==================================================
②スライド
===================================*/
.wrapper-slide {
  width: 100%;
  max-width: 1500px;
}
.slider img {
  width:100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.slider .slick-slide {
  margin: 0 10px;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
  margin:0 10px;/*スライド左右の余白調整*/
}

/* スライド　終了 */



/*==================================================
③イントロ
===================================*/
.wrapper-intro {
 padding: 0 0 50px;
}
.content-box-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}
.text-highlight {
  padding: 6px 16px 6px;
  background-color: orange;
  color: black;
  position: relative;
}
.text-highlight::before {
  content: "";
  width: 120%;
  border: 1px solid orange;
  position: absolute;
  left: -10%;
  right: -10%;
  top: -6px;
}
.text-highlight::after {
  content: "";
  width: 120%;
  border: 1px solid orange;
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6px;
}
.content-box-intro .title-eg {
  font-size: 5rem;
  padding: 24px 0 0;
}


/*==================================================
※記事全体の囲み　④記事
===================================*/
.wrapper-article {
  max-width: 900px;
  background: url(../img/bbq/slide20.jpg) no-repeat fixed left bottom;
   background-size: cover;
   background-position: 40% top;
  color: black;
 }

/* スマホ用画像 */
 .sp-img {
  display: none;
}

 /* ④ 記事 */
 .content-box-article {
 max-width: 1000px;
 padding: 50px 0 24px;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 24px;
 background-color: rgb(255, 255, 255, .7);
 z-index: 100;
 }
 
 .content-box-article .text-box {
   width: 80%;
 }

 .content-box-article .text-box .title-eg {
   font-size: 4rem;
   font-weight: bold;
   color:rgba(142, 142, 142, 0.8);
 }

 .content-box-article .text-box img {
   width: 80%;
   max-width: 300px;
   border-radius: 50%;
   aspect-ratio: 1;
   object-fit: cover;
 }

 .dashed-line {
   border: 2px dashed rgba(142, 142, 142, 0.8);
   width: 80%;
 }
 


/*==================================================
⑤ BBQプラン
===================================*/
.content-box-plan {
  max-width: 1500px;
  width: 100%;
  padding: 50px 0 50px;
  /* color: white; */
}

.content-box-plan .dashed-line {
  border: 2px dashed var(--black);
  width: 80%;
  margin: 50px auto 50px;
}
.content-box-plan .title-top::after,
.content-box-plan .title-top::before {
  display: none;
}



/* プラン案内　wp 投稿ページ表示*/
.wp-box-article {
  max-width: 1000px;
    width: 90%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 50px auto 0;
 }

article {
  display: flex;
  flex-direction: column;
  padding: 0 0 16px;
  background-color: rgb(46, 45, 45);
  box-shadow: var(--shadow);
}

/* プランを見てみるボタン */
article a .bt {
 text-align: center;
 margin-top: auto;
}
article a .bt p{
  color: white;
  display: inline-block;
  font-size: 1.2rem;
  position: relative;
}
article a .bt p::after {
  content: "";
  background-color: white;
  width: 20%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: -10%;
  transition: all .3s ease-in-out; 
}
article a:hover .bt p::after {
  width: 120%;
}
/* BBQロゴ */
article .logo-bbq {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
 object-fit: cover;
}


/* 画像 */
article .img-container {
width: 100%;
overflow: hidden;
}

article .img-container img{
width: 100%;
height: auto;
aspect-ratio: 3/2;
object-fit: cover;
transition: transform .6s ease-in-out
}

article a:hover .img-container img {
  transform: scale(1.1);
}


/* 文字枠 */
.text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 投稿日表示 */
.text .article-date {
  font-size: 1.2rem;
}
/* タイトル表示 */
.text .title h3 {
  color: white;
 font-size: 1.4rem;
 font-weight: bold;
}


/*  ⑤ BBQプラン　終了 */



/*==================================================
 ⑥ 営業案内　wp
===================================*/
.content-box-hours {
 max-width: 1500px;
 width: 100%;
 padding: 50px 0 50px;
 color: black;
}

.content-box-hours .dashed-line {
  border: 2px dashed var(--black);
  width: 80%;
  margin: 50px auto 50px;
}
.content-box-hours .title-top::after {
  content: "";
  border-bottom: 1px solid black;
}

.bbq-table {
  margin: 0 auto 24px;
}
.bbq-table td:nth-child(2) {
 padding-left: 16px;
}

.content-box-hours .text-jp{
  max-width: 600px;
  width: 96%;
  margin: 0 auto;
 padding: 24px 0 50px;
}

.wp-box {
  width: 96%;
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
}

/* 表の横スクロール */
.mobile-scroll {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
 }

.wp-block-table table {
  width: 100%;
  border: 2px solid black !important;
} 

.wp-block-table table td {
  border: 1px solid black !important;
  padding: 16px 8px 16px;
}

.wp-block-table table tr {
 margin: 4px 4px;
}


/* BBQ予約  */
.wrapper-booking {
max-width: 1500px;
width: 100%;;
position: relative;
padding: 0 0 0;
}

/* 予約 */
.booking-box {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 50px 24px 24px;
  background-color: var(--lightblue);
  position: relative;
  color: var(--black);
}

.booking-box .text-jp {
 max-width: 600px;
 margin: 0 auto;
}
.booking-box .title-top {
  font-size: 2.4rem;
  padding: 0 25px 0 ;
  position: relative;
}
.title-top::after {
  content: "";
  border-bottom: 1px solid var(--black);
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.title-top::before {
  display: none;
}
.title-bottom {
  font-size: 1.6rem;
  padding: 8px 0 0 ;
}


.btn-area {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.btn-area .link-btn-box {
  width: 50%;
  min-width: 350px;
}


@media (max-width: 1024px) {
  /* 記事　背景 */

    .wrapper-article {
      background: none;
    } 
    /* スマホ画像 */
   .sp-img {
     display: block;
     width: 100%;
     object-fit: contain;
     margin-top: 24px;
    }

}

@media(max-width: 768px) {
  .wrapper-intro {
    padding: 0 0 0px;
   }
   
   

  .wrapper-topbanner {
  padding: 100px 0 0;
 }
  .top-banner {
   display: none;
  }
  .top-banner-sp {
    display: block;
  }


 /*③BBQ紹介 */
  .content-box-bbq {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 50px;
  }
  .content-box-bbq:nth-of-type(3){
    margin-bottom: 0px;
  }
  .text-box {
    width: 100%;
    order: 2;
  }
  .img-box {
    width: 100%;
    order: 1;
  }
  .img-box .img-outer {
    width: 80%;

  }

}


@media(max-width: 376px) {
  /* 予約　ボタン */
.btn-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-area .link-btn-box {
  width: 80%;
  min-width: 300px;
}

}