/* GORILLA RIDER トップ v5（ヒーローのバイク＝元デザインの車体）
   PC（821px〜）：Codex の配置表（1440px 幅・左上原点）の矩形をそのまま使う。
   1単位 = --u（ステージ幅 / 1440）。各 .sec はページ座標 --sy/--sh、子の .L はセクション内座標 --x/--y/--w/--h/--z。
   スマホ（〜820px）：配置表は使わず縦に積み直す。 */

:root {
  --orange: #ff5a00;
  --orange2: #ff7a1a;
  --ink: #111;
  --paper: #f4f3f0;
  --jp: "Noto Sans JP", system-ui, sans-serif;
  --en: "Barlow", "Noto Sans JP", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body { background: #0b0b0b; color: var(--ink); font-family: var(--jp); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- ステージ（PC） ---------- */
.stage {
  container-type: inline-size;
  position: relative; width: 100%; max-width: 1920px; margin: 0 auto;
  aspect-ratio: 1440 / 3120;
  background: #fff url(../assets/top/fit/page-underlay.webp?v=0.4.9) 0 0 / 100% 100% no-repeat;
  overflow: hidden;
}
.stage * { --u: calc(100cqw / 1440); }
.sec { position: absolute; left: 0; width: 100%; top: calc(var(--sy) * var(--u)); height: calc(var(--sh) * var(--u)); }
.L {
  position: absolute; margin: 0;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  z-index: var(--z, 1);
}
img.L { object-fit: fill; }
.L > img { width: 100%; height: 100%; }

.s-header { z-index: 40; }
.s-hero { z-index: 2; overflow: hidden; background: #0d0907; }
.s-base { z-index: 8; }
.base-phones { display: contents; }
.s-feat { z-index: 9; }
.s-movie { z-index: 10; }
.s-store { z-index: 10; }
.s-blog { z-index: 11; }
.s-closing { z-index: 12; }
.s-footer { z-index: 13; }

/* ---------- ヘッダー ---------- */
.gnav { display: flex; justify-content: space-between; align-items: center; font-family: var(--en); font-weight: 600; font-size: calc(17.5 * var(--u)); letter-spacing: .04em; color: #fff; }
.gnav a { position: relative; padding: calc(4 * var(--u)) 0; transition: color .2s; }
.gnav a:hover { color: var(--orange2); }
.gnav a.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-8 * var(--u)); height: calc(3 * var(--u)); background: var(--orange); }
.icon-btn svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.logo img, .f-logo img { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }

/* ---------- ヒーロー ---------- */
.hero-par { will-change: transform; }
.hero-glow-orange { background: radial-gradient(ellipse 52% 58% at 34% 55%, rgba(255,112,22,.70), rgba(255,92,0,.26) 55%, rgba(255,90,0,0) 76%), radial-gradient(ellipse 26% 42% at 3% 46%, rgba(255,125,35,.55), rgba(255,100,10,0) 72%), radial-gradient(ellipse 22% 20% at 62% 24%, rgba(255,170,80,.35), rgba(255,140,40,0) 70%); mix-blend-mode: screen; pointer-events: none; }

.sparks { pointer-events: none; }
.hero-dark { background: #000; pointer-events: none; opacity: 0; }

.lettering { pointer-events: none; }
.hero-title { font-family: var(--jp); font-weight: 900; color: #fff; font-size: calc(94 * var(--u)); line-height: 1.04; letter-spacing: -.01em; text-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.75), 0 0 calc(2 * var(--u)) rgba(0,0,0,.6); white-space: nowrap; }
.hero-title .ln { display: block; overflow: hidden; padding-right: .1em; }
.hero-title .ln > span { display: inline-block; }
.hero-title .ln:first-child { padding-left: .04em; }
.hero-sub { display: flex; flex-direction: column; align-items: center; color: #fff; font-family: var(--en); text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.hero-sub .a { font-weight: 600; font-size: calc(23 * var(--u)); letter-spacing: .32em; padding-left: .32em; }
.hero-sub .b { font-weight: 600; font-size: calc(14.5 * var(--u)); letter-spacing: .36em; padding-left: .36em; margin-top: calc(6 * var(--u)); }
.hero-side { color: #fff; font-family: var(--en); font-weight: 600; font-size: calc(15.5 * var(--u)); line-height: 1.68; letter-spacing: .06em; text-align: center; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.hero-side::after { content: ""; display: block; width: calc(72 * var(--u)); height: calc(3 * var(--u)); background: var(--orange); margin: calc(12 * var(--u)) auto 0; }

/* ---------- RIDERS BASE ---------- */
.base-sign { font-family: var(--en); font-weight: 800; font-size: calc(58 * var(--u)); letter-spacing: .05em; justify-content: center; color: #d6d6d2; text-shadow: 0 2px 0 #4a4a48, 0 4px 10px rgba(0,0,0,.6); background: linear-gradient(#ececea, #a8a8a4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; line-height: 1; display: flex; align-items: center; transform: rotate(-1.4deg); transform-origin: center; }
.base-lead { font-weight: 700; font-size: calc(23 * var(--u)); line-height: 1.55; letter-spacing: .02em; }
.base-tag { background: var(--orange); clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); }
.base-title { display: flex; flex-direction: column; font-family: var(--en); font-style: italic; font-weight: 900; color: var(--ink); line-height: .88; }
.base-title .t1 { font-size: calc(75 * var(--u)); letter-spacing: -.005em; }
.base-title .t2 { font-size: calc(27 * var(--u)); font-weight: 800; margin-top: calc(14 * var(--u)); letter-spacing: .01em; }
.base-body { font-weight: 500; font-size: calc(15.5 * var(--u)); line-height: 1.95; color: #2a2a2a; }
.base-cta { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--u)); }
.brush { background: #fff; clip-path: polygon(2% 38%, 30% 22%, 62% 8%, 98% 0, 100% 30%, 92% 52%, 60% 70%, 28% 88%, 0 100%, 4% 70%); filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); opacity: .95; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .9em; border-radius: 999px; color: #fff; font-weight: 700; background: linear-gradient(180deg, #ff6a12, #f24f00); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(240,80,0,.35); transition: transform .2s, box-shadow .2s, filter .2s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(240,80,0,.45); }
.btn i { font-style: normal; font-family: var(--en); font-weight: 600; }
.btn-lg { width: calc(253.5 * var(--u)); height: calc(64.2 * var(--u)); font-size: calc(21 * var(--u)); flex: none; }
.soon { flex: none; font-size: calc(13 * var(--u)); font-weight: 700; color: var(--orange); border: calc(1.5 * var(--u)) solid var(--orange); border-radius: 4px; padding: calc(3 * var(--u)) calc(8 * var(--u)); background: #fff; }

/* ---------- 機能カード ---------- */
.fc-h { display: grid; grid-template-columns: calc(40 * var(--u)) 1fr; column-gap: calc(22 * var(--u)); align-content: start; }
.fc-h .tag { grid-row: 1; width: calc(36 * var(--u)); height: calc(34 * var(--u)); margin-top: calc(4 * var(--u)); background: var(--orange); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); }
.fc-h b { grid-row: 1; font-weight: 900; font-size: calc(39 * var(--u)); line-height: 1.1; letter-spacing: .01em; }
.fc-h small { grid-column: 2; font-weight: 500; font-size: calc(20 * var(--u)); margin-top: calc(14 * var(--u)); letter-spacing: .04em; color: #222; }
.fc-btn { font-size: calc(19 * var(--u)); }

/* ---------- 見出し行（MOVIE / STORE / BLOG） ---------- */
.sec-head { display: flex; align-items: center; gap: calc(36 * var(--u)); padding-left: calc(26 * var(--u)); }
.sec-head::before { content: ""; position: absolute; left: 0; top: 50%; width: calc(6 * var(--u)); height: calc(28 * var(--u)); margin-top: calc(-14 * var(--u)); background: var(--orange); }
.sec-head h2 { margin: 0; font-family: var(--en); font-weight: 800; font-size: calc(33 * var(--u)); letter-spacing: .07em; line-height: 1; }
.sec-head p { margin: 0; font-size: calc(16.5 * var(--u)); letter-spacing: .08em; font-weight: 500; }
.sec-head .more { margin-left: auto; font-size: calc(16 * var(--u)); font-weight: 500; letter-spacing: .04em; display: flex; align-items: center; gap: calc(12 * var(--u)); }
.sec-head .more i { font-style: normal; color: var(--orange); font-family: var(--en); font-weight: 700; font-size: 1.3em; transition: transform .2s; }
.sec-head .more:hover i { transform: translateX(4px); }
.dark .sec-head { color: #fff; }
.dark .sec-head p { color: #ddd; }

/* MOVIE */
.mcard { overflow: hidden; display: block; }
.mcard img { width: 100%; height: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.62) 100%); }
.mcard:hover img { transform: scale(1.04); }
.play { position: absolute; left: 50%; top: 52%; width: calc(60 * var(--u)); height: calc(60 * var(--u)); margin: calc(-30 * var(--u)) 0 0 calc(-30 * var(--u)); border: calc(3 * var(--u)) solid #fff; border-radius: 50%; background: rgba(0,0,0,.35); z-index: 2; transition: background .2s, transform .2s; }
.play::after { content: ""; position: absolute; left: 38%; top: 28%; border-style: solid; border-width: calc(12 * var(--u)) 0 calc(12 * var(--u)) calc(19 * var(--u)); border-color: transparent transparent transparent #fff; }
.mcard:hover .play { background: var(--orange); transform: scale(1.08); }
.mcard .cap { position: absolute; left: calc(17 * var(--u)); bottom: calc(10 * var(--u)); z-index: 2; color: #fff; font-size: calc(20 * var(--u)); letter-spacing: .18em; line-height: 1.45; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.mcard .cap b { display: block; font-family: var(--en); font-weight: 600; font-size: calc(22 * var(--u)); letter-spacing: .2em; }

/* STORE */
.scard { overflow: hidden; display: block; }
.scard img { width: 100%; height: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.scard:hover img { transform: scale(1.04); }

/* BLOG */
.bcard { overflow: hidden; display: block; }
.bcard img { width: 100%; height: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.bcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.72) 100%); }
.bcard:hover img { transform: scale(1.04); }
.bcard .cap { position: absolute; left: calc(19 * var(--u)); right: calc(19 * var(--u)); bottom: calc(10 * var(--u)); z-index: 2; display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 500; font-size: calc(20 * var(--u)); letter-spacing: .08em; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.bcard .cap i { font-style: normal; font-family: var(--en); font-size: 1.2em; }

/* ---------- フッター ---------- */
.fnav { display: flex; align-items: center; color: #fff; font-family: var(--en); font-weight: 600; font-size: calc(16.5 * var(--u)); letter-spacing: .04em; }
.fnav a { white-space: nowrap; padding: 0 calc(30 * var(--u)); border-left: 1px solid rgba(255,255,255,.55); line-height: 1.2; }
.fnav a:first-child { border-left: 0; padding-left: calc(20 * var(--u)); }
.fnav a:hover, .f-legal a:hover { color: var(--orange2); }
.f-copy { color: #ddd; font-size: calc(14 * var(--u)); letter-spacing: .04em; }
.f-copy small { font-size: inherit; }
.f-legal { display: flex; color: #ddd; font-size: calc(14 * var(--u)); }
.f-legal a + a { margin-left: calc(20 * var(--u)); padding-left: calc(20 * var(--u)); border-left: 1px solid rgba(255,255,255,.5); }

/* ---------- 入場（ヒーロー）：.js .intro で走る ---------- */
.js.motion .s-hero .hero-dark { animation: heroDark 1.8s cubic-bezier(.4,0,.2,1) both; }
@keyframes heroDark { 0% { opacity: .96; } 25% { opacity: .9; } 100% { opacity: 0; } }
@keyframes bgOn { 0% { filter: brightness(.18) saturate(.6); } 30% { filter: brightness(.3) saturate(.7); } 100% { filter: none; } }
.js.motion .hero-glow-orange { animation: fadeIn 1.6s ease-out .5s both, glowBreath 5s ease-in-out 2.1s infinite alternate; }
@keyframes glowBreath { from { opacity: 1; } to { opacity: .8; } }
@keyframes bikeOn { 0% { filter: brightness(.25); } 55% { filter: brightness(.45); } 100% { filter: none; } }
/* ヘッドライト：2〜3回点滅 → 点灯したまま */
.js.motion .hero-mech { animation: rise 1.3s cubic-bezier(.16,.84,.3,1) .7s both; }
@keyframes rise { from { transform: translate3d(0, 9%, 0); filter: brightness(.3); } to { transform: none; filter: none; } }
.js.motion .hero-title .ln > span { animation: slideIn .9s cubic-bezier(.16,.84,.3,1) both; }
.js.motion .hero-title .ln:nth-child(1) > span { animation-delay: 1.9s; }
.js.motion .hero-title .ln:nth-child(2) > span { animation-delay: 2.05s; }
@keyframes slideIn { from { transform: translate3d(-105%, 0, 0); } to { transform: none; } }
.js.motion .hero-sub { animation: upIn .8s cubic-bezier(.16,.84,.3,1) 2.4s both; }
.js.motion .hero-side { animation: upIn .8s cubic-bezier(.16,.84,.3,1) 2.55s both; }
@keyframes upIn { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.js.motion .s-header .gnav, .js.motion .s-header .icon-btn { animation: fadeIn .8s ease-out .3s both; }
.js.motion .s-header .logo { animation: upIn .8s cubic-bezier(.16,.84,.3,1) .4s both; }

/* ---------- 各セクションの出現（下から・順番に） ---------- */
.js.motion .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s ease-out var(--d, 0s), transform .9s cubic-bezier(.16,.84,.3,1) var(--d, 0s); }
.js.motion .rv.is-in { opacity: 1; transform: none; }
.js.motion .base-sign.rv { transform: rotate(var(--sr, -1.4deg)) translate3d(0, 20px, 0); }
.js.motion .base-sign.rv.is-in { transform: rotate(var(--sr, -1.4deg)); }

/* ---------- 動きを減らす設定：完成形だけ ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .base-sign.rv { transform: rotate(var(--sr, -1.4deg)) !important; }
  .hero-dark { opacity: 0 !important; }
  .sparks { display: none; }
}

/* ================= スマホ（〜820px）：縦に積み直す ================= */
@media (max-width: 820px) {
  body { background: #fff; }
  .stage { aspect-ratio: auto; background: #fff; overflow: hidden; }
  .stage * { --u: 1px; }
  .sec { position: relative; top: auto; height: auto; }
  .L { position: absolute; }

  /* ヘッダー */
  .s-header { height: 60px; background: #0c0c0c; z-index: 40; }
  .s-header .bg { width: 100%; height: 60px; left: 0; top: 0; }
  .logo { left: 10px; top: 6px; width: 76px; height: 73px; }
  .gnav { display: none; }
  .gnav.open { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: 60px; width: auto; height: auto; background: rgba(10,10,10,.97); padding: 12px 24px 24px; gap: 6px; font-size: 18px; z-index: 50; }
  .gnav.open a { padding: 12px 0; border-bottom: 1px solid #333; }
  .gnav.open a.is-current::after { display: none; }
  .icon-btn.search { left: auto; right: 62px; top: 17px; width: 26px; height: 26px; }
  .icon-btn.menu { left: auto; right: 18px; top: 16px; width: 28px; height: 28px; }

  /* ヒーロー：背景を寄せ、主人公とバイクを両方見せる */

  /* RIDERS BASE */
  .s-base { padding: 0 0 28px; background: #fff; }
  .base-copy { position: relative; padding: 34px 22px 0 34px; }
  .base-copy .L { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .base-tag { position: absolute !important; left: 0 !important; top: 118px !important; width: 18px !important; height: 70px !important; }
  .base-lead { font-size: 18px; }
  .base-title { margin-top: 18px; }
  .base-title .t1 { font-size: 56px; }
  .base-title .t2 { font-size: 21px; margin-top: 10px; }
  .base-body { margin-top: 18px; font-size: 15px; }
  .base-cta { margin-top: 22px; flex-wrap: wrap; }
  .btn-lg { width: 230px; height: 56px; font-size: 18px; }
  .soon { font-size: 12px; }
  .s-base > .L { position: relative; left: auto; top: auto; }
  .base-garage { width: 100%; height: 260px; object-fit: cover; object-position: 78% 60%; margin-top: 30px; }
  .base-refl, .base-swash, .base-div, .l-friends, .base-sign, .s-base .brush { display: none; }
  .s-base { display: flex; flex-direction: column; }
  .base-copy { order: 1; }
  .base-phones { order: 2; display: flex; justify-content: center; align-items: flex-end; gap: 10px; padding: 26px 16px 0; position: relative; }
  .base-phones .L { position: relative; left: auto; top: auto; }
  .base-map { width: 150px; height: 261px; }
  .base-hide { width: 122px; height: 219px; }
  .s-base .base-garage { order: 3; margin-top: -40px; position: relative; z-index: 1; }
  .base-cast { order: 4; width: 100%; height: auto; aspect-ratio: 677.7 / 447.9; margin-top: -120px; z-index: 2; }
  .s-base .lettering.l-discover, .s-base .lettering.l-customize { display: none; }
  .base-phones { z-index: 3; }

  /* 機能カード */
  .s-feat { display: flex; flex-direction: column; gap: 18px; padding: 26px 16px 34px; background: var(--paper); border-top: 6px solid var(--orange); }
  .fcard { position: relative; background: #fff; border-radius: 12px; padding: 20px 14px 18px; display: flex; flex-direction: column; align-items: center; }
  .fcard .L { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .fc-h { align-self: stretch; grid-template-columns: 30px 1fr; column-gap: 12px; }
  .fc-h .tag { width: 26px; height: 26px; }
  .fc-h b { font-size: 26px; }
  .fc-h small { font-size: 15px; margin-top: 6px; }
  .fc-img { width: 100% !important; height: auto !important; aspect-ratio: 454.6 / 327.9; margin-top: 14px; }
  .fc-btn { width: 220px !important; height: 52px !important; font-size: 17px; margin-top: 14px; }

  /* MOVIE / STORE / BLOG 共通 */
  .s-movie, .s-blog { background: #0e0e0e; padding: 26px 16px 30px; }
  .s-movie .bg, .s-blog .bg { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .s-store { background: #fff; padding: 26px 16px 30px; }
  .s-movie > .L:not(.bg), .s-store > .L, .s-blog > .L:not(.bg) { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .sec-head { flex-wrap: wrap; gap: 4px 14px; padding-left: 16px; margin-bottom: 16px; }
  .sec-head::before { top: 4px; margin-top: 0; height: 24px; width: 5px; }
  .sec-head h2 { font-size: 26px; }
  .sec-head p { order: 3; flex-basis: 100%; font-size: 13.5px; }
  .sec-head .more { font-size: 14px; }
  .mcard, .bcard { aspect-ratio: 16 / 9; margin-top: 14px; }
  .mcard img, .bcard img, .scard img { object-fit: cover; }
  .play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .mcard .cap { font-size: 16px; } .mcard .cap b { font-size: 18px; }
  .bcard .cap { font-size: 16px; }
  .s-store { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .s-store .sec-head { grid-column: 1 / -1; margin-bottom: 4px; }
  .scard { aspect-ratio: 1 / 1; }

  /* クロージング */
  .s-closing { height: 250px; overflow: hidden; }
  .closing-bg { left: 0; top: 0; width: 100%; height: 250px; object-fit: cover; object-position: 50% 50%; }
  .closing-cast { left: 50%; top: 146px; width: 372px; height: 89px; margin-left: -186px; }
  .l-seeyou { left: 14px; top: 16px; width: 170px; height: 78px; }
  .l-rideblock { left: auto; right: 12px; top: 12px; width: 98px; height: 95px; }
  .closing-bg::after { content: none; }

  /* フッター */
  .s-footer { background: #0b0b0b; padding: 26px 18px 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .s-footer .bg { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .s-footer > .L:not(.bg) { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .f-logo { width: 110px !important; height: 101px !important; }
  .fnav { flex-wrap: wrap; justify-content: center; row-gap: 10px; font-size: 14.5px; }
  .fnav { column-gap: 22px; }
  .fnav a, .fnav a:first-child { padding: 0; border-left: 0; }
  .l-gear { width: 170px !important; height: 91px !important; }
  .f-copy, .f-legal { font-size: 12.5px; }
}

/* ================= ヒーロー v3（Codex hero_v3・17層） =================
   層の位置は元キャンバス 2880×1271 の座標。PC は 1/2（＝1440 単位・--u）、スマホは配置表 mobile の行列で 750×1300 単位（--m）。
   不透明度は配置表どおり（--o）。入場：暗転 → 天井の灯り → メーター → ヘッドライト点滅（光球・前方光・フレア）→ テール → 主人公 → 見出し */
.hg { pointer-events: none; }
.h3 { position: absolute; display: block; margin: 0; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); pointer-events: none; --o: var(--od, 1); opacity: var(--o); }
.h3 img { width: 100%; height: 100%; max-width: none; }
.h3-loop { overflow: hidden; }
.h3-loop .strip { position: absolute; left: 0; top: 0; width: 200%; height: 100%; display: flex; opacity: .8; }
.h3-loop .strip img { width: 50%; height: 100%; flex: none; max-width: none; }
.h3-sfa, .h3-sfb { --dx: calc(10 * var(--u)); }

.js.motion .h3-bg img { animation: bgOn 2.2s ease-out both; }
.js.motion .h3-loop .strip { animation: fadeIn 2.4s ease-out .3s both, loopX 32s linear infinite; }
@keyframes loopX { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
/* 天井の灯り：ちらついて点く → ゆっくり呼吸（.9〜.65） */
.js.motion .h3-ceil { animation: flickOn 1.2s linear .25s both, breathe 5s ease-in-out 1.7s infinite alternate; }
.js.motion .h3-bike img { animation: bikeOn 2.4s ease-out .6s both; }
/* メーター → ヘッドライト（2〜3回点滅して点いたまま）→ テール */
.js.motion .h3-meter { animation: flickOn .5s linear .8s both; }
.js.motion .h3-lens  { animation: blink 1.5s linear 1.0s both; }
.js.motion .h3-orb   { animation: blink 1.5s linear 1.0s both, breathe 2.6s ease-in-out 2.6s infinite alternate; }
.js.motion .h3-beam  { animation: blink 1.5s linear 1.0s both, breathe 3.2s ease-in-out 2.6s infinite alternate; }
.js.motion .h3-flare { animation: flash 1.6s linear 1.0s both, breathe 3.6s ease-in-out 2.7s infinite alternate; }
.js.motion .h3-tail  { animation: blink 1.1s linear 1.35s both; }
/* 前輪（a）・後輪（b）の煙：エンジンがかかると湧いて、横に漂う（20px＝元キャンバス） */
.js.motion .h3-sfa { animation: smokeIn 2s ease-out 1.0s both, drift 12s ease-in-out 3s infinite alternate; }
.js.motion .h3-sfb { animation: smokeIn 2s ease-out .85s both, drift 12s ease-in-out 2.85s infinite alternate-reverse; }
.js.motion .h3-sparks { animation: sparkFloat 8s linear 1.4s infinite; }
.js.motion .h3-ljp   { animation: upIn .9s ease-out 2.6s both; }
.js.motion .h3-lride { animation: upIn .9s ease-out 2.75s both; }
@keyframes blink { 0%{opacity:0} 8%{opacity:var(--o,1)} 16%{opacity:calc(var(--o,1) * .05)} 30%{opacity:var(--o,1)} 38%{opacity:calc(var(--o,1) * .1)} 52%{opacity:var(--o,1)} 58%{opacity:calc(var(--o,1) * .35)} 66%,100%{opacity:var(--o,1)} }
@keyframes flash { 0%{opacity:0} 8%{opacity:var(--o)} 16%{opacity:0} 30%{opacity:var(--o)} 38%{opacity:0} 52%{opacity:var(--o)} 58%{opacity:calc(var(--o) * .3)} 68%{opacity:calc(var(--o) * 2.2)} 100%{opacity:var(--o)} }
@keyframes flickOn { 0%{opacity:0} 20%{opacity:var(--o,1)} 32%{opacity:calc(var(--o,1) * .15)} 50%{opacity:var(--o,1)} 100%{opacity:var(--o,1)} }
@keyframes breathe { from { opacity: var(--o,1); } to { opacity: calc(var(--o,1) * .75); } }
@keyframes smokeIn { from { opacity: 0; transform: translate3d(0, calc(12 * var(--u)), 0) scale(.96); } to { opacity: var(--o); transform: none; } }
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(var(--dx),0,0); } }
@keyframes sparkFloat { 0% { opacity: 0; transform: translate3d(0,0,0); } 15% { opacity: .7; } 80% { opacity: .55; } 100% { opacity: 0; transform: translate3d(0,-6.3%,0); } }

/* 全体を暗く締める：背景・奥の煙・天井の灯りの上（車体の下）に薄い暗幕、手前に周辺の落ち込み */
.hero-grade { pointer-events: none; background: radial-gradient(ellipse 70% 75% at 55% 45%, rgba(8,5,3,.18), rgba(8,5,3,.42) 100%); }
.hero-vignette { pointer-events: none; background: radial-gradient(ellipse 85% 95% at 50% 42%, rgba(0,0,0,0) 55%, rgba(0,0,0,.38) 100%), linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0) 22%); }
.s-hero .hero-side { font-weight: 500; font-size: calc(12.5 * var(--u)); line-height: 1.62; letter-spacing: .14em; padding-left: .14em; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 calc(10 * var(--u)) rgba(0,0,0,.75); }
.s-hero .hero-side::after { width: calc(52 * var(--u)); height: calc(2 * var(--u)); margin-top: calc(9 * var(--u)); }

@media (max-width: 820px) {
  .stage * { --m: calc(100cqw / 750); }
  .s-hero .hero-side { display: block; left: auto; right: calc(14 * var(--m)); top: calc(1068 * var(--m)); width: auto; height: auto; font-size: calc(19 * var(--m)); white-space: nowrap; }
  .s-hero .hero-side::after { width: calc(56 * var(--m)); height: 2px; margin-top: calc(10 * var(--m)); }
  .s-hero { height: calc(1300 * var(--m)); }
  .s-hero .hg, .s-hero .sparks, .s-hero .hero-dark { left: 0; top: 0; width: 100%; height: calc(1300 * var(--m)); }
  .h3 { left: calc(var(--mx) * var(--m)); top: calc(var(--my) * var(--m)); width: calc(var(--mw) * var(--m)); height: calc(var(--mh) * var(--m)); }
  .h3.pc-only { display: none; }
  .h3-sfa, .h3-sfb { --dx: calc(7.8 * var(--m)); }
  /* 奥の煙：行列 [0.6, -500, 450] */
  .h3 { --o: var(--mo, var(--od, 1)); }
  .s-hero .h3-loop .strip { left: calc(var(--le) * var(--m)); top: calc(var(--lf) * var(--m)); width: calc(5760 * var(--lm) * var(--m)); height: calc(1271 * var(--lm) * var(--m)); }
  .s-hero .hero-grade, .s-hero .hero-vignette { left: 0; top: 0; width: 100%; height: calc(1300 * var(--m)); }
  .s-hero .hero-glow-orange { left: calc(-120 * var(--m)); top: calc(620 * var(--m)); width: calc(720 * var(--m)); height: calc(680 * var(--m)); }
  /* 見出し：配置表 mobile の候補領域 [24,180,570,150] */
  .s-hero .hero-title { left: calc(24 * var(--m)); top: calc(178 * var(--m)); width: calc(600 * var(--m)); height: auto; font-size: calc(68 * var(--m)); line-height: 1.1; white-space: nowrap; }
  .s-hero .hero-sub { left: calc(28 * var(--m)); top: calc(334 * var(--m)); width: auto; height: auto; align-items: flex-start; }
  .s-hero .hero-sub .a { font-size: calc(27 * var(--m)); letter-spacing: .28em; padding-left: 0; }
  .s-hero .hero-sub .b { font-size: calc(18 * var(--m)); letter-spacing: .36em; padding-left: 0; margin-top: calc(4 * var(--m)); }
  .s-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(160 * var(--m)); z-index: 85; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); pointer-events: none; }
}

/* ================= 元デザインに合わせる（2026-10-10・元画像を 1440 幅に重ねて測った値） ================= */
/* 大見出し：Noto Sans JP 900・字間 -0.045em・行間 1.0・右上がり 3.75°（斜体の傾きは測ると 0.5° 程度）・白の太らせ 1.6＋黒の縁 3.6＋影。
   値は元デザインを 1440 幅に重ね、白い文字の画素の重なり（IoU）が最大になるよう当てはめた（_確認用/重ね/ 参照） */
.s-hero .hero-title {
  --tu: var(--u);
  line-height: 1; letter-spacing: -.045em; -webkit-text-stroke: 0;
  text-shadow: calc(1.6 * var(--tu)) calc(0.0 * var(--tu)) 0 #fff,
    calc(-1.6 * var(--tu)) calc(0.0 * var(--tu)) 0 #fff,
    calc(0.0 * var(--tu)) calc(1.6 * var(--tu)) 0 #fff,
    calc(0.0 * var(--tu)) calc(-1.6 * var(--tu)) 0 #fff,
    calc(1.12 * var(--tu)) calc(1.12 * var(--tu)) 0 #fff,
    calc(-1.12 * var(--tu)) calc(1.12 * var(--tu)) 0 #fff,
    calc(1.12 * var(--tu)) calc(-1.12 * var(--tu)) 0 #fff,
    calc(-1.12 * var(--tu)) calc(-1.12 * var(--tu)) 0 #fff,
    calc(3.6 * var(--tu)) calc(0.0 * var(--tu)) 0 #1a1a1a,
    calc(-3.6 * var(--tu)) calc(0.0 * var(--tu)) 0 #1a1a1a,
    calc(0.0 * var(--tu)) calc(3.6 * var(--tu)) 0 #1a1a1a,
    calc(0.0 * var(--tu)) calc(-3.6 * var(--tu)) 0 #1a1a1a,
    calc(2.52 * var(--tu)) calc(2.52 * var(--tu)) 0 #1a1a1a,
    calc(-2.52 * var(--tu)) calc(2.52 * var(--tu)) 0 #1a1a1a,
    calc(2.52 * var(--tu)) calc(-2.52 * var(--tu)) 0 #1a1a1a,
    calc(-2.52 * var(--tu)) calc(-2.52 * var(--tu)) 0 #1a1a1a,
    0 calc(5 * var(--tu)) calc(12 * var(--tu)) rgba(0,0,0,.75);
  transform: rotate(-3.75deg) skewX(.5deg); transform-origin: 0 100%;
}
@media (min-width: 821px) {
  .s-hero .hero-title { font-size: calc(100 * var(--u)); left: calc(77.2 * var(--u)); top: calc(323.5 * var(--u)); }
}
@media (max-width: 820px) {
  .s-hero .hero-title { --tu: calc(var(--m) * .68); }
}
.s-hero .hero-title .ln { overflow: visible; clip-path: inset(-.35em -.6em -.35em -.08em); padding-right: 0; }
.s-hero .hero-title .ln:first-child { padding-left: 0; }
@media (min-width: 821px) {
  .s-hero .hero-sub { left: calc(var(--sx, 255) * var(--u)); top: calc(var(--sy2, 536) * var(--u)); }
  .s-hero .hero-sub .a { font-weight: 600; font-size: calc(var(--sa, 23) * var(--u)); letter-spacing: var(--sal, .47em); padding-left: var(--sal, .47em); word-spacing: .15em; }
  .s-hero .hero-sub .b { font-weight: 600; font-size: calc(var(--sb, 18.25) * var(--u)); letter-spacing: var(--sbl, .41em); padding-left: var(--sbl, .41em); margin-top: calc(var(--sbm, 3) * var(--u)); }
}

/* RIDERS BASE の看板：元デザインどおり、暗い板（縁あり）に斜体の太字・右上がり約7.5°。ヒーローの斜めの境目で切れない位置（元の板の位置）へ */
@media (min-width: 821px) {
  .s-base .base-sign { --sr: var(--sgr, -7deg); transform: rotate(var(--sr)); transform-origin: 50% 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #33393d, #24292c 55%, #1c2023); -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor;
    border: calc(2 * var(--u)) solid #4b5257; box-shadow: inset 0 0 0 calc(2 * var(--u)) #1a1d1f, inset 0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(255,255,255,.08), 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.55);
    color: #c4cdd3; text-shadow: none; font-family: var(--en); font-style: normal; font-weight: 800; line-height: 1; white-space: nowrap; }
  .s-base .base-sign span { font-size: calc(46 * var(--u)); letter-spacing: .03em; word-spacing: .1em; transform: translate(calc(-8 * var(--u)), calc(-8 * var(--u))) skewX(-5deg) scaleX(1.2);
    background: linear-gradient(180deg, #e3e9ec, #aab4ba); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 calc(1.5 * var(--u)) 0 #15181a) drop-shadow(0 0 calc(1 * var(--u)) #000); }
}

/* 店先の看板（元デザインの位置・大きさ） */
.good-sign, .rcs-board { display: flex; flex-direction: column; align-items: center; justify-content: space-around; font-family: "Barlow Condensed", var(--en); line-height: 1; pointer-events: none; }
.good-sign { padding: calc(6 * var(--u)) 0; background: linear-gradient(180deg, #2b3033, #1f2326); border: calc(2 * var(--u)) solid #3d4347; border-radius: calc(2 * var(--u));
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #14171a, 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.6); transform: rotate(-1.5deg);
  color: #dfe7ea; font-weight: 600; font-size: calc(31 * var(--u)); letter-spacing: .01em; text-shadow: 0 0 calc(2 * var(--u)) rgba(0,0,0,.6); }
.good-sign span { display: block; transform: scaleY(1.12); }
.rcs-board { padding: calc(6 * var(--u)) 0; background: linear-gradient(180deg, #a8a398, #8f8a80); border: calc(1.5 * var(--u)) solid #6f6b63;
  box-shadow: inset 0 0 calc(6 * var(--u)) rgba(0,0,0,.35), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.5);
  color: #1b1b1b; font-weight: 700; font-size: calc(19 * var(--u)); letter-spacing: .01em; }
.js.motion .good-sign.rv { transform: rotate(-1.5deg) translate3d(0, 20px, 0); }
.js.motion .good-sign.rv.is-in { transform: rotate(-1.5deg); }
@media (max-width: 820px) { .good-sign, .rcs-board { display: none; } }
/* 機能カードの見出し：元デザインは一回り大きく横に広い（重ねて測った値） */
@media (min-width: 821px) {
  .s-feat .fc-h { top: calc((var(--y) - 5) * var(--u)); column-gap: calc(24 * var(--u)); }
  .s-feat .fc-h .tag { width: calc(44 * var(--u)); height: calc(42 * var(--u)); margin-top: calc(-4 * var(--u)); margin-left: calc(-6 * var(--u)); }
  .s-feat .fc-h b { font-size: calc(41 * var(--u)); letter-spacing: .06em; }
  .s-feat .fc-h small { font-size: calc(21 * var(--u)); letter-spacing: .12em; margin-top: calc(16 * var(--u)); }
}
/* 各セクションの見出し行（MOVIE・STORE・BLOG）：元デザインは字間が広く一回り大きい */
@media (min-width: 821px) {
  .sec-head h2 { font-size: calc(35 * var(--u)); letter-spacing: .14em; }
  .sec-head p { font-size: calc(17.5 * var(--u)); letter-spacing: .14em; }
}
/* 夕景の「RIDE TO LIVE.」：元デザインは白ではなく灰色の金属調（素材は白で納品） */
.l-rideblock { filter: brightness(.6) saturate(.4) drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.45)); }

/* ================= v6：ヒーロー＝元デザインの絵1枚 ================= */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.h6-sec { --cx0: 0; --cw: 852; }
.h6-stage { overflow: hidden; }
.h6-pic, .h6-pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
/* 重ねる層の位置は元デザインの px（--ox/--oy/--ow/--oh）。PC：元の px ×（1440/852） */
.h6-stage > .h6 { position: absolute; max-width: none; pointer-events: none;
  left: calc(var(--ox) * 1440 / 852 * var(--u)); top: calc((var(--oy) - 43) * 1440 / 852 * var(--u));
  width: calc(var(--ow) * 1440 / 852 * var(--u)); height: calc(var(--oh) * 1440 / 852 * var(--u)); }
.h6-smoke { opacity: .55; }
/* 入場：灯りが2〜3回またたいて点く（ヘッドライト→壁の灯り）→ ゆっくり呼吸。煙はゆっくり横へ */
.js.motion .h6-head  { animation: blink 1.5s linear .9s both, breathe 2.8s ease-in-out 2.6s infinite alternate; }
.js.motion .h6-wall1 { animation: flickOn 1.2s linear .25s both, breathe 4.5s ease-in-out 1.6s infinite alternate; }
.js.motion .h6-wall2 { animation: flickOn 1.2s linear .4s both, breathe 5.2s ease-in-out 1.7s infinite alternate; }
.js.motion .h6-wall3 { animation: flickOn 1.2s linear .55s both, breathe 4.8s ease-in-out 1.8s infinite alternate; }
.h6-lamp { --o: 1; }
.js.motion .h6-smoke { animation: h6drift 14s ease-in-out infinite alternate; }
@keyframes h6drift { from { transform: translate3d(calc(-8 * var(--u)), 0, 0); opacity: .45; } to { transform: translate3d(calc(8 * var(--u)), 0, 0); opacity: .6; } }
/* ヒーローの見出し・装飾の入場は無し（絵に焼き込まれているため） */
.h6-sec .hero-title, .h6-sec .hero-sub { animation: none !important; }
@media (max-width: 820px) {
  .s-hero.h6-sec { height: calc(376 * 100cqw / var(--cw)); }
  .h6-sec.sp-a { --cx0: 0; --cw: 428; }
  .h6-sec.sp-b { --cx0: 402; --cw: 450; }
  .h6-sec .h6-stage { left: 0; top: 0; width: 100%; height: 100%; }
  .h6-stage > .h6 { left: calc((var(--ox) - var(--cx0)) * 100cqw / var(--cw)); top: calc((var(--oy) - 43) * 100cqw / var(--cw));
    width: calc(var(--ow) * 100cqw / var(--cw)); height: calc(var(--oh) * 100cqw / var(--cw)); }
  .h6-sec .h6-smoke { --u: calc(100cqw / 852); }
  .s-hero.h6-sec::after { content: none; }
  /* A 案：絵に焼き込まれたロゴの上に、HTML のロゴを同じ大きさで重ねる（二重に見えないように） */
  body:has(.h6-sec.sp-a) .s-header .logo { left: calc(48 * 100cqw / 428); top: calc(60px + (8 - 43) * 100cqw / 428); width: calc(92 * 100cqw / 428); height: calc(88 * 100cqw / 428); }
}

/* ================= ヒーローより下：元デザインの絵を背景に、文字・ボタン・カードを HTML で（2026-10-10 C24） ================= */
.orig-bgs { display: contents; }
.orig-bg { position: absolute; left: 0; width: 100%; top: calc(var(--sy) * var(--u)); height: calc(var(--sh) * var(--u)); z-index: 1; pointer-events: none; max-width: none; }
@media (min-width: 821px) {
  /* 絵の部品は背景に含まれるので隠す（写真の差し替え枠＝MOVIE・STORE・BLOG のカードだけ残す） */
  img[data-orig="orig-part"] { display: none; }
  .stage { background: #fff; }
  .sec:not(.s-hero):not(.s-header) { z-index: 3; }
}
@media (max-width: 820px) {
  .orig-bgs { display: none; }
  .s-base .base-cast, .s-closing .closing-cast { display: none; }
  .s-base .base-garage { height: auto; aspect-ratio: 700 / 701.4; object-fit: cover; margin-top: 10px; }
  .s-movie .bg, .s-blog .bg { content: none; display: none; }
  .s-footer .bg { display: none; }
}

/* 元の絵に合わせた細部（PC） */
@media (min-width: 821px) {
  /* RIDERS BASE の看板：元の板の上に文字だけ（板は絵） */
  .s-base .base-sign { background: none; border: 0; box-shadow: none; }
  .s-base .base-sign span { transform: translate(calc(-2 * var(--u)), calc(-2 * var(--u))) skewX(-5deg) scaleX(1.2); }
  .s-feat .fc-h b { font-weight: 900; font-size: calc(44 * var(--u)); letter-spacing: .01em; }
  .s-feat .fc-h small { white-space: nowrap; letter-spacing: .1em; }
  .s-blog .bcard .cap { flex-wrap: wrap; align-content: flex-end; }
  .s-blog .bcard .cap .date { flex-basis: 100%; font-family: var(--en); font-weight: 500; font-size: calc(15 * var(--u)); letter-spacing: .06em; margin-bottom: calc(4 * var(--u)); opacity: .9; }
}
.l-rideblock-t { display: flex; flex-direction: column; justify-content: center; margin: 0; font-family: "Barlow Condensed", var(--en); font-style: italic; font-weight: 700; color: #a3a9ad; line-height: .9; font-size: calc(58 * var(--u)); scale: .92 1.12; translate: calc(-6 * var(--u)) calc(-14 * var(--u)); letter-spacing: .01em; rotate: -14deg; text-shadow: 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.45); white-space: nowrap; }
@media (max-width: 820px) {
  .l-rideblock-t { left: auto; right: 12px; top: 18px; width: auto; height: auto; font-size: 34px; }
  .s-blog .bcard .cap .date { display: block; font-size: 12px; margin-bottom: 2px; }
  .s-blog .bcard .cap { flex-wrap: wrap; }
}

/* ================= WordPress（子テーマ）に組み込んだときの直し（2026-10-10） =================
   見本の題は短い1行だったが、本物の題（YouTube・記事）は長い。2行で切る・字間を詰める。
   記事のアイキャッチには題が焼き込まれているので、BLOG の題は下の黒い帯に置いて重ねない。 */
.mcard img, .bcard img { object-fit: cover; }
.mcard .cap { right: calc(17 * var(--u)); letter-spacing: .04em; }
.mcard .cap b { font-family: var(--jp); font-weight: 700; font-size: calc(17 * var(--u)); letter-spacing: .02em; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-blog .bcard img { object-position: center top; }
.s-blog .bcard::after { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 58%, rgba(0,0,0,.88) 100%); }
.s-blog .bcard .cap { display: grid !important; grid-template-columns: 1fr auto; align-items: end; column-gap: calc(12 * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: .02em; line-height: 1.45; font-weight: 700; }
.s-blog .bcard .cap .date { grid-column: 1 / -1; }
.s-blog .bcard .cap { --clamp: 2; }
.s-blog .bcard .cap > i { grid-column: 2; grid-row: 2; }
.gr-cap-t { grid-column: 1; grid-row: 2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 820px) {
  .mcard .cap b { font-size: 15px; }
  .s-blog .bcard .cap { font-size: 15px; column-gap: 10px; }
}
/* SNS は文字のリンク（元の SNS アイコンはルールで出さない。今のサイトにある YouTube・Instagram・TikTok・LINE スタンプへの導線を残す） */
.f-sns { display: flex; align-items: center; gap: calc(16 * var(--u)); color: #ddd; font-family: var(--en); font-weight: 600; font-size: calc(13 * var(--u)); letter-spacing: .04em; white-space: nowrap; }
.f-sns a:hover { color: var(--orange2); }
@media (max-width: 820px) { .f-sns { flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 13px; } }
/* 10/10 オーナー指摘：PC のハンバーガーは不要・メニューに PROFILE・CONTACT・SNS（LINE スタンプ含む） */
@media (min-width: 821px) { .s-header .icon-btn.menu { display: none; } .gnav { justify-content: flex-start; gap: calc(34 * var(--u)); } }
.gr-navsns { position: relative; }
.gr-navsns summary { list-style: none; cursor: pointer; padding: calc(4 * var(--u)) 0; }
.gr-navsns summary::-webkit-details-marker { display: none; }
.gr-navsns summary::after { content: " ▾"; font-size: .8em; }
.gr-navsns__list { position: absolute; top: 140%; left: -12px; display: flex; flex-direction: column; min-width: 150px; padding: 8px 0; background: rgba(12,12,12,.96); border: 1px solid #333; border-radius: 4px; z-index: 60; }
.gr-navsns__list a { padding: 8px 16px !important; font-size: 14px; white-space: nowrap; }
.gr-navsns__list a::after { display: none; }
.s-footer .fnav a { padding: 0 calc(22 * var(--u)); }
@media (max-width: 820px) {
  .gr-navsns summary { padding: 12px 0; border-bottom: 1px solid #333; }
  .gr-navsns__list { position: static; background: none; border: 0; padding: 0 0 0 12px; min-width: 0; }
  .gr-navsns__list a { border-bottom: 1px solid #222 !important; padding: 10px 0 !important; font-size: 16px; }
}
/* STORE：BASE の商品写真（正方形）を枠に収める（切らない） */
.scard.is-base img { object-fit: contain; background: #f4f4f2; }
/* BLOG：サムネは 1200×630 のまま（切らない）・題と日付はサムネの下（10/10 オーナー指摘） */
@media (min-width: 821px) { .stage { aspect-ratio: 1440 / 3260; } }
.orig-bg--blog { object-fit: cover; }
.s-blog .bcard { display: flex; flex-direction: column; background: rgba(12,12,12,.85); border-radius: calc(4 * var(--u)); }
.s-blog .bcard::after { content: none; }
.s-blog .bcard img { flex: none; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; object-position: center; }
.s-blog .bcard .cap { position: static; display: grid !important; grid-template-columns: 1fr auto; padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); text-shadow: none; }
.s-blog .bcard .cap .date { grid-column: 1 / -1; grid-row: 1; }
@media (max-width: 820px) {
  .s-blog .bcard { aspect-ratio: auto; }
  .s-blog .bcard .cap { padding: 10px 12px 12px; }
}
/* 0.4.0：BLOG のカードの題が2行でも切れないように（幅の広いカードはサムネが高い）・フッターの SNS とお問い合わせが重ならないように */
@media (min-width: 821px) {
  .s-blog .bcard .cap { flex: 1; align-content: start; padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)); }
  .s-blog .bcard .cap .date { margin-bottom: calc(2 * var(--u)); }
}