/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ニュアンスカラーパレット */
  --clr-cream:     #faf7f2;
  --clr-beige:     #f0ebe2;
  --clr-greige:    #e8e0d5;
  --clr-mocha:     #c4a882;
  --clr-brown:     #8b6f5e;

  /* アクセントカラー */
  --clr-coral:     #e8756a;
  --clr-coral-lt:  #f4b8b4;
  --clr-mint:      #7bbfb5;
  --clr-mint-lt:   #c5e5e1;
  --clr-lavender:  #b8a9db;
  --clr-lav-lt:    #e4deee;
  --clr-gold:      #d4a043;
  --clr-gold-lt:   #f0d5a0;

  /* テキスト */
  --clr-text:      #3d3530;
  --clr-text-mid:  #6b5f57;
  --clr-text-lt:   #9e918a;

  /* タイポグラフィ */
  --ff-round:    'M PLUS Rounded 1c', sans-serif;
  --ff-serif:    'Noto Serif JP', serif;
  --ff-sans:     'Noto Sans JP', sans-serif;

  /* スペーシング */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;

  /* ボーダー半径 */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-full: 9999px;

  /* シャドウ */
  --shadow-sm: 0 2px 8px rgba(61,53,48,0.08);
  --shadow-md: 0 4px 20px rgba(61,53,48,0.12);
  --shadow-lg: 0 8px 40px rgba(61,53,48,0.16);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-sans);
  font-size: 16px;
  color: var(--clr-text);
  background: var(--clr-cream);
  line-height: 1.8;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* ===== HEADER ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1200; /* オーバーレイ(1050)よりも高く設定してナビドロワーを前面に */
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--clr-greige);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 4px 8px;
  margin: -4px -8px;
  transition: background 0.2s ease;
}

.brand-logo:hover {
  background: rgba(139, 111, 94, 0.06);
}

.brand-icon { font-size: 1.5rem; }

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-sub {
  font-size: 0.72rem;
  color: var(--clr-text-lt);
  letter-spacing: 0.04em;
}

.brand-main {
  font-family: var(--ff-round);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--clr-brown);
}

.brand-year {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--clr-coral);
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

.header-nav { display: flex; gap: var(--space-sm); }

.nav-link {
  font-family: var(--ff-round);
  font-size: 0.90rem;
  font-weight: 600;
  color: var(--clr-text-mid);
  text-decoration: none;
  padding: 7px 15px;
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
}

.nav-link:hover, .nav-link.active {
  background: var(--clr-beige);
  color: var(--clr-brown);
}

.nav-link.highlight {
  background: var(--clr-coral);
  color: #fff;
}

.nav-link.highlight:hover {
  background: #d4645a;
  transform: translateY(-1px);
}

.nav-link--calc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
}

.calc-icon {
  font-size: 1.4rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.nav-link--calc-toggle {
  border: none;
  background: var(--clr-lavender);
  color: #fff;
  cursor: pointer;
  font-family: var(--ff-round);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.2s, transform 0.2s;
}
.nav-link--calc-toggle:hover {
  background: #7a6cbf;
  transform: translateY(-1px);
}

.hero {
  position: relative;
  min-height: 88vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
}

.hero-bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.deco-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.35;
}

.deco-circle.c1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--clr-coral-lt), transparent 70%);
  top: -120px; right: -80px;
  animation: float 8s ease-in-out infinite;
}

.deco-circle.c2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--clr-lav-lt), transparent 70%);
  bottom: -60px; left: 30%;
  animation: float 11s ease-in-out infinite reverse;
}

.deco-circle.c3 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, var(--clr-mint-lt), transparent 70%);
  top: 30%; left: -40px;
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-16px); }
}

.hero-content { position: relative; z-index: 1; }

.chapter-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: var(--clr-brown);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 8px 18px;
  margin-bottom: var(--space-md);
}

.badge-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
}

.badge-num {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}

.hero-title {
  font-family: var(--ff-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-text);
  margin-bottom: var(--space-md);
}

.hero-title em {
  font-style: normal;
  color: var(--clr-coral);
  position: relative;
}

.hero-title em::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-coral), var(--clr-coral-lt));
  border-radius: 2px;
}

.title-sub {
  font-size: 0.8em;
  color: var(--clr-text-mid);
  font-weight: 400;
}

.hero-desc {
  font-size: 1.05rem;
  color: var(--clr-text-mid);
  margin-bottom: var(--space-md);
  line-height: 1.9;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  font-family: var(--ff-round);
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--clr-beige);
  color: var(--clr-brown);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--clr-greige);
}

.tag.tag-new {
  background: linear-gradient(135deg, var(--clr-coral), #f0897d);
  color: #fff;
  border-color: transparent;
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 117, 106, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(232, 117, 106, 0); }
}

/* Hero Illust */
.hero-illust {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-direction: column;
}

.illust-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  border: 2px solid var(--clr-coral-lt);
  width: 220px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.illust-card:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: var(--shadow-lg);
}

.illust-card--b {
  border-color: var(--clr-lav-lt);
  transform: rotate(2deg);
}

.illust-card--b:hover {
  transform: translateY(-4px) rotate(2deg);
}

.illust-emoji { font-size: 2.5rem; margin-bottom: 8px; }

.illust-card p { font-size: 0.85rem; color: var(--clr-text-mid); line-height: 1.5; }
.illust-card strong { color: var(--clr-coral); font-family: var(--ff-round); }
.illust-card--b strong { color: var(--clr-lavender); }

.illust-arrow {
  font-size: 2rem;
  color: var(--clr-mocha);
  font-weight: 700;
}

/* ===== LEAD SECTION ===== */
.lead-section {
  background: var(--clr-beige);
  padding: var(--space-xl) var(--space-md);
}

.lead-box {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.lead-icon {
  font-size: 3rem;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.lead-heading {
  font-family: var(--ff-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.lead-heading em {
  font-style: normal;
  color: var(--clr-coral);
}

.lead-text p {
  color: var(--clr-text-mid);
  margin-bottom: var(--space-sm);
  font-size: 0.95rem;
}

/* ===== CONTENT SECTIONS ===== */
.content-section {
  padding: var(--space-2xl) var(--space-md);
}

.content-section--alt {
  background: var(--clr-beige);
}

/* Section Header */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.section-num {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--clr-coral-lt);
  line-height: 1;
  flex-shrink: 0;
}

.section-num--b { color: var(--clr-lav-lt); }
.section-num--new { color: var(--clr-gold-lt); font-size: 2.8rem; }
.section-num--quiz { color: var(--clr-mint-lt); font-size: 3rem; }
.section-num--design { color: var(--clr-greige); font-size: 2.5rem; }

.section-category {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--clr-coral);
  display: block;
  margin-bottom: 4px;
}

.section-category--new { color: var(--clr-gold); }
.section-category--quiz { color: var(--clr-mint); }
.section-category--design { color: var(--clr-lavender); }

.section-title {
  font-family: var(--ff-serif);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--clr-text);
}

/* ===== TWO COL EXPLAIN ===== */
.two-col-explain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.explain-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--clr-coral-lt);
}

