/* ==========================================================================
   名刺まるっとエクスプレス — 改善統合版 style.css
   ベース: html03（ビジュアル品質） + html_kiro02（情報網羅性）
   追加: クロージング率向上のための新規コンポーネント
   デザインコンセプト: やさしく／手間なく／安心して頼める（ワイヤーフレームv3）
   実装前提: WordPress + Lightning Pro（VK Blocks）で再現可能な範囲で設計
   ========================================================================== */

:root {
  --color-bg: #fefbf2;
  --color-bg-white: #ffffff;
  --color-orange: #f5861f;
  --color-orange-deep: #e06a10;
  --color-orange-hover: #e07515;
  --color-orange-light: #fff3e6;
  --color-yellow: #ffcd38;
  --color-yellow-light: #fff9e6;
  --color-green: #8cc63f;
  --color-green-hover: #7ab532;
  --color-green-light: #f0fae4;
  --color-green-dark: #3d6b1e;
  --color-teal: #2bb6a3;          /* ワイヤーフレーム5色目（補色アクセント） */
  --color-teal-light: #e6f7f4;
  --color-text: #4e443d;
  --color-text-muted: #8a8078;
  --color-border: #ebe3d6;
  --color-line: #06c755;
  --color-success: #8cc63f;
  --font-base: "Noto Sans JP", sans-serif;
  --font-display: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --container: 1100px;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow-xs: 0 2px 8px rgba(78, 68, 61, 0.04);
  --shadow: 0 8px 24px rgba(78, 68, 61, 0.07);
  --shadow-md: 0 16px 40px rgba(78, 68, 61, 0.1);
  --shadow-lg: 0 24px 56px rgba(78, 68, 61, 0.12);
  --shadow-orange: 0 12px 32px rgba(245, 134, 31, 0.22);
  --shadow-green: 0 12px 32px rgba(140, 198, 63, 0.22);
  --gradient-orange: linear-gradient(135deg, #f5861f 0%, #ff9a3c 50%, #f5861f 100%);
  --gradient-yellow: linear-gradient(135deg, #f7b500 0%, #ffcd38 50%, #f4ad00 100%);
  --gradient-green: linear-gradient(135deg, #8cc63f 0%, #a5d65a 50%, #7ab532 100%);
  --shadow-yellow: 0 12px 32px rgba(247, 181, 0, 0.26);
  --gradient-hero: radial-gradient(ellipse 80% 60% at 20% 20%, rgba(255, 205, 56, 0.18) 0%, transparent 60%),
                   radial-gradient(ellipse 60% 50% at 85% 30%, rgba(140, 198, 63, 0.12) 0%, transparent 55%),
                   radial-gradient(ellipse 50% 40% at 70% 90%, rgba(245, 134, 31, 0.08) 0%, transparent 50%);
  --header-h: 72px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(78, 68, 61, 0.04) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-orange); text-decoration: none; transition: color 0.25s var(--ease-out); }
a:hover { color: var(--color-orange-hover); }

.l-container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.l-container--narrow { width: min(100% - 40px, 860px); margin-inline: auto; }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* ---------- Section head ---------- */
.section-head { margin-bottom: 48px; text-align: center; }

.section-head__en {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 10px;
}
.section-head__en::before,
.section-head__en::after {
  content: "";
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-orange));
  border-radius: 1px;
}
.section-head__en::after { background: linear-gradient(90deg, var(--color-orange), transparent); }

.section-head__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3.5vw, 1.875rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text);
  margin: 0 0 12px;
}
.section-head__lead {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0 auto;
  max-width: 560px;
  line-height: 1.8;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text);
  margin: 0 0 16px;
}
.section-lead { font-size: 1rem; color: var(--color-text-muted); margin: 0 0 32px; max-width: 680px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(254, 251, 242, 0.82);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(235, 227, 214, 0.8);
  height: var(--header-h);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 16px;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.site-logo__mark {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-orange);
  color: #fff;
  border-radius: 10px;
  font-size: 1rem;
  box-shadow: var(--shadow-orange);
}
.site-logo:hover { color: var(--color-orange); opacity: 1; }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav__link {
  display: block;
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  border-radius: var(--radius-pill);
  transition: background 0.25s, color 0.25s;
}
.site-nav__link:hover,
.site-nav__link.is-current { color: var(--color-orange); background: rgba(245, 134, 31, 0.1); }
.site-nav__cta { margin-left: 10px; display: flex; gap: 8px; }
.nav-toggle { display: none; background: none; border: none; font-size: 1.375rem; color: var(--color-orange); cursor: pointer; padding: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), filter 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  pointer-events: none;
}
.btn:hover { transform: translateY(-3px); color: inherit; }
.btn:active { transform: translateY(-1px); }

