:root{ --bg:#0b0b0c; --fg:#121316; --muted:#6b7280; --brand:#0d49c0; --brand-ink:#0a3a9a; --acc:#d61f2a; --card:#ffffff; --line:#e5e7eb; }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--fg);line-height:1.65;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-ink)}
.container{width:min(1100px,92%);margin-inline:auto}

/* 背景透かし */
html{position:relative}
html::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("../images/amsoil_watermark.png") no-repeat center center;
  background-size:90% auto;opacity:.18;
}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.brand img{max-height:96px}
.nav a{color:var(--fg);margin-left:18px;font-weight:700}
.nav a:hover{opacity:.85}

/* Panels / Typography（既定は白パネル） */
.hero,.section,.site-footer{background:transparent;border:0}
.hero>.container,.section>.container{
  background:rgba(255,255,255,.96);backdrop-filter:blur(4px);
  border:1px solid var(--line);border-radius:16px;padding:28px;
}
.hero{padding:64px 0}
h1{font-size:clamp(1.6rem,3.3vw,2.2rem);margin:.2rem 0 .6rem}
h2{font-size:1.3rem;margin:0 0 10px;color:var(--brand)}
.muted{color:var(--muted)}
html{scroll-behavior:smooth}
section{scroll-margin-top:110px}

/* “透明にしたいセクションだけ” に付ける修飾子 */
.section--clear > .container{
  background:transparent; border:0; backdrop-filter:none; box-shadow:none;
  padding:0; /* 外枠余白を消したい場合のみ。不要なら削除OK */
}

/* Buttons */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:800;background:var(--brand);color:#fff;border:1px solid transparent}
.btn:hover{background:var(--brand-ink)}
.btn.outline{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.sm{padding:9px 14px;font-size:.95rem}

/* Grid & Card */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}

/* Dealer card（読みやすさは維持） */
.dealer-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.dealer-card strong{display:block;font-size:1.05rem;font-weight:800;color:#0e1726;margin-bottom:8px}
.dealer-meta{display:grid;gap:6px;color:#374151;font-size:.96rem}

/* Dealer actions：テキストリンク（ボタン化しない） */
.dealer-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.dealer-actions a{
  padding:0;border:0;background:transparent;
  color:var(--brand);font-weight:700;text-decoration:underline;
}
.dealer-actions a:hover{color:var(--brand-ink);text-decoration:underline}

/* Footer */
.site-footer{padding:24px 0 120px}
.footer-inner{width:min(1100px,92%);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sns a{color:#6b7280;display:inline-flex;align-items:center;gap:8px;margin-left:12px}
.sns svg{width:24px;height:24px}

/* 「新規取扱店募集」セクションの上に空間 */
.section.recruit{ margin-top:80px; }

/* （現状ファイルにある強調スタイルも維持：下部グラデーション帯） */
.dealer-card{
  background:#ffffff;
  border: 2px solid var(--brand);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(13,73,192,0.15);
  position: relative;
}
.dealer-card::after{
  content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;
  background: linear-gradient(to right, var(--brand), var(--acc));
  border-bottom-left-radius:14px;border-bottom-right-radius:14px;
}
/* 各セクションのブロック間に空間を確保 */
.section {
  margin-top: 80px;   /* セクション上部の余白 */
  margin-bottom: 80px; /* 下部の余白 */
}

/* 最初のヒーロー部分（上部余白を無効化） */
.hero {
  margin-top: 0;
}

/* フッターに近い最後のセクション（下を少し抑える） */
#contact.section {
  margin-bottom: 40px;
}

/* ===== Dealers Section Overrides (Requested Spec) ===== */
#dealers.section > .container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 8px 0; /* tighten since no panel */
}
#dealers .section-title {
  text-align: center;
  margin: 0 0 12px 0;
}
#dealers .area-title {
  text-align: center;
  font-size: 1.2rem;
  margin: 28px 0 12px;
  color: var(--navy);
  font-weight: 800;
}
#dealers .grid.cards {
  margin-top: 8px;
}
#dealers .card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(17,24,39,.06);
}
#dealers .card-body {
  color: #111;
}
#dealers .link-list li { margin: 6px 0; }
/* ===== お問い合わせフォーム調整 ===== */
.contact-form {
  margin-top: 24px;
  display: grid;
  gap: 20px;
}

.contact-form .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.contact-form label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  color: var(--text, #222);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  color: #111;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--brand, #1d4ed8);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
  outline: none;
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 10px;
}

.contact-form .btn {
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: none;
}

.contact-form .btn.outline {
  border: 1px solid var(--brand, #1d4ed8);
  background: transparent;
}

.contact-form .btn:hover {
  opacity: 0.9;
}Ｓ

/* === AMS: products rail fix (scoped) === */
#products .prod-rail{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr)) !important;
  gap:20px !important;
  align-items:stretch;
}

/* JSが生成する .prod-card 用の見た目（.card 相当） */
#products .prod-card{
  display:block;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  height:100%;
}
#products .prod-card img{
  width:100%;
  height:auto;
  display:block;
}
#products .prod-card .meta{
  padding:12px;
}
#products .prod-card .cat{
  font-size:.85rem;
  color:#6b7280;
  margin-bottom:4px;
}
#products .prod-card .name{
  font-weight:700;
  color:#111827;
}