@charset "utf-8";

/* loading画面 */


.loader-bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
    background: #3E433E;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ローディングアニメーションの設定 */
.loader {
  width: 56px;
  height: 107px;
  background: url("../imgs/index/loading-rogo.png") center center / contain no-repeat;
  animation: fadeInLogo 3s ease-out forwards;
  animation-delay: 1.2s;
  opacity: 0;
}
@keyframes fadeInLogo {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* ティザー用ポップアップ */
/* 初期状態：非表示 */

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1.5s ease;
  z-index: 9999;
}
.popup.show {
  opacity: 1;
  pointer-events: auto;
}
.popup-content {
  max-width: 92%;
  margin: 0 auto;
  background: #3E433E;
  padding: 50px 50px 30px 50px;
  text-align: center;
}

.popup-content.ja{
  display: block;
}
.popup-content.en{
  display: none;
}
.lang-en .popup-content.ja{
  display: none;
}
.lang-en .popup-content.en{
  display: block;
}

.popup__ttl{
  font-size: 18px;
  margin-bottom: 40px;
  color: #ffffff;
}
.popup__text{
  margin-bottom: 37px;
  font-size: 15px;
  line-height: 1.93;
  color: #ffffff;
}
.popup__text span{
  display: inline-block;
}
.close-btn {
  background: none;
  border: none;
  font-size: 13px;
  cursor: pointer;
   color: #ffffff;
}
/* ふわっとアニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media screen and (max-width: 750px) {
.popup-content {
  padding: 35px 25px 30px 25px;
}
.popup__ttl{
  margin-bottom: 43px;
  font-size: 16px;
}
.popup__text{
  font-size: 15px;
}
}





/* 言語切り替えボタン　カスタム */
#trp-floater-ls.trp-color-dark{
  background: none!important;
  border-radius:  8px 0 0 8px!important;
   min-width: 55px!important;
  background: none!important;
  box-shadow:none!important;
}

#trp-floater-ls{
  height: auto!important;
  opacity: 0;
  transition: 2s;
}
#trp-floater-ls.show{
   opacity: 1;
}

#trp-floater-ls-language-list{
  display: block;
}
.trp-with-flags{
 position: relative;
}
.trp-with-flags::after {
  content:'';
  display: block;
  width: 15px;
  height: 1px;
  transform:rotate(25deg);
  background-color: #BDBDBD;
  position: absolute;
  top: 52%;
  left: 21px;
}
/* .header--lightText .trp-color-dark #trp-floater-ls-current-language a, .trp-color-dark #trp-floater-ls-language-list a {
    color: #ffffff;
}
.header--darkText .trp-color-dark #trp-floater-ls-current-language a, .trp-color-dark #trp-floater-ls-language-list a {
    color: #3E433E;
} */





#trp-floater-ls-language-list.trp-with-flags{
  display: block;
}
#trp-floater-ls-current-language.trp-with-flags{
  display: none!important;
}
#trp-floater-ls.trp-bottom-right{
  right: 2%!important;
  bottom:auto!important;
  top: 50%!important;
  -webkit-transform: translateY(-50%)!important;
	-ms-transform: translateY(-50%)!important;
	-moz-transform: translateY(-50%)!important;
	-o-transform: translateY(-50%)!important;
}
.trp-flag-image{
  display: none!important;
}
#trp-floater-ls div:not(#trp-floater-poweredby) > a{
 display: block;
  writing-mode: vertical-rl;
}
.trp-floater-ls-disabled-language {
  margin-top: 10px;
}
#trp-floater-ls.trp-floater-ls-codes #trp-floater-ls-current-language a, #trp-floater-ls.trp-floater-ls-codes #trp-floater-ls-language-list {
  margin-top: 0!important;
}
.trp-language-switcher-container.trp-floater-ls-codes.trp-bottom-right .trp-language-wrap, .trp-language-switcher-container.trp-floater-ls-codes.trp-bottom-left .trp-language-wrap {
    padding: 9px 35px 6px 9px !important;
}
#trp-floater-ls a[title="English"] {
    /* font-size: 0 !important; */
    position: relative;
    font-size: 14px;
  writing-mode: vertical-rl;
    
}

#trp-floater-ls-language-list .trp-language-wrap a[title="Japanese"] {
   /* font-size: 0 !important; */
    position: relative;
    font-size: 14px;
    writing-mode: vertical-rl;
}


#trp-floater-ls div:not(#trp-floater-poweredby) > a:last-child{
 /* font-size: 0 !important; */
  /* position: relative;
  display: inline-flex;
  align-items: center; */
  font-size: 14px;
}

