/* ミライトラボ 夏休みプログラム LP */
@import url('./colors_and_type.css');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--paper);
  letter-spacing: var(--tracking-kids);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; }

.section { padding: 96px 0; position: relative; }
.section-tight { padding: 56px 0; }

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mirait-green-600);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 28px; height: 2px; background: currentColor; border-radius: 2px;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 16px 0 20px;
}
.h-section {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 12px 0 12px;
}
.h-card {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.4;
  margin: 0;
}
.h-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}
.lead {
  font-size: 17px;
  line-height: 1.85;
  color: var(--fg-2);
  max-width: 38em;
}
.small { font-size: 13px; line-height: 1.7; color: var(--fg-3); }
.hand { font-family: var(--font-hand); color: var(--mirait-green-600); }
.marker {
  background: linear-gradient(180deg, transparent 62%, var(--mirait-pink-100) 62%, var(--mirait-pink-100) 92%, transparent 92%);
  padding: 0 4px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: none; cursor: pointer; padding: 16px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: 0.04em;
  transition: transform var(--dur-base) var(--ease-bounce),
              box-shadow var(--dur-base) var(--ease-out-soft),
              background var(--dur-base) var(--ease-out-soft),
              color var(--dur-base) var(--ease-out-soft);
}
.btn:hover { transform: translateY(-2px) rotate(-1deg); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: var(--mirait-green); color: var(--fg-on-green); box-shadow: var(--shadow-sticker); }
.btn-primary:hover { background: var(--mirait-green-600); }
.btn-secondary { background: var(--white); color: var(--fg-1); box-shadow: 0 0 0 1.5px var(--hairline) inset, var(--shadow-xs); }
.btn-secondary:hover { box-shadow: 0 0 0 1.5px var(--mirait-green) inset, var(--shadow-sm); color: var(--mirait-green-600); }
.btn-pink { background: var(--mirait-pink); color: var(--fg-on-pink); box-shadow: var(--shadow-sticker); }
.btn-pink:hover { background: var(--mirait-pink-600); }
.btn-arrow::after { content: '→'; transition: transform var(--dur-base) var(--ease-out-soft); }
.btn-arrow:hover::after { transform: translateX(4px); }
.btn-lg { padding: 20px 36px; font-size: 17px; }

/* Sticker */
.sticker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; background: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sticker);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--fg-1);
  white-space: nowrap;
}
.sticker .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mirait-green);
}
.sticker.is-pink .dot { background: var(--mirait-pink); }
.sticker.is-orange .dot { background: var(--insta-orange); }
.sticker.is-strong { background: var(--mirait-green); color: var(--fg-on-green); }
.sticker.is-strong .dot { background: var(--white); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 245, 239, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(216, 211, 197, 0.5);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; }
.site-header .logo { display: flex; align-items: center; gap: 12px; }
.site-header .logo img {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}
.site-header .logo-text {
  font-family: var(--font-display); font-weight: 900; font-size: 17px; color: var(--fg-1);
  letter-spacing: 0.04em;
}
.site-header nav { display: flex; gap: 28px; align-items: center; }
.site-header nav a {
  font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--fg-2);
  transition: color var(--dur-fast);
}
.site-header nav a:hover { color: var(--mirait-green-600); }
.site-header nav a.nav-external {
  color: var(--mirait-green-600);
  font-weight: 700;
}
.site-header nav a.nav-external .nav-ext-icon {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.92em;
  transform: translateY(-1px);
}
.site-header .header-cta { font-size: 13px; padding: 10px 18px; }

/* Header right cluster (CTA + hamburger) */
.site-header .header-actions { display: flex; align-items: center; gap: 12px; }

/* Hamburger button — only shown at mobile widths */
.menu-toggle {
  display: none;
  background: transparent; border: none; cursor: pointer;
  padding: 8px; width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  transition: background var(--dur-fast);
}
.menu-toggle:hover { background: var(--mirait-green-50); }
.menu-toggle .menu-toggle-bar {
  display: block; width: 22px; height: 2.5px;
  background: var(--fg-1); border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out-soft),
              opacity var(--dur-fast);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

@media (max-width: 800px) {
  .site-header .wrap { position: relative; }
  .menu-toggle { display: flex; }
  .site-header nav {
    /* Collapsible drawer below the header bar (display-based toggle for reliability). */
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(246, 245, 239, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(216, 211, 197, 0.6);
    padding: 8px 24px 16px;
    box-shadow: var(--shadow-md);
    z-index: 60;
  }
  .site-header nav[data-open="true"] {
    display: flex;
    opacity: 1;
  }
  .site-header nav a {
    padding: 14px 8px; font-size: 16px; font-weight: 700; color: var(--fg-1);
    border-bottom: 1px dashed var(--hairline);
  }
  .site-header nav a:last-of-type { border-bottom: none; }
  .site-header .logo-text { font-size: 15px; }
  .site-header .header-cta { padding: 8px 14px; font-size: 12px; }
}


/* Bg utilities */
.bg-paper { background: var(--paper); }
.bg-paper2 { background: var(--paper-2); }
.bg-note { background: var(--note); }
.bg-dots {
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--hairline) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}
.bg-wash {
  background:
    radial-gradient(circle at 88% 12%, var(--insta-orange-bg) 0%, transparent 55%),
    radial-gradient(circle at 8% 88%, var(--mirait-green-100) 0%, transparent 55%),
    var(--paper);
}
.bg-green-soft {
  background: linear-gradient(180deg, var(--mirait-green-50) 0%, var(--paper) 100%);
}

/* Decorative blobs (subtle, behind content) */
.blob {
  position: absolute;
  border-radius: 42% 58% 54% 46% / 46% 42% 58% 54%;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(2px);
  z-index: 0;
}

/* Hero hours emphasis (working-parents) */
.hero-hours {
  display: flex; align-items: center; gap: 18px;
  background: var(--white);
  border: 2px solid var(--mirait-green-200);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin: 0 0 24px;
  box-shadow: var(--shadow-sm);
}
.hero-hours-time {
  display: flex; flex-direction: column; align-items: flex-start;
  border-right: 1.5px dashed var(--hairline);
  padding-right: 18px;
  flex-shrink: 0;
}
.hero-hours-num {
  font-family: var(--font-numeric);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 30px);
  color: var(--mirait-green-600);
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}
.hero-hours-num .sep { margin: 0 2px; opacity: 0.6; }
.hero-hours-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: var(--fg-2);
  letter-spacing: 0.06em; margin-top: 2px;
}
.hero-hours-note {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.65; color: var(--fg-1);
}
.hero-hours-note svg { width: 18px; height: 18px; color: var(--mirait-green-600); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 600px) {
  .hero-hours { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .hero-hours-time { border-right: none; border-bottom: 1.5px dashed var(--hairline); padding-right: 0; padding-bottom: 10px; }
}

/* ===== HERO ===== */
.hero { padding: 56px 0 80px; position: relative; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
  position: relative; z-index: 1;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.28;
  letter-spacing: -0.012em;
  margin: 18px 0 22px;
  color: var(--fg-1);
  text-wrap: pretty;
}
.hero h1 .accent { color: var(--mirait-green-600); }
.hero p.lead { margin: 0 0 8px; }
.hero p.lead strong { color: var(--fg-1); font-weight: 700; }
.hero-badges {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 22px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; background: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--fg-1);
}
.hero-badge .pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--mirait-green-100); color: var(--mirait-green-600); font-weight: 700;
  letter-spacing: 0.06em;
}
.hero-badge.is-strong {
  background: var(--mirait-green); color: var(--fg-on-green);
  box-shadow: var(--shadow-sticker);
}
.hero-badge.is-strong .pill { background: rgba(255,255,255,0.18); color: #fff; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.hero-meta {
  margin-top: 24px;
  font-size: 13px; color: var(--fg-3); line-height: 1.7;
  display: flex; align-items: flex-start; gap: 10px;
}
.hero-meta svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--mirait-green-600); }

