/* VESTM 買取・売却サイト
   出典スタイル: refero styles の Runway（暖色クラフト紙と琥珀の行動色）
   セクションを帯で分け、余白を大きく取り、ブログの縦積みから抜ける */

:root{
  --v-cream:#FBF8F5;
  --v-beige:#F1EAE1;
  --v-line:#EDE5DC;
  --v-ink:#1A1208;
  --v-amber:#F5831F;
  --v-amber-d:#D96D0C;
  --v-muted:#7A6A57;
  --v-pad:clamp(64px,9vw,132px);
}

/* ── セクションの帯 ────────────────────────────── */
.v-band{ padding-block:var(--v-pad); }
.v-band.is-cream{ background:var(--v-cream); }
.v-band.is-beige{ background:var(--v-beige); }
.v-band.is-ink{ background:var(--v-ink); color:var(--v-cream); }
.v-band.is-ink h2,.v-band.is-ink h3,.v-band.is-ink p{ color:var(--v-cream); }

.v-label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.22em;
  color:var(--v-amber); text-transform:uppercase; margin-bottom:10px;
}
.v-band h2{
  font-size:clamp(1.7rem,3.2vw,2.35rem); line-height:1.45; margin-bottom:8px;
}
.v-lead{ color:var(--v-muted); max-width:44em; }

/* ── ヒーロー ─────────────────────────────────── */
.v-hero{ position:relative; min-height:min(88vh,760px); display:flex; align-items:center; }
/* 暗幕はWordPress側のものを使わず、下の ::after のグラデーションだけで作る。
   ここを不透明にすると写真が完全に隠れる（2026-09-03にそれで真っ黒になった） */
.v-hero .wp-block-cover__background{ opacity:0 !important; }
.v-hero img.wp-block-cover__image-background{ object-fit:cover; }
.v-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg,rgba(18,12,5,.92) 0%,rgba(18,12,5,.74) 46%,rgba(18,12,5,.32) 82%),
    linear-gradient(to top,rgba(18,12,5,.55) 0%,rgba(18,12,5,0) 45%);
}
.v-hero .wp-block-cover__inner-container{ position:relative; z-index:2; width:100%; }
.v-hero-rule{ width:64px; height:2px; background:var(--v-amber); margin-bottom:22px; }
.v-hero h1{
  font-size:clamp(2.5rem,6.4vw,5.2rem); line-height:1.22; color:#fff;
  letter-spacing:.01em; margin:0 0 22px; text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.v-hero p{
  font-size:clamp(.95rem,1.35vw,1.08rem); line-height:2; color:#F4EEE6;
  max-width:34em; margin-bottom:30px;
}

/* ── 数字の見せ場 ─────────────────────────────── */
.v-figures{ display:flex; gap:clamp(28px,6vw,90px); flex-wrap:wrap; justify-content:center; }
.v-fig{ text-align:center; }
.v-fig .n{
  font-size:clamp(2.8rem,7vw,5rem); font-weight:700; color:var(--v-amber);
  line-height:1.05; letter-spacing:-.02em; font-feature-settings:"tnum";
}
.v-fig .n small{ font-size:.34em; margin-left:6px; color:var(--v-amber-d); font-weight:700; }
.v-fig .c{ font-size:.95rem; color:var(--v-ink); margin-top:6px; font-weight:700; }
.v-fig-note{ text-align:center; color:var(--v-muted); font-size:.875rem; margin-top:26px; }

/* ── カード ──────────────────────────────────── */
.v-cards .wp-block-column{
  background:#fff; border:1px solid var(--v-line); border-radius:10px;
  padding:30px 26px; box-shadow:0 4px 14px rgba(38,27,7,.05);
}
.v-cards h3{ font-size:1.08rem; line-height:1.6; margin:0 0 10px; }
.v-cards p{ font-size:.9rem; line-height:1.9; color:var(--v-muted); margin:0; }
.v-cards .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:var(--v-amber);
  color:var(--v-ink); font-weight:700; font-size:.9rem; margin-bottom:14px;
}

/* ── 2カラム（文章と写真） ─────────────────────── */
.v-split{ align-items:center; }
.v-split .wp-block-image img{ border-radius:10px; }

