/* E-BIKE セクション用 CSS */

/* --- index.html内のServiceセクション --- */
.service-ebike{
  background:
    radial-gradient(circle at 10% 0%, rgba(176,196,222,.25), transparent 55%),
    linear-gradient(180deg, rgba(240,248,255,.55), rgba(255,255,255,.55));
}
.service-layout{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:var(--space-7); }
@media (max-width:960px){ .service-layout{ grid-template-columns:1fr; } }

.service-media,.service-visual,.service-info{
  margin:0; padding:var(--space-3); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.9); border:1px solid rgba(110,142,194,.14); box-shadow:var(--shadow-soft);
}
.service-media img,.service-visual img{ width:100%; height:auto; border-radius:var(--radius-md); object-fit:cover; }

.service-ebike .section-heading h2{ font-size:clamp(1.8rem,3.2vw,2.4rem); line-height:1.2; }
.ebike-title{ white-space:nowrap; }
@media (max-width:960px){ .ebike-title{ white-space:normal; } }
.service-copy{ display:grid; gap:var(--space-2); }
.service-copy .intro-2{ white-space:nowrap; }
@media (max-width:960px){ .service-copy .intro-2{ white-space:normal; } }

.service-info h4 { margin-top: var(--space-4); margin-bottom: var(--space-2); font-size: 1.1rem; }
.dot-list { list-style: disc; padding-left: 1.5rem; color: var(--color-text-light); }
.note { font-size: 0.85rem; color: var(--color-text-light); margin-top: var(--space-2); }


/* --- 予約専用ページ (ebike-reserve.html) --- */

/* ヒーローエリア */
.reserve-hero {
  padding: var(--space-9) 0 var(--space-7);
  background: radial-gradient(circle at 50% 0%, rgba(176,196,222,.25), transparent 60%);
}
.reserve-hero-inner { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.reserve-hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: .06em; }
.reserve-hero .section-lede { max-width: 600px; margin-inline: auto; }
.u-mobile-hide { display: inline; }
@media (max-width: 600px) { .u-mobile-hide { display: none; } }

/* バイク一覧グリッド */
.reserve-bikes { padding: var(--space-6) 0 var(--space-9); }
.bike-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: stretch; /* カードの高さを揃える */
}
@media (max-width: 800px) {
  .bike-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* バイクカードデザイン */
.bike-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid rgba(110,142,194,.16);
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}
.bike-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.bike-media {
  margin: 0;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(110,142,194,.12), rgba(240,248,255,.7));
}
.bike-media img { width: 100%; height: 100%; display: block; object-fit: cover; }

.bike-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 下部を伸ばしてボタンを底に押しやる */
  gap: var(--space-3);
}

.bike-header {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}
.bike-title { margin: 0; font-size: 1.4rem; font-weight: 600; }
.bike-price {
  margin: 4px 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  font-family: "Cinzel", "Shippori Mincho", serif; /* 価格は見やすく */
}
.bike-price span { font-size: 0.9rem; font-weight: normal; opacity: 0.7; font-family: "Shippori Mincho", serif; }

.bike-spec { margin: 0; font-weight: 600; color: var(--color-accent); }

.bike-features {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: var(--space-4);
}
.bike-features li {
  position: relative;
  padding-left: 20px;
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.5;
}
.bike-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* ボタンエリア（カード最下部へ） */
.bike-action { margin-top: auto; }
.full-width { width: 100%; text-align: center; }

.small-note {
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--color-text-light);
}
/* === E-BIKEトップ画像のサイズ調整 === */
#ebike .service-media {
  max-width: 1120px;    /* ここで最大幅を指定（600px〜800pxあたりがおすすめです） */
  margin-inline: auto; /* 画面中央に配置 */
  width: 100%;
}
#ebike .service-media img {
  height: 640px !important; /* 高さを640pxに固定 */
  object-fit: cover;        /* 画像が歪まないようにトリミング */
  width: 100%;
}

/* スマホでは大きすぎるので、少し高さを抑える設定（お好みで調整してください） */
@media (max-width: 600px) {
  #ebike .service-media img {
    height: 400px !important; /* スマホでの高さ */
  }
}