/* ヘッダー・タイトルバナー・フッターを同じ配色で揃えます。 */
.topbar {
  height: 86px;
  background: #fff;
  border-bottom: 1px solid #dce2d5;
  box-shadow: 0 3px 16px #183c3505;
}
.site-identity {display:flex;align-items:center;gap:12px;}
.site-identity-mark {
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid #bdcaab;border-radius:12px;
  background:#d9fff2;
  color:#0d4c51;
}
.site-identity strong {display:block;font-size:13px;font-weight:700;}
.site-identity div>span {display:block;margin-top:5px;font:600 8px/1.4 system-ui;letter-spacing:1.6px;color:#89917b;}
.topbar .account-button {border-color:#cbd8c8;box-shadow:0 2px 4px #183c3505;}
.topbar .language select {max-width:155px;}
.brand img {border-radius:12px;box-shadow:0 4px 12px #183c3512;}
.mobile-brand small {display:block;margin-top:4px;font:600 6px/1.3 system-ui;letter-spacing:1.3px;color:#8b957c;}


:root {--ink:#172c38;--muted:#687783;--paper:#f5f7fa;--line:#e0e6eb;--green:#126557;}
/* 桜の景色は余白にだけ薄く重ね、教材や文字の背景はそのまま保ちます。 */
.shell {position:relative;isolation:isolate;}
.shell::before {
  content:"";position:fixed;inset:0 0 0 228px;z-index:-1;pointer-events:none;
  background:url('/art/sakura-background.webp') center bottom / 100% auto no-repeat;
  opacity:.242;
}
@media(max-width:1150px) {.shell::before {left:190px;}}
@media(max-width:700px) {.shell::before {left:0;background-size:auto 100%;background-position:right bottom;opacity:.1936;}}
.rail {background:#fff;}
.rail .nav-item.active {background:#dffff2;color:#123b36;}
.rail-bottom .rail-motto {font:850 26px/1.13 system-ui;letter-spacing:-1px;color:#c5d1d7;margin:0;}
.brand-hero {
  position:relative;isolation:isolate;overflow:hidden;min-height:465px;
  margin-bottom:24px;border:0;border-radius:10px 38px 10px 38px;
  background:#152736;color:#fff;box-shadow:none;
}
.brand-hero::before {content:"";position:absolute;z-index:-2;inset:0 0 0 43%;background:#1ebfcb;clip-path:polygon(30% 0,100% 0,100% 100%,0 100%);}
.brand-hero::after {content:"";position:absolute;right:0;top:0;width:24%;height:8px;background:#d5ff59;pointer-events:none;}
.brand-hero-art {position:absolute;inset:-3% -3% auto auto;z-index:-1;width:65%;height:106%;object-fit:contain;max-width:none;}
.brand-hero-copy {position:relative;width:48%;padding:38px 40px 43px;}
.brand-hero-label {display:inline-block;font-size:11px;font-weight:750;color:#b6ffe8;line-height:1.8;letter-spacing:.04em;}
.brand-hero h1 {font:900 clamp(66px,5.8vw,94px)/.95 system-ui,sans-serif;letter-spacing:-5px;margin:23px 0 23px;color:white;}
.brand-hero h1>span {display:block;white-space:nowrap;color:#d5ff59;}
.brand-hero-dot {color:#fc637a;}
#site-title:focus {outline:none;}
.brand-hero-catch {font-size:17px;font-weight:650;line-height:1.85;color:#e5eef1;max-width:360px;}
.brand-hero-actions {display:flex;align-items:center;flex-wrap:wrap;gap:16px 21px;margin-top:24px;}
.brand-hero-actions .primary {background:#d5ff59;color:#152736;border-radius:9px;padding:12px 18px;font-size:12px;font-weight:800;gap:16px;box-shadow:0 4px 0 #91b339;}
.brand-hero-actions .primary:hover {background:#e0ff85;transform:translateY(-1px);}
.hero-play-link {display:flex;align-items:center;gap:8px;color:#fff;font-size:11px;max-width:210px;line-height:1.7;}
.hero-play-link svg {width:19px;}
.hero-play-link:hover {color:#d5ff59;}
.hero-side-note {position:absolute;right:20px;bottom:15px;z-index:2;font:850 8px/1.4 system-ui;letter-spacing:2px;color:#0e3c43;}
.site-footer {
  position:relative;margin:34px 0 26px;padding:32px 34px 20px;
  display:block;color:#e7eddc;border:1px solid #294c3d;border-radius:22px;
  background:#172b38;
  box-shadow:inset 0 3px #d5ff59;
}
.footer-main {display:flex;align-items:center;justify-content:space-between;gap:32px;}
.footer-logo {display:inline-flex;align-items:center;gap:12px;font:850 26px/1.2 system-ui,sans-serif;letter-spacing:-.7px;}
.footer-logo img {border:1px solid #becda844;border-radius:12px;}
.site-footer .footer-identity p {margin-top:12px;color:#c5d1bc;font-size:11px;line-height:1.9;}
.footer-nav {display:flex;gap:26px;align-items:center;}
.footer-nav a {display:flex;flex-direction:column;gap:5px;font-size:12px;line-height:1.8;}
.footer-nav a:hover {color:#e2c982;}
.footer-nav .hybrid-km {font-size:10px;color:#c5d1bc;}
.footer-nav .footer-top {flex-direction:row;align-items:center;gap:14px;margin-left:10px;}
.footer-top>span {width:34px;height:34px;display:grid;place-items:center;border:1px solid #a9ba9366;border-radius:50%;font-size:18px;}
.footer-credits {display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid #bbcaaa33;padding-top:20px;margin-top:26px;}
.site-footer .footer-credits p {font:10px/1.7 system-ui;color:#aebfa8;margin:0;}
.footer-credits strong {font-size:15px;letter-spacing:.02em;color:#d5ff59;margin-left:5px;}
.footer-credits small {font:10px/1.8 system-ui;color:#b8c6af;}

@media (max-width:1100px) {
  .footer-main {align-items:flex-start;gap:24px;}
  .footer-nav {gap:20px;flex-wrap:wrap;justify-content:flex-end;}
  .footer-nav .footer-top {margin-left:0;}
}
@media (max-width:700px) {
  .topbar {height:76px;padding:0 18px;gap:10px;}
  .site-identity {display:none;}
  .mobile-brand {display:flex;font-size:12px;gap:8px;white-space:nowrap;}
  .topbar .top-actions {gap:6px;min-width:0;}
  .topbar .language select {max-width:109px;font-size:10px;padding:6px 2px;}
  .topbar .account-button {padding:8px;gap:6px;flex:none;}
  .topbar .account-button span {display:none;}
  .topbar .account-button .user-avatar {width:25px;height:25px;}
  main {padding-top:24px;}
  .site-footer {margin:27px 0 18px;padding:29px 24px 22px;border-radius:19px;}
  .footer-main {display:block;}
  .footer-logo {font-size:25px;}
  .site-footer .footer-identity p {font-size:11px;}
  .footer-nav {margin-top:25px;justify-content:flex-start;gap:18px 25px;}
  .footer-nav .footer-top {font-size:11px;}
  .footer-credits {display:block;margin-top:24px;padding-top:17px;}
  .footer-credits small {display:block;margin-top:12px;font-size:9px;}
}
@media (max-width:359px) {
  .topbar {padding:0 12px;gap:5px;}
  .mobile-brand {font-size:11px;gap:6px;}
  .topbar .language select {max-width:95px;font-size:9px;}
}

@media(max-width:1100px) {
  .brand-hero {min-height:425px;}
  .brand-hero-copy {padding:31px 27px 34px;width:50%;}
  .brand-hero h1 {font-size:67px;letter-spacing:-3.5px;}
  .brand-hero-catch {font-size:15px;max-width:285px;}
  .brand-hero-actions {gap:17px;margin-top:22px;}
  .brand-hero-art {right:-6%;width:65%;}
}
@media(max-width:700px) {
  main {padding-top:20px;}
  .brand-hero {display:flex;flex-direction:column;min-height:0;border-radius:8px 26px 8px 26px;margin-bottom:22px;}
  .brand-hero-copy {order:0;z-index:1;width:100%;padding:26px 25px 0;}
  .brand-hero-label {font-size:10px;}
  .brand-hero h1 {font-size:62px;line-height:.93;letter-spacing:-3px;margin:17px 0 16px;}
  .brand-hero h1>span {display:block;}
  .brand-hero-catch {font-size:13px;max-width:270px;line-height:1.9;}
  .brand-hero-actions {gap:12px 18px;margin-top:17px;}
  .brand-hero-actions .primary {font-size:11px;padding:10px 13px;gap:10px;min-height:43px;}
  .hero-play-link {font-size:10px;max-width:135px;}
  .brand-hero-art {position:relative;order:1;inset:auto;width:110%;height:auto;margin:-4px -5% -12px;}
  .brand-hero::before {inset:43% 0 0;background:#1ebfcb;clip-path:polygon(0 38%,100% 0,100% 100%,0 100%);}
  .hero-side-note {bottom:12px;right:14px;font-size:7px;}
  .mobile-section-nav a.active {background:#dffff2;border-color:#b3e8d3;}
}
@media(max-width:359px) {
  .mobile-section-nav a {gap:6px;padding:11px 9px;}
  .mobile-section-nav .hybrid-ja,.mobile-section-nav [lang=ja] {font-size:11px;white-space:nowrap;}
  .brand-hero-copy {padding:23px 21px 0;}
  .brand-hero h1 {font-size:53px;}
  .brand-hero-catch {font-size:12px;}
  .brand-hero-actions {gap:11px;}
  .hero-play-link {max-width:112px;font-size:9px;}
}