:root{
    --t1:#123841; --t2:#0F2F37; --t3:#0C2930; --t4:#071C22;
    --cream:#F5EDE2; --cream2:rgba(245,237,226,.78); --cream3:rgba(245,237,226,.5);
    --hair:rgba(245,237,226,.16);
    --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
    --gothic:"Noto Sans JP","Zen Kaku Gothic Antique","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
    --en:"Cormorant Garamond","Playfair Display",Georgia,"Times New Roman",serif;
    --cap:"Cormorant Garamond","Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--t1);color:var(--cream);font-family:var(--gothic);font-weight:300;
    line-height:2;-webkit-font-smoothing:antialiased;font-size:14px;
    transition:background .35s linear;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  .grid{max-width:1120px;margin:0 auto;padding:0 clamp(22px,5vw,56px)}
  .num{font-family:var(--cap);font-size:11px;letter-spacing:.2em;color:var(--cream3)}
  section{padding:clamp(76px,12vh,140px) 0}
  section + section{border-top:1px solid var(--hair)}
  h2{font-family:var(--mincho);font-weight:500;font-size:clamp(22px,4.6vw,32px);
    letter-spacing:.12em;margin:10px 0 0;line-height:1.7}
  .sechead{margin-bottom:clamp(34px,5vh,56px)}
  .lede{max-width:40em;color:var(--cream2);font-size:13.5px;letter-spacing:.05em}
  svg text{font-family:var(--gothic)}
  svg .t-min{font-family:var(--mincho)}

  /* i18n */
  .en{display:none}
  body.lang-en .ja{display:none}
  body.lang-en span.en{display:inline}
  body.lang-en div.en,body.lang-en p.en{display:block}
  body.lang-en tspan.en{display:inline}
  tspan.en{display:none}
  .langsw{font-family:var(--cap);font-size:10px;letter-spacing:.2em;color:var(--cream3);
    display:flex;gap:8px;align-items:center;margin-left:clamp(10px,2vw,24px)}
  .langsw a{cursor:pointer;transition:color .3s}
  .langsw a.on{color:var(--cream)}

  /* ambient four-direction shimmer */
  #waterglow{position:fixed;inset:-22%;z-index:0;pointer-events:none;opacity:.5;
    background:
      radial-gradient(36% 28% at 22% 26%, rgba(126,196,207,.13), transparent 70%),
      radial-gradient(28% 24% at 80% 58%, rgba(96,168,182,.10), transparent 70%);
    animation:drift1 26s ease-in-out infinite alternate}
  #waterglow2{position:fixed;inset:-25%;z-index:0;pointer-events:none;opacity:.42;
    background:
      radial-gradient(30% 24% at 14% 86%, rgba(126,196,207,.11), transparent 70%),
      radial-gradient(26% 22% at 86% 12%, rgba(140,205,214,.09), transparent 70%);
    animation:drift2 34s ease-in-out infinite alternate}
  @keyframes drift1{0%{transform:translate3d(-2%,-1%,0)}100%{transform:translate3d(3%,2.5%,0) scale(1.06)}}
  @keyframes drift2{0%{transform:translate3d(2.5%,1.5%,0)}100%{transform:translate3d(-2.5%,-2%,0) scale(1.05)}}
  header,main,footer{position:relative;z-index:1}

  /* cursor water */
  .ripple{position:fixed;z-index:80;pointer-events:none;border-radius:50%;
    border:1px solid rgba(245,237,226,.5);transform:translate(-50%,-50%) scale(.1);opacity:.9;
    animation:rippex 1.4s ease-out forwards}
  .ripple.big{border-color:rgba(245,237,226,.35);animation-duration:1.9s}
  @keyframes rippex{0%{transform:translate(-50%,-50%) scale(.12);opacity:.8}
    100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
  .gleam{position:fixed;z-index:79;pointer-events:none;width:90px;height:90px;border-radius:50%;
    background:radial-gradient(circle,rgba(170,220,228,.18),transparent 70%);
    transform:translate(-50%,-50%);opacity:0;animation:gleamfade 1.2s ease-out forwards}
  @keyframes gleamfade{0%{opacity:.65;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
  .bub{position:fixed;z-index:78;pointer-events:none;border-radius:50%;
    background:radial-gradient(circle, rgba(228,244,246,.45), rgba(228,244,246,0) 72%);
    animation:bubup var(--dur,2.1s) ease-out forwards}
  @keyframes bubup{0%{opacity:0;transform:translate(-50%,-50%)}
    16%{opacity:.5}
    100%{opacity:0;transform:translate(-50%,-50%) translateY(var(--ry,-74px)) translateX(var(--rx,8px)) scale(1.15)}}

  header{position:sticky;top:0;z-index:40;background:transparent;border-bottom:1px solid transparent;transition:background .5s ease,border-color .5s ease,backdrop-filter .5s ease,transform .38s ease}header.hchide{transform:translateY(-100%)}header.scrolled{background:rgba(9,32,39,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
  header .grid{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:none;padding:0 clamp(28px,5vw,80px)}
  .logo{height:24px;display:block;opacity:.97}
  .hnav{display:flex;align-items:center}
  nav{display:flex;gap:clamp(14px,2.6vw,30px);font-family:var(--cap);font-size:10px;
    letter-spacing:.24em;text-transform:uppercase;color:var(--cream3)}
  nav a{transition:color .3s}
  nav a:hover,nav a.act{color:var(--cream)}
  
  .reveal{opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.1s ease}
  .reveal.vis{opacity:1;transform:none}

  /* hero */
  #hero{position:relative;margin-top:-72px;min-height:86svh;display:flex;align-items:center;overflow:hidden;border-top:none}
  
  /* リロード直後のスプラッシュ: GL版と同じ色設計のグラデーション（写真は使わない） */
  #hero .sea{position:absolute;inset:0;background:
    linear-gradient(180deg,#476B7D 0%,#4F7385 26.3%,#3E8FAE 26.55%,#216B8A 34%,#175877 52%,#0F4360 72%,#0B3354 100%)}
  #hero .sea::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(46% 26% at 50% 27%,rgba(216,240,244,.40) 0%,rgba(216,240,244,0) 72%);
    animation:seaGlow 10s ease-in-out infinite alternate}
  @keyframes seaGlow{from{opacity:.5}to{opacity:1}}
  #hero .sea::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(18,56,65,.18) 0%,rgba(18,56,65,.5) 46%,var(--t1) 92%)}
  #hero .shimmer{position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.8;
    background:
      radial-gradient(52% 34% at 30% 22%, rgba(255,255,255,.5), transparent 60%),
      radial-gradient(40% 26% at 72% 38%, rgba(255,255,255,.34), transparent 65%);
    animation:shim 13s ease-in-out infinite alternate}
  @keyframes shim{0%{transform:translate3d(-2.5%,-1%,0) scale(1);opacity:.55}
    50%{opacity:.9}100%{transform:translate3d(2.5%,1.6%,0) scale(1.05);opacity:.6}}
  #hero .inner{position:relative;z-index:2;padding:16svh clamp(22px,5vw,56px) 14svh;width:100%}
  #hero .statement{font-family:var(--mincho);font-weight:500;font-size:clamp(30px,4.6vw,44px);
    line-height:1.9;letter-spacing:.1em;margin:0;text-shadow:0 2px 34px rgba(4,18,24,.55)}
  #hero .sub{margin-top:36px;font-size:13.5px;color:var(--cream2);letter-spacing:.06em;max-width:37em;
    text-shadow:0 1px 18px rgba(4,18,24,.6)}
  .rise{display:block;opacity:0;transform:translateY(26px);filter:blur(7px)}
  .loaded .rise{opacity:1;transform:none;filter:blur(0);
    transition:opacity 1.6s ease,transform 1.6s ease,filter 1.6s ease}
  .loaded .rise.r2{transition-delay:.4s}.loaded .rise.r3{transition-delay:1s}
  .loaded .rise.r4{transition-delay:1.6s}

  /* fig1 */
  .fig1 .dot{opacity:0;transform:scale(.25);transform-box:fill-box;transform-origin:center;
    transition:opacity .45s ease,transform .7s cubic-bezier(.3,1.4,.5,1)}
  .fig1.on .dot{opacity:1;transform:scale(1)}
  .fig1 .ring{opacity:0;filter:blur(3px);transition:opacity 1.8s ease 2.1s,filter 1.8s ease 2.1s}
  .fig1.on .ring{opacity:1;filter:blur(0)}
  .fig1 .lb-hitori{opacity:0;transition:opacity .9s ease 1.5s}
  .fig1.on .lb-hitori{opacity:1}
  .fig1 .lb-hitotsu{opacity:0;transition:opacity 1.2s ease 2.7s}
  .fig1.on .lb-hitotsu{opacity:1}
  .fig1 .wa-t{opacity:0;transition:opacity 1.6s ease 3.6s}
  .fig1.on .wa-t{opacity:1}
  .fig1.live .dot{animation:breath 6s ease-in-out infinite}
  @keyframes breath{0%,100%{opacity:.62}50%{opacity:1}}
  .ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
  @media(max-width:860px){.ph-grid{grid-template-columns:1fr}}
  .ph-text p{margin:0 0 1.6em;font-size:13.8px;letter-spacing:.05em;color:var(--cream2)}
  .ph-text .strong{font-family:var(--mincho);font-size:17px;letter-spacing:.12em;line-height:2.2;color:var(--cream)}
  figure{margin:0}

  /* model */
  .diagwrap{overflow-x:auto;max-width:920px;margin:0 auto}
  .diagwrap svg{min-width:760px;width:100%;height:auto;display:block}
  @media(max-width:720px){
    .diagwrap{overflow:hidden}
    .diagwrap svg{min-width:0;width:148%;margin-left:-24%}
  }
  .drawpath{stroke-dasharray:1600;stroke-dashoffset:1600;transition:stroke-dashoffset 2.6s ease .2s}
  .drawn .drawpath{stroke-dashoffset:0}
  .drawpath.dpL{transition:stroke-dashoffset 1.5s ease 1s}
  .drawpath.dpR{transition:stroke-dashoffset 1.5s ease 2.5s}
  .fadept{opacity:0;transition:opacity 1.1s ease}
  .drawn .fadept{opacity:1}
  .drawn .fadept.d0{transition-delay:.05s}.drawn .fadept.d1{transition-delay:.4s}.drawn .fadept.d2{transition-delay:1.8s}
  .drawn .fadept.d3{transition-delay:3.3s}.drawn .fadept.d4{transition-delay:3.9s}.drawn .fadept.dA1{transition-delay:2.35s}.drawn .fadept.dA2{transition-delay:3.85s}

  /* strips */
  .strip{position:relative;overflow:hidden;
    margin-bottom:18px;display:flex;align-items:flex-end;cursor:pointer}
  .strip .bg{position:absolute;inset:0;background-size:cover;background-position:center;
    transition:transform 1.4s ease,opacity .7s ease;opacity:.68}
  .strip:hover .bg{transform:scale(1.035);opacity:.85}
  .strip .shade{position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(7,28,34,.85) 0%,rgba(7,28,34,.45) 46%,rgba(7,28,34,.1) 100%)}
  .strip .in{position:relative;z-index:2;padding:clamp(20px,3vw,36px);max-width:680px}
  .strip .no{font-family:var(--cap);font-size:10px;letter-spacing:.24em;color:var(--cream3)}
  .strip .nm{font-family:var(--mincho);font-size:clamp(19px,3.4vw,26px);letter-spacing:.1em;margin-top:6px}
  .strip .ds{font-size:12.3px;color:var(--cream2);margin-top:10px;line-height:1.95}
  .strip .tg{font-size:10.5px;letter-spacing:.14em;color:var(--cream3);margin-top:10px}
  .morelink{display:inline-block;margin-top:26px;font-family:var(--mincho);font-size:13px;
    letter-spacing:.18em;color:var(--cream2);border-bottom:1px solid var(--hair);
    padding-bottom:6px;transition:color .3s,border-color .3s}
  .morelink:hover{color:var(--cream);border-color:var(--cream2)}

  /* quotes */
  #words{padding:clamp(56px,9vh,96px) 0;display:flex;align-items:center;position:relative;overflow:hidden}#words .wbgs div{position:absolute;inset:0;opacity:0;transition:opacity 2s ease}#words .wbgs div.cur{opacity:1}#words .grid{position:relative;z-index:2}#words .qq .body{text-shadow:0 1px 16px rgba(0,0,0,.55)}
  .qwrap{display:grid;width:100%;text-align:center}
  .qq{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;
    opacity:0;visibility:hidden;transition:opacity 2s ease,visibility 0s linear 2s;
    padding:0 clamp(10px,4vw,60px)}
  .qq.cur{opacity:1;visibility:visible;transition:opacity 2s ease}
  .qq .body{font-family:var(--mincho);font-size:clamp(17px,4vw,25px);letter-spacing:.13em;line-height:2.2;
    text-shadow:0 0 30px rgba(126,196,207,.25)}
  .qq .who{margin-top:24px;font-size:10.5px;letter-spacing:.34em;color:var(--cream3)}

  /* people */
  .pol{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:clamp(26px,4.5vw,64px);
    align-items:start;margin-bottom:clamp(70px,11vh,120px)}
  @media(max-width:860px){.pol{grid-template-columns:1fr}}
  .pol .photocol{position:sticky;top:96px}
  @media(max-width:860px){.pol .photocol{position:static}}
  .pol .photo{aspect-ratio:3/4;background-size:cover;background-position:center top}
  @media(max-width:860px){.pol .photo{aspect-ratio:3/2;background-position:center}}
  .pol h3{font-family:var(--mincho);font-weight:500;font-size:21px;letter-spacing:.12em;margin:20px 0 4px}
  .pol .role{font-size:11.5px;color:var(--cream2);letter-spacing:.06em;margin-top:8px;line-height:2}
  .pol .bio{font-size:12px;color:var(--cream2);line-height:2;margin-top:14px;padding-top:14px;border-top:1px solid var(--hair)}
  .msg .mlabel{font-family:var(--en);font-size:15px;color:var(--cream3);letter-spacing:.1em;margin-bottom:18px}
  .msg p{font-size:13px;color:var(--cream2);line-height:2.15;margin:0 0 1.5em;letter-spacing:.04em}
  .msg p.hl{font-family:var(--mincho);color:var(--cream);font-size:15.5px;letter-spacing:.09em;line-height:2.2;
    padding-left:18px;border-left:1px solid rgba(245,237,226,.35)}

  /* foundations */
  .fmain{border:1px solid var(--hair);padding:clamp(28px,4.5vw,54px);margin-bottom:18px}
  .fmain .t{font-family:var(--mincho);font-size:clamp(19px,3.6vw,24px);letter-spacing:.12em}
  .fmain .s{font-family:var(--en);font-size:13px;color:var(--cream3);margin-top:8px;letter-spacing:.06em}
  .fmain p{font-size:13px;color:var(--cream2);margin:18px 0 0;max-width:46em;line-height:2.05}
  .fgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(22px,3.5vw,44px);align-items:center}
  @media(max-width:860px){.fgrid{grid-template-columns:1fr}}
  .fimg{border:none;display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
  .fsub{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:760px){.fsub{grid-template-columns:1fr}}
  .f{border:1px solid var(--hair);padding:clamp(24px,3.4vw,38px)}
  .f .t{font-family:var(--mincho);font-size:16px;letter-spacing:.1em}
  .f .s{font-family:var(--en);font-size:12px;color:var(--cream3);margin-top:5px}
  .f p{font-size:12.3px;color:var(--cream2);margin:14px 0 0;line-height:2}

  .cta-line{font-family:var(--mincho);font-size:clamp(19px,4.2vw,26px);letter-spacing:.14em;margin:14px 0 8px}
  .cta-note{font-size:12.5px;color:var(--cream2);max-width:40em}
  .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
  .btn{font-family:var(--mincho);font-size:12.5px;letter-spacing:.2em;
    padding:15px 38px;border:1px solid var(--cream2);transition:.3s;color:var(--cream);cursor:pointer;background:none}
  .btn:hover{background:var(--cream);color:#0C2930}

  footer{border-top:1px solid var(--hair);margin-top:clamp(60px,10vh,110px);background:rgba(5,20,26,.55)}
  .fgrid2{display:grid;grid-template-columns:1.3fr .8fr 1.1fr;gap:clamp(20px,3.4vw,48px);
    padding:clamp(44px,7vh,70px) clamp(22px,5vw,56px) clamp(30px,4vh,44px)}
  @media(max-width:760px){.fgrid2{grid-template-columns:1fr}}
  footer .tag{font-size:11.5px;color:var(--cream2);margin-top:16px;line-height:2;letter-spacing:.06em}
  footer h3{font-family:var(--mincho);font-size:12px;letter-spacing:.2em;color:var(--cream3);margin:0 0 14px;font-weight:500}
  footer ul{list-style:none;margin:0;padding:0}
  footer li{margin-bottom:8px}
  footer li a{font-size:12px;color:var(--cream2);letter-spacing:.06em;transition:color .3s}
  footer li a:hover{color:var(--cream)}
  .fbottom{border-top:1px solid var(--hair);padding:20px clamp(22px,5vw,56px) 26px;
    font-family:var(--cap);font-size:11px;letter-spacing:.2em;color:rgba(245,237,226,.65);text-transform:uppercase}
  .proto{position:fixed;left:14px;bottom:14px;z-index:60;background:rgba(7,28,34,.85);
    border:1px solid var(--hair);color:var(--cream3);font-size:9.5px;
    letter-spacing:.16em;padding:6px 12px;border-radius:20px}

  .sched{columns:2;column-gap:34px;font-size:12.5px;color:var(--cream2);line-height:2.2;letter-spacing:.04em;margin:14px 0 0;padding:0;list-style:none}
  @media(max-width:640px){.sched{columns:1}}
  .poem{font-family:var(--mincho);color:var(--cream);font-size:15px;letter-spacing:.1em;line-height:2.3;
    padding-left:18px;border-left:1px solid rgba(245,237,226,.35);margin:22px 0}
  .lphero{position:relative;min-height:58svh;display:flex;align-items:flex-end;overflow:hidden;border-top:none}
  .lphero .hbg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5}
  .lphero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,32,39,.1) 0%,rgba(15,47,55,.55) 55%,rgba(18,56,65,.96) 96%);pointer-events:none}
  .lphero .hin{position:relative;z-index:2;padding-top:15svh;padding-bottom:7svh;width:100%}
  .lphero h1{font-family:var(--mincho);font-weight:500;font-size:clamp(30px,5.8vw,50px);letter-spacing:.1em;margin:10px 0 0;line-height:1.6;text-shadow:0 2px 30px rgba(4,18,24,.5)}
  .lphero .hlede{margin-top:20px;max-width:42em;color:var(--cream2);font-size:13.5px;line-height:2.05}
  .lphero .chips{margin-top:14px;font-size:12px;color:var(--cream3);letter-spacing:.08em}
  .lphero .btn{margin-top:28px;display:inline-block}
  .pgate .pform{display:flex;gap:12px;margin-top:18px;max-width:340px}
  .pgate input{flex:1;background:rgba(245,237,226,.06);border:1px solid var(--hair);color:var(--cream);
    font-size:14px;padding:12px 14px;text-align:center;letter-spacing:.3em;outline:none}
  .pgate input:focus{border-color:rgba(245,237,226,.4)}
  .pgate .perr{color:#E8A9A0;font-size:10.5px;letter-spacing:.1em;margin-top:10px;min-height:16px}
  .pgate .pbody{display:none;margin-top:18px}
  .fsub.f3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:860px){.fsub.f3{grid-template-columns:1fr}}
  .fieldimg{filter:brightness(.8) saturate(1.3)}
  .cap{font-size:11px;color:var(--cream3);margin-top:12px;letter-spacing:.08em;text-align:center}
  .menubtn{display:none;background:none;border:none;padding:6px;cursor:pointer;margin-left:14px}
  .menubtn img{height:24px;display:block;filter:brightness(.72) saturate(.8);transition:transform .3s}
  .menubtn:hover img{transform:scale(1.12)}
  #mnav{position:fixed;top:0;left:0;right:0;bottom:auto;z-index:39;background:rgba(6,24,30,.94);display:none;
    flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:18px;backdrop-filter:blur(10px);
    min-height:0;padding:80px 24px 30px;border-bottom:1px solid rgba(245,237,226,.14);box-shadow:0 18px 40px rgba(0,0,0,.3)}
  body.mopen #mnav{display:flex}
  #mnav a{font-family:var(--cap);font-size:12.5px;letter-spacing:.3em;color:var(--cream)}
  #mnav .langsw{margin:14px 0 0;font-size:13px}
  #mnav .mheart{display:none}
  @media(max-width:720px){header nav{display:none}header .langsw{display:none}.menubtn{display:block}
    header .grid{padding:0 22px}}

  /* ── Living Water Hero（hero-water.js が #hero.gl を付与）── */
  #heroWater{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:0}
  #hero.gl #heroWater{display:block}
  #hero.gl .shimmer{opacity:.35}
  #hero .inner{z-index:2}
  /* ⑥ 質感: 極薄フィルムグレイン（hero全面・文字の下） */
  #hero::before{content:"";position:absolute;inset:-40%;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="180" height="180" filter="url(%23n)"/></svg>');
    background-size:180px 180px;animation:hcgrain 1.2s steps(4) infinite}
  @keyframes hcgrain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-2%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(1%,1%)}}
  /* ① 呼吸: hero-water.js が --breath(0..1, 0.1Hz) を供給。背景の燐光が同じ拍で満ち引き */
  #waterglow{opacity:calc(.36 + var(--breath,.5)*.28)}
  #waterglow2{opacity:calc(.30 + var(--breath,.5)*.24)}
  /* ⑤ 言語切替の溶暗（site.js が body.langx を付与） */
  main,footer{transition:opacity .22s ease}
  body.langx main,body.langx footer{opacity:0}
  @media (prefers-reduced-motion: reduce){
    #hero::before{animation:none}
    #waterglow,#waterglow2{opacity:.5}
    body.langx main,body.langx footer{opacity:1}
  }

  /* ⑤ 墨の見出し: heroの大見出しが筆で引かれるように現れる（既存riseに墨ワイプを重ねる） */
  #hero .statement .rise{clip-path:inset(-12% 103% -12% -3%)}
  .loaded #hero .statement .rise{clip-path:inset(-12% -6% -12% -3%);
    transition:opacity 1.5s ease,transform 1.7s ease,filter 1.9s ease,clip-path 2.1s cubic-bezier(.3,.55,.25,1)}
  @media (prefers-reduced-motion: reduce){
    #hero .statement .rise,.loaded #hero .statement .rise{clip-path:none;transition:none}
  }


  /* heroから次のセクションへ、そのまま海に沈んでいく（境界線と色段差を消す） */
  #hero + section{border-top:none}
  /* ── モバイル上書き（基底ルールより後に置くこと） ── */
  @media(max-width:720px){
    #hero{min-height:80svh}
    #hero .inner{padding:32svh clamp(22px,5vw,56px) 6svh}
    #hero .statement{font-size:clamp(20px,6.6vw,29px);letter-spacing:.08em}
    .logo{height:21px}   /* 他ページのヘッダーロゴと統一 */
  }
  /* 見出し前のセクション番号は使わない（2026-07-09） */
  main .num{display:none}
  /* 名言セクションの縦を締める（モバイル） */
  @media(max-width:720px){
    #words .qq .body{line-height:1.95}
    .qq .who{margin-top:16px}
  }

  /* 英語版は一旦非公開（切替UIを隠す） */
  .langsw{display:none!important}

  /* 可読性: 本文は禁則強化・字間ひかえめ */
  body{line-break:strict}
  main p{letter-spacing:.03em}

  /* PROJECTSドロップダウン(PCのみ) */
  header nav .navdd{position:relative;display:inline-block}
  header nav .navdd>.ddpanel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);padding:18px 22px;display:none;flex-direction:column;gap:11px;background:rgba(7,26,32,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(245,237,226,.14);min-width:230px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
  header nav .navdd:hover>.ddpanel{display:flex}
  header nav .ddpanel a{font-size:11px;letter-spacing:.14em;color:var(--cream2);white-space:nowrap}
  header nav .ddpanel a:hover{color:var(--cream)}
  @media(max-width:720px){header nav .navdd>.ddpanel{display:none!important}}

  /* 潜水の光の微粒（抽象・かすか） */
  .hcbub{position:fixed;z-index:5;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(215,242,246,.55) 0%,rgba(215,242,246,0) 70%);
    filter:blur(1px);opacity:0;animation:hcbubUp 4.5s cubic-bezier(.3,.4,.4,1) forwards}
  @keyframes hcbubUp{
    0%{opacity:0;transform:translateY(0) translateX(0)}
    22%{opacity:.2}
    60%{opacity:.14}
    100%{opacity:0;transform:translateY(-17vh) translateX(var(--sway,6px))}
  }
  /* ── ページ間の水の連続性 (View Transitions / 対応ブラウザのみ) ── */
  @media (prefers-reduced-motion: no-preference){
    @view-transition{navigation:auto}
    ::view-transition-old(root){animation:hcVtOut .45s cubic-bezier(.4,0,.7,1) both}
    ::view-transition-new(root){animation:hcVtIn .55s cubic-bezier(.22,.55,.25,1) both}
    @keyframes hcVtOut{to{opacity:0;transform:translateY(-12px)}}
    @keyframes hcVtIn{from{opacity:0;transform:translateY(16px)}}
  }