.hero-visual {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: visible;
}
.hero-visual .photo-main {
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 30% 30%, var(--mirait-green-100) 0%, transparent 55%),
    radial-gradient(circle at 75% 70%, var(--insta-orange-bg) 0%, transparent 60%),
    linear-gradient(135deg, var(--mirait-green-50) 0%, var(--greige) 100%);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-visual .photo-main::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(84,84,85,0.06) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  pointer-events: none;
}
.photo-ph {
  position: relative; z-index: 1;
  background: rgba(246, 245, 239, 0.92);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  box-shadow: var(--shadow-xs);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  text-align: center;
  max-width: 78%;
}
.photo-ph .ph-icon { color: var(--mirait-green-600); margin-bottom: 6px; }
.photo-ph .ph-brief { font-family: var(--font-body); font-size: 13px; color: var(--fg-1); font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.photo-ph .ph-loc { font-size: 10px; color: var(--fg-3); letter-spacing: 0.1em; margin-top: 6px; text-transform: uppercase; }

.hero-visual .photo-sub {
  position: absolute; bottom: -32px; left: -28px;
  width: 44%; aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, var(--insta-orange-bg) 0%, var(--mirait-green-100) 100%);
  border: 6px solid var(--paper);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
}
.hero-visual .sticker-tag {
  position: absolute; top: -14px; right: -8px;
  background: var(--mirait-pink); color: #fff;
  padding: 12px 18px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sticker);
  font-family: var(--font-hand); font-size: 22px; font-weight: 700;
  transform: rotate(6deg);
  letter-spacing: 0.02em;
}

/* ===== Empathy hook ===== */
.empathy {
  background: var(--mirait-green-50);
  border-top: 1px solid var(--mirait-green-100);
  border-bottom: 1px solid var(--mirait-green-100);
  padding: 36px 0;
}
.empathy .wrap {
  display: flex; align-items: center; gap: 24px;
  text-align: left;
}
.empathy-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.7;
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.empathy-quote .em { color: var(--mirait-green-600); }
.empathy-quote .small { font-size: 14px; color: var(--fg-2); display: block; margin-top: 6px; font-weight: 500; }
.empathy-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  background: var(--white); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--mirait-green-600); box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) {
  .empathy .wrap { gap: 16px; }
  .empathy-icon { display: none; }
}

/* ===== Two-card section: 通常 vs 特別 ===== */
.two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.kind-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 36px 32px 32px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.kind-card.is-regular {
  background: var(--mirait-green-50);
  border: 2px solid var(--mirait-green-200);
}
.kind-card.is-regular .meta-tags li { background: var(--white); }
.kind-card.is-special {
  background: var(--mirait-pink-100);
  border: 2px solid var(--mirait-pink-200);
}
.kind-card .ribbon-strong {
  display: inline-block;
  background: var(--mirait-green); color: var(--fg-on-green);
  font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.16em;
  padding: 6px 14px; border-radius: var(--radius-pill);
  margin-bottom: 14px;
  align-self: flex-start;
}
.kind-card .ribbon-strong-special {
  display: inline-block;
  background: var(--mirait-pink); color: var(--white);
  font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.16em;
  padding: 6px 14px; border-radius: var(--radius-pill);
  margin-bottom: 14px;
  align-self: flex-start;
}
.kind-card .highlight-strip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white);
  border: 1.5px dashed var(--mirait-green-300);
  color: var(--mirait-green-600);
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  padding: 10px 14px; border-radius: var(--radius-md);
  margin-bottom: 16px;
  align-self: flex-start;
  max-width: 100%;
}
.kind-card .highlight-strip.is-special {
  border-color: var(--mirait-pink-200);
  color: var(--mirait-pink-600);
}
.kind-card .highlight-strip svg { flex-shrink: 0; }
.kind-card .ribbon {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.16em;
  color: var(--mirait-green-600);
  background: var(--white);
  padding: 6px 12px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
}
.kind-card.is-special .ribbon {
  color: var(--mirait-pink-600); background: var(--white);
}
.kind-card .num {
  font-family: var(--font-hand);
  font-size: 32px; color: var(--mirait-green-600); line-height: 1;
}
.kind-card.is-special .num { color: var(--mirait-pink-600); }
.kind-card h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 26px; line-height: 1.35; margin: 8px 0 6px;
  color: var(--fg-1);
}
.kind-card .subline {
  font-size: 15px; line-height: 1.7; color: var(--fg-2);
  margin: 0 0 20px;
}
.kind-card ul.bullets {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.kind-card ul.bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.55;
}
.kind-card ul.bullets li .check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mirait-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; margin-top: 2px;
}
.kind-card.is-special ul.bullets li .check { background: var(--mirait-pink); }
.kind-card ul.bullets li.strong { font-weight: 700; color: var(--fg-1); }
.kind-card ul.bullets li.strong .check { background: var(--mirait-green-600); }
.kind-card.is-special ul.bullets li.strong .check { background: var(--mirait-pink-600); }
.kind-card .reassure {
  display: flex; align-items: center; gap: 10px;
  background: var(--mirait-green-50);
  padding: 12px 14px; border-radius: var(--radius-md);
  font-size: 13px; line-height: 1.6; color: var(--fg-1);
  margin-bottom: 16px;
  border: 1px dashed var(--mirait-green-200);
}
.kind-card .reassure svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--mirait-green-600); }
.kind-card .meta-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 12px; color: var(--fg-3);
  margin-bottom: 14px;
}
.kind-card .meta-tags li {
  list-style: none;
  background: var(--paper-2); padding: 4px 10px; border-radius: var(--radius-pill);
}
.kind-card.is-special .meta-tags li { background: var(--white); }
.kind-card .for-who {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--hairline);
  font-size: 13px; line-height: 1.7; color: var(--fg-2);
}
.kind-card .for-who b {
  display: block;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.14em;
  color: var(--mirait-green-600); margin-bottom: 6px;
}
.kind-card.is-special .for-who b { color: var(--mirait-pink-600); }

@media (max-width: 800px) {
  .two-cards { grid-template-columns: 1fr; }
  .kind-card { padding: 28px 24px; }
}

/* ===== Day theme cards ===== */
.day-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.day-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base);
}
.day-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.day-card .day-head {
  padding: 28px 26px 22px;
  position: relative;
  color: var(--fg-1);
}
.day-card .day-head .day-en {
  display: inline-block;
  font-family: var(--font-ui); font-weight: 700; font-size: 10.5px; letter-spacing: 0.22em;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.day-card.is-wed .day-en { color: var(--mirait-green-600); }
.day-card.is-thu .day-en { color: #B36428; }
.day-card.is-fri .day-en { color: var(--mirait-pink-600); }
.day-card .day-head .day-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white);
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-xs);
}
.day-card .day-head h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 28px; line-height: 1.3; margin: 0;
  letter-spacing: -0.005em;
}
.day-card .day-head h3 .theme {
  font-size: 36px; display: block; margin-top: 2px;
}
.day-card .day-head .tagline {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; line-height: 1.6;
  margin: 10px 0 0; color: var(--fg-1);
}
.day-card .day-body { padding: 0 26px 28px; flex: 1; display: flex; flex-direction: column; }
.day-card .day-desc { font-size: 14px; line-height: 1.85; color: var(--fg-2); margin: 16px 0 18px; }
.day-card .activities-label {
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.1em;
  color: var(--fg-2); margin: 20px 0 10px;
}
.day-card .activities {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.day-card .activities li {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper-2);
  padding: 10px 14px; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--fg-1);
}
.day-card .activities li .num {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-hand); font-size: 16px; color: var(--mirait-green-600);
}
.day-card .staff {
  margin-top: auto;
  padding-top: 16px; border-top: 1px dashed var(--hairline);
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
}
.day-card .staff .avatar.is-tbd {
  background: var(--paper-2);
  color: var(--fg-3);
  border: 1.5px dashed var(--hairline);
  font-weight: 700;
}
.day-card .staff .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mirait-green-100), var(--insta-orange-bg));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; color: var(--mirait-green-600);
  font-size: 14px;
}
.day-card .staff .role { color: var(--fg-3); font-size: 11px; letter-spacing: 0.06em; }
.day-card .staff .name { font-weight: 700; color: var(--fg-1); }

