/* ==== pages/about.css ==== */
/* VMV cards on about page */
.vmv-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin:4rem auto;max-width:1000px;justify-content:center}
.vmv-card{background:#fff;border-radius:1rem;padding:2rem;box-shadow:0 8px 24px rgba(0,0,0,.05);text-align:center;transition:transform .3s ease,box-shadow .3s ease}
.vmv-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.08)}
.vmv-title{font-family:'Nunito',sans-serif;font-size:1.4rem;letter-spacing:.05em;color:#333;margin-bottom:.8rem;position:relative}
.vmv-title::after{content:"";display:block;width:40px;height:2px;background:#f2b632;margin:.5rem auto 0}
.vmv-text{font-family:'Nunito',sans-serif;font-size:1rem;color:#555;line-height:1.6}

/* About section helpers */
.about-wrap{display:flex;flex-direction:column;align-items:center}
.about-text h3{margin-bottom:.5rem;color:var(--color-primary)}
.stats{display:flex;gap:1.5rem;margin-top:1rem}
.stats li{list-style:none;text-align:center}
.stats li strong{display:block;font-size:1.8rem;color:var(--color-primary)}
.about-image img{width:100%;height:auto;border-radius:.5rem}

/* ===== Greeting / Message block ===== */
.about-message{
  position: relative;
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:clamp(20px,3vw,32px);
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  overflow:hidden;
}

/* 角のやわらかい彩り（ブランド色のほのかなグラデ） */
.about-message::before,
.about-message::after{
  content:"";
  position:absolute;
  filter:blur(60px);
  opacity:.35;
  z-index:-1;
}
.about-message::before{
  width:34vmax;height:34vmax;left:-18vmax;top:-22vmax;
  background:radial-gradient(circle at 30% 30%, rgba(128,0,0,.10), transparent 60%);
}
.about-message::after{
  width:30vmax;height:30vmax;right:-16vmax;bottom:-20vmax;
  background:radial-gradient(circle at 70% 70%, rgba(165,42,42,.10), transparent 60%);
}

/* 小見出しピル */
.about-eyebrow{
  display:inline-block;
  font-size:.8rem;
  letter-spacing:.08em;
  padding:6px 12px;
  border-radius:999px;
  background:var(--color-primary);
  color:#fff;
  border:1px solid rgba(0,0,0,.04);
}

/* リード文（読みやすい幅と左ライン） */
.about-lead{
  margin:12px 0 18px;
  padding-left:14px;
  border-left:4px solid rgba(128,0,0,.35);
  line-height:1.9;
  color:#444;
}

/* ステップのカード群 */
.about-steps{
  list-style:none;
  display:grid;
  gap:14px;
  counter-reset: steps;
  margin: 0;
  padding: 0;
}
.step-card{
  position:relative;
  background:linear-gradient(180deg,#fff,#fefcfc);
  border:1px solid #eee;
  border-radius:14px;
  padding:14px 16px 16px 56px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.step-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  border-color:#e6e6e6;
}

/* 丸いナンバー */
.step-card .num{
  position:absolute;
  left:16px; top:16px;
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:999px;
  background:rgba(128,0,0,.08);
  color:var(--color-primary);
  font-weight:800;
  border:1px solid rgba(128,0,0,.15);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  font-size:.95rem;
}

/* タイポ */
.step-card h4{
  margin:0 0 4px;
  color:var(--color-primary);
  font-size:1.05rem;
}
.step-card p{ margin:0; color:var(--color-muted); line-height:1.85; }

/* 署名は右寄せ・薄色 */
.about-signature{
  margin-top:18px;
  text-align:right;
  color:var(--color-muted);
  font-size:.95rem;
}

/* ===== Stats compact cards ===== */
.stats-cards { margin-top: 1rem; }
.stat-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}
.stat-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  border-color: #e6e6e6;
}

/* icon pill */
.stat-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(128,0,0,.08);
  border: 1px solid rgba(128,0,0,.12);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.stat-icon svg { width: 22px; height: 22px; fill: var(--color-primary); opacity: .9; }

/* numbers */
.stat-meta { min-width: 0; }
.stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}
.stat-value .num {
  font-weight: 800;
  font-size: clamp(1.6rem, 3.8vw, 2rem);
  color: var(--color-primary);
  letter-spacing: .02em;
}
.stat-value .unit, .stat-value .text {
  color: var(--color-text);
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.05rem);
}
.stat-label {
  color: var(--color-muted);
  margin-top: 4px;
  font-size: .95rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* small screens */
@media (max-width: 420px) {
  .stat-card { grid-template-columns: 40px 1fr; padding: 12px 12px; }
  .stat-icon { width: 40px; height: 40px; border-radius: 10px; }
}