@charset "utf-8";
/* 2025 新春スーパー初売り（山形トヨペット）
   トンマナ = 和・正月（紅白・金・和紙・桜）。祭り型。
   背景リズム: 銀の和紙(明) → 金の和柄(濃) → 和紙(明) → 和紙(明) → 銀の和紙(明)
   ※隣接セクションの端は馴染ませ、ゾーンの基調だけ切り替える */

:root{
  --red:#c8161d;      /* 紅 */
  --red-d:#8f0f16;
  --gold:#c9a227;     /* 金 */
  --gold-l:#e8c86a;
  --green:#0f6b4f;    /* 深緑（トヨペットのコーポレート） */
  --line:#06c755;
  --ink:#221815;      /* 墨 */
  --paper:#f7f3ea;
  --inn:1080px;
}

body{
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

/* 和紙の地
   素材は高コントラストのノイズ（平均100・標準偏差116）で、そのまま敷くと真っ黒になる。
   クリーム地を重ねて質感だけ残す。
   ※background ショートハンドに CSS変数を入れる書き方は挙動が読みにくいので、
     background-image / -repeat / -size を明示する */
.washi{
  background-color:#f7f3ea;
  background-image:linear-gradient(rgba(247,243,234,.92),rgba(247,243,234,.92)),
                   url("images/tile_washi.png");
  background-repeat:repeat,repeat;
  background-size:auto,300px auto;
}
.washi.light{
  background-color:#fffdf7;
  background-image:linear-gradient(rgba(255,253,247,.94),rgba(255,253,247,.94)),
                   url("images/tile_washi.png");
}

.sec{position:relative;padding:40px 16px;overflow:visible}
.sec .inn{max-width:var(--inn);margin:0 auto;position:relative;z-index:2}
.hero .inn{max-width:none}
.w-full{width:100%}
.center{text-align:center}

/* ---------- 見出し ---------- */
.h-jp{
  text-align:center;margin:0 0 24px;font-weight:900;line-height:1.25;
  font-size:clamp(26px,4.6vw,44px);color:var(--ink);
  text-shadow:0 2px 0 #fff,0 3px 6px rgba(0,0,0,.12);
}
.h-jp small{display:block;font-size:.45em;letter-spacing:.16em;color:var(--red);margin-bottom:6px}
.h-jp em{
  font-style:normal;color:var(--red);font-size:1.25em;margin:0 .06em;
  text-shadow:0 2px 0 #fff;
}
.h-jp.small{font-size:clamp(22px,3.6vw,34px)}
.h-sub{
  text-align:center;font-size:clamp(16px,2.4vw,22px);font-weight:900;
  margin:0 0 16px;color:var(--green);letter-spacing:.04em;
}

/* 小さい注記（法定注記・条件文は必ず全文載せる） */
.fine{
  font-size:11px;line-height:1.75;color:#5a534d;margin:10px 0 0;
  letter-spacing:.01em;
}
.fine.center{text-align:center}

/* ---------- CTA ---------- */
.cta-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:18px 0 0}
.cta-row.col{flex-direction:column;align-items:center;gap:12px}
.pill-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-width:min(340px,86vw);padding:15px 26px;border-radius:999px;
  font-weight:900;font-size:clamp(14px,2vw,17px);text-decoration:none;color:#fff;
  background:var(--red);box-shadow:0 4px 0 var(--red-d),0 8px 18px rgba(0,0,0,.18);
  transition:transform .15s ease,box-shadow .15s ease;
}
.pill-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--red-d),0 5px 12px rgba(0,0,0,.18)}
.pill-btn.line{background:var(--line);box-shadow:0 4px 0 #03913f,0 8px 18px rgba(0,0,0,.18)}
.pill-btn.line:hover{box-shadow:0 2px 0 #03913f,0 5px 12px rgba(0,0,0,.18)}
.pill-btn.green{background:var(--green);box-shadow:0 4px 0 #084a36,0 8px 18px rgba(0,0,0,.18)}
.pill-btn.green:hover{box-shadow:0 2px 0 #084a36,0 5px 12px rgba(0,0,0,.18)}
.pill-btn.dark{background:#3b3531;box-shadow:0 4px 0 #221d1a,0 8px 18px rgba(0,0,0,.18)}
.pill-btn.gold{background:linear-gradient(180deg,#e0be5e,#bf9a22);color:#3a2c05;box-shadow:0 4px 0 #8c6f13,0 8px 18px rgba(0,0,0,.18)}

/* ---------- ヒーロー ---------- */
/* ヒーローは画面いっぱいに敷く。カード状に浮かせると「貼った感」が出る。
   素材の四隅は透明なので、**素材と同じ地色**を敷いて境目を消す
   （実測: 上部クリーム RGB(238,233,230) → 下部の金 RGB(204,175,29)） */
.hero{
  padding:0;
}
.hero::before{ /* 素材の透明な四隅を埋める地色。素材から実測した色で作る */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#f0eae2 0%,#f0eae2 52%,#e3d8bd 68%,#cbaf1d 100%);
}
.hero .inn{z-index:1}
.hero-img{width:100%;max-width:none;margin:0;display:block}
.hero-note{
  text-align:center;font-size:clamp(11px,1.6vw,13px);color:#6b625a;
  margin:0;position:relative;z-index:3;padding:10px 16px 42px;
  background:#f7f3ea;
}

/* 流れる開催情報帯（セール感の定番） */
.marquee{
  position:relative;z-index:3;margin:14px 0 0;overflow:hidden;
  background:linear-gradient(180deg,var(--red),var(--red-d));
  border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);
}
.mq-in{display:flex;width:max-content;animation:mq 26s linear infinite}
.mq-in span{
  color:#fff;font-weight:900;font-size:clamp(13px,1.9vw,17px);
  padding:11px 24px 11px 0;white-space:nowrap;letter-spacing:.04em;
}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- 運試し3企画（濃ゾーン） ---------- */
.luck{
  background:url("images/tile_gold.png") repeat;background-size:300px auto;
  padding-top:64px;padding-bottom:48px;
}
.luck::before{ /* 上端をヒーローの和紙に馴染ませる */
  content:"";position:absolute;left:0;right:0;top:0;height:70px;
  background:linear-gradient(180deg,rgba(247,243,234,.75),rgba(247,243,234,0));z-index:1;
}
.chapter{ /* 章バッジ：境界に半分乗せる */
  position:absolute;left:50%;top:-24px;transform:translateX(-50%);z-index:5;
  background:linear-gradient(180deg,#2b2622,#0e0b09);color:var(--gold-l);
  font-weight:900;font-size:clamp(15px,2.2vw,20px);letter-spacing:.28em;
  padding:11px 34px 11px 40px;border-radius:6px;border:2px solid var(--gold);
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.blk-card{
  background:#fffdf7;border-radius:18px;
  padding:26px 20px 22px;margin:0 0 28px;
  box-shadow:0 8px 26px rgba(90,60,0,.22);position:relative;
  border:1px solid rgba(201,162,39,.55);
  outline:1px solid rgba(255,255,255,.9);outline-offset:-5px;  /* 二重罫＝祝儀袋の見立て */
}
/* 和のコーナー飾り（角の金罫）。素材が無くてもCSSで世界観を足せる */
.blk-card::before,.blk-card::after{
  content:"";position:absolute;width:26px;height:26px;pointer-events:none;
  border:2px solid var(--gold);
}
.blk-card::before{left:9px;top:9px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.blk-card::after{right:9px;bottom:9px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.blk-card:last-child{margin-bottom:0}
.kikaku{
  position:absolute;left:18px;top:-16px;margin:0;
  background:var(--ink);color:#fff;font-weight:900;font-size:14px;
  padding:7px 16px;border-radius:999px;letter-spacing:.1em;
}
.kikaku span{color:var(--gold-l);font-size:1.25em;margin-left:.2em}

/* 企画②：4体験を同型カードで並べる（同型の繰り返しなのでグリッド可） */
/* 形の近いものを同じ行に置き、行内で高さを揃える。
   縦横比の違うものを混ぜて並べると、片方だけ小さく見える */
.exp-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch;
}
.exp-grid img{width:100%;border-radius:12px;align-self:center}

/* ---------- 霞（かすみ）の装飾 ----------
   DMのヒーローに使われている和のモチーフ。素材が無いのでCSSで再現し、
   セクションの左右の余白に散らして全編の賑わいを出す（装飾は余白に大量配置が正解） */
.kasumi{position:absolute;z-index:0;pointer-events:none;opacity:.5}
.kasumi i{
  display:block;height:9px;border-radius:999px;margin:0 0 8px;
  background:linear-gradient(90deg,var(--gold),#e6cf86);
}
.kasumi i:nth-child(1){width:120px}
.kasumi i:nth-child(2){width:78px;margin-left:34px}
.kasumi i:nth-child(3){width:150px}
.kasumi i:nth-child(4){width:64px;margin-left:56px}
.kasumi.k1{left:-30px;top:120px}
.kasumi.k2{right:-30px;top:420px;transform:scaleX(-1)}
.kasumi.k3{left:-24px;bottom:180px}
.kasumi.k4{right:-24px;bottom:60px;transform:scaleX(-1)}
@media (max-width:900px){.kasumi{display:none}}

/* ---------- QRのボタン化 ----------
   紙のQRはWebでは不要。位置は実測して%指定する（目測は必ずズレる）。
   ※白で覆うだけだと「ボタンに見えない」（背景も明るいと余計に埋もれる）。
     実LPも独立した色付きの大ボタンだった → **色で塗ってボタンだと分かる形にする** */
.qr-wrap{position:relative;line-height:0}
.qr-wrap>img{width:100%}
.qr-wrap.w-used{width:min(660px,100%);margin:0 auto}
/* ⚠ 絶対配置の%は「囲みのパディングボックス」が基準になる。
   囲みにpaddingを付けると、その分だけボタンがずれてQRが見える（クラウンで発生）。
   → 地色と余白は外側の要素に持たせ、qr-wrapは画像とぴったり同じ大きさに保つ */
.crown-band{
  width:min(900px,100%);margin:30px auto 0;padding:14px 10px;
  background:linear-gradient(100deg,#0d0d0d 0%,#241416 55%,#0d0d0d 100%);
  border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.qr-wrap.w-crown{width:100%;margin:0}
.qr-btn{
  /* 下のQRの白枠と一体化させるため、**必ず白**。
     影・枠・hoverの移動は禁止（下のQRが見えてしまう）。
     ボタンだと分かる役目は文字と「▶」に持たせる */
  position:absolute;display:flex;align-items:center;justify-content:center;
  background:#fff;border:0;box-shadow:none;border-radius:6px;
  text-decoration:none;overflow:hidden;padding:2px;
  font-weight:900;line-height:1.3;text-align:center;letter-spacing:.02em;
  font-size:clamp(9px,1.05vw,14px);color:var(--red);
}
.qr-btn span{display:block}
.qr-btn.line {color:#04a94a}
.qr-btn.green{color:var(--green)}
.qr-btn.pink {color:#d2117a}
.qr-btn.dark {color:#222;font-size:clamp(8px,.95vw,12px)}
.qr-btn.red  {color:var(--red)}
.qr-btn:hover{color:#000}   /* 動かさない。色だけ変える */

/* ---------- おクルマご購入特典 ---------- */
.tokuten{padding-top:46px}
.tokuten::before{
  content:"";position:absolute;left:0;right:0;top:0;height:80px;
  background:linear-gradient(180deg,rgba(201,162,39,.32),rgba(201,162,39,0));z-index:1;
}
/* セクション上端の金帯（DM中面のヘッダーの見立て）。
   桜のコーナー素材は低不透明度前提のテクスチャ込みで、切り出すとノイズが残るため使わない */
.gold-band::after{
  content:"";position:absolute;left:0;right:0;top:0;height:14px;z-index:2;
  background:linear-gradient(180deg,#e6cf86,#c9a227 55%,#a8841c);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.lead-band{
  width:fit-content;margin:0 auto 12px;color:#fff;font-weight:900;
  background:linear-gradient(180deg,var(--red),var(--red-d));
  padding:8px 30px;border-radius:999px;letter-spacing:.3em;
  font-size:clamp(13px,2vw,17px);
}
.ttl{width:min(420px,72%);margin:0 auto 14px}
.badge-row{display:flex;justify-content:center;gap:14px;margin:0 0 26px;flex-wrap:wrap}
.badge-row img{width:min(210px,42%)}
.tk-stack{display:flex;flex-direction:column;gap:26px}
.tk{
  margin:0;background:#fff;border-radius:16px;padding:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  border:1px solid rgba(201,162,39,.45);
}
.tk img{width:100%;border-radius:10px}
.tk-2col{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}

/* ---------- おてがるまるごとプラン ---------- */
.plan{padding-top:44px}
.plan::before{ /* 前セクションと同じ地なので、境界は金の細い線だけで区切る */
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);z-index:3;
}
.ttl-ninki{width:min(430px,80%);margin:0 auto 14px}
.ttl-marugoto{width:min(480px,86%);margin:0 auto 16px}
.komikomi{width:min(760px,100%);margin:0 auto 14px}
.badge-plan{width:min(420px,78%);margin:0 auto 8px}

/* 商品ラインナップは1台=1大バナーで縦積み（2カラムに詰めない） */
.plan-stack{display:flex;flex-direction:column;align-items:center;gap:26px;margin:28px 0 0}
/* 素材PNGに影・角丸を掛けない（透明部分を含む外接矩形が四角い枠として出る） */
.plan-stack img{width:100%}
/* 同レベルのブロックは「表示幅」でなく「内部スケール」を揃える。
   4枚は金帯（共通の設計要素）が511〜512pxで同一だが、素材の余白量が違うため
   同じ表示幅で並べるとアクアだけ11%小さく見える。帯の実寸が揃う幅を個別に指定する */
.plan-stack>.qr-wrap{width:min(760px,100%);margin:0 auto}
.plan-stack>.pw-roomy{width:min(760px,100%)}
.plan-stack>.pw-raize{width:min(782px,100%)}
.plan-stack>.pw-aqua {width:min(842px,100%)}
.plan-stack>.pw-prius{width:min(764px,100%)}
/* 素材ごとに余白の付き方が違うため、画像を中央寄せしても「中身」は中央に来ない。
   4枚共通の金帯の中心が揃うよう、実測したズレの分だけ横に補正する
   （実測: 帯の中心が画像中心から roomy -2.0 / raize -9.5 / **aqua +22.0** / prius -0.5 px） */
.plan-stack>.qr-wrap{position:relative}
.plan-stack>.pw-roomy{left:3px}
.plan-stack>.pw-raize{left:14px}
.plan-stack>.pw-aqua {left:-32px}
.plan-stack>.pw-prius{left:1px}
.crown{width:100%}
.legal{
  margin:26px auto 0;max-width:960px;background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:14px 16px;
}
.legal p{font-size:10.5px;line-height:1.8;color:#5a534d;margin:0 0 8px}
.legal p:last-child{margin-bottom:0}

/* ---------- 優良中古車 ---------- */
.used{
  background:linear-gradient(180deg,#f7f3ea,#eef4ea);
  padding-top:44px;overflow:hidden;
}
.used .inn{text-align:center}
.deco-circle{
  position:absolute;right:-60px;top:-40px;width:min(300px,44vw);
  opacity:.35;z-index:0;pointer-events:none;
}
.used-img{width:100%}

/* ---------- お知らせ ---------- */
.info{padding-top:44px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.info-grid figure{
  margin:0;background:#fff;border-radius:16px;padding:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);border:1px solid rgba(201,162,39,.45);
}
.info-grid img{width:100%;border-radius:10px}

/* ---------- 締め（ヒーローと同じ地に戻して世界観を閉じる） ---------- */
.closing{
  padding:48px 16px 60px;text-align:center;
}
.closing::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.cl-lead{font-size:clamp(17px,2.8vw,26px);font-weight:900;color:var(--red);margin:0 0 18px;line-height:1.5}
.cl-date{margin:0 0 6px;font-weight:900;line-height:1.3;color:var(--ink)}
.cl-date em{font-style:normal;color:var(--gold);font-size:1.1em;letter-spacing:.06em}
.cl-date strong{display:block;font-size:clamp(30px,6vw,58px);letter-spacing:.02em}
.cl-date strong small{font-size:.5em;font-weight:900}
.cl-note{font-size:12px;color:#6b625a;margin:0 0 22px}
.cl-addr{font-size:12px;line-height:1.9;color:#6b625a;margin:22px 0 0}

/* ---------- スマホ：縦に組み直す ---------- */
@media (max-width:768px){
  .sec{padding:32px 12px}
  .hero{padding-top:18px}
  .exp-grid{grid-template-columns:1fr;gap:14px}
  .tk-2col{grid-template-columns:1fr;gap:20px}
  .info-grid{grid-template-columns:1fr;gap:20px}
  .corner-unused{width:38vw}
  .plan-stack{gap:20px}
  .chapter{font-size:14px;padding:9px 22px 9px 26px;letter-spacing:.2em}
  .blk-card{padding:22px 12px 18px}
  .tk{padding:12px}
}

@media (prefers-reduced-motion:reduce){
  .mq-in{animation:none}
  .pill-btn{transition:none}
}