@charset "utf-8";
/* Common */
.container{max-width: 1000px; width: calc(100% - 50px); margin: 0 auto;}

.ib{display: inline-block;}
.protect{user-select: none; -webkit-user-drag: none; -webkit-user-select: none;}

.ex-link{text-decoration: underline solid #A5A5A5 1px; text-underline-offset: 0.4em;}
.ex-link::after{content: ""; width: 19px; height: 19px; display: inline-block; margin: 0 0 0 0.611em; position: relative; top: 0.167em; background: #A5A5A5;
mask: url("../img/common/ic-link.svg") no-repeat top left/100% 100%; -webkit-mask: url("../img/common/ic-link.svg") no-repeat top left/100% 100%;}
.ex-link:hover{color: #CAA73A; text-decoration: none;}
.ex-link:hover::after{background: #CAA73A;}

.txt-link{text-decoration: underline; text-underline-offset: 0.2em;}
.txt-link:hover{text-decoration: none;}
.txt-link[data-color="green"]{color: #00B1A0;}


.btn-ex{width: 200px; height: 45px; background: #CAA73A; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 1.6rem; line-height: 1; letter-spacing: 0.05em; font-weight: 600; font-family: "Noto Serif JP", serif; border-radius: 23px; border: 1px solid #CAA73A; transition: .3s; position: relative;}
.btn-ex::after{content: ''; width: 17px; height: 17px; background: #fff; margin-left: 0.3em;
mask: url("../img/common/ic-exlink.svg") no-repeat top left/100% 100%;
-webkit-mask: url("../img/common/ic-exlink.svg") no-repeat top left/100% 100%;}

.btn-ex:hover{background: #fff; color: #CAA73A; box-shadow: 0 4px 8px 0 rgba(202, 167, 58, 0.2);}
.btn-ex:hover::after{background: #CAA73A;}

.btn-ex.is-soon{background: #caa63a50; pointer-events: none; border-color: transparent;}
.btn-ex.is-soon::before{content: 'Coming Soon'; width: 7em; font-size: 1rem; line-height: 1; letter-spacing: 0.05em; font-family: "Cormorant", serif; color: #484848; text-align: center; position: absolute; place-self: center; inset: 0;}

.m-btn{width: 200px;height: 45px;margin: 0 auto;background: #CAA73A;color: #fff;border-radius: 23px;font-size: 1.6rem;line-height: 1;font-weight: 600;letter-spacing: 0.8px;font-family: "Noto Serif JP", serif;display: flex;justify-content: center;align-items: center;position: relative;border: 1px solid #CAA73A;transition: .3s;}
.m-btn::after {content: "";border: solid #fff;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;top: 17px;right: 20px;}
.m-btn:hover {background: #fff;color: #CAA73A;box-shadow: 0 4px 8px 0 rgba(202, 167, 58, 0.2);}
.m-btn:hover::after {border: solid #CAA73A;border-top-width: medium;border-right-width: medium;border-bottom-width: medium;border-left-width: medium;border-width: 0 1px 1px 0;}
.m-btn.is-soon{background: #caa63a50; pointer-events: none; border-color: transparent;}
.m-btn.is-soon::before{content: 'Coming Soon'; width: 7em; font-size: 1rem; line-height: 1; letter-spacing: 0.05em; font-family: "Cormorant", serif; color: #484848; text-align: center; position: absolute; place-self: center; inset: 0;}

.cap{font-size: 1.2rem; line-height: 1.83; letter-spacing: 0.05em;}
.cap li{text-indent: -1em; margin-left: 1em;}

.note{font-size: 1.4rem; line-height: 2;}
.bold{font-weight: bold;}

@media screen and (max-width: 768px){
    .note {font-size: 1.2rem;}
}

@media screen and (max-width: 1199px){
    body.lowerpage{padding-top: 45px;}    
}

.anchor{position: relative;}
.anchor > div{position: absolute; top: -133px;}

@media screen and (max-width: 1900px){
  .anchor > div{top: -7vw;}
}

@media screen and (max-width: 768px){
    .anchor > div{top: -70px;}
}
/* Header */
@media screen and (min-width: 1200px){
    .header{position: sticky; top: 0; left: 0; width: 100%; height: 60px; background: #fff; box-shadow: 0 4px 8px 0 rgba(202, 167, 58, 0.15); padding: 0 min(3vw,50px); display: flex; justify-content: space-between; align-items: center; z-index: 100;}
    h1.logo a{display: block; line-height: 1;}

    .header-inner{display: flex; align-items: center;}
    .logo-label{display: none;}

    .menu{display: flex;}
    .menu li{margin-right: 1.3em; font-size: min(1.14vw,1.6rem);}
    .menu li:last-of-type{margin-right: 57px;}
    .menu a{display: block; font-weight: 600; color: #00B1A0; line-height: 1; padding: 7px 0; font-family: "Noto Serif JP", serif; position: relative;}
    .menu a::after{content: ''; width: 0; height: 1px; background: #00B1A0; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: width .3s;}
    .menu a:hover::after,
    .menu a.is-active::after{width: 100%;}

    .menu a.is-active{pointer-events: none;}

    .menu a.is-soon{color: #AFAFAF; pointer-events: none;}
    .menu a.is-soon::before{content: 'Coming Soon'; width: 7em; font-size: 1rem; line-height: 1; letter-spacing: 0.05em; font-family: "Cormorant", serif; position: absolute; bottom: -5px; left: 0;}

    .header-sns{display: flex; align-items: center;}
    .language{width: 50px; height: 30px; text-align: center; display: flex; justify-content: center; align-items: center; border-radius: 4px; border: 1px solid #CAA73A; font-size: 1.6rem; font-weight: 600; line-height: 1; color: #CAA73A; font-family: "Noto Serif JP", serif; margin-right: 20px;}
    .language:hover{background: #CAA73A; color: #fff; opacity: 1 !important;}
    .header-sns a:hover{opacity: .5;}
}

@media screen and (max-width: 1199px){
    .header{position: fixed; top: 0; left: 0; width: 100%; height: 45px; background: #fff; box-shadow: 0 4px 8px 0 rgba(202, 167, 58, 0.15); display: flex; align-items: center; padding: 0 0 0 16px; z-index: 100;}
    body.menu-open .header{height: 100%; transition: none !important;}
	.header-wrap{background: #f4f6f2; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: flex; justify-content: center; align-items: flex-start; padding: 50px 0; overflow-y: scroll; opacity: 0; visibility: hidden; pointer-events: none; transition: .3s;}
    body.menu-open .header-wrap{opacity: 1; visibility: visible; pointer-events: all;}    

    h1.logo{width: 194px;}    

    .header-inner{max-width: 375px; width: 100%; padding-left: 140px; position: relative;}

    .logo-label{position: absolute; top: 0; left: 22px;}

    .menu{opacity: 0; transform: translateY(30px); transition: .8s ease .3s;}
    body.menu-open .menu{opacity: 1; transform: translateY(0);}

    .menu li{margin: 0 0 12px;}
    .menu li:last-of-type{margin: 0 0 30px;}
    .menu a{display: inline-block; font-size: 1.8rem; letter-spacing: 0.05em; font-weight: 600; color: #00B1A0; line-height: 1; padding: 7px 0; font-family: "Noto Serif JP", serif; position: relative;}    
    .menu a.is-active::after{content: ''; width: 100%; height: 1px; background: #00B1A0; display: block; position: absolute; bottom: 0; left: 0;}

    .menu a.is-soon{color: #AFAFAF; pointer-events: none; padding: 7px 0 18px;}
    .menu a.is-soon::before{content: 'Coming Soon'; width: 7em; font-size: 1.2rem; line-height: 1; letter-spacing: 0.05em; font-family: "Cormorant", serif; position: absolute; bottom: 1px; left: 0;}

    .header-sns{display: flex; align-items: center; opacity: 0; transform: translateY(30px); transition: .8s ease .5s;}
    body.menu-open .header-sns{opacity: 1; transform: translateY(0);}

    .language{width: 60px; height: 36px; text-align: center; display: flex; justify-content: center; align-items: center; border-radius: 4px; border: 1px solid #CAA73A; background: #fff; font-size: 1.8rem; font-weight: 600; line-height: 1; color: #CAA73A; font-family: "Noto Serif JP", serif; margin-right: 30px;}
    
    body.homepage .header{opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-45px); transition: opacity .5s, transform .5s;}
    body.homepage.is-scroll .header{opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0);}
}

/* Button Menu */
@media screen and (min-width: 1200px){
	.btn-menu{display: none;}
}

@media screen and (max-width: 1199px){
	.btn-menu{width: 50px; height: 45px; position: absolute; top: 0; right: 0; z-index: 101; background: #CAA73A; cursor: pointer;}
    .btn-menu span{display: block; position: absolute; left: 16px; width: 18px; height: 1px; background: #fff; transition: .3s;}
    .btn-menu span:nth-of-type(1){top: 13px;}
    .btn-menu span:nth-of-type(2){top: 22px;}
    .btn-menu span:nth-of-type(3){top: 31px;}

    body.menu-open .btn-menu span:nth-of-type(1){top: 22px; transform: rotate(45deg);}
    body.menu-open .btn-menu span:nth-of-type(2){display: none;}
    body.menu-open .btn-menu span:nth-of-type(3){top: 22px; transform: rotate(-45deg);}
}

/* Main */
body.lowerpage .main{padding-bottom: 80px;}

@media screen and (max-width: 768px){
    body.lowerpage .main{padding-bottom: 50px;}
}

/* Hero */
.hero{width: 100%; height: 190px; border-bottom: 6px solid #CAA73A; text-align: center; display: flex; justify-content: center; align-items: center; align-content: center; background: url("../img/common/hero-bg.webp"); margin: 0 0 70px;}
.hero-tit_jp{font-size: 3.4rem; line-height: 1; letter-spacing: 0.05em; font-weight: 500; font-family: "Noto Serif JP", serif; color: #00B1A0; overflow: hidden; display: block;}
.hero-tit_jp big{font-size: 100%; transition: .8s ease .4s; transform: translateY(100%); display: block;}
.hero.is-view .hero-tit_jp big{transform: translateY(0);}
.hero-tit_en{color: #CAA73A; font-family: "Cormorant", serif; font-size: 2.2rem; font-weight: 600; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-top: 16px;}

@media screen and (max-width: 768px){
    .hero{height: 140px; margin: 0 0 40px;}
    .hero-tit_jp{font-size: 3rem;}
    .hero-tit_en{font-size: 1.8rem; margin-top: 10px;}
}

/* Button More */
.btn-more{width: 230px; height: 45px; margin: 0 auto; background: #CAA73A; color: #fff; border-radius: 23px; font-size: 2rem; line-height: 1; font-weight: 600; letter-spacing: 0.15em; font-family: "Cormorant", serif; display: flex; justify-content: center; align-items: center; position: relative; border: 1px solid #CAA73A; transition: .3s;}
.btn-more::after{content: ""; border: solid #fff; border-width: 0 1px 1px 0; display: inline-block; padding: 4px; transform: translateY(-50%); -webkit-transform: rotate(-45deg); position: absolute; top: 17px; right: 20px;}
.btn-more:hover{background: #fff; color: #CAA73A; box-shadow: 0 4px 8px 0 rgba(202, 167, 58, 0.2);}
.btn-more:hover::after{border: solid #CAA73A; border-width: 0 1px 1px 0;}

/* Contact */
.contact{background: #F4F6F2; padding: 73px 25px 0; font-family: "Noto Serif JP", serif;}
.contact-wrap{width: 100%; max-width: 1000px; margin: 0 auto; border: 1px solid #CAA73A; background: #FFF;}

.contact-head{line-height: 1; font-weight: 600; padding: 2.5rem min(6vw,6.5rem); position: relative; cursor: pointer; transition: .3s; display: flex; justify-content;flex-start; align-items: center; gap:0 1em; flex-wrap:wrap; }
.contact-head i{width: 3rem; height: 3rem; margin-top: -1.5rem; display: block; position: absolute; top: 50%; right: 2.5rem; transition: .3s; border-radius: 25px; background: #CAA73A;}
.contact-head i:before,
.contact-head i:after{content: ""; background: #fff; display: block; position: absolute;}
.contact-head i:before{top: 8px; left: 14px; width: 2px; height: 14px;}
.contact-head i:after{top: 14px; left: 8px; width: 14px; height: 2px;}
.contact-head .cap{ display: inline-block;text-indent: -1em; margin-left: 1em;}

.contact-head:hover{color: #CAA73A;}
.contact.is-open .contact-head i:before{display: none;}

.contact-outer{display: grid; grid-template-rows: 0fr; overflow: hidden; transition: 0.3s;}
.contact.is-open .contact-outer{grid-template-rows: 1fr; padding: 1.5rem 0 4rem;}

.contact-inner{min-height: 0; padding: 0 min(6vw,6.5rem); letter-spacing: 0.05em; font-weight: 500; font-size: 1.4rem; line-height: 1.85; letter-spacing: 0.05em;}
.contact a{text-decoration: underline; text-underline-offset: 0.25em;}
.contact a:hover{color: #CAA73A;}

@media screen and (max-width: 768px){
    .contact{padding: 47px 25px 0;}
    .contact-head{font-size: 1.6rem; line-height: 1.56; letter-spacing: 0.1em; padding: 2rem 6rem 2rem 2rem;}
    .contact-head i{right: 3rem;}
    
    .contact.is-open .contact-outer{padding: 0 0 2rem;}
    .contact-inner{padding: 0 3rem 0 2rem;}
    .contact-inner p:not(:last-of-type){margin: 0 0 1.5rem;} 
    .contact-inner p:nth-of-type(2){margin-right: -10px;}
    .contact-head .cap{ font-size:1rem; line-height:1.4;}
}

/* Floating Banner */
@media screen and (min-width: 769px){
    .fbnr{position: fixed; bottom: 90px; right: 0; z-index: 90;}
    .fbnr a{width: 78px; height: 110px; border-radius: 8px 0 0 8px; background: #00B1A0; color: #fff; border-right: 6px solid #CAA73A; text-align: center; font-size: 1.4rem; line-height: 1.3; font-family: "Noto Serif JP", serif; font-weight: bold; letter-spacing: 0.05em; display: flex; align-content: center; justify-content: center; align-items: center; flex-wrap: wrap; transition: .3s;}
    .fbnr figure{margin: 0 0 5px; width: 100%;}
    .fbnr p{width: 100%;}
    .fbnr span{font-family: "Cormorant", serif; letter-spacing: 0.1em; font-weight: 600; line-height: 1.1; display: block;}
    .fbnr a:hover{background: #CAA73A; border-right: 6px solid #00B1A0;}

    .fbnr{opacity: 0; transform: translateX(100%); visibility: hidden; pointer-events: none; transition: .5s;}
    .fbnr.is-show{opacity: 1; transform: translateX(0); visibility: visible; pointer-events: all;}
}

@media screen and (max-width: 768px){
    .fbnr{position: fixed; bottom: 110px; right: 0; z-index: 90;}
    .fbnr a{width: 50px; height: 135px; border-radius: 25px 25px 0 0; background: #00B1A0; color: #fff; border-bottom: 6px solid #CAA73A; font-size: 1.4rem; line-height: 1.3; font-family: "Noto Serif JP", serif; font-weight: bold; letter-spacing: 0.05em; display: block; padding: 3px 0 0 0;}
    .fbnr figure{width: 30px; height: 30px; margin: 0 auto 3px; display: block; transform: rotate(10deg);}
    .fbnr p{-ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; align-items: flex-start; flex-wrap: wrap; padding-left: 5px;}
    .fbnr span{writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; letter-spacing: 0.15em;}

    .fbnr{opacity: 0; transform: translateY(30px); visibility: hidden; pointer-events: none; transition: .3s ease .3s;}
    .fbnr.is-show{opacity: 1; transform: translateY(0); visibility: visible; pointer-events: all;}
}

/* Pagetop */
#pagetop{position: fixed; z-index: 90; bottom: 20px; right: 15px; width: 50px; height: 50px; border-radius: 100%; background: #BB961F; color: #fff; font-size: 1.6rem; line-height: 1; letter-spacing: 0.1em; font-family: "Cormorant", serif; text-align: center; font-weight: 600; padding: 8px 0 0 0; cursor: pointer;
opacity: 0; transform: translateY(30px); pointer-events: none; visibility: hidden; transition: .3s;}
#pagetop::before{content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; margin: 0 auto 7px; display: block;}
#pagetop.is-show{opacity: 1; pointer-events: all; visibility: visible; transform: translateY(0);}
#pagetop:hover{background: #00B1A0;}

@media screen and (max-width: 768px){
    #pagetop{bottom: 50px; right: 0;}
}

/* Footer */
.footer{background: #F4F6F2; text-align: center; padding: 36px 0;}
.copyright{font-size: 1.2rem; line-height: 1; font-weight: 400; letter-spacing: 0.05em; font-family: "Noto Serif JP", serif;}

@media screen and (max-width: 768px){
    .footer{padding: 30px 0;}
	.copyright{font-size: 1rem;}
}

/* Ruby (furigana) styling: make rt smaller for better balance */
ruby{ruby-overhang: none;}
ruby rt{font-size:1rem; line-height:1; margin-bottom:0.15em; letter-spacing: 0.3em;ruby-align: center; }
ruby rt.wide{letter-spacing:1em;margin-right: -1em; }
/* ruby + ruby{margin-left:0.2em;} */


/* Animate */
@media screen{
    .fade-in{opacity: 0; transition: opacity 1s ease;}
    .fade-in.is-view{opacity: 1;}

    .fade-up{opacity: 0; transform: translateY(50px); transition: opacity 1s ease, transform 1s ease;}
    .fade-up.is-view{opacity: 1; transform: translateY(0);}

    .zoom-in{overflow: hidden;}
    .zoom-in img{transform: scale(1.2); will-change: transform; transition: transform 1s ease;}
    .zoom-in.is-view img{transform: scale(1);}
}