/* =============================================================
   common_sp.css — 共通レイヤの sp 差分
   media: screen and (max-width: 640px)
   -------------------------------------------------------------
   出典: 上流 components.css の幅 @media（生成物）。
   バンドは排他なので、複数バンドに掛かる規則は各ファイルへ複製されている。
   このファイル自身に @media を書かない。読み分けは wp_enqueue_style の media 属性。
   ============================================================= */

/* 出典: 上流 @media (max-width: 833px) */
.global-nav.nav-collapsible .nav-burger { display: flex; }
/* JS が無ければ畳まない。リンク列はそのまま帯の中に並び、入らなければ折り返す
   （帯が高くなるのは許容する。移動できない方が重い）。 */
.global-nav:not(.nav-collapsible) .nav-links {
  display: flex; align-items: center; flex: 1;
  flex-wrap: wrap; gap: var(--space-sm);
}
.global-nav:not(.nav-collapsible) { height: auto; min-height: var(--tap-target-min); }
/* トレイは帯の続き。地も文字色もバーと同じ（DESIGN-apple.md {component.global-nav}
   2026-09-11 の修正）。--color-surface-black を敷いていたが、リンク色は帯と共通の
   --color-nav-link（黒 80%）のままなので黒地に黒字になり、開いても何も見えなかった。 */
.global-nav.nav-collapsible .nav-links {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 0;
  background: var(--color-nav-tray);
  backdrop-filter: var(--backdrop-frosted);
  -webkit-backdrop-filter: var(--backdrop-frosted);
  border-bottom: var(--border-hairline);
  padding: 0 var(--space-lg) var(--space-sm);
}
.global-nav.is-dark.nav-collapsible .nav-links { background: var(--color-nav-tray-dark); }
.global-nav.nav-collapsible.is-open .nav-links { display: flex; }
/* 全幅のトレイに 44px 行で並ぶので、帯の中の 14px ではなく本文と同じ 17px にする
   （DESIGN-apple.md {component.global-nav} の 2026-09-10 注記）*/
.global-nav .nav-links a {
  display: flex; align-items: center; min-height: var(--tap-target-min);
  font: var(--type-body); letter-spacing: var(--tracking-body);
}
.global-nav .nav-links .spacer { margin-left: 0; }
.global-nav .nav-logo { display: flex; align-items: center; min-height: var(--tap-target-min); }
/* 狭い画面では見出しが 2〜3 行に折り返してコピー全体が高くなる。
   ヒーローのサブヘッドの上を広げると最終線が写真の賑やかなところへ落ちるので既定へ戻す。 */
.tile-photo.is-hero .tile-subhead { margin-top: var(--space-xs); }
/* タッチ帯なので DESIGN-apple の最小タップ領域 44px を満たす */
.footer li a,
.footer .footer-col-head a,
.text-link, .text-link-on-dark,
.sub-nav-frosted .links a {
  display: inline-flex; align-items: center;
  min-width: var(--tap-target-min); min-height: var(--tap-target-min);
}
.sub-nav-frosted .links a { justify-content: center; }
/* 列見出しのリンクだけは文字を上に固定する（2026-09-11）。
   上の規則の align-items:center は 44px の箱の**縦中央**に文字を置くので、
   リンクを持つ列（よくある質問・ご相談）の見出しだけが、素のテキスト見出し
   （サービス・MyPC について）より 13px 下がって並びが崩れる。
   タップ領域 44px は箱が下へ伸びることで確保され、見た目の行は揃う。 */
.footer .footer-col-head a { align-items: flex-start; }
/* CTA も 44px のタップ領域を持つ。ただし min-height は内容ボックスに効くので、
   上下 padding 7px をそのまま残すと 58px になり 52px の帯から上下 3px ずつはみ出す。
   上下 padding を捨てて 44px を「外形」として満たす（44 < 52 なので帯に収まる）。 */
.sub-nav-frosted .sub-nav-cta {
  min-height: var(--tap-target-min); padding-block: 0;
}
.environment-quote-card { padding: var(--space-xxl) var(--space-lg); }
/* FAQ: レールを畳んでラベルを行の上へ。答えの字下げは残す（Q/A の切れ目のため）*/
.faq-group { grid-template-columns: 1fr; }
.faq-label { padding-top: 0; margin-bottom: var(--space-xs); }

/* 出典: 上流 @media (max-width: 640px) */
h1 { font: var(--type-hero-display-sp); letter-spacing: var(--tracking-hero); }
.brand-logo-hero { height: var(--size-logo-hero-sp); margin-top: var(--space-md); }
.environment-quote-card :is(h1, h2) { font: var(--type-hero-display-sp); }
/* 1 列に積む。既定の align-items: stretch のまま各列を全幅にして左揃えを保つ
   —— ロゴが器の左端（＝「サービス」の真上）にあるので、中央寄せにすると縦の軸が 2 本になる。 */
.footer .cols { flex-direction: column; gap: var(--space-lg); }
/* カテゴリ移動は sp でも残す。畳まずに横へ流す（DESIGN-apple.md {component.sub-nav-frosted}
   2026-09-11 の改訂）。sp のサービスページは 11,000px を超えるので、ここが消えると
   スマートフォンだけが端から端までスクロールすることになる。 */
.sub-nav-frosted .category { display: none; }
.sub-nav-frosted .links {
  margin-left: 0; min-width: 0;
  overflow-x: auto; flex-wrap: nowrap;
  scroll-snap-type: x proximity;
  scrollbar-width: none;               /* バーは出さない。帯が 52px しかない */
  -webkit-overflow-scrolling: touch;
}
.sub-nav-frosted .links::-webkit-scrollbar { display: none; }
.sub-nav-frosted .links a { flex-shrink: 0; scroll-snap-align: start; }
.tile-pair { grid-template-columns: 1fr; }
.tile-grid { --tile-cols: 1; }
.media-card { flex-basis: 100%; }
.tile-photo { min-height: var(--size-tile-full-sp); }
.tile-photo.is-short { min-height: calc(var(--size-tile-full-sp) / 2); }
.tile-pair > .tile-photo { min-height: var(--size-tile-half-sp); }
.tile-grid > .tile-photo { min-height: var(--size-tile-half-sp); }
.tile-photo h2 { font: var(--type-tile-headline-sp); letter-spacing: var(--tracking-tile-headline-sp); }