/*
Theme Name: ASB車両販売 LP
Theme URI: 
Author: ASB車両販売
Description: 中古車販売LP用ワンページテーマ
Version: 1.0
Text Domain: asb-theme
*/

:root{
  --yellow: #F5B300;
  --yellow-deep: #D98E00;
  --yellow-pale: #FFE9AE;
  --brown: #4A2E27;
  --brown-deep: #33201B;
  --green: #6E8E5C;
  --green-deep: #56704A;
  --ink: #2B2420;
  --cream: #FFF7E6;
  --white: #FFFFFF;
  --red: #C0432E;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.8;
  font-weight:500;
  padding-bottom:78px; /* space for sticky banner */
}
img{max-width:100%; display:block;}
a{color:inherit;}
.hand{font-family:"Klee One", "Zen Kaku Gothic New", sans-serif; font-weight:600;}
.pop{font-family:"Mochiy Pop One", "Zen Kaku Gothic New", sans-serif; font-weight:400;}
.wrap{max-width:640px; margin:0 auto; position:relative;}
.pad{padding:0 20px;}

/* ===== top strip ===== */
.top-strip{
  background:var(--brown-deep);
  color:var(--yellow-pale);
  font-size:12px;
  letter-spacing:.04em;
  text-align:center;
  padding:7px 10px;
}
.top-strip b{color:var(--yellow);}

/* ===== Header ===== */
.site-header{
  background:var(--white);
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:3px solid var(--ink);
}
.logo{
  font-family:"Mochiy Pop One", sans-serif;
  font-weight:400;
  font-size:19px;
  letter-spacing:.01em;
}
.logo span{color:var(--yellow-deep);}
.logo small{display:block; font-size:9px; font-weight:500; letter-spacing:.1em; color:#7a6a5c;}
.header-tel{
  font-size:11px;
  text-align:right;
  color:var(--brown);
}
.header-tel .num{font-size:16px; font-weight:900; color:var(--red);}

/* ===== Hero ===== */
.hero{
  position:relative;
  line-height:0;
}
.hero-image{
  display:block;
  width:100%;
  height:auto;
}
.hero-buttons{
  position:absolute;
  left:0;
  right:0;
  /* ↓ 画像内のオレンジ部分に合わせて調整してください（下からの%が目安） */
  bottom:3%;
  display:flex;
  gap:3%;
  padding:0 5%;
  line-height:normal;
  z-index:2;
}
.hero-btn{
  flex:1 1 0;
  display:block;
  border-radius:10px;
  transition:transform .18s ease, filter .18s ease;
}
.hero-btn img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.22));
  transition:filter .18s ease;
}
.hero-btn:hover,
.hero-btn:focus-visible{
  transform:translateY(-3px);
}
.hero-btn:hover img,
.hero-btn:focus-visible img{
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.32));
}
.hero-btn:active{
  transform:translateY(-1px);
}
.hero-btn:active img{
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));
}
.hero-cta{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:15px 10px;
  font-family:"Mochiy Pop One", sans-serif;
  font-weight:400;
  font-size:14px;
  border:3px solid var(--brown-deep);
  text-decoration:none;
  text-align:center;
}
.btn-primary{
  background:var(--red);
  color:#fff;
  box-shadow:4px 4px 0 var(--brown-deep);
}
.btn-secondary{
  background:var(--white);
  color:var(--brown-deep);
  box-shadow:4px 4px 0 var(--brown-deep);
}
.btn-primary small, .btn-secondary small{display:block; font-size:10px; font-weight:600;}

