:root{
  --sumi:#16120d; --sumi2:#1f1913; --washi:#f3ece0; --washi2:#e9dfcd;
  --ink:#efe7d7; --ink-d:#2a231b; --ink2:#b8ac97; --mute:#8a7d69;
  --gold:#c6a667; --gold-d:#a98a4f;
  --line:rgba(243,236,224,.16); --line-d:rgba(42,35,27,.16);
  --min:'Shippori Mincho B1',serif; --en:'Cormorant Garamond',serif; --jp:'Zen Kaku Gothic New',sans-serif;
  --ease:cubic-bezier(.45,0,.12,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;interpolate-size:allow-keywords;}
body{background:var(--sumi);color:var(--ink);font-family:var(--jp);font-weight:400;line-height:2;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
section{position:relative;}
::selection{background:var(--gold);color:var(--sumi);}
.wrap{width:min(90%,1180px);margin-inline:auto;}
h1,h2,h3{font-family:var(--min);font-weight:600;line-height:1.5;}
h1,h2,h3,p{word-break:auto-phrase;line-break:strict;text-wrap:pretty;}
.en{font-family:var(--en);font-style:italic;}
.vert{writing-mode:vertical-rl;text-orientation:mixed;}

/* loader */
.loader{position:fixed;inset:0;z-index:300;background:var(--sumi);display:grid;place-content:center;gap:22px;justify-items:center;transition:opacity 1s var(--ease),visibility 1s var(--ease);}
.loader.done{opacity:0;visibility:hidden;}
.loader__t{font-family:var(--min);font-weight:600;font-size:30px;letter-spacing:.5em;text-indent:.5em;color:var(--washi);}
.loader__moon{width:46px;height:46px;border-radius:50%;box-shadow:inset -14px 6px 0 0 var(--gold);animation:moon 2.6s var(--ease) infinite;}
@keyframes moon{50%{box-shadow:inset 14px 6px 0 0 var(--gold);}}
.loader__en{font-family:var(--en);font-style:italic;font-size:13px;letter-spacing:.3em;color:var(--mute);}

/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:24px clamp(20px,4vw,50px);transition:.6s var(--ease);color:var(--washi);}
.hd.sc{background:rgba(22,18,13,.86);backdrop-filter:blur(10px);padding-block:16px;border-bottom:1px solid var(--line);}
.brand{font-family:var(--min);font-weight:600;font-size:21px;letter-spacing:.34em;text-indent:.34em;display:flex;align-items:center;gap:12px;}
.brand .seal{width:34px;height:34px;flex:0 0 auto;}
.brand small{display:block;font-family:var(--en);font-style:italic;font-size:11px;letter-spacing:.18em;color:rgba(243,236,224,.6);margin-top:3px;text-indent:0;}
.nav{display:flex;gap:30px;font-family:var(--min);font-size:14px;letter-spacing:.14em;}
.nav a{position:relative;padding:4px 0;opacity:.9;transition:.3s;}
.nav a:hover,.nav a.cur{opacity:1;color:var(--gold);}
.hd__cta{font-family:var(--min);font-size:13px;letter-spacing:.12em;border:1px solid var(--gold);color:var(--gold);padding:11px 22px;transition:.4s var(--ease);}
.hd__cta:hover{background:var(--gold);color:var(--sumi);}
.burger{display:none;flex-direction:column;gap:6px;width:28px;}
.burger span{height:1.5px;background:currentColor;}
.mnav{position:fixed;inset:0;z-index:200;background:var(--sumi);color:var(--washi);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;font-family:var(--min);font-size:22px;letter-spacing:.16em;opacity:0;visibility:hidden;transition:.5s var(--ease);}
.mnav.open{opacity:1;visibility:visible;}

/* bgm toggle */
.bgm{position:fixed;left:clamp(18px,3vw,34px);bottom:26px;z-index:90;display:flex;align-items:center;gap:11px;font-family:var(--min);font-size:12px;letter-spacing:.1em;color:var(--washi);background:rgba(22,18,13,.6);border:1px solid var(--line);backdrop-filter:blur(6px);padding:10px 16px 10px 13px;border-radius:40px;transition:.4s var(--ease);}
.bgm:hover{border-color:var(--gold);}
.bgm__eq{display:flex;align-items:flex-end;gap:2px;height:14px;}
.bgm__eq i{width:2px;height:4px;background:var(--gold);}
.bgm.on .bgm__eq i{animation:eq .9s var(--ease) infinite;}
.bgm.on .bgm__eq i:nth-child(2){animation-delay:.2s;} .bgm.on .bgm__eq i:nth-child(3){animation-delay:.4s;} .bgm.on .bgm__eq i:nth-child(4){animation-delay:.1s;}
@keyframes eq{0%,100%{height:4px;}50%{height:14px;}}
.bgm__label::after{content:"音を楽しむ";} .bgm.on .bgm__label::after{content:"音を止める";}

/* hero */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end;}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;animation:kb 18s var(--ease) infinite alternate;}
@keyframes kb{from{transform:scale(1.02);}to{transform:scale(1.14);}}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,18,13,.5),rgba(22,18,13,.15) 40%,rgba(22,18,13,.78));}
.hero__title{position:absolute;top:clamp(110px,16vh,180px);right:clamp(24px,5vw,72px);z-index:3;}
.hero__title h1{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--min);font-weight:600;font-size:clamp(40px,7vw,90px);letter-spacing:.22em;color:var(--washi);text-shadow:0 4px 30px rgba(0,0,0,.5);line-height:1.1;}
.hero__title h1 em{color:var(--gold);font-style:normal;}
.hero__in{position:relative;z-index:3;width:min(90%,1180px);margin-inline:auto;padding-bottom:clamp(80px,12vh,140px);}
.hero__k{font-family:var(--en);font-style:italic;font-size:clamp(15px,2vw,20px);letter-spacing:.14em;color:var(--gold);margin-bottom:18px;}
.hero__p{font-family:var(--min);font-size:clamp(15px,1.8vw,19px);letter-spacing:.06em;line-height:2.2;color:var(--washi);max-width:24em;text-shadow:0 2px 16px rgba(0,0,0,.5);}
.hero__scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;font-family:var(--en);font-style:italic;font-size:12px;letter-spacing:.16em;color:rgba(243,236,224,.8);display:flex;flex-direction:column;align-items:center;gap:12px;}
.hero__scroll::after{content:"";width:1px;height:50px;background:var(--gold);animation:sd 2.2s var(--ease) infinite;}
@keyframes sd{0%{transform:scaleY(.15);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(.15);transform-origin:bottom;}}

