/* ===============================================
   ロートこどもみらい財団 メンテナンスページ
   Local assets only; no external dependencies.
   =============================================== */
:root {
  --cream: #fcfaf3;
  --ink: #274e3a;
  --text: #475447;
  --green: #378453;
  --lime: #87ba63;
  --accent: #efc850;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--cream);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}
img { display: block; max-width: 100%; }
.site-wrapper { min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.hero {
  position: relative;
  flex: 1 0 auto;
  isolation: isolate;
  min-height: max(740px, calc(100svh - 77px));
  background: #fcfaf3;
  overflow: hidden;
}
.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(1360px, calc(100% - 100px));
  margin: 0 auto;
  padding: 35px 0 0;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { flex: 0 0 auto; }
.brand-copy { display: flex; flex-direction: column; gap: 5px; }
.brand-name {
  color: var(--ink); font-weight: 800; letter-spacing: .025em;
  font-size: clamp(15px, 1.5vw, 21px); line-height: 1.2; white-space: nowrap;
}
.brand-name-en { font-family: Arial, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .07em; color: #73927a; white-space: nowrap; }
.header-note {
  display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto;
  font-size: 12px; color: #6e996c; font-weight: 700; letter-spacing: .09em;
  background: rgba(252, 250, 243, .9); padding: 9px 14px; border-radius: 99px;
}
.header-dot { width: 9px; height: 9px; border-radius: 50%; background: #efc850; box-shadow: 0 0 0 5px #f6edd0; }
.content {
  position: relative;
  z-index: 2;
  width: min(1360px, calc(100% - 100px));
  margin: 0 auto;
  padding: clamp(80px, 11vh, 128px) 0 98px 48px;
  max-width: 1360px;
  pointer-events: none;
}
.content > * { max-width: 650px; }
/* A softly blended paper halo keeps the message readable over the botanical scene. */
.content::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -40px;
  left: -110px;
  width: 1050px;
  height: 900px;
  background: radial-gradient(ellipse 520px 350px at 390px 390px,
    rgba(252, 250, 243, 1) 0%,
    rgba(252, 250, 243, .99) 40%,
    rgba(252, 250, 243, .82) 65%,
    rgba(252, 250, 243, 0) 100%);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  max-width: none;
  margin-bottom: 22px;
  color: #3b8a57; font-family: Arial, sans-serif;
  letter-spacing: .21em; font-size: 12px; font-weight: 800;
}
.eyebrow-icon { width: 25px; height: 25px; position: relative; border-radius: 50%; background: #e4f0db; }
.eyebrow-icon::before { content: ''; position: absolute; left: 10px; top: 5px; width: 5px; height: 15px; background: #5b9f58; border-radius: 5px; transform: rotate(-16deg); }
.eyebrow-icon::after { content: ''; position: absolute; left: 7px; top: 6px; width: 12px; height: 7px; border-radius: 12px 0; background: #8cbf65; transform: rotate(-27deg); }
h1 {
  margin: 0;
  color: var(--ink); font-size: clamp(37px, 3.7vw, 57px);
  font-weight: 800; letter-spacing: -.065em; line-height: 1.6;
}
.highlight {
  background: linear-gradient(transparent 70%, #f7e7a4 70%, #f7e7a4 90%, transparent 90%);
  background-repeat: no-repeat;
}
.lead { margin: 15px 0 0; color: #388b60; font-weight: 700; font-size: clamp(14px, 1.37vw, 18px); letter-spacing: .09em; line-height: 1.8; }
.separator { display: flex; gap: 8px; align-items: center; margin: 32px 0 30px; }
.separator span { height: 6px; width: 6px; border-radius: 50%; background: #c4d9a5; }
.separator span:nth-child(2) { background: #e8cf7e; }
.separator span:nth-child(3) { width: 80px; height: 1px; border-radius: 0; background: #b6cbab; }
.message { margin: 0; color: #57675d; font-size: 15px; font-weight: 500; line-height: 2.3; letter-spacing: .035em; }
.status {
  display: inline-flex; align-items: center; gap: 12px;
  width: fit-content; margin-top: 28px; padding: 14px 21px;
  border: 1px solid #d7e5ce; border-radius: 99px;
  background: rgba(255, 255, 251, .75); color: #407f55;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 7px 24px rgba(58, 99, 54, .025);
}
.status-icon { color: #d5a528; font-size: 18px; line-height: 1; }
.illustration {
  position: absolute;
  z-index: 0;
  width: min(100%, 1640px);
  right: 0;
  bottom: -6px;
  user-select: none;
  pointer-events: none;
}
.illustration img { width: 100%; height: auto; }
.decor { position: absolute; pointer-events: none; user-select: none; }
.decor-star { top: 26%; right: 11%; z-index: 1; width: 29px; opacity: .8; transform: rotate(-9deg); }
.site-footer {
  position: relative;
  z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 15px;
  background: #f1f6e8; border-top: 1px solid #e5eedb;
  padding: 24px max(50px, calc((100vw - 1360px)/2));
  min-height: 77px;
}
.site-footer p { margin: 0; font-size: 11px; font-weight: 500; color: #688471; letter-spacing: .04em; }
.site-footer small { color: #90a48e; font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .06em; white-space: nowrap; }
@media (min-width: 1600px) {
  .hero { min-height: max(780px, calc(100svh - 77px)); }
  .illustration { left: 50%; right: auto; transform: translateX(-50%); width: min(100%, 1750px); }
}
@media (max-width: 1200px) and (min-width: 981px) {
  .site-header, .content { width: calc(100% - 70px); }
  .content { padding-left: 0; padding-top: 95px; }
  .content > * { max-width: 630px; }
  h1 { font-size: clamp(37px, 4.2vw, 50px); }
  .message { font-size: 14px; }
  .illustration { width: 113%; right: -12%; }
  .site-footer { padding-left: 35px; padding-right: 35px; }
}
@media (max-width: 980px) {
  .hero { display: flex; flex-direction: column; min-height: auto; overflow: hidden; }
  .site-header { width: calc(100% - 50px); padding-top: 23px; }
  .header-note { font-size: 10px; }
  .brand-mark { width: 49px; height: 49px; }
  .brand-name { font-size: 18px; }
  .content {
    width: calc(100% - 90px);
    flex: 0 0 auto;
    padding: 70px 0 0;
    margin: 0 auto;
  }
  .content > * { max-width: 690px; }
  .content::before { display: none; }
  h1 { font-size: clamp(37px, 5vw, 52px); }
  .illustration {
    display: block; position: relative; margin: 8px 0 0 auto;
    right: auto; bottom: auto; width: min(78%, 680px);
  }
  .decor-star { top: 150px; right: 13%; width: 20px; }
  .site-footer { padding: 23px 25px; }
}
@media (max-width: 620px) {
  .site-header { width: calc(100% - 34px); padding-top: 17px; }
  .brand { gap: 8px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-copy { gap: 4px; }
  .brand-name { font-size: 16px; letter-spacing: -.025em; }
  .brand-name-en { font-size: 6px; letter-spacing: .02em; }
  .header-note { display: none; }
  .content { width: calc(100% - 42px); padding: 42px 0 0; }
  .eyebrow { font-size: 10px; margin-bottom: 17px; gap: 8px; }
  .eyebrow-icon { width: 22px; height: 22px; }
  h1 { font-size: clamp(31px, 8.5vw, 40px); line-height: 1.6; letter-spacing: -.075em; }
  .lead { font-size: 13px; line-height: 1.9; letter-spacing: .035em; margin-top: 13px; }
  .separator { margin: 22px 0 17px; }
  .message { font-size: 12.5px; line-height: 2; letter-spacing: .01em; }
  .desktop-break { display: none; }
  .status { margin-top: 23px; padding: 11px 15px; gap: 7px; font-size: 11px; line-height: 1.5; }
  .status-icon { font-size: 16px; }
  .illustration { width: calc(100% + 14px); max-width: 540px; margin-top: 14px; margin-right: -14px; }
  .decor-star { top: 98px; right: 12%; width: 14px; }
  .site-footer { flex-direction: column; align-items: center; text-align: center; gap: 11px; padding: 18px 15px 16px; }
  .site-footer p { font-size: 10px; }
  .site-footer small { font-size: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .eyebrow-icon { animation: gently-bob 3.8s ease-in-out infinite; }
  @keyframes gently-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
}