@charset "UTF-8";
/* =========================================================
   スマホ専用の上書き（style.css / sub.css の後に読み込む）
   ここに書くものは必ず @media (max-width: 767px) の中に入れる。
   768px 以上では 1 行も評価されないので、PC 表示は変わらない。
   ========================================================= */

@media (max-width: 767px) {

/* ===== ヘッダー：iPhone SE 幅でもナビが折れないように ===== */
.pageheader { padding: 0 1.2rem; }
.pageheader__nav { gap: 1.1rem; }

/* ===== KV：キャッチ ===== */
/* ヘッダー(70px)より内側に落とす。style.css の -20px だと文字が潜る */
.kv-main__catch {
  padding: calc(var(--header-h) + 1.4rem) 4vw 2vh;
  /* キャッチ枠の下端。縦が短い端末では 180vw が画面高さを超え、下端の
     SKIP / SCROLL / RUNバッジに文字が重なるため、画面高さでも上限をかけて
     下に余白（操作エリア）を必ず残す。 */
  max-height: min(180vw, 82vh);
}
/* 文字サイズは「画面の幅」と「画面の高さ」の両方に連動させる。
   幅(vw)だけで決めると、iPhone SEのような“縦が短い端末”で文字が大きすぎて
   SCROLL・SKIPに重なるため、min(vw, vh) で低い方を採用する。
   位置ズラしは cm/mm ではなく em を使い、文字サイズと必ず一緒に伸縮させる。 */
.kv-main__catch .catch-1,
.kv-main__catch .catch-2 { font-size: clamp(3.4rem, min(16.5vw, 7.7vh), 8.4rem); }
/* 「伝わるは、」：右マージンを外して大きくしても1行を保ち、少し下げる。
   skewX(-8deg)（前傾の疾走感）は style.css の指定を必ず引き継ぐこと。 */
.kv-main__catch .catch-1 {
  margin-right: 0;
  white-space: nowrap;
  transform: translateY(0.59em) skewX(-8deg);
}
/* 「走った先にある。」：同じ大きさで2行表示（改行は HTML の .sp-br）。少し上へ。 */
.kv-main__catch .catch-2 {
  white-space: normal;
  line-height: 1.02;
  transform: translateY(-0.51em) skewX(-8deg);
}
.kv-main__catch .catch-en { font-size: 1.25rem; letter-spacing: 0.08em; }
/* スマホだけ「走った先に／ある。」で改行（PCは1行のまま） */
.sp-br { display: inline; }

/* ===== KV：走る人々 ===== */
/* スマホでは「集団全員を画面内に収める」ことを優先。
   画面幅ぴったりに縮小し中央寄せ（代表は右端だが全員フィットするので切れない）。 */
/* 幅は画面幅に追従（固定pxで頭打ちにすると、広い端末で文字だけ大きくなり崩れる）。 */
.kv-main__people {
  width: min(100%, 500px);
  translate: -50% -64%;
}

/* KV先頭のオレンジ線(pos-kv1)は、走る集団の上に重なる位置へ。
   cm固定だと画面が変わると人物とズレるため、人物と同じ「％」で指定する。 */
.pos-kv1 { top: 17.4%; }

/* ===== KV：リード文（最重要）=====
   PC は width:max-content で画面外から流れてくる演出だが、
   SP では 1 行 600px 超になり読めないので「折り返す帯」に変える。
   [data-sec] は width:200%（＝2画面ぶん）なので、
   位置は % ではなく vw で指定する。
     lead-1 → その節の 1 画面目
     lead-2 → その節の 2 画面目                                  */
.kv-main [data-sec] .kv-main__lead {
  left: 6vw;
  right: auto;
  width: 88vw;
  max-width: 88vw;
  bottom: 12%;
  /* 一番長い「いまはWEBもマーケも並走していると知ったら、」が
     1 行に収まる寸法。これ以上大きいと 2 行に割れて白帯が崩れる */
  font-size: clamp(12.5px, 3.75vw, 15px);
  overflow-wrap: anywhere;
}
.kv-main [data-sec] .lead-2 { left: 106vw; }
/* PC 用の改行と字下げスペーサーは解除。
   代わりに .line-N をブロックにして「1 行 = 1 本の白帯」を保つ。
   （インラインのままだと行末に 1 文字だけの白チップが浮いてしまう） */
.kv-main__lead br,
.kv-main__lead > i { display: none; }
.kv-main__lead > span { display: block; width: fit-content; }

/* ===== 各セクション共通の余白 ===== */
.container-sec--bg { padding: 7rem 2rem; }
#member .heading-wrap,
#works .heading-wrap { padding: 0 2rem; }
.heading-wrap { margin-bottom: 3.6rem; }
.heading-enjp .jp { font-size: 1.4rem; }

/* ===== 本文の文字組み =====
   PC 用の <br> が残ったまま中央揃えなので、1〜2文字だけの行が出ていた。
   SP では改行を解除して左揃えにする（見出しは中央のまま）。          */
.para-lead,
.page-top__intro__lead p { text-align: left; }
.para-lead br { display: none; }
.para-lead { font-size: 1.4rem; }
.para-lead small { display: block; margin-top: 0.8rem; font-size: 1.2rem; color: var(--c-gray-3); }
/* 長い nobr は画面幅を超えるので SP では折り返させる */
.nobr { white-space: normal; }

/* ===== INTRO ===== */
/* 「…AIで、」の「で、」だけが 2 行目に落ちていた。
   実測で 5.6vw なら「映像・Web・デザイン・AIで、」が 1 行に収まる
   （390px 幅で本文 326px / 使える幅 350px）。 */
.page-top__intro__catch { font-size: clamp(2.0rem, 5.6vw, 5.2rem); margin-bottom: 3.2rem; }
.page-top__intro__lead p { font-size: 1.5rem; margin-bottom: 2em; }

/* ===== VIDEO WORKS ===== */
/* 10本を縦に積むと長すぎるので、スマホでは横スワイプの並びにする */
.video-stats { gap: 1rem 2.4rem; padding: 2rem 1rem; margin-bottom: 3.6rem; }
.video-subhead { font-size: 1.8rem; margin-bottom: 1.8rem; }
.video-grid {
  display: flex; gap: 1.4rem; margin-bottom: 4rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 0.6rem;
  /* 画面端まで流したいので、セクションの左右パディングぶんだけ外へ広げる */
  margin-left: -2rem; margin-right: -2rem;
  padding-left: 2rem; padding-right: 2rem;
}
.video-grid::-webkit-scrollbar { display: none; }
.video-grid .video-card { flex: 0 0 78vw; scroll-snap-align: start; }
/* 縦型（ショート・Instagram）は2枚並ぶので少し小さく */
.video-grid--short .video-card,
.video-grid--insta .video-card { flex-basis: 56vw; }
.video-card__play { width: 4.6rem; height: 4.6rem; }
.video-card__title { font-size: 1.4rem; }

/* ===== WORKS ===== */
/* スワイプで動くので、カードに被る前後ボタンは出さない */
.works-nav { display: none; }
.work-card { width: 82vw; }
.work-card__title { font-size: 1.8rem; }
.work-card__desc { font-size: 1.3rem; }

/* ===== MESSAGE ===== */
/* 1 カラム化で写真が本文 3 つの後ろに落ちて見えなくなっていた。
   order:-1 で上に出し、sticky で貼り付けて PC の「写真が切り替わる」演出を残す */
.page-message__main { display: flex; flex-direction: column; gap: 0; }
.page-message__main__ph--sticky {
  order: -1;
  position: sticky;
  top: calc(var(--header-h) + 0.8rem);
  /* style.css の align-self:start / height:fit-content のままだと、
     中身が全て position:absolute なので幅・高さが 0 に潰れて写真が消える */
  align-self: stretch;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 30vh;
  margin-bottom: 2.4rem;
}
.page-message__main__ph--sticky .ph { height: 100%; }
.page-message__main__sec { padding: 5vh 0; }
.page-message__main__sec h3 { font-size: 2rem; margin-bottom: 1.4rem; }

/* ===== SERVICE ===== */
/* 背景の "RUN & CREATE" が見出しに重なっていたので、見出しの上へ逃がす */
.page-top__future__bg { top: 0.5rem; }
.page-top__future__bg span { font-size: clamp(4.4rem, 13vw, 8rem); }
.carousel-heading { flex-direction: column; align-items: flex-start; gap: 1.2rem; margin-bottom: 1.6rem; }
.carousel-heading .heading-wrap { margin-bottom: 0; }
.carousel-control { align-self: flex-end; }
.carousel-control .swiper-button-prev,
.carousel-control .swiper-button-next { width: 3.8rem; height: 3.8rem; }

/* ===== TECHNOLOGY ===== */
/* 4 枚の縦積みが長すぎたので、アイコン左・テキスト右の横型に */
.page-tech__grid { gap: 1.2rem; }
.tech-card {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 1.6rem; align-items: center;
  padding: 2rem 1.8rem;
}
.tech-card__icon { grid-row: span 2; width: 4.8rem; height: 4.8rem; margin-bottom: 0; }
.tech-card__icon svg { width: 2.4rem; height: 2.4rem; }
.tech-card__title { font-size: 1.7rem; margin-bottom: 0.2rem; align-self: end; }
.tech-card__text { font-size: 1.35rem; align-self: start; }
.page-tech__closing { font-size: 1.9rem; margin-top: 3.2rem; }

/* ===== HISTORY ===== */
/* マシン幅 399px > 画面 390px でレバーが切れて押せなかったので詰める */
.page-history__slot__machine {
  gap: 1rem; padding: 1.6rem 1.4rem;
  max-width: calc(100vw - 3.2rem);
}
.machine-window { gap: 0.6rem; padding: 0.8rem; border-width: 3px; }
.machine-reel { width: clamp(38px, 11vw, 56px); height: clamp(56px, 16vw, 82px); }
.reel-cell { font-size: clamp(2.8rem, 9vw, 4.6rem); }
/* 指で押す前提なので、レバーは 42px 確保（合計幅 292px < 画面 390px） */
.machine-lever svg { width: 42px; }

/* ===== footer ===== */
.pagefooter { padding: 4.4rem 2rem 3.2rem; }
.footer-logo { height: 7rem; }

/* ===== 下層ページ（PRICE / FLOW）の文字組み ===== */
.sub-hero .heading-enjp .en { font-size: clamp(3.6rem, 11vw, 8rem); }
.phase__title { font-size: 2.1rem; }
.step__title { font-size: 1.7rem; }
.price-h2 { font-size: 1.9rem; margin: 4.4rem 0 2rem; }
.sub-cta { padding: 5.6rem 0; }
.sub-cta__btns { flex-direction: column; align-items: stretch; gap: 1.2rem; }

}

/* iPhone SE など極小幅の保険 */
@media (max-width: 359px) {
  .pageheader__nav { gap: 0.7rem; }
  .pageheader__nav a { font-size: 0.95rem; }
  .logo-mark { height: 3.6rem; }
}