@charset "UTF-8";
* { box-sizing: border-box; }
html { background: #182534; }
body { margin: 0; color: #fff; font-family: Arial, "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; }
.scenery { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.scenery-frame { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s linear; }
.scenery-frame.is-active { opacity: 1; }
.landing { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: clamp(28px, 5.4vh, 60px) 24px clamp(36px, 15vh, 164px); }
.conference-logo { position: absolute; top: 5%; left: 3.2%; width: clamp(70px, 7.4vw, 145px); height: auto; }
.heading { width: min(100%, 1100px); text-align: center; }
h1 { margin: 0 auto; width: 88%; }
h1 img { width: 100%; height: auto; display: block; transform: scale(.9); transform-origin: center top; filter: drop-shadow(1px 2px 3px #263344); }
.schedule { margin: clamp(18px, 3.2vh, 36px) auto 0; width: 70%; }
.schedule img { width: 100%; height: auto; display: block; filter: drop-shadow(1px 2px 3px #263344); }
.entry { margin-top: auto; padding-top: 60px; text-align: center; }
.login { display: inline-block; padding: 12px 30px; border-radius: 40px; background: #8c1717; color: #fff; text-decoration: none; font-size: clamp(20px, 1.5vw, 30px); font-weight: 700; line-height: 1.45; transition: background .2s; }
.login:hover { background: #ae2424; }
.invitee-login-link { margin: 12px 0 0; font-size: 16px; line-height: 1.5; text-shadow: 0 1px 3px #000; }
.invitee-login-link a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.contact { margin-top: clamp(25px, 3.7vh, 42px); font-style: normal; font-weight: 700; font-size: clamp(14px, 1.1vw, 22px); line-height: 1.45; text-shadow: 0 2px 4px #000, 0 0 9px #000; }
.contact p { margin: 0; }
.contact span { display: inline-block; }
.contact a { color: inherit; text-underline-offset: 3px; }
.referror { max-width: 760px; padding: 14px; margin: 0 auto 20px; background: #fff; color: #721b1b; line-height: 1.6; }
@media (min-width: 1600px) { .heading { width: 1100px; } }
@media (max-width: 900px) {
  .landing { padding: 35px 22px max(45px, 9svh); }
  .conference-logo { position: static; width: 82px; margin-bottom: 24px; align-self: flex-start; }
  .heading { width: 100%; }
  h1 { width: min(100%, 700px); }
  .schedule { width: min(95%, 610px); margin-top: 24px; }
  .scenery-frame { background-position: 56% center; }
  .contact { font-size: 16px; }
}
@media (max-width: 540px) {
  .landing { padding: max(22px, env(safe-area-inset-top)) 16px max(30px, env(safe-area-inset-bottom)); }
  .conference-logo { width: 65px; margin-bottom: 25px; }
  .scenery::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0001, transparent 40%, #0006); }
  .schedule { width: 100%; margin-top: 22px; }
  .entry { width: 100%; padding-top: 80px; }
  .login { font-size: 20px; padding: 13px 28px; }
  .contact { font-size: 13px; line-height: 1.7; margin-top: 28px; }
}
@media (max-height: 540px) and (min-width: 541px) {
  .landing { padding: 20px 24px; }
  .conference-logo { position: absolute; width: 65px; }
  .heading { width: 60%; }
  .schedule { margin-top: 12px; width: 90%; }
  .entry { padding-top: 24px; }
  .login { padding: 8px 25px; font-size: 20px; }
  .contact { margin-top: 15px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .scenery-frame { transition: none; } }
/* The supplied logo includes transparent margins. */
.conference-logo { transform: scale(1.65); }
.schedule-text { display: none; }
@media (max-width: 540px) {
  .schedule img { display: none; }
  .schedule-text { display: block; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 17px; font-weight: 700; line-height: 1.8; text-shadow: 0 2px 4px #263344; }
  .schedule-text span { display: inline-block; }
}
/* PC: lower the photo framing, extending below the viewport to avoid gaps. */
@media (min-width: 901px) {
  .scenery-frame { bottom: -60px; }
}
/* PC: move the login and contact group down, keeping a bottom margin on short screens. */
@media (min-width: 901px) and (min-height: 541px) {
  .landing { padding-bottom: max(20px, calc(clamp(36px, 15vh, 164px) - 30px)); }
}