/* =========================================================
   DESIGN DIRECTIONS  (案A / 案B / 案C)
   A = のれん（既定・上品 / セリフ・えんじの細線）→ base styles
   B = 炭火（力強い・ゴシック・えんじブロック・元気）
   C = 余白（モダン上質・墨基調・えんじ最小・大余白）
   ========================================================= */

/* ----------------------------------------------------------
   案A — のれん（finishing touches over base）
   ---------------------------------------------------------- */
[data-variant="a"] .hero-deco { display: block; }
[data-variant="a"] .s-title { font-weight: 700; }

/* ----------------------------------------------------------
   案B — 炭火（BOLD / GOTHIC / ENERGETIC）
   ---------------------------------------------------------- */
[data-variant="b"] {
  --kinari: #F4ECDA;
}
[data-variant="b"] .hero h1,
[data-variant="b"] .s-title,
[data-variant="b"] .c-name,
[data-variant="b"] .contact h2,
[data-variant="b"] .about-lead,
[data-variant="b"] .step .st-ttl,
[data-variant="b"] .feature .f-ttl {
  font-family: var(--gothic);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.18;
}
[data-variant="b"] .hero h1 { font-size: clamp(40px, 7.2vw, 84px); }
[data-variant="b"] .price-main,
[data-variant="b"] .hero-badge .b-num { font-family: var(--gothic); font-weight: 900; }
[data-variant="b"] .eyebrow { letter-spacing: .22em; }

/* bold えんじ section header band */
[data-variant="b"] .s-head { position: relative; padding-left: 22px; }
[data-variant="b"] .s-head::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 6px; background: var(--enji); border-radius: 2px;
}
[data-variant="b"] .btn { border-radius: 3px; font-weight: 900; padding: 16px 30px; }
[data-variant="b"] .btn-primary { box-shadow: 0 8px 0 var(--enji-deep); }
[data-variant="b"] .btn-primary:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--enji-deep); background: var(--enji); }

/* bold course cards */
[data-variant="b"] .course { border-width: 2px; border-radius: 5px; }
[data-variant="b"] .course.featured { background: var(--enji); border-color: var(--enji); }
[data-variant="b"] .course.featured .c-desc,
[data-variant="b"] .course.featured .c-list li { color: rgba(255,255,255,.85); }
[data-variant="b"] .course.featured .c-for { color: rgba(255,255,255,.8); }
[data-variant="b"] .course.featured .price-main { color: var(--washi); }
[data-variant="b"] .course.featured .price-block,
[data-variant="b"] .course.featured .price-row + .price-row { border-color: rgba(255,255,255,.25); }
[data-variant="b"] .course-ribbon { background: var(--sumi); }

[data-variant="b"] .inc-check { border-radius: 4px; }
[data-variant="b"] .hero-deco { display: none; }
[data-variant="b"] .feature .f-ttl { font-size: 21px; }
[data-variant="b"] .step .st-no { font-family: var(--gothic); font-weight: 900; }

/* energetic hero badges as filled chips */
[data-variant="b"] .hero-badges { gap: 14px; border-top: none; padding-top: 22px; }
[data-variant="b"] .hero-badge {
  background: var(--paper);
  border: 2px solid var(--sumi);
  border-radius: 5px;
  padding: 16px 22px;
}

/* ----------------------------------------------------------
   案C — 余白（MODERN / MINIMAL / SUMI-LED）
   ---------------------------------------------------------- */
[data-variant="c"] {
  --kinari: #EFEAE0;
  --washi: #FBFAF6;
  --enji: #8C2B30;
}
[data-variant="c"] .section { padding-block: clamp(80px, 12vw, 170px); }
[data-variant="c"] .eyebrow { color: var(--sumi-faint); }
[data-variant="c"] .eyebrow::before { background: var(--sumi-faint); width: 40px; }

[data-variant="c"] .hero h1,
[data-variant="c"] .s-title,
[data-variant="c"] .contact h2,
[data-variant="c"] .c-name {
  font-family: var(--old);
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.4;
}
[data-variant="c"] .hero h1 { font-size: clamp(36px, 5.8vw, 66px); font-weight: 600; line-height: 1.3; }
[data-variant="c"] .hero h1 .accent { color: var(--sumi); border-bottom: 3px solid var(--enji); padding-bottom: 2px; }
[data-variant="c"] .s-title { font-weight: 600; }

