/* =========================
   SINGLE PAGE
   ========================= */

:root {
  --single-green: #79b98d;
  --single-green-soft: #eef6ea;
  --single-green-deep: #4f8f6a;
  --single-blue-soft: #eaf6fb;
  --single-blue-line: #d8ebf3;
  --single-cream: #fbf8f1;
  --single-bg: #f9f6ef;
  --single-panel: #fffdf8;
  --single-line: #e7e0d2;
  --single-text: #5a4b3d;
  --single-muted: #7a6d61;
  --single-shadow: rgba(79, 143, 106, 0.08);
  --single-shadow-strong: rgba(79, 143, 106, 0.14);
}

.single-page {
  background: linear-gradient(180deg, #fbfaf5 0%, #f7f4ee 100%);
  color: var(--single-text);
  font-family: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  padding-bottom: 0;
}

.single-page,
.single-page p,
.single-page li,
.single-page td,
.single-page th,
.single-page a,
.single-page button {
  font-family: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
}

/* =========================
   HERO
   ========================= */

.section-box {
  padding: 18px 0 8px;
}

.section-box-inner {
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(180deg, #fff 0%, #fafcf2 100%);
  border: 1px solid var(--single-line);
  border-radius: 22px;
  padding: 28px 24px;
  box-shadow: 0 8px 24px var(--single-shadow);
}

.section-en {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--single-green-deep);
  font-weight: 700;
  margin-bottom: 8px;
  font-family: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.section-title {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  color: var(--single-text);
  font-weight: 700;
  margin: 0;
  font-family: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.single-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--single-muted);
}

.single-meta-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* =========================
   BADGES
   ========================= */

.single-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: var(--single-green-soft);
  color: var(--single-green-deep);
  border: 1px solid var(--single-line);
}

.single-badge.cat-news,
.single-badge.cat-notice {
  background: #eef8df;
  color: #5f8f00;
  border: 1px solid #d8eab5;
}

.single-badge.cat-holiday {
  background: #fff1df;
  color: #c47a00;
  border: 1px solid #f2d2a6;
}

.single-badge.cat-health-info,
.single-badge.cat-lifestyle {
  background: #eaf7e8;
  color: #2f8f4e;
  border: 1px solid #cbe7cf;
}

.single-badge.cat-prevention {
  background: #e8f5ff;
  color: #2b78b8;
  border: 1px solid #c8e4f6;
}

.single-badge.cat-respiratory {
  background: #eef0ff;
  color: #5a63c8;
  border: 1px solid #d4d8ff;
}

.single-badge.cat-allergy {
  background: #fff0f6;
  color: #c04b7d;
  border: 1px solid #f5cce0;
}

.single-badge.cat-vaccination {
  background: #f3fbe0;
  color: #6aa300;
  border: 1px solid #dceab7;
}

.single-badge.cat-checkup {
  background: #f0f7ee;
  color: #4d8c67;
  border: 1px solid #d0e2d6;
}

/* =========================
   MAIN SECTION
   ========================= */

.single-section {
  padding: 12px 14px 56px;
}

.single-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

.single-card {
  background: var(--single-panel);
  border: 1px solid var(--single-line);
  border-radius: 18px;
  box-shadow: 0 6px 18px var(--single-shadow);
  overflow: hidden;
}

.single-thumb img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.single-content {
  padding: 24px 22px;
  line-height: 2;
  color: var(--single-text);
  font-size: 16px;
}

.single-content h2 {
  margin: 1.8em 0 0.7em;
  font-size: 22px;
  color: var(--single-text);
  padding-left: 14px;
  border-left: 5px solid var(--single-green);
  font-weight: 700;
  font-family: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.single-content h3 {
  margin: 1.6em 0 0.6em;
  font-size: 18px;
  color: var(--single-green-deep);
  font-weight: 700;
  font-family: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.single-content p {
  margin: 0 0 1em;
}

.single-content ul,
.single-content ol {
  margin: 0 0 1em 1.4em;
  padding: 0;
}

.single-content a {
  color: var(--single-green-deep);
  text-decoration: underline;
}

.single-content a:hover {
  color: var(--single-green);
}

/* =========================
   BUTTONS
   ========================= */

.single-back {
  margin-top: 24px;
  text-align: center;
}

.single-back a,
.pdf-button,
.single-content a.pdf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--single-green-soft);
  color: var(--single-green-deep);
  border: 1px solid var(--single-line);
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 4px 10px var(--single-shadow);
  transition: 0.2s ease;
}

.single-back a:hover,
.pdf-button:hover,
.single-content a.pdf-button:hover {
  background: #edf8f1;
  transform: translateY(-1px);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 640px) {
  .section-box {
    padding: 14px 14px 12px;
  }

  .section-box-inner {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .section-title {
    font-size: 24px;
  }

  .single-section {
    padding: 12px 14px 48px;
  }

  .single-container {
    padding: 0;
  }

  .single-card {
    border-radius: 14px;
  }

  .single-content {
    padding: 18px 16px;
    font-size: 15px;
  }

  .single-content h2 {
    font-size: 18px;
  }

  .single-content h3 {
    font-size: 16px;
  }

  .single-thumb img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 480px) {
  .section-box-inner {
    padding: 16px 14px;
  }

  .section-title {
    font-size: 21px;
  }

  .single-content {
    padding: 14px;
  }

  .single-content h2 {
    font-size: 17px;
  }

  .single-content h3 {
    font-size: 15px;
  }
}

/* safety */
img {
  max-width: 100%;
  height: auto;
}