@charset "UTF-8";

/* =========================================================
   common.css  サイト共通スタイル（案件: マセラティ / common集約方式 CLAUDE.md §5-2）
   --------------------------------------------------------
   ★ 本案件は top.css を統合した common集約方式。並びは「機構（1〜8）→ 見た目（9〜）」。
     正本: TOP.svg（アートボード幅 2000px）。サイト基準幅 1500px（base.css 0.6667vw）に合わせ、
     PC値は SVG 実値 px ×0.75 ÷10 = rem。SP は 390 基準で別設計
   --------------------------------------------------------
   方針（詳細は CLAUDE.md 冒頭「土台と値の線引き」／§5-2）:
   - マスターの common.css は中立＝「:root 枠 ＋ 機構（どの案件でも不変）＋ 命名ひな形」だけを持ち、
     見た目の具体実装（カード/ボタン/見出し/テーブル/フォーム/フッター等）は持たない
   - 見た目をどこに書くかは案件ごとに2方式から選ぶ（CLAUDE.md §5-2）:
       ・既定 … {page}.css でデザイン実値からゼロ起こし（足場最小・§4-1/§4-2）
       ・選択 … common集約方式＝サイト共通（ヘッダー/フッター/トークン/共通パーツ）を
                案件フォルダの common.css に集約してよい（マスターは中立のまま）
   - 以降この方針コメントの「案件側」＝既定なら {page}.css／集約方式なら案件フォルダの common.css
   - どちらでも見た目の「作り方」は CLAUDE.md §9 / figma-workflow.md §13 の辞書を参照
   - 本案件は :root（CSS変数）を使わず値を直接記述する
   --------------------------------------------------------
   2. ベース / コンテナ / ユーティリティ（機構）
   3. ヘッダー / ハンバーガー / ドロワー（開閉機構のみ・装飾は案件側）
   6. スライダー（Swiper 機構）
   7. Google Map（レスポンシブ枠）
   --- ここから案件の見た目（旧 top.css） ---
   9. 共通パーツ（見出し / 写真 / キャプション / ボタン / 矢印）
  10. ヘッダー（見た目）
  11. セクション固有（レイアウト）
  12. フッター
  13. SP（767px以下）
  14. WordPress 化で追加（入力データの出し方・下層ページ・お問い合わせ）
  15. スマホ最適化（余白のリズム・タップ領域・展示車スライダー・MV）
   ========================================================= */

/* =====================================================================
   2. ベース / コンテナ / ユーティリティ（機構）
===================================================================== */

/* 見出しフォント（Everett Light）。テーマ同梱（assets/fonts）の woff2 を優先、woff は予備。woff2 は header で先読み */
@font-face {
  font-family: "Everett Light";
  src: url("../fonts/everett-light.woff2") format("woff2"),
    url("../fonts/everett-light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 横スクロール抑止は root で。position:fixed の子（オフキャンバスdrawer の translateX(100%)）は
   body{overflow-x:clip} では止められないため html(root) で抑止する */
html {
  overflow-x: clip;
  /* ページ内リンク（#lineup 等）の移動先を固定ヘッダー（PC 8.2rem / SP 6.5rem）の真下に止める */
  scroll-padding-top: 8.2rem;
}

@media screen and (max-width: 767px) {
  html {
    scroll-padding-top: 6.5rem;
  }
}

/* フォント・色は公式サイト（maserati.com/jp/ja）に準拠：Everett, sans-serif（和文は OS 標準ゴシック）/ 本文 400 */
body {
  background: #fff;
  font-family: Everett, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #212529;
}

section {
  position: relative;
  padding: 15rem 0;
}

/* コンテナ：役割（中央寄せ・幅）だけを機構として固定 */
.wrap,
.wrap-m {
  width: 100%;
  margin: 0 auto;
}

.wrap-f {
  padding: 0 5rem;
}

.wrap {
  max-width: 140rem;
}

.wrap-m {
  max-width: 90rem;
}

/* お問い合わせフォーム（.wrap-m に重ねて幅だけ広げる） */
.wrap-form {
  max-width: 100rem;
}

/* ユーティリティ */
.txt-center {
  text-align: center;
}


/* 背景色／文字色（本案件で使うものだけ） */
.bg-white {
  background: #fff;
}


.bg-main {
  background: #02070d;
}


.txt-white {
  color: #fff;
}


@media screen and (max-width: 767px) {
  section {
    padding: 0;
  }

  .wrap-f {
    padding: 0 2rem;
  }
}

/* =====================================================================
   3. ヘッダー / ハンバーガー / ドロワー
   開閉という「挙動が成立する最小機構」だけを持つ。
   バーの太さ・色、背景、余白、アニメ方向、ヘッダーの見た目などの装飾は
   持たない → 案件側でデザイン実値から起こす（CLAUDE.md §4-4）。
   common.js が .is-open / .is-active を切り替える。
===================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
}

.site-header .head-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  /* 破綻防止（CLAUDE.md §11） */
  padding: 0 6rem;
  height: 8rem;
}

.site-title {
  flex-shrink: 0;
}

.head-navi {
  display: flex;
  align-items: center;
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .head-navi {
    display: none;
  }

  /* SPはドロワーへ */
}

/* ハンバーガー（body直下に置く・CLAUDE.md §4-4）。X字化の開閉機構（太さ・色はサンプル） */
.menu-btn {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 1100;
  display: none;
  width: 3.2rem;
  height: 2.4rem;
  cursor: pointer;
  appearance: none;
}

.menu-btn__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #02070d;
  transition: transform .3s, opacity .3s, top .3s, margin-top .3s;
}

.menu-btn__bar:nth-child(1) {
  top: 0;
}

.menu-btn__bar:nth-child(2) {
  top: 50%;
  margin-top: -1px;
}

.menu-btn__bar:nth-child(3) {
  top: 100%;
  margin-top: -2px;
}

.menu-btn.is-active .menu-btn__bar:nth-child(1) {
  top: 50%;
  transform: rotate(45deg);
}

.menu-btn.is-active .menu-btn__bar:nth-child(2) {
  opacity: 0;
}

.menu-btn.is-active .menu-btn__bar:nth-child(3) {
  top: 50%;
  margin-top: -1px;
  transform: rotate(-45deg);
}

@media screen and (max-width: 767px) {
  .menu-btn {
    display: block;
  }
}