.btn{font-family:var(--min);font-size:14px;letter-spacing:.12em;padding:16px 38px;transition:.5s var(--ease);display:inline-flex;align-items:center;gap:12px;border:1px solid var(--gold);}
.btn--fill{background:var(--gold);color:var(--sumi);}
.btn--fill:hover{background:transparent;color:var(--gold);}
.btn--line{color:var(--gold);}
.btn--line:hover{background:var(--gold);color:var(--sumi);}
.btn--light{border-color:var(--ink-d);color:var(--ink-d);} .btn--light:hover{background:var(--ink-d);color:var(--washi);}

/* statement (concept) */
.stmt{padding:clamp(90px,15vw,200px) 0;text-align:center;}
.stmt__k{font-family:var(--en);font-style:italic;font-size:18px;letter-spacing:.1em;color:var(--gold);display:block;margin-bottom:30px;}
.stmt__big{font-family:var(--min);font-weight:500;font-size:clamp(22px,3.4vw,40px);line-height:2.4;letter-spacing:.14em;}
.stmt__p{color:var(--ink2);font-size:15px;letter-spacing:.04em;max-width:32em;margin:36px auto 0;line-height:2.2;}

/* chapters (full-bleed alternating) */
.chap{display:grid;grid-template-columns:1.15fr .85fr;min-height:clamp(460px,68vh,760px);}
.chap--alt{grid-template-columns:.85fr 1.15fr;}
.chap__media{position:relative;overflow:hidden;}
.chap__media img{width:100%;height:100%;object-fit:cover;transition:1.4s var(--ease);}
.chap:hover .chap__media img{transform:scale(1.05);}
.chap__body{background:var(--sumi2);display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,90px);position:relative;}
.chap--alt .chap__media{order:2;}
.chap__no{position:absolute;top:clamp(28px,4vw,50px);font-family:var(--en);font-style:italic;font-size:15px;color:var(--gold);letter-spacing:.1em;}
.chap__label{position:absolute;top:clamp(70px,10vw,120px);right:clamp(30px,4vw,56px);writing-mode:vertical-rl;font-family:var(--min);font-size:14px;letter-spacing:.4em;color:var(--mute);}
.chap__body h2{font-family:var(--min);font-weight:600;font-size:clamp(26px,3.4vw,42px);letter-spacing:.1em;line-height:1.6;margin-bottom:6px;}
.chap__body .sub{font-family:var(--en);font-style:italic;font-size:16px;color:var(--gold);margin-bottom:24px;}
.chap__body p{color:var(--ink2);font-size:14.5px;letter-spacing:.04em;line-height:2.1;margin-bottom:26px;max-width:28em;}
.chap__body .lk{font-family:var(--min);font-size:14px;letter-spacing:.08em;color:var(--gold);border-bottom:1px solid transparent;transition:.3s;width:max-content;}
.chap__body .lk:hover{border-bottom-color:var(--gold);}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:10px;}
.gal figure{overflow:hidden;}
.gal img{width:100%;height:100%;object-fit:cover;transition:1.2s var(--ease);}
.gal figure:hover img{transform:scale(1.06);}
.gal .a{grid-column:span 2;grid-row:span 2;} .gal .b{grid-column:span 2;} .gal .c{grid-column:span 1;} .gal .d{grid-column:span 1;} .gal .e{grid-column:span 2;}

