/* ==========================================================================
   Top page — smartphone design (Figma: 0929更新 / TOP SP, 390 x 8933)
   Applies to pages that opt in with <html data-sp> at ≤767px viewports.
   The 390px canvas is scaled to the viewport width by the inline --page-scale script,
   so every value below is in Figma SP px.
   ========================================================================== */

@media (max-width: 767px) {

  html[data-sp] { --design-w: 390px; --gutter: 30px; }
  /* How we do parallax scaled to the 390px canvas (PC values: 200 / 70 / 40) */
  html[data-sp] { --how-sheet-lag: 56px; --how-text-drift: 10px; --how-diagram-drift: 12px; }
  html[data-sp] .page br.pc { display: none; }
  html[data-sp] .page br.sp-only { display: inline; }

  /* ---------- header ---------- */
  html[data-sp] .site-nav,
  html[data-sp] .btn-contact { display: none; }
  html[data-sp] .site-header { height: 80px; }
  html[data-sp] .site-header__logo { left: 30px; top: 30px; width: 44px; height: 44px; }
  html[data-sp] .site-header__logo svg { width: 44px; height: 44px; }

  html[data-sp] .menu-btn {
    position: absolute;
    left: 286px; top: 27px;
    width: 75px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 0 1px;
    border: 0; background: none;
    font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
    color: var(--color-white);
    z-index: 2;
  }
  html[data-sp] .menu-btn__shape {
    position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-red);
    transition: opacity 0s linear 0.12s;   /* hard swap at peak squash — no ghosting */
  }
  html[data-sp] .menu-btn__shape--open { opacity: 0; }
  html[data-sp] .menu-btn[aria-expanded="true"] .menu-btn__shape--closed { opacity: 0; }
  html[data-sp] .menu-btn[aria-expanded="true"] .menu-btn__shape--open { opacity: 1; }
  /* jelly bounce on every toggle (class re-added by js/nav.js) */
  html[data-sp] .menu-btn.is-bouncing .menu-btn__shape { animation: menu-jelly 0.55s cubic-bezier(0.3, 0.7, 0.4, 1); }
  @keyframes menu-jelly {
    0%   { transform: scale(1, 1); }
    22%  { transform: scale(1.16, 0.8); }
    45%  { transform: scale(0.9, 1.12); }
    65%  { transform: scale(1.05, 0.95); }
    82%  { transform: scale(0.98, 1.02); }
    100% { transform: scale(1, 1); }
  }
  html[data-sp] .menu-btn span { transition: transform 0.4s var(--ease-out-expo); }
  html[data-sp] .menu-btn:active span { transform: scale(0.94); }
  html[data-sp] .menu-btn span { position: relative; }
  html[data-sp] .menu-btn:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; border-radius: 25px; }

  html[data-sp] .sp-menu:not([hidden]) {
    display: block;
    position: absolute;
    left: 160px; top: 100px;
    width: 200px;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--color-red);
    z-index: 3;
    animation: sp-menu-in 0.25s var(--ease-out-expo);
  }
  @keyframes sp-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  html[data-sp] .sp-menu li + li { border-top: 1px solid var(--color-red-deep); }
  html[data-sp] .sp-menu a {
    display: flex; align-items: center; justify-content: center;
    height: 55.5px;
    font-size: 15px; letter-spacing: 0.06em;
    color: var(--color-white);
  }
  html[data-sp] .sp-menu a:focus-visible { outline: 2px solid var(--color-white); outline-offset: -4px; }

  /* floating contact button (stays in the viewport corner) */
  html[data-sp] .fab-contact {
    display: flex; align-items: center; justify-content: center;
    position: fixed;
    right: 30px; bottom: 30px;
    width: 66px; height: 56px;
    z-index: 30;
    transition: opacity 0.4s ease, visibility 0s linear 0s;
  }
  /* fades out once the footer comes into view (js/nav.js) */
  html[data-sp] .fab-contact.is-away {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  }
  html[data-sp] .fab-contact__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
  html[data-sp] .fab-contact__icon { position: relative; color: var(--color-white); }
  html[data-sp] .fab-contact:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }

  /* ---------- KV ---------- */
  html[data-sp] .kv { height: 845px; }
  html[data-sp] .kv__flame { left: -57px; top: 53.4px; width: 504px; height: 597.6px; max-width: none; }
  html[data-sp] .kv__copy { top: 322px; font-size: 14px; line-height: 28px; letter-spacing: -0.04em; }
  html[data-sp] .kv__logotype { left: 26px; top: 586px; width: 380px; height: 239px; }
  html[data-sp] .kv__logotype-pc { display: none; }
  html[data-sp] .kv__logotype-sp { display: block; width: 100%; height: 100%; }

  /* ---------- Statement ---------- */
  html[data-sp] .statement { height: 873px; padding: 0; }
  html[data-sp] .statement__label { left: 31px; top: 51px; font-size: 14px; }
  html[data-sp] .statement__title { left: 31px; top: 88px; font-size: 32px; line-height: 42px; letter-spacing: -0.04em; }
  html[data-sp] .statement__body { left: 30px; top: 286px; width: 326px; font-size: 14px; line-height: 25px; letter-spacing: 0.05em; }
  html[data-sp] .statement__body br:not(.sp-keep) { display: none; }
  html[data-sp] .statement__body p + p { margin-top: 25px; }
  html[data-sp] .statement__body mark { padding: 3px 4px; }
  html[data-sp] .statement__body mark.is-after-punct { margin-left: -4px; }
  html[data-sp] .statement__body mark::before { display: none; }
  html[data-sp].js .statement__body mark {
    color: var(--color-red);
    background: linear-gradient(var(--color-red), var(--color-red)) 0 0 / 0% 100% no-repeat;
    -webkit-background-clip: border-box; background-clip: border-box;
    transition:
      background-size var(--marker-duration) var(--ease-marker) var(--marker-delay),
      color 0.2s ease calc(var(--marker-delay) + var(--marker-duration) * 0.5);
  }
  html[data-sp].js .statement__body.is-marked mark { background-size: 100% 100%; color: var(--color-light); }
  html[data-sp] .statement__link { margin-top: 33px; }

  /* ---------- How we do ---------- */
  html[data-sp] .how { height: 1334px; padding: 50px 31px 0; border-radius: 20px; }
  html[data-sp] .how .label { font-size: 14px; }
  html[data-sp] .how .h2 { margin-top: 17px; font-size: 28px; line-height: 36px; letter-spacing: -0.04em; }
  html[data-sp] .how .h2 br { display: block; }
  html[data-sp] .how .lead { margin-top: 14px; font-size: 14px; line-height: 22px; letter-spacing: 0.05em; }
  html[data-sp] .how .lead br { display: none; }

  html[data-sp] .how__compare { left: 0; top: 265px; width: 390px; height: 1000px; }
  html[data-sp] .how__old { left: 31px; top: 0; width: 328px; height: 330px; border-radius: 11px; }
  html[data-sp] .how__box-title { top: 27px; font-size: 20px; }
  html[data-sp] .how__chain { left: 29px; top: 87px; width: 147px; }
  html[data-sp] .how__pill { width: 147px; height: 38px; font-size: 14px; letter-spacing: -0.03em; border-radius: 4px; }
  html[data-sp] .how__pill--narrow { width: 79px; }
  html[data-sp] .how__vline { height: 50px; }
  html[data-sp] .how__vline svg { width: 11px; height: 30px; }
  html[data-sp] .how__issues { left: 203px; top: 96px; }
  html[data-sp] .how__issues li { gap: 7px; height: 16px; font-size: 14px; letter-spacing: 0.05em; }
  html[data-sp] .how__issues li:nth-child(2),
  html[data-sp] .how__issues li:nth-child(3) { margin-top: 72px; }
  html[data-sp] .x { width: 16px; height: 16px; }

  html[data-sp] .how__arrow { display: none; }
  html[data-sp] .how__arrow-sp { display: block; position: absolute; left: 152.5px; top: 360px; width: 25px; height: 32px; }

  html[data-sp] .how__new { left: 10px; top: 421px; width: 370px; height: 598px; border-radius: 12px; }
  html[data-sp] .how__layer--pc { display: none; }
  html[data-sp] .how__layer--sp { display: block; width: 370px; height: 598px; }
  html[data-sp] .how__new .how__box-title { top: 40px; }
  html[data-sp] .how__note { top: 78px; font-size: 12px; line-height: 17px; letter-spacing: 0.02em; }
  html[data-sp] .how__center { left: 36px; top: 347px; transform: none; --reveal-base: none; font-size: 16px; line-height: 20px; letter-spacing: 0.05em; }
  html[data-sp] .how__role strong { font-size: 16px; line-height: 26px; letter-spacing: 0.05em; }
  html[data-sp] .how__role span { margin-top: 2px; font-size: 12px; line-height: 17px; letter-spacing: 0.02em; }
  html[data-sp] .how__role--brand { left: 104px; top: 169px; }
  html[data-sp] .how__role--kol   { left: 276px; top: 222px; }
  html[data-sp] .how__role--make  { left: 268px; top: 373px; }
  html[data-sp] .how__role--biz   { left: 109px; top: 478px; }

  /* ---------- Company (pinned photo + glass band) ---------- */
  html[data-sp] .stage { margin-top: -17px; }
  html[data-sp] .stage__photo {
    --stage-photo-h: max(841px, calc(100vh / var(--page-scale)));
    margin-bottom: calc(841px - var(--stage-photo-h));
  }
  html[data-sp] .stage__photo img { left: -436px; top: 0; width: 1262px; height: max(841px, 100%); }
  html[data-sp] .company { height: 824px; }
  html[data-sp] .company__band { height: 844px; padding: 205px 30px 0; }
  html[data-sp] .company__title { font-size: 28px; line-height: 42px; letter-spacing: -0.04em; }
  html[data-sp] .company__title-en { letter-spacing: 0; }
  html[data-sp] .company__body { margin-top: 47px; font-size: 14px; line-height: 22px; letter-spacing: 0.05em; }
  html[data-sp] .company__body p + p { margin-top: 22px; }
  html[data-sp] .company__link { margin-top: 51px; }

  /* ---------- Study Cases ---------- */
  html[data-sp] .cases { height: 1416px; border-radius: 20px; }
  html[data-sp] .cases__marquee { left: -3px; top: 21px; font-size: 119.6px; letter-spacing: 1.5px; word-spacing: -9px; }
  html[data-sp] .cases__title { left: 21px; top: 170px; font-size: 28px; line-height: 36px; letter-spacing: -0.04em; }
  html[data-sp] .cases__list { left: 20px; top: 274px; flex-direction: column; gap: 30px; }
  html[data-sp] .case,
  html[data-sp] .case--2 { width: 350px; height: 532px; margin-top: 0; padding: 26px 25px 0 25px; border-radius: 16px; }
  html[data-sp] .case__head { font-size: 14px; }
  html[data-sp] .case__num { font-size: 14px; }
  html[data-sp] .case__title { margin-top: 24px; font-size: 24px; line-height: 31px; letter-spacing: -0.04em; margin-right: -6px; }
  html[data-sp] .case__meta { margin-top: 15px; font-size: 14px; line-height: 22px; letter-spacing: 0.05em; }
  html[data-sp] .case__meta-gap { display: block; width: auto; height: 0; }
  html[data-sp] .case__desc { margin-top: 22px; font-size: 14px; line-height: 22px; letter-spacing: 0.05em; }
  html[data-sp] .case__desc br { display: none; }
  html[data-sp] .case__cat { margin-top: 23px; }
  html[data-sp] .flow + .case__cat { margin-top: 21px; }
  /* one row that can be swiped sideways, clipped at the card's inner border */
  html[data-sp] .flow {
    flex-wrap: nowrap;
    gap: 12px;
    margin: 14px -20px 0 0;
    padding-right: 20px;
    font-size: 14px; letter-spacing: -0.03em;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  html[data-sp] .flow ~ .flow { margin-top: 16px; }
  html[data-sp] .flow::-webkit-scrollbar { display: none; }
  html[data-sp] .flow { cursor: grab; }
  html[data-sp] .flow.is-dragging { cursor: grabbing; user-select: none; }
  html[data-sp] .flow__step { flex: none; height: 38px; padding: 0 13px; border-radius: 4px; white-space: nowrap; }
  html[data-sp] .flow__arrow { flex: none; height: 38px; }
  html[data-sp] .flow__arrow svg { width: 14px; height: 11px; }

  /* ---------- Projects (stacked cards) ---------- */
  html[data-sp] .projects { margin-top: -20px; height: auto; padding: 69px 20px 70px; }
  html[data-sp] .projects__head { position: static; width: auto; margin-left: 1px; }
  html[data-sp] .projects__title { font-size: 28px; gap: 23px; letter-spacing: -0.04em; }
  html[data-sp] .projects__nav { display: none; }
  html[data-sp] .projects__track {
    position: static;
    width: 350px;
    margin-top: 32px;
    padding: 0;
    /* stacked cards: equal rows so every card is as tall as the tallest one */
    display: grid;
    grid-auto-rows: 1fr;
    gap: 30px;
    overflow: visible;
  }
  html[data-sp] .project { width: 350px; min-height: 478px; padding: 12px; border-radius: 16px; border-width: 0; }
  html[data-sp] .project__img { width: 326px; height: 201px; border-radius: 8px; }
  html[data-sp] .project:hover .project__img { transform: none; }
  html[data-sp] .project__name { gap: 11px; margin-top: 20px; font-size: 24px; letter-spacing: 0.9px; }
  html[data-sp] .project__ext { width: 17px; height: 17.4px; }
  html[data-sp] .project__desc { max-width: 322px; margin-top: 7px; font-size: 14px; line-height: 22px; letter-spacing: 0.05em; }
  html[data-sp] .project__scope {
    width: 326px; min-height: 0;
    display: block;
    padding-top: 12px;
    border-top: 1px solid var(--color-red);
  }
  html[data-sp] .project__scope-label { font-size: 14px; letter-spacing: -0.03em; }
  html[data-sp] .project__tags { width: 326px; margin: 13px 0 0; padding: 0; border: 0; }

  /* ---------- Footer ---------- */
  html[data-sp] .site-footer { margin-top: -20px; height: 649px; border-radius: 20px 20px 0 0; }
  html[data-sp] .footer-nav { left: 20px; top: 30px; width: 350px; padding-top: 5px; font-size: 14px; }
  html[data-sp] .footer-nav a { padding: 4px 9.5px; }
  html[data-sp] .footer-nav a:first-child { padding-left: 0; }
  html[data-sp] .site-footer__glow { left: -146px; top: 75px; }
  html[data-sp] .footer-cards { left: 20px; top: 94px; flex-direction: column; gap: 20px; }
  html[data-sp] .footer-card { --fc-w: 350; --fc-h: 221; width: 350px; height: 221px; padding: 31px 35px 0; text-align: center; }
  html[data-sp] .footer-card::before { border-radius: 16px; }
  html[data-sp] .footer-card__desc { margin-top: 16px; font-size: 14px; line-height: 22px; letter-spacing: 0.05em; margin-right: 0; }
  html[data-sp] .footer-card__link { --fc-link-x: 0px; --fc-link-y: 162px; right: 0; justify-content: center; }
  html[data-sp] .site-footer__logotype { left: 0; top: 596px; width: 390px; height: 53.5px; }
}