/* ドロワー：スライドイン開閉機構（背景・余白・方向の装飾は案件側） */
.gnav-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform .3s ease;
}

.gnav-drawer.is-open {
  transform: translateX(0);
}

.gnav-drawer-inner {
  height: 100%;
  overflow-y: auto;
}

/* =====================================================================
   6. スライダー（JS連動／Swiper・機構／CLAUDE.md §10）
===================================================================== */

.js-slider {
  position: relative;
}

/* 全スライダー共通の動き方（速度は swiper-defaults.js）。
   押した瞬間に一気に動き出し、最後はごく短く収める（全体 0.6 秒で間延びさせない） */
.swiper-wrapper {
  transition-timing-function: cubic-bezier(.2, .8, .4, 1);
}

/* 影・hover liftが overflow:hidden で切れないよう逃がす（CLAUDE.md §10-2） */
.js-slider .swiper {
  overflow: hidden;
  padding: 3rem 3rem 4rem;
  margin: -3rem -3rem -4rem;
}

.js-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  cursor: pointer;
}

.js-slider-arrow--prev {
  left: -7rem;
}

.js-slider-arrow--next {
  right: -7rem;
}

.js-slider-arrow.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.js-slider-progress {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.js-slider-bullet {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background-color .3s, transform .3s;
}

.js-slider-bullet.is-active {
  background: #02070d;
}

/* スクロール不要時（is-static）は矢印・ページネーションを隠す */
.js-slider.is-static .js-slider-arrow,
.js-slider.is-static .js-slider-progress {
  display: none;
}

/* =====================================================================
   7. Google Map（レスポンシブ枠）
===================================================================== */

.gmap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.gmap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 字間 .1em（SVG .st46/.st5〜.st10 等）。em は宣言要素の font-size で px 化されて継承されるため、
   body ではなく font-size を持つ要素群に1ルールで付与する */

@media (hover: hover) and (pointer: fine) {

  /* 写真リンクは透過ではなく写真の拡大（.photo-link 参照） */
  a:not(.photo-link):hover {
    opacity: .7;
  }
}

/* =====================================================================
   9. 共通パーツ
===================================================================== */

/* --- セクション見出し（SHOW ROOM / LINEUP / NEWS 共通）--- */
.sec-tit {
  margin-bottom: 6rem;
  font-family: "Everett Light", Everett, sans-serif;
  font-size: 10rem;
  font-weight: 300;
  letter-spacing: -.03em;
  /* 公式の大見出し（Everett Light / -0.03em） */
  line-height: 1;
  text-align: center;
}

/* --- 写真（全画像共通：枠いっぱいにトリミング。比率は width/height 属性から）--- */
.fit-img {
  width: 100%;
  object-fit: cover;
}

/* 横長（2:1）の写真枠。元画像の比率に関係なく枠を固定する（SP は 4:3） */
.fit-img--wide {
  aspect-ratio: 2 / 1;
}

/* --- 写真＋キャプション（SHOW ROOM / LINEUP / サービス 共通）--- */
.photo-link {
  position: relative;
  display: block;
}

/* ホバーで写真を少し拡大：figure を枠（overflow:hidden）にして中の img だけを拡大する */
.photo-link figure {
  overflow: hidden;
  /* 拡大中に縁から下地が透けても白く見えないよう、枠の下地はサイトの黒 */
  background: #02070d;
  /* Safari：拡大（transform）中に overflow:hidden のクリップが一瞬外れるのを防ぐ */
  transform: translateZ(0);
}

/* 拡大するのは枠（figure）内の写真だけ。再生アイコン等の重ね要素は動かさない */
.photo-link figure img {
  backface-visibility: hidden;
  /* 拡大中の縁のちらつき・隙間防止 */
  transition: transform .4s cubic-bezier(.25, 1, .5, 1);
  /* 立ち上がりの速い ease-out */
}

@media (hover: hover) and (pointer: fine) {
  .photo-link:hover figure img {
    transform: scale(1.05);
    /* transform-origin は既定の中心（50% 50%） */
  }
}

/* 写真の上に文字を重ねるのが本質のため absolute */
.photo-cap {
  position: absolute;
  left: 5rem;
  bottom: 6rem;
  line-height: 1;
}

.photo-cap-tit {
  margin-bottom: 1.5rem;
  font-size: 3.6rem;
}

.photo-cap-tit--en {
  margin-bottom: 0;
  font-family: "Everett Light", Everett, sans-serif;
  font-size: 7rem;
  letter-spacing: -.03em;
  margin-bottom: 1.5rem;
}

/* 英字主体のテキスト（キャプション補足・スタッフの役職/氏名）は Everett Light */
.photo-cap-sub,
.staff-list {
  font-family: "Everett Light", Everett, sans-serif;
}

.photo-cap-sub {
  line-height: 1.5em;
}

/* --- ボタン（中央寄せラベル共通）--- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn--accent {
  width: 30rem;
  min-height: 5rem;
  background: #ffc845;
  color: #000;
  font-size: 1.2rem;
  /* 可読下限 12px（×0.75 では 10.5px） */
}

.program-list {
  gap: 1px;
}

.btn--line {
  min-height: 13rem;
  background: #02070d;
}

/* --- フッターナビの矢印グリフ（SVG: 小塚ゴシック Heavy を横60%に縮小）--- */
.footer-navi a::after {
  font-family: "Kozuka Gothic Pr6N", "Hiragino Sans", sans-serif;
  font-weight: 800;
  -webkit-text-stroke: 0.1rem currentColor;
  transform: scaleX(.6);
}

/* =====================================================================
   10. ヘッダー（MV上に透過で重ねる・CLAUDE.md §4-4）
===================================================================== */

/* 追従（position:fixed は §3 機構）。MV上は透過、MVを抜けたら header.js が .is-scrolled を付けて背景を敷く */
.site-header {
  pointer-events: none;
  color: #fff;
  transition: background-color .3s, backdrop-filter .3s;
}

/* maserati.com（モデルページ）の追従ヘッダーと同値：半透明黒＋背景ぼかし */
.site-header.is-scrolled {
  pointer-events: auto;
  background: rgba(13, 13, 13, .5);
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
}