/* minimal, airy hero — larger media, thin rules */
[data-variant="c"] .hero-grid { grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); }
[data-variant="c"] .hero-media .ph { aspect-ratio: 3 / 4; }
[data-variant="c"] .hero-deco { display: none; }

/* minimal cards — borderless, hairline separated */
[data-variant="c"] .course {
  background: transparent;
  border: none;
  border-top: 2px solid var(--sumi);
  border-radius: 0;
  padding: 26px 14px 30px;
}
[data-variant="c"] .course:hover { transform: translateY(-4px); box-shadow: none; }
[data-variant="c"] .course.featured { background: transparent; color: var(--sumi); border-top-color: var(--enji); }
[data-variant="c"] .course.featured .c-name, [data-variant="c"] .course.featured .price-main { color: var(--sumi); }
[data-variant="c"] .course.featured .c-desc, [data-variant="c"] .course.featured .c-list li { color: var(--sumi-soft); }
[data-variant="c"] .course.featured .price-row, [data-variant="c"] .course.featured .price-block, [data-variant="c"] .course.featured .price-row + .price-row { border-color: var(--line); }
[data-variant="c"] .course.featured .price-main { color: var(--enji); }
[data-variant="c"] .course-ribbon { position: static; display: inline-block; box-shadow: none; background: transparent; color: var(--enji); border: 1px solid var(--enji-line); margin-bottom: 14px; padding: 5px 12px; }
[data-variant="c"] .price-main { font-family: var(--old); font-weight: 600; }

/* minimal included — plain rows */
[data-variant="c"] .inc-item { background: transparent; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 18px 4px; }
[data-variant="c"] .inc-item:hover { transform: none; }
[data-variant="c"] .inc-check { background: transparent; color: var(--enji); border: 1px solid var(--enji-line); }

/* feature — hairline grid, more air */
[data-variant="c"] .feature-row { background: transparent; border: none; gap: 0; grid-template-columns: repeat(3, 1fr); }
[data-variant="c"] .feature { background: transparent; border-left: 1px solid var(--line); padding: 8px 34px; }
[data-variant="c"] .feature:first-child { border-left: none; padding-left: 0; }

/* flow lighter on C */
[data-variant="c"] .step .st-no { font-family: var(--old); }

[data-variant="c"] .btn { border-radius: 0; letter-spacing: .08em; }
[data-variant="c"] .btn-primary { box-shadow: none; }
[data-variant="c"] .btn-primary:hover { box-shadow: none; }

/* =========================================================
   案 SWITCHER  (floating, top-right)
   ========================================================= */
.variant-switch {
  position: fixed;
  z-index: 200;
  bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(36,28,25,.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 12px 36px rgba(0,0,0,.32);
}
.variant-switch .vs-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: #9A8C7C;
  padding: 0 12px 0 14px;
  text-transform: uppercase;
}
.variant-switch button {
  font-family: var(--gothic);
  font-weight: 700;
  font-size: 13px;
  color: #D8CCBC;
  background: transparent;
  border: none;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
  white-space: nowrap;
}
.variant-switch button small { font-family: var(--mono); font-size: 9.5px; opacity: .7; margin-left: 6px; letter-spacing: .08em; }
.variant-switch button:hover { color: var(--washi); }
.variant-switch button.active { background: var(--enji); color: var(--washi); }

.variant-hint {
  position: fixed;
  bottom: 74px; left: 50%; transform: translateX(-50%) translateY(8px);
  z-index: 200;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--washi);
  background: rgba(36,28,25,.9);
  padding: 7px 14px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  white-space: nowrap;
}
.variant-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 560px) {
  .variant-switch { bottom: 14px; padding: 5px; gap: 2px; }
  .variant-switch .vs-label { display: none; }
  .variant-switch button { padding: 8px 13px; font-size: 12px; }
  .variant-switch button small { display: none; }
}