.explain-card--accent { border-top-color: var(--clr-lav-lt); }

.explain-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.explain-title {
  font-family: var(--ff-round);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: var(--space-sm);
}

.explain-desc {
  font-size: 0.9rem;
  color: var(--clr-text-mid);
  line-height: 1.8;
  margin-bottom: var(--space-sm);
}

.explain-desc strong { color: var(--clr-coral); }

.explain-note {
  background: var(--clr-beige);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-sm);
  font-size: 0.82rem;
  color: var(--clr-brown);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

/* ===== CALENDAR SECTION ===== */
.calendar-section { margin-top: var(--space-xl); }

.subsection-title {
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.subsec-emoji { font-size: 1.4rem; }

.subsection-desc {
  color: var(--clr-text-mid);
  margin-bottom: var(--space-lg);
  font-size: 0.9rem;
}

.calendar-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.company-calendar {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}

.company-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-md);
}

.company-badge {
  font-family: var(--ff-round);
  font-size: 0.85rem;
  font-weight: 800;
  background: var(--clr-coral);
  color: #fff;
  padding: 4px 14px;
  border-radius: var(--radius-full);
}

.company-badge--b { background: var(--clr-lavender); }

.company-type {
  font-size: 0.82rem;
  color: var(--clr-text-mid);
  font-weight: 500;
}

/* Calendar Grid */
.calendar-visual { margin-bottom: var(--space-md); }

.cal-month {
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--clr-brown);
  margin-bottom: 8px;
  padding-left: 4px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--space-sm);
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 6px;
  color: var(--clr-text-mid);
  position: relative;
}

.cal-day.header {
  font-weight: 700;
  font-size: 0.65rem;
  color: var(--clr-text-lt);
  background: none;
}

.cal-day.empty { background: none; }

.cal-day.cal-shimei {
  background: var(--clr-coral);
  color: #fff;
  font-weight: 800;
  font-size: 0.72rem;
  flex-direction: column;
  gap: 1px;
  border-radius: 8px;
  animation: pulse-shimei 2s ease-in-out infinite;
}

@keyframes pulse-shimei {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 117, 106, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(232, 117, 106, 0); }
}

.cal-day.cal-shimei--b {
  background: var(--clr-lavender);
  animation: pulse-shimei-b 2s ease-in-out infinite;
}

@keyframes pulse-shimei-b {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 169, 219, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(184, 169, 219, 0); }
}

.cal-day.cal-harai--b {
  background: linear-gradient(135deg, var(--clr-mint), #5fa89e);
  color: #fff;
  font-weight: 800;
  font-size: 0.65rem;
  flex-direction: column;
  gap: 1px;
  border-radius: 8px;
}

.cal-label {
  font-size: 0.45rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0;
  display: block;
  line-height: 1;
}

.cal-day.cal-gray {
  background: var(--clr-beige);
  color: var(--clr-text-lt);
  opacity: 0.6;
}

.cal-flow {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.cal-flow-harai {
  background: linear-gradient(135deg, #5fa89e, var(--clr-mint));
  color: #fff;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

/* Company Timeline */
.company-timeline {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--clr-greige);
  padding-top: var(--space-sm);
}

.company-timeline li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--clr-text-mid);
}

.tl-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  color: #fff;
}

.tl-start { background: #a8c4b5; }
.tl-shimei { background: var(--clr-coral); }
.tl-harai { background: var(--clr-mint); }

/* Point Box */
.point-box {
  background: linear-gradient(135deg, #fff9f7, #fff);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 2px solid var(--clr-coral-lt);
  box-shadow: var(--shadow-sm);
}

.point-box-header { margin-bottom: var(--space-md); }

.stamp {
  display: inline-block;
  font-family: var(--ff-round);
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--clr-coral);
  color: #fff;
  padding: 6px 16px;
  border-radius: var(--radius-full);
}

.point-items { display: flex; flex-direction: column; gap: var(--space-sm); }

.point-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--clr-text-mid);
  background: var(--clr-beige);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}

.pi-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }

.point-item strong { color: var(--clr-text); }

/* ===== INSURANCE SECTION ===== */
.insurance-intro { margin-bottom: var(--space-lg); }

.thought-bubble {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: relative;
  border: 2px solid var(--clr-lav-lt);
}

.thought-bubble::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 20px 14px 0;
  border-style: solid;
  border-color: var(--clr-lav-lt) transparent transparent;
}

.tb-text {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 8px;
  line-height: 1.7;
}

.tb-answer {
  font-size: 0.9rem;
  color: var(--clr-lavender);
  font-weight: 700;
}

/* Law Card */
.law-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin: var(--space-xl) 0 var(--space-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  border-left: 5px solid var(--clr-lavender);
}

.law-card-icon { font-size: 2.5rem; flex-shrink: 0; }

.law-card-title {
  font-family: var(--ff-round);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: var(--space-sm);
}

.law-card-content p {
  font-size: 0.9rem;
  color: var(--clr-text-mid);
  line-height: 1.8;
  margin-bottom: var(--space-sm);
}

.highlight-text {
  color: var(--clr-lavender);
  font-weight: 700;
}

.source-btn-wrap { margin-top: var(--space-md); }

/* Source Buttons */
.source-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--clr-beige);
  color: var(--clr-text-mid);
  text-decoration: none;
  padding: 10px var(--space-md);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px solid var(--clr-greige);
  border-left: 4px solid var(--clr-lavender);
  transition: all 0.25s ease;
}

.source-btn:hover {
  background: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--clr-text);
}

.source-btn--small { font-size: 0.78rem; padding: 8px 12px; }

.source-btn--tip {
  font-size: 0.78rem;
  padding: 8px 12px;
  border-left-color: var(--clr-coral);
  width: 100%;
}

.source-btn-icon { font-size: 1rem; }
.source-btn-arrow { margin-left: auto; font-size: 0.9rem; opacity: 0.6; }

/* Flow Section */
.flow-section { margin-top: var(--space-xl); }