/* light section (washi) */
.sec{padding:clamp(80px,12vw,170px) 0;}
.sec--washi{background:var(--washi);color:var(--ink-d);}
.sec--washi .shead h2,.sec--washi h2,.sec--washi h3{color:var(--ink-d);}
.shead{text-align:center;margin-bottom:clamp(46px,6vw,78px);}
.shead .k{font-family:var(--en);font-style:italic;font-size:18px;letter-spacing:.08em;color:var(--gold-d);display:block;margin-bottom:14px;}
.shead h2{font-family:var(--min);font-weight:600;font-size:clamp(26px,4vw,46px);letter-spacing:.14em;}
.shead p{margin:18px auto 0;max-width:34em;font-size:14.5px;color:var(--mute);letter-spacing:.03em;}

/* plan cards (rooms/plans) */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,38px);}
.plan{background:#fff;border:1px solid var(--line-d);overflow:hidden;transition:.5s var(--ease);}
.plan:hover{transform:translateY(-6px);box-shadow:0 30px 60px -36px rgba(42,35,27,.4);}
.plan__img{aspect-ratio:4/3;overflow:hidden;}
.plan__img img{width:100%;height:100%;object-fit:cover;transition:1s var(--ease);}
.plan:hover .plan__img img{transform:scale(1.05);}
.plan__b{padding:26px 26px 30px;}
.plan__b .nm{font-family:var(--min);font-weight:600;font-size:20px;letter-spacing:.06em;margin-bottom:6px;color:var(--ink-d);}
.plan__b .en{font-family:var(--en);font-style:italic;color:var(--gold-d);font-size:14px;}
.plan__b p{color:#6b6052;font-size:13.5px;line-height:1.95;margin:12px 0 14px;}
.plan__b .pr{font-family:var(--min);font-size:15px;color:var(--ink-d);border-top:1px solid var(--line-d);padding-top:14px;}
.plan__b .pr b{font-family:var(--en);font-size:22px;color:var(--gold-d);}

/* spec table */
.spec{width:100%;border-collapse:collapse;font-size:14.5px;}
.spec th,.spec td{border-bottom:1px solid var(--line-d);padding:16px 12px;text-align:left;vertical-align:top;}
.spec th{font-family:var(--min);font-weight:600;white-space:nowrap;width:26%;color:var(--ink-d);}
.spec td{color:#6b6052;}
.sec:not(.sec--washi) .spec th,.sec:not(.sec--washi) .spec td{border-color:var(--line);}
.sec:not(.sec--washi) .spec th{color:var(--ink);} .sec:not(.sec--washi) .spec td{color:var(--ink2);}

/* access map */
.acc{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:start;}
.map{position:relative;overflow:hidden;min-height:380px;background:repeating-linear-gradient(0deg,transparent 0 40px,rgba(42,35,27,.06) 40px 42px),repeating-linear-gradient(90deg,transparent 0 40px,rgba(42,35,27,.06) 40px 42px),#ded3bf;}
.map::before{content:"";position:absolute;left:-10%;top:48%;width:120%;height:24px;background:#cfc1a5;transform:rotate(-6deg);}
.map__pin{position:absolute;left:46%;top:42%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;}
.map__pin span{width:16px;height:16px;border-radius:50%;background:var(--gold-d);box-shadow:0 0 0 7px rgba(169,138,79,.25);}
.map__pin b{background:var(--ink-d);color:var(--washi);font-size:11px;padding:4px 10px;border-radius:20px;white-space:nowrap;}
.map__note{position:absolute;right:12px;bottom:12px;z-index:3;font-size:10.5px;color:var(--mute);background:rgba(255,255,255,.8);padding:4px 9px;}

/* form */
.form{max-width:760px;margin-inline:auto;}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{margin-bottom:20px;}
.field label{display:block;font-family:var(--min);font-size:13px;letter-spacing:.04em;color:var(--ink-d);margin-bottom:8px;}
.sec:not(.sec--washi) .field label{color:var(--ink);}
.field .req{color:var(--gold-d);margin-left:6px;font-size:11px;}
.field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid var(--line-d);padding:13px 14px;font-size:14.5px;color:var(--ink-d);transition:.3s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-d);}
.field textarea{resize:vertical;min-height:110px;}
.form .submit{width:100%;justify-content:center;margin-top:6px;}
.form__priv{font-size:12px;color:var(--mute);text-align:center;margin-top:14px;}
.form__ok{display:none;text-align:center;padding:30px 10px;}
.form__ok.show{display:block;}
.form__ok .ic{font-family:var(--en);font-size:42px;color:var(--gold-d);}

/* page header */
.phead{position:relative;height:54vh;min-height:380px;display:flex;align-items:flex-end;overflow:hidden;}
.phead__media{position:absolute;inset:0;z-index:0;}
.phead__media img{width:100%;height:100%;object-fit:cover;}
.phead__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,18,13,.5),rgba(22,18,13,.7));}
.phead .wrap{position:relative;z-index:2;padding-bottom:clamp(40px,7vh,80px);}
.phead .k{font-family:var(--en);font-style:italic;font-size:17px;letter-spacing:.1em;color:var(--gold);display:block;margin-bottom:14px;}
.phead h1{font-family:var(--min);font-weight:600;font-size:clamp(32px,5vw,58px);letter-spacing:.16em;color:var(--washi);}
.crumb{font-family:var(--en);font-style:italic;font-size:12px;color:rgba(243,236,224,.7);margin-top:16px;}
.crumb a:hover{color:var(--gold);}

