:root {
  --navy: #102a43;
  --navy-2: #0a1d2d;
  --paper: #f3f6f7;
  --white: #ffffff;
  --ink: #102a43;
  --teal: #16b3a3;
  --yellow: #ffc857;
  --coral: #ff6b5a;
  --blue: #2f6fed;
  --line: rgba(16, 42, 67, .18);
  --sans: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.05; letter-spacing: -.05em; }
.skip-link { position: fixed; z-index: 2000; top: -80px; left: 16px; padding: 10px 16px; background: white; }
.skip-link:focus { top: 16px; }
.label { margin-bottom: 18px; color: var(--blue); font-size: .68rem; font-weight: 900; letter-spacing: .19em; }

.utility-bar { min-height: 34px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; color: white; background: var(--navy-2); font-size: .56rem; letter-spacing: .16em; }
.utility-bar p { margin: 0; }
.utility-bar a { color: var(--yellow); }

.site-header { position: sticky; z-index: 500; top: 0; min-height: 92px; padding: 0 28px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 42px; background: rgba(243,246,247,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.identity { display: flex; align-items: center; gap: 13px; }
.identity img { width: 56px; height: 56px; object-fit: contain; }
.identity span { display: grid; line-height: 1.22; }
.identity small { font-size: .54rem; font-weight: 700; letter-spacing: .1em; }
.identity strong { margin-top: 4px; font-size: .92rem; }
.main-nav { display: flex; gap: 30px; }
.main-nav a { display: grid; gap: 1px; font-size: .76rem; font-weight: 800; }
.main-nav span { color: var(--teal); font-size: .52rem; letter-spacing: .12em; }
.main-nav a:hover { color: var(--coral); }
.nav-contact { padding: 15px 20px; display: flex; gap: 22px; color: white; background: var(--navy); font-size: .66rem; font-weight: 900; letter-spacing: .13em; }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { width: 44px; height: 44px; display: grid; place-content: center; gap: 7px; list-style: none; cursor: pointer; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary i { width: 26px; height: 2px; background: var(--navy); }
.mobile-menu nav { position: absolute; top: 55px; right: 0; width: 260px; padding: 14px; display: grid; color: white; background: var(--navy); box-shadow: 0 24px 60px rgba(10,29,45,.25); }
.mobile-menu nav a { padding: 12px; border-bottom: 1px solid rgba(255,255,255,.14); }

.poster { min-height: 770px; display: grid; grid-template-columns: minmax(430px, 42%) 1fr 92px; background: var(--white); border-bottom: 1px solid var(--navy); }
.poster-copy { position: relative; z-index: 2; padding: clamp(70px, 8vw, 125px) 4vw 70px 6vw; display: flex; flex-direction: column; justify-content: center; background: var(--paper); }
.poster-copy::after { content: ""; position: absolute; z-index: -1; right: -115px; top: 0; width: 180px; height: 100%; background: var(--paper); clip-path: polygon(0 0, 36% 0, 100% 100%, 64% 100%); }
.poster-kicker { margin-bottom: 28px; color: var(--coral); font-size: .65rem; font-weight: 900; letter-spacing: .18em; }
.poster h1 { margin: 0 0 30px; font-size: clamp(4rem, 7.5vw, 7.5rem); font-weight: 900; }
.poster h1 span, .poster h1 strong, .poster h1 em { display: block; }
.poster h1 strong { color: var(--blue); }
.poster h1 em { color: var(--coral); font-style: normal; }
.poster-lead { max-width: 440px; margin-bottom: 42px; font-size: 1rem; font-weight: 700; line-height: 2; }
.poster-link { width: fit-content; display: flex; gap: 60px; align-items: center; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-size: .78rem; font-weight: 900; }
.poster-photo { position: relative; margin: 0; min-width: 0; overflow: hidden; background: #dce7ec; }
.poster-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: photo-in .9s cubic-bezier(.2,.8,.2,1) both; }
.poster-photo figcaption { position: absolute; left: 30px; bottom: 28px; padding: 15px 18px; display: grid; color: var(--navy); background: var(--yellow); box-shadow: 8px 8px 0 var(--navy); }
.poster-photo figcaption b { font-size: .56rem; letter-spacing: .14em; }
.poster-photo figcaption span { margin-top: 3px; font-size: .76rem; font-weight: 800; }
.poster-data { display: grid; grid-template-rows: repeat(3, 1fr); background: var(--navy); }
.poster-data div { padding: 12px 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: white; border-bottom: 1px solid rgba(255,255,255,.18); writing-mode: vertical-rl; }
.poster-data span { color: var(--teal); font-size: .5rem; letter-spacing: .15em; }
.poster-data strong { margin-top: 12px; font-size: .64rem; letter-spacing: .1em; }

.signal-strip { overflow: hidden; padding: 13px 0; color: var(--navy); background: var(--yellow); border-bottom: 2px solid var(--navy); font-size: .72rem; font-weight: 900; letter-spacing: .13em; white-space: nowrap; }
.signal-strip div { width: max-content; animation: marquee 22s linear infinite; }
.signal-strip i { display: inline-block; width: 10px; height: 10px; margin: 0 25px; background: var(--coral); transform: rotate(45deg); }

.section-code { padding-top: 7px; display: flex; flex-direction: column; border-top: 5px solid var(--navy); }
.section-code span { font-size: .56rem; font-weight: 900; letter-spacing: .13em; }
.section-code b { font-size: 5rem; line-height: 1; }
.section-code.inverse { color: white; border-color: var(--teal); }

.declaration { padding: 140px 6vw; display: grid; grid-template-columns: 140px 1fr; gap: 7vw; background: var(--white); border-bottom: 1px solid var(--navy); }
.declaration-main { max-width: 1100px; }
.declaration h2 { margin: 0 0 65px; font-size: clamp(3rem, 6.5vw, 7rem); font-weight: 900; }
.declaration mark { color: var(--teal); background: transparent; }
.declaration-body { margin-left: 24%; display: grid; grid-template-columns: 1fr 1fr; gap: 45px; }
.declaration-body p { margin: 0; font-weight: 700; line-height: 2; }
.declaration blockquote { margin: 75px 0 0 24%; padding: 30px 0 0; max-width: 760px; border-top: 1px solid var(--navy); font-size: .84rem; line-height: 2; }
.declaration blockquote span { display: block; margin-bottom: 9px; color: var(--coral); font-size: .56rem; font-weight: 900; letter-spacing: .12em; }

.actions { color: white; background: var(--navy); }
.actions-head { padding: 105px 6vw 70px; display: grid; grid-template-columns: 140px 1fr 320px; gap: 7vw; align-items: end; }
.actions-head .label { color: var(--teal); }
.actions-head h2 { margin: 0; font-size: clamp(3.6rem, 7vw, 7rem); }
.actions-head > p { margin: 0; color: #b9cbd7; font-weight: 700; }
.action-rows { margin: 0; padding: 0; list-style: none; }
.action-rows li { min-height: 190px; padding: 36px 6vw; display: grid; grid-template-columns: 100px 1fr 1.6fr auto; gap: 45px; align-items: center; color: var(--navy); border-top: 2px solid var(--navy); transition: padding .25s ease; }
.action-rows li:hover { padding-left: 7vw; }
.action-rows .observe { background: var(--teal); }
.action-rows .talk { background: var(--yellow); }
.action-rows .move { background: var(--coral); }
.row-no { font-size: .6rem; font-weight: 900; letter-spacing: .13em; }
.action-rows h3 { margin: 0; font-size: clamp(3rem, 5vw, 5rem); }
.action-rows p { max-width: 620px; margin: 0; font-weight: 700; line-height: 1.9; }
.action-rows strong { font-size: .62rem; letter-spacing: .15em; writing-mode: vertical-rl; }

.entry { min-height: 650px; padding: 100px 6vw; display: grid; grid-template-columns: 1fr .8fr .8fr; gap: 70px; align-items: center; color: white; background: var(--blue); }
.entry .label { color: var(--yellow); }
.entry h2 { margin: 0; font-size: clamp(3rem, 5.6vw, 6rem); }
.entry-copy p { margin-bottom: 38px; font-size: 1rem; font-weight: 700; line-height: 2.1; }
.entry-copy a { display: flex; justify-content: space-between; padding: 18px 0; border-top: 2px solid white; border-bottom: 2px solid white; font-weight: 900; }
.entry-word { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.55); font-size: clamp(5rem, 9vw, 10rem); font-weight: 900; line-height: .72; letter-spacing: -.08em; }

.time { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--navy); }
.time article { min-height: 720px; padding: 90px 6vw; display: flex; flex-direction: column; justify-content: space-between; }
.time-start { background: var(--paper); }
.time-now { background: var(--yellow); border-left: 1px solid var(--navy); }
.time .label { color: var(--coral); }
.time-number { font-size: clamp(7rem, 15vw, 16rem); font-weight: 900; line-height: .75; letter-spacing: -.09em; }
.time h2 { margin: 0; font-size: clamp(2.5rem, 4.2vw, 4.5rem); }
.time article > p:last-child { max-width: 520px; margin: 0; font-weight: 700; line-height: 2; }

.place { min-height: 700px; padding: 100px 6vw; display: grid; grid-template-columns: 140px 1fr 280px; gap: 7vw; align-items: start; color: white; background: var(--navy-2); }
.place .section-code { border-color: var(--coral); }
.place .label { color: var(--teal); }
.place h2 { margin: 0 0 30px; font-size: clamp(4rem, 8vw, 8.5rem); }
.place address { margin-bottom: 42px; color: var(--yellow); font-size: 1.25rem; font-style: normal; font-weight: 900; }
.place-main a { padding-bottom: 8px; border-bottom: 1px solid white; font-size: .76rem; font-weight: 900; letter-spacing: .1em; }
.place-stamp { width: 260px; height: 260px; display: grid; place-content: center; text-align: center; border: 2px solid var(--teal); border-radius: 50%; transform: rotate(7deg); }
.place-stamp span { color: var(--teal); font-size: .65rem; letter-spacing: .2em; }
.place-stamp b { color: var(--yellow); font-size: 6.5rem; line-height: 1; }
.place-stamp small { font-size: .54rem; letter-spacing: .15em; }

.contact { min-height: 650px; padding: 80px 6vw; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; overflow: hidden; color: var(--navy); background: var(--coral); }
.contact-word { margin-left: -4vw; color: transparent; -webkit-text-stroke: 3px rgba(16,42,67,.45); font-size: clamp(8rem, 19vw, 22rem); font-weight: 900; line-height: .75; letter-spacing: -.1em; transform: rotate(-6deg); }
.contact-content { position: relative; z-index: 2; }
.contact-content .label { color: var(--navy); }
.contact h2 { margin: 0 0 30px; font-size: clamp(3.5rem, 6vw, 6.5rem); }
.contact-content p { max-width: 520px; margin-bottom: 36px; font-weight: 700; line-height: 2; }
.contact-content a { display: flex; justify-content: space-between; max-width: 520px; padding: 20px 0; border-top: 3px solid var(--navy); border-bottom: 3px solid var(--navy); font-size: 1.05rem; font-weight: 900; }

.site-footer { padding: 55px 6vw 25px; color: white; background: var(--navy-2); }
.footer-identity { display: flex; align-items: center; gap: 17px; }
.footer-identity img { width: 68px; }
.footer-identity div { display: grid; }
.footer-identity small { color: #8fb1c7; font-size: .54rem; letter-spacing: .1em; }
.footer-identity strong { font-size: .95rem; }
.footer-meta { margin-top: 55px; padding-top: 20px; display: flex; justify-content: space-between; color: #7595aa; border-top: 1px solid rgba(255,255,255,.14); font-size: .55rem; letter-spacing: .14em; }

@keyframes photo-in { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 1000px) {
  .main-nav, .nav-contact { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .mobile-menu { display: block; }
  .poster { grid-template-columns: 1fr; }
  .poster-copy { min-height: 620px; }
  .poster-copy::after, .poster-data { display: none; }
  .poster-photo { min-height: 520px; }
  .declaration, .actions-head, .place { grid-template-columns: 110px 1fr; }
  .actions-head > p { grid-column: 2; }
  .action-rows li { grid-template-columns: 70px .7fr 1.3fr auto; gap: 25px; }
  .entry { grid-template-columns: 1fr 1fr; }
  .entry-word { grid-column: 1 / -1; }
  .place-stamp { display: none; }
}

@media (max-width: 700px) {
  .utility-bar { padding-inline: 16px; }
  .utility-bar p { display: none; }
  .site-header { min-height: 78px; padding-inline: 16px; }
  .identity img { width: 48px; height: 48px; }
  .identity strong { font-size: .78rem; }
  .poster-copy { min-height: 590px; padding: 70px 22px; }
  .poster h1 { font-size: clamp(3.5rem, 18vw, 5.2rem); }
  .poster-photo { min-height: 380px; }
  .poster-photo figcaption { left: 16px; right: 16px; bottom: 16px; }
  .declaration { padding: 85px 22px; grid-template-columns: 1fr; gap: 50px; }
  .section-code { width: 90px; }
  .section-code b { font-size: 3.8rem; }
  .declaration h2 { margin-bottom: 45px; font-size: clamp(2.7rem, 13vw, 4.4rem); }
  .declaration-body { margin-left: 0; grid-template-columns: 1fr; gap: 20px; }
  .declaration blockquote { margin-left: 0; }
  .actions-head { padding: 75px 22px 50px; grid-template-columns: 1fr; gap: 40px; }
  .actions-head > p { grid-column: auto; }
  .actions-head h2 { font-size: 3.6rem; }
  .action-rows li { min-height: 310px; padding: 30px 22px; grid-template-columns: 1fr auto; gap: 16px; }
  .action-rows h3 { font-size: 4rem; }
  .action-rows p { grid-column: 1 / -1; }
  .action-rows strong { grid-column: 2; grid-row: 1 / 3; }
  .entry { padding: 80px 22px; grid-template-columns: 1fr; }
  .entry-word { display: none; }
  .time { grid-template-columns: 1fr; }
  .time article { min-height: 570px; padding: 70px 22px; }
  .time-now { border-left: 0; border-top: 1px solid var(--navy); }
  .time-number { font-size: 7rem; }
  .place { min-height: 610px; padding: 75px 22px; grid-template-columns: 1fr; gap: 50px; }
  .place h2 { font-size: clamp(3.8rem, 18vw, 6rem); }
  .contact { min-height: 650px; padding: 70px 22px; grid-template-columns: 1fr; }
  .contact-word { position: absolute; left: 0; max-width: 100%; margin-left: 0; opacity: .4; font-size: 5rem; }
  .contact h2 { font-size: 4rem; }
  .contact-content a { font-size: .88rem; }
  .site-footer { padding-inline: 22px; }
  .footer-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}