.flow-title {
  font-family: var(--ff-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.flow-title-badge {
  font-family: var(--ff-round);
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--clr-lavender);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.1em;
}

.flow-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.flow-vs {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--clr-text-lt);
}

.flow-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.flow-box--next {
  border-top: 4px solid var(--clr-lav-lt);
}

.flow-box--current {
  border-top: 4px solid var(--clr-coral-lt);
}

.flow-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-md);
}

.fh-emoji { font-size: 1.4rem; }

.fh-type {
  font-family: var(--ff-round);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-text);
}

.flow-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-md);
}

.ft-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.ft-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-round);
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
  flex-shrink: 0;
}

.ft-month { background: linear-gradient(135deg, var(--clr-lavender), #9b8cce); }
.ft-pay { background: linear-gradient(135deg, var(--clr-mint), #5fa89e); }
.ft-month--c { background: linear-gradient(135deg, var(--clr-coral), #d4655a); }
.ft-pay--c { background: linear-gradient(135deg, var(--clr-coral), #d4655a); }

.ft-content {
  font-size: 0.85rem;
  color: var(--clr-text-mid);
  line-height: 1.4;
}

.ft-content strong { color: var(--clr-text); font-weight: 700; }
.ft-sub { font-size: 0.75rem; color: var(--clr-text-lt); }

.ft-arrow {
  text-align: center;
  font-size: 1.2rem;
  color: var(--clr-text-lt);
  padding-left: 26px;
}

/* Flow Point */
.flow-point {
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--clr-text-mid);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.flow-point--next { background: var(--clr-lav-lt); }
.flow-point--current { background: #fcecea; }
.flow-point strong { color: var(--clr-text); }
.fp-stamp { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }

/* Retire Alert */
.retire-alert {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 2px solid var(--clr-coral-lt);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.alert-header {
  background: linear-gradient(135deg, var(--clr-coral), #d4655a);
  padding: var(--space-sm) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.alert-stamp {
  font-family: var(--ff-round);
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.alert-title {
  font-family: var(--ff-round);
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
}

.alert-body {
  padding: var(--space-lg);
}

.alert-body p {
  font-size: 0.9rem;
  color: var(--clr-text-mid);
  margin-bottom: var(--space-sm);
  line-height: 1.8;
}

.alert-body p strong { color: var(--clr-text); }

.alert-example {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--clr-beige);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
  flex-wrap: wrap;
}

.ae-item {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}

.ae-item--month {
  background: #fff;
  border: 1.5px solid var(--clr-coral-lt);
  color: var(--clr-text);
}

.ae-item--pay {
  background: #fff;
  border: 1.5px solid var(--clr-coral);
  color: var(--clr-coral);
  font-weight: 700;
}

.ae-arrow { font-size: 1.4rem; color: var(--clr-text-lt); }

.alert-note {
  font-size: 0.78rem !important;
  color: var(--clr-text-lt) !important;
  border-top: 1px dashed var(--clr-greige);
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
}

.alert-body .source-btn { margin-top: var(--space-sm); }

/* ===== TIPS SECTION ===== */
.tips-section {
  background: linear-gradient(160deg, #fdf5f0 0%, var(--clr-cream) 100%);
}

.tips-intro {
  font-size: 0.95rem;
  color: var(--clr-text-mid);
  margin-bottom: var(--space-xl);
  max-width: 700px;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.tip-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tip-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.tip-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tip-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--clr-text-lt);
}

.tip-new-badge {
  font-family: var(--ff-round);
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--clr-coral);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.tip-new-badge--gold { background: var(--clr-gold); }
.tip-new-badge--green { background: var(--clr-mint); }
.tip-new-badge--orange { background: #e8a055; }

.tip-icon { font-size: 2.2rem; }

.tip-title {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.5;
}

.tip-body {
  font-size: 0.86rem;
  color: var(--clr-text-mid);
  line-height: 1.8;
}

.tip-body strong { color: var(--clr-text); }

.tip-check {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.tc-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--clr-text-mid);
  background: var(--clr-beige);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}

.tc-item span { color: var(--clr-mint); font-weight: 700; }

.tip-info-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.til-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--clr-text-mid);
  background: var(--clr-beige);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.til-icon { font-size: 1rem; flex-shrink: 0; }

.tip-compare { display: flex; flex-direction: column; gap: 4px; }

.tc-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}

.tc-row--before { background: var(--clr-beige); color: var(--clr-text-mid); }
.tc-row--after { background: #e8f5f3; color: var(--clr-mint); font-weight: 700; }

.tc-label {
  font-family: var(--ff-round);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,0.08);
  white-space: nowrap;
}

.tc-arrow-row {
  text-align: center;
  font-size: 1.1rem;
  color: var(--clr-text-lt);
}

.tip-source { margin-top: auto; }

/* ===== QUIZ SECTION ===== */
.quiz-section {
  background: linear-gradient(160deg, #f0f7f5 0%, var(--clr-cream) 100%);
}

.quiz-intro {
  font-size: 0.95rem;
  color: var(--clr-text-mid);
  margin-bottom: var(--space-xl);
  max-width: 700px;
}

.quiz-card {
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-xl);
  position: relative;
}

.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  background: var(--clr-beige);
  border-bottom: 1px solid var(--clr-greige);
}

.q-num {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--clr-mint);
}

.q-difficulty {
  font-family: var(--ff-round);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.q-diff--easy { background: #e8f5f3; color: var(--clr-mint); }
.q-diff--mid { background: #fdf0e8; color: #e8a055; }
.q-diff--hard { background: #fce9e8; color: var(--clr-coral); }

.q-scene {
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  border-bottom: 1px dashed var(--clr-greige);
}

.scene-icon { font-size: 2rem; flex-shrink: 0; margin-top: 4px; }

.scene-text {
  font-size: 0.95rem;
  color: var(--clr-text);
  line-height: 1.8;
}

.scene-text strong { color: var(--clr-coral); }

.q-choices {
  padding: var(--space-md) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 2px solid var(--clr-greige);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--clr-text-mid);
  transition: all 0.2s ease;
  user-select: none;
}

.choice:hover {
  border-color: var(--clr-mint);
  background: var(--clr-cream);
  color: var(--clr-text);
}

.choice.selected-correct {
  border-color: var(--clr-mint);
  background: #e8f5f3;
  color: var(--clr-text);
}

.choice.selected-wrong {
  border-color: var(--clr-coral);
  background: #fce9e8;
  color: var(--clr-text);
}

.choice.is-correct-reveal {
  border-color: var(--clr-mint);
  background: #e8f5f3;
}

.choice-label {
  font-family: var(--ff-round);
  font-size: 0.82rem;
  font-weight: 800;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clr-greige);
  color: var(--clr-text-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.selected-correct .choice-label { background: var(--clr-mint); color: #fff; }
.selected-wrong .choice-label { background: var(--clr-coral); color: #fff; }
.is-correct-reveal .choice-label { background: var(--clr-mint); color: #fff; }

/* Answer */
.q-answer {
  display: none;
  padding: 0 var(--space-xl) var(--space-lg);
  animation: slide-down 0.4s ease;
}

.q-answer.show { display: block; }

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.answer-header {
  margin-bottom: var(--space-md);
}

.answer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-round);
  font-size: 0.9rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--clr-mint), #5fa89e);
  color: #fff;
  padding: 8px 20px;
  border-radius: var(--radius-full);
}

.answer-body {
  background: var(--clr-beige);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.answer-body p {
  font-size: 0.88rem;
  color: var(--clr-text-mid);
  line-height: 1.8;
  margin-bottom: var(--space-sm);
}

.answer-body p strong { color: var(--clr-text); }

.answer-alert {
  background: #fcecea;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.84rem;
  color: var(--clr-brown);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: var(--space-sm);
  line-height: 1.7;
}

.answer-alert span { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.answer-alert.answer-alert--info { background: #e8f5f3; color: var(--clr-text-mid); }

.answer-source { margin-top: var(--space-sm); }

/* Recipe */
.answer-recipe {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-sm);
}

.recipe-title {
  font-family: var(--ff-round);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clr-brown);
  margin-bottom: var(--space-sm);
}

.recipe-steps { display: flex; flex-direction: column; gap: 8px; }

.rs-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.84rem;
  color: var(--clr-text-mid);
  padding: 8px 12px;
  background: var(--clr-beige);
  border-radius: var(--radius-sm);
}

.rs-step--result {
  background: #e8f5f3;
  color: var(--clr-mint);
  font-weight: 700;
}

.rs-num {
  font-family: var(--ff-round);
  font-size: 0.78rem;
  font-weight: 800;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--clr-lavender);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rs-step--result .rs-num { background: var(--clr-mint); }

/* ===== DESIGN ORDER SECTION ===== */
.design-order-section { background: var(--clr-beige); }

.design-intro {
  font-size: 0.9rem;
  color: var(--clr-text-mid);
  margin-bottom: var(--space-xl);
}

.order-cards { display: flex; flex-direction: column; gap: var(--space-lg); }

.order-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.oc-num {
  background: linear-gradient(135deg, var(--clr-lavender), #9b8cce);
  color: #fff;
  font-family: var(--ff-round);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 8px var(--space-lg);
}

.oc-title {
  font-family: var(--ff-round);
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
  padding: var(--space-md) var(--space-lg) var(--space-sm);
}

.oc-body {
  padding: 0 var(--space-lg) var(--space-lg);
}

.oc-body p {
  font-size: 0.85rem;
  color: var(--clr-text-mid);
  margin-bottom: var(--space-sm);
}

.oc-body p strong { color: var(--clr-text); }

.oc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oc-list li {
  font-size: 0.84rem;
  color: var(--clr-text-mid);
  background: var(--clr-beige);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-md);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--clr-brown);
  color: #e8ddd5;
  padding: var(--space-2xl) var(--space-md);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
  text-align: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.footer-logo { font-size: 2rem; }

.footer-company {
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

.footer-title {
  font-size: 0.8rem;
  opacity: 0.7;
}

.footer-disclaimer {
  font-size: 0.78rem;
  opacity: 0.7;
  line-height: 1.8;
  max-width: 600px;
}

.footer-links {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  color: var(--clr-mocha);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: color 0.2s;
}

.footer-links a:hover { color: #fff; }

/* 最下段：社労士会リンク（区切り線付き） */
.footer-links--assoc {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-md);
  font-size: 0.78rem;
}

.footer-links--assoc a {
  font-size: 0.78rem;
  color: rgba(196, 168, 130, 0.75);
}

.footer-links--assoc a:hover { color: rgba(255,255,255,0.85); }

.footer-copy {
  font-size: 0.75rem;
  opacity: 0.5;
}

/* ===== 特定商取引法に基づく表記 ===== */
.tokusho-section {
  background: var(--clr-beige);
  padding: var(--space-2xl) var(--space-md);
}

.tokusho-box {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  max-width: 900px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--clr-brown);
}

.tokusho-title {
  font-family: var(--ff-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tokusho-icon { font-size: 1.4rem; }

.tokusho-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.tokusho-table th,
.tokusho-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--clr-greige);
  text-align: left;
  vertical-align: top;
}

.tokusho-table th {
  width: 170px;
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--clr-brown);
  background: var(--clr-beige);
  white-space: nowrap;
}

.tokusho-table td { color: var(--clr-text-mid); }

.tokusho-table tr:last-child th,
.tokusho-table tr:last-child td { border-bottom: none; }

.tokusho-link {
  color: var(--clr-lavender);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.tokusho-link:hover {
  color: var(--clr-brown);
  text-decoration: underline;
}

.tokusho-footer-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--clr-text-lt);
  border-top: 1px dashed var(--clr-greige);
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
}

@media (max-width: 600px) {
  .tokusho-table th { width: 100px; font-size: 0.75rem; white-space: normal; }
  .tokusho-table th, .tokusho-table td { padding: 8px 10px; }
}


@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: var(--space-xl);
  }

  .hero-illust {
    flex-direction: row;
    justify-content: center;
  }

  .illust-card { width: 180px; }
  .illust-arrow { transform: none; }

  .two-col-explain { grid-template-columns: 1fr; }
  .calendar-compare { grid-template-columns: 1fr; }
  .flow-compare { grid-template-columns: 1fr; }
  .flow-vs { text-align: center; }
  .tips-grid { grid-template-columns: 1fr; }

  .lead-box {
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
  }

  .law-card {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .q-scene { flex-direction: column; gap: var(--space-sm); }
  .q-choices { padding: var(--space-md); }
  .q-answer { padding: 0 var(--space-md) var(--space-md); }

  .hero-title { font-size: 1.5rem; }
}

@media (max-width: 600px) {
  /* ハンバーガー使用時はdisplay:noneは900pxメディアクエリ側で管理 */
  /* .header-nav は right: -320px でオフスクリーン（display:none にしない） */

  .hero-illust {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }

  .illust-card { width: 90%; }
  .illust-arrow { transform: rotate(90deg); }

  .tip-check { grid-template-columns: 1fr; }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .section-num { font-size: 2rem; }

  .alert-example {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-brand { flex-direction: column; }

  .company-calendar { padding: var(--space-md); }
}

/* ===== ナビ ドロップダウン ===== */
.nav-dropdown {
  position: relative;
}

.nav-caret {
  font-size: 0.65rem;
  display: inline-block;
  transition: transform 0.25s ease;
}

.nav-dropdown:hover .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 380px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(61,53,48,0.18);
  border: 1px solid var(--clr-greige);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 200;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ndm-header {
  font-family: var(--ff-round);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--clr-text-lt);
  padding: 6px 12px 8px;
  border-bottom: 1px dashed var(--clr-greige);
  margin-bottom: 4px;
}

.ndm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--clr-text);
  transition: all 0.2s ease;
  cursor: pointer;
}

.ndm-item:hover {
  background: var(--clr-beige);
}

.ndm-item--active {
  background: linear-gradient(135deg, #fff4f3, #fff);
  border: 1.5px solid var(--clr-coral-lt);
}

.ndm-num {
  font-family: var(--ff-round);
  font-size: 0.80rem;
  font-weight: 800;
  color: var(--clr-brown);
  background: var(--clr-gold-lt);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 52px;
  text-align: center;
}

.ndm-item--active .ndm-num {
  background: var(--clr-coral);
  color: #fff;
}

.ndm-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.ndm-title {
  font-family: var(--ff-round);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.4;
}

.ndm-desc {
  font-size: 0.80rem;
  color: var(--clr-text-lt);
  line-height: 1.5;
}

.ndm-status {
  font-size: 0.70rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.ndm-status--open {
  background: #e8f9f5;
  color: var(--clr-mint);
  border: 1px solid var(--clr-mint-lt);
}

/* 計算ツールリンク */
.nav-link--sim {
  background: var(--clr-mint);
  color: #fff;
}

.nav-link--sim:hover {
  background: #5fa89e;
  color: #fff;
  transform: translateY(-1px);
}

/* 章ページ共通スタイル */
.chapter-page-hero {
  background: linear-gradient(135deg, #2d2320 0%, #4a3728 50%, #5e4a38 100%);
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.chapter-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(232,117,106,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(123,191,181,0.10) 0%, transparent 50%);
}

.chapter-page-hero-inner {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.chapter-page-num {
  font-family: var(--ff-round);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--clr-gold);
  border: 1.5px solid var(--clr-gold);
  padding: 5px 18px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: var(--space-md);
}

.chapter-page-title {
  font-family: var(--ff-serif);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}

.chapter-page-subtitle {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}

.chapter-page-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.chapter-page-tag {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-family: var(--ff-round);
  font-weight: 600;
}

/* 章ページ コンテンツ */
.chapter-body {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
}

.chapter-section {
  margin-bottom: var(--space-2xl);
}

.chapter-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 3px solid var(--clr-greige);
}

.chapter-section-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.chapter-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--clr-coral);
  display: block;
  margin-bottom: 2px;
}

.chapter-section-title {
  font-family: var(--ff-serif);
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 700;
  color: var(--clr-text);
}

/* 落とし穴カード */
.pitfall-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.pitfall-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--clr-coral);
  position: relative;
}

.pitfall-card--warn { border-top-color: var(--clr-gold); }
.pitfall-card--info { border-top-color: var(--clr-lavender); }
.pitfall-card--ok   { border-top-color: var(--clr-mint); }

.pitfall-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ff-round);
  font-size: 0.67rem;
  font-weight: 800;
  background: var(--clr-coral);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 10px;
}

.pitfall-badge--warn { background: var(--clr-gold); }
.pitfall-badge--info { background: var(--clr-lavender); }
.pitfall-badge--ok   { background: var(--clr-mint); }

.pitfall-title {
  font-family: var(--ff-round);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 8px;
  line-height: 1.4;
}

.pitfall-body {
  font-size: 0.85rem;
  color: var(--clr-text-mid);
  line-height: 1.8;
}

.pitfall-body strong { color: var(--clr-coral); }
.pitfall-card--warn .pitfall-body strong { color: #b8850d; }
.pitfall-card--ok   .pitfall-body strong { color: var(--clr-mint); }

/* 実務メモ */
.practical-note {
  background: linear-gradient(135deg, #fffbf0, #fff);
  border: 2px solid var(--clr-gold-lt);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.practical-note-icon { font-size: 2rem; flex-shrink: 0; }

.practical-note-title {
  font-family: var(--ff-round);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--clr-brown);
  margin-bottom: 6px;
}

.practical-note-body {
  font-size: 0.85rem;
  color: var(--clr-text-mid);
  line-height: 1.8;
}

.practical-note-body strong { color: var(--clr-text); }

/* 学習カード */
.learn-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.learn-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  border: 1.5px solid var(--clr-greige);
  transition: all 0.2s;
}

.learn-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--clr-coral-lt);
}

.learn-card-icon { font-size: 2rem; margin-bottom: 8px; }

.learn-card-title {
  font-family: var(--ff-round);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 6px;
}

.learn-card-body {
  font-size: 0.78rem;
  color: var(--clr-text-lt);
  line-height: 1.6;
}

/* 章ナビ（前後移動） */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xl) var(--space-md);
  border-top: 2px solid var(--clr-greige);
  max-width: 900px;
  margin: 0 auto;
  gap: var(--space-md);
}

