/* ============================================================
   mobile-head.css — <768px overrides for the fixed chrome
   (header / menu overlay), the hero + opening sequence, the
   concept panel, the home bar and the footer.

   Everything lives inside one media query: at >=768px the
   1440px composition is zoom-fitted by assets/js/responsive.js
   and must stay untouched.
   ============================================================ */

@media (max-width: 767px) {

  /* ---------- canvas ---------- */

  /* the 1440px design canvas becomes fluid; `clip` (not `hidden`)
     avoids turning .page into a scroll container */
  .page {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  /* ============================================================
     fixed header
     ============================================================ */

  #site-header,
  #menu-overlay {
    left: 0;
    margin-left: 0;
    width: 100%;
  }

  #site-header {
    height: 64px;
  }

  /* white logo box: C&P + 社名 inside ~150px. The type is clamped on vw
     so the box and the ink box opposite it still clear each other at
     320px, the narrowest phone worth supporting. */
  .header__logo {
    width: auto;
    max-width: 188px;
    height: 64px;
    padding: 8px clamp(10px, 3.6vw, 14px) 8px clamp(12px, 4.1vw, 16px);
    border-radius: 0 0 12px 0;
    gap: 2px;
  }

  .header__logo-mark {
    font-size: clamp(18px, 5.6vw, 22px);
    line-height: 1;
    letter-spacing: -0.4px;
  }

  .header__logo-name {
    font-size: clamp(7px, 2.2vw, 8.5px);
    line-height: 1.2;
    letter-spacing: 0;
  }

  .header__notch--right { top: 0;    left: 100%; }
  .header__notch--below { top: 64px; left: 0; }

  /* ink box: 応募する pill + Menu */
  .header__right {
    left: auto;
    right: 0;
    width: auto;
    height: 64px;
    padding: 0 clamp(10px, 3.6vw, 14px);
    gap: clamp(8px, 3vw, 12px);
    border-radius: 0 0 0 8px;
  }

  .header__entry {
    width: auto;
    height: 38px;
    padding: 0 clamp(9px, 3.3vw, 13px);
    gap: 8px;
    border-radius: 999px;
  }

  .header__entry-label {
    font-size: clamp(12px, 3.3vw, 13px);
    line-height: 1;
  }

  .header__menu {
    width: auto;
    min-width: 44px;
    height: 44px;
    justify-content: center;
    gap: 6px;
  }

  .header__menu-lines { width: clamp(22px, 6.6vw, 26px); }
  .header__menu-line  { width: clamp(22px, 6.6vw, 26px); }
  .header__menu-label { font-size: 11px; line-height: 11px; }

  /* ============================================================
     menu overlay — one column, scrollable
     ============================================================ */

  #menu-overlay {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: 84px 20px 48px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* the light/shade wash is anchored to the 1440 canvas — refit it */
  .menu__art {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 90% 34%, 70% 26%, 110% 42%, 82% 30%;
  }

  .menu__logo {
    top: 16px;
    left: 20px;
    gap: 4px;
  }

  .menu__logo-mark { font-size: 26px; line-height: 26px; letter-spacing: -0.5px; }
  .menu__logo-name { font-size: 10px; line-height: 10px; }

  /* stays reachable while the sitemap scrolls underneath */
  .menu__close {
    position: fixed;
    top: 0;
    left: auto;
    right: 0;
    width: 64px;
    height: 64px;
    z-index: 10;
  }

  .menu__close-x     { top: 18px; left: 24px; }
  .menu__close-label { top: 40px; width: 64px; font-size: 11px; line-height: 11px; }

  .menu__nav {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .menu__col {
    position: static;
  }

  .menu__bar {
    width: 6px;
    flex: 0 0 6px;
    border-radius: 3px;
  }

  .menu__col-body {
    margin-left: 12px;
    gap: 10px;
  }

  .menu__head {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.5px;
  }

  .menu__links {
    gap: 0;
  }

  .menu__links > * {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.3px;
    white-space: normal;
  }

  .menu__entry {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  .menu__entry-en { font-size: 34px; line-height: 34px; letter-spacing: -0.7px; }
  .menu__entry-jp { font-size: 14px; line-height: 14px; }

  .menu__entry-circle { width: 56px; height: 56px; }

  /* ============================================================
     opening sequence
     ============================================================ */

  /* the blobs are sized in vw, which reads far too small inside a tall
     portrait frame — roughly double them so the burst still fills it */
  .opening__blob--1 { width: 62vw; height: 62vw; left: -14vw; }
  .opening__blob--2 { width: 50vw; height: 50vw; right: -12vw; }
  .opening__blob--3 { width: 44vw; height: 44vw; left: 2vw; }
  .opening__blob--4 { width: 58vw; height: 58vw; right: -14vw; }
  .opening__blob--5 { width: 32vw; height: 32vw; left: 26vw; top: 12vh; }
  .opening__blob--6 { width: 30vw; height: 30vw; right: 12vw; top: 26vh; }
  .opening__blob--7 { width: 26vw; height: 26vw; left: 36vw; bottom: 6vh; }

  /* 24vw would bottom out on the 12rem minimum and run "C&P" past
     the viewport on a 390px phone */
  .opening__logo {
    font-size: clamp(5rem, 30vw, 12rem);
  }

  .opening__sub {
    top: 66%;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    /* the tracking is applied after the last glyph too — pull the
       optical centre back */
    margin-left: 0.11em;
  }

  /* ============================================================
     hero
     ============================================================ */

  #hero {
    height: 100vh;
    height: 100svh;
  }

  .hero__video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* side nav has no room on a phone */
  .hero__nav { display: none; }

  /* the two white headline boxes become a bottom-left stack */
  .hero__copyStack {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 74px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .hero__copy--1,
  .hero__copy--2 {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    height: auto;
  }

  .hero__copy--1 {
    padding: 9px 14px 9px 12px;
    border-radius: 0 12px 0 0;
  }

  .hero__copy--2 {
    padding: 6px 14px 4px 12px;
    border-radius: 0 12px 0 0;
  }

  /* nowrap is kept from desktop, so the line has to be sized to fit */
  .hero__copyLine {
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.45;
    letter-spacing: 0;
  }

  /* NBSP in the markup makes the wordmark unbreakable, so it has to
     be sized to fit one line rather than allowed to wrap */
  .hero__copyTitle {
    font-size: clamp(1.5rem, 7.6vw, 3rem);
    line-height: 1.28;
    letter-spacing: -0.5px;
  }

  .hero__notch--copy1Top   { left: 0;      top: -16px; }
  .hero__notch--copy1Right { right: -16px; top: auto; bottom: 0; }
  .hero__notch--copy2Right { right: -16px; top: auto; bottom: 0; }

  .hero__indicator {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    width: auto;
    height: auto;
    padding: 15px 16px 13px 18px;
    border-radius: 12px 0 0 0;
  }

  .hero__slideNum p    { font-size: 20px; line-height: 20px; }
  .hero__slideTotal    { font-size: 17px; line-height: 17px; }
  .hero__slideNum      { width: 26px; }
  .hero__progress      { margin: 0 8px 0 10px; }

  .hero__notch--indTop  { left: auto; right: 0; top: -16px; }
  .hero__notch--indLeft { left: -16px; top: auto; bottom: 0; }

  /* wider stripes so the diagonal wipe still covers a narrow frame */
  .hero__wipe i { width: 72%; }

  /* ============================================================
     concept — full-bleed painted panel, horizontal headline
     ============================================================ */

  #concept {
    height: auto;
    overflow: hidden;
    padding: 32px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .concept__card,
  .concept__art {
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    height: auto;
  }

  .concept__art {
    background-size:
      52% 9%, 44% 8%, 38% 7%,
      60% 10%, 46% 9%, 34% 7%;
  }

  /* white tab pinned to the panel's top-left corner */
  .concept__lead {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: -24px 40px 26px -16px;
    padding: 14px 16px 16px 16px;
    border-radius: 0 0 12px 0;
    display: block;
  }

  /* vertical writing -> horizontal, inline so the coloured
     characters stay in the flow of the sentence */
  .concept__leadCol {
    display: inline;
    writing-mode: horizontal-tb;
    width: auto;
    font-size: 20px;
    line-height: 1.55;
    letter-spacing: 0.2px;
    word-break: normal;
    line-break: auto;
  }

  /* inline-flex both swallows the source whitespace between the
     one-character spans and keeps 『まかせられる』 unbreakable */
  .concept__leadQuote {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    width: auto;
    vertical-align: baseline;
  }

  .concept__leadChar {
    display: block;
    width: auto;
    height: auto;
    font-size: 20px;
    line-height: 1.55;
  }

  .concept__notch--leadRight  { left: 100%; top: 0; }
  .concept__notch--leadBottom { left: 0;    top: 100%; }

  .concept__body {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    gap: 20px;
  }

  .concept__text {
    font-size: 14px;
    line-height: 1.9;
  }

  .concept__char {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
  }

  .concept__char img {
    width: 100%;
    height: auto;
  }

  .concept__char--1 {
    width: 110px;
    align-self: flex-end;
    margin: 16px 4px 0 0;
  }

  .concept__char--2 {
    width: 150px;
    align-self: flex-start;
    margin: -8px 0 0 0;
  }

  /* ============================================================
     home bar
     ============================================================ */

  #homebar {
    height: auto;
    padding: 0 12px 24px;
  }

  .homebar__bar {
    width: 100%;
    height: auto;
    padding: 14px 22px;
  }

  .homebar__label {
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.3px;
  }

  /* ============================================================
     footer — single column
     ============================================================ */

  #site-footer {
    height: auto;
    padding: 36px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .footer__nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .footer__col {
    position: static;
  }

  .footer__bar {
    width: 6px;
    flex: 0 0 6px;
    border-radius: 3px;
  }

  .footer__col-body {
    margin-left: 12px;
    gap: 8px;
  }

  .footer__head {
    font-size: 26px;
    line-height: 30px;
    letter-spacing: -0.5px;
  }

  .footer__links {
    gap: 0;
  }

  .footer__links > * {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    white-space: normal;
  }

  .footer__entry {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 28px;
    padding-bottom: 22px;
  }

  .footer__entry-en { font-size: 32px; line-height: 32px; letter-spacing: -0.6px; }
  .footer__entry-jp { font-size: 14px; line-height: 14px; }

  .footer__entry-circle { width: 52px; height: 52px; }

  .footer__wordmark {
    position: static;
    height: auto;
    margin-top: 22px;
    justify-content: center;
  }

  .footer__wordmark-text {
    font-size: 30vw;
    line-height: 1.05;
    letter-spacing: -2px;
  }

  .footer__meta {
    position: static;
    height: auto;
    margin-top: 14px;
    justify-content: center;
    gap: 16px;
  }

  .footer__copy {
    font-size: 11px;
    line-height: 14px;
    letter-spacing: -0.1px;
  }

}