.site-header .head-box {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* ナビ・お問い合わせをロゴの上下中央に揃える */
  height: auto;
  padding: 2.3rem 6.8rem;
  /* 上=ロゴ上端・下も同量（背景時の帯）。左右対称にしてロゴを中心 x=1000 に置く */
}

.site-title,
.head-right {
  pointer-events: auto;
}

.site-title {
  grid-column: 2;
}

.site-title img,
.footer-logo {
  width: 2.6rem;
}

.head-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: baseline;
  font-size: 1.1rem;
  /* 可読下限 12px（×0.75 では 8.25px） */
  line-height: 1;
  white-space: nowrap;
}

.head-navi ul {
  display: flex;
  gap: 2rem;
}

.head-contact {
  flex-shrink: 0;
  width: 12rem;
  line-height: 1em;
  padding: 1rem 1rem 0.8rem;
  margin-left: 2rem;
  background: #ffc845;
  color: #000;
}

/* ハンバーガー：デザインは PC でも表示・2本線 */
.menu-btn {
  display: block;
  top: 3.5rem;
  /* ロゴ中心（2.3 + 3.59/2）− 自身の高さ/2（1.1/2） */
  right: 2.3rem;
  width: 2.3rem;
  height: 1.1rem;
}

.menu-btn__bar {
  height: 2px;
  background: #fff;
}

.menu-btn__bar:nth-child(2) {
  top: auto;
  bottom: 0;
  margin-top: 0;
}

.menu-btn.is-active .menu-btn__bar:nth-child(1) {
  margin-top: -0.1rem;
}

.menu-btn.is-active .menu-btn__bar:nth-child(2) {
  top: 50%;
  bottom: auto;
  margin-top: -0.1rem;
  opacity: 1;
  transform: rotate(-45deg);
}

/* ドロワー（デザイン無し・最小構成。リンクはフッターナビと同一） */
.gnav-drawer {
  background: #02070d;
  color: #fff;
}

/* PC は右から画面幅の 40%（SP は全面のまま） */
@media screen and (min-width: 768px) {
  .gnav-drawer {
    left: auto;
    width: 40%;
  }
}

.drawer-list {
  padding: 9rem 6rem;
}

/* ドロワー・フッターのナビ行：高さは line-height ではなく padding で作る（1.5 + .75em×2 = 3em） */
.drawer-list a,
.footer-navi a {
  padding: .75em 0;
  line-height: 1.5;
}

.drawer-list a {
  display: block;
}

/* =====================================================================
   11. セクション固有（レイアウトのみ）
===================================================================== */

/* 全画面ファーストビュー（CLAUDE.md §9-5。ヘッダーは fixed 重ねのため押し下げ無し） */
.sec-mv img {
  height: 100vh;
}

/* MV のページ見出し（店舗ページ）はスライドより前面に */
.sec-mv .photo-cap {
  z-index: 2;
}

/* MV スライド操作（maserati.com の home_carousel_handler 仕様）。写真の上に重ねるのが本質のため absolute */
.mv-handler {
  position: absolute;
  right: 3rem;
  bottom: 6rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 16rem;
  color: #fff;
}

.mv-counter {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: .1em;
  line-height: 1;
}

/* ドット：通常は 5px の丸、表示中は残り幅いっぱいに伸びて経過を黄色で表示 */
.mv-dots {
  display: flex;
  gap: .8rem;
  width: 100%;
  margin-top: 1.5rem;
}

.mv-dots button {
  position: relative;
  flex: 0 0 .5rem;
  height: .5rem;
  overflow: hidden;
  border-radius: .3rem;
  background: #fff;
  cursor: pointer;
  transition: flex-grow .5s ease-in, flex-basis .5s ease-in;
}

.mv-dots button.is-active {
  flex: 1 1 auto;
}

.mv-dots span {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ffc845;
}

/* 等幅の横並び（列数は子の数で決まる：写真パネル 2列 / プログラム 3列） */
.panel-list,
.program-list {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

/* 写真パネルの継ぎ目（0.5px 単位の端数）から body の白が透けないよう下地を黒に */
.panel-list {
  background: #02070d;
}

/* LINEUP：全幅1枚表示のため影逃がしの padding/negative margin を打ち消す */
.lineup-slider .swiper {
  padding: 0;
  margin: 0;
}

.arrow-btn {
  width: 6rem;
  height: 6rem;
  /* 円形ボタンの固定寸法 */
  border-radius: 50%;
  background: #fff;
  color: #000;
}

.arrow-btn.js-slider-arrow--prev {
  left: 5rem;
}

.arrow-btn.js-slider-arrow--next {
  right: 5rem;
}

.arrow-btn::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  /* 形状の中心＝viewBox の中心（6,6）なので flex 中央揃えで上下左右ぴったり中央 */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 1 8.5 6 3.5 11' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 1 8.5 6 3.5 11' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.arrow-btn.js-slider-arrow--prev::before {
  transform: rotate(180deg);
}

/* 直前セクションの padding-bottom で間隔を取るため上は 0 */
.sec-lineup,
.sec-news,
.sec-service,
.sec-about,
.sec-staff,
.sec-access,
.sec-related {
  padding-top: 0;
}

.sec-service,
.sec-related {
  padding-bottom: 0;
}


.news-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6rem 3rem;
}

/* 展示車スライダーのテキストも NEWS と同じ（.news-meta / .news-tit）ため余白も共通 */
.news-list figure,
.car-slider figure {
  margin-bottom: 1.5rem;
  /* 余白は枠(figure)側に持たせ、拡大時に枠＝画像サイズでトリミング */
}

.news-meta {
  display: block;
  margin-bottom: 0;
  /* base.css p{margin-bottom:1em} を打ち消す */
  font-size: 1.1rem;
  /* 可読下限 12px（×0.75 では 9.75px） */
}

.news-tit {
  font-size: 1.5rem;
  margin-top: 0.6rem;
}

/* ボタン横並び（NEWS / 店舗情報 共通） */
.news-btns,
.shop-btns {
  display: flex;
  gap: 1.5rem;
}

.news-btns {
  justify-content: center;
  margin-top: 10rem;
}

/* ビジュアル（写真は img・比率 2:1 は画像の width/height 属性から） */
.sec-visual {
  margin-top: 5rem;
}

/* 記事・一覧ページ：直前のセクションが下余白（黒）を持つので間をあけない（あけると body の白が帯状に出る） */
.sec-single+.sec-visual,
.sec-page+.sec-visual,
.sec-page-related+.sec-visual {
  margin-top: 0;
}