.chapter-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-family: var(--ff-round);
  font-size: 0.82rem;
  font-weight: 700;
  background: #fff;
  color: var(--clr-brown);
  border: 2px solid var(--clr-greige);
  transition: all 0.2s;
}

.chapter-nav-btn:hover {
  background: var(--clr-brown);
  color: #fff;
  border-color: var(--clr-brown);
  transform: translateX(-2px);
}

.chapter-nav-btn--next:hover { transform: translateX(2px); }

.chapter-nav-center {
  font-family: var(--ff-round);
  font-size: 0.75rem;
  color: var(--clr-text-lt);
  text-align: center;
}

/* 計算例ボックス */
.calc-example {
  background: var(--clr-beige);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  border-left: 4px solid var(--clr-mint);
}

.calc-example-title {
  font-family: var(--ff-round);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--clr-mint);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 6px;
}

.calc-formula {
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  color: var(--clr-text);
  border: 1px solid var(--clr-mint-lt);
  line-height: 2;
}

.calc-result {
  font-family: var(--ff-round);
  font-size: 1rem;
  font-weight: 800;
  color: var(--clr-coral);
  margin-top: 8px;
}

/* レスポンシブ追加 */
@media (max-width: 680px) {
  .nav-dropdown-menu { min-width: 300px; right: 0; left: auto; }
  .pitfall-grid { grid-template-columns: 1fr; }
  .learn-cards { grid-template-columns: 1fr 1fr; }
  .chapter-nav { flex-direction: column; }
}