.day-card.is-wed .day-head { background: var(--mirait-green-50); }
.day-card.is-wed .day-pill { color: var(--mirait-green-600); }
.day-card.is-wed .activities li .num { color: var(--mirait-green-600); }
.day-card.is-thu .day-head { background: var(--insta-orange-bg); }
.day-card.is-thu .day-pill { color: #B36428; }
.day-card.is-thu .activities li .num { color: #B36428; }
.day-card.is-fri .day-head { background: var(--mirait-pink-100); }
.day-card.is-fri .day-pill { color: var(--mirait-pink-600); }
.day-card.is-fri .activities li .num { color: var(--mirait-pink-600); }

.day-foot-note {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--fg-1);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 16px 24px;
  box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; gap: 10px;
}
.day-foot-wrap { display: flex; justify-content: center; }
.day-aside {
  font-size: 12px; color: var(--fg-3); text-align: center; margin-top: 14px;
}

@media (max-width: 900px) {
  .day-cards { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== Pricing ===== */
.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.price-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 36px 28px 28px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 12px;
  border: 2px solid transparent;
  transition: transform var(--dur-base) var(--ease-out-soft);
}
.price-card:hover { transform: translateY(-4px); }
.price-card.is-rec {
  border-color: var(--mirait-green);
  box-shadow: var(--shadow-md);
}
.price-card .rec-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--mirait-green); color: var(--fg-on-green);
  padding: 8px 18px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em;
  box-shadow: var(--shadow-sticker);
  white-space: nowrap;
}
.price-card .price-day {
  font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--fg-1);
  display: flex; align-items: baseline; gap: 6px;
}
.price-card .price-day .num {
  font-family: var(--font-numeric); font-size: 44px; color: var(--mirait-green-600);
  letter-spacing: -0.02em; line-height: 1;
}
.price-card.is-rec .price-day .num { color: var(--mirait-green); }
.price-card .price-amount {
  font-family: var(--font-numeric); font-weight: 800;
  font-size: 32px; color: var(--fg-1); margin: 0;
  letter-spacing: -0.01em;
}
.price-card .price-amount .yen { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.price-card .price-amount .tax { font-size: 13px; color: var(--fg-3); font-weight: 500; margin-left: 4px; }
.price-card .price-desc {
  font-size: 14px; line-height: 1.85; color: var(--fg-2); margin: 0;
}
.price-card .price-desc strong { color: var(--fg-1); font-weight: 700; }
.price-card .price-desc-sub {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  background: var(--mirait-green-50, #e4f2ed);
  border-radius: 999px;
  color: var(--mirait-green-600, #2e7c5d);
  font-size: 12.5px;
  font-weight: 700;
}

.price-includes-bar {
  margin-top: 32px;
  background: var(--mirait-green-50);
  border: 1.5px solid var(--mirait-green-200);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
}
.price-includes-bar h4 {
  font-family: var(--font-display); font-weight: 900; font-size: 16px;
  color: var(--mirait-green-600); margin: 0 0 16px;
  letter-spacing: 0.02em;
}
.price-includes-bar .incl-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 20px;
}
.price-includes-bar .incl-grid li {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-xs);
}
.price-includes-bar .incl-grid .icon {
  font-size: 22px; line-height: 1; flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mirait-green-50);
  border-radius: 50%;
}
.price-includes-bar .incl-grid b {
  display: block;
  font-family: var(--font-display); font-weight: 800; font-size: 13.5px;
  color: var(--fg-1); margin-bottom: 2px;
}
.price-includes-bar .incl-grid span {
  font-size: 11.5px; color: var(--fg-3); line-height: 1.5;
}
@media (max-width: 600px) {
  .price-includes-bar { padding: 18px 16px; }
}

.price-includes {
  margin-top: 32px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  border: 1px dashed var(--mirait-green-200);
}
.price-includes b {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.12em;
  color: var(--mirait-green-600); display: block; margin-bottom: 12px;
}
.price-includes ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px;
  font-size: 14px; line-height: 1.7;
}
.price-includes ul li { position: relative; padding-left: 20px; }
.price-includes ul li::before {
  content: ''; position: absolute; left: 4px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--mirait-green-200);
}
.price-includes ul li.warn::before { background: var(--insta-orange); }

@media (max-width: 900px) {
  .price-cards { grid-template-columns: 1fr; gap: 28px; }
  .price-includes ul { grid-template-columns: 1fr; }
}

/* ===== Timeline ===== */
.timeline-section { background: var(--bg-dots); }
.timeline-wrap { position: relative; max-width: 720px; margin: 0 auto; }
.timeline-badge {
  display: flex; justify-content: center; margin-bottom: 32px;
}
.timeline-badge .sticker { font-size: 14px; padding: 12px 20px; }
.timeline {
  position: relative;
  padding-left: 140px;
}
.timeline::before {
  content: '';
  position: absolute; left: 108px; top: 12px; bottom: 12px;
  width: 3px;
  background: linear-gradient(180deg, var(--mirait-green-200) 0%, var(--mirait-pink-200) 100%);
  border-radius: 3px;
}
.timeline-row {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  margin-bottom: 28px;
  padding: 4px 0;
}
.timeline-row:last-child { margin-bottom: 0; }
.timeline-row .time {
  position: absolute; left: -140px; top: 8px;
  width: 116px;
  font-family: var(--font-numeric); font-weight: 700; font-size: 14px; color: var(--fg-1);
  text-align: right;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.timeline-row .dot {
  position: absolute; left: -39px; top: 14px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--mirait-green);
  box-shadow: var(--shadow-xs);
}
.timeline-row.is-highlight .dot { background: var(--mirait-green); border-color: var(--mirait-green); }
.timeline-row.is-pink .dot { border-color: var(--mirait-pink); }
.timeline-row .card-mini {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  box-shadow: var(--shadow-xs);
}
.timeline-row.is-highlight .card-mini {
  background: var(--mirait-green-50);
  border: 1px solid var(--mirait-green-200);
}
.timeline-row.is-pink .card-mini {
  background: var(--mirait-pink-100);
  border: 1px solid var(--mirait-pink-200);
}
.timeline-row.is-snack .dot { background: var(--insta-orange); border-color: var(--insta-orange); }
.timeline-row.is-snack .card-mini {
  background: var(--insta-orange-bg);
  border: 1px solid #F2D9B8;
}
.timeline-row .snack-ico { font-size: 18px; margin-right: 4px; }
.timeline-foot-note {
  margin-top: 28px; padding: 14px 18px;
  background: var(--insta-orange-bg);
  border-radius: var(--radius-md);
  font-size: 13px; color: var(--fg-1); line-height: 1.7;
}

