/* ══════════════════════════════════════════════════════════
   RIO GROUP — 枠のないヘッダー / 全画面メニュー / フッター
   ── 参照した所作は jsoulb.jp：最上部では地を持たない、線を引かない、
      いま見ている節にだけ細い下線が入る。
   ── 色と書体は index.html / page.css の :root をそのまま使う。
      ここで新しい色は一切作らない（フォールバック値は :root が無い
      ページで崩れないための保険で、本番では常に上書きされる）。
   ══════════════════════════════════════════════════════════ */

/* ── 上部 ──────────────────────────────────────────
   🔴 backdrop-filter は使わない。真下がヒーローの映像で、
      毎フレーム背景を取り直して再合成する＝確実にカクつく。
      地の色はベタのグラデーションだけで作る。
   🔴 border は引かない（クライアント指摘の「枠のないやつ」）。
      切れ目は下端を透明に落とすグラデーションで作る。
   z-index 78 = .ask(60) と #aitoast/#detail(80) の間。
   幕(#curtain 100)・同意(#aigate 90)・キャスト詳細(80) には必ず負ける。 */
.rgnav{
  position:fixed;top:0;left:0;right:0;z-index:78;
  display:flex;align-items:center;
  gap:clamp(14px,3vw,42px);
  padding:clamp(13px,2.2vh,24px) clamp(16px,5vw,64px);
  padding-left:max(clamp(16px,5vw,64px),env(safe-area-inset-left));
  padding-right:max(clamp(16px,5vw,64px),env(safe-area-inset-right));
  background:transparent;
  transition:background .55s var(--ease,cubic-bezier(.16,1,.3,1)),
             padding-block .55s var(--ease,cubic-bezier(.16,1,.3,1)),
             opacity .5s var(--ease,cubic-bezier(.16,1,.3,1));
}
/* スクロールしたら墨がうっすら入る。下端は透明へ落とし、線に見せない */
.rgnav.is-scrolled{
  padding-block:clamp(9px,1.5vh,15px);
  background:linear-gradient(180deg,
    rgba(5,4,6,.94) 0%, rgba(5,4,6,.86) 52%, rgba(5,4,6,.42) 82%, rgba(5,4,6,0) 100%);
}

/* 🔴 幕（body.locked）が出ている間とキャスト詳細が開いている間は隠す。
      index.html 側は詳細を開くときも body.locked を付けるので、この一行で両方効く。 */
body.locked .rgnav,
body.locked .rgtop{opacity:0;pointer-events:none}

.rgnav-home{display:block;flex:0 0 auto;line-height:0;border-bottom:0}
/* 10/6 現行ロゴ「リオグル」（2段組み・横2.4:1）。旧ロゴ（横長4.7:1）の幅指定のままだと縦に大きくなるので高さで揃える */
.rgnav-home img{
  height:clamp(30px,3.2vw,42px);width:auto;
  opacity:.94;transition:opacity .4s var(--ease,ease)}
.rgnav-home:hover img{opacity:1}

/* 🔴 ヒーロー内にも同じロゴが左上に置かれている（.hero .logo）。
      ヘッダーが同じ位置に出ると二重になるので、
      JS が実際に動いたページ（html.rgnav-on）でだけ伏せる。
      JS が落ちたときはヒーローのロゴがそのまま残る＝ロゴ無しにはならない。 */
html.rgnav-on .hero .logo{opacity:0;pointer-events:none}

/* ── 英字ナビ ──────────────────────────────────── */
.rgnav-links{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);
  margin-left:auto}
