/* Preserved photo, copy and composition. Header follows the site's Mincho type. */
@font-face {
  font-family: "Sato Hero Mincho";
  src: url("fonts/noto-serif-jp-hero-300.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  background: transparent;
  color: #fff;
  border: 0;
  box-shadow: none;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled,
.site-header.menu-open {
  background: rgba(35, 39, 42, .96);
  box-shadow: 0 3px 18px #00000012;
  border: 0;
}
.site-header .header-inner {
  position: relative;
  min-height: 94px;
  padding-inline: 42px;
  max-width: none;
  gap: 24px;
  flex-wrap: nowrap;
}
.site-header .brand {
  color: #fff;
  font-size: 29px;
  font-family: var(--font-mincho);
  font-weight: 300;
  letter-spacing: .075em;
  min-height: 44px;
  align-items: baseline;
  padding-block: 8px;
  text-shadow: 0 1px 8px #00000018;
}
.site-header .brand-prefix {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .05em;
}
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  transition: opacity .25s, background-color .25s;
}
.header-icon svg { width: 23px; height: 23px; stroke-width: 1.8; }
.header-icon:hover { background: #ffffff15; }
.site-header a:focus-visible,
.site-header button:focus-visible { outline-color: #fff; outline-offset: 3px; }
.site-header .menu-toggle { display: none; }
.js-enabled .site-header .menu-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 3px;
}
.site-header .menu-toggle:hover { background: #ffffff15; }
.site-header .menu-bars { width: 28px; height: 24px; display: block; position: relative; }
.site-header .menu-bars i {
  position: absolute;
  left: 0;
  width: 28px;
  height: 1px;
  background: #fff;
  transition: transform .3s, opacity .2s, top .3s;
}
.site-header .menu-bars i:nth-child(1) { top: 3px; }
.site-header .menu-bars i:nth-child(2) { top: 11px; }
.site-header .menu-bars i:nth-child(3) { top: 19px; }
.site-header .menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(1) { top: 11px; transform: rotate(45deg); }
.site-header .menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(2) { opacity: 0; }
.site-header .menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(3) { top: 11px; transform: rotate(-45deg); }
.site-header .site-nav,
.js-enabled .site-header .site-nav {
  position: absolute;
  top: 100%;
  right: 24px;
  left: auto;
  width: min(380px, calc(100vw - 48px));
  padding: 16px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  color: #fff;
  background: rgba(35, 39, 42, .98);
  border: 0;
  border-radius: 0 0 4px 4px;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  box-shadow: 0 18px 28px #00000018;
}
.js-enabled .site-header .site-nav {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.js-enabled .site-header .site-nav.is-open { visibility: visible; opacity: 1; transform: none; }
.site-header .site-nav > a,
.site-header .site-nav > a[href="#home"] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  padding: 15px 0;
  border-bottom: 1px solid #ffffff24;
  color: #fff;
}
.site-header .site-nav > a:not(.nav-contact)::after { display: none; }
.site-header .site-nav > a:hover { color: #f39445; }
.site-header .site-nav .nav-contact {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px;
  background: #fff;
  color: #252525;
  border: 0;
}
.site-header .site-nav .nav-contact:hover { background: #f39445; color: #252525; }
html:not(.js-enabled) .site-header { position: relative; background: #383838; }
html:not(.js-enabled) .site-header .header-inner { flex-wrap: wrap; padding-block: 16px; }
html:not(.js-enabled) .site-header .site-nav { position: static; width: 100%; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 10px 24px; padding: 0; box-shadow: none; }

.hero {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  min-height: 700px;
  max-height: 1200px;
  overflow: hidden;
  color: #fff;
  background: #172d40;
}
.hero .hero-photo {
  position: absolute;
  inset: 0;
  background: transparent;
  overflow: hidden;
  animation: hero-photo-in 1.6s ease both;
}
.hero .hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: var(--hero-position, 50% 50%);
}
.hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #04111e82 0%, #04111e24 30%, #0b111833 65%, #0b111859 100%), linear-gradient(90deg, #07101b40, #07101b0d 75%);
}
.hero-content {
  position: absolute;
  top: 46%;
  left: 10%;
  right: 6%;
  transform: translateY(-50%);
  z-index: 1;
}
.hero h1 {
  font-family: "Sato Hero Mincho", "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  font-size: clamp(42px, 4.5vw, 76px);
  font-weight: 300;
  letter-spacing: .17em;
  line-height: 1.55;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 18px #00000012;
  white-space: nowrap;
}
.hero .hero-copy { animation: hero-copy-in 1.8s .4s both; }
.hero .hero-description {
  font-family: "Sato Hero Mincho", "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: .085em;
  color: #fff;
  margin-top: 21px;
  padding: 0;
  animation: hero-copy-in 1.8s .65s both;
}
.hero .hero-description p + p { margin-top: 4px; }
.hero-scroll {
  position: absolute;
  z-index: 2;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  min-width: 72px;
  padding: 12px;
  color: #fff;
  font: 10px/1.2 Arial, sans-serif;
  letter-spacing: .24em;
  animation: hero-photo-in 1.8s 1s both;
}
.scroll-line { display: block; position: relative; width: 1px; height: 48px; background: #ffffff46; overflow: hidden; }
.scroll-line::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: top; animation: scroll-flow 2.8s cubic-bezier(.5, 0, .3, 1) infinite; }
.hero-scroll:hover .scroll-line::after { animation-duration: 1.7s; }
.hero-scroll:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
@keyframes hero-photo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes scroll-flow { 0% { transform: translateY(-100%); } 45% { transform: translateY(0); } 80%, 100% { transform: translateY(100%); } }

@media (max-width: 1000px) {
  .site-header .header-inner { min-height: 80px; padding-inline: 24px; }
  .site-header .brand { font-size: 25px; }
  .site-header .brand-prefix { font-size: 10px; }
  .header-actions { gap: 10px; }
  .hero .hero-description { font-size: 13px; }
}
@media (min-width: 601px) and (max-width: 1000px) and (orientation: portrait) {
  .hero-content { top: 12%; transform: none; left: 11%; }
  .hero h1 { font-size: clamp(40px, 5.8vw, 54px); }
}
@media (max-width: 600px) {
  .site-header .header-inner { min-height: clamp(76px, 20vw, 118px); padding-inline: clamp(17px, 4.5vw, 27px); gap: 4px; }
  .site-header .brand { font-size: clamp(19px, 5.4vw, 32px); letter-spacing: .03em; gap: 5px; padding-block: 9px; }
  .site-header .brand-prefix { font-size: clamp(8px, 2.3vw, 14px); letter-spacing: 0; }
  .header-actions { gap: clamp(0px, calc(9vw - 35px), 18px); }
  .header-icon { width: 40px; }
  .header-icon svg { width: clamp(19px, 4.2vw, 25px); height: clamp(19px, 4.2vw, 25px); }
  .site-header .menu-bars, .site-header .menu-bars i { width: clamp(25px, 6.2vw, 36px); }
  .site-header .menu-bars { height: clamp(24px, 5.4vw, 32px); }
  .site-header .menu-bars i:nth-child(1) { top: 15%; }
  .site-header .menu-bars i:nth-child(2) { top: 50%; }
  .site-header .menu-bars i:nth-child(3) { top: 85%; }
  .site-header .menu-toggle[aria-expanded="true"] .menu-bars i { top: 50%; }
  .site-header .site-nav, .js-enabled .site-header .site-nav { right: 0; width: 100%; padding: 12px 26px 26px; max-height: calc(100dvh - clamp(76px, 20vw, 118px)); border-radius: 0; }
  .hero { min-height: max(640px, 185vw); max-height: none; }
  /* Preserve the facade: the original photo stays close to the screen width.
     A sky crop from that SAME photo fills the taller screen above it. The mask
     joins sky to sky; no generated, stretched or retouched imagery is used. */
  .hero .hero-photo {
    background-image: var(--hero-image);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: auto 165%;
  }
  .hero .hero-photo img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--hero-photo-width, 116%);
    height: auto;
    object-fit: contain;
    object-position: initial;
    mask-image: linear-gradient(to bottom, transparent, #000 19%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 19%);
  }
  .hero-shade { background: linear-gradient(180deg, #03101ee0 0%, #04121e9e 24%, #07131e75 45%, #08101652 75%, #080e1590 100%); }
  .hero-content { top: auto; bottom: calc(var(--hero-copy-bottom, 106.333vw) + 14px); left: 13.8%; right: 3%; transform: none; }
  .hero h1 { font-size: clamp(29px, 9.3vw, 58px); line-height: 1.48; letter-spacing: .2em; }
  .hero .hero-description { font-size: clamp(11px, 2.85vw, 16px); line-height: 1.95; letter-spacing: .055em; margin-top: 16px; }
  .hero .hero-description p:last-of-type { max-width: none; }
  .hero .hero-description p + p { margin-top: 3px; }
  .hero-scroll { bottom: 4.3%; gap: 15px; font-size: 9px; padding: 9px 12px; }
  .scroll-line { height: clamp(39px, 9.3vw, 56px); }
}
@media (max-width: 360px) {
  .site-header .header-inner { padding-inline: 12px; }
  .site-header .brand { font-size: 18px; gap: 4px; }
  .header-icon { width: 36px; }
  .header-actions { gap: 0; }
  .hero-content { left: 10%; right: 5%; }
  .hero h1 { font-size: 28px; letter-spacing: .12em; }
  .hero .hero-description { font-size: 11px; letter-spacing: .015em; }
}
@media (min-width: 601px) and (max-height: 600px) {
  .hero { min-height: 560px; }
  .hero h1 { font-size: 40px; }
  .hero .hero-description { font-size: 13px; }
  .hero-scroll { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero *, .site-header, .site-header * { animation: none !important; transition: none !important; }
  .scroll-line::after { animation: none; transform: none; }
}
@media print {
  .site-header { position: static; background: #383838; }
  .header-actions, .hero-scroll { display: none; }
  .hero { height: 600px; min-height: 0; }
  .hero .hero-photo img { max-height: none; }
  .hero-content { top: 25%; bottom: auto; transform: none; }
}