/* Phone layout: real text, a shared Japanese font, and room to read. */
@font-face {
  font-family: "Jisouka Mobile";
  src: url("/assets/fonts/jisouka-mobile-jp.woff2?v=20260913-9") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@media (max-width: 700px) {
  :root { --pad: clamp(20px, 5.5vw, 32px); }
  body {
    font-family: "Jisouka Mobile", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.95;
    letter-spacing: .015em;
  }
  h1, h2, h3, h4, h5 { overflow-wrap: anywhere; }
  .hero h1, .recruit-hero h1, .mobile-heading h2, .split-heading h2,
  .company-heading h2, .contact-section h2, .recruit-banner h2,
  .recruit-contact-grid h2, .support-hero h1 {
    letter-spacing: 0;
    font-weight: 700;
  }
  .outline { color: #fff; -webkit-text-fill-color: #fff; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: 108px;
    padding-bottom: 26px;
  }
  .hero-topline { font-size: .75rem; line-height: 1.7; letter-spacing: .045em; gap: 12px; flex-wrap: wrap; }
  .hero-copy { margin-top: 34px; }
  .eyebrow, .recruit-page .eyebrow { font-size: .875rem; letter-spacing: .06em; line-height: 1.8; margin-bottom: 18px; }
  .hero h1, .recruit-hero h1 { font-size: clamp(2.625rem, 11.4vw, 4rem); line-height: 1.3; }
  .hero-description { margin-top: 26px; max-width: 34em; text-wrap: pretty; }
  .hero-description > span { display: block; }
  .hero-fields { display: grid; grid-template-columns: 1fr; gap: 0; max-width: none; margin-top: 22px; font-size: .875rem; line-height: 1.8; font-weight: 600; }
  .hero-fields a { display: block; min-height: 44px; padding: 9px 0; border-color: #c6c6c6; }
  .hero-logo { position: relative; inset: auto; width: clamp(150px, 45vw, 220px); max-width: 55%; margin: 18px 0 4px auto; }
  .hero-line { opacity: .18; }
  .hero-bottom { position: relative; inset: auto; margin-top: 4px; }
  .scroll-link { font-size: .75rem; letter-spacing: .06em; line-height: 1.8; white-space: normal; min-height: 44px; }
  .section-pad { padding-top: 60px; padding-bottom: 60px; }
  .section-kicker { flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-size: .75rem; line-height: 1.8; letter-spacing: .06em; }
  .section-kicker > span:last-child { white-space: normal; }
  .small-label, .app-projects .small-label, .experience-copy .small-label,
  .gallery-top .small-label { font-family: inherit; font-size: .75rem; line-height: 1.8; letter-spacing: .055em; }
  .business-index h2, .mobile-heading h2, .split-heading h2 { font-size: clamp(1.875rem, 8vw, 2.5rem); line-height: 1.5; letter-spacing: 0; }
  .business-index h2 { margin: 32px 0; }
  .business-links strong { font-size: 1.375rem; line-height: 1.7; font-weight: 600; }
  .hero-description, .service-list p, .section-description > p:last-of-type,
  .split-heading > p, .story-copy > p:not([class]), .app-projects p:not([class]),
  .lucha-title > p:not([class]), .experience-copy p:not([class]),
  .media-project-copy > p:not([class]), .contact-section > p,
  .recruit-intro, .recruit-fields-grid p, .recruit-contact-grid p,
  .recruit-work-list article > div > p:last-child, .support-lead, .support-content p {
    font-size: 1rem;
    line-height: 1.95;
    overflow-wrap: anywhere;
  }
  .hero-description br, .split-heading > p br, .lucha-title > p:not([class]) br,
  .contact-section > p br { display: none; }
  .mobile-heading > p, .story-copy > .story-lead, .lucha-tagline,
  .media-project-copy .media-lead { font-size: 1.125rem; line-height: 1.9; font-weight: 600; }
  .section-description h3, .service-list h3, .recruit-fields-grid h3,
  .recruit-work-list h3 { font-size: 1.375rem; line-height: 1.7; letter-spacing: 0; }
  .story-copy h3, .app-projects h3, .media-project-copy h3,
  .media-project-copy h3 > span, .original-music .video-feature h5 {
    font-family: inherit;
    letter-spacing: 0;
    line-height: 1.45;
  }
  .story-copy h3, .story-copy h3.connect-title { font-size: clamp(1.875rem, 8.5vw, 2.375rem); }
  .media-project-copy h3 { font-size: clamp(1.75rem, 7.5vw, 2.125rem); }
  .internal-project { grid-template-columns: 1fr; gap: 16px; }
  .internal-project .app-icon { width: 80px; }
  .app-projects h3 { font-size: 1.625rem; }
  .app-features li { font-size: .875rem; line-height: 1.7; padding: 5px 10px; }
  .lucha-title h3 { font-family: inherit; font-size: clamp(2.625rem, 12vw, 3.5rem); line-height: 1.35; letter-spacing: 0; }
  .lucha-title h3 > span { letter-spacing: -.02em; }
  .lucha-details > summary, .ensemble-preview figcaption, .ensemble-open-hint { font-size: .875rem; line-height: 1.8; }
  .lucha-end { padding-top: 0; padding-bottom: 25px; }
  .gallery-top { flex-wrap: wrap; gap: 12px; }
  .gallery-controls { margin-left: auto; }
  .gallery-controls button { width: 44px; height: 44px; }
  .gallery-top strong { font-size: 1.125rem; line-height: 1.8; }
  .experience-copy h4 { font-size: 1.875rem; line-height: 1.6; letter-spacing: 0; }
  .photo-title { font-size: clamp(1.375rem, 6.2vw, 2rem); letter-spacing: -.02em; line-height: 1.2; }
  .expanding-photo figcaption, .image-caption, .battle-slide figcaption,
  .media-data-note, .recruit-work-note, .recruit-locations figcaption,
  .ensemble-viewer-note, .recruit-hero-art figcaption { font-size: .75rem; line-height: 1.9; }
  .video-feature h4, .original-music .video-feature h5 { font-size: 1.25rem; line-height: 1.7; }
  .video-description, .event-record, .office-photo figcaption > p:last-child { font-size: .875rem; line-height: 1.9; }
  .company-heading { flex-wrap: wrap; }
  .company-heading h2 { font-size: clamp(1.625rem, 7vw, 2rem); line-height: 1.5; }
  .company-data > div { grid-template-columns: 1fr; gap: 5px; padding: 20px 0; }
  .company-data dt { font-size: .875rem; line-height: 1.8; }
  .company-data dd { min-width: 0; font-size: 1rem; line-height: 1.9; overflow-wrap: anywhere; }
  .contact-section h2, .recruit-banner h2, .recruit-contact-grid h2 { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.5; }
  .text-link, .contact-cta, .direct-contact, .recruit-section-links,
  .recruit-contact-box .text-link, .recruit-email { font-size: .9375rem; line-height: 1.85; }
  .text-link { min-width: 0; gap: 16px; }
  .contact-cta { gap: 18px; padding: 20px; }
  .direct-contact a { overflow-wrap: anywhere; }
  .recruit-hero { padding-top: 108px; padding-bottom: 40px; }
  .recruit-section-links { flex-wrap: wrap; gap: 12px 24px; }
  .recruit-section-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .recruit-work-list article { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .recruit-banner p:last-child { font-size: 1rem; }
  .support-hero { padding-top: 110px; padding-bottom: 35px; }
  .support-content { padding-top: 35px; padding-bottom: 60px; }
  .support-hero h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem); }
  .support-email { font-size: 1.125rem; }
  .site-footer, .breadcrumb { font-size: .75rem; }
  .site-footer > div a { font-size: .875rem; }
  .more-activities { flex-wrap: wrap; font-size: .875rem; gap: 8px 14px; }
  .more-activities > span:first-child { font-size: .75rem; }
}

@media (max-width: 360px) {
  .hero-topline { display: grid; gap: 2px; }
  .hero-copy { margin-top: 28px; }
  .office-photo { grid-template-columns: 1fr; }
  .office-photo figcaption { display: block; }
  .office-photo figcaption > p:last-child { margin-top: 8px; }
}