@font-face{font-family:"Adventor";src:url(fonts/texgyreadventor-bold.otf) format("opentype");font-weight:700;font-display:swap}
:root{
  --bg:#f4f1ee;  --ink:#1c1c1a;
  --green:#4fb38a;  --deep:#2b3a32;  --sage:#dfe3dc;  --line:rgba(28,28,26,.18);
  --pad:clamp(20px,4.6vw,96px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:Inter,"Noto Sans JP",sans-serif;font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{padding-inline:var(--pad)}

.pill{display:inline-flex;align-items:center;gap:8px;border:1.5px solid currentColor;border-radius:999px;padding:.45em 1.35em;font-size:clamp(14px,1.25vw,20px);font-weight:500;line-height:1.2;transition:background .3s var(--ease),color .3s var(--ease)}
.pill:hover{background:var(--ink);color:var(--bg)}

.hd{display:flex;justify-content:flex-end;padding-top:clamp(20px,3.4vw,48px)}

.wordmark{font-family:Adventor,sans-serif;font-weight:700;color:var(--green);font-size:clamp(40px,11.4vw,200px);line-height:.9;letter-spacing:-.02em;margin-top:clamp(40px,6vw,110px);white-space:nowrap}
.lead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(56px,7vw,130px)}
.lead h1{font-weight:300;font-size:clamp(30px,4.3vw,72px);line-height:1.18;letter-spacing:-.015em}
.lead h1.ja{font-family:"Noto Sans JP",sans-serif;font-weight:400;letter-spacing:.02em;line-height:1.35}
.lead h1 small{display:block;margin-top:.9em;font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:clamp(13px,1.05vw,16px);letter-spacing:.04em}
.scroll{display:flex;align-items:center;gap:22px;font-size:clamp(13px,1.1vw,18px);white-space:nowrap}
.scroll i{font-style:normal;display:inline-block;animation:bob 2.4s var(--ease) infinite}
@keyframes bob{50%{transform:translateY(4px)}}

.flow{position:relative;margin-top:clamp(40px,5vw,72px);height:clamp(320px,52vw,820px);border-radius:clamp(10px,1vw,16px);overflow:hidden;background:linear-gradient(100deg,#6fd6c6 0%,#5ec9c4 45%,#55b6c0 75%,#4a8fb0 100%)}
.flow canvas{position:absolute;inset:0;width:100%;height:100%}

.tag{display:flex;align-items:center;gap:.7em;font-size:clamp(20px,2.2vw,38px);font-weight:400;letter-spacing:-.01em;line-height:1}
.tag::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--green);flex:none}

.about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--pad);align-items:center;padding-block:clamp(90px,10vw,180px)}
.about .tag{grid-column:1/-1;margin-bottom:clamp(20px,3vw,56px)}
.photos{position:relative;padding-bottom:clamp(110px,14vw,250px)}
.photos img{display:block;height:auto;border-radius:clamp(8px,.8vw,14px);object-fit:cover}
.photos .p1{object-position:50% 85%}
.photos .p1{width:72%;aspect-ratio:1208/881}
.photos .p2{position:absolute;left:58%;top:47%;width:40%;aspect-ratio:460/575}
.h2{font-weight:300;font-size:clamp(32px,3.7vw,64px);line-height:1.2;letter-spacing:-.01em}
.h2.ja{font-family:"Noto Sans JP",sans-serif;font-weight:400;letter-spacing:.02em;line-height:1.45;font-size:clamp(20px,2.85vw,44px)}
.sub{font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:clamp(13px,1vw,16px);margin-top:14px}
.body{font-family:"Noto Sans JP",sans-serif;font-size:clamp(13px,.98vw,15px);line-height:2.05;margin-top:clamp(36px,4vw,64px);max-width:34em}
.body.more-p{margin-top:1.2em}
.more{display:inline-flex;justify-content:space-between;align-items:center;min-width:220px;margin-top:clamp(32px,3vw,48px);padding-bottom:10px;border-bottom:1.5px solid var(--green);font-size:clamp(13px,1vw,15px);font-weight:500}
.more span{transition:transform .4s var(--ease)}
.more:hover span{transform:translateX(6px)}