/* cta */
.cta{position:relative;padding:clamp(90px,13vw,170px) 0;text-align:center;overflow:hidden;}
.cta__media{position:absolute;inset:0;z-index:0;}
.cta__media img{width:100%;height:100%;object-fit:cover;}
.cta__media::after{content:"";position:absolute;inset:0;background:rgba(22,18,13,.72);}
.cta__in{position:relative;z-index:2;}
.cta__in .k{font-family:var(--en);font-style:italic;font-size:18px;color:var(--gold);display:block;margin-bottom:18px;}
.cta__in h2{font-family:var(--min);font-weight:600;font-size:clamp(28px,4.4vw,50px);letter-spacing:.16em;color:var(--washi);margin-bottom:18px;}
.cta__in p{color:var(--ink2);font-size:14.5px;letter-spacing:.04em;margin-bottom:32px;max-width:32em;margin-inline:auto;line-height:2.1;}
.cta__btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.cta__tel{display:block;font-family:var(--en);font-size:30px;letter-spacing:.06em;color:var(--washi);margin-top:24px;}

/* footer */
.ft{background:#0f0c08;border-top:1px solid var(--line);padding:72px 0 50px;color:var(--ink2);}
.ft__top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;margin-bottom:44px;}
.ft .brand{color:var(--washi);margin-bottom:16px;}
.ft p{font-size:13px;line-height:2;max-width:24em;}
.ft h4{font-family:var(--min);font-size:14px;letter-spacing:.1em;color:var(--washi);margin-bottom:16px;}
.ft ul{list-style:none;font-size:13.5px;display:grid;gap:11px;}
.ft ul a:hover{color:var(--gold);}
.ft__btm{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--en);font-style:italic;font-size:12px;color:var(--mute);}

