/* 最初の画面 v5（D案＝図形＋文字）。接頭辞 hv5- で既存の部品と衝突させない。色は style.css の変数（--paper --ink --navy --sand）を使う
   出典: o-snb-theme/design/fv_v5/（D.html・assets/opening.css・assets/common.css の v5 の上書き）。2026-11-08 */
:root{--hv5-p:1;--hv5-sy:0;--hv5-header:92px}

/* ===== 幕（開いた瞬間に始まる。CSSだけで動く。全体で2.8秒） ===== */
.hv5-opening{position:fixed;inset:0;z-index:200;background:#f5f2eb;color:#14263b;display:flex;align-items:center;justify-content:center;pointer-events:none;
  animation:hv5-lift .7s cubic-bezier(.76,0,.24,1) 2.1s forwards, hv5-hide 0s linear 2.82s forwards}
@keyframes hv5-lift{to{clip-path:inset(0 0 100% 0)}}
@keyframes hv5-hide{to{visibility:hidden}}
.hv5-op-bar{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(20,38,59,.08)}
.hv5-op-bar i{display:block;height:100%;background:#b7a582;transform-origin:left;animation:hv5-grow 2.0s cubic-bezier(.4,0,.2,1) .05s both}
@keyframes hv5-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hv5-op-lockup{display:flex;align-items:flex-start;gap:26px;padding:0 24px}
.hv5-op-mark{width:56px;height:56px;flex:none;margin-top:4px}
.hv5-op-mark svg{display:block;width:100%;height:100%;overflow:visible}
.hv5-op-ring{fill:none;stroke:#14263b;stroke-width:1.3;opacity:.34}
.hv5-op-arc{fill:none;stroke:#b7a582;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:.72;transform-origin:center;
  animation:hv5-spin .9s cubic-bezier(.65,0,.35,1) 2, hv5-close .5s cubic-bezier(.4,0,.2,1) 1.85s forwards}
@keyframes hv5-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes hv5-close{to{stroke-dashoffset:0}}
.hv5-op-dot{fill:#b7a582;transform-origin:center;animation:hv5-dot .5s cubic-bezier(.16,.84,.3,1) .7s both}
@keyframes hv5-dot{from{transform:scale(0)}to{transform:scale(1)}}
.hv5-op-word{max-width:0;overflow:hidden;animation:hv5-open .6s cubic-bezier(.16,.84,.3,1) .9s forwards}
@keyframes hv5-open{from{max-width:0}to{max-width:720px}}
.hv5-op-name,.hv5-op-line{margin:0;overflow:hidden;white-space:nowrap;font-family:var(--display);font-weight:500;font-feature-settings:"palt";color:#14263b}
.hv5-op-name{font-size:18px;line-height:1.5;letter-spacing:.24em;margin-bottom:10px}
.hv5-op-line{font-size:clamp(26px,2.7vw,38px);line-height:1.4;letter-spacing:.04em}
.hv5-op-name span,.hv5-op-line span{display:block;transform:translateY(112%);animation:hv5-rise .62s cubic-bezier(.16,.84,.3,1) forwards}
.hv5-op-name span{animation-delay:.95s}
.hv5-op-line:nth-of-type(2) span{animation-delay:1.1s}
.hv5-op-line:nth-of-type(3) span{animation-delay:1.22s}
.hv5-op-line:nth-of-type(4) span{animation-delay:1.34s}
@keyframes hv5-rise{to{transform:none}}
html.hv5-skip .hv5-opening,html.motion-paused .hv5-opening{display:none}
@media (prefers-reduced-motion:reduce){.hv5-opening{display:none}}

/* ===== 送り方: 進み --hv5-p（0〜1）で、止めたアニメーションの時刻を決める。スクリプトが無ければ完成形 ===== */
html.hv5-js .hv5-s{animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;animation-play-state:paused;animation-delay:calc(var(--hv5-p) * -1s)}
html.motion-paused .hv5-s{animation:none!important}
@media (prefers-reduced-motion:reduce){.hv5-s{animation:none!important}}

/* ===== 舞台（濃紺）。ヘッダーは既存の固定ヘッダーのまま、その下から1画面 ===== */
.hv5-hero{position:relative;background:var(--navy);color:var(--paper)}
.hv5-stage{position:relative;overflow:hidden;min-height:calc(100vh - var(--hv5-header));min-height:calc(100svh - var(--hv5-header));background:var(--navy)}
.hv5-mesh{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.hv5-mesh.on{opacity:1}
.hv5-arc{position:absolute;z-index:1;width:86vmin;height:86vmin;right:-20vmin;top:-30vmin;border-radius:50%;border:1px solid transparent;border-top-color:var(--sand);border-right-color:var(--sand);pointer-events:none;animation-name:hv5-arcTurn}
@keyframes hv5-arcTurn{0%{opacity:0;transform:rotate(-150deg)}18%{opacity:.55}100%{opacity:.55;transform:rotate(-20deg)}}

/* 図形: 線の設計 */
.hv5-figwrap{position:absolute;inset:0;z-index:2;pointer-events:none;transform:translateY(calc(var(--hv5-sy) * .10px))}
.hv5-fig{position:absolute;left:50%;top:50%;width:min(58vw,720px);transform:translate(-50%,-52%);animation-name:hv5-figMove;--fx:calc(-50% + 27vw);--fs:.68}
.hv5-fig svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes hv5-figMove{0%,50%{transform:translate(-50%,-52%) scale(1)}68%,100%{transform:translate(var(--fx),-46%) scale(var(--fs))}}
.hv5-fig .n{transform-box:fill-box;transform-origin:center}
.hv5-fig .n1{animation-name:hv5-nodeIn1}.hv5-fig .n2{animation-name:hv5-nodeIn2}.hv5-fig .n3{animation-name:hv5-nodeIn3}.hv5-fig .n4{animation-name:hv5-nodeIn4}
@keyframes hv5-nodeIn1{0%,6%{opacity:0;transform:translate(-38vw,26vh) rotate(-28deg) scale(.6)}30%,100%{opacity:1;transform:none}}
@keyframes hv5-nodeIn2{0%,10%{opacity:0;transform:translate(-20vw,-34vh) rotate(22deg) scale(.6)}34%,100%{opacity:1;transform:none}}
@keyframes hv5-nodeIn3{0%,14%{opacity:0;transform:translate(24vw,30vh) rotate(-18deg) scale(.6)}38%,100%{opacity:1;transform:none}}
@keyframes hv5-nodeIn4{0%,18%{opacity:0;transform:translate(36vw,-24vh) rotate(26deg) scale(.6)}42%,100%{opacity:1;transform:none}}
.hv5-fig .ln{fill:none;stroke:var(--sand);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation-name:hv5-drawLine}
@keyframes hv5-drawLine{0%,26%{stroke-dashoffset:1}52%,100%{stroke-dashoffset:0}}
.hv5-fig .knot{fill:var(--sand);transform-box:fill-box;transform-origin:center;animation-name:hv5-knotIn}
@keyframes hv5-knotIn{0%,50%{opacity:0;transform:scale(.2)}56%,100%{opacity:1;transform:none}}
.hv5-fig .n circle.c{fill:var(--navy);stroke:var(--paper);stroke-width:1.5}
.hv5-fig .n circle.d{fill:var(--sand)}
.hv5-fig .n text{font-family:var(--sans);font-size:14px;font-weight:600;fill:var(--paper);letter-spacing:.06em}
.hv5-fig .n text.en{font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:400;letter-spacing:.18em;opacity:.7}

/* 言葉 */
.hv5-copy{position:absolute;left:216px;top:51%;z-index:3;width:min(56%,700px);transform:translateY(-50%);color:var(--paper)}
.hv5-copy .ph{display:inline-block}
.hv5-eyebrow{display:flex;align-items:center;gap:0;margin:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:500;letter-spacing:.22em;line-height:1.5;color:var(--paper);animation-name:hv5-eyebrowShow}
.hv5-eyebrow .pl,.hv5-eyebrow .pr{font-size:22px;font-weight:300;line-height:1;color:var(--sand);transform:translateY(-1px)}
.hv5-eyebrow .pt{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation-name:hv5-parenOpen}
.hv5-eyebrow .pt>span{display:inline-block;padding:0 14px}
@keyframes hv5-eyebrowShow{0%,22%{opacity:0}32%,100%{opacity:1}}
@keyframes hv5-parenOpen{0%,30%{max-width:0}48%,100%{max-width:420px}}
.hv5-copy h1{margin:24px 0 0;font-family:var(--display);font-weight:500;font-size:clamp(40px,4.6vw,64px);line-height:1.38;letter-spacing:.02em;font-feature-settings:"palt";color:var(--paper)}
.hv5-copy h1>span{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hv5-copy h1>span>span{display:block}
.hv5-copy h1>span:nth-child(1)>span{animation-name:hv5-lineup1}
.hv5-copy h1>span:nth-child(2)>span{animation-name:hv5-lineup2}
.hv5-copy h1>span:nth-child(3)>span{animation-name:hv5-lineup3}
@keyframes hv5-lineup1{0%,54%{transform:translateY(112%)}66%,100%{transform:none}}
@keyframes hv5-lineup2{0%,59%{transform:translateY(112%)}71%,100%{transform:none}}
@keyframes hv5-lineup3{0%,64%{transform:translateY(112%)}76%,100%{transform:none}}
.hv5-lead{position:relative;margin:28px 0 0;padding-left:22px;font-size:18px;line-height:1.9;letter-spacing:.03em;font-feature-settings:"palt";color:var(--paper);animation-name:hv5-riseLead}
.hv5-lead:before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--sand);transform-origin:top;animation-name:hv5-drawY}
html.hv5-js .hv5-lead:before{animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;animation-play-state:paused;animation-delay:calc(var(--hv5-p) * -1s)}
html.motion-paused .hv5-lead:before{animation:none!important}
.hv5-lead>span{display:block}
.hv5-lead>span+span{font-weight:600}
@keyframes hv5-riseLead{0%,72%{opacity:0;transform:translateY(10px)}83%,100%{opacity:1;transform:none}}
@keyframes hv5-drawY{0%,70%{transform:scaleY(0)}80%,100%{transform:scaleY(1)}}
.hv5-body{margin:18px 0 0;max-width:34em;font-size:16px;line-height:1.95;letter-spacing:.02em;color:var(--paper);opacity:.86;animation-name:hv5-riseBody}
@keyframes hv5-riseBody{0%,77%{opacity:0;transform:translateY(10px)}87%,100%{opacity:.86;transform:none}}
.hv5-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px 34px;margin-top:30px}
.hv5-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:58px;padding:0 22px 0 28px;background:var(--paper);color:var(--ink);font-size:15px;font-weight:600;letter-spacing:.06em;line-height:1.5;text-decoration:none;transition:transform .2s;animation-name:hv5-riseBtn}
.hv5-btn span{font-size:20px;font-weight:400;line-height:1}
.hv5-btn:hover{transform:translate(-2px,-2px);color:var(--ink)}
@keyframes hv5-riseBtn{0%,81%{opacity:0;transform:translateY(10px)}91%,100%{opacity:1;transform:none}}
.hv5-link{display:inline-flex;align-items:center;gap:14px;padding-bottom:5px;border-bottom:1px solid rgba(245,242,235,.55);color:var(--paper);font-size:15px;font-weight:500;letter-spacing:.05em;line-height:1.6;white-space:nowrap;text-decoration:none;animation-name:hv5-riseLink}
.hv5-link span{font-size:16px;line-height:1}
.hv5-link:hover{border-bottom-color:var(--paper);color:var(--paper)}
@keyframes hv5-riseLink{0%,84%{opacity:0;transform:translateY(10px)}93%,100%{opacity:1;transform:none}}
.hv5-micro{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:14px;line-height:1.7;letter-spacing:.03em;color:var(--paper);opacity:.8;animation-name:hv5-riseMicro}
.hv5-micro:before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--sand)}
@keyframes hv5-riseMicro{0%,87%{opacity:0;transform:translateY(8px)}96%,100%{opacity:.8;transform:none}}
.hv5-scroll{position:absolute;right:48px;bottom:30px;z-index:3;display:inline-flex;align-items:center;gap:12px;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.22em;line-height:1.5;color:var(--paper);text-decoration:none;opacity:.8;animation-name:hv5-scrollIn}
.hv5-scroll span{display:inline-block;font-family:var(--sans);letter-spacing:0;font-size:15px;animation:hv5-nudge 2.4s ease-in-out infinite}
@keyframes hv5-scrollIn{0%,90%{opacity:0}100%{opacity:.8}}
@keyframes hv5-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
html.motion-paused .hv5-scroll span{animation:none}

