@charset "UTF-8";
:root{color-scheme:light;--ink:#29486b;--blue:#245b98;--line:#d5e5f2;--sky:#edf7ff;--white:#fff}*{box-sizing:border-box}body{margin:0;background:var(--sky);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:16px;line-height:1.9;overflow-wrap:anywhere}a{color:var(--blue)}a:focus-visible{outline:3px solid #245b98;outline-offset:5px}img{display:block;max-width:100%;height:auto}h1,h2,h3{line-height:1.6;font-weight:500}h1{font-size:clamp(1.35rem,4vw,2rem)}h2{font-size:clamp(1.4rem,4vw,2rem);margin:.5rem 0 1.2rem}h3{font-size:1.15rem}p{margin:.7rem 0 1.2rem}.entrance{text-align:center;padding:40px 20px 56px;background:linear-gradient(#e7f4ff,#fff)}.logo{width:320px;margin:-24px auto -20px}.eyebrow{font-size:.9rem;letter-spacing:.16em;color:var(--blue)}.enter{display:inline-flex;min-height:52px;min-width:200px;align-items:center;justify-content:center;margin:16px auto 0;border:1px solid #789fbe;background:white;text-decoration:none;letter-spacing:.2em;border-radius:28px}main{max-width:1000px;margin:auto;background:var(--white)}section{padding:56px 24px;border-top:1px solid var(--line);scroll-margin-top:16px}.heading{text-align:center;margin-bottom:28px}.visual{width:100%}.copy{text-align:center;margin:28px auto 0;max-width:650px}.hero{background:#f7fbff;text-align:center}.hero video{display:block;width:min(100%,360px);height:auto;aspect-ratio:1080 / 1916;margin:0 auto 20px;background:#e7f2fa}.text-link{display:inline-block;padding:12px}.text-section{text-align:center;padding-block:64px;background:#f4faff}.banners{max-width:640px;margin:auto}.banner{display:block;min-height:48px;margin:8px auto}.facts{margin:0}.facts>div{padding:16px 0;border-bottom:1px solid var(--line)}dt{font-size:.9rem}dd{margin:4px 0 0}strong{font-weight:600}.details{padding-top:24px}.note{font-size:.875rem}.store,.application{max-width:640px;margin:28px auto}.store address{font-style:normal}.application{padding:24px 0}ul,ol{padding-left:1.5rem}li{margin:.5rem 0}.producer{text-align:center;padding:24px}#closing{padding:0}footer{text-align:center;padding:36px 20px}.skip{position:absolute;top:-100px;left:16px;padding:12px;background:white;z-index:2}.skip:focus{top:12px}@media(min-width:760px){section{padding:64px 48px}.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}.details{padding-top:0}.entrance{padding-top:48px}.text-section{padding-block:80px}}
/* Entrance coordinates and typography scale with the portrait asset. */
[hidden]{display:none!important}
body.entry-pending{overflow-x:hidden}
.entrance{position:relative;isolation:isolate;container-type:inline-size;width:100%;max-width:1000px;height:auto;min-height:0;margin-inline:auto;padding:0;overflow:hidden;aspect-ratio:1080 / 1916;background:#e7f4ff;text-align:center}
.entrance-video{display:block;width:100%;height:auto;aspect-ratio:1080 / 1916;object-fit:contain}
.entrance-overlay{position:absolute;inset:0;z-index:2;transition:opacity .4s}
.entrance-copy{position:absolute;top:8%;left:5%;right:5%;color:#28639c;text-align:center;text-shadow:0 1px 8px white}
.entrance-copy .eyebrow{font-size:clamp(12px,2.6cqw,26px);line-height:1.6;letter-spacing:.12em;margin:0 0 2cqw}
.entrance-copy h1{font-family:"Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro","Arial Rounded MT Bold","Yu Gothic",sans-serif;font-weight:900;font-size:clamp(20px,5.5cqw,55px);line-height:1.5;letter-spacing:0;color:#559bd5;-webkit-text-stroke:clamp(2px,.5cqw,5px) white;paint-order:stroke fill;text-shadow:0 .35cqw 0 #c4e6fb,0 .5cqw 1.2cqw #91bddd80;margin:0 0 2cqw}
.entrance-copy>p:last-child{font-family:"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;font-size:clamp(12px,2.9cqw,29px);font-weight:600;line-height:1.6;letter-spacing:.04em;margin:0}
.entrance-overlay .enter{position:absolute;top:25%;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:48%;min-width:0;min-height:48px;height:9cqw;margin:0;padding:0 3cqw;border:1px solid #789fbe;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 .6cqw 2cqw #6397bd26;color:var(--blue);font:inherit;font-size:clamp(16px,3cqw,30px);letter-spacing:.2em;cursor:pointer}
.entrance.is-playing .entrance-overlay{opacity:0;pointer-events:none;visibility:hidden}
.entrance::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(240,249,255,.22),transparent 36%);transition:opacity .4s}
.entrance.is-playing::after{opacity:0}
.entrance .hero-continue{position:absolute;top:27%;left:50%;transform:translateX(-50%);z-index:3;max-width:90%;min-height:44px;padding:10px 20px;border:0;border-radius:999px;background:rgba(255,255,255,.94);color:var(--blue);font:inherit;font-size:clamp(12px,2cqw,20px);cursor:pointer}
.video-status{position:absolute;top:2%;left:5%;right:5%;z-index:3;margin:0;background:rgba(255,255,255,.95)}.video-status:empty{display:none}
#concept>.visual{width:calc(100% + 48px);max-width:none;margin-inline:-24px}
@media(min-width:760px){#concept>.visual{width:calc(100% + 96px);margin-inline:-48px}}
@media(prefers-reduced-motion:reduce){.entrance-overlay,.entrance::after{transition:none}}

/* Recruitment is one coherent vertical group rather than unequal columns. */
#recruit{background:linear-gradient(180deg,#f5fbff 0%,#eaf5ff 55%,#f9fcff 100%)}
#recruit .split{display:flex;flex-direction:column;gap:0;max-width:680px;margin-inline:auto}
#recruit .split>.visual{width:100%;height:auto}
#recruit .details{width:100%;padding:28px;background:rgba(255,255,255,.92);border:1px solid #d5e5f2;border-top:0;border-radius:0 0 20px 20px}
#recruit .details h3{margin:0 0 12px;font-weight:600}
#recruit .details>p{margin:0 0 20px}
#recruit .facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
#recruit .facts>div{padding:12px 0}
#recruit .details ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:0;padding-left:1.25rem}
#recruit .details li{margin:0;line-height:1.7}
#recruit .application{max-width:680px;margin:24px auto 16px;padding:24px 28px;background:rgba(255,255,255,.92);border:1px solid #d5e5f2;border-radius:20px}
#recruit .application h3{margin:0 0 16px;font-weight:600}
#recruit .application ol{margin:0;padding-left:1.5rem}
#recruit .application li{margin:0;padding:8px 0;line-height:1.7}
#recruit .banners{max-width:680px}
@media(max-width:540px){#recruit .details,#recruit .application{padding:22px 18px}#recruit .details ul{grid-template-columns:1fr}#recruit .facts{gap:12px}}

/* Ungated hero and more compact reading flow. */
.entrance::after{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
section{padding-block:32px}.heading{margin-bottom:18px}.heading p{margin-bottom:8px}h2{margin-bottom:12px}.copy{margin-top:16px}.copy p{margin-bottom:8px}
.text-section{padding-block:32px}.text-section p:last-child{margin-bottom:0}
#menu .split{display:block}#menu .split>.visual{width:100%;height:auto}#menu .details{padding:16px 0 0}
#menu .facts{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}#menu .facts>div{padding:10px 0}#menu .details p{margin:8px 0 0}
.store{margin-block:16px}.store .facts>div{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:8px 0}.store dd{margin:0}
#recruit .details{padding:20px}#recruit .facts{margin-bottom:16px}#recruit .details>p{margin-bottom:12px}
#recruit .application{padding:14px 20px;margin:16px auto 8px}#recruit summary{cursor:pointer;font-weight:600;min-height:44px;align-content:center}#recruit .application[open] summary{margin-bottom:12px}
.producer{padding:16px}.producer p{margin:0}footer{padding:24px 20px}footer p{margin:4px 0}
@media(min-width:760px){section{padding-block:40px}.text-section{padding-block:40px}}

/* Existing artwork joined by light, compact Japanese section headings. */
main {
  background-color: #f8fcff;
  background-image: radial-gradient(ellipse at 0% 20%, #dcefff80, transparent 55%),
    radial-gradient(ellipse at 100% 70%, #e5eaff70, transparent 55%),
    repeating-linear-gradient(135deg, transparent 0 38px, #91bde00a 38px 39px, transparent 39px 78px);
}
main > section { border-top: 0; }
#concept, #interior, #sns { background: linear-gradient(180deg, #ffffff90, #f4faff30); }
#about { background: linear-gradient(135deg, #e4f3ffb3, #ffffffb3 55%, #eaf0ff80); }
#menu, #access { background: linear-gradient(180deg, #ffffffb3, #edf7ff80); }
main .eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 18px;
  border: 1px solid #bdd9ec;
  border-radius: 999px;
  background: #ffffffb3;
  color: #36658b;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.7;
}
main h2 {
  font-family: 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .025em;
  text-shadow: 0 2px 0 #fff;
}
#menu .details, #access .store {
  padding: 16px;
  border: 1px solid #d5e5f2;
  border-radius: 16px;
  background: #ffffffd9;
}
#access .facts > div { grid-template-columns: minmax(7.5em, auto) 1fr; gap: 12px; }
#recruit .details, #recruit .application { box-shadow: 0 5px 18px #6b9bb30a; }
main a:focus-visible, main summary:focus-visible { outline: 3px solid #528db8; outline-offset: 4px; }

/* Rounded display lettering, limited to the large Japanese headings. */
main h2 {
  font-family: 'Mochiy Pop One', 'Hiragino Maru Gothic ProN', sans-serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 5.4vw, 2rem);
  line-height: 1.85;
  letter-spacing: .015em;
  color: #1761db;
  text-shadow: none;
  text-wrap: balance;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  main h2 {
    background-image: linear-gradient(125deg, #164bc8 8%, #176ae8 38%, #299edb 68%, #3264d6 100%);
    background-size: 160% 100%;
    background-position: 50% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 3px 2px #88bce333);
  }
}
@media (prefers-reduced-motion: no-preference) {
  main h2.heading-bloom { animation: heading-bloom 1.15s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes heading-bloom {
    0% { opacity: .35; transform: scale(.94); background-position: 0% 50%; }
    65% { opacity: 1; transform: scale(1); }
    100% { opacity: 1; transform: scale(1); background-position: 50% 50%; }
  }
}
@media (forced-colors: active) {
  main h2 { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; filter: none; }
}