/*!

Theme Name: genesis trike
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: genesis
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.

genesis 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:#0000cd;
  --gray-copy:#cfcfcf;
}

/* 基本設定：スクロールバーのズレ防止 */
html,body{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden;
  background:#696969;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: #0000cd; /* テーマカラーの黄色 */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ヘッダー */
.site-header{
  background:#696969;
  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 Slider Section
   =============================== */
.hero-slider{
position:relative;
width:100%;
height:100vh;   /* まず高さ固定 */
overflow:hidden;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition:opacity 1s ease;
}

.slide.active{
opacity:1;
z-index:2;
}

.slide img{
width:100%;
height:100%;
object-fit:cover;      /* ←超重要 */
object-position:center center;
display:block;
}

.hero-catch{
position:absolute;
top:50%;
left:8%;
transform:translateY(-50%);
z-index:5;
color:#fff;
}

.hero-scroll{
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
z-index:5;
}

/* ===============================
   Scroll Indicator
   =============================== */
.hero-slider .hero-scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  z-index: 5;
  pointer-events: none;
}

.hero-slider .hero-scroll__text {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: 6px;
  opacity: 0.8;
}

.hero-slider .hero-scroll__line {
  display: block;
  width: 1px;
  height: 30px;
  margin: 0 auto;
  background: rgba(255,255,255,0.8);
  animation: scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine {
  0%   { height: 0; opacity: 0; }
  30%  { height: 30px; opacity: 1; }
  100% { height: 0; opacity: 0; }
}

/* ===============================
   Mobile: Full Screen Video
   =============================== */
@media (max-width:768px){

.hero-slider{
height:100vh;
}

.slide img{
width:100%;
height:100vh;
object-fit:cover;
object-position:center center;
}

.hero-catch{
left:5vw;
top:45%;
}

.hero-scroll{
bottom:24px;
}

}


/* フッター */
.footer {
  background: #696969;
  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;
  }

.hero-catch {
    left: 5vw;
    max-width: 90%;
  }

  .hero-catch__jp {
    font-size: 1.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:#696969;
    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;
  }
}

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

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

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

.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: #0000cd; /* テーマカラーの黄色に */
}


/* =========================
   genesis Movie（YouTube専用）
========================= */
.genesis-movie {
  padding: 80px 20px;
  background: #696969;
}

.genesis-movie__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.genesis-movie__title {
  color: #0000cd;
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 40px;
  letter-spacing: 0.08em;
}

.genesis-movie__youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.genesis-movie__youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* ▼ footer */
.site-footer{background:#696969;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: #0000cd;
  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: #696969;
  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 #0000cd;
  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;
}

.dealer-website {
  word-wrap: break-word;   /* 長い文字列を折り返す */
  overflow-wrap: break-word;
}

.dealer-website a {
  display: inline-block; /* 折り返しを可能にする */
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;        /* 親要素の幅を超えないようにする */
}


/* About genesis 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: #0000cd;
  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: #00008b;
}

/* レスポンシブ対応 */
@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: #696969;
  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: #0000cd;
}

.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: #696969;
  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:#00008b;
  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: #0000cd;
  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: #0000cd;
  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: #0000cd;
  }
}

/* ==== タブボタン ==== */
.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:#0000cd;
  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: #0000cd; /* アクティブ時は黄色アクセント */
}

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

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

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

/*--------------------------------------------------------------
# 投稿ページ　ミニマル版（黒背景＋黄色アクセント）
--------------------------------------------------------------*/

/* 本文エリア */
.single .post-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    line-height: 1.8;
    color: #fff;
    background-color: #696969;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* 見出し */
.single .post-content h1,
.single .post-content h2,
.single .post-content h3 {
    position: relative;
    padding-bottom: 0.3em;
    margin-top: 2em;
    margin-bottom: 1em;
    color: #fff;
}

/* 黄色アクセント（残す） */
.single .post-content h2::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background-color: #0000cd;
    margin-top: 6px;
}

/* 画像 */
.single .post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em auto;
    border: none;
}

/* リスト */
.single .post-content ul {
    list-style: none;
    padding-left: 1.2em;
}

