/*bootstrap対策*/
h1,
h2,
h3,
h4,
h5,
h6{
  margin: 0;
  font-family: inherit;
  line-height: 1;
  color: inherit
}
p{
  margin: 0;
}
dl,
ol,
ul{
  margin: 0;
}
dt,
dd{
  margin: 0;
}
/****************************/
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
ul,
li,
a,
span,
address,
blockquote,
table,
tr,
th,
td{
  /*transform: rotate(0.03deg);*/
}
*,
::after,
::before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*overflow-x: hidden;*/
  /*横スクロールが出るのを隠すため*/
  color: #211f23;
  /*font-family: 'Klee One', cursive;*/
  /*font-family: 'Sawarabi Mincho', serif;*/
  font-family: 'Shippori Mincho', serif;
  font-size:1.7rem;
  color:#211f23;
}
html,body{
  font-size: 62.5%;
  font-weight:400;
  /*font-size: 0.390625vw*/
  /*期値を10pxとする場合：10/2560*100=0.396（表示させたい文字サイズ÷width×100*/
  ;
  line-height: 1;
  /*transform: rotate(0.03deg);*/
}
body{
  line-height: 1;
  font-family: 'Klee One', cursive;
  font-size:1.7rem;
  color:#211f23;
}

.inner{
  width:80%;
  /*max-width:120rem;*/
  max-width: 140rem;
  margin:auto;
}


/*汎用*/
.scroll{
  width: fit-content;
  margin:auto;
}
.scroll::before{
  content:"";
  width: 0.1rem;
  height:6rem;
  background: #eef0f1;
  display: block;
  margin:-3rem auto 0;
}
.scroll a{
  color:#bbab42;
}

.buttonA{
  background: #080404;
  height:4rem;
  width:fit-content;
}
.buttonA a{
  width:inherit;
  height: inherit;
  display: grid;
  align-items: center;
  padding:0 6rem;
  font-size:1.2rem;
  color: #fff;
  transition: 0.5s;
}
.buttonA a:hover{
  text-decoration: none;
  background: #fff;
  border:0.1rem solid #080404;
  color: #080404;
  letter-spacing: 0.25em;
}







/*header*/
header{
  background:rgba(255,255,255,0.7) ;
  display: flex;
  justify-content: space-between;
  padding:0 2vw 0 3vw; 
  height:10rem;
  align-items: center;
  position: sticky;
  top:0;
  z-index: 9;
}
header .logo{
  width:17.5%;
}
header .logo img{
  width:100%;
  max-width:30.5rem;
}
header nav{
  width: 82.5%;
  max-width: 130rem;
}
header nav > .ul{
  display: flex;
  justify-content: space-between;
}
header nav > .ul > .li{
  list-style: none;
  text-align: center;
  flex-grow:1;
}

header nav > .ul > .li:nth-of-type(1){
  display: none;
}
header nav > .ul > .li > p > a{
  color: #252525;
  width:100%;
  height:10rem;
  display: grid;
  align-content: center;
}
header nav > .ul > .li > p > a:hover{
  text-decoration: none;
}
header nav > .ul > .li > p > a::before{
  color:#bbab42;
  font-size:1.5rem;
  line-height: 2;
  display:block;
}
header nav > .ul > .li:nth-of-type(1) > p > a::before{
  content:"Top";
}
header nav > .ul > .li:nth-of-type(2) > p > a::before{
  content:"Salon";
}

header nav > .ul > .li:nth-of-type(3) > p > a::before{
  content:"Diningbar";
}

header nav > .ul > .li:nth-of-type(4) > p > a::before{
  content:"Staff";
}

header nav > .ul > .li:nth-of-type(5) > p > a::before{
  content:"Recruit";
}

header nav > .ul > .li:nth-of-type(6) > p > a::before{
  content:"News";
}

header nav > .ul > .li:nth-of-type(7) > p > a::before{
  content:"Company";
}

header nav > .ul > .li:nth-of-type(8) > p > a::before{
  content:"Contact";
}

header nav > .ul > .li:nth-of-type(9){
  background:#49291a;
  position: relative;
  padding:0.5rem 4rem;
  height:6rem;
  align-self: center;
  display: grid;
  align-items: center;
}
header nav > .ul > .li:nth-of-type(9) p::before{
  content:"";
  background:url(/system_panel/uploads/images/icon_calendar.png) no-repeat;
  width:2.3rem;
  height:2.5rem;
  display: inline-block;
  position: absolute;
  left: 1rem;
  top: 2rem;
}
header nav > .ul > .li:nth-of-type(9) p > a{
  color: #fff;
  padding:0;
  height:fit-content;
}
header nav > .ul > .li:nth-of-type(9) p > a::before{
  content:"Reserve";
  font-size:1.3rem;
  line-height: 1.2;
  width: inherit;
  height: inherit;
}

