@charset "UTF-8";
/* ============================================================
   LIM v2 — mobile.css
   役割：レスポンシブ（ブレイクポイント別）
   ブレイクポイント：1100 / 900 / 800 / 700
   ============================================================ */

/* ============================================================
   1. ≥ 700px：2 カラム展開
   ============================================================ */
@media (min-width: 700px) {

  /* WORKS counter */
  .works__counter {
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
  }

  /* WORKS grid 2 カラム */
  .works__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
}

/* ============================================================
   2. ≥ 800px：APPROACH 3 段 / Footer 4 カラム
   ============================================================ */
@media (min-width: 800px) {

  /* APPROACH 3 列 */
  .approach__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  /* FOOTER 4 カラム */
  .site-footer__top {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
  }

  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ============================================================
   3. ≥ 900px：SECTION head 2 カラム / CONCEPT 2 カラム / SERVICES 4 カラム
   ============================================================ */
@media (min-width: 900px) {

  /* セクション head */
  .section__head {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
  }

  /* CONCEPT 2 カラム */
  .concept__body {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }

  /* SERVICES 4 カラム grid */
  .services__item {
    grid-template-columns: 80px 1fr 1fr 60px;
    gap: 40px;
    align-items: center;
    padding: 52px 0;
  }
}

/* ============================================================
   4. ≥ 1100px：WORKS 非対称 12 グリッド
   ============================================================ */
@media (min-width: 1100px) {

  .works__grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 56px 32px;
  }

  .works__item:nth-child(1) {
    grid-column: 1 / span 7;
  }

  .works__item:nth-child(2) {
    grid-column: 8 / span 5;
    margin-top: 80px;
  }

  .works__item:nth-child(3) {
    grid-column: 2 / span 5;
  }

  .works__item:nth-child(4) {
    grid-column: 7 / span 6;
    margin-top: 60px;
  }
}

/* ============================================================
   5. ≤ 900px：HERO sidelabel 非表示
   ============================================================ */
@media (max-width: 900px) {
  .hero__sidelabel { display: none; }

  .hero__bottom {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

/* ============================================================
   6. ≤ 800px：HEADER nav 折りたたみ
   ============================================================ */
@media (max-width: 800px) {
  .site-header__nav { display: none; }
  .site-header__menu-btn { display: inline-block; }
}

/* ============================================================
   7. KINO セクション ショーケース レスポンシブ
   ============================================================ */
@media (min-width: 900px) {
  .kino__case {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .kino__case--reverse {
    grid-template-columns: 1fr 1fr;
  }
  .kino__case--reverse .kino__phone { order: 2; }
  .kino__case--reverse .kino__case-text { order: 1; }
}

@media (min-width: 1100px) {
  .kino__showcase {
    gap: 140px;
  }
  .kino__case {
    gap: 120px;
  }
  .kino__phone-frame {
    width: 300px;
  }
}

/* ============================================================
   8. ≤ 768px：タブレット縦〜スマホ 共通調整（2026-05-31 総点検）
   ============================================================ */
@media (max-width: 768px) {

  /* HERO：上下パディングと内側パディングを圧縮 */
  .hero { padding: 88px var(--pad-x) 32px; min-height: 100svh; }
  .hero__main { padding: 48px 0 40px; }
  .hero__sub { margin-top: 28px; }

  /* HERO 下部：counter / location×2 / cta を 2 カラム、CTA は全幅左寄せ */
  .hero__bottom {
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
  }
  .hero__cta-zone {
    grid-column: 1 / -1;
    align-items: flex-start;
    margin-top: 6px;
  }

  /* KINO ティザー：余白圧縮 */
  .kino__teaser { padding: 32px 0; gap: 36px; }
  .kino__teaser-launch { padding: 28px 0; }

  /* SERVICES：行内パディング（ホバー反転）はタッチで効かないので常時少し開ける */
  .services__item:hover { padding-left: 0; padding-right: 0; background: transparent; color: inherit; }
  .services__item:hover .services__item-desc { color: #555; }
  .services__item:hover .services__item-h3 .jp { color: var(--color-sub); }

  /* CONTACT：左右パディング確保 */
  .contact { padding-left: var(--pad-x); padding-right: var(--pad-x); }
}

/* ============================================================
   9. ≤ 600px：スマホ標準
   ============================================================ */
@media (max-width: 600px) {

  :root { --pad-x: 6vw; }

  /* HERO 下部：1 カラム縦積み（窮屈さ解消） */
  .hero__bottom {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero__counter { line-height: 1.8; }

  /* SERVICES：番号・矢印を畳んで 1 カラム */
  .services__item { gap: 10px; padding: 32px 0; }
  .services__item-arrow { display: none; }

  /* APPROACH：番号サイズ縮小 */
  .approach__step-num { font-size: 44px; }

  /* FOOTER：ブランド大判を抑える */
  .site-footer { padding: 60px var(--pad-x) 32px; }
  .site-footer__legal { gap: 14px 18px; }
  .site-footer__bottom { gap: 18px; }

  /* KINO タイトル余白 */
  .kino__title-main { line-height: 0.9; }

  /* KINO ティザー見出し：はみ出し防止（font 抑制 + 折返し許可）*/
  .kino__teaser-headline { font-size: clamp(28px, 8vw, 40px); line-height: 1.35; }
  /* 万一の横溢れ保険：セクションで横スクロールを殺す */
  .kino { overflow-x: hidden; }

  /* Page Hero（下層）padding 圧縮 */
  .page-hero { padding: 130px var(--pad-x) 72px; min-height: 46vh; }

  /* Legal テーブルを縦積み（横溢れ防止）*/
  .legal table, .legal tbody, .legal tr, .legal th, .legal td {
    display: block;
    width: 100%;
  }
  .legal th {
    border-bottom: none;
    padding-bottom: 4px;
  }
  .legal td {
    padding-top: 4px;
    padding-bottom: 20px;
  }
}

/* ============================================================
   10. ≤ 400px：小型スマホ（iPhone SE 等）
   ============================================================ */
@media (max-width: 400px) {
  .hero__h1--jp { font-size: 44px; line-height: 1.2; }
  .hero__kicker { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 24px; }
  .hero__sub { font-size: 14px; }
  .kino__title-main { font-size: 72px; }
  .kino__launch-year { font-size: 84px; }
  .kino__teaser-headline { font-size: 26px; }
  .works__coming-label { font-size: 38px; }
}

/* ============================================================
   11. タッチデバイス：カーソル・パララックス無効、hover 依存を抑制
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
  body, a, button, .works__item, .services__item { cursor: auto !important; }

  /* works サムネのホバー演出はタッチで起きないので初期状態をカラーに寄せる */
  .works__item-img img { filter: grayscale(60%) contrast(1.05); }
}