/* ============================================================
   mobile.css — 全LP共通：スマホ縦長プレゼンテーション
   ・PC幅(>=481px)では中央に約412pxの「スマホ枠」で表示
   ・多カラムレイアウトは1カラム（小タイルは2カラム）に
   ・vw基準の大見出しはスマホ幅に合わせて上限を設定
   読み込み：各LPの <link rel="stylesheet" href="assets/fonts.css"> の直後に追加
   ============================================================ */

/* ---- 多カラム → 1カラム（全画面共通＝スマホの意図に合わせる） ---- */
.grid3,.coll,.bento,.split,.philo,.philo-grid,.ma,.concept__grid,.mask-grid,.info,
.wid-grid,.plans,.price-grid,.prices,.product__feature,.work,.iv,.points,.demo-grid,
.tilt-grid,.merits,.reasons,.triad,.vals,.role-grid,.roles,.why-grid,.val-grid,
.com-grid,.ben-grid,.quests,.pos-grid,.job-grid,.work-grid,.vc-grid,.iv-grid,
.grid,.feat .grid,.hero__grid,.hero-grid{grid-template-columns:1fr !important}

/* ---- 小さなタイルは2カラム維持（数字・ギャラリー・ステップ等） ---- */
.num-grid,.gal-grid,.feed,.specs__grid,.flow-grid,.flow,.steps,.proc-grid,.path,
.stats .row,.band .grid4,.env-grid,.shop__grid{grid-template-columns:repeat(2,1fr) !important}

/* ベントの span 解除・折り返し安全 */
.b.span2,.b.span3,.b.span4{grid-column:auto !important}
h1,h2,h3,.h2{overflow-wrap:anywhere}

/* ---- PC幅のときだけ「スマホ枠」で中央表示 ---- */
@media (min-width:481px){
  html{background:#e6e6ee}
  body{width:412px;max-width:100%;margin:0 auto;min-height:100vh;overflow-x:hidden;position:relative;
       box-shadow:0 0 0 1px rgba(0,0,0,.05),0 24px 80px -12px rgba(0,0,0,.28)}
  /* position:fixed のヘッダー/進捗バー/フローティングボタンを枠内に収める */
  header{left:50% !important;right:auto !important;width:412px !important;transform:translateX(-50%) !important}
  .progress{left:50% !important;width:412px !important;transform:translateX(-50%) !important}
  .totop,.pagetop{right:calc(50% - 206px + 16px) !important}
  /* スマホ実機と同じく、ヘッダーのテキストナビは枠内では隠す */
  .nav-links,.navlinks{display:none !important}

  /* vw基準の大見出しがPC幅で巨大化しないよう上限を設定 */
  body .hero h1{font-size:46px !important;line-height:1.24 !important}
  body .cta .en{font-size:50px !important}
  body .num .v{font-size:38px !important}
  body .h2,body .sec-ttl h2,body .label h2,body .cta h2{font-size:30px !important;line-height:1.32 !important}
  body .hero .sub,body .hero .lede{font-size:16px !important}
}