/* ===== Hero rewrite (B-1〜B-5) ===== */
.eyebrow-mini {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--mirait-green-600);
  background: var(--mirait-green-50);
  padding: 5px 12px; border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.hl-strong {
  background: var(--mirait-green-100);
  color: var(--mirait-green-600);
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 900;
  box-shadow: 0 2px 0 var(--mirait-green-200);
}
.hl-pill {
  display: inline-block;
  background: var(--mirait-green);
  color: var(--fg-on-green);
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  font-weight: 900;
}
.hero h1 { line-height: 1.35; }
.hero-sub {
  font-size: 15px; line-height: 1.85; color: var(--fg-1);
  margin: 18px 0 24px; max-width: 540px;
}
.hero-three {
  display: grid; grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: 12px; margin: 0 0 28px;
}
.h3-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  min-height: 96px;
}
.h3-card.h3-hours { border: 1.5px solid var(--hairline); background: var(--white); }
.h3-card.h3-day { border: 1.5px solid var(--hairline); background: var(--white); }
.h3-card.h3-themes { border: 1.5px solid var(--hairline); background: var(--white); }
.h3-num {
  font-family: var(--font-numeric); font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--mirait-green-600); letter-spacing: -0.01em;
  white-space: nowrap; line-height: 1.05;
}
.h3-num .sep { margin: 0 1px; opacity: 0.6; }
.h3-big {
  font-family: var(--font-numeric); font-weight: 900;
  font-size: clamp(28px, 3.6vw, 38px);
  color: var(--mirait-pink-600); line-height: 1;
}
.h3-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: var(--fg-2);
  letter-spacing: 0.04em; margin-top: 6px;
}
.h3-themes-row { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.th-pill {
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; padding: 4px 9px; border-radius: var(--radius-pill);
  color: #fff;
}
.th-pill.is-kotoba { background: var(--mirait-green); }
.th-pill.is-jikken { background: var(--insta-orange); }
.th-pill.is-art { background: var(--mirait-pink); }
@media (max-width: 700px) {
  .hero-three { grid-template-columns: 1fr 1fr; }
  .h3-card.h3-themes { grid-column: span 2; }
}

/* Theme stack on hero right */
.theme-stack { display: flex; flex-direction: column; gap: 14px; }
.theme-row {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
  border-left: 6px solid var(--mirait-green);
}
.theme-row.is-wed { border-left-color: var(--mirait-green); }
.theme-row.is-thu { border-left-color: var(--insta-orange); }
.theme-row.is-fri { border-left-color: var(--mirait-pink); }
.tr-day {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; min-width: 44px;
}
.tr-day .jp {
  font-family: var(--font-display); font-weight: 900;
  font-size: 26px; color: var(--fg-1); line-height: 1;
}
.tr-day .en {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; color: var(--fg-3); letter-spacing: 0.12em; margin-top: 2px;
}
.tr-body { flex: 1; }
.tr-name {
  font-family: var(--font-display); font-weight: 900;
  font-size: 19px; color: var(--fg-1); margin-bottom: 2px;
}
.tr-desc { font-size: 12.5px; color: var(--fg-2); line-height: 1.6; }
.tr-icon { width: 26px; height: 26px; color: var(--fg-3); flex-shrink: 0; }
.theme-row.is-wed .tr-icon { color: var(--mirait-green-600); }
.theme-row.is-thu .tr-icon { color: var(--insta-orange); }
.theme-row.is-fri .tr-icon { color: var(--mirait-pink-600); }

/* Empathy banner under hero */
.empathy-banner {
  background: var(--mirait-green-50);
  border-top: 1px solid var(--mirait-green-100);
  border-bottom: 1px solid var(--mirait-green-100);
  padding: 28px 0 24px;
}
.emb-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--mirait-green-200);
  margin-bottom: 18px;
}
.emb-card svg {
  width: 28px; height: 28px; color: var(--mirait-green-600); flex-shrink: 0; margin-top: 4px;
}
.emb-card p {
  font-size: 16px; line-height: 1.75; color: var(--fg-1); margin: 0;
}
.emb-card b { color: var(--mirait-green-600); font-weight: 800; }
.emb-card u { text-decoration-color: var(--mirait-green-300); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.emb-card span { font-size: 14px; color: var(--fg-2); display: inline-block; margin-top: 4px; }

.overview-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--hairline);
  border-radius: var(--radius-md); overflow: hidden;
  margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--hairline);
}
.overview-strip li {
  background: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 8px; text-align: center;
}
.overview-strip .k {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; color: var(--fg-3); letter-spacing: 0.1em; margin-bottom: 4px;
}
.overview-strip .v {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; color: var(--fg-1);
}
@media (max-width: 600px) {
  .overview-strip { grid-template-columns: repeat(2, 1fr); }
  .emb-card { padding: 14px 16px; gap: 12px; }
  .emb-card svg { width: 22px; height: 22px; }
  .emb-card p { font-size: 14px; }
}

/* Combo example labels — label always on its own line (consistent layout
   regardless of how many chips fit in the next row). */
.combo-example { flex-direction: row; align-items: center; flex-wrap: wrap; }
.combo-example + .combo-example { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--hairline); }
.combo-label {
  flex-basis: 100%;
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; color: var(--mirait-green-600);
  background: var(--mirait-green-50);
  padding: 4px 10px; border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  align-self: flex-start;
  margin-bottom: 4px;
}

/* Summary list sub note */
.summary-list dd .sub {
  display: block; font-size: 12px; color: var(--fg-3); margin-top: 4px; line-height: 1.6;
}
.timeline-row .title {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--fg-1); margin: 0 0 2px;
}
.timeline-row .desc {
  font-size: 13px; color: var(--fg-2); margin: 0; line-height: 1.6;
}
@media (max-width: 600px) {
  .timeline { padding-left: 110px; }
  .timeline::before { left: 84px; }
  .timeline-row .time { left: -110px; width: 96px; font-size: 12px; }
  .timeline-row .dot { left: -38px; width: 14px; height: 14px; }
}

/* ===== Choose steps (before calendar) ===== */
.choose-steps {
  background: var(--mirait-green-50);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  margin-bottom: 28px;
}
.choose-steps .steps-title {
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  color: var(--mirait-green-600); margin: 0 0 16px;
}
.choose-steps .steps-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.choose-steps .step {
  background: var(--white); border-radius: var(--radius-md);
  padding: 16px 18px;
  border: 1.5px solid var(--mirait-green-200);
}
.choose-steps .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mirait-green); color: var(--fg-on-green);
  font-family: var(--font-numeric); font-weight: 800; font-size: 15px;
  margin-bottom: 8px;
}
.choose-steps .step b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 15px; color: var(--fg-1); margin-bottom: 4px;
}
.choose-steps .step-desc { font-size: 12.5px; color: var(--fg-2); line-height: 1.6; }
@media (max-width: 800px) { .choose-steps .steps-grid { grid-template-columns: 1fr; } }

/* ===== Extend (延長預かり) diagram ===== */
.special-rules .icon-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.special-rules .icon-list li {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--white); border-radius: var(--radius-md);
  padding: 10px 14px;
}
.special-rules .icon-list .ico {
  font-size: 20px; flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F1EDFA; border-radius: 50%;
}
.special-rules .icon-list b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--fg-1); }
.special-rules .icon-list span { font-size: 12px; color: var(--fg-3); }

.extend-diagram {
  background: var(--white); border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
}
.ext-row { display: flex; align-items: center; gap: 8px; }
.ext-time { font-family: var(--font-numeric); font-weight: 700; font-size: 12px; color: var(--fg-3); }
.ext-bar { flex: 1; display: grid; grid-template-columns: 1fr 2.5fr 1fr; gap: 4px; }
.ext-seg { padding: 10px 6px; text-align: center; border-radius: 6px; font-size: 11px; font-weight: 700; }
.ext-seg.ext-extend { background: #F1EDFA; color: #6B5BD9; }
.ext-seg.ext-main { background: #E5DEF8; color: #4A3DA8; }
.ext-markers { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--fg-3); font-family: var(--font-numeric); padding: 0 36px; }
.extend-fee { background: #F1EDFA; border-radius: var(--radius-md); padding: 14px 16px; }
.extend-fee p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--fg-1); }
.extend-fee p b { font-size: 15px; color: #4A3DA8; }
.extend-fee p span { font-size: 12px; color: var(--fg-2); }
.extend-fee .ext-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #C9BFEB; font-size: 12px; }

/* ===== Special card chips ===== */
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); color: #4A3DA8;
  border: 1.5px solid #D7CFF0;
  padding: 6px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
}
.sp-chip svg { width: 13px; height: 13px; }

/* ===== Calendar 02 (subdue 月・火) ===== */
.day-cell.is-empty {
  opacity: 0.5;
  background: transparent !important;
  border: 1.5px dashed var(--hairline) !important;
}
.day-cell.is-empty .date { font-size: 16px !important; color: var(--fg-3) !important; }
.day-cell.is-empty .dow { color: var(--fg-3) !important; }

/* ===== Reassure banner (final CTA prelude) ===== */
.final-reassure {
  display: flex; justify-content: center; gap: 36px;
  background: var(--mirait-green-50);
  border-radius: var(--radius-pill);
  padding: 18px 28px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.final-reassure span {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  color: var(--mirait-green-600);
  display: inline-flex; align-items: center; gap: 8px;
}
.final-reassure span::before { content: "✓"; color: var(--mirait-green); font-weight: 900; }

/* ===== Decision cards (intro to gaiyou) ===== */
.decision-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-bottom: 28px;
}
.decision-card {
  background: var(--white);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  text-align: center;
}
.decision-card .ico {
  font-size: 28px; display: block; margin-bottom: 6px;
}
.decision-card b {
  font-family: var(--font-display); font-weight: 900; font-size: 16px;
  color: var(--fg-1); display: block;
}
.decision-card span {
  font-size: 12px; color: var(--fg-3);
}
@media (max-width: 700px) { .decision-cards { grid-template-columns: 1fr; } }