/*プルダウン*/
header nav > .ul > .li .list{
  display: none;
  width: 100%;
  padding:5rem;
  opacity: 0;
  transition: 0.5s;
}
header nav > .ul > .li a{
  cursor: pointer;
}
header nav > .ul > .li a:hover{
  color:#252525;
}
header nav > .ul > .li:nth-of-type(2):hover .list,
header nav > .ul > .li:nth-of-type(3):hover .list,
header nav > .ul > .li:nth-of-type(5):hover .list{
  display: initial;
  position: absolute;
  background:#49291a;
  top:10rem;
  left:0;
  opacity: 1;
}
header nav > .ul > .li .list .col2{
  display: flex;
}
header nav > .ul > .li .list .col2 .left{
  width:30%;
}
header nav > .ul > .li .list .col2 .left > p{
  color: #fff;
  line-height:2.5;
}
header nav > .ul > .li .list .col2 .left > p:last-of-type{
  padding:3rem 0 0;
}
header nav > .ul > .li .list .col2 .left > p.title{
  font-size:2.4rem;
  line-height:1;
}
header nav > .ul > .li .list .col2 .left > p.title a{
  font-size:2.4rem;
  line-height:1;
  color:#fff;
}
header nav > .ul > .li .list .col2 .left > p.sub{
  font-size:1.2rem;
  border-bottom:0.1rem solid #fff;
  display: inline-block;
  padding:0 0 3rem;
}
header nav > .ul > .li .list .col2 .right{
  width:70%;
}
header nav > .ul > .li .list .col2 .right .dl{
  background:#fff;
  padding:3rem 5rem;
  text-align: left;
}
header nav > .ul > .li .list .col2 .right .dl .dt{
  margin:0 0 1.5rem;
}
header nav > .ul > .li .list .col2 .right .dl .dd{
}
header nav > .ul > .li .list .col2 .right .dl .dd .ul .li{
  list-style: none;
  margin:0 0 0 3rem;
}
header nav > .ul > .li .list .col2 .right .dl .dd .ul .li a{
  color: inherit;
  text-decoration: underline;
}
header nav > .ul > .li .list .col2 .right .dl .dd .ul{
  display: flex;
}

header nav > .ul > .li .list .col2 .right > .ul{
  display: flex;
  padding:5rem;
  background: #fff;
}
header nav > .ul > .li .list .col2 .right > .ul .li{
  margin:0 0 0 3rem;
  list-style: none;
}
header nav > .ul > .li .list .col2 .right > .ul .li a{
  color: inherit;
  text-decoration: underline;
}





/*main*/
.mainimg{
  height:39rem;
  display: grid;
  place-items: center;
  margin:0 0 18rem;
}
.mainimg .read{
  font-size: 1.8rem;
  line-height: 1.6;
  color: #fff;
  text-shadow:  0 0 0.5rem rgba(0,0,0,0.75);
  text-align: center;
}






/*footer*/
footer{
  background: #252525;
  padding:16rem 0 6rem;
}
footer .inner .col2{
  display: flex;
}
footer .inner .col2 .left{
  width:30%;
}
footer .inner .col2 .left .logo{
  margin:0 0 6rem;
}
footer .inner .col2 .left .logo img{
  width:100%;
  max-width: 30.5rem;
}
footer .inner .col2 .left p{
  color: #fff;
  line-height: 2.6;
}
footer .inner .col2 .right{
  width: 70%;
}
footer .inner .col2 .right nav > .ul{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  margin:0 0 16rem;
  gap:/*2.08vw*/7rem /*4.16*/3vw;
}
footer .inner .col2 .right nav .ul .li{
  list-style: none;
}
footer .inner .col2 .right nav > .ul > .li{
  border-bottom:0.1rem solid #4c4c4c;
  padding:0 0 1em;
}
footer .inner .col2 .right nav > .ul .li a{
  color:#fff;
  text-decoration: none;
}

