:root{
  --paper:#F6F8F8; --ink:#23303A; --ai:#1B395D; --mizu:#A2D6EA; --mizu-pale:#E3F2F8;
  --kari:#E0C24E; --kari-dark:#CDAE3A; --g:clamp(20px,5vw,72px); --line:#D3DEE3; --muted:#5A6873;
  --head:"Shippori Antique","Hiragino Kaku Gothic StdN","Yu Gothic",sans-serif;
  --body:"Zen Kaku Gothic Antique","Hiragino Kaku Gothic StdN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.9;padding-bottom:62px}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
a:focus-visible,summary:focus-visible{outline:3px solid var(--kari);outline-offset:3px}
h1,h2,h3,.logo{font-family:var(--head);font-weight:400}
.wrap{padding-left:var(--g);padding-right:var(--g);max-width:calc(1200px + var(--g) * 2);margin-left:auto;margin-right:auto}

.hd{background:var(--ai);color:#fff;position:sticky;top:0;z-index:5}
.hd-in{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand svg{width:46px;height:46px;flex:none}
.logo{font-size:22px;letter-spacing:.14em;line-height:1.3}
.logo-en{letter-spacing:.02em;font-size:18px;white-space:nowrap}
.logo-en small{font-size:11px;letter-spacing:.02em}
.brand{min-width:0}
.logo small{white-space:nowrap}
html[lang="en"] .fv-copy h1 span{white-space:normal}
@media (max-width:420px){.hd a.tel{display:none}}
.logo small{display:block;font-family:var(--head);font-size:12px;letter-spacing:.08em;color:var(--mizu)}
.hd-actions{display:flex;gap:8px;align-items:center;flex:none}
.hd a.lang{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;text-decoration:none;background:var(--mizu);color:var(--ai);padding:7px 10px;font-family:var(--body)}
.hd a.lang:hover{background:#fff}
.hd a.tel{font-size:13px;font-weight:700;text-decoration:none;border:1px solid rgba(255,255,255,.55);padding:6px 12px}

.fv{padding-top:var(--g)}
.fv-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.fv-grid figure{aspect-ratio:1/1;overflow:hidden}
.fv-grid figure:first-child{grid-column:1/3;aspect-ratio:4/3}
.pc-only{display:none}
.fv-copy{background:var(--mizu);padding:30px 20px 34px}
.fv-copy h1{color:var(--ai);font-size:clamp(24px,7.4vw,58px);line-height:1.28;letter-spacing:.02em}
.fv-copy h1 span{display:block;white-space:nowrap}
.lead{margin-top:16px;font-weight:700;font-size:15px;color:var(--ai)}
.facts{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:13px;color:var(--ai)}
.btn{display:block;text-align:center;background:var(--kari);color:var(--ai);text-decoration:none;font-weight:700;font-size:16px;padding:16px 12px;margin-top:22px}
.btn:hover{background:var(--kari-dark)}
.note{font-size:12px;margin-top:8px;color:var(--ai)}

section.sec{padding-top:68px;padding-bottom:8px}
h2{color:var(--ai);font-size:clamp(28px,7vw,42px);line-height:1.35}
h2 .en{display:block;font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.sec-lead{margin-top:12px;color:var(--muted);font-size:15px;max-width:42em}

.voice-box{background:#fff;padding:36px clamp(20px,4vw,56px);margin-top:var(--g)}
.voice blockquote{font-family:var(--head);font-size:clamp(22px,6vw,32px);line-height:1.6;color:var(--ai);}
.nw{display:inline-block}
.voice cite{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:12px}

.reasons{margin-top:28px;display:grid;gap:30px}
.reason figure{aspect-ratio:16/10}
.places{min-height:220px;background:var(--ai);color:#fff;display:flex;align-items:center;padding:24px;font-family:var(--head);font-size:clamp(24px,6.4vw,34px);line-height:1.45}
.places span{color:var(--mizu)}
.places-lead{display:block;font-family:var(--body);font-size:13px;color:var(--mizu);margin-bottom:10px;line-height:1.6}
.reason .places p{font-size:inherit;line-height:inherit;margin:0}
.reason h3{font-size:clamp(19px,5.4vw,24px);color:var(--ai);margin-top:12px;display:flex;align-items:center;gap:12px;line-height:1.4}
.reason h3 b{font-family:var(--body);font-size:13px;color:var(--ai);background:var(--kari);padding:2px 9px;font-weight:700;flex:none}
.reason p{font-size:15px;margin-top:4px}

.works{columns:2;column-gap:10px;margin-top:28px}
.work{break-inside:avoid;margin-bottom:16px}
.work figure.t{aspect-ratio:3/4}.work figure.w{aspect-ratio:4/3}
.work figcaption{font-size:12px;line-height:1.5;margin-top:6px;color:var(--muted)}
.work figcaption strong{display:block;font-family:var(--head);font-weight:400;font-size:16px;color:var(--ai)}

.story-ba{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:24px}
.story-ba figure{aspect-ratio:3/4;position:relative}
.story-ba span{position:absolute;left:0;bottom:0;background:var(--ai);color:#fff;font-size:12px;font-weight:700;padding:3px 10px}
.timeline{list-style:none;margin-top:32px;border-left:3px solid var(--mizu);padding-left:18px}
.timeline li{position:relative;padding-bottom:36px}
.timeline li::before{content:"";position:absolute;left:-26px;top:6px;width:13px;height:13px;background:var(--paper);border:3px solid var(--ai);border-radius:50%}
.step{font-size:13px;font-weight:700;color:var(--muted)}
.timeline h3{font-size:24px;color:var(--ai);line-height:1.4}
.pics{display:grid;grid-template-columns:repeat(var(--n,1),1fr);gap:3px;margin-top:10px}
.pics figure{aspect-ratio:4/3}
.timeline p{font-size:15px;margin-top:8px}

.study{display:grid;gap:22px;margin-top:26px}
.study article{border-top:3px solid var(--ai);padding-top:12px}
.study figure{aspect-ratio:16/10;margin-bottom:12px}
.study h3{font-size:22px;color:var(--ai)}
.study p{font-size:14px;line-height:1.8}

.faq{margin-top:24px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;font-weight:700;color:var(--ai);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:22px;font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 0 18px;font-size:15px}

.closing{margin-top:68px}
.closing-box{background:var(--ai);color:#fff;padding:48px clamp(20px,4vw,56px)}
.closing-box .btn{max-width:520px}
.flow{font-size:14px;font-weight:700;display:flex;flex-wrap:wrap;gap:4px 8px;color:var(--mizu)}
.closing h2{color:#fff;margin-top:14px}
.btn-line{background:transparent;color:#fff;border:2px solid #fff;margin-top:10px}
.btn-line:hover{background:rgba(255,255,255,.1)}
.closing .meta{font-size:14px;margin-top:16px;line-height:1.8;color:#DCE8F0}

.ft{padding-top:36px;padding-bottom:28px;font-size:13px;color:var(--muted);line-height:1.9}
.ft .name{font-family:var(--head);color:var(--ai);font-size:22px;letter-spacing:.1em}
.ft a{color:var(--ai)}
.privacy{margin-top:24px;border-top:1px solid var(--line);padding-top:16px;font-size:12px}
.privacy h2{font-family:var(--body);font-size:13px;font-weight:700;color:var(--muted)}
.copy{margin-top:16px;font-size:11px}

.bar{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1.3fr;z-index:10;box-shadow:0 -1px 0 var(--line)}
.bar a{text-align:center;text-decoration:none;font-weight:700;padding:17px 8px;font-size:15px}
.bar .b1{background:#fff;color:var(--ai)}
.bar .b2{background:var(--kari);color:var(--ai)}
.bar-single{grid-template-columns:1fr}

@media (min-width:900px){
  body{padding-bottom:0}
  .bar{display:none}
  .fv-grid{grid-template-columns:1fr 1fr 1fr;grid-template-rows:repeat(3,clamp(160px,15vw,220px))}
  .fv-grid figure{aspect-ratio:auto}
  .fv-grid figure:first-child{grid-column:1/3;grid-row:1/3;aspect-ratio:auto}
  .places{font-size:30px}
  .pc-only{display:block}
  .fv-copy{padding:48px 40px;display:flex;flex-direction:column;justify-content:flex-end}
  .fv-copy h1{font-size:clamp(36px,3.8vw,54px)}
  .fv-in{display:grid;grid-template-columns:1.35fr 1fr}
  .reasons{grid-template-columns:repeat(3,1fr)}
  .works{columns:3}
  .story-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
  .story-ba{position:sticky;top:84px}
  .study{grid-template-columns:repeat(3,1fr)}
}