/* =============================================================================
   ICHIZEN — SP（スマホ）専用スタイル  /  assets/sp.css
   -----------------------------------------------------------------------------
   ★ このファイルの全ルールは @media (max-width:1024px / 768px) の中だけ。
      PC（>1024px）には物理的に一切影響しません。SPの微調整は原則ここに集約する。
   ★ 読み込み順は functions.php で最後（page-top.css の後）→ 既存ルールを確実に上書き。
   ★ 新規SP要素（.sp-nav 等）は既定 display:none。PCには絶対に出さない。
   ============================================================================= */

/* --- SP専用に追加した要素は既定で非表示（= PCでは存在しても見えない・場所も取らない） --- */
.sp-nav-toggle    { display: none; }
.sp-nav           { display: none; }
.nk-col__more--sp { display: none; }
.biz__title-sp    { display: none; }  /* SPだけ短い文言に差し替える用。PCでは非表示 */

/* =========================================================
   NEWS の「重なり」修正（タブレット幅から発生していたバグ）
   .news-item は PC で右カラム高さに合わせるため flex:1 1 0 + min-height:0。
   1カラムに段組みされると高さの基準が消えて各アイテムが潰れ重なる
   → 自然な高さ（flex:0 0 auto）に戻す。
   ========================================================= */
@media (max-width: 1024px) {
  .news-list { justify-content: flex-start; }
  .news-item { flex: 0 0 auto; min-height: 0; }
}

/* =========================================================
   ここから下は ≤768px（スマホ）専用
   ========================================================= */
@media (max-width: 768px) {

  /* ---------- SP全体の左右余白を詰めて表示幅を広げる（PC=>1024pxには無影響） ---------- */
  /* .phi/.biz/.nk/.recruit/.cta/.footer などSPの左右余白は var(--space-xl) 由来。
     SPだけ 40px → 16px に縮め、コンテンツ幅を広げる（BUSINESSの折返しも緩和）。 */
  :root { --space-xl: 16px; }

  /* ---------- ヘッダー：ハンバーガー化 ---------- */
  .site-header { padding: 0 16px; }
  .site-header__logo img { height: 30px; }
  /* PC用の nav / Contact / 資料DL ボタン一式をSPでは隠す（潰れ表示の解消） */
  .site-header__right { display: none; }

  .sp-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0; margin: 0;
    background: transparent; border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .sp-nav-toggle span {
    display: block;
    width: 24px; height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .sp-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .sp-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
  .sp-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* スライドダウン・メニュー本体 */
  .sp-nav {
    display: block;
    position: fixed;
    top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: var(--color-bg);
    z-index: 99;                       /* ヘッダー(z-index:100)の下に潜らせる */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .sp-nav.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .sp-nav__inner {
    display: flex; flex-direction: column;
    padding: 8px 22px 40px;
  }
  .sp-nav__group {
    display: flex; flex-direction: column;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border);
  }
  .sp-nav__heading {
    font-family: var(--font-en);
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-text-mute);
    margin-bottom: 6px;
  }
  .sp-nav__link {
    font-family: var(--font-jp);
    font-weight: 700; font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--color-text);
    padding: 9px 0;
    text-decoration: none;
  }
  .sp-nav__link--top { font-size: 16px; padding: 11px 0; }
  .sp-nav__actions {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 22px;
  }
  .sp-nav__contact, .sp-nav__dl {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 15px;
    border-radius: var(--radius-pill);
    font-size: 14px; letter-spacing: 0.04em;
    text-decoration: none; color: #fff;
  }
  .sp-nav__contact { background: var(--color-text);   font-family: var(--font-en); font-weight: 700; }
  .sp-nav__contact::after { content: "→"; }
  .sp-nav__dl      { background: var(--color-accent); font-family: var(--font-jp); font-weight: 800; }
  .sp-nav__dl::after { content: "↓"; font-family: var(--font-en); }

  body.sp-nav-lock { overflow: hidden; }   /* メニュー展開中は背面スクロールを止める */

  /* ---------- BUSINESS：見出し行を1行に（タイトル＋ページネーション操作を横並び） ---------- */
  /* SPは縦積み(1fr)だったのを 1fr auto に。ヘッダー内ラベル(Our Business·事業・サービス)は
     上の eyebrow(Business) と重複し、狭い枠で折り返してタイトルを潰すので SPでは隠す。
     タイトル(SPは短い文言)＋操作系(小型化)を同じ行に収める。 */
  .biz__header { grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
  .biz__label { display: none; }
  .biz__title-full { display: none; }
  .biz__title-sp   { display: inline; }
  .biz__title { font-size: clamp(20px, 5.6vw, 28px); }
  .biz__controls { gap: 8px; }
  .biz__counter { min-width: auto; font-size: 11px; gap: 4px; }
  .biz__counter b { font-size: 15px; }
  .biz__arrow { width: 32px; height: 32px; }
  .biz__arrow svg { width: 13px; height: 13px; }

  /* ---------- BUSINESS：4タブ(.biz-index)を 2×2 に・高さ圧縮 ---------- */
  .biz-index { grid-template-columns: 1fr 1fr; }
  /* カルーセル下のドット: SPで width:36px の横長バーになっていたのを PC同様の丸(11px)に戻す */
  .biz__dot { width: 11px; }
  .biz-index__item { padding: 11px 13px; gap: 2px; }
  .biz-index__num   { font-size: 9px; }
  .biz-index__name  { font-size: 14px; }
  .biz-index__ja    { font-size: 10.5px; }
  .biz-index__count { font-size: 9px; margin-top: 1px; }

  /* ---------- NEWS / KNOWLEDGE ---------- */
  /* 件数制限：news は最大5件・knowledge は最大3件（アイキャッチで縦に長いため） */
  .news-item:nth-child(n+6) { display: none; }
  .news-item:nth-child(5)   { border-bottom: none; }   /* 6件目を隠した時の余分な罫線対策 */
  .know-card:nth-child(n+4) { display: none; }

  /* View all は各リストの「最後」に置く（先頭のView allは隠す） */
  .nk-col__head .nk-col__more { display: none; }
  .nk-col__more--sp {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%;
    margin-top: 18px; padding: 13px 0 2px;
    border-top: 1px solid var(--color-border);
  }

  /* ---------- フッター：お問い合わせ / お役立ち資料 を薄くスタイリッシュに ---------- */
  .footer__pills { gap: 10px; }
  .footer-pill {
    flex: 0 0 auto;          /* column配置で flex-basis:220px が「高さ220px」になる太さの解消 */
    padding: 13px 18px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid var(--color-border);
  }
  .footer-pill__label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
  .footer-pill__arrow {
    width: 24px; height: 24px;
    background: transparent;
    color: var(--color-text);
  }
  .footer-pill__arrow svg { width: 15px; height: 15px; }
  .footer-pill:hover { transform: none; box-shadow: none; border-color: var(--color-text); }
  .footer-pill:hover .footer-pill__arrow { background: transparent; transform: translateX(2px); }
}