/* ===== ヒーロー 教科書タイトル ===== */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-md);
  animation: fadeSlideUp 0.6s ease both;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow-badge {
  font-family: var(--ff-round);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--clr-brown);
  background: var(--clr-gold-lt);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--clr-mocha);
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.hero-eyebrow-year {
  font-family: var(--ff-round);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--clr-text-lt);
  letter-spacing: 0.12em;
  border-left: 1px solid var(--clr-greige);
  padding-left: 10px;
}

.hero-book-title {
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  line-height: 1.05;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.hbt-line1 {
  font-family: var(--ff-round);
  font-size: 0.42em;
  font-weight: 800;
  color: var(--clr-brown);
  display: block;
  letter-spacing: 0.12em;
  margin-bottom: -0.05em;
}

.hbt-line2 {
  font-family: var(--ff-serif);
  font-weight: 700;
  display: block;
  background: linear-gradient(
    120deg,
    var(--clr-coral) 0%,
    var(--clr-gold)  45%,
    #6ab89a          100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.03em;
  position: relative;
}

.hbt-line2::after {
  content: '';
  position: absolute;
  bottom: 0.06em;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--clr-coral), var(--clr-gold), #7bbfb5);
  border-radius: 3px;
  opacity: 0.35;
}

.hero-chapter-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.hero-chapter-name {
  font-family: var(--ff-round);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--clr-text-mid);
  border-left: 3px solid var(--clr-coral-lt);
  padding-left: 10px;
}

