/*!

Theme Name: surron
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: surron
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

surron is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* すべての要素に box-sizing を適用 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==========================================================
   0. ルート変数  ─────────────────────────────────────────── */
:root{
  /* サイト左右の共通余白。必要なら値だけ変えれば全体が動く */
  --side-gap:clamp(16px,5vw,96px);
  --site-max:1440px;
  --yellow:#FFD700;
  --gray-copy:#cfcfcf;
}

/* 基本設定：スクロールバーのズレ防止 */
html,body{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden;
  background:#000;color:#fff;font-family:'Noto Sans JP',sans-serif;}
a{color:var(--yellow);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ==========================================================
   2. 共通ラッパー  ──────────────────────────────────── */
.site-wrapper{
  max-width:var(--site-max);
  margin-inline:auto;
  padding-inline:var(--side-gap);
  box-sizing:border-box;
}

body, html {
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* 横スクロール防止 */
}

/* リンク */
a {
  color: #FFD700; /* テーマカラーの黄色 */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ヘッダー */
.site-header{
  background:#000;
  position:relative;
}
.header-container{               /* ← wrapper を内包させる */
  max-width:var(--site-max);
  margin-inline:auto;
  padding-inline:var(--side-gap);
  display:flex;align-items:center;justify-content:space-between;
  padding-block:.5rem;           /* 上下だけ */
}
.site-logo img{
  height:48px;width:auto;display:block;
}

/* ナビゲーション */
.main-navigation{flex-grow:1;display:flex;justify-content:flex-end;}
.nav-menu{display:flex;gap:2rem;list-style:none;margin:0;padding:0;}
.nav-menu a{color:#fff;font-weight:500;font-size:1rem;transition:color .3s;}
.nav-menu a:hover{color:var(--yellow);}

/* 動画セクション */
.hero-video {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.hero-video video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
}

/* フッター */
.footer {
  background: #000;
  color: #fff;
  padding: 2rem 1rem;
  text-align: center;
}

.footer__container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-top: 1.5rem;
}

.footer__column ul {
  list-style: none;
  padding: 0;
}

.footer__column li {
  margin: 0.5rem 0;
}

.footer__sns {
  margin-top: 2rem;
}

.footer__sns img {
  height: 24px;
  margin: 0 0.5rem;
}

.footer__copyright {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: #aaa;
}

@media (max-width: 768px) {
  .footer__container {
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
  }

  .footer__column {
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .footer__sns {
    margin-top: 1rem;
  }

  .footer__sns img {
    height: 28px;
    margin: 0 0.7rem;
  }

  .footer__copyright {
    margin-top: 1.5rem;
    font-size: 0.8rem;
  }
}


/* ハンバーガー */
.menu-toggle{
  display:none;                 /* デフォルトは非表示 */
  position:absolute;            /* ← 親 relative が必要 */
  top:1rem;
  right:var(--side-gap);        /* ここで左右余白を共有 */
  z-index:1100;
}
.menu-toggle .bar{width:25px;height:3px;background:#fff;transition:.3s;}

/* ▼ スマホ向け表示 */
@media(max-width:768px){

  .menu-toggle{display:flex;}   /* ① toggle を出す */

  .main-navigation{
    display:none;               /* 初期状態で隠す */
    flex-direction:column;
    align-items:flex-start;
    position:fixed;
    top:60px;
    right:0;                    /* ← left は外す */
    width:100%;                 /* 幅 100%  */
    padding:1.5rem var(--side-gap);
    background:#000;
    transform:translateY(-100%);
    transition:transform .3s ease-in-out;
    box-sizing:border-box;      /* ← padding を幅内に収める */
  }
  .main-navigation.active{
    display:flex;
    transform:translateY(0);
  }

  .nav-menu{
    flex-direction:column;
    gap:1.2rem;
    width:100%;
    margin:0;padding:0;
  }

  .nav-menu a {
    font-size: 1.2rem;
  }

  .header-container {
    position: relative;
  }
}

/* BIKE LINEUPセクション */
.bike-lineup {
  padding: 4rem 1rem;
  background-color: #111;
  color: #fff;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: #FFD700;
}

.bike-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.bike-card {
  text-align: center;
}

.bike-card img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  transition: transform 0.3s ease;
}

.bike-card h3 {
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  transition: color 0.3s ease;
}

.bike-card {
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bike-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(255, 215, 0, 0.2); /* 黄色がかった影 */
}

.bike-card:hover img {
  transform: scale(1.05);
}

.bike-card:hover h3 {
  color: #FFD700; /* テーマカラーの黄色に */
}

/* Surron News セクション全体 */
.surron-news {
  background-color: #FFD700;
  color: #000;
  padding: 3rem 1rem;
}

.surron-news__container {
  max-width: 1200px;
  margin: 0 auto;
}

.surron-news__title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
}

.surron-news__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.surron-news__item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.surron-news__item:hover {
  transform: translateY(-5px);
}

.surron-news__link {
  display: block;
  color: #fff;
  text-decoration: none;
  height: 100%;
}

.surron-news__thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.surron-news__thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.surron-news__content {
  background-color: #000;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.surron-news__date {
  font-size: 0.875rem;
  color: #ccc;
  margin-bottom: 0.5rem;
}

.surron-news__text {
  color: #FFD700;
  font-weight: bold;
}

.surron-news__more {
  text-align: center;
  margin-top: 2rem;
}

.surron-news__btn {
  display: inline-block;
  background-color: #000;
  color: #FFD700;
  padding: 0.75rem 2rem;
  font-weight: bold;
  text-decoration: none;
  border: 2px solid #000;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.surron-news__btn:hover {
  background-color: #FFD700;
  color: #000;
}

/* ▼ footer */
.site-footer{background:#000;color:#fff;text-align:center;padding:1rem;}
.site-title a{color:var(--yellow);font-weight:700;font-size:1.5rem;}
.footer__container {
  display: flex;
  justify-content: center;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.footer__column {
  min-width: 180px;
}

.footer__column h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.footer__column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__column li {
  margin-bottom: 0.5rem;
}

.footer__column a {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s;
}

.footer__column a:hover {
  opacity: 0.7;
}

.footer__sns {
  text-align: center;
  margin-top: 2rem;
}

.footer__sns img {
  width: 24px;
  height: 24px;
  margin: 0 0.5rem;
  vertical-align: middle;
  transition: transform 0.3s;
}

.footer__sns img:hover {
  transform: scale(1.1);
}

.footer__copyright {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: #aaa;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .footer__container {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .footer__column {
    text-align: center;
  }

  .footer__sns img {
    width: 20px;
    height: 20px;
  }
}

/* ボタンの装飾 */
.region-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.region-filters button {
  background: #f0f0f0;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 20px;
  transition: background 0.3s;
}
.region-filters button.active,
.region-filters button:hover {
  background: #222;
  color: #fff;
}

/* ディーラーカード表示 */
/* ========== Dealer Page Styles ========== */
.region-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.region-btn {
  padding: 8px 16px;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  transition: background 0.3s ease;
}

.region-btn.active {
  background: #ffcc00;
  color: #000;
}

.region-btn:hover {
  background: #444;
}

.dealer-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  justify-content: center;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
}

.dealer-card {
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.dealer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}


.dealer-name {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 0.8rem;
  border-left: 4px solid #ffcc00;
  padding-left: 0.6rem;
}

.dealer-address,
.dealer-phone,
.dealer-website {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.dealer-website a {
  color: #fff;
  text-decoration: underline;
  transition: color 0.2s;
}

.dealer-website a:hover {
  color: #ff0;
}

/* About Surron hero */
html {
  scroll-behavior: smooth; /* スムーズスクロール */
}

/* メイン背景動画を完全にカバー */
.about-hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 背景動画 */
.about-hero-background video,
.about-hero-background img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%; /* 100vwから修正 */
  height: 100vh;
  z-index: 0;
}

/* 黒の半透明オーバーレイ */
.about-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* コンテンツレイヤー */
.about-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px; /* スマホ対策 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 見出しと段落 */
.about-hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.about-hero-content p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

/* CTAボタン */
.hero-btn {
  background-color: #ffcc00;
  color: #000;
  padding: 12px 24px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.hero-btn:hover {
  background-color: #e6b800;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .about-hero-content h1 {
    font-size: 2rem;
  }

  .about-hero-content p {
    font-size: 1.2rem;
  }

  .hero-btn {
    font-size: 0.9rem;
    padding: 10px 20px;
  }
}

.site-main section {
  padding: 40px 20px;
}

/* ラインナップページ */
.emoto-lineup-page {
  background-color: #000;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
}

.emoto-hero-section {
  position: relative;
  width: 100%;
  height: 60vh;
  overflow: hidden;
}

.emoto-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.emoto-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(255,255,255,0));
  display: flex;
  align-items: center;
  padding-left: 40px;
}

.emoto-hero-overlay h1 {
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
}

.emoto-lineup-heading {
  text-align: center;
  margin: 60px 20px 30px;
}

.emoto-lineup-heading h2 {
  font-size: 2.5rem;
  color: #ffcc00;
}

.emoto-model-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.model-card {
  width: calc(33.333% - 30px);
  min-width: 280px;
  max-width: 360px;
  text-align: center;
  background-color: #111;
  padding: 20px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.model-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

.model-card img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.model-card h3 {
  font-size: 1.2rem;
  margin: 0;
}

.model-card p {
  padding: 16px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

/* ラインナップページ＠スマホ対応 */
@media (max-width: 768px) {
  .model-card {
    width: 100%;
  }
}

/* ===== Light Bee (Static) ===== */
.light-bee-page .hero-section{
  position:relative;min-height:70vh;
  background-size:cover;background-position:center;
}
.light-bee-page .hero-section .overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 40%,rgba(0,0,0,0) 80%);
}
.light-bee-page .hero-text{
  position:absolute;bottom:10%;left:5%;color:#fff;max-width:45%;
}

/* ---- Hero split fade 8:2 -------------------------------- */
.hero-fade{overflow:hidden;background:#000;}
.hero-inner{display:flex;aspect-ratio:21/9;}      /* 21:9 固定 */
@media(max-width:900px){.hero-inner{aspect-ratio:16/9;}}
@media(max-width:540px){.hero-inner{aspect-ratio:4/3;}}

/* 左：コピー 20%／右：画像 80% */
.hero-copy{
  flex:0 0 20%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.8rem;
  padding-left:var(--side-gap);
}

.hero-bg{
  flex:0 0 80%;
  position:relative;
  background-size:cover;
  background-position:center;
}

.hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.85) 12%,rgba(0,0,0,.6) 30%,rgba(0,0,0,0) 65%);
}