.tt{--hpx:clamp(38px,4.4vw,64px);margin-top:clamp(70px,8vw,130px);display:grid;grid-template-columns:3.2em repeat(7,minmax(0,1fr));border-top:1.5px solid rgba(238,240,234,.6)}
.tt .hdcell{padding:14px 0 12px;text-align:center;font-size:clamp(13px,1.1vw,17px);font-weight:500;border-bottom:1px solid rgba(238,240,234,.22)}
.tt .hdcell.sat{color:#8fc8ee}.tt .hdcell.sun{color:#f0a48f}
.tt .axis,.tt .col{position:relative}
.tt .col{border-left:1px solid rgba(238,240,234,.16)}
.tt .gap{grid-column:1/-1;height:clamp(10px,1.2vw,18px);background:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(238,240,234,.1) 6px 7px);border-block:1px solid rgba(238,240,234,.16)}
.tt .hr{position:absolute;left:0;right:0;border-top:1px dashed rgba(238,240,234,.1)}
.tt .axis span{position:absolute;right:8px;transform:translateY(-50%);font-size:11px;color:#9aa596;font-variant-numeric:tabular-nums}
.tt .cls{position:absolute;left:4px;right:4px;border-radius:8px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.25;overflow:hidden;font-family:"Noto Sans JP",sans-serif}
.tt .cls b{font-weight:500;font-size:clamp(10px,.95vw,14px)}
.tt .cls small{font-family:Inter,sans-serif;font-size:clamp(9px,.85vw,13px);font-variant-numeric:tabular-nums;opacity:.85;margin-top:2px}
.c-main{background:#4fb38a;color:#fff}.c-begin{background:#d3ebb0;color:#2b3a32}.c-spar{background:#7ccfd0;color:#173a3c}.c-other{background:#c9cfc6;color:#2b3a32}
.tt-foot{color:#cfd6ca;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 32px;margin-top:20px;font-family:"Noto Sans JP",sans-serif;font-size:clamp(12px,.95vw,14px)}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
@media (max-width:760px){.tt{--hpx:64px;grid-template-columns:2.4em repeat(7,minmax(0,1fr))}.tt .cls b{font-size:10px;line-height:1.15}.tt .cls small{font-size:9px;line-height:1.15}.tt .cls{left:2px;right:2px;padding:4px 1px;border-radius:5px}.tt .axis span{right:4px;font-size:9px}}

.deep{background:var(--deep);color:#eef0ea}
.classes{padding-block:clamp(80px,9vw,160px)}
.classes .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pad);margin-top:clamp(36px,4vw,60px)}
.classes .body{margin-top:0;color:#d7dcd3}

.sage{background:var(--sage)}
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pad);padding-block:clamp(80px,9vw,160px)}
.join .tag{grid-column:1/-1}
.join .pair{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pad)}

