/* single-kbt_motorcycle.php 専用のスタイル */
@layer kbt-mock {
  /* =========================================================
     車両詳細ページ
     開いた最初の画面で「左＝車両写真／右＝諸元と料金」が
     同時に見えるように、ヒーロー・ギャラリー・スペックを
     1つのブロックにまとめています。
     ========================================================= */
  .mtop{display:grid;grid-template-columns:1fr 430px;background:var(--white);border-bottom:1px solid var(--line)}
  .mtop-gal{background:var(--paper);padding:24px;display:flex;flex-direction:column;gap:10px}
  .mtop-gal .main{flex:1;min-height:400px}
  .mthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .mthumbs .ph{aspect-ratio:4/3;cursor:pointer;transition:opacity .2s}
  .mthumbs .ph:hover{opacity:.78}
  .mtop-info{padding:34px 40px 40px;display:flex;flex-direction:column}
  .mtop-info .crumb{color:var(--muted);margin-bottom:16px}
  .mtop-info .crumb a{color:var(--muted);text-decoration:none}
  .mtop-info :is(h1,h2){font-family:var(--serif);font-size:34px;font-weight:500;line-height:1.25;margin-bottom:10px}
  .mtop-info .sub{font-size:14px;color:#5a626c;line-height:1.85;margin-bottom:22px}
  .mtop-info .spectable{margin-bottom:0}

  /* ===== 以下、下部セクション ===== */

  /* スタッフのひとこと：ワンポイントの枠 */
  .mabout{padding-top:34px;padding-bottom:34px}
  /* 幅は .blk の左右パディング（56px）に任せ、他のセクションと左右を揃えます */
  .mabout-in{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--brass);padding:24px 30px;display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start}
  .mabout .av{width:64px;height:64px;border-radius:50%;flex:none}
  /* 丸の中は、仮の文字「スタッフ写真」をやめて、吹き出しのアイコン（SVG。single-kbt_motorcycle.php）を描きます */
  .mabout .av::after{content:none}
  .mabout .av .av-sil{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block}
  .mabout .lbl{font-size:14px;letter-spacing:0.14em;font-weight:700;color:var(--brass);margin-bottom:9px}
  .mabout .txt p{font-size:16px;line-height:2;color:#3a4149}
  .mabout .txt .sm{font-size:14px;line-height:1.8;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px dotted var(--line)}
  /* 単価。枠と番号付きの見出し（01./02.）は、手順のように読めてしまうので
     やめました。表と同じ地の上に、行だけを並べています。 */
  .feelines{max-width:520px;margin-bottom:26px}
  .feelines h4{font-size:15px;font-weight:700;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .feeline{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px dotted var(--line);font-size:14px;color:#5a626c}
  .feeline b{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}

  /* 貸出拠点 */
  @media (max-width:1050px){
    .mtop{grid-template-columns:1fr}
    .mtop-gal .main{min-height:300px}
    .mtop-info{padding:28px 24px 32px}
    .mtop-info :is(h1,h2){font-size:27px}
    .mabout-in{padding:20px 20px;grid-template-columns:48px 1fr;gap:16px}
    .mabout .av{width:48px;height:48px}
    .mabout .txt p{font-size:14px;line-height:1.95}
  }
  @media (max-width:700px){
    .mtop-gal{padding:14px}
    .mtop-gal .main{min-height:220px}
    .mthumbs .ph{aspect-ratio:4/3}
    .mtop-info{padding:24px 20px 28px}
    .mtop-info :is(h1,h2){font-size:24px}
  }
}

/* 車両写真（メイン・サブ）。切り抜きの写真が多いので、白地に全体を収めて表示します */
.mtop-gal .m-photo{ background-color: #fff; background-size: contain; background-repeat: no-repeat; background-position: center; border: 1px solid var(--line, #e3e5e8); }
.mtop-gal .main.m-photo{ background-origin: content-box; padding: 18px; }
.mthumbs button.m-photo{ appearance: none; padding: 0; cursor: pointer; }
.mthumbs .m-photo.is-current{ outline: 2px solid var(--brass, #4a2560); outline-offset: -2px; }