/* 目次ドロップダウン 番号バッジ */
.ndm-num--toc {
  background: var(--clr-brown);
  color: #fff;
  font-size: 0.68rem;
}

/* ===== 就業規則・賃金規程 確認バナー ===== */
.kisoku-banner {
  background: linear-gradient(135deg, #2d2320 0%, #3d2e24 100%);
  border-top: 3px solid var(--clr-gold);
  padding: var(--space-lg) var(--space-md);
}

.kisoku-banner-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.kisoku-banner-icon {
  font-size: 2rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.kisoku-banner-title {
  font-family: var(--ff-round);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--clr-gold);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

.kisoku-banner-text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.8;
}

.kisoku-banner-text strong {
  color: #fff;
  font-weight: 700;
}

.kisoku-banner-items {
  display: flex;
  gap: var(--space-sm);
  margin-top: 10px;
  flex-wrap: wrap;
}

.kisoku-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(212,160,67,0.4);
  border-radius: var(--radius-full);
  padding: 5px 14px;
  font-family: var(--ff-round);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-gold-lt);
}

.kisoku-item-icon { font-size: 1rem; }

@media (max-width: 680px) {
  .kisoku-banner-inner { flex-direction: column; }
  .kisoku-banner-items { flex-direction: column; }
}

/* ===== 🔰 初心者マーク ===== */
.beginner-block {
  background: linear-gradient(135deg, #f0fdf8, #fff);
  border: 2px solid var(--clr-mint);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
  position: relative;
}

.beginner-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-round);
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--clr-mint);
  color: #fff;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
}

.beginner-term {
  font-family: var(--ff-round);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 6px;
}

.beginner-def {
  font-size: 0.85rem;
  color: var(--clr-text-mid);
  line-height: 1.8;
}

.beginner-def strong { color: var(--clr-mint); }

/* ===== システム会社注意バナー ===== */
.system-note {
  background: #1e2a3a;
  border-left: 5px solid #4fc3f7;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.system-note-icon { font-size: 1.8rem; flex-shrink: 0; }

.system-note-title {
  font-family: var(--ff-round);
  font-size: 0.82rem;
  font-weight: 800;
  color: #4fc3f7;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

.system-note-body {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.8;
}

.system-note-body strong { color: #fff; }

/* ===== チェックリスト ===== */
.checklist-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--clr-greige);
  margin: var(--space-xl) 0;
}

.checklist-title {
  font-family: var(--ff-round);
  font-size: 1rem;
  font-weight: 800;
  color: var(--clr-text);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: var(--space-sm);
  border-bottom: 2px dashed var(--clr-greige);
}

.checklist-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--clr-cream);
  cursor: pointer;
  transition: all 0.2s;
}

.checklist-item:hover { background: var(--clr-beige); }

.checklist-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--clr-mint);
  cursor: pointer;
  margin-top: 2px;
}

.checklist-item label {
  font-size: 0.85rem;
  color: var(--clr-text-mid);
  line-height: 1.6;
  cursor: pointer;
  flex: 1;
}

.checklist-item label strong { color: var(--clr-text); }

.checklist-item.checked label {
  text-decoration: line-through;
  color: var(--clr-text-lt);
}

/* ===== 月次サイクル図解 ===== */
.month-cycle {
  margin: var(--space-lg) 0;
}

.month-cycle-title {
  font-family: var(--ff-round);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--clr-text);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 8px;
}

.month-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  margin-bottom: 6px;
}

.month-cell {
  border-radius: 5px;
  padding: 6px 2px;
  text-align: center;
  font-family: var(--ff-round);
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--clr-beige);
  color: var(--clr-text-lt);
  position: relative;
}

.month-cell.active {
  background: var(--clr-mint);
  color: #fff;
}

.month-cell.active-alt {
  background: var(--clr-lavender);
  color: #fff;
}

.month-cell.active-gold {
  background: var(--clr-gold);
  color: #fff;
}

.month-cell.active-coral {
  background: var(--clr-coral);
  color: #fff;
}

.month-cell.start::before {
  content: '▶';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  color: var(--clr-mint);
}

.month-col-label {
  font-size: 0.58rem;
  color: var(--clr-text-lt);
  display: block;
  margin-top: 1px;
}

.month-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-sm);
}

.month-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--clr-text-mid);
}

.month-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* サブキャッチ（バナーをやめてシンプルなテキストに） */
.hero-catch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-round);
  font-size: clamp(0.8rem, 1.8vw, 0.95rem);
  font-weight: 700;
  color: var(--clr-coral);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.06em;
  animation: fadeSlideUp 0.6s 0.25s ease both;
  /* 下線アクセント */
  position: relative;
  padding-bottom: 2px;
}

.hero-catch::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--clr-coral), transparent);
  border-radius: 2px;
  opacity: 0.6;
}