/* ── 7段階のタイムライン ───────────────────────── */
.v-flow{ display:grid; grid-template-columns:repeat(7,1fr); gap:0; position:relative; margin-top:8px; }
.v-flow::before{
  content:""; position:absolute; left:7%; right:7%; top:17px; height:2px;
  background:var(--v-line);
}
.v-step{ text-align:center; position:relative; padding:0 4px; }
.v-step .b{
  width:36px; height:36px; border-radius:50%; background:var(--v-amber);
  color:var(--v-ink); font-weight:700; font-size:.95rem;
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
  position:relative; z-index:1; box-shadow:0 0 0 6px var(--v-beige);
}
.v-step .t{ font-size:.83rem; line-height:1.65; color:var(--v-ink); }
@media(max-width:860px){
  .v-flow{ grid-template-columns:repeat(2,1fr); gap:26px 12px; }
  .v-flow::before{ display:none; }
}

/* ── 表 ──────────────────────────────────────── */
.v-band .wp-block-table table{
  background:#fff; border:1px solid var(--v-line); border-radius:10px;
  overflow:hidden; border-collapse:collapse;
}
.v-band .wp-block-table th,.v-band .wp-block-table td{
  padding:15px 20px; border-bottom:1px solid var(--v-line); text-align:left;
}
.v-band .wp-block-table th{ background:#F8F3EC; font-weight:700; white-space:nowrap; }
.v-band .wp-block-table tr:last-child td,.v-band .wp-block-table tr:last-child th{ border-bottom:0; }

/* ── ボタン ──────────────────────────────────── */
.wp-block-button__link{
  background-color:var(--v-amber); color:var(--v-ink);
  border-radius:999px; padding:16px 34px; font-weight:700; font-size:1rem;
  box-shadow:0 6px 18px rgba(245,131,31,.28);
  transition:transform .15s, box-shadow .15s, background-color .15s;
}
.wp-block-button__link:hover{
  background-color:var(--v-amber-d); color:#fff;
  transform:translateY(-1px); box-shadow:0 8px 22px rgba(245,131,31,.34);
}
.v-band.is-ink .wp-block-button__link{ box-shadow:0 6px 22px rgba(0,0,0,.4); }

/* ── ヘッダーとフッター ────────────────────────── */
.wp-block-template-part header,
header.wp-block-template-part{ border-bottom:1px solid var(--v-line); }
.wp-block-site-title a{ font-weight:700; letter-spacing:.01em; }
.wp-block-navigation .wp-block-navigation-item__content{ font-size:.92rem; letter-spacing:.04em; }

/* ── 本文 ───────────────────────────────────── */
body{ line-height:1.85; font-feature-settings:"palt" 1; }
h1,h2,h3,h4{ letter-spacing:0; }
.v-band > .wp-block-group__inner-container > *:last-child{ margin-bottom:0; }

/* ── トップページの見出しの重複を消す ─────────────
   テーマの固定ページテンプレートがページタイトルを出すため、
   ヒーローの中の見出しと合わせて h1 が2つになる。トップだけ隠す */
body.home .wp-block-post-title{ display:none; }
body.home .wp-block-post-content{ margin-block-start:0; }

/* ── トップページはヒーローを画面の上に貼りつける ────
   テーマが main に上マージン70px、その中のグループに上パディング70pxを付けるため、
   合わせて140pxの隙間ができる（2026-09-03に実測）。トップだけ打ち消す */
body.home main.wp-block-group{ margin-block-start:0 !important; }
body.home main > .wp-block-group{ padding-block-start:0 !important; }

/* ── ヒーローの中身を広く、左に寄せる ───────────────
   テーマの本文幅760pxが効いて中央寄りに見えるので、ここだけ広げる */
.v-hero .wp-block-cover__inner-container > .wp-block-group{
  max-width:1180px !important; margin-inline:auto;
}
/* 見出し・本文・ボタンの左端をそろえる。
   テーマの本文幅760pxが中の要素にだけ効いて、見出しとずれるため */
.v-hero .wp-block-group > *{ max-width:none !important; margin-inline:0 !important; }
.v-hero p{ max-width:38em; }
.v-hero-rule{ margin-inline:0; }

/* ── 帯の中身も本文幅に縛られないようにする ───────── */
.v-band > .wp-block-group__inner-container,
.v-band.is-layout-constrained > *{ max-width:1100px; margin-inline:auto; }
.v-band.is-ink > .wp-block-group__inner-container,
.v-band.is-ink.is-layout-constrained > *{ max-width:760px; }