/* 帯 */
.hv5-band{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:56px;min-height:88px;padding:0 48px 0 216px;background:var(--paper);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hv5-band p{margin:0;font-family:var(--display);font-size:18px;font-weight:500;letter-spacing:.08em;line-height:1.6;white-space:nowrap;font-feature-settings:"palt"}
.hv5-band .ph{display:inline-block}
.hv5-thread{display:flex;align-items:center;max-width:640px;margin:0;padding:0;list-style:none}
.hv5-thread li{display:flex;align-items:center;gap:12px;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.2em;line-height:1.5;color:#5c6d78;white-space:nowrap}
.hv5-thread li:before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--sand);box-shadow:0 0 0 4px rgba(183,165,130,.2)}
.hv5-thread li:not(:last-child){flex:1}
.hv5-thread li:not(:last-child):after{content:"";flex:1;height:1px;margin:0 6px 0 10px;background:var(--sand)}

/* 側面ナビ（番号だけ。現在地と触れたときだけ章名が開く）と進捗線。PCのみ */
.hv5-sidenav{position:fixed;left:14px;top:50%;z-index:60;display:none;flex-direction:column;gap:2px;transform:translateY(-50%);color:var(--ink);transition:color .35s}
.hv5-sidenav a{display:flex;align-items:center;gap:0;height:26px;padding:0 9px;border-radius:999px;font:11px/1 Arial,Helvetica,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:inherit;text-decoration:none;opacity:.55;transition:opacity .3s,background .3s,color .3s}
.hv5-sidenav a b{font-weight:400;min-width:18px;text-align:center}
.hv5-sidenav a span{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .3s,opacity .3s,padding .3s}
.hv5-sidenav a:hover span,.hv5-sidenav a:focus-visible span,.hv5-sidenav a.is-active span{max-width:180px;opacity:1;padding-left:8px}
.hv5-sidenav a.is-active{opacity:1;background:var(--ink);color:var(--paper)}
html.hv5-dark .hv5-sidenav{color:var(--paper)}
html.hv5-dark .hv5-sidenav a.is-active{background:var(--paper);color:var(--ink)}
.hv5-progress{position:fixed;top:0;right:0;bottom:0;width:2px;z-index:60;background:rgba(20,38,59,.08)}
.hv5-progress i{display:block;height:100%;background:var(--sand);transform:scaleY(0);transform-origin:top}
@media (min-width:1100px){.hv5-sidenav{display:flex}}