.single .post-content ul li {
    position: relative;
    margin-bottom: 0.8em;
    padding-left: 1.2em;
}

.single .post-content ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #0000cd;
    font-size: 1.2em;
}

/* 段落 */
.single .post-content p {
    margin-bottom: 1.2em;
}

/* ボタン */
.post-content .button {
    display: inline-block;
    padding: 12px 28px;
    background-color: #696969;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.post-content .button:hover {
    background-color: #fff;
    transform: translateY(-2px);
}

/* ===============================
   投稿ナビ（枠線なし）
   =============================== */

.single-post-navigation {
    margin: 40px 0;
    clear: both;
}

.single-post-navigation .navigation.post-navigation {
    padding: 16px 0;
    border: none;
}

.single-post-navigation .navigation.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.single-post-navigation .navigation.post-navigation a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    background: #111;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.25s ease;
}

.single-post-navigation .navigation.post-navigation a:hover {
    background: #0000cd;
    color: #000;
}

/* スマホ */
@media (max-width: 768px) {
    .single .post-content {
        padding: 20px 15px;
        font-size: 15px;
    }

    .single-post-navigation .navigation.post-navigation .nav-links {
        flex-direction: column;
        gap: 12px;
    }

    .single-post-navigation .navigation.post-navigation a {
        justify-content: center;
        text-align: center;
    }
}



/* ===== モデルコンタクト専用フォームスタイル ===== */
.page-template-page-modelcontact .wpcf7-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #fff; /* 白文字で見やすく */
}

/* フォーム内段落 */
.page-template-page-modelcontact .wpcf7-form p {
  margin-bottom: 1.5rem;
  padding-left: 0;
  box-sizing: border-box;
}

/* 入力・テキストエリアの基本スタイル */
.page-template-page-modelcontact input[type="text"],
.page-template-page-modelcontact input[type="email"],
.page-template-page-modelcontact input[type="tel"],
.page-template-page-modelcontact select,
.page-template-page-modelcontact textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #fff;
  background-color: transparent;
  padding: 0.6em 0;
  font-size: 16px;
  color: #fff;
  transition: border-color 0.3s;
}

/* フォーカス時 */
.page-template-page-modelcontact input:focus,
.page-template-page-modelcontact textarea:focus,
.page-template-page-modelcontact select:focus {
  outline: none;
  border-bottom: 2px solid #0000cd; /* サーロンのテーマカラー */
}

/* ラベル */
.page-template-page-modelcontact .wpcf7-form label {
  display: inline-block;
  width: 100%;
  text-align: left;
  font-weight: bold;
  margin-bottom: 0.5em;
  color: #fff;
  padding-left: 0;
  box-sizing: border-box;
}

/* ラジオ・チェックボックスのグループ */
.radio-group,
.checkbox-group {
  display: flex;
  gap: 1rem;
  align-items: center;
  color: #fff;
}

.radio-group label,
.checkbox-group label {
  font-weight: normal;
}

/* フレックスで並べる */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.form-half {
  flex: 1 1 48%;
}

/* 送信ボタン */
.page-template-page-modelcontact input[type="submit"] {
  background-color: #0000cd;
  color: #000;
  border: none;
  padding: 1em 2em;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 4px;
  margin-top: 2rem;
  display: block;
  width: 100%;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

.page-template-page-modelcontact input[type="submit"]:hover {
  background-color: #0000cd;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
  }

  .form-half {
    flex: 1 1 100%;
  }
}
/* ===== 説明文（冒頭テキスト）の左端をフォームに揃える ===== */
.page-template-page-modelcontact .intro-text {
  max-width: 720px;         /* フォームと同じ横幅 */
  margin: 0 auto;           /* 中央寄せ */
  padding: 2rem 1rem 0 1rem;
  color: #fff;
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: left;
}



/* ===== News Page スタイル（黄色背景＋黒文字）===== */
.news-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.news-item {
  display: flex;
  flex-wrap: wrap;
  background-color: #0000cd; /* 背景をサーロンの黄色に */
  border-radius: 8px;
  margin-bottom: 2rem;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  color: #000; /* 全体テキスト色 */
}

.news-thumbnail {
  flex: 0 0 30%;
  max-width: 30%;
  margin-right: 1rem;
}

