/* ===== 全ページ共通（くるくる企画） ===== */

/* ---------- 上の帯のリンク ---------- */
/* 中身は /parts/gnav.html を読み込んで入れる。読み込むまでの間も帯の高さと幅は変わらないよう、場所だけ先に取っておく */
.gnav{display:flex; align-items:center; gap:16px; min-width:196px; min-height:28px; justify-content:flex-end; view-transition-name:gnav;}
.gnav > *{opacity:0; transition:opacity .25s;}
.gnav.is-ready > *{opacity:1;}
.gnav__link{position:relative; font-family:"Inter","Zen Kaku Gothic New",sans-serif; font-weight:500; font-size:13px; line-height:1.4; text-decoration:none; color:inherit;}
.gnav__link::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right center; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.gnav__link:hover::after, .gnav__link[aria-current="page"]::after{transform:scaleX(1); transform-origin:left center;}
.gnav__contact{font-family:"Inter","Zen Kaku Gothic New",sans-serif; font-weight:500; font-size:13px; line-height:1.4; text-decoration:none; color:inherit; border:1px solid currentColor; border-radius:999px; padding:3px 13px 4px; transition:background .35s, color .35s;}
.gnav__contact:hover, .gnav__contact[aria-current="page"]{background:#141414; color:#f3f1ec; border-color:#141414;}
@media (min-width:860px){ .gnav{gap:26px; min-width:226px;} .gnav__link, .gnav__contact{font-size:14px;} }

/* ---------- ページの切り替え ---------- */
/* 中身だけ入れ替えた時（is-soft）は、上の帯を最初から出したままにする（各ページは読み込み時に帯をふわっと出す作りのため） */
html.is-soft .top, html.is-soft .hero__top{opacity:1 !important; transition:none !important;}
/* 入れ替えはその場で行う。各ページの冒頭の出現の動きが、切り替わりの演出になる */