/* 狭い幅とスマホ */
@media (max-width:1180px){.hv5-copy{width:min(54%,560px)}}
@media (max-width:1099px){.hv5-copy{left:40px}.hv5-band{padding-left:40px}}
@media (max-width:900px){
  .hv5-op-lockup{gap:16px;padding:0 20px}
  .hv5-op-mark{width:40px;height:40px;margin-top:2px}
  .hv5-op-name{font-size:15px;margin-bottom:6px}
  .hv5-op-line{font-size:clamp(21px,6vw,26px)}
  @keyframes hv5-open{from{max-width:0}to{max-width:300px}}
  .hv5-progress{display:none}
  .hv5-stage{min-height:0;padding:20px 0 36px;display:flex;flex-direction:column}
  .hv5-figwrap{position:relative;inset:auto;transform:none}
  .hv5-fig{position:relative;left:auto;top:auto;width:min(78vw,340px);margin:6px auto 10px;transform:none;animation-name:hv5-figMoveSp}
  @keyframes hv5-figMoveSp{0%,50%{transform:scale(1.06)}68%,100%{transform:scale(1)}}
  @keyframes hv5-nodeIn1{0%,6%{opacity:0;transform:translate(-120px,80px) rotate(-28deg) scale(.6)}30%,100%{opacity:1;transform:none}}
  @keyframes hv5-nodeIn2{0%,10%{opacity:0;transform:translate(-70px,-110px) rotate(22deg) scale(.6)}34%,100%{opacity:1;transform:none}}
  @keyframes hv5-nodeIn3{0%,14%{opacity:0;transform:translate(80px,100px) rotate(-18deg) scale(.6)}38%,100%{opacity:1;transform:none}}
  @keyframes hv5-nodeIn4{0%,18%{opacity:0;transform:translate(110px,-80px) rotate(26deg) scale(.6)}42%,100%{opacity:1;transform:none}}
  .hv5-arc{width:90vmin;height:90vmin;right:-44vmin;top:-14vmin}
  .hv5-copy{position:relative;left:auto;top:auto;transform:none;width:auto;padding:0 20px}
  .hv5-eyebrow{font-size:12px;letter-spacing:.16em}
  .hv5-eyebrow .pl,.hv5-eyebrow .pr{font-size:18px}
  .hv5-eyebrow .pt>span{padding:0 10px}
  .hv5-copy h1{margin-top:14px;font-size:clamp(28px,8.4vw,36px);line-height:1.42}
  .hv5-lead{margin-top:18px;padding-left:16px;font-size:16px;line-height:1.8;letter-spacing:0}
  .hv5-body{margin-top:14px;line-height:1.85;letter-spacing:0}
  .hv5-body .desktop-br{display:none}
  .hv5-actions{flex-direction:column;align-items:stretch;gap:14px;margin-top:22px}
  .hv5-btn{min-height:54px;padding:0 18px 0 20px}
  .hv5-link{align-self:flex-start}
  .hv5-micro{margin-top:14px;align-items:flex-start}
  .hv5-micro:before{margin-top:10px}
  .hv5-scroll{position:static;margin:26px 20px 0;align-self:flex-end}
  .hv5-band{grid-template-columns:1fr;gap:18px;padding:24px 20px 28px}
  .hv5-band p{font-size:17px;white-space:normal}
  .hv5-thread{position:relative;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;max-width:none;padding-top:22px}
  .hv5-thread:before{content:"";position:absolute;top:4px;left:4px;right:0;height:1px;background:var(--sand)}
  .hv5-thread li{position:relative;display:block;letter-spacing:.05em;font-size:11px}
  .hv5-thread li:not(:last-child){flex:none}
  .hv5-thread li:before{position:absolute;top:-22px;left:0}
  .hv5-thread li:not(:last-child):after{content:none}
}