@charset "UTF-8";

/* ============================================================
 common 
=============================================================== */
:root {
       --primary-cream: #F7EFE2;
       --primary-brown: #C19A5B;
       --primary-green: #3B530E;
       --primary-black: #1F1F1F;
       --primary-white: #FDFDFD;
       --primary-whiteR: 193, 154, 91;
       --contentWidth: 89.3%;
       --contentpadding: 5.3%;
}

html {
       font-size: 62.5%;
}

body {
       font-family: "Noto Sans JP",
        serif;
        font-style: normal;
        font-weight: 400;
        color:#1F1F1F;
        background-color: #F7EFE2 ;
        line-height: 1.5;
}

img {
       max-width: 100%;
       height: auto;
}

.topic__en {
       color: var(--primary-brown, #C19A5B);
       font-family: Aboreto;
       font-size: 4.4rem;
}

/* テキストアニメーション */
.slide-in {
       overflow: hidden;
       display: inline-block;
}

.slide-in_inner {
       display: inline-block;
}

.leftAnime {
       opacity: 0;
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.9s;
	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.9s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.topic__ja {
       color: var(--primary-black, #1F1F1F);
       font-size: 1.4rem;
       line-height: 2.5; 
       letter-spacing: 0.05em;
       position: relative;
} 

.topic__ja::before {
       position: absolute;
       content: '';
       width: 35px;
       height: 4px;
       background-color: #3B530E;
       top: -1px;
       left: 0;
}

.topic--middle {
      text-align: center;
}

.topic__ja--middle {
       position: relative;
}

.topic__ja--middle::before {
       position: absolute;
       content: '';
       width: 35px;
       height: 4px;
       background-color:#3B530E;
       top: -1px;
       left: 50%;
       transform: translatex(-50%);
}

/* ---------btn-------------------- */
.btn {
       display: block;
       width: 224px;
       height: 65px;
       flex-shrink: 0;
       text-align: center;
       line-height: 65px;
       color: var(--primary-cream, #F7EFE2);
       font-size: 1.6rem;
       letter-spacing: 0.05em;
       border: 1px solid var(--primary-green, #3B530E);
       background-color: var(--primary-green, #3B530E);
       box-shadow: 0px 4px 4px 0px rgba(193, 154, 91, 0.25);
       position: relative;
       margin: 0 auto;
       -webkit-transition: all .3s;
       transition: all .3s;
}

.btn:hover {
  color:var(--primary-green);
  border:1px solid var(--primary-brown, #C19A5B);
  background-color: var(--primary-cream, #F7EFE2);
}

/* common pc表示 */
@media screen and (min-width:769px) {
       .topic__en {
              font-size: 8.4rem;
       }

       .topic__ja {
              font-weight: 500;
       } 

       .topic__ja::before {
              height: 5px;
              background-color:#3B530E;
              top: -6px;
              left: 0;
       }

       .topic__ja--middle::before {
              width: 40px;
              height: 5px;
              top: -6px;
              left: 50%;
       }
}

@media screen and (max-width:375px) {
       .topic__en {
              font-size: 3.8rem;
       }
}/* pc表示 */

/* ============================================================
 header
=============================================================== */
.logo {
       width: 140px;
       height: 12.6px;
}

.header {
       padding:0 var(--contentpadding);
       margin: 0 auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
}

/*===================================
　menu-btn
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
	position: relative;
	cursor: pointer;
       width: 50px;
       height:50px;
       z-index: 101;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 1px;
       background: var(--primary-black);
  	width: 45%;
  }


.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

/*activeクラスが付与されると1・3番目の要素が2番目の要素と同じ位置になり一本線に*/

.openbtn.active span:nth-of-type(1) ,
.openbtn.active span:nth-of-type(3){
    top: 23px;
}

/* ---------nav-------------------- */
.nav {
       background: rgba(247, 239, 226, 0.60);
       width: 100%;
       height: 100vh;
       position: fixed;
       left: 0;
       top: 0;
       z-index: 101;
       transform: translateX(-100%);
       transition: transform 0.4s;
       -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
}

.nav__header {
       padding: 20px var(--contentpadding) ;
       display: flex;
       justify-content: space-between;
}

.navGroup{
       padding: 0 0 0 7%;
}

.nav__list{
       border-left: 3px solid var(--primary-brown);
       padding-left: 17px;
}

.nav__item {
       text-transform: uppercase;
       color: var(--primary-black, #1F1F1F);
       font-size: 1.6rem;
       font-weight: 350;
       line-height: 1.5; 
       letter-spacing: 0.05em;
       margin-top: 25px;
}

.nav__item a {
       position: relative;
}

.nav__item a::after {
       position: absolute;
       left: 0;
       content: '';
       width: 100%;
       height: 1px;
       background: var(--primary-brown);
       bottom: -1px;
       transform: scale(0, 1);
       transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
       transition: transform 0.5s;  /*変形の時間*/
}
       
.nav__item a:hover::after {
       transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
       transform-origin: left top; /*左から右に向かう*/
}

.nav__insta {
       margin-top: 20px;
       padding-left: 12px;
}

/* ---------main_btn-------------------- */
.mainBtn {
       display: flex;
       margin: 37px auto 0;
       justify-content: center;
       position: relative;
       position: fixed;
       bottom: 0;
       right: 0;
       width: 100%;
}

.mainBtn__faq,
.reserva span {
       text-transform: uppercase;
       font-size: 1.6rem;
       font-weight: 300;
       line-height: 1; 
       letter-spacing: 0.05em;
}

.mainBtn__faq,
.reserva {
       display: block;
       width: 50%;
       height: 45px;
}

.mainBtn__faq {
       background-color: #FFF;
       text-align: center;
       line-height: 45px;
}

.reserva {
       background-color: var(--primary-brown);
       color: #FFF;
       text-align: center;
       padding-top: 9px;
}

.reserva p {
       color: #FFF;
       font-size: 1.1rem;
       font-weight: 300;
       line-height: 1;
}

/* nav.active表示  */
.nav.active {
       transform: translateX(0);
}

/* header＿pc表示 */
@media screen and (min-width:1153px) {
       .header__topic {
              padding-left: 4%;
       }
       
       .header  {
              background: rgba(247, 239, 226, 0.60);
              -webkit-backdrop-filter: blur(10px);
	       backdrop-filter: blur(10px);
              width: 100%;
              margin: 0 auto;
              padding: 0;
              align-items: center;
              position: fixed;
              top: 0;
              z-index: 200;
       } 

       .logo {
              width: 217px;
              height: 19px;
              margin-top: 20px;
              margin-left: 8.3%;
       }

       .nav__header {
              display: none;
       }

       .nav {
              background: transparent;
              width: auto;
              height: auto;
              padding: 0;
              position: static;
              transform: translateX(0);
              -webkit-backdrop-filter: none;
              backdrop-filter: none;
       }

       .navGroup {
              display: flex;
              align-items: center;
              padding: 0;
              margin-right: 20px;
              margin-top: 11px;
}
       
       .nav__list {
              display: flex;
              align-items: center;
       }

       .nav__item {
              text-transform: uppercase;
              color: var(--primary-black, #1F1F1F);
              font-size: 1.5rem;
              font-weight: 300;
              line-height: 2.5; 
              margin-top: 0px;
              margin-left: 20px;
       }
       

       .nav__item:first-of-type {
              display: none;
       }

       .nav__item:last-of-type {
              display: none;
       }

       .nav__box {
              display: flex;
       }

       .nav__list {
              border-left: none;
              margin-bottom: -8px; 
       }

       .nav__insta {
              margin-top: 0px;
              padding-left: 20px;
       }

       .mainBtn {
              margin: 0;
              justify-content: center;
              position: static;
              width: initial;
       }

       .mainBtn__faq, 
       .reserva {
              width: 187px;
              height: 49px;
              }

       .mainBtn__faq,
       .reserva span {
              font-size: 1.5rem;
       }

       .mainBtn__faq {
              line-height: 49px;
       }

       .reserva {
              padding-top: 9px;
       }

       .reserva p  {
              margin-top: 2px;
       }
       

       .openbtn {
              display: none;
       }
}
/* pc 表示*/

/* ---------top_btn-------------------- */
.topBtn {
       background-color: #DCC59E;
       padding:16px 0 10px;
       text-align: center;
       width: 100%;
       position: fixed;
       bottom: 45px;
       left: 50%;
       transform: translateX(-50%);
       transition: 0.6s;
       z-index: 100;
}

/*フッターまでスクロールしたら消す*/
.is-hidden {
       visibility: hidden;
       opacity: 0;
     }

.topBtn a {
       color: #000;
       font-size: 1rem;
       font-weight: 300;
       letter-spacing: 0.17em;
       position: relative;
       text-transform: uppercase;
}

.topBtn a::before {
       display: inline-block;
       position: absolute;
       content: '';
       background-image: url(../img/top_btn_icon.svg);
       width: 13px;
       height: 13px;
       width: 100%;
       background-repeat: no-repeat;
       background-position: center;
       background-size: contain;
       top: -10px;
}


/* top_btn＿pc表示 */
@media screen and (min-width:769px) {
       .topBtn {
              display: none !important;
       }
}

/* ============================================================
footer
=============================================================== */
.footer {
       background-color: var(--primary-green);
       padding: 57px var(--contentpadding) 15px;
}

.footer__nav{
       padding:0 33px;
}

.footer__logo {
       width: 140px;
       height: 13px;
       position: relative;
       margin-left: 8.8%;
}

.footer__logo::after {
       display: inline-block;
       content: '';
       position: absolute;
       background-image: url(../img/footer_line.svg);
       background-repeat: no-repeat;
       background-size: contain;
       background-position: bottom;
       width: 138%;
       height: 13px;
       top: 150%;
       left: 0;
       transform: translateX(-2rem);
}

.footer__list {
       display: flex;
       align-items: center;
       justify-content: space-between;
}

.footer__item {
       color: #F7EFE2;
       font-size: 1.5rem;
       font-weight: 300;
       line-height: 1.5; 
       letter-spacing: 0.08em;
       text-transform: uppercase;
       margin-top: 16px;
       width: 50%;
}

.footer__item a {
       position: relative;
}

.footer__item a::after {
       position: absolute;
       left: 0;
       content: '';
       width: 100%;
       height: 1px;
       background: var(--primary-white);
       bottom: -1px;
       transform: scale(0, 1);
       transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
       transition: transform 0.5s;  /*変形の時間*/
}
       
.footer__item a:hover::after {
       transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
       transform-origin: left top; /*左から右に向かう*/
}

.footer__item--last a::after {
       display: none;
}


.footer__group--1 {
       margin-top: 43px;
}

.footer__item--last img {
       width: 27px;
       height: 27px;
       margin-left: 85px;
}

.footerImg{
       margin-top: 30px;
}

.footerImg {
       width: 100%;
}

.copy {
       color: #F7EFE2;
       font-size: 0.8rem;
       font-weight: 400;
       letter-spacing: 0.05em;
       text-align: center;
       margin-top: 16px;
}

.copy small {
       font-size: 0.8rem;
}

/* ---------footer_btn-------------------- */
.footerBtn {
       display: flex;
       justify-content: center;
       position: fixed;
       bottom: 0;
       right: 0;
       z-index: 101;
       width: 100%;
       transition: 0.6s;
       
}

.footer__faq,
.footerReserva span {
       text-transform: uppercase;
       font-size: 1.6rem;
       font-weight: 300;
       line-height: 1; 
       letter-spacing: 0.05em;
}

.footer__faq,
.footerReserva {
       display: block;
       width: 50%;
       height: 45px;
}

.footer__faq {
       background-color: #FFF;
       text-align: center;
       line-height: 45px;
}

.footerReserva {
       background-color: var(--primary-brown);
       color: #FFF;
       text-align: center;
       padding-top: 9px;
}

.footerReserva p {
       color: #FFF;
       font-size: 1.1rem;
       font-weight: 300;
       line-height: 1;
}

/* contact-pc表示 */
@media screen and (min-width:769px) {
       .footer{
              padding: 0;

       }
       
       .footer__box1 {
              padding: 50px 15.4% 0px 22.4%;
       }

       .footer__nav {
          padding: 0; 
          width: 100%;   
       }
       
       .footer__logo {
              width: 259px;
              height: 23px;
              position: relative;
              margin-left:0 ;
       }

       .footer__logo::after {
              height: 23px;
              top: 126%;
              transform: translateX(-5rem);
       }

       .footerBox {
              display: flex;
              margin-top: 48px;
              justify-content: space-between;
       }

       .footer__group--1 {
              margin-top: 0;
       }

       .footer__list {
              display: flex;
              align-items: center;
              justify-content: initial;
       }
       
       .footer__item {
              font-size: 1.6rem;
              font-weight: 300;
              margin-top: 17px;
              width: 50%;
              z-index: 100;
       }


       .footerImg {
              max-width: 323px;
              width: 100%;
       }
       
       .copy {
              font-size: 1rem;
              padding-bottom: 20px;
       }


       .footerBtn {
              display: none;
       }
}/* pc 表示 */