.news-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #000; /* 念のため再指定 */
}

.news-content h2 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
  color: #000;
}

.news-content h3 {
  font-size: 1.2rem; /* h2より少し小さめ */
  margin: 0 0 0.5rem;
  color: #000;
}

.news-content h2 a {
  color: #000;
  text-decoration: none;
  transition: opacity 0.2s;
}

.news-content h2 a:hover {
  opacity: 0.75;
}

.news-content p {
  margin: 0;
  line-height: 1.6;
  color: #000;
}

@media (max-width: 768px) {
  .news-item {
    flex-direction: column;
  }

  .news-thumbnail,
  .news-content {
    max-width: 100%;
    margin: 0;
  }

  .news-thumbnail {
    margin-bottom: 1rem;
  }
}


/* ===== dealer site style ===== */
.dealer-page-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

/* セクションタイトル */
.dealer-page-wrapper h2 {
  border-bottom: 2px solid #0073aa;
  padding-bottom: 4px;
  margin-top: 2rem;
  font-size: 1.5rem;
}

/* サブ見出し */
.dealer-page-wrapper h3 {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

/* UL の点を非表示、余白リセット */
.dealer-page-wrapper ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem;
}

/* 各リンクをボタン風・横幅100%に */
.dealer-page-wrapper .download-link {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 12px 16px;
  background-color: #dcdcdc; /* genesisの黄色 */
  color: #000;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease, transform 0.2s ease;
  box-sizing: border-box;
}

.dealer-page-wrapper .download-link:hover {
  background-color: #dcdcdc;
  transform: translateY(-1px);
}