/* 特急＝オレンジ（主役CTA） */
.btn--primary { background: var(--gradient-orange); color: #fff; box-shadow: var(--shadow-orange); }
.btn--primary:hover { box-shadow: 0 16px 40px rgba(245, 134, 31, 0.32); color: #fff; }
/* 通常＝イエロー */
.btn--yellow { background: var(--gradient-yellow); color: var(--color-text); box-shadow: var(--shadow-yellow); }
.btn--yellow:hover { box-shadow: 0 16px 40px rgba(247, 181, 0, 0.34); color: var(--color-text); }
.btn--outline {
  background: var(--color-bg-white);
  color: var(--color-orange);
  box-shadow: var(--shadow-xs);
  border: 2px solid rgba(245, 134, 31, 0.35);
}
.btn--outline:hover { background: var(--color-orange-light); color: var(--color-orange); box-shadow: var(--shadow); }
.btn--outline-white { background: #fff; color: var(--color-orange); box-shadow: var(--shadow); }
.btn--outline-white:hover { background: #fff; color: var(--color-orange-deep); }
/* LINE＝LINEブランドの緑 */
.btn--line { background: var(--color-line); color: #fff; box-shadow: 0 8px 24px rgba(6, 199, 85, 0.25); }
.btn--line:hover { background: #05a847; color: #fff; }
.btn--line i { color: #fff; }
.btn--sm { padding: 10px 22px; font-size: 0.875rem; }
.btn--lg { padding: 18px 38px; font-size: 1.0625rem; }
.btn-group { display: flex; flex-wrap: wrap; gap: 14px; }

/* CVR: ボタンの注釈（マイクロコピー） */
.btn-note { font-size: 0.75rem; color: var(--color-text-muted); margin: 10px 0 0; }
.btn-note i { color: var(--color-green); margin-right: 4px; }

/* ---------- Hero（背景画像＋左スクリムの全幅ビジュアル） ---------- */
.hero {
  position: relative;
  padding: 88px 0 96px;
  /* PC: 写真を全面に敷き、その上にコピーを重ねる */
  background: url("../assets/images/hero.jpg") 70% 60% / cover no-repeat, var(--color-bg);
  overflow: hidden;
}
/* 左ほど濃いクリーム（文字を読みやすく）→中央右は素の写真→右端は背景色へフェード */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    rgba(254, 251, 242, 0.98) 0%,
    rgba(254, 251, 242, 0.93) 26%,
    rgba(254, 251, 242, 0.5) 42%,
    rgba(254, 251, 242, 0.06) 55%,
    rgba(254, 251, 242, 0) 66%,
    rgba(254, 251, 242, 0) 80%,
    rgba(254, 251, 242, 0.7) 92%,
    rgba(254, 251, 242, 0.98) 100%);
  pointer-events: none;
}
.hero .l-container { position: relative; z-index: 1; }
.hero__grid { display: block; }            /* PC: コピーのみ（写真は背景） */
.hero__content { max-width: 620px; }
.hero__photo { display: none; }            /* PC: 背景画像を使うので写真要素は隠す */
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* 大画面(1600px以上)では cover の拡大で頭・手が縦に切れるため、
   画像を縦いっぱい(高さ100%)で表示して縦の切れをなくし、左右を背景色へ溶け込ませる */
@media (min-width: 1600px) {
  .hero { background-size: auto 100%; background-position: 60% center; }
  .hero::before {
    background: linear-gradient(90deg,
      rgba(254, 251, 242, 1) 0%,
      rgba(254, 251, 242, 0.97) 44%,
      rgba(254, 251, 242, 0.45) 52%,
      rgba(254, 251, 242, 0.05) 60%,
      rgba(254, 251, 242, 0) 70%,
      rgba(254, 251, 242, 0) 80%,
      rgba(254, 251, 242, 0.6) 91%,
      rgba(254, 251, 242, 1) 100%);
  }
}
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 205, 56, 0.5);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-xs);
}
.hero__badge i { font-size: 0.6875rem; color: var(--color-orange); }
.hero__badge--orange { background: var(--color-orange-light); border-color: rgba(245, 134, 31, 0.4); color: var(--color-orange-deep); }
.hero__badge--green { background: var(--color-green-light); border-color: rgba(140, 198, 63, 0.45); }
.hero__catch {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.8vw, 2.625rem);
  font-weight: 700;
  line-height: 1.38;
  color: var(--color-text);
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.hero__catch em {
  font-style: normal;
  background: linear-gradient(transparent 55%, rgba(255, 205, 56, 0.55) 55%);
  padding-inline: 2px;
}
.hero__catch .accent { color: var(--color-orange); background: none; }
.hero__desc { font-size: 1.0125rem; color: var(--color-text); margin: 0 0 24px; max-width: 540px; }
.hero__desc strong { color: var(--color-orange-deep); }

/* CVR: ファーストビューに料金・納期を明示（2プランを並べて即比較） */
.hero__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; max-width: 600px; }
.hero__plan {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-xs);
}
.hero__plan--standard { border-top: 4px solid var(--color-yellow); }
.hero__plan--express { border-top: 4px solid var(--color-orange); }
.hero__plan-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
}
.hero__plan--standard .hero__plan-tag { background: var(--color-yellow-light); color: #b07a00; }
.hero__plan--express .hero__plan-tag { background: var(--color-orange-light); color: var(--color-orange-deep); }
.hero__plan-main { font-family: var(--font-display); line-height: 1.1; color: var(--color-text); }
.hero__plan-main b { font-size: 2rem; font-weight: 700; }
.hero__plan--express .hero__plan-main b { color: var(--color-orange); }
.hero__plan-main small { font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); margin-left: 2px; }
.hero__plan-tax { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin: 2px 0 8px; }
.hero__plan-lead {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
}
.hero__plan-lead i { color: var(--color-green-dark); }
.hero__line-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
}
.hero__line-link i { color: #06c755; font-size: 1.125rem; }
.hero__line-link:hover { color: var(--color-orange-deep); }
.hero__line-link small { font-weight: 500; color: var(--color-text-muted); }
/* ボタンを上のプランカードと同じ2カラム幅に揃える（通常↔通常／特急↔特急） */
.hero .btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 600px; }
.hero .btn-group .btn { width: 100%; }