/* =====================================================================
   11-2. 店舗ページ（心斎橋 / 正本: 心斎橋.svg x=0 アートボード・値は ×0.75）
===================================================================== */

/* MV：写真の上にページ見出し（.photo-cap）を重ねる */
.sec-mv {
  position: relative;
}

/* 展示車・試乗車スライダー：中央に2枚、左右に見切れ（スライドの1/8）を1枚ずつ。
   枠幅 = スライド2.25枚分 + 間隔3つ なので、スライド幅 =（枠幅 − 間隔×3）÷ 2.25（間隔 3rem = data-gap）。
   幅は cqw（.car-slider 自身の幅）基準でスクロールバー幅の影響を受けない。
   padding = 50% −（スライド幅 ＋ 間隔/2）で、中央2枚の間隔が枠の中心に来る */
.car-slider {
  container-type: inline-size;
}

.car-slider .swiper {
  padding: 0 calc(50cqw - (100cqw - 9rem) / 2.25 - 1.5rem);
  margin: 0;
}

.car-slider .swiper-slide {
  width: calc((100cqw - 9rem) / 2.25);
}

/* 展示車・認定中古車の写真枠（アイキャッチを 4:3 でトリミング。未設定時は無地）。比率を変える時は .arrow-btn の top も合わせる */
.car-slider figure {
  aspect-ratio: 4 / 3;
  /* アイキャッチ未設定時の下地（NEWS の枠と同じ） */
  background: #1a1f26;
}

/* 車名は NEWS のタイトル（.news-tit）より大きく */
.car-slider .news-tit {
  font-size: 2.6rem;
  line-height: 1.2em;
  /* 英字の字詰め（.sec-tit / .photo-cap-tit--en と同じ） */
  letter-spacing: 0em;
}


/* PC で2枚以下（shinsaibashi.js が is-static を付与・Swiper は初期化しない）：中央に並べ、矢印は隠す */
.car-slider.is-static .swiper-wrapper {
  justify-content: center;
  gap: 3rem;
}

.car-slider.is-static .arrow-btn {
  display: none;
}

/* 次へボタン：右側の中央スライドと見切れスライドの間（間隔の中央）に中心を合わせる
   （右端からの距離 = 見切れ幅（スライド幅/8）+ 間隔/2 − ボタン幅/2） */
.car-slider .js-slider-arrow--next {
  right: calc((100cqw - 9rem) / 2.25 / 8 + 1.5rem - 4rem);
  margin-right: 0;
}

.car-slider .arrow-btn {
  /* アイキャッチ（4:3）の上下中央：スライド幅 × 3/4 ÷ 2。比率を変える時はここも合わせる */
  top: calc((100cqw - 9rem) / 2.25 * 3 / 4 / 2);
  width: 8rem;
  height: 8rem;
}

.arrow-btn--accent {
  background: #ffc845;
}

.car-slider+.btn {
  margin: 5rem auto 0;
}

/* 店舗ページのボタン（車両の下・アクセス）は PC で 24rem（SP は全幅のまま） */
@media screen and (min-width: 768px) {

  .sec-exhibition .btn--accent,
  .shop-btns .btn--accent {
    width: 24rem;
  }
}

/* 店舗紹介の動画（template-parts/showroom-movie.php）。比率は写真枠と同じ .fit-img--wide（PC 2:1 / SP 4:3） */
.showroom-movie video {
  display: block;
  /* height 属性（1920×1080）が高さとして効くと比率指定が負けるため、高さは比率から決める */
  height: auto;
  /* 読み込み前・ループの継ぎ目に下地が見えても目立たないようサイトの黒 */
  background: #02070d;
}

.lead {
  margin-top: 5rem;
  font-size: 1.6rem;
  text-align: center;
}

/* スタッフ */
.staff-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8rem 5rem;
}

.staff-list figure {
  aspect-ratio: 17 / 18;
  margin-bottom: 2rem;
  background: #fff;
  /* 写真未支給のため白のプレースホルダ */
}

.staff-role {
  margin-bottom: .5rem;
  font-weight: 300;
}

.staff-name {
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1.2;
}

/* アクセス */
.sec-access .gmap {
  aspect-ratio: 10 / 4;
}

.gmap iframe {
  filter: grayscale(1);
  /* デザインはモノクロ地図 */
}

.shop-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 5rem;
}

.shop-name {
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

.shop-info address {
  font-size: 1.6rem;
  font-style: normal;
}

.shop-info .sns-list {
  margin: 2rem 0 0 -1.6rem;
  /* アイコン枠の内側余白分を戻し、文字の左端に揃える */
}

.shop-access {
  margin-top: 3rem;
  font-size: 1.6rem;
}

/* =====================================================================
   12. フッター
===================================================================== */

.site-footer {
  padding: 10rem 0;
  background: #02070d;
  color: #fff;
}

.footer-logo {
  display: block;
  margin: 0 auto;
}

.footer-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 5rem;
}

/* 2カラム（上から下へ流し、項目数が変わっても2列のまま） */
.footer-navi {
  /* 1列 28rem × 2 ＋ 間隔 7rem */
  width: 68rem;
  column-count: 2;
  column-gap: 7rem;
  margin-bottom: -1rem;
}

.footer-navi li {
  break-inside: avoid;
}

.footer-navi a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.footer-navi a::after {
  content: "＞";
  width: 0.9rem;
  font-size: 0.9rem;
  transform-origin: left center;
}

.sns-list {
  display: flex;
}