.trp-ls-disabled-language {
    opacity: 1 !important;
    visibility: visible !important;
}
.trp-color-dark #trp-floater-ls-language-list .trp-language-wrap a:hover {
    color: #FFFFFF;
    background: #4f4f4f9e!important;
    border-radius: 2px;
}






.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 21;
}

body.fixed {
  height: 100%;
  overflow: hidden;
}

.header__wrapper {
}

.header__inner {
  position: relative;
}

.header__logo{
  width: 20px;
  height: 117px;
  position: absolute;
  top: 27px;
  left:4.14vw;
  z-index: 5;
  opacity: 0;
  transform: translateY(-10px);
  transition: .4s;
  
}
.header__logo a{
content: '';
  display: block;
  width: 100%;
  height: 100%;
  /* background-image: url(../imgs/index/header_logo_top.png); */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: .2s;
}

.header.nav-on .header__logo {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* 表示状態でクリック有効 */
}

body.fixed .header.nav-on .header__logo{
  opacity: 0;
}


.header_reserv{
  font-size: 14px;
  letter-spacing: 0.3em;
  padding: 6px 21px;
  position: absolute;
  top: 24px;
  right: 100px;
  color: #fff;
  border:1px solid #fff;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.header__navWrap {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background: url("../imgs/index/header_bg.png") center center / cover no-repeat;
  z-index: 2;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 表示する時 */
.header__navWrap.open {
  visibility: visible;
  opacity: 1;
}

.header__nav-inner {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  overflow: scroll;
}
.header__logo--bg {
  width: 100%;
  max-width: 63px;
  position: absolute;
  /* top: 36.6%; */
  left: 8.3%;
  padding-top: 249px;
  /* -webkit-transform: translateY(-36.6%);
  -ms-transform: translateY(-36.6%);
  -moz-transform: translateY(-36.6%);
  -o-transform: translateY(-36.6%); */
  z-index: 1;
}
.header__logo--bg a {
  display: block;
}
.header__nav-contents {
  width: calc(72.2% - 22px);
  max-width: 655px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto 0 27.8%;
  padding-top: 232px;
  padding-bottom: 100px;
}
.header__navLft {
  width: 36%;
  max-width: 205px;
}
.header__nav.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.nav-title {
  color: #6c6c6c;
  font-size: 14px;
  padding-top: 19px;
  line-height: 1.57;
  letter-spacing: 0.02em;
}
.header__nav-list {
}

.header__nav-listItem a {
  color: #fff;
  font-size: 26px;
  line-height: 2.38;
  letter-spacing: 0.02em;
  display: inline-block;
  position: relative;
}
.header__nav-listItem a::after {
  position: absolute;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
  bottom: -1px; /*アンダーラインがaタグの下端から現れる*/
  transform: scale(0, 1); /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
  transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
  transition: transform 0.3s; /*変形の時間*/
}
.header__nav-listItem a:hover::after {
  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}
.header__nav-listItem--sml {
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.02em;
  padding-left: 15px;
  position: relative;
  bottom: 4px;
}
.header__nav-rgt {
}

.header__navRgt {
  width: 62%;
  max-width: 335px;
}
.header__navRgt-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.address__contents {
  padding-top: 16px;
  margin-bottom: 69px;
}
.address__contents-text,
.address__map-btn {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.address__contents-text {
  line-height: 1.92;
}
.address__map-btn {
  display: flex;
  align-items: center;
  width: 92px;
  line-height: 1.69;
}
.address__map-img {
  width: 9px;
  height: 12px;
  display: block;
  margin-right: 5px;
}
.reserve__contents {
  display: flex;
  flex-direction: column;
}
.reserve__btn:not(:last-child) {
  margin-bottom: 4px;
}
.reserve__btn a {
  color: #fff;
  font-size: 14px;
  display: inline-block;
  position: relative;
  line-height: 2.14;
  letter-spacing: 0.02em;
}
.reserve__btn a::after {
  position: absolute;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
  bottom: -1px; /*アンダーラインがaタグの下端から現れる*/
  transform: scale(0, 1); /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
  transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
  transition: transform 0.3s; /*変形の時間*/
}
.reserve__btn a:hover::after {
  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}


/* 日本語英語切り替 */
.reserve__btn.ja{
  display: block;
}
.reserve__btn.en{
  display: none;
}

body.lang-en .reserve__btn.ja{
  display: none;
}
body.lang-en .reserve__btn.en{
  display: block;
}


.ham__wrap {
}
.ham {
  width: 35px;
  height: 25px;
  position: fixed;
  top: 26px;
  right: 38px;
  cursor: pointer;
  z-index: 10;
  transform:rotate(90deg) ;
}

.ham__lineWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 31px;
  height: 8px;
}

.ham__lineWrapper span {
  display: block;
  width: 31px;
  height: 1px;
  background-color: #fff;
  transition: 0.3s;
}

.ham__lineWrapper span:nth-child(1) {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

.ham__lineWrapper span:nth-child(2) {
  width: 18px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.ham.open {
  width: 35px;
  height: 25px;
  top: 29px;
}

.ham.open .ham__lineWrapper {
  width: 32px;
  height: 12px;
}

.ham.open .ham__lineWrapper span {
  width: 32px;
}

.ham.open .ham__lineWrapper span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(20deg);
  top: 50%;
  background-color: white;
}

.ham.open .ham__lineWrapper span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-20deg);
  top: 50%;
  left: 50%;
  background-color: white;
}