/* ===== FAQ category ===== */
.faq-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.faq-cat h3 {
  font-family: var(--font-display); font-weight: 900; font-size: 15px;
  color: var(--mirait-green-600); margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--mirait-green-200);
  letter-spacing: 0.04em;
}
@media (max-width: 800px) { .faq-cats { grid-template-columns: 1fr; gap: 20px; } }

/* ===== map iframe ===== */
.map-frame {
  width: 100%; height: 360px;
  border: 1.5px solid var(--hairline); border-radius: var(--radius-md);
  margin-top: 18px;
}

.cal-combo {
  margin-top: 28px;
  background: var(--white);
  border: 2px dashed var(--mirait-green-200);
  border-radius: var(--radius-xl);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
}
.cal-combo-head {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px;
}
.cal-combo-head svg { width: 22px; height: 22px; color: var(--mirait-green-600); flex-shrink: 0; margin-top: 4px; }
.cal-combo-head b {
  display: block;
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  color: var(--fg-1); margin-bottom: 4px;
}
.cal-combo-head p {
  font-size: 13px; color: var(--fg-2); margin: 0; line-height: 1.7;
}
.combo-example {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}
.combo-example .chip {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: #fff;
  white-space: nowrap;
}
.combo-example .chip.is-kotoba { background: var(--mirait-green); }
.combo-example .chip.is-jikken { background: var(--insta-orange); }
.combo-example .chip.is-art { background: var(--mirait-pink); }
.combo-example .plus {
  font-family: var(--font-display); font-weight: 900; font-size: 16px;
  color: var(--fg-3);
}
.combo-example .combo-eq {
  font-family: var(--font-display); font-weight: 900; font-size: 14px;
  color: var(--mirait-green-600);
  margin-left: 6px;
  background: var(--mirait-green-50);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
}
@media (max-width: 600px) {
  .combo-example { gap: 6px; }
  .combo-example .chip { font-size: 12px; padding: 6px 12px; }
  .combo-example .combo-eq { width: 100%; text-align: center; margin-left: 0; margin-top: 4px; }
}