.sns-list img {
  width: 4.2rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.footer-brand img {
  width: 11rem;
}

.copyright {
  margin-top: 3rem;
  font-size: 1.1rem;
  /* 可読下限 11px（×0.75 では 7.5px） */
  line-height: 1;
}

/* =====================================================================
   13. SP（767px以下）— SP正本なし。定石で再設計（CLAUDE.md §1-5）
===================================================================== */

@media screen and (max-width: 767px) {
  body {
    font-size: 1.6rem;
  }

  /* PC の body 1.2rem（1500基準）を SP 本文 16px に戻す */

  .wrap,
  .wrap-m {
    padding: 0 2rem;
  }

  /* 共通パーツ */
  .sec-tit {
    margin-bottom: 3rem;
    font-size: 4.2rem;
    line-height: 1.1;
  }

  .fit-img--wide {
    aspect-ratio: 4 / 3;
  }

  .photo-cap {
    left: 2rem;
    right: 2rem;
    bottom: 2.4rem;
  }

  .photo-cap-tit {
    margin-bottom: 0.8rem;
    font-size: 2rem;
    /* 最長「マセラティ天王寺サービスセンター」16字が 390px で1行に収まる値 */
    line-height: 1.3;
  }

  .photo-cap-tit--en {
    font-size: 3.2rem;
  }

  .photo-cap-sub {
    font-size: 1.2rem;
    line-height: 1.5;
  }

  .btn--accent {
    width: 100%;
    min-height: 5.5rem;
    font-size: 1.3rem;
  }

  .btn--line {
    min-height: 8rem;
    font-size: 1.3rem;
  }

  /* ヘッダー */
  .site-header .head-box {
    padding: 1.6rem 2rem;
  }

  .site-title img {
    width: 2.4rem;
  }

  .head-right {
    display: none;
  }

  .menu-btn {
    top: 2.8rem;
    /* ロゴ中心（1.6 + 3.31/2）− 自身の高さ/2（1.4/2） */
    right: 2rem;
    width: 2.8rem;
    height: 1.2rem;
  }

  .menu-btn__bar {
    height: 0.2rem;
  }

  .menu-btn.is-active .menu-btn__bar:nth-child(1),
  .menu-btn.is-active .menu-btn__bar:nth-child(2) {
    margin-top: -0.1rem;
  }

  .drawer-list {
    padding: 8rem 2.4rem;
  }

  /* セクション */
  .panel-list,
  .program-list {
    grid-auto-flow: row;
  }

  /* タップしやすい 44px */
  .arrow-btn {
    width: 4.4rem;
    height: 4.4rem;
  }

  .arrow-btn.js-slider-arrow--prev {
    left: 1.2rem;
  }

  .arrow-btn.js-slider-arrow--next {
    right: 1.2rem;
  }

  .sec-news {
    padding-bottom: 8rem;
  }

  .news-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem 1.6rem;
  }

  .news-list figure,
  .car-slider figure {
    margin-bottom: 1.2rem;
  }

  .news-meta {
    font-size: 1.1rem;
  }

  .news-tit {
    font-size: 1.4rem;
    line-height: 1.6;
  }

  .news-btns {
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 4.8rem;
  }

  .sec-visual {
    margin-top: 4rem;
  }

  .mv-handler {
    right: 2rem;
    bottom: 2rem;
    width: 6rem;
  }

  .mv-dots {
    margin-top: 0.8rem;
  }

  /* SP は MV の見出しを操作部（下段）の上へ逃がす */
  .sec-mv .photo-cap {
    bottom: 6rem;
  }

  .sec-mv .photo-cap-tit {
    font-size: 2.8rem;
  }

  /* 店舗ページ */
  /* 間隔 2rem（data-gap-sp）・ボタン 4rem で同じ比率を保つ */
  .car-slider .swiper {
    padding: 0 calc(50cqw - (100cqw - 6rem) / 3 - 1rem);
  }

  .car-slider .swiper-slide {
    width: calc((100cqw - 6rem) / 3);
  }

  /* スライド幅が約110pxと狭いため、SP は NEWS と同じ 1.4rem に戻す */
  .car-slider .news-tit {
    font-size: 1.8rem;
  }

  .car-slider .news-meta {
    font-size: 1.2rem;
  }

  .car-slider .js-slider-arrow--next {
    right: calc((100cqw - 6rem) / 6);
  }

  /* アイキャッチ（4:3）の上下中央（SP のスライド幅で計算） */
  .car-slider .arrow-btn {
    top: calc((100cqw - 6rem) / 3 * 3 / 4 / 2);
  }

  .car-slider+.btn {
    margin-top: 4rem;
  }

  .lead {
    margin-top: 3rem;
    font-size: 1.4rem;
    text-align: left;
  }

  .staff-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.6rem;
  }

  .staff-list figure {
    margin-bottom: 1.6rem;
  }

  .staff-role {
    font-size: 1rem;
  }

  .staff-name {
    font-size: 1.4rem;
  }

  .sec-access .gmap {
    aspect-ratio: 1 / 1;
  }

  /* SP は ボタンをアクセス（shop-access）の下へ：.shop-info の箱を外し、地図 → 店舗情報 → アクセス → ボタン の順に並べる */
  .sec-access .wrap {
    display: flex;
    flex-direction: column;
  }

  .shop-info {
    display: contents;
  }

  .shop-info>div {
    margin-top: 3rem;
  }

  .shop-info address,
  .shop-access {
    font-size: 1.3rem;
  }

  /* ボタン3つ（ニュース / 来店予約 / Googleマップ）を横に3等分 */
  .shop-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    order: 1;
    gap: 1rem;
    margin-top: 3rem;
  }

  /* フッター */
  .site-footer {
    padding: 6rem 0 4rem;
  }

  .footer-body {
    flex-direction: column;
    align-items: stretch;
    margin-top: 4rem;
    padding: 0;
  }

  /* SP は1列（2列だと1列 約165px で「マセラティ認定中古車心斎橋」などが語の途中で折り返すため） */
  .footer-navi {
    width: auto;
    column-count: 1;
  }

  .footer-navi a {
    font-size: 1.4rem;
  }

  /* ヘッダーのロゴ（.site-title img）と同じ大きさ */
  .footer-logo {
    width: 2.4rem;
  }

  .sns-list img {
    width: 5.5rem;
  }

  .sns-list {
    justify-content: center;
    margin: 4rem 0 0;
  }

  .footer-brand {
    margin-top: 4rem;
    align-items: center;
  }

  .footer-brand img {
    width: 8rem;
  }

  .copyright {
    margin-top: 2.4rem;
  }
}

/* =====================================================================
   14. WordPress 化で追加（デザインHTML に無い部分）
   ・入力データ（MV の PC/SP 画像・展示車・スタッフ写真・ニュース画像）の出し方
   ・下層ページ（一覧 / 記事詳細 / 固定ページ / お問い合わせ）は正本なし。
     既存パーツ（.sec-tit / .news-list / .btn--accent）を組み合わせた定石で構成
===================================================================== */