@media (max-width: 680px) {
  .month-row { gap: 2px; }
  .month-cell { padding: 4px 1px; font-size: 0.55rem; }
}

/* ===== テーブルスクロールラッパー ===== */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
}

/* ===== ハンバーガーボタン ===== */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  z-index: 1100;
  flex-shrink: 0;
}

.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--clr-brown);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.nav-burger.burger--open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-burger.burger--open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-burger.burger--open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* オーバーレイ */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1050;
  backdrop-filter: blur(2px);
}

.nav-overlay.overlay--show {
  display: block;
}

/* ===== モバイル全体 ===== */
@media (max-width: 900px) {

  /* ハンバーガー表示 */
  .nav-burger { display: flex; }

  /* ナビ: ドロワー化 */
  .header-nav {
    display: flex; /* display:noneを上書き（ドロワー表示のため必須） */
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100dvh;
    background: #fff;
    z-index: 1060;
    flex-direction: column;
    align-items: stretch;
    padding: 72px var(--space-md) var(--space-lg);
    gap: 4px;
    overflow-y: auto;
    box-shadow: -4px 0 30px rgba(0,0,0,0.15);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .header-nav.nav--open {
    right: 0;
  }

  .nav-link {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--clr-text);
  }

  /* ドロップダウン: モバイルでは縦展開 */
  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-trigger {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
  }

  .nav-dropdown-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    background: var(--clr-cream);
    border-radius: var(--radius-sm);
    padding: 8px;
    margin-top: 4px;
    opacity: 1;
    transform: none;
    min-width: unset;
    width: 100%;
  }

  .nav-dropdown:hover .nav-dropdown-menu {
    display: none; /* hover無効化 */
  }

  .nav-dropdown.dropdown--touch-open .nav-dropdown-menu {
    display: block;
  }

  .nav-caret {
    transition: transform 0.3s;
  }

  .nav-dropdown.dropdown--touch-open .nav-caret {
    transform: rotate(180deg);
  }

  .ndm-item {
    padding: 8px 10px;
  }

  /* ヒーロー: 1カラム化 */
  .hero {
    grid-template-columns: 1fr;
    padding: 60px var(--space-md) var(--space-xl);
    min-height: auto;
  }

  .hero-content {
    max-width: 100%;
  }

  /* タイトル横並び → 縦積み */
  .hero-title-row {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
  }

  /* 春野希画像: スマホで見やすく中央寄り */
  .hero-haruno-img {
    width: clamp(80px, 24vw, 110px);
    align-self: center;
  }

  /* タイトル行: スマホで縦積み（画像→タイトル順） */
  .hero-title-row {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .hero-book-title {
    font-size: clamp(2.4rem, 10vw, 3.5rem);
    text-align: center;
  }

  .hero-book-title {
    font-size: clamp(2.8rem, 12vw, 4.5rem);
  }

  /* キラキラバナー: 折り返し対応 */
  .hero-sparkle-banner {
    font-size: 0.78rem;
    padding: 5px 14px;
    white-space: normal;
    text-align: center;
  }

  /* A〜Dカード: スマホで横スクロール */
  .him-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: var(--space-sm);
  }

  .him-card {
    min-width: 160px;
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 18px 12px 14px;
  }

  .him-card-emoji { font-size: 1.8rem; }
  .him-card-rule  { font-size: 0.85rem; }
  .him-card-pay   { font-size: 0.72rem; padding: 3px 8px; }
  .him-card-note  { font-size: 0.72rem; }

  /* hero-illust-multi: フル幅 */
  .hero-illust-multi {
    width: 100%;
    margin-top: var(--space-md);
  }

  .hero-illust {
    display: none;
  }

  /* 章ページヒーロー */
  .chapter-page-hero-inner {
    padding: 40px var(--space-md);
  }

  .chapter-page-title {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }

  /* コンテンツ */
  .chapter-body {
    padding: var(--space-lg) var(--space-md);
  }

  .learn-cards {
    grid-template-columns: 1fr;
  }

  .pitfall-grid {
    grid-template-columns: 1fr;
  }

  /* 章ナビ */
  .chapter-nav {
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  .chapter-nav-btn {
    text-align: center;
  }

  /* フッター */
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
  }

  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  /* 就業規則バナー */
  .kisoku-banner-inner {
    flex-direction: column;
  }

  .kisoku-banner-items {
    flex-direction: column;
  }

  /* テーブル */
  table { font-size: 0.78rem; }
  th, td { padding: 8px 10px !important; }

  /* カレンダー比較: 縦積み */
  .calendar-compare {
    grid-template-columns: 1fr;
  }

  /* 2カラム解説: 縦積み */
  .two-col-explain {
    grid-template-columns: 1fr;
  }

  /* フロー比較 */
  .flow-compare {
    flex-direction: column;
  }

  /* 給与シミュレーターボタン: モバイルでは小さく */
  .nav-link--calc .calc-icon { font-size: 1.1rem; }
}

/* ===== スマホ（小）====== */
@media (max-width: 480px) {
  .hero-book-title {
    font-size: clamp(2.4rem, 14vw, 3.5rem);
  }

  /* タイトル横の画像: 非表示にしてスッキリ */
  .hero-haruno-img {
    display: none;
  }

  /* A〜Dカード: 小さい画面でも2列維持 */
  .him-scroll {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .him-card {
    padding: 18px 10px 14px;
    border-radius: 14px;
  }

  .chapter-page-num { font-size: 0.65rem; }

  .chapter-page-tags {
    gap: 4px;
  }

  .chapter-page-tag {
    font-size: 0.68rem;
    padding: 5px 10px;
  }

  .brand-logo {
    gap: 8px;
  }

  .brand-year { font-size: 0.8rem; }
  .brand-main { font-size: 1rem; }

  .calc-panel { width: calc(100vw - 12px); right: 6px; }
}

/* ===== ヒーロー 共感フレーズ ===== */
.hero-empathy {
  margin: var(--space-sm) 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-empathy-q {
  font-family: var(--ff-round);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 800;
  color: var(--clr-coral);
  background: rgba(232, 117, 106, 0.08);
  border: 2px dashed var(--clr-coral-lt);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  display: inline-block;
  line-height: 1.5;
}

.hero-empathy-a {
  font-family: var(--ff-round);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--clr-text-mid);
  line-height: 1.7;
}

.hero-empathy-a strong {
  color: var(--clr-mint);
  font-weight: 800;
}

/* ===== マスコット ===== */
.hero-mascot-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.hero-mascot-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.12));
  animation: float 4s ease-in-out infinite;
}