/* ===== Calendar ===== */
.calendar { background: var(--paper-2); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.cal-legend .key {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--white); border-radius: var(--radius-pill);
  font-size: 12px; font-family: var(--font-display); font-weight: 700;
  box-shadow: var(--shadow-xs);
}
.cal-legend .swatch { width: 14px; height: 14px; border-radius: 4px; }
.cal-legend .swatch.kotoba { background: var(--mirait-green); }
.cal-legend .swatch.jikken { background: var(--insta-orange); }
.cal-legend .swatch.art { background: var(--mirait-pink); }
.cal-legend .swatch.special { background: #6B5BD9; }

.weeks { display: flex; flex-direction: column; gap: 24px; }
.week {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 22px 24px 24px;
  box-shadow: var(--shadow-sm);
}
.week-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px;
  font-family: var(--font-display);
}
.week-head .label {
  font-weight: 900; font-size: 20px; color: var(--fg-1);
  letter-spacing: -0.005em;
}
.week-head .label .month { color: var(--mirait-green-600); }
.week-head .note { font-size: 12px; color: var(--fg-3); }
.week-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.day-cell {
  background: var(--paper);
  border-radius: var(--radius-md);
  padding: 14px 10px 12px;
  text-align: center;
  min-height: 102px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  border: 2px solid transparent;
}
.day-cell .dow {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.day-cell .date {
  font-family: var(--font-numeric); font-weight: 800; font-size: 22px;
  color: var(--fg-1); line-height: 1;
}
.day-cell .theme {
  margin-top: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}
.day-cell.is-empty {
  background: transparent;
  border: 1px dashed var(--hairline);
}
.day-cell.is-empty .date { color: var(--fg-4, #D1C6B8); }
.day-cell.is-empty .dow { color: var(--ink-4); }
.day-cell.is-kotoba { border-color: var(--mirait-green-200); background: var(--mirait-green-50); }
.day-cell.is-kotoba .theme { background: var(--mirait-green); color: #fff; }
.day-cell.is-jikken { border-color: rgba(230,138,63,0.4); background: var(--insta-orange-bg); }
.day-cell.is-jikken .theme { background: var(--insta-orange); color: #fff; }
.day-cell.is-art { border-color: var(--mirait-pink-200); background: var(--mirait-pink-100); }
.day-cell.is-art .theme { background: var(--mirait-pink); color: #fff; }
.day-cell.is-special {
  border-color: rgba(107,91,217,0.4);
  background: #EFEDFA;
}
.day-cell.is-special .theme {
  background: #6B5BD9; color: #fff; font-size: 11px; padding: 4px 8px;
  text-wrap: balance; line-height: 1.2;
}
.day-cell.is-special .day-num { font-size: 10px; color: #6B5BD9; font-weight: 700; margin-top: 4px; }

.cal-note {
  margin-top: 22px;
  background: var(--mirait-green-50);
  border: 1px dashed var(--mirait-green-200);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 14px; line-height: 1.8;
  color: var(--fg-1);
  display: flex; gap: 12px; align-items: flex-start;
}
.cal-note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--mirait-green-600); margin-top: 4px; }
.cal-note ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--fg-2); }
.cal-note ul li { margin-bottom: 2px; }

@media (max-width: 700px) {
  .week-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .day-cell { padding: 10px 4px 10px; min-height: 92px; }
  .day-cell .date { font-size: 18px; }
  .day-cell .theme { font-size: 11px; padding: 3px 6px; }
}

/* ===== Special programs ===== */
.special { background: linear-gradient(180deg, #EFEDFA 0%, var(--paper) 100%); }
.special-rules {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 24px 28px;
  border: 2px dashed #C8C0E8;
  margin-bottom: 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px;
}
.special-rules .col h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: #4D3FB6; margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.special-rules .col h4 .badge {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.1em;
  background: #6B5BD9; color: #fff; padding: 3px 8px; border-radius: var(--radius-pill);
}
.special-rules ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 1.75; }
.special-rules ul li { display: block; padding-left: 14px; position: relative; margin-bottom: 8px; }
.special-rules ul li::before { content: '・'; color: #6B5BD9; position: absolute; left: 0; top: 0; }
.special-rules ul li b { font-family: var(--font-numeric); font-weight: 700; }
.special-rules ul li.strong { font-weight: 700; color: var(--fg-1); }

@media (max-width: 700px) { .special-rules { grid-template-columns: 1fr; } }

.special-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.special-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 0;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.special-card .head {
  padding: 28px 30px 22px;
  background: linear-gradient(135deg, #EFEDFA, #FBF5FA);
  position: relative;
}
.special-card .num {
  font-family: var(--font-hand);
  font-size: 28px; color: #6B5BD9; line-height: 1; margin-bottom: 4px;
}
.special-card h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 26px; line-height: 1.4;
  margin: 8px 0 6px;
  color: var(--fg-1);
  text-wrap: pretty;
}
.special-card .head .label {
  font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.14em;
  color: #6B5BD9;
}
.special-card .body { padding: 24px 30px 28px; flex: 1; display: flex; flex-direction: column; }
.special-card .body p {
  font-size: 14px; line-height: 1.85; color: var(--fg-2); margin: 0 0 14px;
}
.special-card .info-list {
  list-style: none; margin: auto 0 0; padding: 18px 20px 0;
  border-top: 1px dashed var(--hairline);
  display: grid; grid-template-columns: auto 1fr; gap: 8px 16px;
  font-size: 13px;
}
.special-card .info-list dt {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.1em;
  color: var(--fg-3); padding-top: 3px;
}
.special-card .info-list dd {
  margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--fg-1);
}
.special-card .info-list dd .price { color: #6B5BD9; }

@media (max-width: 800px) { .special-cards { grid-template-columns: 1fr; } }

/* ===== Comparison table ===== */
.compare-wrap { max-width: 920px; margin: 0 auto; }
.compare {
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-xl);
  border-collapse: separate; border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.compare { table-layout: fixed; }
.compare colgroup col.col-label { width: 72px; }
.compare colgroup col.col-kind { width: calc((100% - 72px) / 2); }
.compare th, .compare td {
  text-align: left;
  padding: 16px 20px;
  font-size: 14px;
  vertical-align: top;
  line-height: 1.65;
  border-bottom: 1px solid var(--paper-2);
}
.compare tr:last-child th, .compare tr:last-child td { border-bottom: none; }
.compare thead th {
  background: var(--paper-2);
  font-family: var(--font-display); font-weight: 900; font-size: 15px;
  color: var(--fg-1);
}
.compare thead th.kind { color: var(--mirait-green-600); }
.compare thead th.kind-special { color: var(--mirait-pink-600); }
.compare tbody th {
  font-family: var(--font-ui); font-weight: 700;
  color: var(--fg-3); letter-spacing: 0.06em;
  font-size: 12px; width: 110px;
  background: var(--paper);
}
.compare td.kind { background: var(--mirait-green-50); }
.compare td.kind-special { background: var(--mirait-pink-100); }

@media (max-width: 700px) {
  .compare th, .compare td { padding: 10px 8px; font-size: 12.5px; line-height: 1.55; }
  .compare tbody th { font-size: 11px; padding-left: 10px; padding-right: 8px; }
  /* Compact label column on mobile so kind cells get more room. */
  .compare colgroup col.col-label { width: 56px; }
  .compare colgroup col.col-kind { width: calc((100% - 56px) / 2); }
}

/* Compare-table responsive switching:
   - Mobile: <br>s show, .sep spans hide (line-break layout)
   - Desktop: <br>s hide, .sep spans show (inline with separator chars)
   This keeps readability on both viewports without duplicating markup. */
.compare .sep { display: inline; color: var(--ink-3); }
@media (max-width: 699px) {
  .compare .sep { display: none; }
}
@media (min-width: 700px) {
  .compare td br,
  .compare th br { display: none; }
}

/* ===== Accessibility — keyboard focus ===== */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--mirait-green);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible {
  outline-offset: 4px;
}
.faq-item summary:focus-visible {
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
.site-header nav a:focus-visible {
  outline-offset: 6px;
}

/* ===== Mobile collapsible sections =====
   Used to fold 1日の流れ / 日程 / 特別企画①② on small viewports
   so users can tap to expand. Desktop forces them open via pointer-events. */
.m-collapse {
  /* details element default has subtle margin */
}
.m-collapse > summary {
  list-style: none;
  cursor: pointer;
  display: block;
}
.m-collapse > summary::-webkit-details-marker { display: none; }
.m-collapse-icon { display: none; }

/* special-card now nests <details> inside <article>.
   On desktop, the original .head + .body styles still apply through .summary > .head. */
.special-card > .m-collapse > summary > .head { padding: 28px 30px 22px; }

@media (max-width: 800px) {
  /* Make the entire summary look like a tappable card */
  .m-collapse > summary {
    position: relative;
    padding: 20px 60px 20px 20px;
    background: var(--white);
    border: 1.5px solid var(--mirait-green-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: background var(--dur-fast), border-color var(--dur-fast);
  }
  .m-collapse[open] > summary {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 1px dashed var(--mirait-green-200);
  }
  .m-collapse > summary:active {
    background: var(--mirait-green-50);
  }
  /* Hint text under the heading */
  .m-collapse > summary::after {
    content: "タップで開く";
    display: block;
    font-family: var(--font-display);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--mirait-green-600);
    margin-top: 8px;
  }
  .m-collapse[open] > summary::after { content: "タップで閉じる"; }

  .m-collapse-icon {
    display: inline-flex;
    position: absolute;
    right: 14px; top: 50%;
    margin-top: -22px;          /* visually center; counters the after text */
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: var(--mirait-green);
    color: var(--paper);
    border: none;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 26px; font-weight: 900;
    transition: transform var(--dur-base) var(--ease-out-soft);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
  }
  .m-collapse[open] .m-collapse-icon {
    transform: rotate(45deg);
  }
  /* Pink variant for the special-card */
  .special-card > .m-collapse > summary {
    border-color: var(--mirait-pink-200);
  }
  .special-card > .m-collapse[open] > summary {
    border-bottom-color: var(--mirait-pink-200);
  }
  .special-card .m-collapse-icon {
    background: var(--mirait-pink);
    color: #fff;
  }
  .special-card > .m-collapse > summary::after { color: var(--mirait-pink-600); }
}

@media (min-width: 801px) {
  /* Desktop: lock details open and prevent toggle interaction */
  .m-collapse > summary {
    pointer-events: none;
    cursor: default;
  }
}

/* Skip link — visually hidden until keyboard-focused, lets screen-reader
   users jump past the sticky header navigation. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--mirait-green);
  color: var(--fg-on-green);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top 120ms var(--ease-out-soft);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
}

/* ===== FAQ ===== */
.faq { background: var(--paper); }
.faq-list {
  max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}
.faq-item {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--dur-base);
}
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex; align-items: flex-start; gap: 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--fg-1);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .q {
  flex-shrink: 0;
  font-family: var(--font-display); font-weight: 900; color: var(--mirait-green-600);
  font-size: 18px;
}
.faq-item summary .text { flex: 1; padding-right: 36px; }
.faq-item summary .toggle {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%; background: var(--mirait-green-50);
  color: var(--mirait-green-600);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px;
  transition: transform var(--dur-base) var(--ease-out-soft);
}
.faq-item[open] summary .toggle { transform: translateY(-50%) rotate(45deg); }
.faq-item .answer {
  padding: 0 22px 20px 60px;
  font-size: 14px; line-height: 1.85; color: var(--fg-2);
}

/* ===== 実施概要 + map ===== */
.summary-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;
}
.summary-list {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
}
.summary-list dl {
  margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 12px 20px;
  font-size: 14px;
}
.summary-list dt {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em;
  color: var(--fg-3); padding-top: 3px;
}
.summary-list dd { margin: 0; line-height: 1.7; color: var(--fg-1); }
.summary-list dd a { color: var(--mirait-green-600); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.summary-list .row-divide { border-top: 1px dashed var(--hairline); padding-top: 12px; margin-top: 4px; grid-column: 1/-1; padding-left: 0; }

.map-wrap {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 8px;
  box-shadow: var(--shadow-sm);
}
.map-wrap iframe {
  display: block; width: 100%; height: 360px;
  border: 0;
  border-radius: var(--radius-lg);
}
.map-wrap .map-cap {
  font-size: 12px; color: var(--fg-3); padding: 12px 14px 6px;
  display: flex; justify-content: space-between; align-items: center;
}

@media (max-width: 900px) {
  .summary-wrap { grid-template-columns: 1fr; }
  .summary-list dl { grid-template-columns: 90px 1fr; }
}

/* ===== Final CTA ===== */
.final-cta {
  background:
    radial-gradient(circle at 80% 20%, var(--mirait-green-100) 0%, transparent 60%),
    radial-gradient(circle at 20% 80%, var(--mirait-pink-100) 0%, transparent 60%),
    var(--mirait-green-50);
  text-align: center;
  padding: 96px 0 96px;
  position: relative; overflow: hidden;
}
.final-cta h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(32px, 4.5vw, 52px); line-height: 1.3;
  margin: 12px 0 22px;
  color: var(--fg-1);
  text-wrap: pretty;
}
.final-cta p { color: var(--fg-2); font-size: 16px; line-height: 1.85; max-width: 30em; margin: 0 auto 28px; }

/* ===== Footer ===== */
.site-footer {
  background: var(--paper-2);
  padding: 56px 0 36px;
  border-top: 1px solid var(--hairline);
}
.site-footer .wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
.site-footer .brand { display: flex; flex-direction: column; gap: 12px; max-width: 28em; }
.site-footer .footer-logo { display: flex; align-items: center; gap: 12px; }
.site-footer .footer-logo img { height: 32px; width: auto; }
.site-footer .footer-logo-text { font-family: var(--font-display); font-weight: 900; font-size: 17px; color: var(--fg-1); letter-spacing: 0.04em; }
.site-footer .brand img { height: 28px; width: auto; max-width: 220px; }
.site-footer .brand p { font-size: 13px; color: var(--fg-2); margin: 0; line-height: 1.7; }
.site-footer .links { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.site-footer .links b { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-3); margin-bottom: 4px; }
.site-footer .links a { color: var(--fg-2); }
.site-footer .copy { margin-top: 32px; font-size: 11px; color: var(--fg-3); letter-spacing: 0.06em; text-align: center; padding-top: 24px; border-top: 1px solid var(--hairline); }

@media (max-width: 700px) {
  .section { padding: 64px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual { aspect-ratio: 4/4; max-width: 360px; margin: 0 auto; }
  .summary-wrap { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr; }
}

/* Mobile-specific clamps for kind cards */
@media (max-width: 600px) {
  /* Tighter padding + fluid h3 so "ひとつのテーマに集中して取り組む"
     (16 JP chars) fits on a single line before the explicit <br>. */
  .kind-card { padding: 24px 20px; }
  .kind-card h3 {
    font-size: clamp(16px, 4.4vw, 22px);
    letter-spacing: -0.01em;
  }
  .kind-card .subline { font-size: 14px; margin-bottom: 16px; }
  .day-card .day-head h3 .theme { font-size: 30px; }
}

/* Tablet-to-narrow-desktop range (801–1099px): cards become 2-column at
   801px but the column width is too narrow for the 16-char h3 line at
   the default 26px size. Scale the h3 down fluidly so the explicit <br>
   yields a clean 2-line layout in this range. */
@media (min-width: 801px) and (max-width: 1099px) {
  .kind-card h3 {
    font-size: clamp(18px, 2.2vw, 24px);
    letter-spacing: -0.01em;
  }
}

/* ===== Inline SVG icons (Lucide replacement) =====
   Default 1em sizing lets icons scale with surrounding text.
   Existing component CSS rules (e.g. .hero-meta svg, .sp-chip svg)
   override these when a specific size is needed. */
.icon {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 18px; height: 18px; }

/* Theme-row icons keep their explicit 26px size via .tr-icon CSS. */

/* ===== Post-Phase-2 fixes (visual regression from user QA) ===== */

/* Hero h1: keep "「1日から参加OK」の" on one line — including mobile.
   The h1 font scales down on narrow viewports to keep the phrase fitting. */
.hero h1 .title-line {
  display: inline-block;
  white-space: nowrap;
}
.hero h1 {
  font-size: clamp(28px, 5.2vw, 60px);
}
@media (max-width: 360px) {
  /* Extreme widths: shrink further and allow wrap as last resort */
  .hero h1 { font-size: 24px; }
  .hero h1 .title-line { white-space: normal; }
}

/* "Price includes" cards: small eyebrow label above bold main text
   (used in cards #1 お預かり / #4 少人数制 to prevent awkward wrapping). */
.price-includes-bar .incl-grid .incl-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--mirait-green-600);
  margin-bottom: 2px;
}

