@charset "utf-8";
/* Common */
.txt-en01{ font-family: "EB Garamond", serif;}
.txt-en02{ font-family: "Lora", serif;}

.container{max-width: 1200px; width: calc(100% - 40px); margin: 0 auto;}
.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);}

.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;}
.page-title{font-size: 5rem;letter-spacing: 0.15em;font-weight: normal;}
.page-title-sub{font-size: 2.5rem;letter-spacing: 0.15em;}
.clr-w{color: #fff;}
.m-tit01{font-size: 3rem;letter-spacing: 0.15em;text-align: center;margin-bottom: 40px;font-weight: normal;}
.m-tit02{font-size: 2.2rem;letter-spacing: 0.15em;}
.m-intro{font-size: 1.6rem;line-height: 2;text-align: center;margin-bottom: 70px;font-weight: normal;letter-spacing: 0.05em;}
.inblock{display: inline-block;}

@media screen and (max-width: 768px){
    .m-tit01{font-size: 2.3rem;margin-bottom: 20px;}
    .m-tit02{font-size: 1.8rem;}
    .m-intro{font-size: 1.4rem;text-align: left;margin-bottom: 35px;}
    .page-title{font-size: min(10vw,5rem);}
    .page-title-sub{font-size: min(5vw,2rem);}
}

/* Header */
.header{position: fixed; top: 0; left: 0; width: 100%; height: 80px; padding: 0 30px; z-index: 999; display: flex; justify-content: space-between; align-items: center; background: url("../img/common/bg-black.png") no-repeat center center/cover;}
h1.logo{line-height: 1; margin: 0 20px 0 0;}

.header-wrap{display: flex; align-items: center;}
.header-btn{display: flex; margin: 0 20px 0 0;}
.header-btn a{width: 165px; height: 40px; flex-wrap: wrap; display: flex; justify-content: center; align-items: center; align-content: center; color: #fff; font-size: 1.4rem; line-height: 1.2; padding: 0 15px 7px 0; position: relative; margin: 0 10px 0 0; transition: .3s; text-align: center;}
.header-btn a:last-of-type{margin-right: 0;}
.header-btn a::after{content: ""; width: 136px; height: 12px; 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: 10px; transition: .3s;}
.header-btn a:hover::after{right: -10px;}

.header-btn a.soon{font-size: 0.8rem; padding: 0; pointer-events: none;}
.header-btn a.soon::after{display: none;}
.header-btn a.soon span{font-size: 1.5rem; letter-spacing: 0.18em; margin: 0 0 0.1em; width: 100%;}

.header-btn a.btn-entry{background: linear-gradient(45deg, #b97c7e, #a62b43);}
.header-btn a.btn-reser{background: linear-gradient(45deg, #6e6c61, #46412f);display: none;}
.header-btn a.btn-entry:hover{background: linear-gradient(45deg, #a62b43, #a62b43);}
.header-btn a.btn-reser:hover{background: linear-gradient(45deg, #46412f, #46412f);}



.header-btn-menu  a.btn-entry{width: 100%; height: 68px; flex-wrap: wrap; display: flex; justify-content: center;flex-direction: column; align-items: center; align-content: center; color: #fff; font-size: 2.2rem;letter-spacing: 0.4em; line-height: 1.5; padding: 0; position: relative; margin: 0; transition: .3s;border-radius: 6px;}
.header-btn-menu  a.btn-entry:last-of-type{margin-right: 0;}
.header-btn-menu  a.btn-entry::after{content: "";margin: 0; left: unset;width: 20px; height:15px; 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%);}
.header-btn-menu  a.btn-entry:hover::after{right: 10px;}
.header-btn-menu  a.btn-entry .small-txt{font-size: 1.3rem;letter-spacing: 0.05em;}

@media screen and (max-width: 768px){
    .header{height: 60px; padding: 0 20px;}    
    h1.logo img{width: 260px;}
    .header-wrap .header-btn{display: none !important;}
    .header-btn-menu  a.btn-entry{font-size: 2rem;height: 58px;}
}

.btn-menu{width: 30px; height: 15px; position: relative; cursor: pointer; z-index: 100;}
.btn-menu span{width: 100%; height: 1px; background: #fff; 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;}

.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: linear-gradient(90deg, rgba(216, 207, 193, 1) 0%, rgba(255, 255, 255,1) 50%, rgba(216, 207, 193, 1) 100%); 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: 2.2rem; font-family: "EB Garamond", serif; line-height: 1.8; letter-spacing: 0.1em; position: relative; display: inline-block;}
.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: 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; font-family: "EB Garamond", serif; 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: 768px) and (orientation: landscape){
    .menu{align-items: flex-start;}
    .menu-wrap{padding: 70px 20px 50px;}
}

@media screen and (max-width: 768px){
    .menu-list a{font-size: 2rem;}
    .menu-list a::after{width: 40px; height: 2px;}
}

/* Main */
.main{padding: 80px 0 120px; background: url("../img/common/bg.jpg") repeat-y top center/100% auto;}
.lowerpage .main{padding: 0 0 120px;}
.lowerpage .btn-reser{display: none;}
.lowerpage .bnr-footer{display: none;}
@media screen and (min-width: 1200px){
    .main{background-attachment: fixed;}
}

@media screen and (max-width: 768px){    
    .main{padding: 60px 0;}
    .lowerpage .main{padding: 0 0 60px;}
}

/* MV */
.mv{position: relative;height: 100vh; margin: 0 0 60px;}
.mv .mv_txt{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;color: #fff;width: 100%;z-index: 2;}
.mv .mv_img img{width: 100%;height: 100%;object-fit: cover;object-position: top center;}
.mv::after{position: absolute;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);content: '';top: 0;left: 0;}

/* Hero */
.hero{text-align: center;padding: 60px 0;font-weight: 400; background: url("../img/common/mainCopy_bg.jpg") no-repeat top left/cover; margin: 0 0 60px;}

@media screen and (max-width: 768px){ 
    .hero{padding: 40px 0;}
    .mv {height: auto; overflow: hidden;}
}

/* Bottom Cap */
.bottom-cap{padding: 40px 0 0 0; font-size: 1rem; line-height: 1.5;}

/* 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%;}


.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{background: url("../img/common/bg-black.png") repeat-y top center/100% auto; padding: 30px 20px; color: #fff;}
.footer-contact .tit{font-size: 1.6rem;}
.footer-contact .tel{font-size: 5rem; font-family: "EB Garamond", serif; line-height: 1; margin-bottom: 5px;}
.footer-contact .tel span{font-family: "Noto Serif JP", serif;}
.footer-contact .time{font-size: 1.3rem;}

.footer-logo{padding: 30px 0; line-height: 1;}
.copyright{font-size: 1rem; line-height: 1;}

@media screen and (max-width: 768px){
    .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 .tit{font-size: 1.2rem;}
    .footer-contact .tel{font-size: 3.8rem;}
    .footer-contact .time{font-size: 1rem;}    
}
.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;}

/* 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;}
}