.demo-flag{position:fixed;right:14px;bottom:14px;z-index:100;background:var(--ink-d);color:var(--washi);font-size:11.5px;padding:8px 14px;border-radius:30px;box-shadow:0 12px 28px -12px rgba(0,0,0,.6);opacity:.94;}
.demo-flag a{color:var(--gold);text-decoration:underline;}

/* filmstrip (horizontal scroll gallery) — distinct photo presentation */
.filmstrip{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;padding:8px clamp(20px,5vw,60px) 16px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;}
.filmstrip::-webkit-scrollbar{height:3px;}
.filmstrip::-webkit-scrollbar-thumb{background:var(--gold);}
.filmstrip figure{flex:0 0 clamp(230px,26vw,340px);scroll-snap-align:center;}
.filmstrip img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:1.2s var(--ease);}
.filmstrip figure:hover img{transform:scale(1.04);}
.filmstrip figcaption{margin-top:14px;font-family:var(--min);font-size:13px;letter-spacing:.1em;color:var(--ink2);text-align:center;}

/* single elegant quote (testimonial) */
.quote-mark{font-family:var(--en);font-size:96px;color:var(--gold-d);line-height:.4;display:block;}
.bigquote{font-family:var(--min);font-weight:600;font-size:clamp(24px,3.6vw,42px);line-height:1.95;letter-spacing:.12em;color:var(--ink-d);margin:6px 0 30px;}
.quote-by{color:#6b6052;font-size:15px;line-height:2.2;max-width:30em;margin:0 auto 22px;letter-spacing:.03em;}
.quote-name{font-family:var(--en);font-style:italic;font-size:16px;color:var(--gold-d);}

.js [data-rv]{opacity:0;transform:translateY(30px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);}
.js [data-rv].in{opacity:1;transform:none;}
.js [data-rv].d1{transition-delay:.13s;}.js [data-rv].d2{transition-delay:.26s;}.js [data-rv].d3{transition-delay:.39s;}

@media(max-width:900px){
  .nav,.hd__cta{display:none;} .burger{display:flex;}
  .chap,.chap--alt{grid-template-columns:1fr;} .chap__media{min-height:300px;order:0!important;} .chap--alt .chap__media{order:0;}
  .chap__label{display:none;}
  .acc{grid-template-columns:1fr;}
  .plans{grid-template-columns:1fr;}
  .ft__top{grid-template-columns:1fr;gap:26px;}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;} .gal .a,.gal .b,.gal .c,.gal .d,.gal .e{grid-column:span 1;grid-row:span 1;}
  .hero__title{right:18px;top:96px;} .hero__title h1{font-size:clamp(36px,11vw,60px);}
}
@media(max-width:560px){.form .row{grid-template-columns:1fr;} .bgm__label{display:none;}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;} .js [data-rv]{opacity:1;transform:none;transition:none;} .hero__media img{animation:none;}}