.rgnav-link{
  position:relative;display:inline-block;padding:6px 1px 8px;
  font-family:var(--serif,serif);font-weight:400;
  font-size:clamp(11px,1.05vw,13.5px);letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;white-space:nowrap;
  color:var(--silver,#C9CBD2);text-decoration:none;border-bottom:0;
  transition:color .4s var(--ease,ease)}
/* いま見ている節の下線。線は引かず、この一本だけを引くのが jsoulb の作法 */
.rgnav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--gold-line,#B08D53);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease,ease)}
.rgnav-link:hover{color:var(--fg,#F2EFE9)}
.rgnav-link:hover::after{transform:scaleX(1);background:var(--silver,#C9CBD2)}
.rgnav-link.is-here{color:var(--fg,#F2EFE9)}
.rgnav-link.is-here::after{transform:scaleX(1)}
/* RIO AI だけは差し色を一点。ここが他と違う導線だと一目で分かるように */
.rgnav-link[data-accent]::before{
  content:"";position:absolute;left:-9px;top:calc(50% - 3px);
  width:3px;height:3px;border-radius:50%;background:var(--hi,#C8354A);opacity:.9}

/* ── ハンバーガー：三本線にしない ──────────────────
   長さの違う二本の細線を段違いに置く（襖の引手・掛け軸の軸のつもり）。
   開くと二本がそのまま交差して × になるので、閉じる印を別に作らない。 */
.rgnav-burger{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  margin-left:clamp(4px,1.4vw,18px);
  padding:8px 2px;background:none;border:0;cursor:pointer;color:inherit}
.rgnav-burger-l{position:relative;display:block;width:26px;height:12px}
.rgnav-burger-l i{
  position:absolute;left:0;height:1px;background:var(--silver,#C9CBD2);
  transition:width .45s var(--ease,ease),transform .45s var(--ease,ease),
             top .45s var(--ease,ease),background .4s ease}
.rgnav-burger-l i:nth-child(1){top:2px;width:26px}
.rgnav-burger-l i:nth-child(2){top:9px;width:15px}
.rgnav-burger:hover .rgnav-burger-l i:nth-child(2){width:26px}
.rgnav-burger-t{
  font-family:var(--serif,serif);font-size:10.5px;letter-spacing:.3em;text-indent:.3em;
  color:var(--mute,#8A8290);transition:color .4s ease}
.rgnav-burger:hover .rgnav-burger-t{color:var(--silver,#C9CBD2)}
/* 開いている間は × に。位置を揃えてから回すので、線が泳がない */
.rgnav-burger[aria-expanded="true"] .rgnav-burger-l i{width:26px;top:6px}
.rgnav-burger[aria-expanded="true"] .rgnav-burger-l i:nth-child(1){transform:rotate(45deg)}
.rgnav-burger[aria-expanded="true"] .rgnav-burger-l i:nth-child(2){transform:rotate(-45deg)}
.rgnav-burger[aria-expanded="true"] .rgnav-burger-t{color:var(--fg,#F2EFE9)}
.rgnav-burger:focus-visible,.rgnav-home:focus-visible,.rgnav-link:focus-visible,
.rgtop:focus-visible,.rgmenu a:focus-visible{
  outline:1px solid var(--gold-line,#B08D53);outline-offset:4px}

/* ── 隠しメニュー（全画面） ────────────────────────
   ヘッダー(78)より下・.ask(60)より上に敷き、ヘッダーは上に残す。
   ロゴと × が出たまま被さるので、閉じ方が分からなくならない。 */
.rgmenu{
  position:fixed;inset:0;z-index:76;
  visibility:hidden;opacity:0;
  transition:opacity .5s var(--ease,ease),visibility .5s}
.rgmenu.is-open{visibility:visible;opacity:1}
/* 🔴 ここも backdrop-filter を使わない。全面を覆うので、ベタで十分足りる。 */
.rgmenu-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 82% 108%,rgba(200,53,74,.10),transparent 58%),
    radial-gradient(100% 70% at 10% -10%,rgba(176,141,83,.07),transparent 60%),
    linear-gradient(180deg,var(--sumi,#050406),var(--sumi2,#0B0910) 62%,var(--sumi,#050406))}
.rgmenu-in{
  position:relative;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(18px,3.4vh,34px);
  padding:calc(clamp(58px,10vh,96px) + env(safe-area-inset-top))
          max(clamp(20px,7vw,96px),env(safe-area-inset-right))
          calc(clamp(28px,6vh,64px) + env(safe-area-inset-bottom))
          max(clamp(20px,7vw,96px),env(safe-area-inset-left))}

/* 一段ずつ立ち上がる。遅延は --i（JSが並び順を入れる）で決める */
.rgmenu-row{
  opacity:0;transform:translateY(16px);
  transition:opacity .62s var(--ease,ease),transform .62s var(--ease,ease);
  transition-delay:calc(60ms * var(--i,0))}
.rgmenu.is-open .rgmenu-row{opacity:1;transform:none}

.rgmenu-main{display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px)}
.rgmenu-main a{
  display:flex;align-items:baseline;gap:clamp(12px,2.4vw,28px);
  text-decoration:none;border-bottom:0;color:var(--fg,#F2EFE9);width:max-content;max-width:100%}
.rgmenu-main .en{
  font-family:var(--serif,serif);font-weight:300;
  font-size:clamp(30px,6.4vw,74px);line-height:1.06;letter-spacing:.12em;text-indent:.12em;
  color:var(--silver,#C9CBD2);
  transition:color .45s var(--ease,ease),transform .55s var(--ease,ease)}
.rgmenu-main .ja{
  font-family:var(--mincho,serif);font-size:clamp(11px,1.3vw,13.5px);
  letter-spacing:.22em;color:var(--mute,#8A8290);
  transition:color .45s var(--ease,ease)}
.rgmenu-main a:hover .en{color:var(--fg,#F2EFE9);transform:translateX(10px)}
.rgmenu-main a:hover .ja{color:var(--silver,#C9CBD2)}
.rgmenu-main a[data-accent] .en::after{
  content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--hi,#C8354A);vertical-align:middle;margin-left:.34em}

/* 二段目。細い罫を一本だけ挟んで、主メニューと段を分ける */
.rgmenu-sub{
  display:flex;flex-wrap:wrap;gap:clamp(12px,2.2vw,30px);
  padding-top:clamp(14px,2.6vh,26px);
  border-top:1px solid rgba(30,26,36,.9)}
.rgmenu-sub a{
  font-family:var(--mincho,serif);font-size:clamp(12px,1.15vw,13.5px);
  letter-spacing:.18em;color:var(--silver,#C9CBD2);text-decoration:none;border-bottom:0;
  padding-bottom:3px;position:relative;transition:color .4s var(--ease,ease)}
.rgmenu-sub a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold-line,#B08D53);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease,ease)}
.rgmenu-sub a:hover{color:var(--fg,#F2EFE9)}
.rgmenu-sub a:hover::after{transform:scaleX(1)}
/* 外部に出るものは矢印を添える（押した先で戻れなくなるのを避けるため明示） */
.rgmenu-sub a[data-ext]::before{content:"↗";margin-right:.45em;color:var(--mute,#8A8290);font-size:.9em}

.rgmenu-fine{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.rgmenu-fine a{
  font-family:var(--mincho,serif);font-size:11px;letter-spacing:.14em;
  color:var(--mute,#8A8290);text-decoration:none;border-bottom:0;
  transition:color .4s var(--ease,ease)}
.rgmenu-fine a:hover{color:var(--silver,#C9CBD2)}
.rgmenu-fine .mark{
  margin-left:auto;font-family:var(--serif,serif);font-size:11px;
  letter-spacing:.34em;text-indent:.34em;color:var(--gold-line,#B08D53);opacity:.75}

/* 🔴 iOS Safari は overflow:hidden だけでは背面が動く（ゴムのように付いてくる）。
      position:fixed + top:-scrollY で止め、閉じたら同じ位置へ戻す（戻しは nav.js）。 */
body.rgnav-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ── 上に戻る ──────────────────────────────────
   🔴 右下は「声で聞く」(.ask, z-index 60・高さ約52px) の定位置。
      重ねないよう、.ask と同じ右端に揃えて真上に積む。 */
.rgtop{
  position:fixed;z-index:58;
  right:max(clamp(14px,3vw,28px),env(safe-area-inset-right));
  bottom:calc(clamp(14px,3vw,28px) + env(safe-area-inset-bottom) + 64px);
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line,#1E1A24);background:rgba(12,10,17,.86);
  color:var(--silver,#C9CBD2);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .45s var(--ease,ease),transform .45s var(--ease,ease),border-color .4s ease}
.rgtop.is-on{opacity:1;pointer-events:auto;transform:none}
.rgtop:hover{border-color:#3A3442;transform:translateY(-2px)}
.rgtop svg{width:15px;height:15px;display:block}
/* メニューが開いている間は引っ込める（× と喧嘩させない） */
body.rgnav-lock .rgtop{opacity:0;pointer-events:none}

/* ── 節の頭が固定ヘッダーに潜らないように ────────── */
#hero,#rioai,#castSec,#youSec,#shopSec,#movieSec{scroll-margin-top:clamp(56px,9vh,84px)}

/* ── 下部（既存 footer の見え方だけ作り直す。文言には触れない） ──
   body を足して詠み合わせの順番に関係なく勝たせる。 */
body footer{
  position:relative;
  border-top:0;                       /* 硬い一本線をやめる */
  padding:clamp(46px,8vh,92px) clamp(16px,5vw,64px) calc(clamp(34px,6vh,64px) + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(11,9,16,.75));
  font-size:11px;line-height:2.15;letter-spacing:.08em;
  color:var(--mute,#8A8290)}
/* 切れ目は中央だけ濃い一本にして、端で消す（枠に見せない） */
body footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line,#1E1A24) 18%,
    rgba(176,141,83,.34) 50%,var(--line,#1E1A24) 82%,transparent)}
body footer > *{max-width:1180px;margin-inline:auto}
body footer b{
  display:inline-block;font-family:var(--serif,serif);font-weight:400;
  font-size:12px;letter-spacing:.3em;text-indent:.3em;
  color:var(--silver,#C9CBD2);margin-bottom:2px}

body .fnav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px clamp(18px,3vw,38px);
  max-width:1180px;margin:0 auto clamp(26px,4vh,44px);
  padding-bottom:clamp(22px,3.4vh,36px);
  border-bottom:0;position:relative}
body .fnav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line,#1E1A24) 30%,var(--line,#1E1A24) 70%,transparent)}
body .fnav a{
  position:relative;font-family:var(--mincho,serif);font-size:12px;
  letter-spacing:.2em;color:var(--silver,#C9CBD2);
  text-decoration:none;border-bottom:0;padding-bottom:4px;
  transition:color .35s var(--ease,ease)}
body .fnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold-line,#B08D53);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease,ease)}
body .fnav a:hover{color:var(--fg,#F2EFE9)}
body .fnav a:hover::after{transform:scaleX(1)}
/* 注記は本文より一段沈める。行間は既存のまま読ませる */
body footer br + *{opacity:.9}

/* ── 画面が狭いとき ────────────────────────────
   760px 以下はロゴとハンバーガーだけ。英字ナビは畳んでメニューへ送る。 */
@media (max-width:760px){
  .rgnav-links{display:none}
  /* 文字を落とす代わりに、押せる面（指の的）は 44px 角を切らないよう広げる */
  .rgnav-burger{margin-left:auto;padding:16px 10px;margin-right:-10px}
  .rgnav-burger-t{display:none}          /* 指で押す的は線だけで足りる */
  .rgnav-burger-l{width:24px}
  .rgnav-burger-l i:nth-child(1){width:24px}
  .rgnav-burger[aria-expanded="true"] .rgnav-burger-l i{width:24px}
  /* 🔴 縦が足りないときに中央寄せにすると、はみ出た頭が掴めなくなる。
        上から積んで、余ったら下に空ける。 */
  .rgmenu-in{justify-content:flex-start;gap:clamp(16px,3vh,26px);
    padding-top:calc(clamp(74px,13vh,108px) + env(safe-area-inset-top))}
  .rgmenu-main a{gap:12px;flex-direction:column;align-items:flex-start}
  .rgmenu-main .en{font-size:clamp(28px,10vw,44px)}
  .rgmenu-fine .mark{margin-left:0;width:100%}
  body .fnav{justify-content:flex-start}
}

/* ── 動きを減らす設定 ──────────────────────────
   🔴 一段ずつ立ち上がる演出はここで完全に切る。
      transition-delay を残すと「遅れて出る」だけの体験になるので 0 に戻す。 */
@media (prefers-reduced-motion:reduce){
  .rgnav,.rgmenu,.rgtop,.rgnav-burger-l i,
  .rgnav-link::after,.rgmenu-sub a::after,body .fnav a::after{transition-duration:.01ms}
  .rgmenu-row{transition:none;transition-delay:0s;opacity:1;transform:none}
  .rgmenu-main a:hover .en{transform:none}
  .rgtop:hover{transform:none}
}