:root {
  --ink: #102d45;
  --ink-soft: #40566a;
  --paper: #f5ebd7;
  --paper-deep: #e6d4b3;
  --paper-light: #fffaf0;
  --sea: #5e8790;
  --sea-deep: #153a50;
  --gold: #ad7a2d;
  --rule: rgba(16, 45, 69, 0.18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; background: var(--paper); }

html:has(body.home-page) {
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;
}

html:has(body.detail-page) { scroll-snap-type: y proximity; scroll-padding-top: 0; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  line-height: 1.8;
}

a { color: inherit; text-decoration: none; }

.skip-link {
  position: fixed;
  z-index: 20;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.5rem 0.85rem;
  color: var(--paper-light);
  background: var(--ink);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.content-shell { width: min(1120px, calc(100% - 3rem)); margin: 0 auto; }

.site-header {
  position: absolute;
  isolation: isolate;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 5.75rem;
  padding: 1rem clamp(1.5rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.brand { width: min(16rem, 38vw); }
.brand img { display: block; width: 100%; height: auto; }

.site-nav { display: flex; gap: clamp(1rem, 2.7vw, 2.5rem); font-family: "Cormorant Garamond", "Noto Serif JP", serif; font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 700; text-shadow: 0 1px 0.8rem rgba(255, 250, 240, 0.72); }
.site-nav a { min-height: 2.75rem; padding: 0.35rem 0; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-current { border-color: var(--gold); }

.site-header.is-sticky {
  position: fixed;
  min-height: 5.75rem;
  padding: 1rem clamp(1.5rem, 5vw, 5rem);
  background: rgba(255, 250, 240, 0.2);
  backdrop-filter: blur(0.25rem);
}
.site-header.is-sticky .brand { width: min(16rem, 38vw); }
.site-header.is-sticky .site-nav { text-shadow: none; }
.site-header.is-sticky::after,
.site-header.is-returning-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgba(16, 45, 69, 0.48);
}
.site-header.is-section-entering { animation: section-header-reveal 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.site-header.is-section-entering::after { transform-origin: left center; animation: section-boundary-enter 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.site-header.is-returning-hero { position: fixed; background: rgba(255, 250, 240, 0.2); backdrop-filter: blur(0.25rem); animation: hero-header-fade-out 330ms ease-out both; }
.site-header.is-returning-hero::before { content: none; }
.site-header.is-returning-hero::after { transform-origin: right center; animation: hero-boundary-exit 330ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.site-header.is-hero-awaiting { position: fixed; opacity: 0; pointer-events: none; }
.site-header.is-hero-entering { position: fixed; background: transparent; backdrop-filter: none; animation: hero-header-drop-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1) 140ms both; }
.site-header.is-on-dark { color: var(--paper-light); background: rgba(9, 30, 45, 0.12); }
.site-header.is-on-dark::after { background: rgba(255, 250, 240, 0.62); }
.site-header.is-on-dark .brand { filter: brightness(0) invert(1) grayscale(0.25); }
.site-header.is-on-dark .site-nav a:hover, .site-header.is-on-dark .site-nav a:focus-visible, .site-header.is-on-dark .site-nav a.is-current { border-color: #e2ba65; }
.site-header.is-contact-transition .brand { animation: contact-logo-moonrise 620ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.site-header.is-contact-transition .site-nav { animation: contact-nav-nightfall 620ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.site-header.is-contact-transition::after { animation: contact-boundary-moonrise 680ms ease-out both; }

@keyframes section-header-reveal {
  from { clip-path: inset(0 100% 0 0); opacity: 0.16; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes section-boundary-enter {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes hero-boundary-exit {
  from { opacity: 1; transform: scaleX(1); }
  to { opacity: 0; transform: scaleX(0); }
}

@keyframes hero-header-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes hero-header-drop-in {
  from { opacity: 0; transform: translateY(-0.9rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes contact-logo-moonrise {
  from { filter: brightness(1) grayscale(0); opacity: 0.42; }
  to { filter: brightness(0) invert(1) grayscale(0.25); opacity: 1; }
}

@keyframes contact-nav-nightfall {
  from { color: var(--ink); letter-spacing: 0.03em; opacity: 0.45; }
  to { color: var(--paper-light); letter-spacing: 0; opacity: 1; }
}

@keyframes contact-boundary-moonrise {
  from { background: rgba(16, 45, 69, 0.48); box-shadow: none; }
  55% { background: #e2ba65; box-shadow: 0 0 1.15rem rgba(226, 186, 101, 0.62); }
  to { background: rgba(255, 250, 240, 0.62); box-shadow: 0 0 0.35rem rgba(255, 250, 240, 0.28); }
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background-color: #e5c18f;
  background-image: image-set(url("../images/homepage-hero-morning-v3.webp") type("image/webp") 1x, url("../images/homepage-hero-morning-v3.png") type("image/png") 1x);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scroll-snap-align: start;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 251, 241, 0.98) 0%, rgba(255, 251, 241, 0.9) 38%, rgba(255, 251, 241, 0.43) 53%, rgba(255, 251, 241, 0.04) 72%);
}

.hero-content { position: relative; z-index: 2; padding-top: 3rem; padding-bottom: 3rem; transform: translateY(clamp(-4rem, -5vh, -1.25rem)); }
.eyebrow { margin: 0 0 0.9rem; color: var(--gold); font-family: "Cormorant Garamond", serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.18em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: 0.03em; line-height: 1.35; }

.hero h1 { width: min(45rem, 66vw); margin-bottom: 1.5rem; font-size: clamp(2.5rem, 5vw, 5rem); }
.hero-lead { margin-bottom: 0.85rem; font-size: clamp(1.1rem, 1.75vw, 1.45rem); letter-spacing: 0.08em; }
.hero-copy { max-width: 37rem; margin-bottom: 2rem; color: var(--ink-soft); font-size: clamp(0.95rem, 1.35vw, 1.1rem); }
.primary-link, .mail-link { display: inline-flex; align-items: center; gap: 1.15rem; padding: 0.85rem 1.2rem; border: 1px solid var(--ink); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.08em; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; }
.primary-link:hover, .primary-link:focus-visible, .mail-link:hover, .mail-link:focus-visible { color: var(--paper-light); background: var(--ink); transform: translateY(-2px); }
.primary-link span, .mail-link span { font-size: 1.35em; line-height: 1; }

.section-pad { padding: clamp(5rem, 10vw, 9rem) 0; }
.site-section { min-height: 100svh; display: grid; align-items: center; padding: clamp(4.5rem, 8vh, 6.5rem) 0; scroll-snap-align: start; }
.home-page .hero,
.home-page .site-section { scroll-snap-stop: normal; }
.studio { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, #fffaf0 0%, #fff8eb 58%, #f2e5cf 100%); border-top: 1px solid rgba(173, 122, 45, 0.18); }
.studio::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.11; background: url("../images/studio-age-sail-workshop-v2.png") center / cover no-repeat; filter: saturate(0.78) sepia(0.1); }
.studio-layout { display: grid; grid-template-columns: minmax(16rem, 0.78fr) minmax(22rem, 1.22fr); gap: clamp(2rem, 9vw, 9rem); align-items: center; }
.studio h2, .contents h2, .contact h2 { margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.5rem); }
.studio-intro { position: relative; padding: 1.4rem 0 1.4rem clamp(1rem, 3vw, 2.8rem); }
.studio-intro::before { content: ""; position: absolute; top: 0.35rem; bottom: 0.35rem; left: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--gold) 14%, var(--gold) 86%, transparent); }
.studio-copy { --reveal-delay: 120ms; position: relative; padding: clamp(0.75rem, 1.8vw, 1.35rem) 0 clamp(0.75rem, 1.8vw, 1.35rem) clamp(1.5rem, 3.5vw, 2.65rem); color: var(--ink-soft); border-left: 1px solid rgba(16, 45, 69, 0.16); font-size: 1.02rem; }
.studio-copy p { position: relative; max-width: 42rem; }
.studio-copy p + p { margin-top: 1.45rem; }

.contents { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(145deg, #f0dfc3 0%, #f7eddb 58%, #fff9ee 100%); }
.contents::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.08; background: url("../images/contents-harbor-market-v1.png") center / cover no-repeat; filter: saturate(0.78) sepia(0.08); }
.contents .content-shell { position: relative; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.75rem, 3.6vh, 2.75rem); }
.section-heading > p { max-width: 25rem; margin-bottom: 0.35rem; color: var(--ink-soft); font-size: 0.95rem; }
.contents-heading { padding-bottom: 1.35rem; border-bottom: 1px solid rgba(16, 45, 69, 0.14); }
.contents-heading-aside { max-width: 25rem; }
.contents-heading-aside p { margin: 0 0 0.6rem; color: var(--ink-soft); font-size: 0.95rem; }
.booth-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; color: var(--ink); border-bottom: 1px solid var(--gold); font-size: 0.9rem; font-weight: 700; }
.booth-link span { color: var(--gold); font-size: 1.1rem; line-height: 1; transition: transform 180ms ease; }
.booth-link:hover span, .booth-link:focus-visible span { transform: translate(0.15rem, -0.15rem); }
.booth-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.product-card { position: relative; min-width: 0; min-height: 21rem; display: flex; flex-direction: column; padding: clamp(1.35rem, 2.5vw, 2rem); border: 1px solid rgba(16, 45, 69, 0.17); background: rgba(255, 252, 246, 0.78); box-shadow: 0 1rem 2.4rem rgba(30, 48, 61, 0.06); }
.product-card--featured { border-color: rgba(173, 122, 45, 0.44); background: linear-gradient(145deg, rgba(255, 253, 248, 0.97), rgba(247, 233, 205, 0.87)); }
.product-card::before { content: ""; position: absolute; top: 0; left: 1.35rem; width: 3.5rem; height: 2px; background: var(--gold); }
.product-card-kicker { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 0.9rem; margin-bottom: 0.9rem; color: #795318; font-family: "Cormorant Garamond", "Noto Serif JP", serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.13em; }
.product-card-kicker span { color: var(--ink-soft); font-family: "Noto Serif JP", "Yu Mincho", serif; font-size: 0.72rem; letter-spacing: 0; }
.product-card h3 { margin-bottom: 0.75rem; font-size: clamp(1.6rem, 2.7vw, 2.35rem); }
.product-catch { margin-bottom: 0.75rem; font-size: clamp(0.98rem, 1.25vw, 1.08rem); font-weight: 700; line-height: 1.6; }
.product-description { max-width: 40rem; margin-bottom: 1rem; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.75; }
.product-points { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0 0 0.65rem; padding: 0; list-style: none; }
.product-points li { padding-left: 0.65rem; border-left: 2px solid rgba(173, 122, 45, 0.62); font-size: 0.78rem; font-weight: 600; }
.product-legal { margin: 0 0 0.65rem; color: var(--ink-soft); font-size: 0.72rem; line-height: 1.55; }
.product-card-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid rgba(16, 45, 69, 0.18); color: var(--ink); font-size: 0.86rem; font-weight: 700; }
.product-card-link span { color: var(--gold); font-size: 1.1rem; transition: transform 180ms ease; }
.product-card-link:hover, .product-card-link:focus-visible { color: var(--gold); }
.product-card-link:hover span, .product-card-link:focus-visible span { transform: translate(0.15rem, -0.15rem); }
.product-card-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 1.8vw, 1.35rem); }
.content-card { position: relative; min-height: 18.5rem; padding: clamp(1.45rem, 2.4vw, 2rem); display: flex; flex-direction: column; border: 1px solid rgba(16, 45, 69, 0.14); background: rgba(255, 251, 243, 0.64); box-shadow: 0 0.85rem 2rem rgba(37, 54, 67, 0.055); transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 240ms ease, border-color 240ms ease, background-color 240ms ease; }
.content-card::before { content: ""; position: absolute; top: 0; right: 1.4rem; left: 1.4rem; height: 1px; background: rgba(173, 122, 45, 0.58); transform: scaleX(0.24); transform-origin: left; transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.content-card:hover, .content-card:focus-visible { border-color: rgba(173, 122, 45, 0.54); background: rgba(255, 253, 248, 0.86); box-shadow: 0 1.2rem 2.5rem rgba(37, 54, 67, 0.1); transform: translateY(-0.25rem); }
.content-card:hover::before, .content-card:focus-visible::before { transform: scaleX(0.62); }
.content-number { margin-bottom: auto; color: var(--gold); font-family: "Cormorant Garamond", serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.16em; }
.content-card h3 { margin: 1.75rem 0 0.65rem; font-family: "Cormorant Garamond", "Noto Serif JP", serif; font-size: clamp(2rem, 3vw, 2.6rem); }
.content-catch { margin-bottom: 0.85rem; font-weight: 600; line-height: 1.65; }
.content-card > p:not(.content-number):not(.content-catch) { max-width: 25rem; color: var(--ink-soft); font-size: 0.9rem; }
.content-status { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; margin-top: auto; padding-top: 1.35rem; color: var(--gold); border-top: 1px solid rgba(16, 45, 69, 0.12); font-size: 0.83rem; font-weight: 700; letter-spacing: 0.07em; }
.content-icon { display: grid; flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; place-items: center; padding: 0.42rem; border: 1px solid rgba(173, 122, 45, 0.46); border-radius: 50%; background: rgba(255, 250, 240, 0.48); transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease; }
.content-icon img { display: block; width: 100%; height: 100%; }
.content-card:hover .content-icon, .content-card:focus-visible .content-icon { border-color: var(--gold); background: rgba(255, 253, 248, 0.94); transform: translateX(0.2rem); }

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .has-scroll-reveal [data-reveal] { opacity: 0; transform: translateY(1.1rem); transition: opacity 620ms ease var(--reveal-delay, 0ms), transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms); }
  .has-scroll-reveal [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
}

.contact { position: relative; overflow: hidden; color: var(--paper-light); background: #143c54; }
.contact-scene { position: absolute; inset: 0; background-color: #1b4b65; background-image: linear-gradient(90deg, rgba(18, 54, 76, 0.62) 0%, rgba(18, 54, 76, 0.54) 36%, rgba(18, 54, 76, 0.25) 55%, rgba(18, 54, 76, 0.02) 74%), image-set(url("../images/homepage-contact-night-v3.webp") type("image/webp") 1x, url("../images/homepage-contact-night-v3.png") type("image/png") 1x); background-position: center; background-size: cover; background-repeat: no-repeat; }
.contact-content { position: relative; max-width: min(1120px, calc(100% - 3rem)); }
.contact .eyebrow { color: #e2ba65; }
.contact h2 { max-width: 42rem; margin-bottom: 1.4rem; }
.contact-content > p:not(.eyebrow) { max-width: 42rem; color: rgba(255, 250, 240, 0.84); }
.mail-link { margin-top: 1rem; border-color: rgba(255, 250, 240, 0.72); color: var(--paper-light); }
.mail-link:hover, .mail-link:focus-visible { color: var(--ink); background: var(--paper-light); }
.contact-actions { display: grid; grid-template-columns: minmax(19rem, 27rem) repeat(2, 5.75rem); align-items: center; gap: 0.9rem; margin-top: 2rem; }
.contact-action { min-height: 5.7rem; min-width: 0; padding: 1rem 1.05rem; display: flex; align-items: center; gap: 0.85rem; border: 1px solid rgba(255, 250, 240, 0.58); color: var(--paper-light); transition: transform 180ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.contact-action:hover, .contact-action:focus-visible { color: var(--ink); border-color: var(--paper-light); background: var(--paper-light); transform: translateY(-0.18rem); }
.contact-icon, .contact-social-icon { display: grid; place-items: center; }
.contact-icon { flex: 0 0 2.4rem; width: 2.4rem; height: 2.4rem; }
.contact-icon img, .contact-social-icon img { display: block; width: 100%; height: 100%; filter: brightness(0) invert(1); transition: filter 180ms ease; }
.contact-social { position: relative; justify-content: center; width: 5.75rem; height: 5.75rem; padding: 1.35rem; border-radius: 50%; }
.contact-social-icon { width: 100%; height: 100%; }
.contact-action:hover img, .contact-action:focus-visible img { filter: none; }
.contact-social::after { content: attr(data-label); position: absolute; top: calc(100% + 0.75rem); left: 50%; z-index: 3; padding: 0.28rem 0.62rem; color: var(--paper-light); background: rgba(9, 30, 45, 0.92); font-family: "Noto Serif JP", "Yu Mincho", serif; font-size: 0.75rem; line-height: 1.35; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, -0.2rem); transition: opacity 160ms ease, transform 160ms ease; }
.contact-social:hover::after, .contact-social:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.contact-copyright { position: absolute; z-index: 1; right: 0; bottom: clamp(1rem, 2.2vh, 1.5rem); left: 0; margin: 0; color: rgba(255, 250, 240, 0.7); font-family: "Cormorant Garamond", "Noto Serif JP", serif; font-size: 0.82rem; letter-spacing: 0.1em; text-align: center; }
.contact-action-copy { min-width: 0; display: grid; gap: 0.1rem; line-height: 1.3; }
.contact-action-kicker { color: inherit; font-size: 0.78rem; opacity: 0.76; }
.contact-action-title { overflow-wrap: anywhere; font-size: 0.96rem; font-weight: 700; }
.contact-action-arrow { margin-left: auto; font-size: 1.1rem; }

.site-footer { padding: 1.1rem 1.5rem; color: rgba(255, 250, 240, 0.65); background: #091e2d; text-align: center; }
.site-footer p { margin: 0; font-family: "Cormorant Garamond", "Noto Serif JP", serif; font-size: 0.9rem; letter-spacing: 0.08em; }

.detail-page { min-height: 100vh; display: flex; flex-direction: column; }
.detail-page { --detail-header-height: 6.875rem; }
.detail-page .site-header { position: sticky; top: 0; z-index: 20; min-height: var(--detail-header-height); height: var(--detail-header-height); background: rgba(255, 250, 240, 0.2); border-bottom: 1px solid rgba(16, 45, 69, 0.3); backdrop-filter: blur(0.25rem); }
.detail-page .site-nav { gap: clamp(0.7rem, 1.35vw, 1.45rem); align-items: center; font-size: clamp(0.82rem, 1.18vw, 1.05rem); text-shadow: none; }
.detail-page .site-nav-group { display: inline-flex; align-items: center; gap: inherit; }
.detail-page .site-nav-group--categories { padding-left: clamp(0.7rem, 1.35vw, 1.45rem); border-left: 1px solid color-mix(in srgb, var(--detail-ink) 26%, transparent); }
.detail-page .site-nav-group--categories a { color: color-mix(in srgb, var(--detail-ink) 72%, transparent); font-size: 0.86em; }
.detail-page .site-nav-group--categories a[aria-current] { color: var(--detail-ink); }
.detail-page .site-nav a[aria-current] { border-color: var(--gold); }
.detail-page main { flex: 1; }

@media (min-width: 761px) {
  .detail-page .site-header { position: fixed; }
}

.detail-hero, .detail-overview, .detail-status { min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: normal; }
.detail-page .detail-overview, .detail-page .detail-status { padding: clamp(2rem, 4vh, 3rem) 0; }
.detail-page--software { --detail-accent: #427d91; --detail-accent-deep: #1f5068; --detail-soft: #d9eced; --detail-ink: #173d54; }
.detail-page--games { --detail-accent: #a97042; --detail-accent-deep: #693c2e; --detail-soft: #f1dfc6; --detail-ink: #3d2b32; }
.detail-hero { position: relative; display: grid; align-items: center; isolation: isolate; overflow: hidden; color: var(--detail-ink); }
.detail-hero--software { background: radial-gradient(circle at 85% 18%, rgba(123, 187, 195, 0.55) 0 3.5rem, transparent 15rem), linear-gradient(135deg, #edf8f3, #c7e3de); }
.detail-hero--games { background: radial-gradient(circle at 84% 18%, rgba(241, 194, 119, 0.62) 0 3.5rem, transparent 15rem), linear-gradient(135deg, #fff4df, #dfc4a2); }
.detail-hero::after { content: ""; position: absolute; z-index: -1; width: min(56vw, 52rem); aspect-ratio: 1; right: -18rem; bottom: -26rem; border: 1px solid color-mix(in srgb, var(--detail-accent) 50%, transparent); border-radius: 50%; box-shadow: 0 0 0 2.5rem color-mix(in srgb, var(--detail-accent) 11%, transparent), 0 0 0 7rem color-mix(in srgb, var(--detail-accent) 6%, transparent); }
.detail-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.38fr); align-items: end; gap: clamp(2rem, 8vw, 8rem); }
.detail-copy { max-width: 47rem; padding: 1rem 0; }
.detail-route { margin: -0.35rem 0 1rem; color: color-mix(in srgb, var(--detail-ink) 72%, transparent); font-family: "Cormorant Garamond", serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; }
.detail-hero h1 { max-width: 50rem; margin-bottom: 1.25rem; font-size: clamp(2.5rem, 5vw, 4.7rem); }
.detail-lead { max-width: 39rem; margin-bottom: 0; color: color-mix(in srgb, var(--detail-ink) 76%, transparent); }
.detail-hero-marker { align-self: center; display: grid; justify-items: start; gap: 0.75rem; padding: 1.6rem 0 1.6rem 1.5rem; border-left: 1px solid color-mix(in srgb, var(--detail-ink) 30%, transparent); }
.detail-hero-marker span { color: var(--detail-accent-deep); font-family: "Cormorant Garamond", serif; font-size: clamp(4.5rem, 8vw, 7.5rem); font-weight: 600; line-height: 0.8; }
.detail-hero-marker i { display: block; width: min(8rem, 100%); height: 1px; background: var(--detail-accent); }
.detail-hero-marker small { color: color-mix(in srgb, var(--detail-ink) 64%, transparent); font-family: "Cormorant Garamond", serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; }
.detail-hero-orbit { position: absolute; z-index: -1; inset: 0; pointer-events: none; overflow: hidden; }
.detail-hero-orbit span { position: absolute; display: block; border: 1px solid color-mix(in srgb, var(--detail-accent) 31%, transparent); border-radius: 50%; }
.detail-hero-orbit span:first-child { width: min(48vw, 42rem); aspect-ratio: 1; top: -22rem; right: 4%; }
.detail-hero-orbit span:last-child { width: min(22vw, 18rem); aspect-ratio: 1; right: 12%; bottom: -8rem; }
.detail-overview { display: grid; align-items: center; position: relative; overflow: hidden; background: var(--paper-light); }
.detail-overview::before { content: ""; position: absolute; inset: 0; opacity: 0.66; background: linear-gradient(90deg, transparent 0 11%, color-mix(in srgb, var(--detail-accent) 12%, transparent) 11% calc(11% + 1px), transparent calc(11% + 1px)); mask-image: linear-gradient(90deg, transparent, #000 18% 82%, transparent); pointer-events: none; }
.detail-overview .content-shell { position: relative; }
.detail-section-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.65fr); align-items: end; gap: clamp(2rem, 7vw, 8rem); padding-bottom: clamp(1.6rem, 3.5vh, 2.5rem); border-bottom: 1px solid color-mix(in srgb, var(--detail-ink) 16%, transparent); }
.detail-section-heading h2 { margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.45rem); }
.detail-section-heading > p { max-width: 28rem; margin: 0 0 0.3rem; color: color-mix(in srgb, var(--detail-ink) 70%, transparent); font-size: 0.95rem; }
.detail-principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.75rem, 4vh, 3.25rem); }
.detail-principle { min-height: 14rem; padding: clamp(1.25rem, 2.2vw, 1.85rem); border: 1px solid color-mix(in srgb, var(--detail-ink) 16%, transparent); background: linear-gradient(145deg, color-mix(in srgb, #fff 78%, var(--detail-soft)), rgba(255, 250, 240, 0.75)); box-shadow: 0 0.9rem 2.2rem color-mix(in srgb, var(--detail-ink) 8%, transparent); }
.detail-principle p { margin-bottom: auto; color: var(--detail-accent-deep); font-family: "Cormorant Garamond", serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.14em; }
.detail-principle h3 { margin: 2.2rem 0 0.85rem; font-size: clamp(1.25rem, 2vw, 1.55rem); }
.detail-principle span { display: block; color: color-mix(in srgb, var(--detail-ink) 71%, transparent); font-size: 0.9rem; line-height: 1.75; }
.detail-status { display: grid; align-items: center; flex: 1; color: var(--paper-light); background: var(--detail-ink); }
.detail-status-card { position: relative; max-width: min(49rem, calc(100% - 3rem)); padding: clamp(2rem, 5vw, 4.5rem); border: 1px solid color-mix(in srgb, var(--paper-light) 28%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--detail-ink) 82%, #fff), color-mix(in srgb, var(--detail-accent-deep) 80%, var(--detail-ink))); box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.18); }
.detail-status-card::before { content: ""; position: absolute; inset: 0.85rem; border: 1px solid color-mix(in srgb, var(--paper-light) 14%, transparent); pointer-events: none; }
.detail-status .eyebrow { color: color-mix(in srgb, var(--detail-soft) 84%, #fff); }
.detail-status h2 { position: relative; margin-bottom: 1rem; font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.detail-status p { position: relative; color: rgba(255, 250, 240, 0.82); }
.narrow-content { max-width: min(44rem, calc(100% - 3rem)); }
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.text-link { display: inline-flex; align-items: center; min-height: 2.75rem; border-bottom: 1px solid currentColor; font-size: 0.9rem; font-weight: 700; }
.text-link:hover, .text-link:focus-visible { color: var(--gold); }
.text-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.detail-page .primary-link { color: var(--paper-light); border-color: var(--paper-light); background: transparent; }
.detail-page .primary-link:hover, .detail-page .primary-link:focus-visible { color: var(--detail-ink); background: var(--paper-light); }
.detail-status .text-link { color: var(--paper-light); border-color: color-mix(in srgb, var(--paper-light) 68%, transparent); }
.detail-status .text-link:hover, .detail-status .text-link:focus-visible { color: color-mix(in srgb, var(--detail-soft) 80%, #fff); border-color: currentColor; }

.detail-hero--software .detail-lead { margin-bottom: 0; }
.software-hero-actions { margin-top: 1.7rem; }
.detail-hero--software .primary-link { color: var(--detail-ink); border-color: var(--detail-ink); background: rgba(255, 250, 240, 0.38); }
.detail-hero--software .primary-link:hover, .detail-hero--software .primary-link:focus-visible { color: var(--paper-light); background: var(--detail-ink); }
.software-products { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; align-items: center; padding: clamp(3rem, 6vh, 5rem) 0; color: var(--detail-ink); background: linear-gradient(145deg, #fffaf0 0%, #f5e9d6 52%, #e5eeee 100%); scroll-snap-align: start; scroll-snap-stop: normal; }
.software-products::before { content: ""; position: absolute; z-index: -1; display: block; width: min(56vw, 52rem); aspect-ratio: 1; right: -18rem; top: calc(26rem - min(56vw, 52rem)); border: 1px solid color-mix(in srgb, var(--detail-accent) 50%, transparent); border-radius: 50%; box-shadow: 0 0 0 2.5rem color-mix(in srgb, var(--detail-accent) 11%, transparent), 0 0 0 7rem color-mix(in srgb, var(--detail-accent) 6%, transparent); pointer-events: none; }
.software-products::after { content: ""; position: absolute; z-index: -1; display: block; width: min(22vw, 18rem); aspect-ratio: 1; right: 12%; top: calc(8rem - min(22vw, 18rem)); border: 1px solid color-mix(in srgb, var(--detail-accent) 31%, transparent); border-radius: 50%; pointer-events: none; }
.software-products-heading { align-items: end; padding-bottom: 1rem; border-bottom: 1px solid rgba(23, 61, 84, 0.18); }
.software-products-heading h2 { margin-bottom: 0; font-size: clamp(2rem, 3.3vw, 3rem); }
.software-products .product-card { min-height: 21rem; }
.software-products .product-card h3 { margin-bottom: 0.45rem; font-size: clamp(1.45rem, 2vw, 1.95rem); }
.software-products .product-catch { margin-bottom: 0.75rem; font-size: clamp(0.88rem, 1vw, 1rem); }
.software-products .product-card-detail { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; align-items: start; gap: 0.8rem; margin-bottom: 0.75rem; }
.software-products .product-card-detail .product-description { margin-bottom: 0; }
.software-screen-button { display: grid; gap: 0.2rem; width: 100%; padding: 0.2rem; border: 1px solid rgba(23, 61, 84, 0.28); color: var(--detail-ink); background: rgba(255, 253, 248, 0.9); font: inherit; cursor: zoom-in; text-align: center; }
.software-screen-button img { display: block; width: 100%; height: auto; object-fit: contain; background: #fff; }
.software-screen-button span { font-size: 0.7rem; font-weight: 700; line-height: 1.3; }
.software-screen-button:hover, .software-screen-button:focus-visible { border-color: var(--detail-accent-deep); box-shadow: 0 0 0 2px color-mix(in srgb, var(--detail-accent) 18%, transparent); }
.software-screen-button:focus-visible { outline: 2px solid var(--detail-accent-deep); outline-offset: 3px; }
.software-screen-dialog { width: min(72rem, calc(100vw - 2rem)); max-height: min(90svh, 60rem); padding: 0; border: 1px solid rgba(23, 61, 84, 0.35); color: var(--detail-ink); background: var(--paper-light); box-shadow: 0 1.5rem 5rem rgba(9, 30, 45, 0.32); }
.software-screen-dialog::backdrop { background: rgba(9, 30, 45, 0.72); }
.software-screen-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; border-bottom: 1px solid rgba(23, 61, 84, 0.18); }
.software-screen-dialog-header p { margin: 0; font-size: 0.9rem; font-weight: 700; }
.software-screen-close { min-width: 2.75rem; min-height: 2.75rem; border: 1px solid rgba(23, 61, 84, 0.25); color: var(--detail-ink); background: transparent; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.software-screen-close:hover, .software-screen-close:focus-visible { background: rgba(66, 125, 145, 0.12); }
.software-screen-dialog > img { display: block; width: 100%; max-height: calc(90svh - 7rem); object-fit: contain; background: #fff; }
.software-screen-dialog-note { margin: 0; padding: 0.5rem 1rem 0.75rem; color: color-mix(in srgb, var(--detail-ink) 72%, transparent); font-size: 0.75rem; }
.utility-note { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid rgba(23, 61, 84, 0.18); scroll-margin-top: 6rem; }
.utility-note-label { margin-bottom: 0.1rem; color: var(--detail-accent-deep); font-family: "Cormorant Garamond", serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; }
.utility-note h3 { margin-bottom: 0.05rem; font-size: 1.05rem; }
.utility-note p:not(.utility-note-label) { margin-bottom: 0; color: color-mix(in srgb, var(--detail-ink) 72%, transparent); font-size: 0.8rem; }
.utility-note a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; border-bottom: 1px solid currentColor; font-size: 0.82rem; font-weight: 700; }
.utility-note a:hover, .utility-note a:focus-visible { color: var(--detail-accent-deep); }
.utility-note a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (min-width: 761px) and (max-height: 700px) {
  .software-products-heading { margin-bottom: 1rem; }
  .product-card, .software-products .product-card { min-height: 20rem; }
  .utility-note { margin-top: 0.75rem; }
}

.software-tool { position: relative; min-height: 100svh; padding: clamp(2rem, 5vh, 3rem) 0; display: grid; align-items: center; overflow: hidden; color: var(--detail-ink); background: linear-gradient(135deg, #e9f5f0 0%, #d4e8e4 48%, #bddad9 100%); scroll-snap-align: start; scroll-snap-stop: normal; }
.software-tool::before { content: ""; position: absolute; width: min(55vw, 48rem); aspect-ratio: 1; right: -18rem; bottom: -24rem; border: 1px solid color-mix(in srgb, var(--detail-accent) 46%, transparent); border-radius: 50%; box-shadow: 0 0 0 2.5rem color-mix(in srgb, var(--detail-accent) 9%, transparent), 0 0 0 7rem color-mix(in srgb, var(--detail-accent) 5%, transparent); }
.software-tool-layout { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(22rem, 1.05fr); align-items: center; gap: clamp(2.25rem, 6vw, 6.5rem); }

@media (min-width: 761px) {
  .software-tool-layout { transform: translateY(.85rem); }
}
.software-tool-copy { max-width: 37rem; }
.software-tool h2 { margin-bottom: 1.1rem; font-size: clamp(2rem, 4vw, 3.5rem); }
.software-tool-lead { max-width: 34rem; margin-bottom: 1.5rem; color: color-mix(in srgb, var(--detail-ink) 77%, transparent); }
.software-tool-features { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.software-tool-features li { display: grid; grid-template-columns: minmax(8rem, .55fr) minmax(0, 1.45fr); gap: 1rem; padding: .85rem 0; border-top: 1px solid color-mix(in srgb, var(--detail-ink) 16%, transparent); }
.software-tool-features li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--detail-ink) 16%, transparent); }
.software-tool-features strong { color: var(--detail-accent-deep); font-size: .92rem; }
.software-tool-features span { color: color-mix(in srgb, var(--detail-ink) 72%, transparent); font-size: .84rem; line-height: 1.65; }
.software-tool .detail-actions { margin-bottom: 0; }
.software-tool .primary-link { color: var(--detail-ink); border-color: var(--detail-ink); background: rgba(255, 250, 240, .34); }
.software-tool .primary-link:hover, .software-tool .primary-link:focus-visible { color: var(--paper-light); background: var(--detail-ink); }
.software-tool .text-link { color: var(--detail-ink); border-color: color-mix(in srgb, var(--detail-ink) 64%, transparent); }
.software-tool-preview { height: min(32rem, 62svh); min-height: 0; padding: .55rem; border: 1px solid rgba(255, 250, 240, .76); border-radius: .45rem; background: rgba(255, 253, 247, .86); box-shadow: 0 1.6rem 4rem rgba(23, 61, 84, .18); transform: rotate(1.25deg); }
.software-tool-preview-bar { min-height: 2.25rem; display: flex; align-items: center; gap: .35rem; padding: 0 .75rem; border-bottom: 1px solid rgba(23, 61, 84, .1); color: rgba(23, 61, 84, .68); font-family: "Noto Sans JP", sans-serif; font-size: .68rem; }
.software-tool-preview-bar span { width: .45rem; aspect-ratio: 1; border-radius: 50%; background: #d6a46d; }
.software-tool-preview-bar span:nth-child(2) { background: #84aa98; }
.software-tool-preview-bar span:nth-child(3) { background: #799cae; }
.software-tool-preview-bar b { margin-left: .35rem; font-weight: 700; }
.software-tool-preview-body { min-height: 0; height: calc(100% - 2.25rem); display: grid; grid-template-columns: .65fr 1.6fr .85fr; gap: .5rem; padding: .65rem; background: #edf4f1; }
.software-tool-preview-body > * { min-width: 0; padding: .65rem; border: 1px solid rgba(23, 61, 84, .1); border-radius: .22rem; background: rgba(255, 253, 247, .76); }
.software-tool-preview small { display: block; margin-bottom: .6rem; color: rgba(23, 61, 84, .66); font-family: "Noto Sans JP", sans-serif; font-size: .6rem; font-weight: 700; }
.software-tool-preview-list { display: grid; align-content: start; gap: .55rem; }
.software-tool-preview-list small { margin-bottom: 0; }
.software-tool-preview-list i { display: block; aspect-ratio: 1.15; border: 1px solid rgba(23, 61, 84, .12); border-radius: .15rem; background: linear-gradient(135deg, #dcc39c 0 34%, #95b2b2 35% 68%, #6d96a7 69%); }
.software-tool-preview-list i:nth-of-type(2) { background: linear-gradient(135deg, #dca69d 0 31%, #98b69a 32% 69%, #c9d7a1 70%); }
.software-tool-preview-list i:nth-of-type(3) { background: linear-gradient(135deg, #b5d5d2 0 32%, #e3c79d 33% 65%, #889fba 66%); }
.software-tool-preview-canvas { display: grid; grid-template-rows: auto 1fr; }
.software-tool-preview-canvas > div { display: grid; place-items: center; min-height: 0; overflow: hidden; background-color: #f9fbf9; background-image: linear-gradient(45deg, rgba(36, 73, 84, .09) 25%, transparent 25%), linear-gradient(-45deg, rgba(36, 73, 84, .09) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(36, 73, 84, .09) 75%), linear-gradient(-45deg, transparent 75%, rgba(36, 73, 84, .09) 75%); background-position: 0 0, 0 .75rem, .75rem -.75rem, -.75rem 0; background-size: 1.5rem 1.5rem; }
.software-tool-preview-canvas span { width: 49%; aspect-ratio: .68; border-radius: 45% 45% 28% 28%; background: linear-gradient(145deg, #283e55 0 22%, #f0c7a0 23% 41%, #6c91a3 42% 72%, #304f68 73%); box-shadow: .8rem 1rem 1.4rem rgba(20, 49, 69, .17); }
.software-tool-preview-controls { display: grid; align-content: start; gap: .72rem; }
.software-tool-preview-controls small { margin-bottom: 0; }
.software-tool-preview-controls i { display: block; height: .38rem; border-radius: 1rem; background: linear-gradient(90deg, #6f9aa2 0 62%, rgba(23, 61, 84, .13) 62%); }
.software-tool-preview-controls i:nth-of-type(2) { background: linear-gradient(90deg, #d0a267 0 43%, rgba(23, 61, 84, .13) 43%); }
.software-tool-preview-controls i:nth-of-type(3) { background: linear-gradient(90deg, #7a9f8a 0 76%, rgba(23, 61, 84, .13) 76%); }
.software-tool-preview-controls span { display: block; margin-top: .5rem; padding: .5rem .35rem; border-radius: .15rem; color: #fffdf7; background: #2f6574; font-family: "Noto Sans JP", sans-serif; font-size: .62rem; font-weight: 700; text-align: center; }

@media (max-width: 760px) {
  .site-header { min-height: auto; padding: 1.15rem 1.25rem; align-items: start; }
  .brand { width: 12.5rem; }
  .site-nav { gap: 0.75rem; padding-top: 0.15rem; font-size: 0.9rem; }
  .hero { min-height: 49rem; background-image: image-set(url("../images/homepage-hero-morning-v3-mobile.webp") type("image/webp") 1x, url("../images/homepage-hero-morning-v3.png") type("image/png") 1x); background-position: 63% center; }
  .hero::before { background: linear-gradient(180deg, rgba(255, 250, 240, 0.98) 0%, rgba(255, 250, 240, 0.94) 40%, rgba(255, 250, 240, 0.74) 65%, rgba(255, 250, 240, 0.44) 100%); }
  .hero-content { padding-top: 6.5rem; transform: translateY(-2vh); }
  .hero h1 { width: 100%; font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .hero-copy br, .contact-content br { display: none; }
  .hero .primary-link { color: var(--paper-light); border-color: var(--ink); background: var(--ink); }
  .studio-layout, .content-grid, .detail-principle-grid, .product-grid { grid-template-columns: 1fr; }
  .studio::before { background-position: 68% center; opacity: 0.1; }
  .contents::before { background-position: center; opacity: 0.07; }
  .studio-intro { padding-left: 1.25rem; }
  .studio-copy { padding: 1.5rem; }
  .content-card { min-height: 17rem; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 1.15rem; }
  .contents-heading-aside { margin-top: 1.15rem; }
  .product-card, .software-products .product-card { min-height: auto; }
  .product-card { padding: 1.5rem; }
  .detail-hero-grid, .detail-section-heading { grid-template-columns: 1fr; }
  .detail-hero { min-height: auto; padding-top: 8.5rem; }
  .detail-hero-marker { display: none; }
  .detail-overview, .detail-status { min-height: auto; }
  .software-tool { min-height: auto; padding: clamp(4.5rem, 14vw, 6.5rem) 0; }
  .software-products { min-height: auto; padding: clamp(4.5rem, 14vw, 6.5rem) 0; }
  .software-products .product-card-detail { grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .software-tool-layout { grid-template-columns: 1fr; }
  .software-tool-preview { min-height: min(30rem, 100vw); transform: none; }
  .detail-page .detail-overview, .detail-page .detail-status { padding: clamp(4.5rem, 14vw, 6.5rem) 0; }
  .detail-section-heading { gap: 1.15rem; }
  .detail-principle-grid { gap: 0.8rem; }
  .detail-principle { min-height: auto; }
  .detail-principle h3 { margin-top: 1.25rem; }
  .detail-status-card { padding: 1.65rem; }
  .detail-page { --detail-header-height: auto; }
  .detail-page .site-header { height: auto; align-items: center; }
  .contact-scene { background-image: linear-gradient(180deg, rgba(18, 54, 76, 0.66) 0%, rgba(18, 54, 76, 0.5) 52%, rgba(18, 54, 76, 0.16) 100%), image-set(url("../images/homepage-contact-night-v3-mobile.webp") type("image/webp") 1x, url("../images/homepage-contact-night-v3.png") type("image/png") 1x); background-position: 61% center; }
  html:has(body.home-page), html:has(body.detail-page) { scroll-snap-type: none; }
  .site-section { min-height: auto; padding: clamp(4.5rem, 14vw, 6.5rem) 0; }
  .contact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 28rem; gap: 0.8rem; }
  .contact-email { grid-column: 1 / -1; }
  .contact-social { width: 4.8rem; height: 4.8rem; padding: 1.1rem; justify-self: center; }
}

@media (max-width: 900px) {
  .detail-page .site-header { height: auto; min-height: var(--detail-header-height); flex-wrap: wrap; gap: 0.4rem; }
  .detail-page .site-nav { width: 100%; justify-content: space-between; gap: 0.45rem; padding-top: 0; font-family: "Noto Serif JP", "Yu Mincho", serif; font-size: 0.78rem; letter-spacing: 0; }
  .detail-page .site-nav-group { gap: 0.45rem; }
  .detail-page .site-nav-group--categories { padding-left: 0; border-left: 0; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .detail-page .site-header { min-height: 5.75rem; height: 5.75rem; padding: 0.75rem 1.25rem; flex-wrap: nowrap; gap: 0.75rem; }
  .detail-page .brand { flex: 0 0 auto; width: 11rem; }
  .detail-page .site-nav { width: auto; flex: 1; justify-content: flex-end; gap: 0.55rem; font-size: 0.72rem; }
  .detail-page .site-nav-group { gap: 0.55rem; }
  .detail-page .site-nav-group--categories { padding-left: 0.55rem; border-left: 1px solid color-mix(in srgb, var(--detail-ink) 26%, transparent); }
  .detail-page .site-nav a { min-height: 2.25rem; }
  .software-tool { padding: 2rem 0; }
  .software-tool-features li { padding: 0.7rem 0; }
}

@media (min-width: 461px) and (max-width: 620px) {
  .home-page .site-header { flex-wrap: wrap; gap: 0.25rem; }
  .home-page .site-nav { width: 100%; justify-content: space-between; padding-top: 0; font-size: 0.8rem; }
}

@media (max-width: 460px) {
  .site-nav { display: none; }
  .software-products .product-card-detail { grid-template-columns: 1fr; }
  .software-screen-button { max-width: 6.5rem; }
  .detail-page .site-header { flex-wrap: wrap; gap: 0.65rem; padding-bottom: 0.85rem; }
  .detail-page .site-nav { width: 100%; display: flex; justify-content: space-between; gap: 0.45rem; padding-top: 0; font-family: "Noto Serif JP", "Yu Mincho", serif; font-size: 0.77rem; letter-spacing: 0; }
  .detail-page .site-nav a { min-height: 2.75rem; padding: 0.2rem 0; }
  .hero { min-height: 43rem; }
  .utility-note { align-items: flex-start; flex-direction: column; }
  .content-shell { width: min(100% - 2.25rem, 1120px); }
  .hero-content { padding-top: 6.5rem; }
  .site-header.is-sticky { align-items: center; flex-wrap: wrap; gap: 0.35rem; padding: 0.55rem 1rem 0.7rem; }
  .site-header.is-sticky .brand { width: 10rem; }
  .detail-status-card { max-width: calc(100% - 2.25rem); }
  .site-header.is-sticky .site-nav { width: 100%; display: flex; justify-content: space-between; gap: 0.35rem; padding-top: 0; font-family: "Noto Serif JP", "Yu Mincho", serif; font-size: 0.75rem; letter-spacing: 0; }
  .site-header.is-sticky .site-nav a { min-height: 2.25rem; }
}

/* Keep the detail-page navigation usable when browser zoom leaves very little CSS width. */
@media (max-width: 120px) {
  .site-header { padding: 0.65rem 0.5rem; }
  .brand { width: 100%; max-width: 10rem; }
  .detail-page .site-header { gap: 0.35rem; }
  .detail-page .site-nav { flex-direction: column; align-items: stretch; gap: 0.1rem; }
  .detail-page .site-nav a { width: 100%; min-height: 2.75rem; overflow-wrap: anywhere; }
  .content-shell { width: calc(100% - 1rem); }
  .narrow-content { width: calc(100% - 1rem); max-width: calc(100% - 1rem); min-width: 0; }
  .detail-actions { flex-direction: column; align-items: stretch; gap: 0.65rem; }
  .detail-actions .primary-link, .detail-actions .text-link { width: 100%; min-width: 0; max-width: 100%; justify-content: space-between; gap: 0.35rem; padding: 0.65rem 0.5rem; letter-spacing: 0; overflow-wrap: anywhere; white-space: normal; }
  .mail-link { max-width: 100%; gap: 0.35rem; overflow-wrap: anywhere; }
  .site-footer p { width: 100%; min-width: 0; overflow-wrap: anywhere; word-break: break-all; white-space: normal; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header.is-section-entering,
  .site-header.is-section-entering::after,
  .site-header.is-returning-hero::after,
  .site-header.is-returning-hero::before,
  .site-header.is-hero-entering,
  .site-header.is-contact-transition .brand,
  .site-header.is-contact-transition .site-nav,
  .site-header.is-contact-transition::after { animation: none; }
  .site-header.is-returning-hero::before,
  .site-header.is-returning-hero::after { content: none; }
}