@charset "UTF-8";

/*****************************
  top
*****************************/
.topsec{
  padding: 10rem 0;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec{
    padding: 6rem 0;
  }
}

/*****************************
topfv
*****************************/
.topfv .splide{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}
.topfv .splide__slide{
  height: 120lvh;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topfv .splide__slide{
    height: 100lvh;
  }
}

/*****************************
topsec-greeting
*****************************/
.topsec-greeting .ob {
  aspect-ratio: 1417/2495;
  background: url(../images/common/ob_waveline_L1.svg) no-repeat center / contain;
  opacity: .5;
  position: absolute;
  top: -10rem;
  left: 0;
  height: calc(100% + 20rem);
  width: 100%;
}
.topsec-greeting .greeting .fbg{
  aspect-ratio: 152/161;
  background: url(../images/top/greeting.webp) no-repeat top / cover;
  /* background: url(../images/top/greeting.webp) no-repeat center / cover; */
  width: 50%;
}
.topsec-greeting .greeting .ftxtbox .ttl{
  font-size: 4rem;
}
.topsec-greeting .greeting .ftxtbox .txt{
  margin-top: 4rem;
}
.topsec-greeting .greeting .ftxtbox .txt p{
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.topsec-greeting .greeting .ftxtbox .txt p:first-of-type{
  margin-bottom: 3rem;
}

.topsec-greeting .topnews{
  padding-top: 10rem;
  padding-left: 3rem;
}
.topsec-greeting .topnews .newslist .ftxtbox .ttl{
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}
.topsec-greeting .topnews .morebtn1{
  margin-top: 2rem;
  text-align: right;
}
@media only screen and (max-width: 1180px) {
  .topsec-greeting .greeting .fbg{
    width: 48%;
  }
  .topsec-greeting .greeting .ftxtbox .ttl{
    font-size: 2.8rem;
  }
  .topsec-greeting .greeting .ftxtbox .txt p{
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 1024px) {
  .topsec-greeting .topnews .newslist .ftxtbox .ttl{
    margin-bottom: .5rem;
    padding-bottom: .5rem;
  }
}
@media only screen and (max-width: 820px) {
  .topsec-greeting .greeting .fbg{
    margin-right: auto;
    width: 80%;
  }
  .topsec-greeting .greeting .ftxtbox{
    background: rgba(40,40,40, .7);
    color: #fff;
    max-width: calc(100% - 2rem);
    padding: 2rem;
    position: absolute;
    right: 2rem;
    bottom: -5rem;
    width: 570px;
    z-index: 1;
  }
  .topsec-greeting .greeting .ftxtbox .txt {
    margin-top: 2rem;
  }
  .topsec-greeting .greeting .ftxtbox .txt p:first-of-type {
    margin-bottom: 1rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-greeting .ob{
    height: auto;
    top: 0;
  }
  .topsec-greeting .greeting .ftxtbox{
    background: none;
    color: #333;
    max-width: 100%;
    padding: 0 2rem;
    position: static;
  }
  .topsec-greeting .greeting .fbg{
    margin-top: 4rem;
    width: 95%;
  }
  .topsec-greeting .greeting .ftxtbox .ttl{
    font-size: 2.6rem;
  }
  .topsec-greeting .topnews{
    padding-top: 6rem;
    padding-left: 1rem;
  }
  .topsec-greeting .topnews .newslist .ftxtbox .ttl{
    margin-bottom: 0;
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 380px) {
  .topsec-greeting .greeting .ftxtbox .ttl{
    font-size: 2.3rem;
  }
}
@media only screen and (max-width: 340px) {
  .topsec-greeting .greeting .ftxtbox .ttl{
    font-size: 2.1rem;
  }
}


/*****************************
topsec-kodawari
*****************************/
.topsec-kodawari{
  background: #000;
  color: #fff;
}
.topsec-kodawari .ob{
  aspect-ratio: 1358 / 2375;
  background: url(../images/common/ob_waveline_R1.svg) no-repeat center / cover;
  opacity: .3;
  position: absolute;
  top: -10rem;
  right: -5%;
  height: calc(120% + 20rem);
  width: auto;
}
.topsec-kodawari .box1 .ttl{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  width: 25%;
  writing-mode: vertical-rl;
}
.topsec-kodawari .box1 .ttl span{
  font-size: 3rem;
  letter-spacing: 3px;
  margin: auto 0;
  padding: 0 2rem;
}
.topsec-kodawari .box1 .ttl span:first-of-type{
  margin-top: 0;
}
.topsec-kodawari .box1 .txtbox{
  font-size: 1.8rem;
  margin: 3rem auto 5rem;
  text-align: center;
}
.topsec-kodawari .box1 .fimgbox{
  aspect-ratio: 3/2;
  margin: 0 auto;
  height: 100%;
  width: 70%;
}
.topsec-kodawari .box2 {
  margin-top: 5rem;
  padding-top: 5rem;
}
.topsec-kodawari .box2 .fimgbox{
  aspect-ratio: 3/2;
}
.topsec-kodawari .box2 .ttl{
  margin-bottom: 3rem;
}
.topsec-kodawari .box2 .ttl span{
  display: block;
  font-size: 2.8rem;
  letter-spacing: 3px;
}
.topsec-kodawari .box2 p{
  font-size: 1.8rem;
}
.topsec-kodawari .box2 p:first-child{
  margin-bottom: 2rem;
}
@media only screen and (max-width: 1180px) {
  .topsec-kodawari .box1 .ttl span {
    font-size: 2.6rem;
    padding: 0 1rem;
  }
  .topsec-kodawari .box1 .txtbox,
  .topsec-kodawari .box2 p{
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .topsec-kodawari .box2 .fimgbox {
    aspect-ratio: 3 / 2;
    margin: 3rem auto 0;
    width: 65%;
  }
  .topsec-kodawari .box2 .ftxtbox{
    text-align: center;
    width: 100%;
  }
  .topsec-kodawari .box2 p:first-child{
    margin-bottom: 1rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-kodawari .box1 .ttl {
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
    display: inline-flex;
    margin-bottom: 2rem;
    padding: 2rem 0;
    writing-mode: horizontal-tb;
    width: auto;
  }
  .topsec-kodawari .box1 .ttl span{
    border: none;
    font-size: 2rem;
    padding: 0;
  }
  .topsec-kodawari .box1 .txtbox{
    margin: 1rem auto 3rem;
    text-align: left;
  }
  .topsec-kodawari .box2 .ttl{
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
    display: inline-block;
    margin-bottom: 2rem;
    padding: 2rem 0;
  }
  .topsec-kodawari .box2 .ttl span{
    font-size: 2rem;
  }
  .topsec-kodawari .box2 .ftxtbox{
    text-align: left;
  }
  .topsec-kodawari .box1 .fimgbox,
  .topsec-kodawari .box2 .fimgbox{
    width: 100%;
  }
}

/*****************************
topsec-menu
*****************************/
.topsec-menu{
  padding-left: 3rem;
}
.topsec-menu::before{
  content: "";
  background: url(../images/top/bg_menu.webp) repeat center / contain;
  opacity: .7;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.topsec-menu .coursegr{
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
.topsec-menu .coursegr .course{
  gap: 5rem;
}
.topsec-menu .coursegr .ftxtbox{
  width: 45%;
}
.topsec-menu .coursegr .fimgbox{
  /* aspect-ratio: 2/3; */
  /* aspect-ratio: auto !important; */
  width: 40%;
}
.topsec-menu .coursegr .course .fimgbox img{
  display: block;
  margin-left: auto;
  width: 90%;
}
.topsec-menu .coursegr .course .fimgbox img:first-of-type{
  margin: 0 auto 2rem 0;
}
.topsec-menu .weekday{
  margin: 10rem 0;
}
.topsec-menu .coursegr .menubtns{
  gap: 1rem;
}
.topsec-menu .coursegr .menubtns li{
  margin-top: 0;
}
.topsec-menu .weekday .ftxtbox,
.topsec-menu .drink .ftxtbox{
  width: 40%;
}
.topsec-menu .weekday .fimgbox,
.topsec-menu .drink .fimgbox{
  aspect-ratio: 3/2;
  width: 55%;
}
.topsec-menu .box .txtbox p.type{
  margin-bottom: 2rem;
}
.topsec-menu .box .txtbox p{
  font-size: 1.8rem;
}
.topsec-menu .box .txtbox span{
  font-size: 2rem;
  font-weight: bold;
}
.topsec-menu .box .txtbox{
  margin-bottom: 3rem;
}
.topsec-menu .box .morebtn1{
  margin-top: 1rem;
}
@media only screen and (max-width: 1180px) {
  .topsec-menu .box .txtbox p{
    font-size: 1.6rem;
  }
  .topsec-menu .box .txtbox span{
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .topsec-menu .coursegr .course{
    align-items: normal;
    gap: 2rem;
  }
  .topsec-menu .coursegr .ftxtbox{
    width: 55%;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-menu{
    padding-left: 1rem;
  }

  .topsec-menu .coursegr .menubtns{
    justify-content: end;
  }

  .topsec-menu .coursegr .ftxtbox,
  .topsec-menu .coursegr .fimgbox,
  .topsec-menu .weekday .ftxtbox,
  .topsec-menu .weekday .fimgbox,
  .topsec-menu .drink .ftxtbox,
  .topsec-menu .drink .fimgbox{
    width: 100%;
  }
  .topsec-menu .weekday .fimgbox,
  .topsec-menu .drink .fimgbox{
    margin-bottom: 2rem;
  }

  /* .topsec-menu .coursegr .fimgbox{
    aspect-ratio: 3/2;
  } */
  .topsec-menu .box .morebtn1{
    text-align: right;
  }
}


/*****************************
topsec-bg
*****************************/
.topsec-bg{
  aspect-ratio: 192/47;
  clip-path: inset(0);
  overflow: hidden;
  width: 100%;
}
.topsec-bg .bg{
  aspect-ratio: 192/47;
  background: url(../images/top/bg.webp) no-repeat center / cover;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: -1;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .topsec-bg{
    height: 300px;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-bg{
    height: 250px;
  }
}

/*****************************
topsec-interior
*****************************/
.topsec-interior{
  padding-bottom: 0;
}
.topsec-interior .ob{
  aspect-ratio: 27 / 220;
  background: url(../images/common/ob_line_R.svg) no-repeat center / cover;
  position: absolute;
  top: -10rem;
  right: 0;
  height: calc(100% + 20rem);
}
.topsec-interior .interior{
  margin-bottom: 10rem;
  padding-left: 3rem;
}
.topsec-interior .content .ftxtbox{
  width: 45%;
}
.topsec-interior .content .fimgbox{
  /* aspect-ratio: 2/3; */
  aspect-ratio: 3/2;
  width: 50%;
}
.topsec-interior .content .txtbox h3{
  font-size: 2.4rem;
  margin-bottom: 3rem;
}
.topsec-interior .content .txtbox p{
  font-size: 1.8rem;
}
.topsec-interior .content .morebtn1{
  margin-top: 3rem;
}
.topsec-interior .splide__slide img{
  aspect-ratio: 3/2;
  object-fit: cover;
  height: auto;
  width: 100%;
}
@media only screen and (max-width: 1180px) {
  .topsec-interior .content .txtbox p{
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-interior .interior{
    margin-bottom: 6rem;
    padding-left: 1rem;
  }
  .topsec-interior .content .ftxtbox,
  .topsec-interior .content .fimgbox{
    width: 100%;
  }
  .topsec-interior .content .fimgbox{
    margin-bottom: 2rem;
  }
  .topsec-interior .content .txtbox h3{
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
  }
  .topsec-interior .morebtn1{
    text-align: right;
  }
}

/*****************************
popsec
*****************************/
.popactive{
  overflow: hidden;
  height: 100vh;
}
.popsec {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  transition: .5s;
  height: 100vh;
  width: 100%;
}
.popsec.popopen {
  opacity: 1;
  pointer-events: all;
  z-index: 10000;
}
.popsec .popbg{
  background: rgba(0, 0, 0, .65);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.popsec .popcontent{
  background: url(../images/top/bg_menu.gif) repeat center / cover;
  max-width: 1300px;
  overflow-y: auto;
  padding: 5rem 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 80vh;
  width: 68.75%;
}
.popsec .popcontent::-webkit-scrollbar {
  background: #ccc;
  width: 10px;
}
.popsec .popcontent::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 10px;
}
.popsec .popclose{
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 50px;
}
.popsec .popclose::before,
.popsec .popclose::after{
  content: "";
  background: #333;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
  height: 2px;
  width: 75%;
}
.popsec .popclose::after{
  transform: translate(-50%,-50%) rotate(45deg);
}
@media only screen and (max-width: 1180px) {
  .popsec .popcontent{
    width: 80%;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .popsec .popcontent{
    width: 90%;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .popsec .popcontent{
    height: 85vh;
  }
}

/*****************************
psec-coursemenu
*****************************/
.cursemenubox {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.cursemenubox > div{
  /* background: #fff;
  box-shadow: 2px 2px #e7e7e7; */
  padding: 2rem;
}
.cursemenubox .cursemenuttl{
  border-bottom: 1px solid #a40404;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
}
.cursemenubox .cursemenuttl .sub{
  display: block;
  font-size: 1.6rem;
}
.cursemenubox .price{
  font-size: 1.6rem;
  text-align: right;
}
.cursemenubox .price span{
  font-size: 2.4rem;
  font-weight: 500;
}
.cursemenubox ul{
  margin-top: 1rem;
}
.cursemenubox ul li{
  font-size: 2rem;
}
.cursemenubox ul li .sub p{
  font-size: 1.6rem;
}
.cursemenubox .subtxt{
  margin-top: 1.5rem;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
}

/*****************************
psec-weekdaymenu
*****************************/
.weekdaymenubox {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.menugenrebox > dt{
  background: #515151;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  padding: 1rem 2rem;
}
.menugenrebox > dd > .txtbox{
  background: rgba(255, 255, 255, .7);
  margin: 1rem 0 2rem;
  padding: 1rem;
}
.menugenrebox > dd > dl{
  gap: 1rem;
}
.menugenrebox > dd > dl > div > dt{
  margin-top: 1rem;
}
.menugenrebox > dd > dl .fbox{
  /* background: #fff;
  box-shadow: 2px 2px #e7e7e7; */
  /* padding: 1rem; */
  /* width: calc(50% - 1rem); */
  width: 100%;
}
.menugenrebox > dd > dl dt{
  border-bottom: 1px solid #a40404;
  font-weight: 500;
  margin-bottom: .2rem;
  padding-bottom: .5rem;
}

.menugenrebox > dd > dl dd ul{
  background: #f4f4f4;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
}
.menugenrebox > dd > dl dd .price{
  text-align: right;
}
.menugenrebox > dd > dl dd .price span{
  font-size: 2rem;
  font-weight: 500;
}

#pop-drink .menugenrebox > dd > dl dd ul{
  background: none;
  padding: 0;
}
#pop-drink .menugenrebox > dd > dl dd ul li{
  padding: 0;
}
#pop-drink .menugenrebox > dd > dl dd ul li::before{
  display: none;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .menugenrebox > dd > dl .fbox{
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
}