@charset "utf-8";
/* Common */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');

.container{max-width: 1000px; width: calc(100% - 40px); margin: 0 auto;}
.container-1200{max-width: 1200px; width: calc(100% - 40px); margin: 0 auto;}
.main{margin-top:90px;}
.main{background: url('../img/top/bg.jpg');background-repeat: repeat;
  background-size: cover;
  background-position: center;}
@media screen and (max-width: 768px){
.main{margin-top: 60px;}
}
@font-face {
    font-family:"Copperplate" ;
    src: url('../font/copperplate.otf');
}
.title-page{padding: 60px 0 45px;background: linear-gradient(to right, #084663 50%,#002b41 100%);color: #fff;text-align: center;margin: 0 0 100px;}

.title-page .title_en{font-size: min(3.8vw,3.8rem);color: #d4c68b;line-height: 1;font-weight: 500;font-family: "Copperplate";letter-spacing: 0.06em;}
.title-page .title_jp{font-size: min(2.8vw,2.8rem);font-weight: 500;letter-spacing: 0.1em;}

@media screen and (max-width: 768px){
    .title-page{margin: 0 0 0;}
    .title-page .title_en{font-size: 2.6rem;}
    .title-page .title_jp{font-size: 2rem;}
}



.txt-link{color: #0093e2; text-decoration: none; text-underline-offset: 0.2em;}
.txt-link:hover{text-decoration: underline;}
.menu a.disable{opacity: 0.4;pointer-events: none;}
.bold{font-weight: bold;}
.txt-flip{text-align: right; transform: rotateY(180deg);}
.txt-flipcen{text-align: center; transform: rotateY(180deg);}
.photo{position: relative;}
.cap,
[class*="cap-"]{font-size: 1rem; line-height: 1.4;}
.cap-abs_right{position: absolute; bottom: 0.7rem; right: 1.2rem; text-align: right;}
.cap-abs_left{position: absolute; bottom: 0.7rem; left: 0.7rem;}
.cap-right{padding-top: 5px; text-align: right;}
.cap-left{padding-top: 5px;}
.shadow{color: #fff; text-shadow: 0 0 0.1rem rgba(0,0,0,.5), 0 0 0.2rem rgba(0,0,0,.5), 0 0 0.3rem rgba(0,0,0,.5), 0 0 0.4rem rgba(0,0,0,.5), 0 0 0.5rem rgba(0,0,0,.5), 0 0 0.6rem rgba(0,0,0,.5), 0 0 0.7rem rgba(0,0,0,.5), 0 0 0.8rem rgba(0,0,0,.5), 0 0 0.9rem rgba(0,0,0,.5), 0 0 1rem rgba(0,0,0,.5);}
.cap-out{bottom: -20px;}
.clr-w{color: #fff;}

.inblock{display: inline-block;}

/* Header */
.header{position: fixed; top: 0; left: 0; width: 100%; height: 90px; padding: 0 5%; z-index: 999; display: flex; justify-content: space-between; align-items: center; background: url("../img/common/bg-black.png") no-repeat center center/cover;background: #fff;box-shadow: 0 0 4px #ccc;}
h1.logo{line-height: 1; font-size: 1.8rem;font-weight: 500;}
.header-wrap{display: flex; align-items: center;gap: 30px;}
 .btn-icon{display: flex;align-items: center;gap: 20px;}
 .btn-icon a{display: flex;align-items: center;font-size: 1.4rem;gap: 10px;font-weight: 500;position: relative;}
 .header-btn{display: flex;gap: 2px;}

 .header-btn a{font-size: 1.4rem;font-weight: 500;color: #fff;width: 130px;height: 43px;text-align: center;align-content: center;}
 .header-btn .header-btn01{background: linear-gradient(to right ,#7c6e61,#53493f);}
 .header-btn .header-btn02{background: linear-gradient(to right ,#084663,#002b41);}
 .header-btn .header-btn03{background: linear-gradient(to right ,#084663,#002b41);}

 .header-btn .header-btn01:hover{background:linear-gradient(to right,#53493f,#7c6e61);}
 .header-btn .header-btn02:hover{background:linear-gradient(to right ,#002b41,#084663);;}
 .header-btn .header-btn03:hover{background:linear-gradient(to right ,#002b41,#084663);}

 .btn-icon a::after {
  content: "";
  background: #d8cfc1;
  width: 100%;
  height: 3px;
  display: block;
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: scaleX(0);
  transition: .3s;
}
.btn-icon-menu{justify-content: center;}
 .btn-icon a:hover::after{transform: scale(1);}
 .coming{pointer-events: none;opacity: 0.5;}
 .btn-icon-nav{margin-right: 10px;}
@media screen and (max-width: 1600px){
    .header{padding: 0 3%;}
}
@media screen and (max-width: 768px){
    .header{height: 60px; padding: 0 20px;}    
    h1.logo img{width: 260px;}
    .header-wrap .header-btn{display: none !important;}
    .btn-icon-nav{display: none;}
}

.btn-menu{width: 30px; height: 15px; position: relative; cursor: pointer; z-index: 100;top: -5px;}
.btn-menu span{width: 100%; height: 1px; background: #231815; display: block; left: 0; position: absolute;}
.btn-menu span:nth-of-type(1){top: 0;}
.btn-menu span:nth-of-type(2){top: 7px;}
.btn-menu span:nth-of-type(3){top: 14px;}
.btn-menu p{font-size: 1.1rem;position: absolute;font-weight: 500;bottom: -18px;}
.header.is-open .btn-menu span:nth-of-type(1){top: 7px; transform: rotate(45deg);}
.header.is-open .btn-menu span:nth-of-type(2){opacity: 0;}
.header.is-open .btn-menu span:nth-of-type(3){top: 7px; transform: rotate(-45deg);}

.menu{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99; display: flex; justify-content: center; align-items: center;
background: #fff; overflow: auto;
opacity: 0; visibility: hidden; pointer-events: none; transition: .3s;}
.header.is-open .menu{opacity: 1; visibility: visible; pointer-events: auto;}
.menu-wrap{padding: 80px 20px;}
.menu-list{padding: 0 0 30px;}
.menu-list li{margin: 0 0 20px; text-align: center;}
.menu-list li:last-child {margin-bottom: 0;}
.menu-list a{font-size: 2rem;  line-height: 1.8; letter-spacing: 0.1em; position: relative; display: inline-block;font-weight: 500;}
.menu-list a::after{content: ""; background: #d8cfc1; width: 50px; height: 3px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; transform: scaleX(0); transition: .3s;}
.menu-list a.is-active::after,
.menu-list a:hover::after{transform: scale(1);}
.menu .header-btn{justify-content: center; margin: 40px 0 0; width: 100%;}
.menu-list-2 {
    width: 100%;
    max-width: 380px;
    margin: 0 auto 50px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.menu-list-2 a{font-size: 1.5rem;  line-height: 1.8; letter-spacing: 0.1em; position: relative; display: inline-block;}
.menu-list-2 a::after{content: ""; background: #d8cfc1; width: 100%; max-width: 50px; height: 3px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; transform: scaleX(0); transition: .3s;}
.menu-list-2 a.is-active::after,
.menu-list-2 a:hover::after{transform: scale(1);}
@media screen and (max-width: 1120px){
    .header-btn-nav{display: none;}
}
@media screen and (max-width: 768px) and (orientation: landscape){
    .menu{align-items: flex-start;}
    .menu-wrap{padding: 70px 20px 50px;}
}
.menu .header-btn-menu{gap: 10px;}
  .menu .header-btn-menu a{width: 180px;}
@media screen and (max-width: 768px){
    .menu-list a{font-size: 2rem;}
    .menu-list a::after{width: 40px; height: 2px;}
    .menu .header-btn-menu,.btn-icon-menu{flex-direction: column;}
    .menu .header-btn-menu{gap: 10px;}
      .menu .header-btn-menu a{width: 100%;}
}



/* Bottom Cap */
.bottom-cap{padding:60px 0; font-size: 1.2rem; line-height: 1.5;text-align: left;}

/* Footer */
.footer{text-align: center; padding: 0 0 30px;}

.footer-btn{display: flex; justify-content: center; padding: 40px 0; max-width:940px;margin: 0 auto;}
.footer-btn a{width: 318px; height: 78px; flex-wrap: wrap; display: flex; justify-content: center; align-items: center; align-content: center; color: #fff; font-size: 2.5rem; line-height: 1.2; padding: 0 18px 7px 0; position: relative; margin: 0 10px; transition: .3s;}
.footer-btn a:last-of-type{margin-right: 0;}
/* .footer-btn a::after{content: ""; width: 262px; height: 22px; background: url("../img/common/arrow-btn.svg") no-repeat bottom center/100% auto; display: block; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 20px; transition: .3s;} */
.footer-btn a:hover::after{right: -10px;}

.footer-btn a.soon{font-size: 1.2rem; padding: 0; pointer-events: none;}
.footer-btn a.soon::after{display: none;}
.footer-btn a.soon span{font-size: 2.3rem; letter-spacing: 0.18em; margin: 0 0 0.1em; width: 100%;}

.btn-footer  p{font-size: 2rem;text-align: center;font-weight: 500;}
.btn-footer ul{display: flex;max-width: 580px;margin: 20px auto 40px;justify-content: space-between;}
.btn-footer ul li{width: 49%;}
.btn-footer ul li a{display: block;padding:10px 0;font-size: 1.8rem;text-align: center;border: 1px solid #231815;position: relative;}
.btn-footer ul li a::before{background: linear-gradient(to right ,#084663,#002b41);width: 0%;height: 100%;top: 0;left: 0;content: "";position: absolute;z-index: -1;transition: all 0.4s;}
.btn-footer ul li a::after{content: "";border: solid #232323;border-top-width: medium;border-right-width: medium;border-bottom-width: medium;border-left-width: medium;border-top-width: medium;border-right-width: medium;border-bottom-width: medium;border-left-width: medium;border-width: 0 1px 1px 0;display: inline-block;padding: 4px;transform: translateY(-50%);-webkit-transform: rotate(-45deg);position: absolute;transition: all 0.4s;top: 23px;right: 20px;}
.btn-footer ul li a:hover::before{width: 100%;}
.btn-footer ul li a:hover::after{ border-color: #fff;}
.btn-footer ul li a:hover{color: #fff;}
.footer-btn a.btn-reser{background: linear-gradient(45deg, #6e6c61, #46412f);display: none;}

.footer-btn a.btn-reser:hover{background: linear-gradient(45deg, #46412f, #46412f);}

.footer-btn  a{width: 48%; height: 78px; flex-wrap: wrap; display: flex; justify-content: center;flex-direction: column; align-items: center; align-content: center; color: #fff; font-size: 2.6rem;letter-spacing: 0.6em; line-height: 1.4; padding: 0; position: relative; margin: 0; transition: .3s;border-radius: 6px;}
.footer-btn  a:last-of-type{margin-right: 0;}
.footer-btn  a::after{content: ""; width: 24px; height:18px; background: url("../img/common/arrow02.svg") no-repeat bottom center/100% auto; display: block; position: absolute; right: 20px;top: 50%; transition: .3s;transform: translateY(-50%);}
.footer-btn  a:hover::after{right: 10px;}
.footer-btn  a .small-txt{font-size: 1.4rem;letter-spacing: 0.05em;}
.footer-btn  a.soon{font-size: 1.2rem; padding: 0; pointer-events: none;}
.footer-btn  a.soon::after{display: none;}
.footer-btn  a.soon span{font-size: 2.3rem; letter-spacing: 0.18em; width: 100%;}

.footer-btn  a.btn-entry{background: linear-gradient(45deg, #b97c7e, #a62b43);}
.footer-btn  a.btn-reser{background: linear-gradient(45deg, #6e6c61, #46412f);}
.footer-btn  a.btn-entry:hover{background: linear-gradient(45deg, #a62b43, #a62b43);}
.footer-btn  a.btn-reser:hover{background: linear-gradient(45deg, #46412f, #46412f);}






.footer-contact .tit{font-size: 1.5rem;font-weight: 500;}
.footer-contact .tel{font-size: 4rem; line-height: 1; margin-bottom: 5px;letter-spacing: 0.1em;}
.footer-contact .tel span{font-family: "Noto Serif JP", serif;}
.footer-contact .tel img{margin-right: 5px;}
.footer-contact .time{font-size: 1.3rem;}
.footer-contact .cap-note{text-align: center;font-size: 1.2rem;line-height: 1.5;margin: 10px 0 0;}
.list-brand:hover{opacity: 0.8;}
.list-brand{padding: 30px 0 0;margin: 30px 0 50px;border-top: 1px solid #231815;display: flex;justify-content: center;align-items: flex-end;gap: 10px;}
.list-brand p{font-size: 1.2rem;padding: 0 0 1px;text-align: right;font-weight: 500;}

.list-brand img:last-child{margin-left: 15px;}
.footer-logo{padding: 30px 0; line-height: 1;}
.copyright{font-size: 1rem; line-height: 1;}
.header-btn-footer{display: none;}
@media screen and (max-width: 768px){
    .header-btn-footer{display: flex;gap: 0;position: fixed;bottom: 0;left: 0;width: 100%;justify-content: space-between;background: #fff;z-index: 9;}
    .header-btn-footer a{width: 33.25%;}
    .footer-btn a.soon{font-size: 0.8rem;}
    .footer-btn a.soon span{font-size: 1.5rem;}
    .footer-btn a{width: 360px;font-size: 2.2rem;height: 68px;}
    .footer-contact .tel{font-size: 3rem;margin: 10px 0 0;}
    .footer-contact .time{font-size: 1rem;}  
    .list-brand{flex-wrap: wrap;gap: 20px;row-gap: 5px;}
    .list-brand img:last-child{margin: 0;width: 81px;}
     .list-brand img{width: 206px;}
     .list-brand p{width: 100%;text-align: center}
    .btn-footer ul{flex-direction: column;align-items: center;row-gap: 10px;max-width: 480px;margin: 20px auto 30px;width: calc(100% - 40px);}  
    .btn-footer ul li{width: 100%;}
    .btn-footer ul li a{font-size: 1.6rem;}
      .bottom-cap{padding: 40px 0;}
}
@media screen and (max-width: 600px){
    .header-btn-footer a{width: 33.2%;}
}
.bnr-footer{max-width: 1200px;width: calc(100% - 40px);margin: 0 auto 30px;}
.bnr-footer a:hover{opacity: 0.8;}
/* Pagetop */
#pagetop{display: flex;justify-content: center;align-items: center;width: 50px; height: 50px; line-height: 1; background: #fff; color: #fff; text-align: center;border-radius: 100%; position: fixed; bottom: 10px; right: 10px; z-index: 100; cursor: pointer; opacity: 0; pointer-events: none; transition: .4s;box-shadow: 0px 0px 4px  rgba(0, 0, 0, 0.2);}
#pagetop.is-show{opacity: 1; pointer-events: auto;}
@media screen and (max-width: 768px){
    #pagetop{bottom: 62px;}
}
/* Animate */
@media screen{
    .inview{}
    .fade-in{opacity: 0; transition: 1.5s;}
    .fade-in.is-view{opacity: 1;}

    .fade-up{opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); filter: blur(5px) brightness(105%); transition: opacity 1s ease, transform 1s ease, filter 1s ease;}
    .fade-up.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); filter: blur(0) brightness(100%);}

    .fade-right{opacity: 0; transform: translateX(-30px); transition: 1s;}
    .fade-right.is-view{opacity: 1; transform: translateX(0);}
    
    .roll-left{position: relative; overflow: hidden;}
    .roll-left img{opacity: 0; transition: opacity 1s ease .5s;}
    .roll-left:after{content: ''; position: absolute; top: 0; bottom: 0; background: #e3dfd6;}
    .roll-left.is-view img{opacity: 1;}
    .roll-left.is-view:after{animation: rollLeft 1s ease;}

    .zoom-out{opacity: 0; overflow: hidden; transform: scale(1.2); -webkit-transform: scale(1.2); transition: opacity 1s ease, transform 1s ease;}
    .zoom-out.is-view{opacity: 1; transform: scale(1); -webkit-transform: scale(1);}
    
    .zoom-in{opacity: 0; overflow: hidden; transform: scale(0.7); -webkit-transform: scale(0.7); transition: opacity 1s ease, transform 1s ease;}
    .zoom-in.is-view{opacity: 1; transform: scale(1); -webkit-transform: scale(1);}
}

@keyframes rollLeft{
    0%{left: 0; right: 100%;}
    50%{left: 0; right: 0;}
    100%{left: 100%; right: 0;}
}

@-webkit-keyframes rollLeft{
    0%{left: 0; right: 100%;}
    50%{left: 0; right: 0;}
    100%{left: 100%; right: 0;}
}

@media (min-width: 768px){
    .delay1{transition-delay: .3s;}
    .delay2{transition-delay: .6s;}
    .delay3{transition-delay: .9s;}
    .delay4{transition-delay: 1.2s;}
}