/* Day-card staff: lock role section to 2 lines so the dashed divider
   aligns across all 3 cards even when 木曜 has a longer "調整中" note. */
.day-card .staff .role {
  min-height: 3.2em;
  line-height: 1.6;
}

/* Final CTA accent — same family as the surrounding h2, just green +1.05em.
   (Removed .hand class so the "1" no longer falls back to Caveat.) */
.final-cta h2 .cta-accent {
  color: var(--mirait-green-600);
  font-size: 1.05em;
}

/* Timeline: widen the time-label gutter so dot/line never cover the right
   edge of the time text ("…0", "…30"). */
.timeline { padding-left: 160px; }
.timeline::before { left: 128px; }
.timeline-row .time { left: -160px; width: 110px; }
@media (max-width: 600px) {
  .timeline { padding-left: 124px; }
  .timeline::before { left: 98px; }
  .timeline-row .time { left: -124px; width: 80px; font-size: 12px; }
}

/* ===== Japanese typography polish (Phase 4) ===== */

/* Generic nowrap utility — apply to number+unit / time pairs in markup
   where the visual rhythm needs to stay glued together. */
.nowrap { white-space: nowrap; }

/* Numbers + units / time ranges should never break mid-token. */
.price-card .price-amount,
.price-card .price-amount .yen,
.price-card .price-day,
.sp-chip,
.h3-num,
.h3-big,
.ext-time,
.extend-fee p b,
.summary-list dd .price,
.decision-card b,
.cal-legend .key,
.week-head .label,
.combo-example .chip,
.combo-example .combo-eq,
.h3-themes-row,
.th-pill,
.timeline-row .time,
.eyebrow-mini,
.final-reassure span,
.faq-item summary .q,
.choose-steps .step-num,
.special-card .info-list dd .price {
  white-space: nowrap;
}

/* Headings: balanced line-breaks where supported, pretty for paragraphs. */
.h-section,
.h-display,
.hero h1,
.final-cta h2,
.day-card .day-head h3,
.special-card h3 {
  text-wrap: balance;
}

/* kind-card h3 uses explicit <br> for line structure, so balance would
   re-flow the carefully-chosen breaks. Use pretty (orphan-only fix). */
.kind-card h3 {
  text-wrap: pretty;
}

.lead,
.hero-sub,
.kind-card .subline,
.day-card .day-head .tagline,
.faq-item .answer,
.price-card .price-desc,
.cal-combo-head p,
.timeline-row .desc,
.cal-note,
.cal-note li,
.summary-list dd,
.empathy-quote {
  text-wrap: pretty;
}

/* Hanging punctuation when supported (Safari only as of 2026). */
p, li, dd {
  hanging-punctuation: allow-end;
}

/* Japanese phrase-aware wrapping — only break at 、 。 etc., not mid-phrase.
   Falls back to char-level wrap if line truly cannot fit.
   Note: elements that mix "※" / dates / half-width spaces with JP body text
   (like .day-aside, .cal-note li, .timeline-foot-note) are intentionally
   excluded here, otherwise the half-width space becomes a lone break point. */
.lead,
.hero-sub,
.day-foot-note,
.faq-item .answer,
.kind-card .subline,
.kind-card .for-who,
.empathy-quote,
.emb-card p,
.timeline-row .desc,
.day-card .day-head .tagline,
.day-card .activities li,
.choose-steps .step b,
.choose-steps .step-desc,
.special-card .body p,
.cal-combo-head p,
.price-card .price-desc,
.summary-list dd,
.final-cta p {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* Avoid orphaned trailing tax markers ("（税込）") wrapping alone — they
   already share .price-amount with the yen, so .nowrap above keeps them. */

/* Mobile fix: timeline header sticker was overflowing 375px viewport because
   .sticker has white-space:nowrap and the JP body text "通常クラスは…"
   exceeds 375px. Let it wrap on small screens. */
@media (max-width: 600px) {
  .timeline-badge .sticker.is-strong {
    white-space: normal;
    text-align: center;
    line-height: 1.5;
    padding: 12px 18px;
  }
}

/* Programs section h2 "まずは、2つの参加方法から" stays on one line
   even at mobile widths by using a smaller clamp than the default
   h-section. The pill background makes the phrase visually taller,
   and a forced wrap reads worse than slight font reduction. */
#programs .h-section {
  font-size: clamp(20px, 3.4vw, 36px);
  text-wrap: nowrap;
  white-space: nowrap;
}
@media (max-width: 360px) {
  /* Last-resort: let it wrap on extremely narrow viewports */
  #programs .h-section { white-space: normal; text-wrap: balance; }
}

/* Timeline header sticker — hide the small white dot inside
   "通常クラスは 8:00〜19:00 お預かり込み（追加料金なし）" (per user QA).
   The timeline vertical line + row dots are intentionally KEPT. */
.timeline-badge .sticker.is-strong .dot { display: none; }
.timeline-badge .sticker.is-strong { padding-left: 20px; }

/* Overview map area: address block under the iframe, stacked above
   the "Google Mapsで開く →" link on narrow screens. */
.map-wrap .map-cap {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 10px;
}
.map-wrap .map-addr b {
  display: block;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  color: var(--fg-1); margin-bottom: 4px;
}
.map-wrap .map-addr span {
  display: block;
  font-size: 12.5px; color: var(--fg-2); line-height: 1.65;
}
.map-wrap .map-cap > .ml-link { align-self: flex-end; }

/* 特別企画カード内の「詳細・お申し込みについて見る」ボタン */
.btn-special-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 18px;
  padding: 14px 22px;
  background: #6B5BD9;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(107, 91, 217, 0.25);
  transition: background var(--dur-fast), transform var(--dur-fast),
              box-shadow var(--dur-fast);
}
.btn-special-detail:hover {
  background: #5A4BC9;
  box-shadow: 0 6px 16px rgba(107, 91, 217, 0.32);
}
.btn-special-detail:active {
  transform: translateY(1px);
}

