/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4
 * 仮組みのヘッダーとキービジュアルだけを案C（光の差す水中を潜る）に差し替える上書き。site.css の後に読む。
 * fonts: Shippori Mincho B1（ブランド名・見出し）+ Noto Sans JP（本文は仮組みのまま）
 */
:root{
  --kv-font-display:"Shippori Mincho B1","Noto Serif JP",serif;
  --kv-ink:oklch(27% 0.1 262);
  --kv-ink-soft:oklch(40% 0.07 250);
  --kv-aqua-ink:oklch(52% 0.11 220);
  --kv-surface:oklch(91% 0.06 205);
  --kv-paper:oklch(99% 0.006 210);
  --kv-paper-a:oklch(99% 0.006 210 / .9);
  --kv-paper-line:oklch(27% 0.1 262 / .14);
  --kv-glow:oklch(100% 0 0 / .9);
  --kv-shadow:oklch(20% 0.06 262 / .6);
  --kv-ease:cubic-bezier(.65,0,.35,1);
  /* 下の節の色もキービジュアルの水色と紺に寄せる（site.css の色の変数を上書き。配置・書体は変えない） */
  --navy:var(--kv-ink);
  --navy-2:oklch(35% 0.1 255);
  --sky:var(--kv-aqua-ink);
  --sky-2:oklch(80% 0.09 205);
  --sky-3:var(--kv-surface);
  --ivory:oklch(95% 0.03 205);
  --ivory-2:oklch(97.5% 0.016 205);
  --lavender:oklch(89% 0.06 207);
  --lavender-2:oklch(93% 0.04 207);
  --paper:var(--kv-paper);
  --line:oklch(27% 0.1 262 / .12);
  --muted:oklch(27% 0.1 262 / .68);
}
html,body{overflow-x:clip}

/* header */
.nav{padding:14px var(--gutter)}
.nav.scrolled,.nav.solid{background:var(--kv-paper-a);box-shadow:0 1px 0 var(--kv-paper-line)}
.nav .logo{font-family:var(--kv-font-display);font-weight:700;letter-spacing:.08em;color:var(--kv-ink);white-space:nowrap}
.nav-links{font-family:"Noto Sans JP",sans-serif;font-size:14px;font-weight:500;letter-spacing:.04em;gap:32px}
.nav-links a{color:var(--kv-ink);white-space:nowrap;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .18s}
.nav-links a:hover{color:var(--kv-ink);border-bottom-color:currentColor}
.nav-links .cta-link{padding:9px 20px;border:1px solid var(--kv-ink)}
.nav-links .cta-link:hover{background:var(--kv-ink);color:var(--kv-paper)}
.menu-btn{font-family:"Noto Sans JP",sans-serif;font-size:14px;letter-spacing:.04em;border-color:var(--kv-ink);color:var(--kv-ink);background:var(--kv-paper-a)}

/* key visual */
.hero{display:grid;place-items:center;background:var(--kv-surface);padding:120px var(--gutter);color:var(--kv-ink)}
.hero::before{content:"";position:absolute;inset:0;background:url(/assets/img/water.jpg) center/cover no-repeat;transform:scaleY(-1);filter:brightness(1.75) saturate(.85) contrast(.85)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,oklch(97% 0.03 200 / .78) 0%,oklch(92% 0.05 202 / .55) 40%,oklch(90% 0.05 205 / .45) 72%,var(--kv-paper) 100%)}
.kv-shimmer{z-index:1;position:absolute;left:-10%;right:-10%;top:-12%;height:44%;pointer-events:none;background:
  radial-gradient(18% 30% at 20% 60%, var(--kv-glow), transparent 70%),
  radial-gradient(14% 26% at 48% 50%, var(--kv-glow), transparent 70%),
  radial-gradient(20% 30% at 78% 62%, var(--kv-glow), transparent 70%);
  filter:blur(22px);animation:kv-shimmer 10s var(--kv-ease) infinite alternate}
@keyframes kv-shimmer{to{transform:translateX(4%) scaleY(1.1)}}
.kv-beams{z-index:1;position:absolute;inset:0;pointer-events:none}
.kv-beams i{position:absolute;top:-10%;width:12vw;height:120%;transform-origin:top center;background:linear-gradient(180deg,oklch(100% 0 0 / .42),oklch(100% 0 0 / 0) 80%);filter:blur(10px);animation:kv-beam 9s var(--kv-ease) infinite alternate}
.kv-beams i:nth-child(1){left:12%;transform:rotate(14deg);width:7vw}
.kv-beams i:nth-child(2){left:30%;transform:rotate(8deg);animation-delay:-3s}
.kv-beams i:nth-child(3){left:52%;transform:rotate(2deg);width:5vw;animation-delay:-6s}
.kv-beams i:nth-child(4){left:68%;transform:rotate(-6deg);width:10vw;animation-delay:-2s}
.kv-beams i:nth-child(5){left:84%;transform:rotate(-12deg);width:6vw;animation-delay:-5s}
@keyframes kv-beam{from{opacity:.55}to{opacity:1;translate:2vw 0}}
.kv-motes{z-index:1;position:absolute;inset:0;pointer-events:none}
.kv-motes i{position:absolute;width:4px;height:4px;border-radius:50%;background:oklch(100% 0 0 / .8);animation:kv-float 12s var(--kv-ease) infinite alternate}
.kv-motes i:nth-child(1){left:18%;top:62%}.kv-motes i:nth-child(2){left:36%;top:78%;animation-delay:-4s}.kv-motes i:nth-child(3){left:66%;top:70%;animation-delay:-7s}.kv-motes i:nth-child(4){left:82%;top:58%;animation-delay:-2s}
@keyframes kv-float{to{transform:translate(12px,-60px);opacity:.3}}
.hero-inner{position:relative;z-index:2;max-width:1000px;min-width:0}
.hero-mark{width:72px;height:72px;margin:0 auto 32px}
.hero-kicker{font-family:var(--kv-font-display);font-size:clamp(14px,1.4vw,18px);letter-spacing:.14em;color:var(--kv-ink-soft);margin-bottom:32px;font-weight:600}
.hero h1{font-family:var(--kv-font-display);font-weight:700;font-style:normal;font-size:clamp(32px,5.4vw,78px);line-height:1.38;letter-spacing:.06em;color:var(--kv-ink);word-break:keep-all;overflow-wrap:anywhere;min-width:0}
.hero h1 span{display:inline}
.hero h1 .ai{color:var(--kv-aqua-ink)}
.hero-cue{margin-top:64px;font-size:12px;letter-spacing:.3em;color:var(--kv-ink-soft);display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-cue::after{content:"";width:1px;height:56px;background:linear-gradient(var(--kv-ink-soft),transparent)}

@media (max-width:1000px){
  .nav.open,.nav.open .nav-links{background:var(--kv-paper)}
  .nav.open .nav-links a{border-bottom:1px solid var(--kv-paper-line);font-size:16px;padding:14px 0}
  .nav .logo{font-size:15px}
  .hero{padding:110px var(--gutter) 72px}
  .hero-mark{width:56px;height:56px}
  .hero-cue{margin-top:48px}
}
@media (prefers-reduced-motion: reduce){
  .kv-shimmer,.kv-beams i,.kv-motes i{animation:none}
}