/* モバイル対応（レスポンシブ補助） */
@media screen and (max-width: 600px) {
  .dealer-page-wrapper .download-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

.badge {
  display: inline-block;
  font-size: 12px;
  background-color: #444;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.badge.pdf { background-color: #d32f2f; }      /* 赤系 */
.badge.xls { background-color: #388e3c; }      /* 緑系 */


/**
 * === 基本的な余白・幅設定 ===
 */
/* 固定ページ専用ラッパー */
.page-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
  line-height: 1.8;
  font-size: 16px;
  word-break: break-word;
}

/* 見出しのスタイル */
.page-wrapper h1,
.page-wrapper h2,
.page-wrapper h3 {
  font-weight: bold;
  margin-top: 2em;
  margin-bottom: 0.5em;
  line-height: 1.3;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

/* 段落 */
.page-wrapper p {
  margin-bottom: 1.5em;
}

/* リスト */
.page-wrapper ul,
.page-wrapper ol {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

/* リンク */
.page-wrapper a {
  color: #000;
  text-decoration: underline;
}
.page-wrapper a:hover {
  text-decoration: none;
  color: #000;
}

/* 画像 */
.page-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}


/**
 * Media Downloadページ
 */
.press-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
  line-height: 1.8;
  font-size: 16px;
  word-break: break-word;
}

/* h1見出し */
.press-wrapper h1 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 1em;
  padding-bottom: 8px;
  border-bottom: 2px solid #ddd;
}

/* h2見出し */
.press-wrapper h2 {
  font-size: 20px;
  font-weight: bold;
  margin: 40px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #aaa;
}

/* メディア項目 */
.press-wrapper .media-item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

/* 画像調整（やや大きめ・左右余白維持） */
.press-wrapper .media-image img {
  width: 320px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

/* ダウンロードボタン列 */
.press-wrapper .media-download {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px; /* ← ボタン間の余白を最小限に */
  margin-top: 4px;
}

/* ダウンロードボタン */
.press-wrapper .download-link {
  display: block;
  width: 100%;
  padding: 10px 16px;
  margin: 0; /* ← これで無駄な余白を防止 */
  background-color: #0000ff;
  color: #000;
  text-decoration: none;
  font-weight: 500;
  border-radius: 4px;
  line-height: 1.3; /* ← 高さ調整のポイント */
  transition: background-color 0.2s ease;
}

.press-wrapper .download-link:hover {
  background-color: #0000ff;
}

/* モバイル対応 */
@media screen and (max-width: 600px) {
  .press-wrapper .media-item {
    flex-direction: column;
    align-items: center;
  }

  .press-wrapper .media-image img {
    width: 100%;
    max-width: 320px;
  }

  .press-wrapper .media-download {
    width: 100%;
  }
}


/**
 * === page-login ===
 */
/* ログインページ全体のラッパー */
.login-page-wrapper {
  max-width: 400px;
  margin: 60px auto;
  padding: 0 20px;
  color: #0000ff; /* テーマカラー */
  font-size: 15px;
  line-height: 1.6;
}

.login-page-wrapper h1 {
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 1px solid #0000ff;
  padding-bottom: 10px;
  font-size: 24px;
}

.login-page-wrapper label {
  color: #0000ff;
  font-weight: 500;
  display: block;
  margin-bottom: 5px;
}

.login-page-wrapper input[type="text"],
.login-page-wrapper input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  margin-bottom: 15px;
}

.login-page-wrapper input[type="submit"] {
  background-color: #0000ff;
  color: #000;
  font-weight: bold;
  padding: 10px 0;
  border: none;
  border-radius: 4px;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-page-wrapper input[type="submit"]:hover {
  background-color: #0000ff;
}

.login-links {
  margin-top: 20px;
  text-align: center;
}

.login-links a {
  display: inline-block;
  color: #0000ff;
  text-decoration: underline;
  margin: 5px 10px;
  font-size: 14px;
}

.login-links a:hover {
  text-decoration: none;
}


/* === Auth Pages: 登録・リセットなど共通フォームデザイン === */
/* フォーム全体を .page-wrapper で囲っている前提 */
.page-wrapper form {
  background: none;
  padding: 0;
  margin-top: 2em;
  color: #fff;
}

/* 入力欄 */
.page-wrapper input[type="text"],
.page-wrapper input[type="email"],
.page-wrapper input[type="password"] {
  width: 100%;
  max-width: 400px;
  padding: 8px 10px;
  margin-top: 4px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
  font-size: 14px;
  border-radius: 4px;
  box-sizing: border-box;
}

/* ラベル */
.page-wrapper label {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
  color: #0000ff; /* 黄色 */
}

/* ボタン */
.page-wrapper input[type="submit"],
.page-wrapper .button {
  background-color: #0000ff;
  color: #000;
  padding: 6px 20px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin-top: 10px;
  transition: background-color 0.2s ease;
}

.page-wrapper input[type="submit"]:hover,
.page-wrapper .button:hover {
  background-color: #0000ff;
}

/* 見出し */
.page-wrapper h1 {
  color: #0000ff;
  border-bottom: 1px solid #0000ff;
}

/* 説明テキストやリンク */
.page-wrapper p,
.page-wrapper a {
  color: #fff;
}

.page-wrapper a:hover {
  color: #0000ffgenesis;
}

/*--------------------------------------------------------------
# Latest News
--------------------------------------------------------------*/

.latest-news-text {
  padding: 1em;
  max-width: 900px;
  margin: auto;
}

.latest-news-list {
  list-style: none;
  padding: 0;
}

.latest-news-item {
  border-bottom: 1px solid #ccc;
  padding: 0.5em 0;
  display: flex;
  gap: 1em;
  font-size: 0.95em;
}

/* Latest NewsのMedia News部分だけ */
.latest-news-text > div {
  text-align: center; /* 中央揃え */
  margin-top: 1rem;
}

.latest-news-text > div h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #0000cd;
}

.latest-news-text > div img {
  width: 150px; /* 固定サイズ */
  height: auto;
  display: inline-block;
}

.news-date {
  color: #666;
  white-space: nowrap;
}

/* ===========================
   404 Page
=========================== */
.error-404 {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 100px 20px;
}

.error-404 .container {
  max-width: 800px;
  margin: 0 auto;
}

.error-title {
  font-size: 6rem;
  font-weight: bold;
  color: #0000cd; /* 黄色アクセント */
  margin-bottom: 10px;
}

.error-subtitle {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.error-message {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  color: #ccc;
}

.btn-home {
  display: inline-block;
  background: #0000cd;
  color: #000;
  padding: 12px 30px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.btn-home:hover {
  background: #fff;
  color: #000;
}