:root{--g:clamp(24px,5vw,72px);--forest:#1B2E26;--ivory:#F7F3EC;--paper:#EFE9DC;--ink:#1C1815;--moss:#33463A;--red:#C4402A;--serif:'Cormorant Garamond','Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif;--sans:'Inter','Hiragino Sans','Yu Gothic','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font:300 16px/1.5 var(--sans);color:var(--ink);background:var(--paper);overflow-x:clip}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
::selection{background:var(--forest);color:var(--ivory)}
.skip{position:absolute;left:var(--g);top:-64px;z-index:100;padding:10px 16px;background:var(--ivory);color:var(--forest);font-size:14px}
.skip:focus{top:12px}

.fm-link{position:relative;display:inline-block;padding:10px 0}
.fm-link::after{content:'';position:absolute;left:0;bottom:5px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .25s ease-out}
.fm-link:hover::after,.fm-link:focus-visible::after{transform:scaleX(1)}
@media (hover:none){.fm-link::after{transform:scaleX(1)}}

.top{position:absolute;top:0;left:0;right:0;z-index:50}
.top nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(20px,3vw,40px);padding:clamp(14px,2.4vw,30px) var(--g);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory)}
.top nav a{white-space:nowrap}

.fmark{position:fixed;z-index:60;left:calc(var(--g) / 2);top:clamp(16px,2.2vw,28px);transform:translateX(-50%);font-weight:500;font-size:30px;letter-spacing:-.04em;line-height:1;color:var(--forest);visibility:hidden;opacity:0;transition:opacity .4s ease,visibility 0s linear .4s,color .3s ease}
.fmark.on{visibility:visible;opacity:1;transition:opacity .4s ease,visibility 0s,color .3s ease}
.fmark.dk{color:var(--ivory)}
.fmark span{color:var(--red);margin-left:.04em}
@media (max-width:560px){.fmark{display:none}}

.hero{position:relative;overflow:hidden;background:var(--forest);color:var(--ivory);height:100vh;height:100svh;min-height:580px;display:flex;align-items:flex-end}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,0) 58%),linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 16%)}
.hero-body{position:relative;width:100%;padding:clamp(88px,12vh,120px) var(--g) calc(clamp(112px,13vh,140px) + env(safe-area-inset-bottom,0px))}
.hero h1{font-weight:500;display:inline-block}
.wm{display:flex;align-items:baseline;font-size:clamp(88px,19vw,300px);line-height:.86;letter-spacing:-.045em;margin-left:-.04em}
.dot{color:var(--red);margin-left:.05em}
.sub{display:block;margin-top:clamp(18px,2.2vw,30px);font-size:clamp(13px,1.1vw,16px);font-weight:500;letter-spacing:.3em;text-transform:uppercase;line-height:1;color:var(--ivory)}
.tag{margin-top:clamp(30px,3.2vw,46px);max-width:24em;font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.9vw,28px);line-height:1.3;text-wrap:balance}
.bar{position:absolute;left:var(--g);right:var(--g);bottom:calc(clamp(20px,3.5vh,36px) + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px 24px;padding-top:12px;border-top:1px solid rgba(247,243,236,.7);font-size:13px;letter-spacing:.04em;color:var(--ivory)}
.geo{grid-column:2;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}
.geo li,.cap li{display:flex;align-items:center;white-space:nowrap}
.geo li+li::before{content:'';width:5px;height:5px;margin-right:14px;border-radius:50%;background:var(--red);flex:none}
.explore{grid-column:3;justify-self:end;white-space:nowrap}
@media (max-width:560px){.bar{grid-template-columns:1fr}.geo{grid-column:1}.explore{display:none}}
@media (max-width:860px){.hero{min-height:0}}

.sec{padding-left:var(--g);padding-right:var(--g)}
.grid{display:grid;grid-template-columns:minmax(140px,1fr) 5fr;column-gap:clamp(20px,3vw,48px)}
.lbl{font-size:13px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1.9;color:var(--moss)}
.lbl .nm{display:block;margin-top:6px;color:var(--forest)}
.lbl .rule{position:relative;display:inline-block;width:clamp(28px,5vw,80px);height:5px;vertical-align:middle;margin-left:14px}
.lbl .rule::before{content:'';position:absolute;left:0;right:0;top:2px;height:1px;background:currentColor;opacity:.45}
.lbl .rule::after{content:'';position:absolute;right:0;top:0;width:5px;height:5px;border-radius:50%;background:var(--red)}
.about{padding-top:clamp(64px,8vw,128px);padding-bottom:clamp(48px,6vw,96px)}
.lead{grid-column:2;max-width:22em;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,46px);line-height:1.25;letter-spacing:-.01em;color:var(--forest);text-wrap:pretty}