/* スマホ表示（グラデーションを無効にして縦長に） */
@media (max-width: 540px) {
  .hero-inner {
    display: block;
    position: relative;
    aspect-ratio: unset; /* 無効化 */
    height: 100vh; /* 高さを明示して画像がはみ出ないように */
    overflow: hidden;
  }

  .hero-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    padding: 1rem;
    width: 90%;
    max-width: 100%;
    z-index: 2; /* テキストを上に */
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1; /* 背景は後ろに */
  }

  .hero-bg::before {
    display: none;
  }
  
  .hero-copy h1,
  .hero-copy .tagline,
  .hero-copy .price,
  .hero-copy .cta-buttons {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  }
}



.section-index{position:sticky;top:100px;padding:2rem 0 0;margin:0}
.section-index ul{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}
.section-index a{color:#fff;font-weight:600;text-decoration:none}
.section-index a:hover{opacity:.7}

/* 共通の上下余白だけ */
.intro-section,
.specs-section,
.feature-block,
.cta-section {
  padding-block: 4rem;   /* 上下だけに効く書き方 (CSS Logical) */
}

.spec-table{width:100%;border-collapse:collapse;font-size:0.95rem}
.spec-table th,.spec-table td{padding:.7rem;border-bottom:1px solid rgba(255,255,255,.15)}

/* ---------- Feature blocks ---------- */
.feature-block {
  display:flex;                        /* PC：横並び */
  align-items:center;                  /* テキスト縦中央 */
  gap:2rem;                            /* 画像と文の間隔 */
  margin-bottom:4rem;
  padding-left: var(--side-gap);
  padding-right: var(--side-gap);   /* 右余白も合わせたい場合 */
}

/* PC 用画像サイズを統一（横幅の最大値） */
.feature-image{
  flex:0 0 clamp(280px,35vw,480px);    /* 画面幅に応じて可変 */
}

.feature-image img{
  width:100%;                          /* 常にフィット */
  height:auto;
  border-radius:1rem;
}

/* 見出し余白調整 */
.feature-content h3{
  margin:0 0 .6rem;
  font-size:clamp(1.4rem,2vw,1.8rem);
}

/* 画像を右にしたい時だけ order を変更 */
.feature-block.image-right .feature-image{order:2;}

/* ---------- スマホ（≤768px）は縦並び ---------- */
@media(max-width:768px){
  .feature-block{
    flex-direction:column;             /* 縦積み */
    text-align:center;
  }
  .feature-image{flex:0 0 100%; max-width:100%;}
  .feature-content{padding:0 1rem;}    /* 横に少し余白 */
  .spec-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .spec-table th,
  .spec-table td {
    white-space: nowrap;
  }
}

.btn-accent{display:inline-block;padding:.8rem 2.2rem;background:#ffd100;
  color:#000;font-weight:700;border-radius:.5rem;text-decoration:none}
.btn-accent:hover{opacity:.85}


/* ---- Vertical dots nav ---------------------------------- */
.vertical-dots{position:fixed;left:32px;top:50%;transform:translateY(-50%);
  z-index:20;width:56px;}
.vertical-dots ul{margin:0;padding:.5rem 0;list-style:none;display:flex;
  flex-direction:column;gap:1rem;align-items:flex-start;}
.vertical-dots li{position:relative;overflow:hidden;width:100%;}
.vertical-dots a{display:block;width:.55rem;height:.55rem;border-radius:50%;
  background:#666;transition:background .2s;}
.vertical-dots a:hover{background:#fff;}
.vertical-dots li span{position:absolute;left:-120%;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-size:.8rem;color:#fff;opacity:0;transition:.25s;}
.vertical-dots li:hover span{left:12px;opacity:1;}
.scroll-label{margin-top:1rem;font-size:.7rem;color:#fff;}

/* ─── E. スクロールドット nav 左寄り調整 ─── */
.vertical-dots{left:32px;}      /* 既に余白あり。必要なら微調整 */

/* “Scroll”表示もテキストに */
.scroll-label{margin-top:1rem;font-size:.7rem;color:#fff;}

/* ─── 4. ボタン & 文字はグラデなし ─── */
.btn-outline{border:2px solid #fff;color:#fff;}
.btn-primary{background:#0085ff;color:#fff;}

/* ─── B. 左余白を “ロゴ基準” に揃える ─── */
/* ルート変数でロゴ基準を管理 */
:root{
  --logo-left:96px;        /* ← ロゴ左端を 1 箇所で管理 */
}

/* Hero 内のコピー領域（黒帯） */
.hero-copy{
  flex:0 0 20%;
  display:flex;flex-direction:column;justify-content:center;gap:1.8rem;
  padding-left:var(--side-gap);  /* ← ここも site‑gap */
}


.model-name{font-size:clamp(3.5rem,7vw,5.2rem);color:var(--gray-copy);margin:0 0 .6rem;}
.tagline,.price{color:var(--gray-copy);}
.btn-gradient{display:inline-block;padding:.95rem 2.8rem;font-weight:700;border-radius:.45rem;
  color:#fff;text-decoration:none;
  background:linear-gradient(135deg,var(--yellow) 0%,#000 100%);
  background-size:200% 100%;transition:.35s;}
.btn-gradient:hover{background-position:100% 0;}

/* ---- 各セクション共通 ------------------------------- */
section[id]:not(#hero)>.container{padding-left:var(--side-gap);} /* 左余白統一 */
.intro-section,.specs-section,.feature-block,.cta-section{padding-block:4rem;}
.feature-block .container{display:flex;flex-wrap:wrap;align-items:center;gap:2rem;}
.feature-block.image-right .feature-image{order:2;}
.feature-image img{width:100%;border-radius:1rem;}

/* 既存の .spec-table をベースに 3 列用調整 */
.spec-table--dual {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/* ヘッダー背景などお好みで */
.spec-table--dual thead th {
  background: #222;
  color: #ffd100;
  font-weight: 700;
}

.spec-table--dual th,
.spec-table--dual td {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

/* 項目列を 40 %、モデル列を 30 %・30 % など自由に */
.spec-table--dual th:first-child { width: 40%;text-align: left; }
.spec-table--dual td,
.spec-table--dual th:not(:first-child) { width: 30%;text-align: center; }

.model-table {
  display: none;
}
.model-table.is-visible {
  display: table;
}
.model-tab.is-active {
  background-color: #ffc107;
  color: #000;
}



/* スマホでは縦並びに落とす */
@media (max-width: 600px) {
  .spec-table--dual thead { display: none; }

  .spec-table--dual tr {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.3);
  }

  .spec-table--dual th,
  .spec-table--dual td {
    border: none;
    padding: .4rem 0;
    text-align: left;
  }

  .spec-table--dual td::before {
    content: attr(data-label) "：";
    font-weight: 600;
    margin-right: .5rem;
    color: #ffd100;
  }
}

/* ==== タブボタン ==== */
.model-tabs{
  display:flex;
  gap:1rem;
  margin-bottom:2rem;
  flex-wrap:wrap;
}
.model-tab{
  background:#222;
  color:#fff;
  border:none;
  padding:.6rem 1.6rem;
  font-weight:700;
  cursor:pointer;
  border-radius:30px;
  transition:.25s;
}
.model-tab:hover{background:#444;}
.model-tab.is-active{
  background:#ffd100;
  color:#000;
}

/* ==== テーブル ==== */
.model-table{display:none;}      /* 非表示が基本 */
.model-table.is-visible{display:table;}


/* ==========================================================
   6. レスポンシブ: ナビ開閉 (≤768px)  ─────────────────── */
@media(max-width:768px){
  /* ① ハンバーガー位置を site‑gap 基準に */
  .menu-toggle{display:flex;right:var(--side-gap);}

  /* ② ドロワー nav の左右 padding も site‑gap */
  .main-navigation{
    padding:1.5rem var(--side-gap);
  }

  /* ③ site-wrapper の左右余白は clamp により自動で縮小 */
}

/* ---------- Color section ---------- */
.color-section {
  position: relative;
  background: #000;
  padding-bottom: 80px;
}

.color-visual-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.color-bg {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* 高さを抑える */
  background-size: cover;
  background-position: center;
}

/* ロゴ：中央上（上から10pt） */
.color-logo {
  position: absolute;
  top: 5%; /* 上から10% → 5% に */
  left: 50%;
  transform: translateX(-50%);
  width: 200px; /* 中サイズ */
  z-index: 2;
}

.color-logo img {
  width: 200px; /* 中サイズ */
  height: auto;
}


/* バイク画像：中央下よりに配置（全面表示） */
.color-bike {
  position: absolute;
  bottom: 5%; /* ← 10% → 5% にして下へ少し移動 */
  left: 50%;
  transform: translateX(-50%);
  width: 60vw;
  max-width: 1000px;
  z-index: 1;
}

.color-bike img {
  width: 100%;
  height: auto;
}

.color-swatches {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.swatch {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 2px solid #fff; /* ← デフォルトで白枠 */
  cursor: pointer;
  transition: border-color 0.3s ease;
}

@media screen and (max-width: 768px) {
  .color-bg {
    aspect-ratio: 3 / 4; /* ← 比率を縦長からやや横長へ変更して間延び解消 */
  }

  .color-logo {
    width: 140px;
    top: 3%;
  }

  .color-bike {
    width: 90vw;
    bottom: 0%; /* ← 背景下端にぴったり配置 */
  }

  .color-swatches {
    flex-direction: row;
    gap: 12px;
    padding: 20px 10px;
  }

  .swatch {
    width: 28px;
    height: 28px;
  }
}



/* アクティブなボタン枠に黄色 */
.swatch.is-active {
  border-color: #FFD700; /* アクティブ時は黄色アクセント */
}

/* 各色の背景 */
.swatch[data-color="olive"] {
  background-color: #708238;
}

.swatch[data-color="black"] {
  background-color: #111;
}

.swatch[data-color="blue"] {
  background-color: #1E90FF;
}

/* 投稿ページ専用レイアウト */
.single-post .site-main {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 1rem;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #fff;
}

.single-post h1,
.single-post h2,
.single-post h3 {
  color: #fff;
  margin-bottom: 1rem;
}

.single-post a {
  color: #FFD700;
  text-decoration: underline;
}

.single-post a:hover {
  opacity: 0.8;
}

.single-post p {
  margin-bottom: 1.5rem;
}

.single-post .post-navigation {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.single-post .comment-respond,
.single-post #comments {
  margin-top: 3rem;
  background: #111;
  padding: 2rem;
  border-radius: 6px;
}

.single-post .comment-form-comment textarea {
  width: 100%;
  min-height: 120px;
  background: #000;
  color: #fff;
  border: 1px solid #444;
  padding: 1rem;
}

.single-post .form-submit input[type="submit"] {
  background: #FFD700;
  color: #000;
  padding: 0.6rem 1.2rem;
  border: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px;
  margin-top: 1rem;
}

.single-post .form-submit input[type="submit"]:hover {
  background: #e6c200;
}