/* ============================================================
   MOBILE TUNE LAYER  —  KIBAN
   既存デザインの上に載せる「スマホ用の調律」レイヤー。
   既存CSSは一切削除せず、モバイル幅のみ上書きします。
   ============================================================ */

/* ---------- タブレット〜大きめスマホ (≤820px) ---------- */
@media (max-width:820px){
  /* 内側パディングがデスクトップ値のまま残っているパネル群を圧縮 */
  .prob-panel{padding:26px 22px 24px}
  .svc-panel{padding:34px 22px}
  .plan{padding:24px 20px}
}

/* ---------- スマホ (≤600px) ---------- */
@media (max-width:600px){

  /* --- 1. 見出しのスケール ---------------------------------
     .sec-title は clamp(20px,2.5vw,30px) で、390px幅だと
     下限の 20px に張り付き、本文とほぼ同じ大きさになっていた。
     セクション見出しとして立つサイズに引き上げる。            */
  .sec-title{
    font-size:25px;
    line-height:1.5;
    letter-spacing:.005em;
  }
  .sec-lead{
    font-size:15px;
    line-height:1.95;
    margin-top:14px;
  }
  .kibans-h{font-size:26px;line-height:1.45}

  /* ラベル類（Montserrat）はサイズは保ったまま、
     字間だけ詰めて折り返しを防ぐ */
  .eyebrow{letter-spacing:.16em}
  .eyebrow-num{letter-spacing:.14em}
  .ph-label,.kibans-eyebrow,.svc-eyebrow{letter-spacing:.14em}

  /* --- 2. 日本語の最小可読サイズ ---------------------------
     11.5〜12.5px の和文が本文用途で多数あった。
     ラテン文字のラベルはそのまま、和文だけ 13px に底上げ。   */
  .capbar-areas .ca-s,
  .os-list small,
  .hot-feat small,
  .stat .l small,
  .ccomp-note,
  .plan-target,
  .spec .field,
  .member .nm small,
  .leader .nm small,
  .founder-cap .nm span,
  .coo-c-nm span,
  .duo-band figcaption{
    font-size:13px;
    line-height:1.7;
  }
  .ca-p{font-size:13.5px}
  .ft-col p{font-size:13.5px}

  /* --- 3. 縦のリズム ---------------------------------------
     .sec の上下パディングがモバイルでも 80px（PC は 88px）で、
     ほぼ縮んでいなかった。詰めて、その分をカード間に回す。    */
  .sec{padding:58px 0}
  .sec-navy{padding:62px 0}

  /* カード同士が gap:6px でくっついて「崩れたリスト」に
     見えていた箇所を、意図のある間隔に。                     */
  .str-grid,.dock,.plans,.team,.specs,
  .vstep,.name-cols,.checks{gap:14px}
  .svc-wrap{gap:16px}
  .why-grid{gap:10px;margin-top:36px}
  .prob-tags{gap:8px}

  /* --- 4. カード内側の余白 --------------------------------- */
  .dock-step{padding:24px 20px}
  .run-row{padding:20px 18px;gap:14px}
  .why-cell{padding:20px 16px}
  .prob-panel{padding:24px 20px 22px}
  .svc-panel{padding:32px 20px}

  /* --- 5. タップ領域（44px 以上を確保） -------------------- */
  .ft-col a{padding:11px 0}
  .ft-legal{gap:2px 24px}
  .ft-legal a{display:inline-flex;align-items:center;min-height:44px}
  .btn{padding:14px 22px}

  /* --- 6. 折り返しの品質 -----------------------------------
     和文は文節で折り返し、見出しは行のバランスを取る。       */
  .sec-title,.hero-h1{text-wrap:balance}
  .sec-lead,.prob-note,.ccomp-note,p{word-break:auto-phrase}
}

/* ---------- 小型スマホ (≤380px) ---------- */
@media (max-width:380px){
  .sec-title{font-size:23px}
  .sec{padding:50px 0}
  .wrap,.hd-in,.hero-in{padding:0 16px}
}


/* ============================================================
   [2] 記事系テンプレート  .art-body
   対象19ページ: column/記事11 + news/記事6 + privacy + 404
   ※ column系は h2 が 21px、news/privacy/404 系は 19px と
     バラついていたので、モバイルでは 22px に統一する。
   ============================================================ */
@media (max-width:600px){

  /* --- 見出し --- */
  .art-body h2{
    font-size:22px;
    line-height:1.55;
    margin-top:44px;
  }
  .art-body h3{
    font-size:17.5px;
    line-height:1.6;
    margin-top:32px;
  }
  .art-h1{line-height:1.5}
  .art-cta-h{font-size:20px;line-height:1.55}

  /* --- 本文の可読性 ---
     和文長文なので行長より行間を優先。1行あたり約22字。 */
  .art-body p{font-size:16px;line-height:1.95;margin-top:16px}
  .art-body ul li{font-size:15.5px;line-height:1.9}
  .art-body ul{gap:10px}
  .art-lead{font-size:16px;line-height:1.95;margin-top:24px;padding-top:24px}
  .art-note{padding:16px 18px;font-size:14px;line-height:1.85}
  .art-cta-p{font-size:15px}

  /* --- メタ情報（和文ラベルの底上げ） --- */
  .art-cat{font-size:12.5px}
  .art-date{font-size:12.5px}
  .art-meta{gap:10px}

  /* --- CTA枠の内側余白（PC値40pxが残っていた） --- */
  .art-cta{margin-top:48px}
  .art-cta-top{padding:28px 20px 26px}
  .art-cta-lp{width:100%;justify-content:center;padding-block:14px}
}

@media (max-width:380px){
  .art-body h2{font-size:20.5px}
  .art-body p{font-size:15.5px}
}


/* ============================================================
   [3] kansa/ ・ ma/   （.sec-t / .sec 系・2ページ共通）
   ============================================================ */
@media (max-width:600px){
  /* clamp() の下限に張り付いていた見出しを引き上げ */
  .sec-t{font-size:26px;line-height:1.5;letter-spacing:.03em}
  /* padding:clamp(68px,9vw,100px) → 390px幅では 68px のまま */
  .sec{padding:56px 0}
  .sec-k,.eyebrow{letter-spacing:.2em}
}
@media (max-width:380px){
  .sec-t{font-size:24px}
  .sec{padding:48px 0}
}


/* ============================================================
   [4] kibans.html （.kb-sec-title）／ column/index.html （.cc-title）
   ============================================================ */
@media (max-width:600px){
  .kb-sec-title{font-size:24px;line-height:1.5}
  .kb-lead{font-size:15.5px;line-height:1.95}

  /* 記事一覧のカード見出しと内側余白 */
  .cc-title{font-size:20px;line-height:1.6}
  .col-card{padding:22px 20px 20px}
}
@media (max-width:380px){
  .kb-sec-title{font-size:22px}
  .cc-title{font-size:19px}
}