/* ===== Section generic ===== */
section{padding:46px 0 6px;}
.sec-head{text-align:center; padding:0 20px; margin-bottom:26px;}
.sec-eyebrow{
  font-size:12px; font-weight:900; letter-spacing:.15em;
  color:var(--yellow-deep);
}
.sec-title{
  font-family:"Mochiy Pop One", sans-serif;
  font-weight:400;
  font-size:20px; margin-top:8px;
  color:var(--brown-deep);
  line-height:1.7;
}
.sec-title .accent{
  color:var(--red);
}
.sec-lead{margin-top:10px; font-size:13.5px; color:#5b4c40;}

.divider-jag{
  height:22px;
  background-image: linear-gradient(135deg, var(--yellow) 25%, transparent 25%), linear-gradient(225deg, var(--yellow) 25%, transparent 25%);
  background-size: 22px 22px;
  background-position: 0 0;
}

/* ===== pillars (安さ・誠実・安心) ===== */
.pillars{background:var(--brown-deep); padding:36px 0 42px;}
.pillars .sec-eyebrow{color:var(--yellow);}
.pillars .sec-title{color:#fff;}
.pillar-list{padding:0 20px; display:flex; flex-direction:column; gap:16px;}
.pillar{
  display:flex; gap:14px; align-items:flex-start;
  background:#3B2622;
  border:2px solid var(--yellow);
  padding:16px;
}
.num-pop{
  flex-shrink:0;
  font-family:"Mochiy Pop One", sans-serif;
  font-weight:400;
  font-size:26px;
  color:var(--yellow);
  line-height:1;
  position:relative;
  display:inline-block;
  padding-bottom:8px;
  white-space:nowrap;
}
.num-pop:after{
  content:"";
  position:absolute; left:2px; bottom:0;
  width:calc(100% - 4px); height:5px;
  background:var(--yellow);
  border-radius:3px;
  transform:skewX(-10deg);
}
.pillar-num{
  flex-shrink:0;
  width:44px;
  text-align:center;
}
.pillar-body h3{color:var(--yellow-pale); font-size:16px; font-weight:900; margin-bottom:5px;}
.pillar-body p{color:#E8DDD2; font-size:12.5px;}

/* ===== logic / why-cheap ===== */
.logic-steps{padding:0 20px; display:flex; flex-direction:column;}
.logic-step{
  display:flex; gap:14px;
  padding:16px 0;
  border-bottom:2px dotted #cbb98f;
  position:relative;
}
.logic-step:last-child{border-bottom:none;}
.logic-step .ls-num{
  flex-shrink:0;
  width:44px;
}
.logic-step .ls-num .num-pop{color:var(--yellow-deep);}
.logic-step .ls-num .num-pop:after{background:var(--yellow-deep);}
.logic-step h3{font-size:15.5px; font-weight:900; color:var(--brown-deep); margin-bottom:5px;}
.logic-step p{font-size:13px; color:#5b4c40;}
.logic-arrow{text-align:center; font-size:22px; color:var(--yellow-deep); font-weight:900;}
.logic-result{
  margin:18px 20px 0;
  background:var(--yellow);
  border:3px solid var(--brown-deep);
  padding:18px;
  text-align:center;
  font-weight:900;
  font-size:16px;
  color:var(--brown-deep);
  box-shadow:5px 5px 0 var(--brown-deep);
}
.logic-result span{display:block; font-size:12px; font-weight:700; margin-bottom:4px;}

/* ===== craftsmanship / before-after ===== */
.craft{background:var(--white); padding:44px 0;}
.compare-wrap{
  margin:0 20px 30px;
  position:relative;
  border:4px solid var(--brown-deep);
}
.compare-imgs{
  position:relative;
  overflow:hidden;
  touch-action:pan-y;
  cursor:ew-resize;
  user-select:none;
}
.compare-imgs .base-img{width:100%; display:block; pointer-events:none; -webkit-user-drag:none;}
.compare-reveal{
  position:absolute; top:0; left:0; height:100%; width:0%;
  overflow:hidden;
  pointer-events:none;
}
.compare-reveal img{
  position:absolute; top:0; left:0; height:100%;
  max-width:none;
  -webkit-user-drag:none;
}
.compare-handle{
  position:absolute; top:0; bottom:0; left:0%;
  width:0; z-index:2;
  pointer-events:none;
}
.compare-handle .bar{
  position:absolute; top:0; bottom:0; left:0;
  width:3px; margin-left:-1.5px;
  background:#fff;
  box-shadow:0 0 0 1px var(--brown-deep);
}
.compare-handle .grip{
  position:absolute; top:50%; left:0;
  width:38px; height:38px;
  margin-left:-19px; margin-top:-19px;
  border-radius:50%;
  background:var(--yellow);
  border:3px solid var(--brown-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:900; color:var(--brown-deep);
}
.compare-hint{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  background:rgba(43,36,32,.75);
  color:#fff; font-size:11px; font-weight:700;
  padding:5px 12px; border-radius:999px;
  letter-spacing:.04em;
  pointer-events:none;
}
.compare-label{
  position:absolute; top:10px;
  font-family:"Mochiy Pop One", sans-serif;
  font-weight:400;
  font-size:12px;
  padding:5px 12px;
  color:#fff;
  letter-spacing:.05em;
  z-index:3;
}
.compare-label.before{left:10px; background:var(--brown);}
.compare-label.after{right:10px; background:var(--red);}
.compare-caption{
  background:var(--brown-deep);
  color:var(--yellow-pale);
  font-size:12.5px;
  font-weight:700;
  text-align:center;
  padding:9px;
}

.zig{display:flex; flex-direction:column; gap:34px; padding:0 20px;}
.zig-row{display:flex; flex-direction:column; gap:12px;}
.zig-row.rev .zig-text{order:2;}
.zig-photo{border:3px solid var(--brown-deep);}
.zig-text h3{font-size:16px; font-weight:900; color:var(--brown-deep); margin-bottom:6px;}
.zig-text p{font-size:13px; color:#5b4c40;}
.note-bubble{
  margin-top:10px;
  background:var(--yellow-pale);
  border:2px solid var(--yellow-deep);
  border-radius:4px;
  padding:10px 12px;
  font-family:"Klee One",sans-serif;
  font-size:13px;
  color:var(--brown-deep);
  position:relative;
}
.note-bubble:before{
  content:"職人メモ";
  position:absolute; top:-11px; left:10px;
  background:var(--yellow-deep);
  color:#fff;
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:10px; font-weight:900;
  padding:2px 8px;
}

/* ===== comparison table ===== */
.tbl-wrap{padding:0 20px;}
table.compare-table{
  width:100%;
  border-collapse:collapse;
  border:3px solid var(--brown-deep);
  font-size:12.5px;
}
table.compare-table th, table.compare-table td{
  border:1px solid #c9b98f;
  padding:11px 8px;
  text-align:center;
  vertical-align:middle;
}
table.compare-table thead th{
  background:var(--brown-deep);
  color:#fff;
  font-size:12px;
  font-weight:900;
}
table.compare-table td.item{
  background:var(--yellow-pale);
  font-weight:900;
  color:var(--brown-deep);
  text-align:left;
  width:26%;
}
table.compare-table td.gen{color:#8a7a68; background:#fff;}
table.compare-table td.asb{
  background:#FFF3CC;
  color:var(--brown-deep);
  font-weight:700;
}
table.compare-table td.asb b{color:var(--red);}

/* ===== area (map hero style) ===== */
.area{background:var(--brown-deep); padding:0; position:relative; overflow:hidden;}

.area-intro{
  padding:44px 24px 30px;
  position:relative;
  z-index:2;
}
.area-eyebrow{color:var(--yellow); text-align:left;}
.area-heading{
  font-family:"Mochiy Pop One", sans-serif;
  font-weight:400;
  font-size:24px;
  line-height:1.55;
  color:#fff;
  margin-top:10px;
}
.area-lead{
  margin-top:16px;
  font-size:13px;
  line-height:2;
  color:#D9CBB8;
}
.area-phone-box{
  display:block;
  margin-top:22px;
  border:2px solid #6b564c;
  padding:14px 16px;
  text-decoration:none;
  max-width:320px;
}
.apb-tel{
  display:block;
  font-family:"Mochiy Pop One", sans-serif;
  font-size:19px;
  color:#fff;
  letter-spacing:.02em;
}
.apb-hours{
  display:block;
  margin-top:6px;
  font-size:11px;
  color:#B9A996;
  font-weight:700;
}

.area-map-visual{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  aspect-ratio:1617/656;
  overflow:hidden;
  border-top:1px solid #55433b;
  border-bottom:1px solid #55433b;
}
.area-map-photo{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    inset: 0px;
}
.area-map-visual:after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(51,32,27,.12) 0%, rgba(51,32,27,.02) 55%, rgba(51,32,27,.3) 100%);
  pointer-events:none;
}
.pin{
  position:absolute;
  transform:translate(-50%,-50%);
  width:52px; height:52px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
  background:rgba(51,32,27,.4);
  backdrop-filter:blur(1px);
  color:#fff;
  font-size:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.3;
  white-space:nowrap;
  z-index:3;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.pin-plain{
  width:auto; height:auto;
  border:none;
  background:none;
  backdrop-filter:none;
  box-shadow:none;
  padding:0;
  font-size:11px;
  font-weight:900;
  text-shadow:0 1px 6px rgba(0,0,0,.65);
}
.pin-center{
  width:auto; height:auto;
  border-radius:6px;
  border:none;
  background:var(--yellow-deep);
  color:#fff;
  font-family:"Mochiy Pop One", sans-serif;
  font-weight:400;
  font-size:13px;
  padding:8px 16px;
  gap:8px;
  z-index:4;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.pin-center-dot{
  position:absolute;
  left:50%; top:100%;
  transform:translate(-50%,4px);
  width:8px; height:8px;
  border-radius:50%;
  background:var(--yellow-deep);
  animation:pulse 1.8s infinite;
}
.pin-sanda{top:13%; left:64%;}
.pin-osaka{top:22%; left:89%;}
.pin-kawanishi{top:70%; left:14%;}
.pin-nishinomiya{top:68%; left:88%;}
.pin-itami{top:90%; left:66%;}
.pin-center{top:50%; left:60%;}

.area-list{
  padding:22px 24px 40px;
  font-size:13px;
  line-height:1.9;
  color:#D9CBB8;
}

/* ===== safety ===== */
.safety-list{padding:0 20px; display:flex; flex-direction:column; gap:14px;}
.safety-item{
  display:flex; gap:12px; align-items:flex-start;
  border-left:6px solid var(--yellow);
  background:#fff;
  padding:14px 14px;
  box-shadow:0 2px 0 #e5d6ae;
}
.safety-icon{
  flex-shrink:0; width:40px; height:40px;
}
.safety-item h3{font-size:14.5px; font-weight:900; color:var(--brown-deep); margin-bottom:4px;}
.safety-item p{font-size:12.5px; color:#5b4c40;}

/* ===== flow (vertical, arrow progression) ===== */
.flow-vertical{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:4px 20px 0;
}
.flow-card{
  width:100%;
  max-width:420px;
  background:#fff;
  border:3px solid var(--brown-deep);
  padding:22px 18px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.flow-card .fc-label{
  font-family:"Mochiy Pop One", sans-serif;
  font-size:11px;
  color:#fff;
  background:var(--brown-deep);
  padding:3px 12px;
  border-radius:999px;
  margin-bottom:10px;
}
.flow-card h3{font-size:15px; font-weight:900; color:var(--brown-deep); margin-bottom:6px;}
.flow-card p{font-size:12px; color:#5b4c40;}
.flow-card .warn{
  display:inline-block; margin-top:9px;
  background:var(--red); color:#fff; font-size:11px; font-weight:900;
  padding:4px 10px; border-radius:999px;
}
.flow-arrow{
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:900; color:var(--yellow-deep);
  padding:6px 0;
  line-height:1;
}

/* ===== voice ===== */
.voice-list{padding:0 20px; display:flex; flex-direction:column; gap:16px;}
.voice-item{
  background:#fff;
  border:2px solid var(--brown-deep);
  padding:16px;
  position:relative;
}
.voice-stars{color:var(--yellow-deep); font-size:14px; font-weight:900; margin-bottom:6px;}
.voice-item p{font-size:13px; color:#4a3d33;}
.voice-who{
  margin-top:10px; text-align:right;
  font-size:11.5px; color:#8a7a68; font-weight:700;
}
.voice-total{
  margin:0 20px 24px;
  background:var(--yellow-pale);
  border:2px dashed var(--yellow-deep);
  padding:16px;
  display:flex; align-items:center; gap:16px;
}
.voice-total .big{font-size:34px; font-weight:900; color:var(--red);}
.voice-total .small{font-size:11px; font-weight:700; color:var(--brown-deep);}

/* ===== stock ===== */
.stock{background:var(--yellow); padding:40px 0 46px; text-align:center;}
.stock .sec-title{color:var(--brown-deep);}
.stock-count{
  display:inline-block;
  background:var(--brown-deep);
  color:var(--yellow);
  font-weight:900;
  font-size:15px;
  padding:10px 22px;
  margin:10px 0 22px;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.22));
  transition:transform .18s ease, filter .18s ease;
}
.stock-count:hover,
.stock-count:focus-visible{
  transform:translateY(-3px);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.32));
}
.stock-count:active{
  transform:translateY(-1px);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));
}
.stock-count b{font-size:26px; margin:0 4px;}

/* ===== faq ===== */
.faq-list{padding:0 20px; display:flex; flex-direction:column; gap:12px;}
.faq-item{background:#fff; border:2px solid #d8c68f;}
.faq-q{
  display:flex; gap:10px; padding:14px;
  font-weight:900; font-size:13.5px; color:var(--brown-deep);
}
.faq-q .qmark{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:var(--red); color:#fff; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.faq-a{
  display:flex; gap:10px; padding:0 14px 14px 14px;
  font-size:12.5px; color:#5b4c40;
}
.faq-a .amark{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:var(--yellow-deep); color:#fff; font-size:13px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}

/* ===== pro intro (staff / qualifications) ===== */
.pro{background:var(--cream); padding:44px 0 6px;}
.pro-ribbon{
  display:block;
  margin:0 auto 26px;
  max-width:480px;
  background:var(--brown-deep);
  color:var(--yellow-pale);
  text-align:center;
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  padding:12px 16px;
  border-radius:999px;
  border:2px solid var(--yellow);
}
.pro-logo-block{
  text-align:center;
  margin-bottom:28px;
}
.pro-logo-row{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.pro-logo-pre{
  font-size:19px;
  font-weight:900;
  color:var(--brown-deep);
}
.pro-logo-maru{
  font-size:14px;
  color:var(--red);
  position:relative;
  top:-6px;
}
.pro-logo-brand{
  margin-top:6px;
  font-size:30px;
  color:var(--brown-deep);
  position:relative;
  display:inline-block;
  padding-bottom:8px;
}
.pro-logo-mark{color:var(--yellow-deep);}
.pro-logo-underline{
  position:absolute;
  left:0; right:0; bottom:0;
  height:5px;
  background:var(--yellow);
  border-radius:3px;
}
.pro-logo-cta{
  margin-top:10px;
  font-size:22px;
  color:var(--red);
}

.pro-body{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:0 20px;
  margin-bottom:34px;
}
.pro-photo{border:3px solid var(--brown-deep);}
.pro-text p{font-size:13px; color:#5b4c40; margin-bottom:10px;}
.pro-text .hl{color:var(--red);}
.pro-text-final{font-weight:900; color:var(--brown-deep) !important;}

.pro-worry{
  margin:0 20px 44px;
  position:relative;
  background:
    linear-gradient(#fff 1px, transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg, #fff 1px, transparent 1px) 0 0/22px 100%,
    var(--yellow-pale);
  border:3px solid var(--brown-deep);
  border-radius:14px;
  padding:34px 18px 26px;
  text-align:center;
}
.pro-worry-figs{
  position:absolute;
  top:-16px; left:0; right:0;
  display:flex; justify-content:space-between;
  padding:0 18px;
  font-size:30px;
  pointer-events:none;
}
.pro-worry-title{
  font-size:19px;
  font-weight:900;
  color:var(--brown-deep);
  display:inline-block;
  border-bottom:4px solid var(--red);
  padding-bottom:4px;
  line-height:1.5;
}
.pro-worry-sub{
  margin-top:14px;
  font-size:13px;
  font-weight:700;
  color:var(--brown-deep);
}
.pro-worry-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px 12px;
}
.pw-ic{
  width:64px; height:64px;
  margin:0 auto 8px;
  border-radius:50%;
  background:var(--yellow);
  border:2px solid var(--brown-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
}
.pw-item p{font-size:12px; font-weight:900; color:var(--brown-deep); line-height:1.5;}

@media (min-width:520px){
  .pro-body{flex-direction:row; align-items:flex-start;}
  .pro-photo{flex:0 0 42%;}
  .pro-text{flex:1;}
}

/* ===== shop info ===== */
.shop{background:#EFE2CF; color:#EFE2CF; padding:40px 0 46px;}
.shop .sec-eyebrow{color:var(--yellow);}
.shop .sec-title{color:var(--brown-deep);}
.shop-card{
  margin:0 20px;
  padding:18px;
}
.shop-name{font-size:17px; font-weight:900; color:#33201B; margin-bottom:10px;}
.shop-row{display:flex; font-size:12.5px; padding:7px 0; border-bottom:1px dashed #6b564c;}
.shop-row:last-child{border-bottom:none;}
.shop-row .k{flex-shrink:0; width:76px; font-weight:900; color:#33210B;}
.shop-row .v{color:#33210B;}
.shop-tel{
  margin-top:16px; text-align:center;
  display:block; background:var(--yellow); color:var(--brown-deep);
  font-weight:900; padding:14px; text-decoration:none;
  font-size:16px;
}
.shop-tel small{display:block; font-size:10.5px; font-weight:700;}

/* ===== footer ===== */
footer{
  background:var(--ink); color:#a99c8c;
  text-align:center; font-size:11px; padding:26px 20px 20px;
}
footer .fname{color:#fff; font-weight:900; font-size:13px; margin-bottom:6px;}

/* ===== sticky bottom banner ===== */
.sticky-banner{
  position:fixed; left:0; right:0; bottom:0;
  z-index:999;
  background:var(--red);
  border-top:4px solid var(--brown-deep);
  padding:10px 14px;
  display:flex; align-items:center; gap:10px;
}
.sticky-banner .sb-text{
  color:#fff; font-size:11.5px; font-weight:900; line-height:1.4; flex:1;
}
.sticky-banner .sb-text .hi{
  display:block; background:var(--yellow); color:var(--brown-deep);
  font-size:10.5px; padding:2px 6px; margin-bottom:3px; width:fit-content;
}
.sticky-banner .sb-tel{
  flex-shrink:0;
  background:var(--yellow);
  color:var(--brown-deep);
  font-weight:900; font-size:15px;
  padding:10px 14px;
  text-decoration:none;
  border:2px solid var(--brown-deep);
  text-align:center;
  animation:pulse 1.8s infinite;
}
.sticky-banner .sb-tel small{display:block; font-size:9px; font-weight:700;}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(245,179,0,.6);}
  50%{box-shadow:0 0 0 6px rgba(245,179,0,0);}
}

@media (min-width:520px){
  .zig-row{flex-direction:row; align-items:center; gap:20px;}
  .zig-row .zig-photo{flex:1;}
  .zig-row .zig-text{flex:1;}
  .zig-row.rev{flex-direction:row-reverse;}
  .zig-row.rev .zig-text{order:0;}
  .hero h1{font-size:34px;}
}

/* ===== page header (下層ページ共通見出し) ===== */
.pg_header{
  background:var(--brown-deep);
  padding:36px 0;
  text-align:center;
  border-bottom:4px solid var(--yellow);
}
.pg_header .sec-title{margin:0;}

/* ===== 在庫一覧 (page-stock.php) ===== */
.stock-archive{padding:36px 0 50px;}
.stock-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.stock-card{
  display:block;
  background:#fff;
  border:3px solid var(--brown-deep);
  text-decoration:none;
  color:inherit;
  box-shadow:5px 5px 0 var(--yellow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.stock-card:hover,
.stock-card:focus-visible{
  transform:translateY(-3px);
  box-shadow:5px 8px 0 var(--yellow);
}
.sc-img{
  position:relative;
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
  background-color:#eee;
  border-bottom:3px solid var(--brown-deep);
}
.sc-status{
  position:absolute; top:8px; left:8px;
  font-family:"Mochiy Pop One", sans-serif;
  font-weight:400;
  font-size:11px;
  padding:5px 12px;
  color:#fff;
  letter-spacing:.04em;
}
.sc-status.status-onsale{background:var(--green);}
.sc-status.status-nego{background:var(--yellow-deep);}
.sc-status.status-sold{background:#8a7a68;}
.sc-body{padding:14px 16px 18px;}
.sc-maker{font-size:11px; font-weight:900; color:var(--yellow-deep); letter-spacing:.05em;}
.sc-title{font-size:16px; font-weight:900; color:var(--brown-deep); margin:4px 0 10px;}
.sc-meta{display:flex; gap:18px; margin-bottom:10px;}
.sc-meta div{font-size:12px;}
.sc-meta dt{color:#8a7a68; font-weight:700;}
.sc-meta dd{color:var(--brown-deep); font-weight:900; margin-top:2px;}
.sc-price{font-size:19px; font-weight:900; color:var(--red); margin-bottom:10px;}
.sc-link{
  display:inline-block;
  font-size:12px; font-weight:900;
  color:var(--brown-deep);
  border-bottom:2px solid var(--yellow);
  padding-bottom:2px;
}

@media (min-width:640px){
  .stock-grid{grid-template-columns:repeat(2, 1fr);}
}

/* ===== 車両詳細 (single-vehicle.php) ===== */
.vehicle-detail-sec{padding:36px 0 50px;}
.vehicle-detail{max-width:640px; margin:0 auto;}
.vd-maker{font-size:12px; font-weight:900; color:var(--yellow-deep); letter-spacing:.05em; text-align:center;}
.vd-title{
  font-family:"Mochiy Pop One", sans-serif;
  font-weight:400;
  font-size:22px;
  color:var(--brown-deep);
  text-align:center;
  margin:8px 0 22px;
}
.vd-gallery{margin-bottom:24px;}
.vd-main{border:4px solid var(--brown-deep);}
.vd-main img{width:100%; display:block;}
.vd-thumbs{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;}
.vd-thumb{
  width:64px; height:48px; object-fit:cover;
  border:2px solid var(--brown-deep);
  cursor:pointer;
  opacity:.55;
  transition:opacity .15s ease;
}
.vd-thumb.active,
.vd-thumb:hover{opacity:1;}

table.vehicle-info-tbl, table.company-tbl{
  width:100%;
  border-collapse:collapse;
  border:3px solid var(--brown-deep);
  font-size:13px;
  margin-bottom:24px;
}
table.vehicle-info-tbl th, table.vehicle-info-tbl td,
table.company-tbl th, table.company-tbl td{
  border:1px solid #c9b98f;
  padding:12px 14px;
  text-align:left;
  vertical-align:top;
}
table.vehicle-info-tbl th, table.company-tbl th{
  background:var(--yellow-pale);
  font-weight:900;
  color:var(--brown-deep);
  width:34%;
  white-space:nowrap;
}
table.vehicle-info-tbl td, table.company-tbl td{background:#fff; color:#4a3d33;}
table.company-tbl td .tbd{color:#a8987f; font-size:11.5px; font-weight:700;}
table.vehicle-info-tbl td.vd-price{font-size:18px; font-weight:900; color:var(--red);}

.vd-cta{text-align:center; margin-bottom:34px;}
.vd-cta .btn{display:inline-flex; max-width:340px;}

.vehicle-pagination{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:18px 0;
  border-top:2px dotted #cbb98f;
  font-size:12.5px;
  font-weight:900;
}
.vehicle-pagination a{
  color:var(--brown-deep);
  text-decoration:none;
  border-bottom:2px solid var(--yellow);
  padding-bottom:2px;
}
.vp-archive{margin:0 auto;}

/* ===== header navigation (hamburger menu) ===== */
.site-header{
  position:relative;
  flex-wrap:wrap;
}
.header-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav-toggle{
  width:34px; height:34px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.nav-toggle span{
  width:24px; height:3px;
  background:var(--brown-deep);
  display:block;
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.gnav{
  position:absolute;
  top:100%; left:0; right:0;
  background:#fff;
  border-bottom:3px solid var(--brown-deep);
  box-shadow:0 6px 14px rgba(0,0,0,.15);
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  z-index:100;
}
.gnav.open{max-height:420px;}
.gnav-list{list-style:none; padding:6px 20px;}
.gnav-list li{border-bottom:1px solid #eee;}
.gnav-list li:last-child{border-bottom:none;}
.gnav-list a{
  display:block;
  padding:14px 4px;
  font-size:14px;
  font-weight:900;
  color:var(--brown-deep);
  text-decoration:none;
}
.gnav-list a.gnav-highlight{color:var(--red);}


/* ===== 会社概要 (page-about.php) — シンプル構成 ===== */
.about-note{
  margin:0 20px 26px;
  background:var(--yellow-pale);
  border:2px dashed var(--yellow-deep);
  padding:12px 14px;
  font-size:11.5px;
  color:var(--brown-deep);
  font-weight:700;
  line-height:1.7;
}

/* --- ごあいさつ --- */
.about-greeting{padding:0 20px;}
.about-greeting p{font-size:13.5px; color:#5b4c40; margin-bottom:14px;}
.about-sign{
  text-align:right;
  font-size:13px;
  font-weight:900;
  color:var(--brown-deep);
  margin-top:20px;
}

/* --- 通常写真（フルブリードにせず、通常のコンテンツ幅） --- */
.about-photo{
  margin:26px 20px;
  border:3px solid var(--brown-deep);
}
.about-photo img{width:100%; display:block;}

/* --- アクセス／地図 --- */
.map-embed{
  margin:0 20px 20px;
  border:4px solid var(--brown-deep);
  aspect-ratio:4/3;
  overflow:hidden;
}
.map-embed iframe{width:100%; height:100%; border:0; display:block;}

@media (min-width:520px){
  .map-embed{aspect-ratio:16/7;}
}

/* --- 電話CTAバンド --- */
.cta-band{
  margin:0 20px;
  background:var(--yellow);
  border:3px solid var(--brown-deep);
  box-shadow:5px 5px 0 var(--brown-deep);
  text-align:center;
  padding:28px 20px;
}
.cta-band h3{
  font-family:"Mochiy Pop One", sans-serif;
  font-weight:400;
  font-size:16px;
  color:var(--brown-deep);
  margin-bottom:14px;
}
.cta-band .cta-tel{
  display:inline-block;
  font-size:26px;
  font-weight:900;
  color:var(--red);
  text-decoration:none;
  letter-spacing:.02em;
}
.cta-band .cta-note{
  margin-top:8px;
  font-size:12px;
  font-weight:700;
  color:var(--brown-deep);
}