/* --- 入力データの画像 --- */
/* MV：SP 画像の出し分け（picture）とリンク付きスライド */
.sec-mv picture,
.lineup-slider picture,
.sec-mv .swiper-slide>a {
  display: block;
}

/* 枠（figure）の比率に写真を合わせる */
.car-slider figure img,
.staff-list figure img,
.news-thumb img {
  height: 100%;
}

.car-slider figure {
  overflow: hidden;
}

/* 車両の投稿が無い時の表示（スライダーの代わり）。書体は見出しと同じ Everett Light */
.car-empty {
  margin: 0;
  /* base.css p{margin-bottom:1em} を打ち消す */
  font-family: "Everett Light", Everett, sans-serif;
  font-weight: 300;
  letter-spacing: .1em;
  line-height: 1;
  text-align: center;
}

.car-empty+.btn {
  margin: 6rem auto 0;
}

/* ニュース画像枠：アイキャッチを 3:2 でトリミング（一覧・関連記事）。未設定時は無地
   （.photo-link figure の黒い下地より優先させるため .photo-link を付ける） */
.photo-link .news-thumb {
  aspect-ratio: 3 / 2;
  background: #1a1f26;
}

/* アイキャッチ未設定時：ロゴを枠の中央に（ホバーしても拡大しない） */
.news-thumb--noimg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-link .news-thumb--noimg img {
  width: 8%;
  height: auto;
}

/* 写真の拡大（.photo-link:hover figure img）より優先して打ち消す */
.photo-link:hover .news-thumb--noimg img {
  transform: none;
}

/* --- 下層ページ --- */
/* ヘッダー（fixed）の下から始める：ヘッダー帯 8.2rem ＋ 余白 */
.sec-page {
  padding-top: 18rem;
}

.sec-page-related {
  padding-top: 0;
}

/* 記事詳細：見出し帯（黒）＋本文エリア（画面幅いっぱいの白）。本文幅は .wrap-m */
.sec-single {
  padding: 0;
}

.single-head {
  padding: 15rem 0 8rem;
}

/* 下の余白は帯の padding で持つ（見出しの margin は帯の外へ抜けて白に食い込むため） */
.single-head .sec-tit {
  margin-bottom: 0;
}

.single-body {
  padding: 10rem 0 15rem;
}

/* 白背景に直接置くため、白い箱（.entry の背景・余白）は使わない */
.single-body .entry {
  padding: 0;
  background: none;
}

/* 見出し帯の中のサブ見出し（お問い合わせ）：見出しの下に置く */
.single-head .page-sub {
  margin: 3rem 0 0;
}

/* 本文が白になったので、直後の関連記事（黒）は上にも余白を持つ */
.sec-single+.sec-page-related {
  padding-top: 15rem;
}

/* 和文のページ名（固定ページの汎用テンプレート） */
.sec-tit--page {
  font-size: 5rem;
  letter-spacing: .05em;
}

.page-sub {
  margin: -3rem 0 6rem;
  text-align: center;
}

.no-post {
  text-align: center;
}

.sec-page .news-btns {
  margin-top: 8rem;
}

/* ページャー（WP-PageNavi / paginate_links 共通） */
.pager {
  margin-top: 8rem;
}

.pager .wp-pagenavi,
.pager:not(:has(.wp-pagenavi)) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.pager a,
.pager span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  height: 4.4rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, .4);
  font-family: "Everett Light", Everett, sans-serif;
  line-height: 1;
}

.pager .current {
  border-color: #ffc845;
  background: #ffc845;
  color: #000;
}

.pager .pages,
.pager .extend,
.pager .dots {
  border-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .pager a:hover {
    border-color: #fff;
  }
}

/* 記事本文：旧サイトの本文（文字色・表組み入り）をそのまま読めるよう白地の枠に置く */
.entry {
  padding: 8rem 10rem;
  background: #fff;
  color: #212529;
}

.entry-head {
  margin-bottom: 5rem;
}

