:root{
  --lp-brand:#2fb26d;--lp-brand-dark:#1f8952;--lp-accent:#0f8bff;
  --lp-text:#1e293b;--lp-muted:#6b7280;--lp-bg:#f7faf7;--lp-card:#fff;
  --lp-radius:14px;--lp-shadow:0 8px 24px rgba(0,0,0,.07);
  --header-h:80px; /* JSで上書き */
}

/* 基本 */
.lp-newgoods{color:var(--lp-text);line-height:1.7;background:var(--lp-bg)}
.lp-newgoods a{color:white;text-decoration:none}
.lp-container{width:min(1100px,92vw);margin:0 auto}
.lp-sec{padding:56px 0}
@media (max-width: 640px){.lp-sec{padding:10px 0}}

.lp-grid{display:grid;gap:22px}
.lp-card{background:var(--lp-card);border: 1px solid #e7dca8;border-radius:var(--lp-radius);box-shadow:var(--lp-shadow);padding:20px}
.lp-h2{font-size:clamp(22px,2.4vw,28px);margin:0 0 12px}
.lp-small{font-size:.92rem;margin-bottom: 10px;}
.lp-btn{display:inline-flex;align-items:center;gap:.5rem;padding:12px 18px;border-radius:999px;background:var(--lp-brand);color:#fff;font-weight:700;box-shadow:var(--lp-shadow);transition:.2s}
.lp-btn:hover{background:var(--lp-brand-dark);transform:translateY(-1px)}
.lp-btn.-outline{background:#fff;color:var(--lp-brand);border:2px solid var(--lp-brand)}

/* ヒーロー — 固定ヘッダーに隠れないよう上部に余白を確保 */
.lp-hero{background:linear-gradient(180deg,#fff,#eefaf2);padding-top:calc(var(--header-h) + 24px)}
.lp-hero__copy{padding:40px 0 28px}
.lp-ttl{font-size:clamp(26px,3.2vw,40px);margin:.2em 0}
.lp-lead{font-size:1.05rem}
.lp-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:6px 0 8px}
.lp-pill{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-size:.82rem;background:#e6f5ec;color:var(--lp-brand);font-weight:700}
.lp-pill.-green{background:#e6f5ec}
.lp-pill.-red{background:#fff1f2;color:#e11d48}
.lp-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.lp-note{font-size:.85rem;color:var(--lp-muted)}

/* アンカーで飛んだ時に隠れない対策 */
.lp-newgoods [id]{scroll-margin-top:calc(var(--header-h) + 12px)}

/* カテゴリグリッド */
.lp-cats{grid-template-columns:repeat(3,1fr)}
.lp-cat{display:flex;flex-direction:column;align-items:center;text-align:center}
.lp-cat h3{font-size:.95rem;margin-top:4px}

/* アイコンボックス（110x110） */
.lp-ico{
  width:110px;height:110px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  display:grid;place-items:center;
  margin:0 auto 8px;
}
.lp-ico img{max-width:78%;max-height:78%;object-fit:contain;display:block}

/* B2B */
.lp-b2b{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:16px;background:linear-gradient(180deg,#fff,#f7fffb)}
.lp-b2b__ttl{font-size:1.05rem}
.lp-b2b__cta{display:flex;gap:10px;flex-wrap:wrap}

/* レスポンシブ */
@media (max-width: 960px){.lp-cats{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.lp-cats{grid-template-columns:1fr}}

/* 管理バー（ログイン時） */
body.admin-bar .lp-newgoods [id]{scroll-margin-top:calc(var(--header-h) + 32px)}


/* ===== テキスト一覧（lp-list） ===== */
.lp-list {
  grid-template-columns: repeat(2, 1fr);
}

.lp-list-ttl {
  font-size: 1rem;
  margin: 0 0 6px;
}

.lp-list-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.lp-list .lp-card {
  padding: 16px 18px;
}

.lp-list .lp-card:hover {
  box-shadow: 0 8px 26px rgba(0,0,0,.08);
  transform: translateY(-1px);
  transition: .18s ease;
}

@media (max-width: 960px) {
  .lp-list { grid-template-columns: 1fr; }
}

/* === Hero: Title + Emblem row (added) === */
.lp-hero__head{
  display:flex;
  align-items:center;
  gap:16px;                 /* 見出しとエンブレムの間隔 */
  flex-wrap:wrap;           /* 狭い画面では縦積み */
  margin: 0 0 8px;
}

.lp-emblem{
  margin:0;
  line-height:0;
}
.lp-emblem img{
  width: clamp(200px, 28vw, 380px);
  height: auto;
}

@media (max-width: 640px){
  .lp-hero__head{gap:12px}
  .lp-emblem img{width: clamp(180px, 55vw, 320px)}
}

/* === Balance tuning around emblem and heading === */
.lp-hero__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  column-gap: clamp(14px, 2.2vw, 28px);
  row-gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.lp-hero__titlebox{
  flex: 1 1 420px;
  min-width: 280px;
}

.lp-hero__titlebox .lp-ttl{
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

.lp-emblem{
  flex: 0 0 auto;
  margin: 0;
  line-height: 0;
}

.lp-emblem img{
  width: clamp(220px, 24vw, 340px);
  height: auto;
}

/* Tighten surrounding spacing to visually center the block */
.lp-hero .lp-badges{ margin-top: 6px; }
.lp-hero .lp-lead{ margin-top: 8px; }
.lp-hero .lp-cta{ margin-top: 12px; }

/* Medium screens: slightly reduce emblem and loosen title for balance */
@media (min-width: 768px) and (max-width: 1180px){
  .lp-emblem img{ width: clamp(200px, 22vw, 300px); }
  .lp-hero__titlebox .lp-ttl{ letter-spacing: .02em; }
}

/* Small screens: stack neatly with centered emblem */
@media (max-width: 640px){
  .lp-hero__head{ justify-content: center; }
  .lp-hero__titlebox{ flex-basis: 100%; min-width: 0; text-align: center; }
  .lp-hero__titlebox .lp-ttl{ font-size: clamp(22px, 6vw, 32px); }
  .lp-emblem{ width: 100%; display: grid; place-items: center; }
  .lp-emblem img{ width: clamp(180px, 60vw, 300px); }
}

/* Large screens: allow a touch more emblem presence but keep heading dominant */
@media (min-width: 1400px){
  .lp-emblem img{ width: clamp(260px, 20vw, 380px); }
}


/* === エンブレム周辺のテキスト調整 === */
.lp-hero__head .lp-ttl {
  font-size: clamp(28px, 3vw, 42px);
  color: #b8860b; /* 上品なゴールド寄りのブラウン */
  font-weight: 700;
  letter-spacing: 0.03em;
}

.lp-hero__head .lp-ttl strong {
  color: #c21807; /* エンブレムの赤リボンに合わせた色 */
  font-weight: 800;
}

.lp-lead {
  font-size: clamp(16px, 1.6vw, 22px);
  color: #3b2e13; /* ゴールドに合う落ち着いたブラウン */
  margin-top: 10px;
  line-height: 1.6;
}

.lp-badges .lp-pill {
  background: #c21807;  /* リボン赤に合わせる */
  color: #fff;
  font-weight: 700;
}

.lp-badges .lp-pill.-red {
  background: #b8860b;  /* ゴールドバリエーション */
  color: #fffbea;
}

/* スマホ調整 */
@media (max-width: 640px) {
  .lp-hero__head .lp-ttl {
    font-size: clamp(22px, 6vw, 32px);
  }
  .lp-lead {
    font-size: clamp(14px, 4vw, 18px);
  }
}


/* === バランス微調整（必要に応じて上書き） === */
.lp-hero__head{
  column-gap: clamp(18px, 2.6vw, 32px);
  row-gap: 12px;
  margin-bottom: 12px;
}
.lp-hero__titlebox{
  flex: 1 1 480px;          /* タイトル面積を少し広げる */
  min-width: 320px;
}
.lp-hero__titlebox .lp-ttl{
  font-size: clamp(28px, 3.2vw, 44px); /* 見出しを一段大きく */
  line-height: 1.12;
}
.lp-emblem img{
  width: clamp(210px, 22vw, 320px);    /* エンブレムを一段控えめに */
}

/* 中間幅：より詰まる帯域だけ軽く縮小 */
@media (min-width: 960px) and (max-width: 1180px){
  .lp-emblem img{ width: clamp(200px, 20vw, 300px); }
}

/* SP：中央寄せ＆上下の間隔を少しゆったり */
@media (max-width: 640px){
  .lp-hero__head{ row-gap: 14px; }
  .lp-hero__titlebox .lp-ttl{ font-size: clamp(22px, 6.2vw, 32px); }
  .lp-emblem img{ width: clamp(180px, 58vw, 300px); }
}\n\n/* === Hero compact final override === */
.lp-hero{ padding-top: calc(var(--header-h) + 10px); }
.lp-hero__copy{ padding: 24px 0 16px; }

.lp-hero .lp-hero__head{
  justify-content: space-between;
  column-gap: clamp(14px, 2vw, 24px);
  row-gap: 8px;
  margin-bottom: 6px;
}

.lp-hero .lp-hero__titlebox{
  flex: 1 1 560px;   /* タイトル領域を広めに確保して1行化しやすく */
  min-width: 320px;
}

.lp-hero .lp-hero__titlebox .lp-ttl{
  margin: 0;
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.08;
  letter-spacing: .01em;
}

.lp-hero .lp-emblem img{
  width: clamp(190px, 19vw, 300px);  /* エンブレムを一段控えめに */
  height: auto;
  transform: translateY(1px);
}

.lp-hero .lp-badges{ margin-top: 10px; }
.lp-hero .lp-lead{ margin-top: 6px; }
.lp-hero .lp-cta{ margin-top: 10px; }
.lp-hero .lp-note{ margin-top: 6px;}

@media (max-width: 640px){
  .lp-hero{ padding-top: calc(var(--header-h) + 8px); padding-bottom: 14px; }
  .lp-hero .lp-hero__head{ justify-content: center; row-gap: 12px; }
  .lp-hero .lp-hero__titlebox{ flex-basis: 100%; text-align: center; }
  .lp-hero .lp-hero__titlebox .lp-ttl{ font-size: clamp(22px, 6vw, 32px); line-height: 1.12; }
  .lp-hero .lp-emblem{ width: 100%; display: grid; place-items: center; }
  .lp-hero .lp-emblem img{ width: clamp(180px, 58vw, 290px); transform: none; }
}\n

/* === Hero heading badge style (balance with emblem) === */
.lp-hero__titlebox .lp-ttl{
  margin: 0;
  line-height: 1.1;
  /* keep size controls from previous overrides */
}
.lp-hero__titlebox .lp-ttl .lp-ttl__inner{
  display: inline-block;
  padding: clamp(6px, 0.7vw, 10px) clamp(12px, 1.3vw, 18px);
  border: 1px solid #a97c1c;         /* gold-brown border */
  border-radius: 10px;
  background: linear-gradient(180deg, #fff7e1 0%, #f5e1a6 100%); /* soft champagne */
  box-shadow: 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
  color: #3b2e13; /* readable dark on light gold */
  position: relative;
}
/* red accent underline to echo the ribbon */
.lp-hero__titlebox .lp-ttl .lp-ttl__inner::after{
  content: "";
  display: block;
  height: 3px;
  margin-top: 6px;
  background: #c21807;                /* emblem red */
  border-radius: 2px;
  width: 42%;
}

/* Ensure strong text (「買取強化中」) keeps brand red */
.lp-hero__titlebox .lp-ttl strong{ color:#c21807; }

/* Responsive alignment */
@media (max-width: 640px){
  .lp-hero__titlebox{ text-align: center; }
  .lp-hero__titlebox .lp-ttl .lp-ttl__inner{ border-radius: 12px; }
  .lp-hero__titlebox .lp-ttl .lp-ttl__inner::after{ margin-left: auto; margin-right: auto; width: 48%; }
}

/* === Hero banner image (kv) === */
.lp-hero__kv{ margin:0; line-height:0; display:block;padding-bottom: 10px;}
.lp-hero__kv img{
  width:100%; height:auto; max-width:1100px;
  display:block; margin:0 auto; border-radius:8px;
}
@media (max-width: 640px){
  .lp-hero__kv img{padding-top: 80px;}
}
/* === 高額査定のポイント === */
.lp-section--points{
  background:#fffdfa;
  border-top:2px solid #f1e1a6;
  border-bottom:2px solid #f1e1a6;
  padding: clamp(40px, 6vw, 80px) 0;
}
.lp-points{ margin-top:32px; display:grid; gap:24px; }
.lp-points li{
  background:#fff;
  border:1px solid #e7dca8;
  border-radius:10px;
  padding:24px;
  box-shadow:0 3px 6px rgba(0,0,0,.05);
}
.lp-points h3{ font-size:1.2rem; color:#c21807; margin:0 0 8px; font-weight:700; }
.lp-points p{ line-height:1.7; color:#333; font-size:.95rem; }
/* === 見出しデザイン統一（lp-h2 / lp-ttl02） === */
.lp-h2 span, .lp-ttl02 span{
  background: linear-gradient(90deg, #f7d36b 0%, #f5e1a6 100%);
  color: #3b2e13;
  padding: 0.4em 1.2em;
  border-radius: 6px;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}