/* 2026-09-13 ヘッダー。ワークショップに着地したあと、上へスクロールしたときだけ降りてくる。
   見た目は verion-japan.co.jp の現行ヘッダーに合わせ、ロゴだけ VERI●N JAPAN に差し替えている。 */
.vhead{
 position:fixed; left:0; right:0; top:0; z-index:60; height:64px;
 background:rgba(255,255,255,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
 border-bottom:1px solid rgba(18,17,16,.13);
 font-family:"Inter","Hiragino Sans","Noto Sans CJK JP","Yu Gothic UI","Meiryo",sans-serif;
 transform:translateY(-100%); opacity:0; pointer-events:none;
 transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .28s ease;
}
.vhead[data-show="1"]{transform:none; opacity:1; pointer-events:auto}
.vhead-in{display:flex; align-items:center; justify-content:space-between; gap:18px;
 height:100%; max-width:1280px; margin:auto; padding:0 40px}

/* ロゴ。支給された PNG をそのまま使う（文字として組み直さない）。
   横幅を従来の文字版と同じ 113px に合わせてあるので、VERION の大きさは変わらない。
   高さは JAPAN が大きくなったぶん 39 → 33px。 */
.vhead-logo{display:block; line-height:0; text-decoration:none}
.vhead-logo img{display:block; width:113px; height:auto}

.vhead-list{display:flex; align-items:center; gap:26px}
.vhead-list a{color:#3c3a37; font-size:13px; font-weight:600; letter-spacing:.3px;
 text-decoration:none; padding:15px 0; white-space:nowrap}
.vhead-list a:hover{color:#e85c24}
.vhead-list a:focus-visible{outline:3px solid #e85c24; outline-offset:4px}
.vhead-lock{color:#b8562f !important}
.vhead-cta{background:#e85c24; color:#fff !important; border-radius:3px;
 padding:10px 16px !important; font-weight:700}
.vhead-cta:hover{background:#d84f1d; color:#fff !important}

.vhead-burger{display:none; width:44px; height:44px; border:0; background:none; padding:10px;
 cursor:pointer; flex-direction:column; justify-content:space-between;
 /* 線の端を本文の面に合わせる。押せる範囲は44pxのまま外へ逃がす */
 margin-right:-10px}
.vhead-burger span{display:block; height:2px; background:#121110; border-radius:2px;
 transition:transform .25s ease,opacity .2s ease}
.vhead[data-open="1"] .vhead-burger span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.vhead[data-open="1"] .vhead-burger span:nth-child(2){opacity:0}
.vhead[data-open="1"] .vhead-burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

/* 帯が出ているあいだは暁の白いロゴを引っ込め、ヘッダー側のロゴに役目を渡す。
   帯が消えれば元どおり出る。下へ進んだときの消え方は workshop.css の --vw-hero が持っている */
html[data-head-logo="hide"] .d-anchor{opacity:0}
.d-anchor{transition:opacity .3s ease}

@media(max-width:900px){
 .vhead-in{padding:0 24px}
 .vhead-burger{display:flex}
 .vhead-list{position:fixed; left:0; right:0; top:64px; display:block;
  background:rgba(255,255,255,.98); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(18,17,16,.13); padding:8px 24px 20px;
  max-height:calc(100dvh - 64px); overflow:auto;
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:transform .26s ease,opacity .22s ease,visibility .22s}
 .vhead[data-open="1"] .vhead-list{transform:none; opacity:1; visibility:visible}
 .vhead-list a{display:block; padding:15px 0; border-bottom:1px solid rgba(18,17,16,.08)}
 .vhead-list a:last-child{border-bottom:0}
 .vhead-cta{display:block; text-align:center; margin-top:14px; padding:15px !important}
}
@media(prefers-reduced-motion:reduce){
 .vhead,.vhead-list,.vhead-burger span,.d-anchor{transition:none}
}