/* アート（金曜）のタグラインを1行で表示 */
.day-card.is-fri .day-head .tagline {
  white-space: nowrap;
  letter-spacing: -0.01em;
}
@media (max-width: 480px) {
  .day-card.is-fri .day-head .tagline {
    font-size: 14px;
  }
}

/* =========================================================================
   Day-card modals — "詳細を見る" ボタン + 各種ポップアップ
   ========================================================================= */

/* 「内容はこちら」ボタン — 目立つ緑塗りつぶし */
.day-card .day-detail-btn {
  background: var(--mirait-green);
  border: none;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  width: 100%;
  margin: 16px 0 14px;
  box-shadow: 0 3px 0 var(--mirait-green-600), 0 6px 14px rgba(63, 152, 119, 0.25);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast),
              background var(--dur-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.day-card .day-detail-btn::after {
  content: "→";
  font-weight: 900;
  transition: transform var(--dur-fast);
}
.day-card .day-detail-btn:hover {
  background: var(--mirait-green-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--mirait-green-600), 0 8px 18px rgba(63, 152, 119, 0.32);
}
.day-card .day-detail-btn:hover::after {
  transform: translateX(3px);
}
.day-card .day-detail-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--mirait-green-600), 0 3px 6px rgba(63, 152, 119, 0.2);
}

/* .staff ボタンをタップ可能と一目で分かるカードUIに（アバターなし、CTA明示） */
.day-card .staff {
  position: relative;
  background: var(--mirait-green-50);
  border: 1.5px solid var(--mirait-green-200);
  border-radius: var(--radius-md);
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  padding: 14px 16px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background var(--dur-fast), border-color var(--dur-fast),
              transform var(--dur-fast);
}
.day-card .staff .staff-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  min-width: 0;
}
.day-card .staff .staff-info .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--fg-1);
  line-height: 1.4;
}
.day-card .staff .staff-info .role {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.5;
}
.day-card .staff .staff-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--mirait-green);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 0 var(--mirait-green-600);
  transition: background var(--dur-fast), transform var(--dur-fast),
              box-shadow var(--dur-fast);
}
.day-card .staff:hover {
  background: var(--mirait-green-100);
  border-color: var(--mirait-green);
  transform: translateY(-1px);
}
.day-card .staff:hover .staff-cta {
  background: var(--mirait-green-600);
  box-shadow: 0 3px 0 var(--mirait-green-600);
}
.day-card .staff:active { transform: translateY(0); }
.day-card .staff:focus-visible {
  outline: 2px solid var(--mirait-green);
  outline-offset: 2px;
}

/* 各曜日のテーマカラーに合わせて .staff の色を変える */
.day-card.is-thu .staff {
  background: var(--insta-orange-bg);
  border-color: rgba(230, 138, 63, 0.4);
}
.day-card.is-thu .staff .staff-cta {
  background: var(--insta-orange);
  box-shadow: 0 2px 0 #B86A2E;
}
.day-card.is-thu .staff:hover {
  background: rgba(252, 242, 234, 1);
  border-color: var(--insta-orange);
}
.day-card.is-thu .staff:hover .staff-cta {
  background: #B86A2E;
  box-shadow: 0 3px 0 #B86A2E;
}

.day-card.is-fri .staff {
  background: var(--mirait-pink-100);
  border-color: var(--mirait-pink-200);
}
.day-card.is-fri .staff .staff-cta {
  background: var(--mirait-pink);
  box-shadow: 0 2px 0 var(--mirait-pink-600);
}
.day-card.is-fri .staff:hover {
  background: rgba(245, 220, 228, 1);
  border-color: var(--mirait-pink);
}
.day-card.is-fri .staff:hover .staff-cta {
  background: var(--mirait-pink-600);
  box-shadow: 0 3px 0 var(--mirait-pink-600);
}

/* モバイルでは縦並びに */
@media (max-width: 480px) {
  .day-card .staff {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .day-card .staff .staff-cta {
    align-self: flex-end;
  }
}

/* ===== day-modal （<dialog>） ===== */
.day-modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 36px 28px 28px;
  max-width: 480px;
  width: calc(100% - 32px);
  background: var(--paper);
  color: var(--fg-1);
  box-shadow: var(--shadow-lg);
  position: fixed;
}
.day-modal::backdrop {
  background: rgba(84, 84, 85, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.day-modal[open] {
  /* Center using margin auto (native dialog default) */
  margin: auto;
}
.day-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast);
}
.day-modal .modal-close:hover {
  background: var(--hairline);
}
.day-modal .modal-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.4;
  color: var(--fg-1);
  margin: 0 0 16px;
  padding-right: 32px;
  text-wrap: pretty;
}
.day-modal .modal-body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--fg-1);
  margin: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ===== Staff modal v2 — quote + chips + details 展開 ===== */
.day-modal.staff-modal {
  max-width: 560px;
}
.day-modal.staff-modal .staff-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.day-modal.staff-modal .staff-avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mirait-green-100), var(--insta-orange-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--mirait-green-600);
  font-size: 36px;
}
.day-modal.staff-modal .staff-avatar.is-tbd {
  background: var(--paper-2);
  color: var(--fg-3);
  border: 2px dashed var(--hairline);
  font-weight: 700;
  font-size: 32px;
}
.day-modal.staff-modal .staff-photo {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(84, 84, 85, 0.18);
}
.day-modal.staff-modal .staff-meta {
  flex: 1;
  min-width: 0;
}
.day-modal.staff-modal .staff-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--mirait-green-600);
  margin-bottom: 4px;
}
.day-modal.staff-modal .modal-title {
  text-align: left;
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  padding-right: 0;
}
.day-modal.staff-modal .staff-honor {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-2);
}

/* 引用ボックス */
.day-modal.staff-modal .staff-quote {
  position: relative;
  margin: 0 0 18px;
  padding: 14px 16px 14px 44px;
  background: var(--mirait-green-50);
  border: 1.5px solid var(--mirait-green-200);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--fg-1);
}
.day-modal.staff-modal .staff-quote .quote-mark {
  position: absolute;
  left: 14px;
  top: 8px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: var(--mirait-green);
  transform: scaleX(-1);
}
.day-modal.staff-modal .staff-quote.is-pink {
  background: var(--mirait-pink-100);
  border-color: var(--mirait-pink-200);
}
.day-modal.staff-modal .staff-quote.is-pink .quote-mark { color: var(--mirait-pink); }

/* チップ群 */
.day-modal.staff-modal .staff-chips {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.day-modal.staff-modal .staff-chips li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--mirait-green-200);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-1);
}
.day-modal.staff-modal .staff-chips.is-pink li {
  border-color: var(--mirait-pink-200);
}
.day-modal.staff-modal .chip-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* プロフィール詳細展開 */
.day-modal.staff-modal .staff-bio {
  border-top: 1px dashed var(--hairline);
  padding-top: 14px;
  margin-top: 4px;
}
.day-modal.staff-modal .staff-bio summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--mirait-green-600);
  list-style: none;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.day-modal.staff-modal .staff-bio summary::-webkit-details-marker { display: none; }
.day-modal.staff-modal .staff-bio summary::before {
  content: "∧";
  display: inline-block;
  transition: transform var(--dur-fast);
  transform: rotate(180deg);
  font-weight: 900;
}
.day-modal.staff-modal .staff-bio[open] summary::before { transform: rotate(0deg); }
.day-modal.staff-modal .staff-bio .modal-body {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.85;
}

@media (max-width: 480px) {
  .day-modal {
    padding: 32px 20px 22px;
  }
  .day-modal.staff-modal .staff-avatar,
  .day-modal.staff-modal .staff-photo { width: 64px; height: 64px; }
  .day-modal.staff-modal .staff-avatar { font-size: 30px; }
  .day-modal.staff-modal .modal-title { font-size: 19px; }
  .day-modal.staff-modal .staff-honor { font-size: 14px; }
  .day-modal.staff-modal .staff-chips { grid-template-columns: 1fr; }
  .day-modal.staff-modal .staff-quote {
    padding-left: 38px;
    font-size: 13px;
  }
  /* 通常モーダルのタイトルも狭く */
  .day-modal .modal-title { font-size: 19px; }
}