.fee{width:100%;border-collapse:collapse;margin-top:clamp(28px,3vw,44px);font-family:"Noto Sans JP",sans-serif;font-size:clamp(13px,1vw,15px)}
.fee caption{text-align:left;font-size:12px;color:#5d6559;padding-bottom:10px}
.fee th,.fee td{padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.fee thead th{font-weight:500;font-size:12px;color:#5d6559;border-bottom:1.5px solid var(--ink);padding-top:0}
.fee thead th:first-child{text-align:left}
.fee thead th:not(:first-child),.fee td{text-align:right;font-family:Inter,sans-serif;font-variant-numeric:tabular-nums}
.fee tbody th{text-align:left;font-weight:500}
.fee tbody th small{display:block;font-weight:400;font-size:11px;color:#6b7367;margin-top:2px}
.fee td{font-size:clamp(14px,1.15vw,18px);padding-left:12px}
.fee tbody tr:first-child td,.fee tbody tr:first-child th{border-top:0}
.fee.other{border-top:1.5px solid var(--ink)}
.fee.other caption{padding-bottom:10px}
.fee.other td{line-height:1.6}
.note{font-family:"Noto Sans JP",sans-serif;font-size:12px;color:#5d6559;margin-top:12px;line-height:1.8}

.ft{padding-block:clamp(70px,7vw,120px) 28px}
.ft .grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr);gap:var(--pad)}
.ft .wordmark{margin-top:0;font-size:clamp(44px,5vw,96px)}
.ft .sl{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px);margin-top:22px}.ft .sl img{width:clamp(64px,5.6vw,92px);height:auto;display:block;flex:none}
.ft .slogan{color:var(--green);font-size:clamp(13px,1.05vw,16px);line-height:1.5}
.bignav a{display:block;font-weight:300;font-size:clamp(24px,2.3vw,38px);line-height:1.32}
.bignav a:hover{color:var(--green)}
.ft .addr{font-family:"Noto Sans JP",sans-serif;font-size:13px;line-height:1.9;color:#c9d0c5}
.ft .base{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:clamp(60px,6vw,100px);padding-top:22px;border-top:1px solid rgba(238,240,234,.22);font-size:12px;color:#aab3a6}

.menu{position:fixed;inset:0;z-index:50;background:var(--deep);color:#eef0ea;display:flex;flex-direction:column;padding:clamp(20px,3.4vw,48px) var(--pad) 28px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease),visibility 0s linear .7s;visibility:hidden;overflow-y:auto;overscroll-behavior:contain}
.menu.open{clip-path:inset(0);visibility:visible;transition:clip-path .7s var(--ease),visibility 0s}
.menu .hd{padding-top:0}
.menu .pill:hover{background:#eef0ea;color:var(--deep)}
.menu nav{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.menu nav .big a{display:block;font-weight:300;font-size:clamp(44px,6.4vw,104px);line-height:1.16;letter-spacing:-.015em;transform:translateY(30px);opacity:0;transition:transform .8s var(--ease),opacity .8s var(--ease),color .3s}
.menu.open nav .big a{transform:none;opacity:1}
.menu nav .big a:nth-child(2){transition-delay:.05s}.menu nav .big a:nth-child(3){transition-delay:.1s}.menu nav .big a:nth-child(4){transition-delay:.15s}.menu nav .big a:nth-child(5){transition-delay:.2s}
.menu nav .big a:hover{color:var(--green)}
.menu .side{font-size:clamp(14px,1.2vw,19px);line-height:2.1;text-align:left}
.menu .base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:clamp(40px,4vw,64px);padding-top:24px;border-top:1px solid rgba(238,240,234,.25);font-size:clamp(12px,1.05vw,17px);color:#cfd5ca}
body.lock{overflow:hidden}
.swap,.menu nav .big a.swap,.bignav a.swap{display:grid;justify-items:start;overflow:hidden;width:max-content}
.swap>span{grid-area:1/1;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.swap .ja{font-family:"Noto Sans JP",sans-serif;font-weight:300;letter-spacing:.02em;transform:translateY(100%);opacity:0}
@media (hover:hover){
  .swap:hover .en,.swap:focus-visible .en{transform:translateY(-100%);opacity:0}
  .swap:hover .ja,.swap:focus-visible .ja{transform:none;opacity:1}
}
@media (hover:none){
  .swap,.menu nav .big a.swap,.bignav a.swap{grid-template-columns:auto auto;align-items:baseline;gap:.6em}
  .swap>span{grid-area:auto}
  .swap .ja{transform:none;opacity:.6;font-size:.38em;letter-spacing:.04em}
}


a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:4px}
@media (max-width:760px){
  .lead{flex-direction:column;align-items:flex-start}
  .about,.classes .top,.join,.ft .grid{grid-template-columns:1fr}
  
  .menu nav{flex-direction:column;align-items:flex-start}
}
@media (max-width:760px){.join .pair{grid-template-columns:1fr;row-gap:72px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.map{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.map:hover{color:var(--green)}

#open{position:fixed;top:clamp(20px,3.4vw,48px);right:var(--pad);z-index:40;background:var(--bg);box-shadow:0 2px 14px rgba(28,28,26,.08)}
#open:hover{background:var(--ink);color:var(--bg)}
.hd{min-height:calc(1.2em + 1em + 3px)}
.js-anim .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js-anim .rv.in{opacity:1;transform:none}
.js-anim .rv.ph{transform:translateY(40px) scale(.98)}
.js-anim .rv.ph.in{transform:none}
.lead h1 .ln{display:block;overflow:hidden}
.lead h1 .ln>span{display:block}
.js-anim .lead h1 .ln>span{transform:translateY(105%);animation:lnUp 1.1s var(--ease) forwards}
.js-anim .lead h1 .ln:nth-child(2)>span{animation-delay:.12s}
.js-anim .lead h1 .ln:nth-child(3)>span{animation-delay:.24s}
.js-anim .wordmark.top{opacity:0;animation:fadeIn 1.2s var(--ease) .1s forwards}
.js-anim .flow{clip-path:inset(12% 6% 0 6% round 16px);transition:clip-path 1.4s var(--ease)}
.js-anim .flow.in{clip-path:inset(0 0 0 0 round 16px)}
.js-anim .tt .cls{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-anim .tt.in .cls{opacity:1;transform:none}
@keyframes lnUp{to{transform:none}}
@keyframes fadeIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.js-anim .rv,.js-anim .lead h1 .ln>span,.js-anim .wordmark.top,.js-anim .flow,.js-anim .tt .cls{opacity:1!important;transform:none!important;animation:none!important;clip-path:none!important;transition:none!important}}
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-width:min(100%,340px);margin-top:clamp(32px,3vw,48px);padding:20px 28px 20px 32px;border-radius:999px;background:var(--green);color:#fff;font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:clamp(17px,1.4vw,21px);letter-spacing:.04em;box-shadow:0 10px 28px rgba(79,179,138,.35);transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.cta span{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--green);font-size:18px;transition:transform .4s var(--ease)}
.cta:hover{background:#3f9c76;transform:translateY(-2px);box-shadow:0 14px 34px rgba(79,179,138,.45)}
.cta:hover span{transform:translateX(4px)}