.focus{padding-bottom:clamp(64px,7vw,112px)}
.focus-in{border-top:1px solid rgba(27,46,38,.35);padding-top:clamp(24px,3vw,40px)}
.focus .lbl{margin-bottom:clamp(20px,2.4vw,32px)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,6vw,88px);padding-bottom:clamp(0px,6.5vw,90px)}
.grp{min-width:0;display:flex;flex-direction:column}
@supports (grid-template-rows:subgrid){.tiles{grid-template-rows:auto auto auto}.grp{display:grid;grid-template-rows:subgrid;grid-row:1 / span 3}}
.t2{position:relative;top:clamp(0px,6.5vw,90px)}
.grp h3{align-self:end;margin:0 0 clamp(18px,1.7vw,24px);font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.8vw,40px);line-height:1.12;color:var(--forest);text-wrap:balance}
.frame{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--forest)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cap{display:flex;justify-content:flex-end;align-items:center;gap:0 20px;margin-top:16px;font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.8vw,28px);line-height:1.3;color:var(--forest);white-space:nowrap}
.cap li+li{gap:20px}
.cap li+li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
@media (max-width:860px){
 .grid{grid-template-columns:1fr;row-gap:24px}
 .lead{grid-column:1}
 .tiles{display:flex;flex-direction:column;gap:48px;padding-bottom:0}
 .grp{display:block}.t2{top:0}
}
@media (max-width:360px){.cap{font-size:20px;gap:0 12px}.cap li+li{gap:12px}}

.foot{background:var(--forest);color:var(--ivory);padding:clamp(48px,6vw,80px) var(--g) clamp(28px,3vw,40px)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px 48px}
.foot .wm2{display:flex;align-items:baseline;font-weight:500;font-size:clamp(38px,3.8vw,54px);line-height:.9;letter-spacing:-.045em;margin-left:-.04em}
.foot .sub{margin-top:clamp(14px,1.4vw,20px);font-size:13px}
.foot .geo2{display:flex;flex-wrap:wrap;gap:6px 24px;white-space:nowrap;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,243,236,.9)}
.copy{margin-top:clamp(32px,4vw,56px);padding-top:20px;border-top:1px solid rgba(247,243,236,.2);font-size:13px;letter-spacing:.06em;color:rgba(247,243,236,.85)}
@media (max-width:860px){.foot-row{flex-direction:column;align-items:flex-start}}

@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-.4em)}to{opacity:1;transform:none}}
.in-h{animation:up .7s cubic-bezier(.22,.61,.36,1) both}
.in-d{display:inline-block;animation:drop .6s cubic-bezier(.22,.61,.36,1) .5s both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}
.js .rv{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.in-h,.in-d{animation:none}.js .rv{opacity:1;transform:none;transition:none}.fm-link::after,.fmark{transition:none}}

html[lang=ja] .lead,html[lang=ja] .tag,html[lang=ja] .grp h3{word-break:auto-phrase;line-break:strict}
html[lang=ja] .lead{line-height:1.55;max-width:24em}
html[lang=ja] .tag{line-height:1.6}
html[lang=ja] .cap{line-height:1.6}
html[lang=ja] .lbl,html[lang=ja] .top nav,html[lang=ja] .geo2{letter-spacing:.08em}
