:root { color-scheme: light; --site-width: 1320px; --paper: #efe0be; --ink: #342619; --teal: #192c2a; --red: #823d2b; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif; color: var(--ink); background: var(--paper); }
* { box-sizing: border-box; }
body { margin: 0; background: #34251c; }
a { color: inherit; text-underline-offset: .3em; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #a94324; outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 20; padding: 12px 20px; background: var(--paper); }
.skip-link:focus { top: 12px; }
.site-scene { position: relative; isolation: isolate; min-height: 960px; max-width: var(--site-width); margin-inline: auto; }
.home .site-scene { min-height: max(960px, min(98vw, 1294px)); background: var(--paper); }
.scene-image { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home .site-scene::after { content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(20 16 11 / .22), transparent 47%), linear-gradient(0deg, rgb(19 16 12 / .2), transparent 22%); }
.site-header { position: relative; top: 20px; margin-inline: auto; width: calc(100% - 48px); z-index: 5; background: var(--paper); background-image: repeating-linear-gradient(38deg, #916c3710 0px, transparent 1px, transparent 5px); border: 1px solid #b89865; box-shadow: 0 3px 9px #231a193d; padding: 12px 0; }
#site-nav { display: flex; align-items: stretch; }
#site-nav a { flex: 1; text-align: center; text-decoration: none; padding: 4px 8px; border-right: 1px solid #ad8d5c; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 46px; }
#site-nav a:last-child { border-right: 0; }
#site-nav a span { font-weight: 700; letter-spacing: .19em; white-space: nowrap; font-size: clamp(.875rem, 1.3vw, 1.125rem); }
#site-nav a small { font-family: Georgia, serif; font-size: .75rem; letter-spacing: .14em; }
#site-nav a[aria-current='page'] span { color: #743822; }
#site-nav a:hover { background: #cbae752b; }
.mobile-brand, .menu-toggle { display: none; }
.brand { position: absolute; top: 12%; left: 7%; width: 27%; text-align: center; color: #1a1710; text-shadow: 0 1px 8px #ffdba087; }
.brand .reading { margin: 0 0 6px; font-size: clamp(1rem, 1.55vw, 1.3rem); letter-spacing: .65em; padding-left: .65em; }
.brand h1 { margin: 0; font-size: clamp(4.5rem, 7.4vw, 6.5rem); line-height: 1.2; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.brand .english { font-family: Georgia, serif; font-size: clamp(.875rem, 1.35vw, 1.4rem); letter-spacing: .18em; margin: 12px 0 6px; white-space: nowrap; }
.brand .formal { font-size: clamp(1rem, 1.5vw, 1.4rem); letter-spacing: .4em; padding-left: .4em; margin: 0; }
.introduction { position: absolute; top: 39%; left: 5.5%; color: #fff7e8; text-shadow: 0 2px 5px #1b1714, 0 1px 16px #1b1714; padding: 18px 24px 22px 0; }
.introduction::before { content: ''; position: absolute; inset: -12px -20px -12px -35px; z-index: -1; background: radial-gradient(ellipse at left, #211a16ad, #211a1600 74%); }
.introduction h2 { font-size: clamp(1.8rem, 2.65vw, 2.7rem); line-height: 1.55; font-weight: 500; letter-spacing: .13em; margin: 0 0 22px; }
.introduction p { font-size: clamp(1rem, 1.45vw, 1.3rem); line-height: 1.85; letter-spacing: .1em; margin: 0; }
.news { position: absolute; left: 3%; bottom: 30px; width: 40%; color: #f4e6c9; background: #172422f2; border: 5px solid #62432a; outline: 1px solid #b18a4e; box-shadow: inset 0 0 0 1px #b08a4f, 0 4px 15px #1a120c55; padding: 19px 26px 22px; }
.news h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: .3em; margin: 0 0 12px; display: flex; align-items: center; gap: 12px; }
.news svg { height: 22px; width: 22px; fill: currentColor; flex-shrink: 0; }
.news ul { padding: 0; margin: 0; list-style: none; }
.news li { display: grid; grid-template-columns: 7em 1fr; column-gap: 15px; padding: 9px 0; border-top: 1px solid #e5cf9e45; font-size: .875rem; line-height: 1.65; }
.news time { font-family: Georgia, serif; letter-spacing: .06em; }
.site-footer { max-width: var(--site-width); margin-inline: auto; background: var(--paper); min-height: 80px; padding: 20px 4%; display: flex; align-items: center; justify-content: center; gap: 26px; border-top: 1px solid #a58258; }
.site-footer a { text-decoration: none; font-size: 1.5rem; letter-spacing: .3em; font-weight: bold; }
.site-footer > span { font-family: Georgia, serif; font-size: .8rem; letter-spacing: .18em; border-left: 1px solid #a0825a; padding: 8px 0 8px 26px; }
.site-footer small { margin-left: auto; font-family: Georgia, serif; letter-spacing: .09em; font-size: .75rem; }
.site-footer .footer-contact { font-size: .875rem; letter-spacing: .08em; font-weight: 400; text-decoration: underline; padding-block: 10px; }
.inner .site-scene { min-height: calc(100svh - 80px); background: radial-gradient(ellipse at top, #f7ecd4, #e8d7b4); }

.preparation { max-width: 650px; margin: 130px auto 0; padding: 40px 28px 120px; text-align: center; }
.preparation .eyebrow { letter-spacing: .22em; font-size: .875rem; }
.preparation h1 { margin: 20px 0 30px; letter-spacing: .2em; font-size: 2.5rem; }
.preparation p { font-size: 1rem; line-height: 2; }
.preparation a { display: inline-block; margin-top: 30px; padding: 10px 0; }

@media (min-width: 761px) and (max-width: 1020px) { .brand { left: 4%; width: 32%; } .brand h1 { font-size: 5rem; } .news { width: 52%; } }
@media (max-width: 760px) {
  .home .site-scene { min-height: 0; padding-top: 105.319vw; }
  .scene-image { top: 0; height: auto; object-fit: contain; }
  .home .site-scene::after { display: none; }
  .site-header, .inner .site-header { position: absolute; top: 12px; left: 12px; right: 12px; width: auto; margin: 0; padding: 0; min-height: 56px; display: flex; align-items: center; justify-content: space-between; }
  .mobile-brand { display: block; text-decoration: none; font-weight: 700; font-size: 1.2rem; letter-spacing: .2em; padding: 14px 18px; }
  .menu-toggle { display: flex; align-items: center; gap: 10px; align-self: stretch; border: 0; border-left: 1px solid #bea277; padding: 10px 16px; background: transparent; color: var(--ink); cursor: pointer; font-size: .875rem; }
  .menu-lines { width: 16px; height: 10px; border-top: 1px solid; border-bottom: 1px solid; }
  #site-nav { display: none; position: absolute; top: calc(100% + 1px); left: -1px; right: -1px; background: #f1e4c9; border: 1px solid #ae8f62; padding: 7px 18px; max-height: calc(100svh - 100px); overflow-y: auto; box-shadow: 0 8px 15px #2c201939; }
  .menu-toggle[aria-expanded='true'] + #site-nav { display: flex; flex-direction: column; }
  #site-nav a { flex-direction: row; justify-content: space-between; align-items: center; border-right: 0; border-bottom: 1px solid #b69b723d; padding: 12px 8px; min-height: 49px; }
  #site-nav a:last-child { border-bottom: 0; }
  #site-nav a span { font-size: 1rem; }
  .brand { top: max(5.25rem, 14vw); left: 3%; width: 36%; padding: 0 0 15px; text-shadow: 0 1px 5px #ffdda6; }
  .brand::before { content: ''; position: absolute; z-index: -1; inset: -18px -15px -6px; background: radial-gradient(ellipse, #ffe4b8d9, #ffe4b800 75%); }
  .brand .reading { font-size: .75rem; letter-spacing: .35em; padding-left: .35em; }
  .brand h1 { font-size: clamp(2rem, 9.4vw, 4rem); }
  .brand .english { font-size: .75rem; letter-spacing: .015em; margin: 7px 0 6px; }
  .brand .formal { font-size: .75rem; letter-spacing: .18em; padding-left: .18em; }
  .introduction { position: relative; top: auto; left: auto; padding: 33px 28px 36px; background: #21302c; color: #fff3d9; text-shadow: none; }
  .introduction::before { display: none; }
  .introduction h2 { font-size: 1.75rem; letter-spacing: .1em; line-height: 1.6; margin-bottom: 20px; }
  .introduction p { font-size: 1rem; letter-spacing: .06em; line-height: 1.9; }
  .news { position: relative; left: auto; bottom: auto; width: calc(100% - 36px); margin: 27px 18px; padding: 18px 17px; }
  .news li { grid-template-columns: 1fr; gap: 3px; padding: 11px 0; }
  .news time { font-size: .8125rem; color: #decca8; }
  .site-footer { padding: 23px 20px; flex-wrap: wrap; gap: 14px; }
  .site-footer a { font-size: 1.3rem; }
  .site-footer > span { padding-left: 14px; font-size: .75rem; }
  .site-footer small { width: 100%; text-align: center; margin: 0; }
  .inner .site-scene { min-height: calc(100svh - 130px); padding-top: 100px; }
  .preparation { margin: 0 auto; padding: 55px 24px 100px; }
  .preparation h1 { font-size: 2rem; }
}
@media (max-width: 360px) { .introduction { padding-inline: 22px; } .introduction h2 { font-size: 1.5rem; } }