footer .inner .col2 .right nav > .ul .li:nth-of-type(2){
  grid-row:2/3;
}
footer .inner .col2 .right nav > .ul .li:nth-of-type(3){
  grid-row:3/4;
}
footer .inner .col2 .right nav > .ul .li:nth-of-type(4){
  grid-row: 1/5;
  border-bottom: none;
  color: #fff;
}
footer .inner .col2 .right nav > .ul .li:nth-of-type(8){
  grid-column: 3/4;
}
footer .inner .copyright{
  color:#fff;
  text-align: center;
}
footer .inner .col2 .right nav > .ul > .li > .ul{
  margin:1em 0 0;
}
footer .inner .col2 .right nav > .ul > .li > .ul > .li:first-of-type{
  border-top: 0.1rem solid #4c4c4c;
}
/*html body footer.animate__.animate__fadeInUp.wow.animated div.inner div.col2 div.right nav .ul .li .ul .li a*/
footer .inner .col2 .right nav > .ul > .li > .ul > .li > p a{/*要調整フルパスで書いても効かない*/
  color:#a6a6a6;
  line-height:3;
  font-size:1.5rem;
}







/*ページ遷移時のフェードイン効果*/
html{animation: fadein 3s forwards;}
@keyframes fadein{0%{opacity: 0}100%{opacity: 1}}




/*スムーススクロール*/
html{/*scroll-behavior: smooth;※smoooothでの使用は不可*/}




/*-----ハンバーガーメニュー-----*/
.navToggle{display:none;}




/*pagetopボタン用*/
.pagetop{
  position: fixed;
  bottom:5rem;
  right: 10%;
  color: #fff;
  z-index: 4;
}
.pagetop a{
  width: inherit;
  height: inherit;
  display: inline-grid;
  place-items: center;
  color: #fff;
}




/*headerSwitch用*/
/* スクロールして「scroll-navクラス」がついたときのヘッダーデザイン */
/*header{
  background: #000;
  position: sticky;
  top:0;
}
header.scroll-nav{
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 1rem rgba(0,0,0,0.7);
}
header.scroll-nav :is(.logo, .ul .li a){
  color: #202020;
}
*/



/*タブ管理画面用*/
#wrapper .typeA .content{
  width:initial !important;
  height:initial !important;
  overflow: initial !important;
  opacity: 1;
  }
  



/*アコーディオン*/
.aco2{
  display:none;/*初期状態で開いておく場合はinitialに変更*/
}
#wrapper .aco2{
  display:initial;/*初期状態で開いておく場合はinitialに変更*/
}
.aco-open{
  position: relative;
}
.aco-open::after{/* 閉じている時 */
  content: "－";
  position: absolute;
  top:1.5rem;
  right: 2rem;
  font-size: 5rem;
  color: #080404;
}
.aco-open.active::after{/* 開いている時 */
  content: "＋";
  font-size: 5rem;
  color: #080404;
  top:1.5rem;
}




/*========= 流れるテキストslideAnime ===============*/
/*全共通*/
.slide-in{
  overflow: hidden;
    display: inline-block;
}
.slide-in_inner{
  display: inline-block;
}
/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}
.slideAnimeLeftRight{
  animation-name:slideTextX100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX100{
  from{
  transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }
  to{
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}
.slideAnimeRightLeft{
  animation-name:slideTextX-100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX-100{
  from{
  transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }
  to{
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}




/*wow.js（animate.cssのスクロールのタイミングに発動させるライブラリ）用*/
.box{
  animation-fill-mode: forwards;
}




/*animate.cssの追加css*/
.animate__delay-1s{
  animation-delay: calc(var(--animate-delay)*0.5) !important;
}
.animate__delay-2s{
  animation-delay: calc(var(--animate-delay)*1) !important;
}
.animate__delay-3s{
  animation-delay: calc(var(--animate-delay)*1.5) !important;
}
.animate__delay-4s{
  animation-delay: calc(var(--animate-delay)*2) !important;
}
.animate__delay-5s{
  animation-delay: calc(var(--animate-delay)*2.5) !important;
}
.animate__delay-6s{
  animation-delay: calc(var(--animate-delay)*3) !important;
}




/*slick*/
.slick{}
:is(.slick-img img, .thumbnail-img img){
  height: auto;
  width: 100%;
  aspect-ratio: 4/3;
  /*slickの仕様対策（比率違いの画像対策）*/
  padding: 1rem;
}
.slick-prev::before{
  content: "<" !important;
  color: #b2ebfe !important;
  font-weight: bold;
  font-size: 6rem !important;
}
.slick-next::before{
  content: " > " !important;
  color: #b2ebfe !important;
  font-weight: bold;
  font-size: 6rem !important;
}
.slick-next{
  right: -8rem !important;
}
.slick-prev{
  left: -8rem !important;
}
.slick-prev,
.slick-next{
  /*background:#000 !important;*/
  transform: scale(0.5, 1) !important;
  top: -40rem !important;
  padding: 1em;
  width: 5rem !important;
  height: 5rem !important;
}
.slick-prev:before,
.slick-next:before{
  color: #000;
  /*黒にする*/
  opacity: 1;
  /*デフォルトは.75が指定されている*/
}