/* ---------- Section ---------- */
.section { padding: 80px 0; position: relative; }
.section--alt { background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.95) 100%); }
.section--alt::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}
.section--tight { padding: 56px 0; }

/* ==========================================================================
   CVR施策 ① 安心の約束バー（ヒーロー直下のリスクリバーサル）
   → Lightning: VK Blocks「PR Blocks」3カラム または カラム+アイコン
   ========================================================================== */
.promise-bar { margin-top: -36px; position: relative; z-index: 5; }
.promise-bar__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.promise-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-right: 1px solid var(--color-border);
}
.promise-item:last-child { border-right: none; }
.promise-item__icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-green-light);
  color: var(--color-green-dark);
  border-radius: 50%;
  font-size: 1.125rem;
}
.promise-item__text { font-size: 0.875rem; line-height: 1.55; }
.promise-item__text strong { display: block; font-family: var(--font-display); font-weight: 700; color: var(--color-text); font-size: 0.9375rem; }
.promise-item__text span { color: var(--color-text-muted); font-size: 0.8125rem; }

/* ---------- Worry cards ---------- */
.worry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 36px; }
.worry-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 20px;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.65;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.worry-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.worry-card__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.7);
}
.worry-card--1 { background: linear-gradient(145deg, #fff8f0 0%, #ffecd9 100%); }
.worry-card--1 .worry-card__icon { color: var(--color-orange); }
.worry-card--2 { background: linear-gradient(145deg, #f5fcef 0%, #e8f8d8 100%); }
.worry-card--2 .worry-card__icon { color: var(--color-green-dark); }
.worry-card--3 { background: linear-gradient(145deg, #eef6fc 0%, #dceef9 100%); }
.worry-card--3 .worry-card__icon { color: #4a90b8; }
.worry-card--4 { background: linear-gradient(145deg, #fdf0f5 0%, #fae0ea 100%); }
.worry-card--4 .worry-card__icon { color: #c75b8a; }
.worry-card--5 { background: linear-gradient(145deg, #fffbee 0%, #fff3cc 100%); }
.worry-card--5 .worry-card__icon { color: #c9a020; }
.worry-card--6 { background: linear-gradient(145deg, #f6f0fa 0%, #ebe0f5 100%); }
.worry-card--6 .worry-card__icon { color: #8b6bb8; }
.worry-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  background: var(--color-bg-white);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}
.worry-summary__thumb {
  width: 88px; height: 88px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
  border: 3px solid var(--color-yellow-light);
}
.worry-summary__thumb img { width: 100%; height: 100%; object-fit: cover; }
.worry-summary p { margin: 0; font-size: 0.9375rem; }
.worry-summary strong { color: var(--color-orange-deep); }

/* ---------- Feature block ---------- */
.feature-block { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.feature-block__image { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.feature-block__image::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(transparent, rgba(78, 68, 61, 0.25));
  pointer-events: none;
}
.feature-block__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature-block__deco {
  position: absolute;
  top: -16px; right: -16px;
  width: 64px; height: 64px;
  background: var(--gradient-orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: var(--shadow-orange);
  z-index: 1;
}
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.check-item:hover { border-color: rgba(140, 198, 63, 0.5); box-shadow: var(--shadow); }
.check-item i {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-green-light);
  color: var(--color-green-dark);
  border-radius: 50%;
  font-size: 0.625rem;
  flex-shrink: 0;
}

/* ==========================================================================
   CVR施策 ② あなた / 私たちの役割分担（IT苦手層の不安解消）
   → Lightning: VK Blocks「PR Blocks」2カラム または カラムブロック
   ========================================================================== */
.role-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; }
.role-col { border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow); border: 1px solid var(--color-border); }
.role-col--you { background: var(--color-orange-light); border-color: rgba(245, 134, 31, 0.3); }
.role-col--us { background: var(--color-green-light); border-color: rgba(140, 198, 63, 0.35); }
.role-col__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.role-col__badge {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: #fff;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.role-col--you .role-col__badge { background: var(--gradient-orange); box-shadow: var(--shadow-orange); }
.role-col--us .role-col__badge { background: var(--gradient-green); box-shadow: var(--shadow-green); }
.role-col__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; margin: 0; }
.role-col__title span { display: block; font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; }
.role-list { list-style: none; margin: 0; padding: 0; }
.role-list li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; font-size: 0.9375rem; border-bottom: 1px dashed rgba(78,68,61,0.12); }
.role-list li:last-child { border-bottom: none; }
.role-list i { margin-top: 5px; flex-shrink: 0; }
.role-col--you .role-list i { color: var(--color-orange); }
.role-col--us .role-list i { color: var(--color-green-dark); }
.role-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  font-size: 1.5rem;
}

/* ---------- Plan cards ---------- */
.plan-intro {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 36px;
  padding: 20px 24px;
  background: var(--color-bg-white);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}
.plan-intro__image {
  width: 80px; height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid var(--color-orange-light);
  box-shadow: var(--shadow-orange);
}
.plan-intro__image img { width: 100%; height: 100%; object-fit: cover; }
.service-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.service-card {
  background: var(--color-bg-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  position: relative;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* 通常＝イエロー */
.service-card--yellow { border-top: 4px solid var(--color-yellow); }
/* 特急＝オレンジ */
.service-card--orange { border-top: 4px solid var(--color-orange); }
.service-card__ribbon {
  position: absolute;
  top: 16px; right: -28px;
  background: var(--gradient-orange);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 36px;
  transform: rotate(45deg);
  letter-spacing: 0.05em;
}
.service-card__head { padding: 32px 28px 20px; text-align: center; position: relative; }
.service-card--yellow .service-card__head { background: linear-gradient(180deg, var(--color-yellow-light) 0%, #fff 100%); }
.service-card--orange .service-card__head { background: linear-gradient(180deg, var(--color-orange-light) 0%, #fff 100%); }
.service-card__plan {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
}
.service-card--yellow .service-card__plan { background: var(--color-yellow-light); color: #b07a00; }
.service-card--orange .service-card__plan { background: rgba(245, 134, 31, 0.15); color: var(--color-orange-deep); }
.service-card__name { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 700; margin: 0 0 8px; }
.service-card__catch { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0 0 12px; }
.service-card__price { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: 1.1; }
.service-card--yellow .service-card__price { color: #b07a00; }
.service-card--orange .service-card__price { color: var(--color-orange); }
.service-card__price small { font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); }
.service-card__price-tax { font-size: 0.8125rem; color: var(--color-text-muted); margin: 4px 0 0; }
.service-card__body { padding: 8px 28px 20px; flex: 1; }
.service-card__list { list-style: none; margin: 0; padding: 0; }
.service-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-border);
}
.service-card__list li:last-child { border-bottom: none; }
.service-card__list i {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-green-light);
  color: var(--color-green-dark);
  border-radius: 50%;
  font-size: 0.5625rem;
  margin-top: 4px;
  flex-shrink: 0;
}
.service-card__foot { padding: 0 28px 28px; }

/* CVR: 料金透明性ノート（送料・追加費用の早見） */
.price-note {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.price-note__item {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.price-note__label { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 4px; }
.price-note__value { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-text); }
.price-note__value small { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; }

/* ---------- Compare table ---------- */
.compare-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.compare-table { width: 100%; border-collapse: collapse; background: var(--color-bg-white); font-size: 0.9375rem; }
.compare-table th, .compare-table td { padding: 14px 18px; border: 1px solid var(--color-border); text-align: center; }
.compare-table thead th { background: var(--gradient-yellow); color: var(--color-text); font-weight: 700; }
.compare-table thead th:first-child { background: #f4ece0; }
.compare-table thead th.is-express { background: var(--gradient-orange); color: #fff; }
.compare-table tbody th { background: var(--color-yellow-light); text-align: left; font-weight: 600; }
.compare-table .is-highlight { background: var(--color-orange-light); font-weight: 700; color: var(--color-orange-deep); }

/* ==========================================================================
   CVR施策 ③ 特急・緊急訴求バナー（粗利の柱へ誘導）
   → Lightning: 全幅グループブロック（背景色/グラデ）+ 見出し + ボタン
   ========================================================================== */
.express-banner {
  background: var(--gradient-orange);
  border-radius: var(--radius);
  padding: 44px 44px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.express-banner::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.express-banner > * { position: relative; z-index: 1; }
.express-banner__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.22);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.express-banner__title { font-family: var(--font-display); font-size: clamp(1.375rem, 3.2vw, 1.875rem); font-weight: 700; margin: 0 0 10px; color: #fff; }
.express-banner__text { margin: 0; opacity: 0.95; font-size: 0.9375rem; max-width: 540px; }
.express-banner__cta { text-align: center; }
.express-banner__cta .btn { background: #fff; color: var(--color-orange-deep); box-shadow: var(--shadow-md); }
.express-banner__cta .btn:hover { color: var(--color-orange-deep); }
.express-banner__note { display: block; font-size: 0.75rem; opacity: 0.85; margin-top: 10px; }

/* ---------- Delivery ---------- */
.delivery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.delivery-card { background: var(--color-bg-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--color-border); }
.delivery-card__content { padding: 24px; }
.delivery-card__image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.delivery-card__icon { font-size: 1.75rem; color: var(--color-orange); margin-bottom: 8px; }
.delivery-card__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; margin: 0 0 8px; }
.delivery-card__note { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 12px; padding: 10px 12px; background: var(--color-yellow-light); border-radius: var(--radius-sm); }

/* ---------- Samples ---------- */
.sample-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sample-item { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16/10; margin: 0; }
.sample-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.sample-item:hover img { transform: scale(1.06); }
.sample-item__overlay { position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(78, 68, 61, 0.85)); display: flex; align-items: flex-end; padding: 16px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; margin: 0; }

/* ---------- Flow ---------- */
.flow-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; list-style: none; margin: 0; padding: 32px 0; position: relative; }
.flow-steps::before {
  content: "";
  position: absolute;
  top: 58px; left: 10%; right: 10%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-yellow), var(--color-orange), var(--color-green));
  border-radius: 2px;
  z-index: 0;
}
.flow-step { text-align: center; padding: 0 8px; position: relative; z-index: 1; }
.flow-step::before {
  content: attr(data-step);
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  background: var(--gradient-orange);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: 50%;
  box-shadow: var(--shadow-orange);
  border: 4px solid var(--color-bg);
}
.flow-step:nth-child(even)::before { background: var(--gradient-green); box-shadow: var(--shadow-green); }
.flow-step__title { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; margin: 0 0 4px; }
.flow-step__text { font-size: 0.75rem; color: var(--color-text-muted); margin: 0; }

/* ==========================================================================
   CVR施策 ④ お客様の声（社会的証明 / 許可制で随時追加）
   → Lightning: VK Blocks「吹き出し（Balloon）」または PR Blocks
   ========================================================================== */
.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voice-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow);
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}
.voice-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.voice-card__quote { font-size: 2.5rem; color: var(--color-yellow); font-family: Georgia, serif; line-height: 1; height: 24px; }
.voice-card__stars { color: var(--color-yellow); font-size: 0.8125rem; margin-bottom: 10px; letter-spacing: 2px; }
.voice-card__text { font-size: 0.9375rem; line-height: 1.8; margin: 0 0 16px; }
.voice-card__author { display: flex; align-items: center; gap: 12px; border-top: 1px dashed var(--color-border); padding-top: 14px; }
.voice-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-orange-light);
  color: var(--color-orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.voice-card__meta strong { display: block; font-size: 0.875rem; font-weight: 700; }
.voice-card__meta span { font-size: 0.75rem; color: var(--color-text-muted); }
.voice-note { text-align: center; font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 20px; }

/* ---------- LINE box ---------- */
.line-box {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 28px;
  align-items: center;
  background: var(--color-bg-white);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.line-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 100%;
  background: var(--gradient-green);
}
.line-box__image { border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); }
.line-box__image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.3s;
}
.faq-item[open] { box-shadow: var(--shadow); }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  background: linear-gradient(90deg, var(--color-yellow-light) 0%, #fff 100%);
  transition: background 0.25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "Q";
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-orange);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  border-radius: 10px;
  box-shadow: var(--shadow-orange);
}
.faq-item summary::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  color: var(--color-orange);
  font-size: 0.75rem;
  transition: transform 0.3s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item__answer { padding: 4px 22px 20px 68px; font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.8; }

/* ---------- Final CTA ---------- */
.cta-final {
  background: var(--gradient-orange);
  border-radius: var(--radius);
  padding: 48px 44px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.cta-final::after {
  content: "";
  position: absolute;
  bottom: -30%; left: -10%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255, 205, 56, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.cta-final > * { position: relative; z-index: 1; }
.cta-final__title { font-family: var(--font-display); font-size: clamp(1.3125rem, 3vw, 1.75rem); font-weight: 700; margin: 0 0 10px; color: #fff; }
.cta-final__text { margin: 0 0 24px; opacity: 0.92; font-size: 0.9375rem; max-width: 480px; }
.cta-final__image {
  width: 160px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--shadow-md);
}
.cta-final__image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ==========================================================================
   CVR施策 ⑤ モバイル追従CTAバー（離脱防止 / 常時クリック導線）
   → Lightning Pro: 「追従ボタン（fixed）」機能、または カスタムHTML/CSS
   ========================================================================== */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px rgba(78, 68, 61, 0.1);
  backdrop-filter: blur(10px);
}
.sticky-cta .btn { flex: 1; padding: 13px 10px; font-size: 0.875rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(165deg, var(--color-green-dark) 0%, #2d5016 100%);
  color: rgba(255, 255, 255, 0.9);
  padding: 56px 0 24px;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-orange), var(--color-yellow), var(--color-green));
}
.site-footer a { color: rgba(255, 255, 255, 0.88); transition: color 0.25s; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.site-footer__brand { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
.site-footer__desc { font-size: 0.875rem; line-height: 1.75; opacity: 0.82; }
.site-footer__heading {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-yellow);
  display: inline-block;
}
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links li { margin-bottom: 8px; }
.site-footer__links a { font-size: 0.875rem; display: flex; align-items: center; gap: 8px; }
.site-footer__links a i { font-size: 0.5625rem; opacity: 0.5; }
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 22px;
  text-align: center;
  font-size: 0.8125rem;
  opacity: 0.7;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  /* タブレット/スマホ: 背景画像をやめ、写真を全幅バナーで上・コピーを下に積む
     （ヘッダー直下に余白なくフラットに配置） */
  .hero { background: var(--color-bg); padding: 0 0 48px; }
  .hero::before { display: none; }
  .hero__grid { display: flex; flex-direction: column; gap: 0; }
  .hero__photo {
    display: block;
    order: -1;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin-bottom: 32px;
  }
  .hero__photo img { object-position: center; }
  .hero__content { max-width: 100%; }
  .promise-bar { margin-top: 0; }
  .promise-bar__inner { grid-template-columns: 1fr; }
  .promise-item { border-right: none; border-bottom: 1px solid var(--color-border); }
  .promise-item:last-child { border-bottom: none; }
  .worry-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-block { grid-template-columns: 1fr; }
  .role-split { grid-template-columns: 1fr; }
  .role-arrow { transform: rotate(90deg); }
  .service-cards { grid-template-columns: 1fr; }
  .price-note { grid-template-columns: repeat(2, 1fr); }
  .compare-table { font-size: 0.875rem; }
  .express-banner { grid-template-columns: 1fr; text-align: center; }
  .express-banner__cta .btn { width: 100%; }
  .delivery-grid { grid-template-columns: 1fr; }
  .sample-grid { grid-template-columns: repeat(2, 1fr); }
  .voice-grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .flow-steps::before { display: none; }
  .line-box { grid-template-columns: 1fr; text-align: center; }
  .line-box__image { max-width: 280px; margin-inline: auto; }
  .cta-final { grid-template-columns: 1fr; text-align: center; }
  .cta-final__image { margin-inline: auto; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .site-nav { position: static; }
  /* 閉じている間はメニュー・CTAを隠す */
  .site-nav__list, .site-nav__cta { display: none; }
  /* 開いたら .site-nav 自体を1枚のドロップダウンパネルにし、
     メニューとCTAを縦に積む（リストとCTAが重ならないように） */
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: rgba(254, 251, 242, 0.98);
    border-bottom: 1px solid var(--color-border);
    padding: 16px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(12px);
  }
  .site-nav.is-open .site-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin: 0;
  }
  .site-nav.is-open .site-nav__list li { width: 100%; }
  .site-nav.is-open .site-nav__list .site-nav__link { display: block; padding: 12px 14px; font-size: 0.9375rem; }
  .site-nav.is-open .site-nav__cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }
  .site-nav.is-open .site-nav__cta .btn { width: 100%; }
  .section { padding: 56px 0; }
  /* スマホ: 写真（上）→コピー（下）。ヘッダー直下に余白なし */
  .hero { padding: 0 0 56px; }
  .hero__photo { aspect-ratio: 3 / 2; }
  .hero__plans { grid-template-columns: 1fr; max-width: 100%; }
  .hero .btn-group { grid-template-columns: 1fr; max-width: 100%; }
  .worry-grid { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .sample-grid { grid-template-columns: 1fr; }
  .price-note { grid-template-columns: 1fr 1fr; }
  .flow-steps { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .btn-group { flex-direction: column; }
  .btn-group .btn { width: 100%; }
  .worry-summary { flex-direction: column; text-align: center; }
  .plan-intro { flex-direction: column; text-align: center; }
  .hero__stats { justify-content: center; }
  /* 追従CTAを表示し、フッターとの被りを避けるため余白を確保 */
  .sticky-cta { display: flex; }
  body { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__float { animation: none; }
  .btn:hover, .service-card:hover, .worry-card:hover, .voice-card:hover { transform: none; }
}

/* ==========================================================================
   下層ページ（サブページ）共通コンポーネント
   配色は新スキーム（通常=イエロー／特急=オレンジ）に合わせて調整
   ========================================================================== */
.page-header {
  background-color: var(--color-bg);
  background-image: var(--gradient-hero);
  padding: 40px 0 36px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.page-header::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-yellow), var(--color-orange), var(--color-green));
}
.page-header__title { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.125rem); font-weight: 700; margin: 0 0 8px; }
.page-header__desc { color: var(--color-text-muted); margin: 0; max-width: 660px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-orange); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; opacity: 0.4; }

.page-content { padding: 56px 0 80px; }
.content-block { margin-bottom: 48px; }
.content-block:last-child { margin-bottom: 0; }

.section-label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: var(--color-orange); margin-bottom: 8px; }

.info-box {
  background: var(--color-yellow-light);
  border-left: 4px solid var(--color-orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-xs);
}
.info-box p { margin: 0; }
.info-box--warn { background: var(--color-orange-light); }
.info-box--alert { background: #fef2f2; border-left-color: #dc2626; }

.price-table { width: 100%; border-collapse: collapse; background: var(--color-bg-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.price-table th, .price-table td { padding: 14px 18px; border-bottom: 1px solid var(--color-border); text-align: left; }
.price-table thead th { background: var(--gradient-orange); color: #fff; font-weight: 700; }
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table .amount { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--color-orange); white-space: nowrap; }
.price-table .amount small { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.two-col__image { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.two-col__image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--color-border); }
.feature-list li:last-child { border-bottom: none; }
.feature-list i { color: var(--color-green-dark); margin-top: 4px; }
.feature-list i.fa-times-circle { color: #dc2626; }

.pattern-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pattern-card { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; text-align: center; box-shadow: var(--shadow); transition: transform 0.3s, box-shadow 0.3s; }
.pattern-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pattern-card__label { display: inline-block; background: var(--gradient-orange); color: #fff; font-weight: 700; font-size: 1.125rem; width: 48px; height: 48px; line-height: 48px; border-radius: 14px; margin-bottom: 12px; box-shadow: var(--shadow-orange); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); transition: transform 0.3s, box-shadow 0.3s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--color-orange-light); border-radius: 14px; font-size: 1.25rem; color: var(--color-orange); margin-bottom: 14px; }
.card__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; margin: 0 0 8px; }
.card__text { font-size: 0.9375rem; color: var(--color-text-muted); margin: 0; }

.price-tag { background: var(--color-bg-white); border: 2px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 16px; display: inline-block; }
.price-tag--accent { border-color: var(--color-orange); background: var(--color-orange-light); }
.price-tag__label { display: block; font-size: 0.6875rem; font-weight: 700; color: var(--color-text-muted); }
.price-tag__amount { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-orange); }
.price-tag__amount small { font-size: 0.8125rem; font-weight: 500; }

/* アイコン付きのLINEボックス（FAQ/参考ページ用） */
.line-box--icon { grid-template-columns: auto 1fr auto; }
.line-box__icon { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; background: var(--color-green-light); border-radius: 50%; font-size: 1.875rem; color: var(--color-line); flex-shrink: 0; }

/* 準備中プレースホルダ（フォーム/カレンダー/QR） */
.order-form-placeholder, .calendar-placeholder { background: var(--color-yellow-light); border: 2px dashed var(--color-border); border-radius: var(--radius); padding: 48px 24px; text-align: center; color: var(--color-text-muted); }
.order-form-placeholder > i { display: block; font-size: 2.5rem; color: var(--color-orange); margin-bottom: 14px; }
.order-form-placeholder p, .calendar-placeholder p { margin: 4px 0; }
.calendar-placeholder__icon { font-size: 2rem; color: var(--color-orange); }
.calendar-placeholder__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 24px; max-width: 480px; margin-inline: auto; }
.calendar-placeholder__cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: 0.8125rem; background: var(--color-bg); color: var(--color-text-muted); }
.calendar-placeholder__cell.is-available { background: var(--color-orange-light); color: var(--color-orange); font-weight: 700; }
.line-qr-placeholder { width: 168px; height: 168px; margin: 24px auto; background: var(--color-green-light); border: 2px dashed var(--color-green); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--color-green); font-size: 3rem; }

@media (max-width: 1024px) {
  .two-col { grid-template-columns: 1fr; gap: 28px; }
  .pattern-cards { grid-template-columns: 1fr; }
  .line-box--icon { grid-template-columns: 1fr; text-align: center; }
  .line-box--icon .line-box__icon { margin-inline: auto; }
}