/* =========================================
   基本設定 & 変数
   ========================================= */
:root {
  --bg: #0b0d12;
  --text: #eef2ff;
  --muted: #9aa4b2;
  --line: rgba(255, 255, 255, .10);
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --r2: 22px;
  
  /* メインカラー */
  --primaryBg: rgba(139, 213, 255, .14);
  --primaryBd: rgba(139, 213, 255, .38);
  --primaryTx: #e8f8ff;
  
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  line-height: 1.8; /* 行間を広げて読みやすく */
  background:
    radial-gradient(1100px 700px at 10% -10%, rgba(139, 213, 255, .16), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(183, 255, 203, .12), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* =========================================
   レイアウト（左右マージンの確保）
   ========================================= */
.container {
  max-width: 900px; /* 1行が長くなりすぎない幅 */
  margin: 0 auto;   /* 中央寄せ */
  padding: 0 24px;  /* スマホ・PC共通の左右余白 */
}

@media (max-width: 600px) {
  .container {
    padding: 0 20px; /* スマホ時は少しだけ余白を詰める */
  }
}

/* =========================================
   ヘッダー
   ========================================= */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}

.logo {
  display: flex;
  flex-direction: column;
}

.logo a {
  font-size: 20px;
  font-weight: 950;
  text-decoration: none;
  color: var(--text);
  letter-spacing: 0.5px;
}

.sub-logo {
  font-size: 11px;
  color: var(--muted);
}

.header-nav {
  display: flex;
  gap: 16px;
}

.header-nav a {
  font-size: 13px;
  text-decoration: none;
  color: var(--text);
  font-weight: bold;
  opacity: 0.8;
}

.header-nav a:hover {
  opacity: 1;
}

/* =========================================
   カード・共通パーツ
   ========================================= */
section {
  padding: 24px 0; /* セクション間の余白 */
}

.card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pad {
  padding: 32px; /* カード内の余白をたっぷりとる */
}

@media (max-width: 600px) {
  .pad { padding: 24px; }
}

h1 { margin: 0 0 16px; font-size: 28px; line-height: 1.3; }
h2 { margin: 0 0 16px; font-size: 22px; line-height: 1.4; border-left: 4px solid var(--primaryBd); padding-left: 12px; }
h3 { margin: 0 0 12px; font-size: 18px; }
p { margin: 0 0 16px; color: var(--muted); }

.highlight {
  color: var(--primaryTx);
  background: linear-gradient(transparent 70%, rgba(139, 213, 255, .2) 0);
  font-weight: bold;
}

.sp { height: 20px; }

/* =========================================
   ヒーローエリア
   ========================================= */
.heroStack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.heroImg img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  object-fit: cover;
}

/* =========================================
   ボックス・リスト
   ========================================= */
.box {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
}

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

.check li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--text);
}

.check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #8bd5ff;
  font-weight: 950;
}

/* =========================================
   選び方グリッド
   ========================================= */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 720px) {
  .grid2 { grid-template-columns: 1fr; }
}

.choiceCard {
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 16px;
}

.choiceHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.choiceIcon { font-size: 24px; }

/* =========================================
   ボタン
   ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 14px;
  font-weight: 950;
  transition: transform 0.2s;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-2px);
}

.bigBtn { margin-top: 20px; }

/* =========================================
   フッター
   ========================================= */
footer {
  margin-top: 40px;
  padding-bottom: 60px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  padding-bottom: 30px;
}

.footer-brand .logo { margin-bottom: 12px; }
.footer-links h4 { margin-top: 0; font-size: 15px; }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; font-size: 13px; }
.footer-links a { color: var(--muted); text-decoration: none; }

.copyright {
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  header { flex-direction: column; gap: 15px; text-align: center; }
}

/* =========================================
   FAQ
   ========================================= */
details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  background: rgba(255,255,255,.02);
}

summary { cursor: pointer; font-weight: bold; }
.faqText { margin-top: 12px; font-size: 14px; color: var(--muted); }



/* =========================================
   Whyセクション内の画像エリア調整
   ========================================= */

/* 画像全体のコンテナ */
.why-visual {
  display: flex;
  gap: 20px;
  margin-top: 32px;
  align-items: flex-end; /* 画像の下端を揃えて安定感を出す */
}

/* 各画像ブロック（車・ステッカー共通） */
.visual-car, .visual-sticker {
  flex: 1;
  text-align: center;
}

.visual-car p, .visual-sticker p {
  font-size: 12px;
  font-weight: bold;
  color: var(--muted);
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

/* 車の画像：背景に馴染ませる */
.visual-car img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* ステッカー画像：デザインをハッキリ見せる */
.visual-sticker img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #fff; /* ステッカーの黄色を引き立たせるための白背景 */
  padding: 15px;    /* 白背景との間に余白を作って高級感を出す */
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* モバイル対応：画面が狭いときは縦に並べる */
@media (max-width: 600px) {
  .why-visual {
    flex-direction: column;
    align-items: center;
  }
  
  .visual-car, .visual-sticker {
    width: 100%;
    max-width: 320px; /* 広がりすぎないように制限 */
  }
}



/* style.css に追加 */

/* 商品リストのグリッド調整 */
.productList {
  display: grid;
  gap: 24px;
  margin-top: 20px;
}

/* 個別カードの装飾 */
.pCard {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  transition: transform 0.2s, border-color 0.2s;
}

.pCard:hover {
  transform: translateY(-4px);
  border-color: var(--primaryBd);
}

/* 購入ボタン（プライマリ） */
.primary-btn {
  background: #ff9900; /* Amazonカラーで直感的に誘導 */
  color: #000 !important;
  width: 100%;
  padding: 14px;
  font-size: 15px;
  box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3);
}

.primary-btn:hover {
  background: #ffac31;
  transform: scale(1.02);
}

/* ストア全体への誘導ボタン（セカンダリ） */
.secondary-btn {
  background: transparent;
  border: 2px solid var(--primaryBd);
  color: var(--primaryTx);
  padding: 16px 40px;
  margin-top: 10px;
}

.secondary-btn:hover {
  background: var(--primaryBg);
}



/* 商品カード全体のレイアウト */
.pCard {
  display: flex; /* 横並びにする */
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.2s;
}

/* 画像コンテナのサイズを固定 */
.pImg {
  flex: 0 0 160px; /* 画像の幅を160pxに固定し、伸縮させない */
  max-width: 160px;
}

.pImg img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* テキスト部分の調整 */
.pBody {
  flex: 1; /* 残りの幅をすべて使う */
  text-align: left;
}

.pTitle {
  margin: 8px 0;
  font-size: 18px;
  color: var(--text);
}

/* バッジの装飾 */
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
  margin-right: 4px;
  background: var(--primaryBg);
  color: var(--primaryTx);
  border: 1px solid var(--primaryBd);
}

/* モバイル対応（画面が狭いときは縦並びに戻す） */
@media (max-width: 600px) {
  .pCard {
    flex-direction: column; /* 縦並び */
    text-align: center;
  }
  .pImg {
    flex: 0 0 auto;
    width: 120px; /* スマホでは少し小さくする */
    margin-bottom: 16px;
  }
  .pBody {
    text-align: center;
  }
}