/* GORILLA RIDER 子テーマ 0.4.6：全ページ共通の UI（ヘッダー・メニュー・ボタン・見出し・カード・スマホの画面の部品）
   方針（オーナー 10/10）：文字・見出しの飾り・ボタン・枠・区切り線・カードは HTML/CSS。画像は写真・イラスト・キャラ・背景・手書き文字だけ */
:root {
	--gr-orange: #ff5900; --gr-orange2: #ff7a1a; --gr-black: #101010; --gr-ink: #161616; --gr-paper: #f5f4f0;
	--gr-en: "Barlow", "Noto Sans JP", sans-serif; --gr-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	--gr-head-h: 76px;
}
@media (max-width: 1279px) { :root { --gr-head-h: 60px; } }
.gr-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================= ヘッダー（全ページ同じ） ================= */
.gr-header { position: relative; z-index: 100; height: var(--gr-head-h); background: #0d0d0d url(../assets/pages/header-background.webp?v=0.4.9) center / cover no-repeat; }
.gr-header__in { position: relative; max-width: 1440px; height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 0 32px 0 210px; }
.gr-header__logo { position: absolute; left: 48px; top: 8px; width: 130px; z-index: 3; }
.gr-header__logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.gr-header .gr-header__nav { display: flex; align-items: center; gap: 28px; margin: 0 auto; font-family: var(--gr-en); font-weight: 600; font-size: 15px; letter-spacing: .05em; }
.gr-header .gr-header__nav > a, .gr-header .gr-navsns > summary { position: relative; display: block; padding: 8px 0; color: #fff; text-decoration: none; line-height: 1.2; cursor: pointer; }
.gr-header .gr-header__nav > a:hover, .gr-header .gr-navsns > summary:hover { color: var(--gr-orange2); }
.gr-header .gr-header__nav > a.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--gr-orange); }
.gr-header .gr-navsns { position: relative; }
.gr-header .gr-navsns > summary { list-style: none; }
.gr-header .gr-navsns > summary::-webkit-details-marker { display: none; }
.gr-header .gr-navsns > summary::after { content: " ▾"; font-size: .8em; }
.gr-header .gr-navsns__list { position: absolute; top: calc(100% + 10px); left: -14px; display: flex; flex-direction: column; min-width: 170px; padding: 8px 0; background: rgba(12,12,12,.97); border: 1px solid #333; border-radius: 4px; }
.gr-header .gr-navsns__list a { padding: 9px 16px; color: #fff; font-size: 14px; text-decoration: none; white-space: nowrap; }
.gr-header .gr-navsns__list a:hover { color: var(--gr-orange2); }
.gr-header__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.gr-header__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.gr-header__menu { display: none; }
/* ハンバーガー：≡ → ×（回転して変形） */
.gr-burger { position: relative; display: block; width: 26px; height: 18px; }
.gr-burger i { position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.7,0,.3,1), opacity .2s, top .35s cubic-bezier(.7,0,.3,1); }
.gr-burger i:nth-child(1) { top: 0; } .gr-burger i:nth-child(2) { top: 7.75px; } .gr-burger i:nth-child(3) { top: 15.5px; }
.gr-header__menu[aria-expanded="true"] .gr-burger i:nth-child(1) { top: 7.75px; transform: rotate(225deg); }
.gr-header__menu[aria-expanded="true"] .gr-burger i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.gr-header__menu[aria-expanded="true"] .gr-burger i:nth-child(3) { top: 7.75px; transform: rotate(-225deg); }
.gr-header__menu[aria-expanded="true"] { color: var(--gr-orange); }
@media (max-width: 1279px) {
	.gr-header__in { padding: 0 8px 0 16px; gap: 2px; }
	.gr-header__logo { position: relative; left: 0; top: 0; width: 46px; margin-right: auto; }
	.gr-header__menu { display: grid; }
	/* メニュー：右から黒地＋オレンジの斜めの帯がスライド、項目は上から順に少し遅れてフェードイン */
	.gr-header .gr-header__nav { position: fixed; top: var(--gr-head-h); right: 0; bottom: 0; width: min(86vw, 360px); margin: 0; padding: 22px 26px 40px 34px; flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto;
		background: #0d0d0d; box-shadow: -12px 0 30px rgba(0,0,0,.5); font-size: 18px; transform: translateX(105%); visibility: hidden; transition: transform .38s cubic-bezier(.7,0,.3,1), visibility 0s .38s; }
	.gr-header .gr-header__nav::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--gr-orange); transform: skewY(-12deg); transform-origin: top left; }
	.gr-header .gr-header__nav.is-open { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.7,0,.3,1); }
	.gr-header .gr-header__nav > * { opacity: 0; transform: translateX(18px); transition: opacity .25s, transform .3s; }
	.gr-header .gr-header__nav.is-open > * { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i, 0) * .04s); }
	.gr-header .gr-header__nav > a, .gr-header .gr-navsns > summary { padding: 14px 4px; min-height: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
	.gr-header .gr-header__nav > a.is-current { color: var(--gr-orange2); }
	.gr-header .gr-header__nav > a.is-current::after { left: -18px; right: auto; top: 14px; bottom: 14px; width: 4px; height: auto; }
	.gr-header .gr-navsns__list { position: static; min-width: 0; padding: 0 0 6px 14px; background: none; border: 0; }
	.gr-header .gr-navsns__list a { padding: 12px 4px; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
	.gr-menu-veil { position: fixed; inset: var(--gr-head-h) 0 0 0; z-index: 99; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
	.gr-menu-veil.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
}
@media (prefers-reduced-motion: reduce) {
	.gr-burger i, .gr-header .gr-header__nav, .gr-header .gr-header__nav > *, .gr-menu-veil { transition: none !important; }
}
/* トップ：v6 のステージの中のヘッダーの分（72.7 単位）を詰める（ヘッダーは共通の部品） */
@media (min-width: 821px) { .gr-front .stage { margin-top: calc(-72.676 * min(100vw, 1920px) / 1440); } }

/* ================= ボタン（全ページ共通の1つの部品） ================= */
.gr-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: .55em 1.8em; border: 2px solid var(--gr-orange); border-radius: 999px;
	background: var(--gr-orange); color: #fff !important; font-family: var(--gr-jp); font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: .03em; text-decoration: none !important; white-space: nowrap;
	box-shadow: 0 6px 16px rgba(255,89,0,.28); transition: background .2s, color .2s, transform .15s, box-shadow .2s; cursor: pointer; }
.gr-btn:hover { background: var(--gr-orange2); border-color: var(--gr-orange2); box-shadow: 0 8px 20px rgba(255,89,0,.36); }
.gr-btn:active { transform: translateY(1px) scale(.98); box-shadow: 0 3px 8px rgba(255,89,0,.3); }
.gr-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--gr-black); }
.gr-btn__arrow { font-style: normal; transition: transform .2s; }
.gr-btn:hover .gr-btn__arrow { transform: translateX(3px); }
.gr-btn--outline { background: transparent; color: var(--gr-orange2) !important; box-shadow: none; }
.gr-btn--outline:hover { background: var(--gr-orange); color: #fff !important; }
.gr-btn--dark { background: var(--gr-ink); border-color: var(--gr-ink); box-shadow: none; }
.gr-btn--dark:hover { background: #333; border-color: #333; }
.gr-btn--sm { min-height: 40px; padding: .3em 1.1em; font-size: 13px; gap: .45em; }
.gr-btn .gr-ico { flex: none; }
.gr-sec--paper .gr-btn--outline, .gr-pcard .gr-btn--outline, .gr-profile .gr-btn--outline { color: var(--gr-ink) !important; border-color: #d3d3d0; }
.gr-sec--paper .gr-btn--outline:hover, .gr-pcard .gr-btn--outline:hover, .gr-profile .gr-btn--outline:hover { color: #fff !important; border-color: var(--gr-orange); }
@media (max-width: 820px) { .gr-btn { font-size: 15px; padding: .5em 1.4em; } }

/* ================= 見出し・札 ================= */
.gr-sh { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin: 0 0 28px; padding-left: 24px; }
.gr-sh::before { content: ""; position: absolute; left: 0; top: .3em; width: 10px; height: 1.2em; background: var(--gr-orange); transform: skewX(-14deg); font-size: 30px; }
.gr-sh__t { margin: 0; padding: 0; border: 0; background: none; color: var(--gr-ink); font-family: var(--gr-jp); font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; line-height: 1.35; letter-spacing: .03em; }
.gr-sh__t::before, .gr-sh__t::after { content: none !important; }
.gr-sh__s { margin: 0; color: #777; font-size: 15px; }
.gr-sh--dark .gr-sh__t { color: #fff; } .gr-sh--dark .gr-sh__s { color: #c9c9c9; }
.gr-tag { display: inline-block; align-self: flex-start; padding: 3px 16px 3px 12px; background: var(--gr-orange); color: #fff; font-family: var(--gr-en), var(--gr-jp); font-weight: 800; font-size: 13px; letter-spacing: .05em; line-height: 1.5; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.gr-soon { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 2px solid #fff; border-radius: 4px; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .1em; transform: rotate(-3deg); }

/* ================= セクションとカード ================= */
.gr-sec { position: relative; padding: 64px 0 72px; }
.gr-sec--paper { background: var(--gr-paper); }
.gr-sec--dark { background: #111 url(../assets/pages/footer-background.webp?v=0.4.9) center top / cover; color: #fff; }
.gr-sec--road { background: #111; color: #fff; }
.gr-sec--road::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10,10,10,.82), rgba(10,10,10,.7)), var(--bg) center / cover no-repeat; }
.gr-sec > .gr-wrap { position: relative; }
.gr-wrap { max-width: 1260px; margin: 0 auto; padding: 0 32px; }
.gr-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gr-cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gr-xcard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.gr-xcard--dark { background: #1a1a1a; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.gr-xcard__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gr-xcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; padding: 20px 22px 24px; }
.gr-xcard__h { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; background: none; font-family: var(--gr-en), var(--gr-jp); font-size: 24px; font-weight: 800; color: inherit; }
.gr-xcard__h::before, .gr-xcard__h::after { content: none !important; }
.gr-xcard__h--en { font-style: italic; font-weight: 900; font-size: 30px; letter-spacing: .02em; }
.gr-xcard__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--gr-orange); color: #fff; }
.gr-xcard__d { margin: 0 0 6px; color: #555; font-size: 15px; line-height: 1.8; }
.gr-xcard--dark .gr-xcard__d { color: #d0d0d0; }
.gr-xcard__body .gr-btn { margin-top: auto; }
@media (max-width: 900px) { .gr-cards3, .gr-cards2 { grid-template-columns: minmax(0, 1fr); } .gr-sec { padding: 44px 0 52px; } .gr-wrap { padding: 0 16px; } }

/* ================= 下層のヒーロー（絵＝文字なし・見出しは HTML） ================= */
.gr-hero { position: relative; overflow: hidden; background: #111; container-type: inline-size; }
.gr-hero__pic, .gr-hero__pic img { display: block; width: 100%; height: auto; }
.gr-hero__in { position: absolute; inset: 0; padding: 0 0 0 4.2%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.2cqw; color: #fff; text-shadow: 0 3px 14px rgba(0,0,0,.7); pointer-events: none; }
.gr-hero__in > * { pointer-events: auto; }
.gr-hero__title { margin: 0; padding: 0; border: 0; background: none; color: #fff; font-family: var(--gr-jp); font-weight: 900; font-size: 6.4cqw; line-height: 1.12; letter-spacing: .01em; }
.gr-hero__title::before, .gr-hero__title::after { content: none !important; }
.gr-hero__title--brush { font-size: 6.6cqw; font-style: italic; transform: skewX(-6deg) rotate(-3deg); transform-origin: left bottom; }
.gr-hero__title--brush::after { content: "" !important; display: block; width: 72%; height: .1em; margin-top: .12em; background: var(--gr-orange); transform: skewX(-20deg); }
.gr-hero__title--en { font-family: var(--gr-en); font-style: italic; font-weight: 900; font-size: 8.6cqw; line-height: .9; letter-spacing: -.005em; }
.gr-hero__title small { display: block; margin-top: .25em; font-size: .3em; font-weight: 800; letter-spacing: .02em; }
.gr-hero__title--bar { position: relative; padding-left: .32em; }
.gr-hero__title--bar::before { content: "" !important; position: absolute; left: 0; top: .08em; width: .14em; height: .78em; background: var(--gr-orange); transform: skewX(-14deg); }
.gr-hero__eyebrow { margin: 0; color: var(--gr-orange2); font-weight: 800; font-size: max(13px, 1.4cqw); letter-spacing: .06em; }
.gr-hero__lead { margin: 0; font-size: max(14px, 1.3cqw); line-height: 1.8; font-weight: 500; }
.gr-hero__lead b { display: block; font-size: 1.5em; font-weight: 800; line-height: 1.5; }
.gr-hero__en { margin: 0; font-family: var(--gr-en); font-weight: 700; font-size: max(12px, 1.25cqw); letter-spacing: .5em; }
.gr-hero__en small { display: block; font-size: .7em; letter-spacing: .5em; }
.gr-hero__btns { display: flex; align-items: center; gap: 18px; margin: .8cqw 0 0; text-shadow: none; }
.gr-hero--profile .gr-hero__in, .gr-hero--store .gr-hero__in { justify-content: flex-end; padding-bottom: 7cqw; }
.gr-hero--privacy .gr-hero__in { justify-content: flex-end; padding-bottom: 2.4cqw; }
.gr-hero--rb .gr-hero__in { justify-content: flex-start; padding-top: 16cqw; }
.gr-hero__phones { position: absolute; left: 36.5%; top: 59%; width: 34%; height: 40%; }
.gr-hero__phones .gr-phone--a { position: absolute; left: 0; top: 0; width: 46%; transform: rotate(-4deg); }
.gr-hero__phones .gr-phone--b { position: absolute; left: 50%; top: 6%; width: 41%; transform: rotate(3deg); }
@media (max-width: 820px) {
	.gr-hero { container-type: normal; }
	.gr-hero__in { position: static; padding: 20px 16px 24px; gap: 10px; background: #141414; text-shadow: none; }
	.gr-hero__title { font-size: 30px; }
	.gr-hero__title--brush { font-size: 30px; transform: none; }
	.gr-hero__title--en { font-size: 46px; }
	.gr-hero__title small { font-size: 14px; }
	.gr-hero__lead, .gr-hero__eyebrow { font-size: 14px; }
	.gr-hero__en { font-size: 12px; letter-spacing: .3em; }
	.gr-hero__btns { margin-top: 6px; }
	.gr-hero--profile .gr-hero__in, .gr-hero--store .gr-hero__in, .gr-hero--rb .gr-hero__in, .gr-hero--privacy .gr-hero__in { padding: 20px 16px 24px; }
	.gr-hero__phones { position: static; display: flex; justify-content: center; gap: 12px; width: 100%; height: auto; margin-top: 8px; }
	.gr-hero__phones .gr-phone--a, .gr-hero__phones .gr-phone--b { position: relative; left: auto; top: auto; width: 42%; max-width: 170px; }
}

/* ================= スマホの画面の部品（枠・見出し・ナビは CSS／画面はスクショの差し込み口） ================= */
.gr-phone { position: relative; aspect-ratio: 9 / 19.5; padding: 3.5%; border-radius: 13% / 6%; background: linear-gradient(145deg, #3a3a3a, #0b0b0b 40%, #222); box-shadow: 0 18px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18); container-type: inline-size; }
.gr-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 10% / 4.6%; background: #0c0c0c; display: flex; flex-direction: column; }
.gr-phone__screen::before { content: ""; position: absolute; left: 50%; top: 1.6%; width: 32%; height: 3.4%; margin-left: -16%; border-radius: 99px; background: #000; z-index: 3; }
.gr-phone__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.gr-phone__status { display: flex; justify-content: space-between; align-items: center; padding: 3.5cqw 8cqw 0; height: 9cqw; color: #fff; font: 600 5cqw/1 var(--gr-en); }
.gr-phone__status i { width: 14cqw; height: 4.5cqw; border-radius: 2px; background: linear-gradient(90deg, #fff 70%, #888 70%); }
.gr-phone__bar { display: flex; align-items: center; justify-content: space-between; padding: 2cqw 6cqw 3cqw; color: #fff; }
.gr-phone__bar b { font: 800 7cqw/1 var(--gr-en); letter-spacing: .04em; }
.gr-phone__menu { width: 7cqw; height: 5cqw; background: linear-gradient(#fff 0 0) top / 100% 1.2cqw no-repeat, linear-gradient(#fff 0 0) center / 100% 1.2cqw no-repeat, linear-gradient(#fff 0 0) bottom / 100% 1.2cqw no-repeat; }
.gr-phone__menu--r { width: 6cqw; height: 6cqw; border: 1.2cqw solid #fff; border-radius: 50%; background: none; }
.gr-phone__content { display: block; flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: center top; }
.gr-phone__nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1cqw; padding: 3cqw 2cqw 6cqw; background: #111; border-top: 1px solid #2a2a2a; }
.gr-phone__nav span { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; color: #cfcfcf; }
.gr-phone__nav .gr-ico { width: 8cqw; height: 8cqw; }
.gr-phone__nav small { font: 700 3.6cqw/1.1 var(--gr-jp); letter-spacing: -.02em; white-space: nowrap; transform: scale(.92); }
.gr-phone__nav span.is-on { color: var(--gr-orange2); }

/* ================= RIDERS BASE のページ ================= */
.gr-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gr-feat { display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.07); scroll-margin-top: 90px; }
.gr-feat--tour { grid-column: 1 / -1; flex-direction: row; }
.gr-feat__vis { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; height: 280px; padding: 18px 18px 0; overflow: hidden; background: linear-gradient(180deg, #e9eef2, #f6f3ee 70%); }
.gr-feat__vis .gr-phone--card { flex: none; width: 128px; margin: 0 -10px 0 0; align-self: center; z-index: 1; transform: rotate(-3deg); }
.gr-feat__char { position: relative; z-index: 2; width: 250px; height: auto; margin-bottom: -6px; }
.gr-feat__vis--photo { flex: 1.3; height: auto; min-height: 300px; padding: 0; background: #222; }
.gr-feat__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gr-feat__vis--photo .gr-phone--card { position: absolute; right: 7%; bottom: -18%; width: 130px; transform: rotate(5deg); }
.gr-feat__body { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 26px; }
.gr-feat--tour .gr-feat__body { flex: 1; justify-content: center; }
.gr-feat__ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 50%; background: var(--gr-orange); color: #fff; }
.gr-feat__h { margin: 0; padding: 0; border: 0; background: none; color: var(--gr-ink); font-size: 26px; font-weight: 900; line-height: 1.35; }
.gr-feat__h::before, .gr-feat__h::after { content: none !important; }
.gr-feat__s { margin: 0; color: #2a2a2a; font-size: 17px; font-weight: 700; }
.gr-feat__b { margin: 0; color: #666; font-size: 15px; line-height: 1.85; }
.gr-appnav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.gr-appnav li { margin: 0; padding: 0; }
.gr-appnav li::before { content: none !important; }
.gr-appnav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 22px 14px 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(20,20,20,.55); color: #fff; text-align: center; text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
.gr-appnav a:hover { border-color: var(--gr-orange); background: rgba(255,89,0,.12); transform: translateY(-2px); }
.gr-appnav a:focus-visible { outline: 3px solid var(--gr-orange); outline-offset: 2px; }
.gr-appnav__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; }
.gr-appnav b { font-size: 18px; font-weight: 800; }
.gr-appnav small { color: #c4c4c4; font-size: 13px; line-height: 1.7; }
.gr-appnav__chev { position: absolute; right: 10px; top: 10px; color: var(--gr-orange2); font-style: normal; }
.gr-cast { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.gr-castcard { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0 16px 22px; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.07); text-align: center; }
.gr-castcard::before { content: none !important; }
.gr-castcard__img { display: block; width: calc(100% + 32px); margin: 0 -16px 4px; padding-top: 14px; background: linear-gradient(180deg, #232323, #3a3a3a); }
.gr-castcard__img img { display: block; width: 78%; height: auto; margin: 0 auto -2px; }
.gr-castcard .gr-tag { align-self: center; margin-top: -22px; position: relative; }
.gr-castcard__name { font-size: 22px; font-weight: 900; color: var(--gr-ink); }
.gr-castcard__desc { color: #666; font-size: 14px; line-height: 1.75; }
@media (min-width: 901px) { .gr-cast > :nth-child(5) { grid-column: 1 / 2; } .gr-cast { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gr-cast > :nth-child(n+5) { transform: translateX(calc(50% + 9px)); } }
@media (max-width: 900px) {
	.gr-feats { grid-template-columns: minmax(0, 1fr); }
	.gr-feat--tour { flex-direction: column; }
	.gr-feat__vis { height: 240px; }
	.gr-feat__char { width: 200px; }
	.gr-feat__vis .gr-phone--card { width: 108px; }
	.gr-feat__vis--photo { min-height: 220px; }
	.gr-feat__h { font-size: 22px; }
	.gr-appnav { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.gr-appnav a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; grid-template-rows: auto auto; align-items: center; column-gap: 14px; row-gap: 2px; padding: 14px 14px; text-align: left; }
	.gr-appnav__ico { grid-row: 1 / span 2; width: 48px; height: 48px; }
	.gr-appnav b { font-size: 17px; }
	.gr-appnav small { grid-column: 2; font-size: 13px; line-height: 1.6; }
	.gr-appnav__chev { position: static; grid-column: 3; grid-row: 1 / span 2; }
	.gr-cast { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.gr-cast > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
	.gr-castcard { padding: 0 10px 16px; }
	.gr-castcard__img { width: calc(100% + 20px); margin: 0 -10px 4px; }
	.gr-castcard__name { font-size: 18px; }
	.gr-castcard__desc { font-size: 13px; }
}

/* ================= プロフィールのカード（gr_profile） ================= */
.gr-pcard { display: grid; grid-template-columns: 170px minmax(0, 1fr) 230px; gap: 26px; align-items: center; margin: 8px 0 28px; padding: 26px; background: #fff; border: 2px solid var(--gr-orange); border-radius: 10px; }
.gr-pcard__face { width: 170px; height: 170px; overflow: hidden; border-radius: 50%; background: #f3efe9; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--gr-orange); }
.gr-pcard__face img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.gr-pcard__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gr-pcard__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 4px 0 0 !important; font-size: 28px; font-weight: 900; color: var(--gr-ink); line-height: 1.3; }
.gr-pcard__name small { font-size: 14px; font-weight: 700; color: #666; }
.gr-pcard__catch { margin: 0 !important; font-size: 20px; font-weight: 900; color: var(--gr-ink); }
.gr-pcard__desc { margin: 0 !important; font-size: 15px !important; line-height: 1.9; color: #333; }
.gr-pcard__sns { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0 !important; }
.gr-pcard__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
@media (max-width: 900px) {
	.gr-pcard { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 18px 16px; }
	.gr-pcard__face { width: 96px; height: 96px; }
	.gr-pcard__body { display: contents; }
	.gr-pcard .gr-tag, .gr-pcard__name { grid-column: 2; }
	.gr-pcard__face { grid-row: 1 / span 2; }
	.gr-pcard__catch, .gr-pcard__desc, .gr-pcard__sns, .gr-pcard__photo { grid-column: 1 / -1; }
	.gr-pcard__name { font-size: 22px; }
	.gr-pcard__photo { aspect-ratio: 16 / 9; object-position: center 70%; }
	.gr-pcard__sns .gr-btn { flex: 1 1 calc(50% - 8px); }
}
.gr-cars .gr-tag { margin-bottom: 10px; }

/* ================= お問い合わせ・MOVIE の帯 ================= */
.gr-formhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid #eee; }
.gr-formhead__lead { position: relative; margin: 0; padding-left: 20px; font-size: 18px; font-weight: 800; color: var(--gr-ink); }
.gr-formhead__lead::before { content: ""; position: absolute; left: 0; top: .15em; width: 8px; height: 1.2em; background: var(--gr-orange); transform: skewX(-14deg); }
.gr-formhead__rookie { width: 120px; height: auto; flex: none; }
.gr-chband { background: #121212 url(../assets/pages/footer-background.webp?v=0.4.9) center / cover; color: #fff; overflow: hidden; }
.gr-chband__in { position: relative; display: flex; align-items: center; gap: 28px; min-height: 190px; padding-top: 22px; padding-bottom: 22px; }
.gr-chband__yt { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font: italic 900 34px/1 var(--gr-en); }
.gr-chband__yt .gr-ico { color: #ff2b2b; }
.gr-chband__txt { flex: 1; min-width: 0; }
.gr-chband__txt h2 { margin: 0 0 6px; padding: 0; border: 0; background: none; color: #fff; font-size: 20px; font-weight: 800; line-height: 1.5; }
.gr-chband__txt h2::before, .gr-chband__txt h2::after { content: none !important; }
.gr-chband__txt p { margin: 0; color: #b5b5b5; font-size: 14px; }
.gr-chband__cta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gr-chband__bubble { width: 200px; height: auto; padding: 8px 14px; background: #fff; border-radius: 40px; transform: rotate(-4deg); }
.gr-chband__char { width: 210px; height: auto; align-self: flex-end; margin-bottom: -22px; }
@media (max-width: 900px) {
	.gr-chband__in { flex-wrap: wrap; gap: 14px; }
	.gr-chband__txt { flex-basis: 100%; }
	.gr-chband__char { width: 130px; position: absolute; right: 8px; top: 8px; margin: 0; }
	.gr-chband__bubble { display: none; }
	.gr-chband__cta { align-items: flex-start; }
}

/* ================= トップのヒーローの見出し（HTML） ================= */
.gr-tophero { position: absolute; inset: 0; z-index: 5; pointer-events: none; color: #fff; }
.gr-tophero__title { position: absolute; left: 4.5%; top: 50.5%; margin: 0; padding: 0; border: 0; background: none; color: #fff; font-family: var(--gr-jp); font-weight: 900; font-size: calc(88 * var(--u, 1px)); line-height: 1.04; letter-spacing: -.01em; text-shadow: 0 calc(4 * var(--u, 1px)) calc(16 * var(--u, 1px)) rgba(0,0,0,.8); white-space: nowrap; }
.gr-tophero__title span { display: block; }
.gr-tophero__title span + span { margin-left: .14em; }
.gr-tophero__title::before, .gr-tophero__title::after { content: none !important; }
.gr-tophero__en { position: absolute; left: 20.5%; top: 85.5%; margin: 0; font: 700 calc(15 * var(--u, 1px))/1.4 var(--gr-en); letter-spacing: .55em; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.gr-tophero__en small { display: block; font-size: .7em; }
.gr-tophero__side { position: absolute; right: 2.6%; top: 68%; margin: 0; font: 700 calc(11 * var(--u, 1px))/2.15 var(--gr-en); letter-spacing: .1em; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.gr-tophero__side::after { content: ""; display: block; width: 100%; height: 2px; margin-top: 4px; background: var(--gr-orange); }
@media (max-width: 820px) {
	.gr-tophero__title { left: 16px; top: auto; bottom: 18%; font-size: min(11vw, 46px); }
	.gr-tophero__en { left: 16px; top: auto; bottom: 5%; font-size: 10px; letter-spacing: .4em; text-align: left; }
	.gr-tophero__side { display: none; }
}
/* トップの RIDERS BASE 欄・機能カードのスマホの部品 */
.base-map > .gr-phone, .base-hide > .gr-phone { width: 100%; height: 100%; aspect-ratio: auto; }
.base-map { transform: rotate(-3deg); } .base-hide { transform: rotate(3deg); }
.base-div2 { background: var(--gr-orange); transform: skewY(-.4deg); }
.fc-vis { display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 6px; background: linear-gradient(180deg, #e8eef3, #f7f4ef 75%); }
.fc-vis .gr-phone { flex: none; width: 30%; margin: 0 -4% 4% 0; align-self: center; transform: rotate(-3deg); }
.fc-vis .fc-char { position: relative; z-index: 2; width: 58%; height: auto; }
.fc-btn { display: flex; justify-content: center; align-items: center; }
@media (max-width: 820px) {
	.base-phones { display: flex !important; justify-content: center; gap: 12px; padding: 20px 16px 0; }
	.base-map, .base-hide { position: relative !important; left: auto !important; top: auto !important; width: 42% !important; max-width: 170px; height: auto !important; }
	.base-map > .gr-phone, .base-hide > .gr-phone { height: auto; aspect-ratio: 9 / 19.5; }
	.fc-vis { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 455 / 328; margin-top: 14px; }
	.fc-btn { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; margin-top: 14px; }
}
/* トップの機能カード（0.4.6：地の色とカードの枠は CSS。前は背景の絵） */
@media (min-width: 821px) {
	.s-feat { background: #f6f6f4; }
	.s-feat .fc-box { background: #fff; border-radius: calc(14 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.05); }
}
@media (max-width: 820px) { .s-feat .fc-box { display: none; } }
.gr-hero--rb .gr-hero__in { padding-top: 23cqw; }
.gp-faq__q { font-family: Arial, "Helvetica Neue", sans-serif !important; font-style: normal; }
/* 0.4.6 監査：12px 未満の文字をなくす（スマホの画面の中の飾りの文字は除く） */
.gr-site .p-breadcrumb__text, .gr-site .p-breadcrumb__item, .gr-site .__home { font-size: 12px !important; }
.gr-tophero__en { font-size: max(12px, calc(15 * var(--u, 1px))); }
.gr-tophero__en small, .gr-hero__en small { font-size: max(12px, .7em); }
.gr-tophero__side { font-size: max(12px, calc(11 * var(--u, 1px))); }
.gr-site .gr-card__cat, .gr-site .gr-rank__t em, .gr-site .c-categoryList__link, .gr-site .gr-relcat { font-size: 12px !important; }
.gr-site .gw-prTop, .gr-site .c-prNotation { font-size: 12px !important; }
.gr-site .gr-list__sub { font-size: max(12px, .4em); }
.gr-site .p-pnLinks__title { font-size: 13px !important; }
.gr-chband__bubble { object-fit: contain; }
@media (max-width: 820px) { .gr-tophero__en { font-size: 12px; } }
.gr-site .gr-rank__t time { font-size: 12px; }
@media (max-width: 1279px) { .gr-menu-veil { z-index: 0; } .gr-header .gr-header__nav { z-index: 1; } }
/* 0.4.7：トップの MOVIE・STORE・BLOG のカードの枠は CSS（背景の絵は模様・質感だけ） */
@media (min-width: 821px) {
	.s-movie .mcard, .s-blog .bcard { border-radius: calc(6 * var(--u)); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.55); overflow: hidden; }
	.s-store .scard { border-radius: calc(6 * var(--u)); box-shadow: 0 0 0 1px #e4e4e1, 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.08); overflow: hidden; background: #f4f4f2; }
}
/* 0.4.8：スマホのトップの夕景が縦に伸びていた（object-fit が fill のまま 2880×480 を 390×250 に）→ 比を保って切り抜く */
@media (max-width: 820px) { .s-closing .closing-bg { object-fit: cover !important; object-position: 50% 55%; } }
/* 0.4.8 お問い合わせのフォーム（中身は Contact Form 7 の新しいフォーム） */
.gr-cf { display: flex; flex-direction: column; gap: 22px; }
.gr-cf__row { margin: 0; padding: 0; border: 0; }
.gr-cf__label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0; font-weight: 800; font-size: 16px; color: var(--gr-ink); }
.gr-cf__req, .gr-cf__opt { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 12px; font-weight: 700; }
.gr-cf__req { background: var(--gr-orange); color: #fff; } .gr-cf__opt { background: #eee; color: #666; }
.gr-cf__url[hidden] { display: none; }
.gr-cf input[type="text"], .gr-cf input[type="email"], .gr-cf input[type="url"], .gr-cf textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #cfcfcb; border-radius: 6px; background: #fff; font-size: 16px; }
.gr-cf textarea { min-height: 200px; }
.gr-cf input:focus, .gr-cf textarea:focus { outline: 3px solid rgba(255,89,0,.35); border-color: var(--gr-orange); }
.gr-cf .wpcf7-radio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gr-cf .wpcf7-radio .wpcf7-list-item { margin: 0; }
.gr-cf .wpcf7-radio label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border: 1px solid #d5d5d2; border-radius: 6px; background: #fff; cursor: pointer; font-size: 15px; }
.gr-cf .wpcf7-radio label:has(input:checked) { border-color: var(--gr-orange); background: #fff4ec; font-weight: 700; }
.gr-cf .wpcf7-radio input { width: 18px; height: 18px; accent-color: var(--gr-orange); }
.gr-cf__consent { padding: 14px 16px; background: #f6f6f4; border-radius: 6px; font-size: 14px; line-height: 1.8; }
.gr-cf__consent label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.gr-cf__consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--gr-orange); flex: none; }
.gr-cf__consent .wpcf7-list-item { margin: 0; }
.gr-cf__consent a { color: var(--gr-orange); text-decoration: underline; }
.gr-cf__submit { text-align: center; }
.gr-cf__submit .wpcf7-submit { min-width: 240px; min-height: 52px; padding: 0 2em; border: 0; border-radius: 999px; background: var(--gr-orange); color: #fff; font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 6px 16px rgba(255,89,0,.28); }
.gr-cf__submit .wpcf7-submit:hover { background: var(--gr-orange2); }
.gr-cf__submit .wpcf7-submit:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 600px) { .gr-cf .wpcf7-radio { grid-template-columns: minmax(0, 1fr); } }
/* 0.4.8 お問い合わせ：CF7 の自動の段落・改行と SWELL の本文の飾りを打ち消す */
.post_content .gr-cf p { margin: 0 !important; }
.post_content .gr-cf br { display: none; }
.post_content .gr-cf .gr-cf__label { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; margin: 0 0 8px; padding: 0; border: 0; background: none; }
.post_content .gr-cf .gr-cf__req, .post_content .gr-cf .gr-cf__opt { display: inline-block !important; width: auto !important; flex: none; line-height: 1.6; }
.post_content .gr-cf .wpcf7-form-control-wrap { display: block; }
.post_content .gr-cf .wpcf7-radio { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.post_content .gr-cf .wpcf7-radio .wpcf7-list-item { display: block; margin: 0; }
.post_content .gr-cf .wpcf7-radio label { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 8px 14px; border: 1px solid #d5d5d2; border-radius: 6px; background: #fff; cursor: pointer; font-size: 15px; font-weight: 600; }
.post_content .gr-cf .wpcf7-radio label:has(input:checked) { border-color: var(--gr-orange); background: #fff4ec; }
.post_content .gr-cf__row { margin: 0; }
@media (max-width: 600px) { .post_content .gr-cf .wpcf7-radio { grid-template-columns: minmax(0, 1fr); } }
/* スマホのトップの夕景：比を保ったまま、7人が入るように低めに切り抜く（伸ばさない） */
@media (max-width: 820px) {
	.s-closing { height: calc(100vw / 2.6) !important; }
	.s-closing .closing-bg { height: 100% !important; object-position: 50% 58%; }
	.s-closing .l-seeyou { width: 27% !important; height: auto !important; top: 10px !important; left: 10px !important; }
	.s-closing .l-rideblock-t { font-size: 24px !important; top: 8px !important; }
}
/* 0.4.9：トップの RIDERS BASE 欄の看板「RIDE / CUSTOM / SHARE」＝使い込んだ鉄のプレート（CSS だけ：くすんだ鉄・角のリベット・少しのサビ・かすれた白い字・オレンジの区切り・少し傾ける） */
.s-base .rcs-board {
	justify-content: center; gap: calc(5 * var(--u)); padding: calc(10 * var(--u)) calc(4 * var(--u)); border: 0; border-radius: calc(3 * var(--u));
	background:
		radial-gradient(circle at calc(7 * var(--u)) calc(7 * var(--u)), #d9d6cf 0 calc(1.6 * var(--u)), #55524c calc(2 * var(--u)), transparent calc(3 * var(--u))),
		radial-gradient(circle at calc(100% - 7 * var(--u)) calc(7 * var(--u)), #d9d6cf 0 calc(1.6 * var(--u)), #55524c calc(2 * var(--u)), transparent calc(3 * var(--u))),
		radial-gradient(circle at calc(7 * var(--u)) calc(100% - 7 * var(--u)), #d9d6cf 0 calc(1.6 * var(--u)), #55524c calc(2 * var(--u)), transparent calc(3 * var(--u))),
		radial-gradient(circle at calc(100% - 7 * var(--u)) calc(100% - 7 * var(--u)), #d9d6cf 0 calc(1.6 * var(--u)), #55524c calc(2 * var(--u)), transparent calc(3 * var(--u))),
		radial-gradient(ellipse 40% 22% at 82% 88%, rgba(150, 70, 25, .55), transparent 70%),
		radial-gradient(ellipse 30% 14% at 12% 30%, rgba(140, 66, 22, .4), transparent 70%),
		repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
		linear-gradient(160deg, #4a4d4f 0%, #33363a 45%, #26282b 100%);
	box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255,255,255,.12), inset 0 0 calc(14 * var(--u)) rgba(0,0,0,.6), 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.5);
	transform: rotate(-4deg);
}
.s-base .rcs-board span { display: block; width: 78%; padding-top: calc(4 * var(--u)); border-top: calc(1.5 * var(--u)) solid var(--orange, #ff5900); text-align: center;
	font-family: "Barlow Condensed", var(--en); font-weight: 700; font-size: calc(15 * var(--u)); letter-spacing: .08em; color: #efe6d2; transform: scaleY(1.15);
	text-shadow: 0 0 calc(1 * var(--u)) rgba(0,0,0,.6); -webkit-mask: repeating-linear-gradient(100deg, #000 0 3px, rgba(0,0,0,.72) 3px 4px); mask: repeating-linear-gradient(100deg, #000 0 3px, rgba(0,0,0,.72) 3px 4px); }
.s-base .rcs-board span:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 820px) {
	.s-base .rcs-board { --u: 1px; display: flex !important; position: relative; z-index: 3; order: 3; align-self: flex-start; width: 92px; height: auto; margin: calc(-100vw * .6) 0 calc(100vw * .6 - 124px) 6vw; padding: 12px 6px; }
	.s-base .rcs-board span { font-size: 17px; }
}
.s-base .rcs-board span { width: 90%; white-space: nowrap; font-size: calc(13.5 * var(--u)); letter-spacing: .04em; }
@media (max-width: 820px) { .s-base .rcs-board span { font-size: 16px; } }

/* ================= 0.4.11 ================= */
/* 見出しの文字の質感（かすれ・ざらつき）：画像の文字にはせず CSS の mask で */
:root { --gr-grunge: radial-gradient(circle at 20% 30%, transparent 0 1.2px, #000 1.6px) 0 0 / 7px 7px, radial-gradient(circle at 70% 60%, transparent 0 .9px, #000 1.3px) 3px 2px / 11px 9px, linear-gradient(#000, #000); }
.gr-grunge { -webkit-mask: var(--gr-grunge); -webkit-mask-composite: source-in; mask: var(--gr-grunge); mask-composite: intersect; }

/* トップのヒーロー：STORE と同じ見せ方（太い斜体・影・下にオレンジの筆の線） */
.gr-tophero__title { font-style: italic; transform: skewX(-6deg) rotate(-3deg); transform-origin: left bottom; text-shadow: 0 calc(5 * var(--u, 1px)) calc(18 * var(--u, 1px)) rgba(0,0,0,.85), 0 0 calc(3 * var(--u, 1px)) rgba(0,0,0,.6); }
.gr-tophero__title::after { content: "" !important; display: block; width: 78%; height: .11em; margin-top: .12em; background: var(--gr-orange); transform: skewX(-20deg); border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
@media (min-width: 821px) {
	/* ヒーローの下端が RIDERS BASE 欄の屋根の看板に食い込まないように、ヒーローは次の段の上端（662.5）で切る */
	.s-hero.h6-sec { height: calc((662.5 - 72.676) * var(--u)) !important; overflow: hidden; }
	.gr-tophero__title { top: 45%; }
	.gr-tophero__en { top: 82%; }
}
@media (max-width: 820px) {
	.s-hero.h6-sec { height: auto !important; background: #141414; }
	.h6-sec.sp-a, .h6-sec.sp-b { --cx0: 0; --cw: 852; }
	.h6-sec .h6-stage { position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important; aspect-ratio: 1440 / 636.5; }
	.h6-sec .h6-pic, .h6-sec .h6-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
	.gr-tophero { position: static; padding: 18px 16px 24px; background: #141414; }
	.gr-tophero__title { position: static; font-size: 36px; transform: skewX(-6deg) rotate(-2deg); }
	.gr-tophero__en { position: static; margin-top: 14px; }
}

/* ブログ一覧・記事の帯：どの幅でも端まで（aspect-ratio と max-height の組み合わせで幅が縮んでいた） */
.gr-band { width: 100%; }
.gr-band--list { aspect-ratio: auto; height: min(calc(100vw * 466 / 1440), 560px); }
.gr-band--slim { aspect-ratio: auto; height: min(calc(100vw * 319 / 1440), 380px); }
@media (max-width: 767px) { .gr-band--list { height: calc(100vw * 250 / 375); } .gr-band--slim { height: calc(100vw * 158 / 375); } }
/* BLOG の見出し：極太・斜め・黒いふち・かすれ（元デザインの BLOG の調子） */
.gr-band__title { font-weight: 900; letter-spacing: -.01em; transform: skewX(-10deg) rotate(-4deg); transform-origin: left center;
	-webkit-text-stroke: .025em #111; paint-order: stroke fill; text-shadow: .03em .05em 0 #111, 0 .08em .3em rgba(0,0,0,.6);
	-webkit-mask: var(--gr-grunge); -webkit-mask-composite: source-in; mask: var(--gr-grunge); mask-composite: intersect; }
.gr-band--list .gr-band__title { top: 30%; font-size: clamp(64px, 12.2vw, 176px); }
.gr-band--slim .gr-band__title { font-size: clamp(44px, 6.2vw, 90px); }

/* トップの RIDERS BASE 欄の縦長の看板「GOOD BIKES GOOD FRIENDS GREAT LIFE」：ペイントした古い木の板・リベット・かすれたクリームの字・GOOD と GREAT はオレンジ・吊るして少し傾ける・うっすらネオンの縁 */
.s-base .good-sign {
	gap: 0; padding: calc(12 * var(--u)) calc(4 * var(--u)); border: 0; border-radius: calc(3 * var(--u));
	background:
		radial-gradient(circle at calc(8 * var(--u)) calc(8 * var(--u)), #cfc8b8 0 calc(1.7 * var(--u)), #3d362d calc(2.1 * var(--u)), transparent calc(3 * var(--u))),
		radial-gradient(circle at calc(100% - 8 * var(--u)) calc(8 * var(--u)), #cfc8b8 0 calc(1.7 * var(--u)), #3d362d calc(2.1 * var(--u)), transparent calc(3 * var(--u))),
		radial-gradient(circle at calc(8 * var(--u)) calc(100% - 8 * var(--u)), #cfc8b8 0 calc(1.7 * var(--u)), #3d362d calc(2.1 * var(--u)), transparent calc(3 * var(--u))),
		radial-gradient(circle at calc(100% - 8 * var(--u)) calc(100% - 8 * var(--u)), #cfc8b8 0 calc(1.7 * var(--u)), #3d362d calc(2.1 * var(--u)), transparent calc(3 * var(--u))),
		radial-gradient(ellipse 50% 10% at 30% 96%, rgba(130, 62, 20, .55), transparent 70%),
		repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px),
		repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 14px),
		linear-gradient(175deg, #2c2722 0%, #1d1a17 60%, #15120f 100%);
	box-shadow: 0 0 0 calc(1.5 * var(--u)) #4a3f33, 0 0 calc(10 * var(--u)) rgba(255, 110, 30, .35), inset 0 0 calc(18 * var(--u)) rgba(0,0,0,.7), 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.55);
	rotate: 4deg; transform-origin: 50% -20%;
}
.s-base .good-sign::before { content: ""; position: absolute; left: 22%; right: 22%; top: calc(-26 * var(--u)); height: calc(26 * var(--u)); border: calc(1.5 * var(--u)) solid #6b6257; border-bottom: 0; border-radius: 40% 40% 0 0 / 100% 100% 0 0; }
.s-base .good-sign span { font-family: "Barlow Condensed", var(--en); font-weight: 700; color: #ece2cc; letter-spacing: .03em; transform: scaleY(1.15); line-height: 1.12;
	text-shadow: 0 0 calc(1 * var(--u)) rgba(0,0,0,.7); -webkit-mask: repeating-linear-gradient(95deg, #000 0 3px, rgba(0,0,0,.7) 3px 4px); mask: repeating-linear-gradient(95deg, #000 0 3px, rgba(0,0,0,.7) 3px 4px); }
.s-base .good-sign span:nth-child(odd) { font-size: calc(19 * var(--u)); }
.s-base .good-sign span:nth-child(even) { font-size: calc(15 * var(--u)); }
.s-base .good-sign span:nth-child(1), .s-base .good-sign span:nth-child(5) { color: #ff6a14; text-shadow: 0 0 calc(5 * var(--u)) rgba(255, 90, 0, .55); }
.s-base .good-sign span:nth-child(2), .s-base .good-sign span:nth-child(4) { border-bottom: calc(1 * var(--u)) solid rgba(255, 106, 20, .7); padding-bottom: calc(2 * var(--u)); margin-bottom: calc(2 * var(--u)); }
.gr-site .gr-band--list .gr-band__title { left: 3.8%; top: 31%; font-size: clamp(64px, 13vw, 250px); }
.gr-site .gr-band--slim .gr-band__title { font-size: clamp(44px, 6.4vw, 120px); }
@media (max-width: 767px) { .gr-site .gr-band--list .gr-band__title { font-size: 72px; top: 34%; } .gr-site .gr-band--slim .gr-band__title { font-size: 46px; } }
:root { --gr-grunge: radial-gradient(circle at 30% 40%, transparent 0 .7px, #000 1.1px) 0 0 / 13px 11px, radial-gradient(circle at 70% 70%, transparent 0 .5px, #000 .9px) 5px 3px / 17px 15px, linear-gradient(#000, #000); }
/* 0.4.12：手書きの飾り文字は見出しより上に（BLOG の字が「もっと深く。」を隠していた）・トップのヒーローの煙の重ね（ズボンの上の灰色の帯）をやめる */
.gr-band .gr-band__l { z-index: 3; }
.gr-band .gr-band__title { z-index: 2; }
.gr-band .gr-band__cam { z-index: 1; }
.h6-sec .h6-smoke { display: none !important; }
/* 0.4.12：帯の文字は「舞台」の中に置く。帯の高さに上限がある広い画面（1920・2560）で、幅に比例した文字が縦にはみ出し・重なっていた。
   舞台の幅＝帯の高さ×元の縦横比まで → どの幅でも 1440 と同じ並び。見出しの大きさも舞台の幅（cqw）で決める */
.gr-band__stage { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 2; container-type: inline-size; pointer-events: none; }
.gr-band--list .gr-band__stage { width: min(100%, calc(560px * 1440 / 466)); }
.gr-band--slim .gr-band__stage { width: min(100%, calc(380px * 1440 / 319)); }
@media (min-width: 768px) {
	.gr-site .gr-band--list .gr-band__title { left: 4.4%; top: 37%; font-size: 11.6cqw; }
	.gr-site .gr-band--slim .gr-band__title { font-size: 6.4cqw; }
	.gr-band--list .gr-band__l--deeper { left: 5.9%; top: 7%; width: 28.5%; }
}
/* 右に寄せる飾り文字は帯の右端に置いたまま、大きさだけ舞台と同じ上限に */
.gr-band--list .gr-band__l--discover { width: min(13.6%, calc(560px * 1440 / 466 * .136)); z-index: 3; }
.gr-band--slim .gr-band__l--script { width: min(11.8%, calc(380px * 1440 / 319 * .118)); }
.gr-band--slim .gr-band__l--friends { width: min(10.3%, calc(380px * 1440 / 319 * .103)); }
.gr-band__cam { max-width: calc(560px * 1440 / 466 * .439); }
@media (max-width: 767px) { .gr-band--list .gr-band__l--discover { width: 28%; } .gr-band--slim .gr-band__l--script { width: 26%; } .gr-band--slim .gr-band__l--friends { width: 27%; } }
/* プライバシーの目次：手書き「みんなで気持ちよく…」がキャラの絵の下端にかぶっていた → 少し離す */
.gp-toc__words { position: relative; z-index: 1; margin-top: 8px !important; }
/* 飾り文字は明るい所（ライト・夕日）でも読めるよう薄い影 / 広い画面では記者ゴリラを帯の高さに合わせる（頭が切れていた） */
.gr-band .gr-band__l { filter: drop-shadow(0 1px 2px rgba(0,0,0,.75)) drop-shadow(0 0 8px rgba(0,0,0,.45)); }
@media (min-width: 1700px) { .gr-band--list .gr-band__cam { width: auto; height: 96%; max-width: none; } }
/* 0.4.12：「近日公開」＝押せない札。共通ボタンと同じ丸い型・同じ高さで水平に（斜めの白い四角が［機能を見る］と並んで崩れて見えた） */
.gr-soon { transform: none; min-height: 48px; padding: .55em 1.4em; border: 2px dashed rgba(255,255,255,.55); border-radius: 999px; background: rgba(255,255,255,.06);
	color: rgba(255,255,255,.88); font-family: var(--gr-jp); font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; white-space: nowrap; cursor: default; user-select: none; gap: .5em; box-sizing: border-box; }
.gr-soon::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--gr-orange2); }
.gr-hero__btns { flex-wrap: wrap; gap: 12px 14px; }
/* スマホ：RIDERS BASE のヒーローの下の黒い空き（PC 用の上の余白 23cqw がスマホにも効いていた）を詰める */
@media (max-width: 820px) { .gr-hero--rb .gr-hero__in { padding-top: 20px; } }
/* 0.4.13：トップのヒーローは Codex の一枚絵に。灯りの点滅（前の絵の画素）は位置が合わないので止める。スマホは縦長の絵（955×1273） */
.h6-sec .h6-lamp { display: none !important; }
@media (max-width: 820px) { .h6-sec .h6-stage { aspect-ratio: 955 / 1273 !important; } }
/* 0.4.13：RIDERS BASE のヒーロー（7人が絵の中央に描き込まれた）：見出しを少し小さくして人物にかけない・左に暗いグラデーションで字を読みやすく */
@media (min-width: 821px) {
	.gr-hero--rb::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 26%, rgba(0,0,0,0) 44%); }
	.gr-hero--rb .gr-hero__in { z-index: 2; }
	.gr-hero--rb .gr-hero__in > :not(.gr-hero__phones) { max-width: 44cqw; }
	.gr-hero--rb .gr-hero__title--en { font-size: 6.2cqw; }
	.gr-hero--rb .gr-hero__phones { z-index: 2; }
}
/* ===== 0.4.13：🦎の総点検の直し（ページまわり） ===== */
/* 12 動画のサムネは YouTube と同じ 16:9 で切らずに見せる（サムネの下の文字が半分切れていた） */
.gp-feat__img, .gp-vcard__img { aspect-ratio: 16 / 9 !important; }
.gp-feat { align-items: start !important; }
@media (min-width: 821px) {
	.s-movie a.mcard:nth-of-type(1) { --x: 42.3 !important; --w: 408.7 !important; }
	.s-movie a.mcard:nth-of-type(2) { --x: 515.7 !important; --w: 408.7 !important; }
	.s-movie a.mcard:nth-of-type(3) { --x: 989.1 !important; --w: 408.7 !important; }
	.s-movie .mcard::after { background: linear-gradient(180deg, rgba(0,0,0,0) 72%, rgba(0,0,0,.55)) !important; }
	.s-movie .mcard .cap { display: none; } /* サムネに題が入っている → 重ねない（題は a の aria-label） */
}
@media (max-width: 820px) {
	.s-movie .mcard { aspect-ratio: auto !important; height: auto !important; background: #111; }
	.s-movie .mcard img { aspect-ratio: 16 / 9; height: auto !important; }
	.s-movie .mcard::after { content: none !important; }
	.s-movie .mcard .cap { position: static !important; display: block; padding: 8px 10px 10px; }
	.s-movie .mcard .cap b { white-space: normal !important; overflow: visible !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; }
}
/* 13 トップだけ 2560 で 1920 幅の箱になり左右に黒い帯 → ほかのページと同じく全幅 */
.stage { max-width: none !important; }
/* 14 STORE の商品写真：左右の白い空き → 枠いっぱいに（トップの STORE 欄・STORE ページとも） */
.scard img, .gp-pcard img { object-fit: cover !important; object-position: 50% 40%; background: #f4f4f2; }
/* 17 STORE の商品名：2行で「…」になり全文が読めなかった → 3行まで・小さめ */
.gp-pcard span { -webkit-line-clamp: 3 !important; font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
/* 19 RIDERS BASE の FAQ だけ幅が広かった → ほかの段（1260px の箱）とそろえる */
.gp-faq { padding-left: max(32px, calc((100% - 1260px) / 2 + 32px)) !important; padding-right: max(32px, calc((100% - 1260px) / 2 + 32px)) !important; }
@media (max-width: 820px) { .gp-faq { padding-left: 16px !important; padding-right: 16px !important; } }
/* 15 プロフィール：RIDERS BASE の段と夕景のあいだの煙の斜めの帯 → 夕景の段を破れ目の線まで上げて覆う */
@media (min-width: 821px) {
	.gp-sec--quote { position: relative; z-index: 2; margin-top: calc(-96 * 100vw / 1440); clip-path: polygon(0 0, 42% calc(38 * 100vw / 1440), 100% calc(46 * 100vw / 1440), 100% 100%, 0 100%); }
}
/* 16 プライバシー：目次のゴリラの絵が脚の途中で切れていた → 下をぼかして消す */
.gp-toc__guide { -webkit-mask: linear-gradient(#000 78%, transparent); mask: linear-gradient(#000 78%, transparent); }
/* スマホの画面の部品「MY HIDEOUT」が切れていた → 看板の見える位置で切り出す */
.gr-phone[data-screen="hideout"] .gr-phone__content { object-position: 100% 50% !important; }
/* 13 の続き：全幅にしたので、ヘッダーの下のすき間の計算も 1920 の上限を外す（2560 で白い帯が出ていた） */
@media (min-width: 821px) { .gr-front .stage { margin-top: calc(-72.676 * 100vw / 1440) !important; } }
/* 人気の記事の順位：375 で「0 4」と2行に割れていた */
.gr-rank__n { white-space: nowrap; letter-spacing: -.02em; }
@media (max-width: 420px) { .gr-rank a { grid-template-columns: 36px 96px minmax(0, 1fr) !important; gap: 10px !important; } .gr-rank__n { font-size: 22px; } }