.entry-head .news-meta {
  display: inline-block;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

/* ページ見出し（h1）。サイズは店舗ページ MV の見出し（.photo-cap-tit）と同じ */
.entry-tit {
  margin-top: 1rem;
  font-size: 3.6rem;
  line-height: 1.4;
}

.entry-body {
  line-height: 2;
}

.entry-body> :first-child {
  margin-top: 0;
}

.entry-body p,
.entry-body ul,
.entry-body ol,
.entry-body table,
.entry-body figure,
.entry-body blockquote {
  margin-bottom: 2em;
}

.entry-body h2,
.entry-body h3,
.entry-body h4 {
  margin: 2.5em 0 1em;
  font-weight: 700;
  line-height: 1.5;
}

.entry-body h2 {
  font-size: 2.2rem;
}

.entry-body h3 {
  font-size: 1.9rem;
}

.entry-body h4 {
  font-size: 1.6rem;
}

.entry-body a {
  text-decoration: underline;
}

.entry-body strong,
.entry-body b {
  font-weight: 700;
}

.entry-body ul {
  padding-left: 1.5em;
  list-style: disc;
}

.entry-body ol {
  padding-left: 1.5em;
  list-style: decimal;
}

.entry-body img {
  height: auto;
}

.entry-body .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.entry-body .alignright {
  margin-left: auto;
}

.entry-body th,
.entry-body td {
  padding: 1em;
  border: 1px solid #ddd;
}

.entry-body iframe {
  max-width: 100%;
}

/* YouTube 等の埋め込み（幅いっぱい・16:9） */
.entry-body iframe[src*="youtube"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* --- お問い合わせ（MW WP Form：フォーム本文は MW WP Form 側の HTML） --- */
.form-entry h3 {
  margin: 6rem 0 3rem;
  font-size: 2.8rem;
  font-weight: 400;
  text-align: center;
}

.form-entry h3:first-child {
  margin-top: 0;
}

.form-entry table {
  width: 100%;
  border-top: 1px solid #ddd;
}

.form-entry th,
.form-entry td {
  padding: 2.5rem 3rem;
  border-bottom: 1px solid #ddd;
  line-height: 1.6;
}

.form-entry th {
  width: 35%;
  background: #f5f5f5;
  font-weight: 400;
}

.form-entry .must {
  display: inline-block;
  margin-left: 1rem;
  padding: 0.6rem .8rem 0.4rem;
  background: #02070d;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  vertical-align: 0.2rem;
}

.form-entry .txt-s {
  font-size: 1.2rem;
  color: #666;
}

/* 入力欄：1行の欄（input・select）は高さ 5rem で統一。幅は役割で段階を決める
   標準 40rem ／ .long（住所）・textarea 100% ／ .short 15rem・.mini 10rem（郵便番号・年齢）／ select.short 12rem（来店日時の月・日・時間）
   基本の指定は :where() で詳細度を下げ、.long / .short / .mini の幅指定が必ず勝つようにする */
.form-entry :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  width: 40rem;
  max-width: 100%;
  padding: 0 1.4rem;
  border: 1px solid #bbb;
  border-radius: 0;
  background-color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
}

/* 1行の欄は高さ固定（フォーム部品として寸法が本質的に固定のため） */
.form-entry :where(input[type="text"], input[type="email"], input[type="tel"], select) {
  height: 5rem;
}

/* select はブラウザ標準の見た目をやめて矢印を自前で描く（標準のままだと高さ・余白がブラウザで揃わない） */
.form-entry :where(select) {
  padding-right: 4rem;
  -webkit-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 3.5 6 8.5 11 3.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 1.4rem center / 1.2rem;
  cursor: pointer;
}

.form-entry :where(textarea) {
  width: 100%;
  min-height: 16rem;
  padding: 1.2rem 1.4rem;
}

.form-entry .long {
  width: 100%;
}

.form-entry .short {
  width: 15rem;
}

.form-entry .mini {
  width: 10rem;
}

.form-entry select.short {
  width: 12rem;
}

/* 来店日時（月・日・時間）：横並びの間隔は gap で持つ */
.form-entry td:has(> select.short) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.form-entry .mwform-checkbox-field,
.form-entry .mwform-radio-field {
  display: inline-block;
  margin-right: 2rem;
}

/* チェックボックス・ラジオ：ブラウザ標準の見た目をやめ、入力欄と同じ枠線・サイトの黒（#02070d）で描く */
.form-entry .mwform-checkbox-field label,
.form-entry .mwform-radio-field label {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  cursor: pointer;
}

.form-entry input[type="checkbox"],
.form-entry input[type="radio"] {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin: 0;
  border: 1px solid #bbb;
  background: #fff no-repeat center / 1.2rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.form-entry input[type="radio"] {
  border-radius: 50%;
}

/* チェック：黒地に白いチェックマーク */
.form-entry input[type="checkbox"]:checked {
  border-color: #02070d;
  background-color: #02070d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.2 4.6 9.2 10.5 2.8' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E");
}

/* ラジオ：白い縁取りの内側に黒い丸 */
.form-entry input[type="radio"]:checked {
  border-color: #02070d;
  background-color: #02070d;
  box-shadow: inset 0 0 0 .4rem #fff;
}

/* キーボード操作時のフォーカス表示 */
.form-entry input[type="checkbox"]:focus-visible,
.form-entry input[type="radio"]:focus-visible {
  outline: 2px solid #ffc845;
  outline-offset: 2px;
}

.form-entry .error {
  display: block;
  margin-top: .5rem;
  color: #d0021b;
  font-size: 1.3rem;
}

.form-entry .btn-submit ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 6rem;
}

.form-entry .btn-submit input {
  width: 30rem;
  min-height: 6.5rem;
  background: #ffc845;
  color: #000;
  cursor: pointer;
}

.form-entry .btn-submit input[name="submitBack"] {
  background: #ddd;
}

@media (hover: hover) and (pointer: fine) {
  .form-entry .btn-submit input:hover {
    opacity: .7;
  }
}

.form-entry .news-btns {
  margin-top: 6rem;
}

@media screen and (max-width: 767px) {
  .car-empty {
    padding: 2rem 0;
    font-size: 2.4rem;
  }

  .car-empty+.btn {
    margin-top: 4rem;
  }

  .sec-page {
    padding: 12rem 0 8rem;
  }

  .sec-page-related {
    padding: 0 0 8rem;
  }

  .single-head {
    padding: 9rem 0 4rem;
  }

  .single-body {
    padding: 4rem 0 8rem;
  }

  .sec-single+.sec-page-related {
    padding-top: 8rem;
  }

  .sec-tit--page {
    font-size: 2.8rem;
  }

  .page-sub {
    margin: -2rem 0 4rem;
    font-size: 1.4rem;
  }

  .single-head .page-sub {
    margin: 2rem 0 0;
  }

  .sec-page .news-btns,
  .pager {
    margin-top: 4.8rem;
  }

  /* タップしやすい 44px */
  .pager a,
  .pager span {
    min-width: 4.4rem;
    height: 4.4rem;
  }

  .entry {
    padding: 4rem 2rem;
  }

  .entry-head {
    margin-bottom: 3rem;
  }

  /* 長いタイトルが多いため、MV 見出し（SP 2rem）より一段大きく */
  .entry-tit {
    font-size: 2.4rem;
  }

  .entry-body {
    font-size: 1.5rem;
  }

  .entry-body h2 {
    font-size: 1.9rem;
  }

  .entry-body h3 {
    font-size: 1.7rem;
  }

  /* 表組みは横スクロール */
  .entry-body table {
    display: block;
    overflow-x: auto;
  }

  .form-entry h3 {
    margin-top: 4rem;
    font-size: 2.4rem;
  }

  .form-entry table {
    border-top: none;
  }

  .form-entry table,
  .form-entry tbody,
  .form-entry tr,
  .form-entry th,
  .form-entry td {
    display: block;
    width: 100%;
  }

  .form-entry th {
    padding: 1.2rem 1.5rem;
    border-bottom: 0;
  }

  .form-entry td {
    padding: 1.5rem 0 2.4rem;
    border-bottom: 0;
  }

  /* 標準の欄は全幅。短い欄（郵便番号・年齢・来店日時）は1行に並ぶ幅 */
  .form-entry :where(input[type="text"], input[type="email"], input[type="tel"], select) {
    width: 100%;
  }

  .form-entry .short {
    width: 10rem;
  }

  /* 来店日時の月・日・時間を1行に（3つ ＋ 間隔 1rem×2 で幅 35rem に収める） */
  .form-entry select.short {
    width: 10rem;
  }

  .form-entry .mini {
    width: 8rem;
  }

  /* 送信ボタンは横幅いっぱい（li が中央寄せで中身の幅に縮まないよう、横いっぱいに広げる） */
  .form-entry .btn-submit ul {
    align-items: stretch;
    margin-top: 2rem;
  }

  .form-entry .btn-submit input {
    width: 100%;
  }

  .form-entry .mwform-checkbox-field,
  .form-entry .mwform-radio-field {
    display: block;
  }
}