/* ヘッダーのリンク*/
/* .header__Topnav{
  padding-top: 30px;
  transition: .4s;
  display: none;
}
.header__Topnav a{
  font-size: 14px;
  letter-spacing: 0.02em;
}
header.nav-on .header__Topnav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:20px;
} */
.header__Topnav {
  padding: 30px 0 25px;
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0;
  transform: translateY(-10px);
  display: flex; /* 常に存在させておく */
  justify-content: center;
  align-items: center;
  gap: 20px;
  pointer-events: none; /* 非表示状態ではクリック無効 */
   -webkit-backdrop-filter: blur(2px); 
  backdrop-filter: blur(2px);
}
.header__Toplink{
  font-size: 14px;
  letter-spacing: 0.02em;
}
.header.nav-on .header__Topnav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* 表示状態でクリック有効 */
}
.header.nav-on .header__Topnav a{
  -webkit-text-stroke: 0.1px #FFF;
  text-stroke: 0.1px #FFF;
}


.header--lightText {
  color: white;
}
.header--darkText {
  color: #716148;
}

.header--lightText .ham__lineWrapper span{
  background-color: white;
}
.header--darkText .ham__lineWrapper span{
  background-color: #716148;;
}

.header--lightText .header_reserv{
  color: #fff;
  border:1px solid #fff;
}
.header--darkText .header_reserv{
  color: #716148;
  border:1px solid #716148;
}


.header--lightText .header__logo a{
  background-image: url(../imgs/index/header_logo_top.png);
}
.header--darkText .header__logo a{
  background-image: url(../imgs/index/header_logo_top000.png);
}

@media screen and (max-width: 1280px) {
  .header__Topnav{
    gap: 15px;
    margin-right: 30%;
  }
}
@media screen and (max-width: 980px) {
    .header__logo{
    width: 1.836vw;
    height: 11.02vw;
    left: 2.14vw;
  }
}
@media screen and (max-width: 920px) {
    .header__logo{
    /* display: none; */
  }
}

@media screen and (max-width: 750px) {
  .ham,
  .ham.open {
    top: 35px;
    right: 16px;
  }
  .ham.open {
    top: 30px;
  }
  .header__logo{
    /* display: none; */
    width: 20px;
    height: 77px;
  }
  .header__logo--bg {
    display: none;
  }
  .header__navWrap {
    background: url(../imgs/index/header_bg_sp.png) center center / cover no-repeat;
  }
  .header__nav-inner{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header__Topnav{
    display: none;
  }
  .header__nav-contents {
    width: calc(100% - 80px);
    max-width: 290px;
    margin: 0 auto;
    display: block;
    /* padding-top: 81px; */
    /* padding-top: 45%;
    padding-bottom: 81px; */
    padding: 0 0 0 0;
  }
  .header__navLft {
    width: 100%;
    max-width: 100%;
    margin-bottom: 28px;
  }
  .header__nav.flex {
    display: block;
  }
  .nav-title {
    display: none;
  }
  .header__nav-listItem a {
    font-size: 20px;
    line-height: 2.4;
  }
  .header__nav-listItem--sml {
    font-size: 12px;
    padding-left: 10px;
    bottom: 3px;
  }
  .header__navRgt {
    width: 100%;
    max-width: 100%;
  }
  .header__navRgt-wrap {
    display: block;
  }
  .reserve__contents {
    margin-bottom: 13px;
  }
  .address__contents {
    margin-bottom: 0;
  }
  .address__contents-text,
  .address__map-btn {
    font-size: 12px;
  }
  .address__contents-text {
    line-height: 2.08;
  }
  .address__map-btn {
    width: 87px;
    line-height: 1.83;
  }
  .header_reserv{
    font-size: 12px;
    padding: 4px 10.3px;
    top: 35px;
    right: 55px;
  }
}

@media screen and (max-width: 375px) {
}