/* ===== かわいいイラスト装飾 一般 ===== */
.cute-deco {
  display: inline-block;
  font-size: 2rem;
  animation: float 3s ease-in-out infinite;
}

.cute-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  width: 56px;
  height: 56px;
  background: var(--clr-cream);
  border: 3px solid var(--clr-greige);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  animation: float 3.5s ease-in-out infinite;
}

/* ===== ハンバーガーメニュー 強化 ===== */
.header-inner {
  position: relative;
}

/* モバイル: ブランドとハンバーガーを両端に */
@media (max-width: 900px) {
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-md);
  }

  .header-nav {
    border-left: none;
    border-top: 3px solid var(--clr-gold);
  }

  /* ナビ内のリンク色を濃く（白いドロワー上） */
  .header-nav.nav--open .nav-link {
    color: var(--clr-text) !important;
    border-bottom: 1px solid var(--clr-creame, #faf8f5);
  }

  .header-nav.nav--open .nav-link:hover {
    background: var(--clr-beige);
  }

  /* ドロワー内の章ドロップダウン */  
  .header-nav.nav--open .nav-dropdown-menu.nav-dropdown-menu--toc {
    background: #f5f0eb;
  }

  /* 計算ツールボタンはドロワーの最後に */
  .header-nav.nav--open .nav-link--sim {
    margin-top: var(--space-sm);
    background: var(--clr-mint);
    color: #fff !important;
    text-align: center;
    border-radius: var(--radius-full);
    font-weight: 700;
  }
}

/* ===== かわいいセクション区切り ===== */
.section-deco-wave {
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  margin: var(--space-lg) 0;
  opacity: 0.4;
  user-select: none;
}

/* ===== 春野希キャラクター ===== */
.hero-title-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 0;
}

.hero-haruno-img {
  width: clamp(80px, 10vw, 130px);
  flex-shrink: 0;
  border-radius: 16px;
  object-fit: cover;
  animation: haruno-float 5s ease-in-out infinite;
  display: block;
  align-self: flex-end;
  margin-bottom: 4px;
}

@keyframes haruno-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

.hero-haruno-label {
  display: none;
}

/* ===== 「当月」バリエーション比較カード ===== */
.hero-illust-multi {
  width: 100%;
  margin-top: var(--space-xl);
}

.him-label {
  font-family: var(--ff-round);
  font-size: clamp(0.88rem, 1.8vw, 1.1rem);
  font-weight: 800;
  color: var(--clr-brown);
  text-align: center;
  margin-bottom: var(--space-md);
  letter-spacing: 0.04em;
}

.him-scroll {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 4px 0 8px;
}

.him-card {
  flex-shrink: unset;
  width: auto;
  background: rgba(255,255,255,0.97);
  border-radius: 20px;
  padding: 30px 22px 24px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.him-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.28);
}

.him-card-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-round);
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 12px;
  border-radius: 999px;
  color: #fff;
}

.him-card--a .him-card-badge { background: var(--clr-coral); }
.him-card--b .him-card-badge { background: var(--clr-mint); }
.him-card--c .him-card-badge { background: var(--clr-lavender); }
.him-card--d .him-card-badge { background: #e56b4a; }

.him-card--a { border-top: 3px solid var(--clr-coral); }
.him-card--b { border-top: 3px solid var(--clr-mint); }
.him-card--c { border-top: 3px solid var(--clr-lavender); }
.him-card--d { border-top: 3px solid #e56b4a; }

.him-card-emoji { font-size: 2.8rem; margin: 16px 0 10px; }

.him-card-rule {
  font-family: var(--ff-round);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--clr-text);
  margin-bottom: 6px;
}

.him-card-pay {
  font-family: var(--ff-round);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--clr-brown);
  background: var(--clr-beige);
  padding: 6px 16px;
  border-radius: 10px;
  margin-bottom: 12px;
  display: inline-block;
}

.him-card-note {
  font-size: 0.85rem;
  color: var(--clr-text-mid);
  line-height: 1.8;
}

.him-card-note strong {
  color: var(--clr-coral);
  font-weight: 800;
  font-size: 0.95rem;
}

.him-card--b .him-card-note strong { color: var(--clr-mint); }
.him-card--c .him-card-note strong { color: var(--clr-lavender); }

.him-card-note span { font-size: 0.78rem; color: var(--clr-text-lt); }

.him-footer {
  text-align: center;
  font-size: 0.68rem;
  color: var(--clr-text-lt);
  margin-top: 6px;
  font-family: var(--ff-round);
}

/* ===== ターゲット読者フレーズ ===== */
.hero-target {
  font-family: var(--ff-sans);
  font-size: clamp(0.75rem, 1.6vw, 0.85rem);
  font-weight: 400;
  color: var(--clr-text-lt);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
  animation: fadeSlideUp 0.6s 0.4s ease both;
}

/* ===== キラキラバナー（メインキャッチ） ===== */
.hero-sparkle-banner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* 光沢グラデーション */
  background: linear-gradient(
    110deg,
    #c8860a 0%,
    #f0c050 28%,
    #fde88a 48%,
    #f0c050 68%,
    #c8860a 100%
  );
  background-size: 300% 100%;
  animation: shimmer-banner 3s ease-in-out infinite, fadeSlideUp 0.6s 0.1s ease both;
  color: #3d2800;
  font-family: var(--ff-round);
  font-size: clamp(0.96rem, 2.2vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 9px 28px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
  /* 外側グロウ */
  box-shadow:
    0 3px 18px rgba(212, 160, 67, 0.45),
    0 0 0 1px rgba(212, 160, 67, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.5);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* ハイライトスウィープ */
.hero-sparkle-banner::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 60%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.55),
    transparent
  );
  animation: sweep-shine 3s ease-in-out infinite;
  border-radius: inherit;
  pointer-events: none;
}

@keyframes sweep-shine {
  0%   { left: -80%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}

@keyframes shimmer-banner {
  0%   { background-position: 100% 50%; }
  50%  { background-position: 0%   50%; }
  100% { background-position: 100% 50%; }
}

.hsb-star {
  font-size: 0.8rem;
  color: #7a4e00;
  display: inline-block;
  animation: star-twinkle 1.8s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.hsb-star:last-child {
  animation-delay: 0.9s;
}

@keyframes star-twinkle {
  0%   { opacity: 0.35; transform: scale(0.8)  rotate(-10deg); }
  100% { opacity: 1;    transform: scale(1.25) rotate(15deg); }
}

.hsb-text {
  position: relative;
  z-index: 1;
}