/* page-riding-in-japan.php 専用のスタイル */
@layer kbt-mock {
  /* サービスページ共通 */
  .svc-hd{display:grid;grid-template-columns:1fr 330px;gap:40px;align-items:start}
  .svc-lead{font-size:16px;line-height:2;color:#4a525c}
  .svc-lead p{margin-bottom:16px}
  .pricecard{border:2px solid var(--brass);background:#fdfcfa;padding:24px 26px}
  .pricecard .lb{font-size:14px;letter-spacing:0.14em;color:var(--brass);font-weight:700;margin-bottom:12px}
  .pricecard .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px dotted #ddd6cb;font-size:14px}
  .pricecard .row:last-of-type{border-bottom:0}
  .pricecard .row b{font-family:var(--serif);font-size:21px;font-weight:600;white-space:nowrap}
  .pricecard .fine{font-size:14px;color:var(--muted);line-height:1.8;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
  .incl2{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line)}
  .incl2>div{padding:24px 26px}
  .incl2>div:first-child{border-right:1px solid var(--line);background:#fbfaf8}
  .incl2 h4{font-size:18px;font-weight:700;margin-bottom:14px;letter-spacing:.02em}
  .incl2 ul{list-style:none}
  .incl2 li{font-size:14px;color:#4f5761;padding:6px 0 6px 24px;position:relative;line-height:1.75}
  .incl2 .yes li::before{content:"✓";position:absolute;left:0;color:var(--brass);font-weight:700}
  .incl2 .no li::before{content:"−";position:absolute;left:2px;color:#b6bcc4;font-weight:700}
  .person{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start;border:1px solid var(--line);padding:28px 30px;background:var(--white)}
  .person .ph{aspect-ratio:4/5}
  .person h4{font-family:var(--serif);font-size:18px;font-weight:500;margin-bottom:4px}
  .person .role{font-size:14px;letter-spacing:.14em;color:var(--brass);font-weight:700;margin-bottom:16px}
  .person p{font-size:14px;color:#4f5761;line-height:1.95;margin-bottom:16px}
  .person dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:14px;border-top:1px solid var(--line);padding-top:16px}
  .person dt{color:var(--muted);white-space:nowrap}
  .person dd{color:var(--ink)}
  .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .case{border:1px solid var(--line);background:var(--white)}
  .case .ph{aspect-ratio:16/9}
  .case .bd{padding:20px 22px}
  .case .yr{font-size:14px;letter-spacing:.14em;color:var(--brass);font-weight:700;margin-bottom:7px}
  .case h4{font-size:18px;margin-bottom:8px}
  .case p{font-size:14px;color:#5a626c;line-height:1.8}
  @media (max-width:900px){
    .svc-hd{grid-template-columns:1fr;gap:26px}
    .incl2{grid-template-columns:1fr}
    .incl2>div:first-child{border-right:0;border-bottom:1px solid var(--line)}
    .person{grid-template-columns:1fr;gap:20px}
    .person .ph{aspect-ratio:16/9}
    .cases{grid-template-columns:1fr}
  }
  .rules{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .rule{border:1px solid var(--line);background:var(--white);padding:24px 26px}
  .rule .n{font-family:var(--serif);font-size:22px;color:var(--brass);line-height:1;margin-bottom:12px}
  .rule h4{font-size:18px;font-weight:700;margin-bottom:10px}
  .rule p{font-size:14px;color:#4f5761;line-height:1.9}
  .rule a{color:var(--brass);font-weight:700}
  .rule .warn{display:block;margin-top:12px;font-size:14px;color:#9d0a13;background:#fdf3f3;border-left:3px solid #c00c18;padding:9px 12px;line-height:1.75}
  .dlbox{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .dl{display:flex;gap:18px;align-items:flex-start;border:1px solid #e6d9b8;background:#fffdf7;padding:22px 24px;text-decoration:none;color:var(--ink)}
  .dl:hover{border-color:var(--brass)}
  .dl .ic{font-size:26px;color:var(--brass);line-height:1;flex:none}
  .dl h4{font-size:18px;margin-bottom:7px}
  .dl p{font-size:14px;color:#5a626c;line-height:1.8}
  .dl .src{display:block;font-size:14px;color:var(--muted);margin-top:8px}
  .limits{width:100%;border-collapse:collapse;font-size:14px}
  .limits th,.limits td{border:1px solid var(--line);padding:13px 16px;text-align:left}
  /* 表は見出し・本文とも白地にします（背景がグレーのセクションでも浮かないように） */
  .limits th,.limits td{background:var(--white,#fff)}
  .limits th{font-weight:700;white-space:nowrap;width:40%}
  .limits td b{font-family:var(--serif);font-size:17px}
  .pdf-lead{display:flex;gap:26px;align-items:flex-start;border:1px solid var(--line);border-left:4px solid var(--brass);background:var(--paper);padding:30px 32px}
  .pdf-lead .pdf-ic{font-size:46px;line-height:1;color:var(--brass);flex:none}
  .pdf-lead h3{font-size:18px;margin:8px 0 10px}
  .pdf-lead p{font-size:14px;color:#4a525c;line-height:1.9;max-width:64ch}
  .pdf-lead .pdf-meta{font-size:14px;color:var(--muted);margin:12px 0 18px}
  .pdf-lead .pdf-note{display:block;margin-top:12px}
  /* スマホでは項目名の下に本文を続けます（2列のままだと本文が1行数語になるため） */
  @media (max-width:560px){
    .limits th,.limits td{display:block;width:auto}
    .limits th{white-space:normal;border-bottom:0;padding:12px 16px 2px}
    .limits td{border-top:0;padding:4px 16px 13px}
  }
  @media (max-width:820px){ .rules,.dlbox{grid-template-columns:1fr} .pdf-lead{flex-direction:column;gap:14px;padding:24px 20px} }
}

/* ---------------------------------------------------------
   アイコン（記号文字から SVG に置き換えたもの）・リーフレットの表紙・お客様の動画
   @layer の外に置き、mock.css の同名クラスより優先させています。
   --------------------------------------------------------- */
.rule .n .kbt-ic{ width: 26px; height: 26px; display: block; }
.dl .ic .kbt-ic{ width: 28px; height: 28px; display: block; }

/* 冒頭の案内：アイコンの代わりにリーフレットの表紙 */
/* 表紙は右側の文章（見出し〜ボタン）と同じ高さにし、幅は表紙の縦横比から決めます。
   高さは riding-in-japan.js が文章の高さを測って --cover-h に入れます（JSが動かないときは幅120px）。 */
.pdf-lead .pdf-cover{
  flex: none; display: block; align-self: flex-start; height: var(--cover-h, auto); width: 120px; aspect-ratio: 360 / 509;
  border: 1px solid var(--line, #e3e5e8); background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pdf-lead .pdf-cover:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.14); }
.pdf-lead .pdf-cover[style*="--cover-h"]{ width: auto; }
/* 表紙は枠の右端に置きます（HTML上は文章の前にあるので order で入れ替え） */
.pdf-lead .pdf-cover{ order: 2; margin-left: auto; }
.pdf-lead .pdf-cover img{ display: block; width: 100%; height: 100%; object-fit: cover; }
/* スマホは縦積みなので、高さに合わせず小さめの固定幅にします */
@media (max-width: 820px){ .pdf-lead .pdf-cover,
  .pdf-lead .pdf-cover[style*="--cover-h"]{ height: auto; width: 96px; order: 0; margin-left: 0; } }

/* お客様の動画。押すまでは画像だけ（riding-in-japan.js が iframe に差し替えます） */
.yt{
  position: relative; max-width: 880px; margin: 0 auto;
  aspect-ratio: 16 / 9; background: #111; overflow: hidden;
}
.yt__btn{ position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.yt__btn img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s ease; }
.yt__btn:hover img{ filter: brightness(.85); }
.yt__play{ position: absolute; left: 50%; top: 50%; width: 76px; transform: translate(-50%, -50%); }
.yt__play svg{ display: block; width: 100%; height: auto; }
.yt iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt__cap{ max-width: 880px; margin: 12px auto 0; font-size: 14px; color: var(--muted, #6b7280); text-align: center; }
/* 制限速度の表の補足（一部区間120km/h など） */
.limits .lim-note{ display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--muted, #6b7280); }

/* リーフレットのプレビュー（枠の右側。1ページずつ、矢印で切り替え。押すとPDFが開く） */
.pdf-lead .pdf-body{ flex: 1; min-width: 0; }
.pdf-viewer{ flex: none; width: 300px; margin-left: auto; }
.pdf-viewer__stage{ position: relative; aspect-ratio: 1000 / 1413; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0,0,0,.10); }
.pdf-viewer__page{ position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.pdf-viewer__page.is-active{ opacity: 1; visibility: visible; }
.pdf-viewer__page img{ display: block; width: 100%; height: 100%; object-fit: contain; }
.pdf-viewer__nav{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  background: rgba(35,24,21,.72); color: #fff; transition: background-color .2s, opacity .2s;
}
.pdf-viewer.is-ready .pdf-viewer__nav{ display: flex; }
.pdf-viewer__nav:hover{ background: var(--brass, #4a2560); }
.pdf-viewer__nav:focus-visible{ outline: 2px solid var(--brass, #4a2560); outline-offset: 2px; }
.pdf-viewer__nav:disabled{ opacity: .25; cursor: default; background: rgba(35,24,21,.72); }
.pdf-viewer__nav svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pdf-viewer__nav--prev{ left: -19px; }
.pdf-viewer__nav--next{ right: -19px; }
.pdf-viewer__count{ margin-top: 10px; text-align: center; font-size: 13px; letter-spacing: .08em; color: var(--muted, #6b7280); }
@media (max-width: 820px){
  .pdf-viewer{ width: 100%; max-width: 360px; margin: 6px auto 0; }
  .pdf-viewer__nav--prev{ left: 8px; }
  .pdf-viewer__nav--next{ right: 8px; }
}

/* 「実際に走ったライダーの声」は見出し・説明文を画面中央にそろえます（動画も中央） */
#rider-video .sec-head{ text-align: center; }

/* 「実際に走ったライダーの声」：暗い帯に、動画のサムネイルをぼかして敷いた背景。
   見出しは白、動画は影を付けた枠で浮かせ、映画のポスターのような見せ方にします */
.site-main > .rvoice{ position: relative; overflow: hidden; background: #0e1216; color: #fff; isolation: isolate; }
.rvoice__bg{ position: absolute; inset: -40px; z-index: -2; background-size: cover; background-position: center; filter: blur(28px) saturate(1.2); opacity: .55; transform: scale(1.1); }
.rvoice::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,18,22,.55) 0%, rgba(14,18,22,.85) 100%); }
.rvoice .sec-head{ margin-bottom: 40px; }
/* 見出し（ご利用者様の動画）は大きな明朝で、下に動画の方の名前と経歴を添えます */
.rvoice .sec-head h3.rvoice__q{ color: #fff; font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1.5; letter-spacing: .01em; margin-bottom: 22px; }
html[data-site-lang="ja"] .rvoice .sec-head h3.rvoice__q{ font-size: 30px; letter-spacing: .04em; }
.rvoice .sec-head p.rvoice__who{ display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; color: rgba(255,255,255,.65); font-size: 13px; letter-spacing: .06em; }
.rvoice__who b{ font-size: 16px; font-weight: 600; letter-spacing: .04em; color: #fff; }
.rvoice__who b::after{ content: ""; display: inline-block; width: 1px; height: 14px; margin-left: 14px; background: rgba(255,255,255,.35); vertical-align: -2px; }
.rvoice__lv{ display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .28em; color: var(--brass-lt, #b49bc9); }
.rvoice__lv::before, .rvoice__lv::after{ content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.rvoice .yt{ max-width: 960px; border-radius: 6px; box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); }
.rvoice .yt__play{ width: 84px; transition: transform .25s ease; }
.rvoice .yt__btn:hover .yt__play{ transform: translate(-50%, -50%) scale(1.08); }
.rvoice .yt__cap{ display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; color: rgba(255,255,255,.72); }
.yt__cap-ic{ width: 22px; height: auto; flex: none; }
@media (max-width: 820px){
  .rvoice .sec-head h3.rvoice__q, html[data-site-lang="ja"] .rvoice .sec-head h3.rvoice__q{ font-size: 21px; word-break: keep-all; overflow-wrap: anywhere; }
  .rvoice .sec-head h3.rvoice__q br{ display: none; }
  .rvoice .sec-head p.rvoice__who{ flex-direction: column; gap: 4px; }
  .rvoice__who b::after{ display: none; }
  .rvoice .yt__play{ width: 64px; }
  .rvoice .yt__cap{ display: block; text-align: center; }
  .rvoice .yt__cap-ic{ display: inline-block; vertical-align: -2px; margin-right: 8px; width: 18px; }
}
@media (prefers-reduced-motion: reduce){ .rvoice .yt__play{ transition: none; } }

/* 公式資料のパネル：右下に矢印の丸を置き、押すと開くパネルだと示します（トップの「レンタルのご案内」と同じ矢印） */
.dl > span:not(.ic):not(.dl__arw){ flex: 1; min-width: 0; }
.dl__arw{ align-self: flex-end; display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brass, #4a2560); color: #fff; transition: background-color .2s, transform .2s; }
.dl__arw svg{ width: 16px; height: 16px; display: block; }
.dl:hover .dl__arw{ background: #371a48; transform: translateX(4px); }
@media (prefers-reduced-motion: reduce){ .dl__arw{ transition: none; } .dl:hover .dl__arw{ transform: none; } }
@media (max-width: 820px){
  .dl{ gap: 14px; padding: 20px 18px; }
  .dl__arw{ width: 26px; height: 26px; }
  .dl__arw svg{ width: 13px; height: 13px; }
}