/* =====================================================================
   15. スマホ最適化（767px以下）
   SP正本なし。実機幅 390px で点検して定石で調整（CLAUDE.md §1-5）
===================================================================== */

@media screen and (max-width: 767px) {

  /* --- MV：アドレスバーの出入りで高さが変わらない svh（非対応ブラウザは vh のまま） --- */
  .sec-mv img {
    height: 100svh;
  }

  /* --- セクションの縦リズム：SP は section の padding が 0 のため、見出しの上に余白を取る --- */
  .sec-showroom,
  .sec-lineup,
  .sec-news,
  .sec-exhibition,
  .sec-about,
  .sec-intro,
  .sec-staff,
  .sec-access {
    padding-top: 6rem;
  }

  .sec-access {
    padding-bottom: 6rem;
  }

  /* --- 全幅セクション直下のボタン：画面端に付かないよう左右に余白 --- */
  .car-slider+.btn,
  .car-empty+.btn {
    width: auto;
    margin: 4rem 2rem 0;
  }

  /* --- 展示車スライダー：中央に1台＋左右に見切れ（3台並びは SP では1台 110px と狭すぎるため）
     スライド幅 80cqw・左右の余白 10cqw で中央に置く（見切れ = 10cqw − 間隔 2rem）。
     矢印は中央の車と右の見切れの間（間隔 2rem の中央）・アイキャッチ（4:3）の上下中央 --- */
  .car-slider .swiper {
    padding: 0 10cqw;
  }

  .car-slider .swiper-slide {
    width: 80cqw;
  }

  .car-slider .arrow-btn {
    top: calc(80cqw * 3 / 4 / 2);
    width: 4.8rem;
    height: 4.8rem;
  }

  .car-slider .js-slider-arrow--next {
    right: calc(10cqw - 1rem - 2.4rem);
    margin-right: 0;
  }

  /* --- タップ領域：見た目は変えずに押せる範囲を 44px 前後に広げる --- */
  .menu-btn::after,
  .site-title a::after,
  .footer-logo::after,
  .sns-list a::after {
    content: "";
    position: absolute;
  }

  /* ハンバーガー（28×14）→ 約 48×44 */
  .menu-btn::after {
    inset: -1.5rem -1rem;
  }

  /* ロゴ（24×33）→ 約 44×49 */
  .site-title a,
  .footer-logo {
    position: relative;
  }

  .site-title a::after,
  .footer-logo::after {
    inset: -0.8rem -1rem;
  }

  /* SNS アイコン（55×27）→ 55×45 */
  .sns-list a {
    position: relative;
    display: block;
  }

  .sns-list a::after {
    inset: -0.9rem 0;
  }

  /* 電話番号（高さ 16px）→ 約 40px。行の高さ（レイアウト）は変えない */
  .shop-info address a {
    display: inline-block;
    padding: 1.2rem 0;
    margin: -1.2rem 0;
  }

  /* --- 店舗アクセス：SNS は住所と同じく左揃え --- */
  .shop-info .sns-list {
    justify-content: flex-start;
  }

  /* --- お問い合わせ：チェックボックス・ラジオを押しやすく（行の高さ 44px・ボックス 20px） --- */
  .form-entry .mwform-checkbox-field label,
  .form-entry .mwform-radio-field label {
    display: flex;
    gap: 1rem;
    min-height: 4.4rem;
  }

  /* --- ラインアップ：スライドは正方形（写真は中央でトリミング） --- */
  .lineup-slider .fit-img--wide {
    aspect-ratio: 1 / 1;
  }

  /* --- 文字の最小サイズ 12px --- */
  .news-meta,
  .copyright {
    font-size: 1rem;
  }
}

/* =====================================================================
   16. SP の追従お問い合わせボタン（画面下・横幅100%）
   少しスクロールしたら header.js が .is-visible を付けて下からせり上げる。PC は出さない
===================================================================== */
.sp-contact,
.sp-contact-edge {
  display: none;
}

@media screen and (max-width: 767px) {

  /* 画面下に固定する枠（高さ 0）。黄色のボタンは枠を基準に absolute で画面下端に重ねる（重ねるのが本質のため absolute）。
     iOS 26 の Safari は画面下端の固定要素の background-color を読んでツールバーの周りを塗る。
     実機で確認：隙間をあけて黒い帯を見せても、ボタンの background-color（黄）が読まれることがある。
     → ボタンの黄色は background-color ではなく background-image（単色グラデーション）で塗り、Safari に読ませない。
       ボタンの裏の黒い帯（.sp-contact-edge）の background-color を読ませる */
  .sp-contact {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 800;
    height: 0;
    visibility: hidden;
    transition: visibility .3s;
  }

  .sp-contact.is-visible {
    visibility: visible;
  }

  .sp-contact .btn {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 見た目は .btn--accent と同じ黄色。Safari に読ませないため background-color は透明にし、画像として塗る */
    background-color: transparent;
    background-image: linear-gradient(#ffc845, #ffc845);
    box-shadow: 0 -0.2rem 1rem rgba(0, 0, 0, .2);
    /* 隠れている時は画面の外（下）へ */
    transform: translateY(100%);
    transition: transform .3s;
  }

  .sp-contact.is-visible .btn {
    transform: translateY(0);
  }

  /* ボタンの裏（画面下端）の黒い帯。Safari がツールバーの色として読む。ボタンを出している時だけ置く
     （Safari は display:none の要素は読まない）。Safari の判定（高さ 3px 以上）に対する値なので px */
  .sp-contact-edge {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    /* ボタン（.sp-contact：800）の裏に重ねる */
    z-index: 799;
    height: 4px;
    background-color: #02070d;
  }

  .sp-contact.is-visible+.sp-contact-edge {
    display: block;
  }

  /* ボタンがコピーライトに重ならないよう、フッターの下にボタンの高さ分の余白 */
  body:has(.sp-contact) .site-footer {
    padding-bottom: calc(4rem + 5.5rem);
  }
}