/*
 * MoonJapan responsive guardrails
 *
 * The desktop composition remains owned by each page stylesheet. This file is
 * loaded last and only supplies shared behavior below the desktop baseline,
 * plus narrow/short-viewport safety rules.
 */

:root {
  --responsive-gutter: clamp(1rem, 4vw, 2rem);
  --responsive-header-height: 4.6rem;
  --responsive-tap-size: 2.75rem;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
video,
iframe,
canvas,
svg {
  max-inline-size: 100%;
}

main,
section,
article,
nav,
form,
fieldset,
figure,
div {
  min-inline-size: 0;
}

h1,
h2,
h3,
p,
li,
a,
button,
label {
  overflow-wrap: anywhere;
}

.site-header__menu-toggle {
  min-width: var(--responsive-tap-size);
  min-height: var(--responsive-tap-size);
  touch-action: manipulation;
}

.site-header__nav a,
.site-header__nav button,
.firstview-action,
.service-card,
.more-button,
.download-button,
.contact-gate__choices button,
.contact-tabs button {
  touch-action: manipulation;
}

/* Tablet nav sizing within the shared 768px–1199px range. */

@media (width >= 768px) and (width < 1200px) {
  .site-header__nav {
    right: 0.85rem;
    width: min(22rem, calc(100vw - 1.7rem));
  }
}

/* Tablet and intermediate widths. The home page uses its compact composition
   at this range; all other pages keep their own tablet layouts. */

@media (width >= 768px) and (width < 1200px) {
  :root {
    --responsive-gutter: clamp(2rem, 6vw, 4rem);
  }
}

@media (width >= 768px) and (width < 1200px) {
  body:not(.subpage) .site-header__logo-wrap {
    width: 8.5rem;
    height: 3.4rem;
  }

  body:not(.subpage) .site-header__logo {
    width: 10rem;
    height: 10rem;
  }
}

@media (width >= 768px) and (width < 1200px) {
  body:not(.subpage) .chapter-content {
    padding: clamp(5.5rem, 9vh, 7rem) clamp(2rem, 5vw, 4rem)
      clamp(1.5rem, 3vh, 2.5rem);
  }

  body:not(.subpage) .mission-content {
    padding-inline: clamp(2.5rem, 7vw, 5.5rem);
  }

  body:not(.subpage) .mission-content__copy {
    justify-self: center;
    width: min(100%, 38rem);
  }

  body:not(.subpage) .mission-content__heading {
    font-size: clamp(2.6rem, 5.4vw, 3.75rem);
  }

  body:not(.subpage) .mission-content__body {
    font-size: clamp(0.82rem, 1.55vw, 0.98rem);
    line-height: 1.95;
  }

  body:not(.subpage) .mission-content__visual img {
    width: min(88%, 34rem);
    max-height: 43svh;
  }

  body:not(.subpage) .service-content {
    padding-inline: clamp(1.25rem, 3vw, 2.75rem);
  }

  body:not(.subpage) .service-card__details {
    grid-template-columns: minmax(7rem, 0.7fr) minmax(12rem, 1.1fr)
      minmax(10rem, 0.8fr);
    grid-template-rows: 1fr;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    padding: clamp(1rem, 2vw, 1.6rem) clamp(1.2rem, 3vw, 2.2rem);
  }

  body:not(.subpage) .service-card__phrase {
    align-self: center;
  }

  body:not(.subpage) .service-card__phrase small {
    font-size: 0.68rem;
  }

  body:not(.subpage) .service-card__phrase strong {
    font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  }

  body:not(.subpage) .service-card__name {
    grid-column: auto;
    justify-self: center;
    font-size: clamp(2.4rem, 5.3vw, 3.9rem);
  }

  body:not(.subpage) .service-card__audience {
    align-self: center;
    font-size: clamp(0.72rem, 1.35vw, 0.9rem);
  }

  body:not(.subpage) .footer-content {
    gap: clamp(1.5rem, 4vh, 3rem);
    padding-inline: clamp(2.5rem, 7vw, 5rem);
  }

  body:not(.subpage) .footer-content__brand {
    width: min(18rem, 100%);
  }

  body:not(.subpage) .footer-content__logo-wrap {
    width: 13rem;
    height: 4.4rem;
  }

  body:not(.subpage) .footer-content__logo {
    width: 14rem;
    height: 14rem;
  }

  body:not(.subpage) .footer-content__brand p {
    font-size: 0.95rem;
  }

  body:not(.subpage) .footer-content__nav {
    gap: clamp(1.5rem, 4vw, 3rem);
  }

  body:not(.subpage) .footer-content__nav h2 {
    font-size: 0.82rem;
  }

  body:not(.subpage) .footer-content__nav a,
  body:not(.subpage) .footer-content__nav button,
  body:not(.subpage) .footer-content__nav span {
    font-size: 0.68rem;
  }
}

/* Phones. Shared rules are deliberately restrained so the visual identity of
   About, Team, MoonShot and especially Recruit remains page-specific. */

@media (width < 768px) {
  :root {
    --responsive-gutter: clamp(1rem, 5vw, 1.35rem);
  }
}

@media (width < 768px) {
  :root {
    --responsive-header-height: 3.7rem;
  }

  :root {
    --responsive-tap-size: 2.75rem;
  }

  :root {
    --content-shell-standard-inset: 2rem;
  }

  :root {
    --design-section-space-mobile: 5.5rem;
  }

  :root {
    --mobile-viewport-height: 100vh;
  }

  :root {
    /* Keep the same Japanese and Latin stacks used by the PC composition.
       "Yu Gothic Pr6N" is the insertion point for a licensed webfont kit. */
    --font-gothic: "Yu Gothic Pr6N", "Yu Gothic", "YuGothic",
      "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
      sans-serif;
  }

  :root {
    --font-heiti: "STHeiti Light", "STHeiti", "Hiragino Kaku Gothic ProN",
      "Hiragino Sans", sans-serif;
  }

  @supports (height: 100dvh) {
    :root {
      --mobile-viewport-height: 100dvh;
    }
  }

  html,
  body,
  button,
  input,
  select,
  textarea {
    font-synthesis: none;
  }

  /* Dynamic viewport units follow Chrome/Safari's expanding address bar. */

  .intro,
  .page-transition,
  .section-transition {
    height: var(--mobile-viewport-height);
    min-height: var(--mobile-viewport-height);
  }

  body:not(.subpage) .firstview__sticky,
  body:not(.subpage) .scroll-chapter__stage {
    height: var(--mobile-viewport-height);
    min-height: var(--mobile-viewport-height);
  }

  body:not(.subpage) .firstview__copy {
    top: 50%;
  }
}

@media (width < 768px) {
  body:not(.subpage) .firstview-actions {
    bottom: max(0.85rem, env(safe-area-inset-bottom));
  }
}

  /* Keep the full-viewport introductions on the other pages equally safe. */
@media (width < 768px) {
  .team-scroll-intro__sticky {
    height: var(--mobile-viewport-height);
    min-height: max(35rem, var(--mobile-viewport-height));
  }

  .recruit-fv__sticky {
    height: var(--mobile-viewport-height);
    min-height: max(34rem, var(--mobile-viewport-height));
  }
}

@media (width < 768px) {
  .site-header {
    padding-right: max(0.6rem, env(safe-area-inset-right));
    padding-left: max(0.6rem, env(safe-area-inset-left));
  }

  .site-header__nav {
    right: max(0.6rem, env(safe-area-inset-right));
    width: min(21rem, calc(100vw - 1.2rem));
    max-height: calc(var(--mobile-viewport-height) - var(--responsive-header-height) - 0.75rem);
    overscroll-behavior: contain;
  }

  .site-header__nav > a,
  .site-header__nav > button,
  .site-header__nav .nav-group__trigger,
  .nav-dropdown a,
  .nav-dropdown button {
    min-height: var(--responsive-tap-size);
  }

  .site-header__nav .site-header__teacher {
    min-height: 3.1rem;
    margin: 0.45rem 0 0;
    padding-inline: 0.85rem;
    font-size: 0.75rem;
    letter-spacing: 0.07em;
  }
}

  /* Home / Mission: mobile-only reading order and one-screen composition. */
@media (width < 768px) {
  body:not(.subpage) .mission-content {
    display: grid;
    grid-template-areas:
      "kicker"
      "body"
      "visual"
      "heading"
      "button";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, auto);
    align-content: center;
    gap: clamp(0.2rem, 0.55dvh, 0.4rem);
    height: 100%;
    padding: calc(var(--responsive-header-height) + clamp(3.25rem, 8.5dvh, 4.5rem))
      1rem max(clamp(3.25rem, 8.5dvh, 4.5rem), env(safe-area-inset-bottom));
  }

  body:not(.subpage) .mission-content__copy {
    display: contents;
  }

  body:not(.subpage) .mission-content .section-kicker {
    grid-area: kicker;
    margin: 0;
    font-size: clamp(0.7rem, 3vw, 0.78rem);
  }

  body:not(.subpage) .mission-content__body {
    grid-area: body;
    font-size: clamp(0.72rem, 3.05vw, 0.82rem);
    letter-spacing: 0.025em;
    line-height: 1.7;
  }

  body:not(.subpage) .mission-content__visual {
    grid-area: visual;
    align-self: center;
    min-height: 0;
    margin: 0;
  }

  body:not(.subpage) .mission-content__visual img {
    width: 75vw;
    max-width: none;
    max-inline-size: none;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  body:not(.subpage) .mission-content__heading {
    grid-area: heading;
    align-self: end;
    margin: 0;
    font-size: clamp(1.85rem, 8.4vw, 2.45rem);
    line-height: 1.22;
  }

  body:not(.subpage) .mission-content .more-button {
    grid-area: button;
    min-height: 2.75rem;
    margin: 0;
    font-size: 0.76rem;
  }

  /* Home / Service: restore readable supporting copy on image cards. */

  body:not(.subpage) .service-card__phrase small {
    font-size: clamp(0.72rem, 3.1vw, 0.8rem);
    line-height: 1.35;
  }

  body:not(.subpage) .service-card__audience {
    grid-area: 1 / 2;
    align-self: end;
    font-size: clamp(0.7rem, 2.95vw, 0.78rem);
    line-height: 1.5;
  }

  body:not(.subpage) .service-card__phrase {
    grid-area: 1 / 1;
    align-self: start;
  }

  body:not(.subpage) .service-card__name {
    z-index: 1;
    grid-area: 1 / 1 / 2 / 3;
    place-self: center;
    font-size: clamp(1.85rem, 10vw, 2.6rem);
    text-align: center;
    pointer-events: none;
  }

  body:not(.subpage) .service-card__details {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  /* Home / Footer: match the shared subpage footer structure, retaining the
       home page's yellow background and white foreground. */

  body:not(.subpage) .footer-content {
    grid-template-rows: auto auto 1fr;
    align-items: start;
    gap: clamp(1.75rem, 5dvh, 3rem);
    padding: calc(var(--responsive-header-height) + 1.25rem) 1rem
      max(1.25rem, env(safe-area-inset-bottom));
  }

  body:not(.subpage) .footer-content__brand {
    justify-self: start;
    align-items: flex-start;
    width: 13rem;
    text-align: left;
  }

  body:not(.subpage) .footer-content__logo-wrap {
    width: 13rem;
    height: 4.5rem;
  }

  body:not(.subpage) .footer-content__logo {
    width: 13rem;
    height: 13rem;
  }

  body:not(.subpage) .footer-content__brand p {
    margin-top: 1.2rem;
    font-size: 0.9rem;
  }

  body:not(.subpage) .footer-content__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-self: start;
    gap: 0.75rem;
  }

  body:not(.subpage) .footer-content__nav h2 {
    margin-bottom: 0.7rem;
    font-size: 0.76rem;
  }

  body:not(.subpage) .footer-content__nav a,
  body:not(.subpage) .footer-content__nav button,
  body:not(.subpage) .footer-content__nav span {
    padding-block: 0.38rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0.64rem;
    letter-spacing: 0.025em;
    line-height: 1.65;
  }

  body:not(.subpage) .footer-content__license {
    align-self: end;
    justify-self: end;
  }

  .page-container,
  .page-hero__content,
  .contact-container,
  .privacy-container {
    width: min(calc(100% - (var(--responsive-gutter) * 2)), 78rem);
  }

  .page-hero,
  .section-block {
    scroll-margin-top: var(--responsive-header-height);
  }
}

@media (width < 768px) {
  .company-section:where(.mvv-asset-stage, .founder-stage) {
    scroll-margin-top: var(--responsive-header-height);
  }
}

@media (width < 1200px) {
  .company-section:where(:not(.mvv-asset-stage, .founder-stage)) {
    scroll-margin-top: var(--responsive-header-height);
  }
}

@media (width < 768px) {
  .news-card{
    -webkit-tap-highlight-color: transparent;
  }
}

@media (width < 768px) {
  .download-button {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (width < 1200px) {
  .contact-gate__choices button {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (width < 768px) {
  .news-card__meta {
    gap: 0.75rem;
  }

  .news-card h2,
.privacy-document h2{
    text-wrap: pretty;
  }
}

@media (width < 768px) {
  .download-button {
    min-height: 3.5rem;
  }
}

@media (width < 768px) {

  .moonshot-page,
.moonshot-hero,
.moonshot-film{
    max-width: 100%;
    overflow-x: clip;
  }

  .moonshot-page iframe,
  .moonshot-page video {
    width: 100%;
  }

  /* The desktop film passes in front of the service title for depth. On a
       phone the title is the primary orientation cue, so keep it legible above
       the foreground film while retaining the surrounding photo composition. */

  .moonshot-page .moonshot-hero__copy {
    z-index: 6;
    text-shadow:
      0 0 0.35rem rgba(255, 255, 255, 0.98),
      0 0 1.2rem rgba(255, 255, 255, 0.92),
      0 0 2.5rem rgba(255, 255, 255, 0.72);
  }
}

  /* Keep iOS/Android GPU-composited WebGL canvases behind the fixed header. */
@media (width < 768px) {
  .moonshot-page .site-header {
    isolation: isolate;
    background: rgba(245, 245, 245, 0.96);
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

@media (width < 768px) {
  .moonshot-page .moonshot-hero__sticky {
    top: 0;
    height: var(--mobile-viewport-height);
    min-height: var(--mobile-viewport-height);
  }

  .moonshot-page .moonshot-contact__links {
    width: min(calc(100% - 2rem), 24rem);
    margin-inline: auto;
  }

  .news-hero {
    min-height: auto;
    padding-bottom: 0;
  }

  .news-hero + .section-block {
    padding-top: 1rem;
  }

  /* Recruit intentionally keeps its independent tone. Only edge safety and
       controls are normalized here. */

  .recruit-page .recruit-main,
  .recruit-page .recruit-fv,
  .recruit-page .recruit-story {
    max-width: 100%;
    overflow-x: clip;
  }
}

@media (width < 768px) {
  body:not(.subpage) .firstview-action {
    padding-inline: 0.4rem;
    font-size: 0.62rem;
  }

  .site-footer__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem;
  }

  .site-footer__group:last-child {
    grid-column: 1 / -1;
  }

  .contact-gate__choices button {
    padding-inline: 0.35rem;
  }

  .contact-gate__copy strong {
    font-size: 0.82rem;
  }

  .moonshot-page .moonshot-hero__copy h1 {
    font-size: clamp(2rem, 10vw, 2.25rem);
    letter-spacing: 0;
  }
}

/* Short screens retain the motion language while keeping key controls inside
   the visible area. */

@media (width < 768px) and (max-height: 700px) {
  body:not(.subpage) .firstview__sticky,
  body:not(.subpage) .scroll-chapter__stage {
    min-height: var(--mobile-viewport-height);
  }

  body:not(.subpage) .firstview__copy {
    top: 50%;
  }

  body:not(.subpage) .firstview-action {
    min-height: 3.25rem;
  }

  body:not(.subpage) .chapter-content {
    padding-bottom: 0.65rem;
  }

  body:not(.subpage) .mission-content {
    grid-template-rows: repeat(5, auto);
    align-content: center;
    padding-top: calc(var(--responsive-header-height) + 1.25rem);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  body:not(.subpage) .mission-content .section-kicker,
  body:not(.subpage) .mission-content .more-button {
    margin-block: 0;
  }

  body:not(.subpage) .mission-content__visual img {
    width: min(75vw, calc((100dvh - 365px) * 1.291));
    height: auto;
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}