/* ═══════════════════════════════════════════════════════════════════════
   STUDIO S.O ── 共通タイポグラフィ／操作性スケール

   各ページはTailwind CDN＋インラインのclass指定で作られており、以前は
   文字サイズを変えるたびに13ファイルを触る必要があった。今後の変更を
   1ファイルで完結させるため、サイズ・タップ領域に関する指定をここへ集約する。

   ■ 読み込み位置
     各ページの </head> 直前（ページ固有の <style> より後ろ）に置くこと。
     後ろに置くことで、同じ詳細度ならこのファイルが勝つ。

   ■ !important を使っている箇所について
     Tailwindの任意値ユーティリティ（text-[10px] など）はクラス詳細度(0,1,0)を
     持つため、figcaption のような要素セレクタ(0,0,1)では上書きできない。
     HTML側にクラスを足せば回避できるが、それでは「1ファイルで完結」という
     目的が崩れるため、該当箇所だけ !important で上書きしている。
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   ① ナビゲーション（全ページ共通）
   PC 12px→14px・タップ高16px→41px、スマホのハンバーガー→48×48px。
   セレクタは div[class*="md:flex"] で「スマホでは隠れる横並びリンク列」を
   指している。index/gallery系は .nav-link クラスを持ち、コラム記事側は
   持たないという差異があるため、両方に当たる構造セレクタを使う。
   ═══════════════════════════════════════════════════ */
/* padding 14px は、インライン要素のボックス高（14px相当の内容高＋上下padding）で
   タップ推奨の44pxに届かせるための値。ナビの帯は72pxあるため収まる。

   ⚠ index.html のコーナーアバターとの関係
   このリンク列は高さ44px・下端58pxになる（旧: 16px・下端55px）。
   アバターは top:60px 固定なので、余白は 2px しか残っていない。
   重なってはいない（かつナビは z-index 8600 でアバターより前面）が、
   これ以上 padding を増やす場合は index.html 側の --av-top も一緒に
   下げること。文字そのものは y=28〜44 付近にあり、見た目の余白は十分ある。 */
#nav div[class*="md:flex"] > a {
  font-size: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}
/* 末尾の「相談する →」ボタンはボタンらしい余白を保つ（配色はページ側のまま） */
#nav div[class*="md:flex"] > a:last-child {
  padding: 12px 22px;
}

/* ハンバーガー：38×31px → 48×48px（タップ領域の推奨最小値） */
#nav #hamburger {
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
}
#nav #hamburger .ham-line { width: 24px; }

/* スマホのドロワー：14px→16px、行高49px→57px */
#mobile-menu .mob-link {
  font-size: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}
#mobile-menu .mob-link:last-child {
  padding-top: 18px;
  padding-bottom: 18px;
}
/* 行が高くなったぶん、開いたときの max-height を広げる。
   各ページ側は max-height:400px で、7行×約57px＋余白では足りず下端が切れる。 */
#mobile-menu.open { max-height: 520px; }


/* ═══════════════════════════════════════════════════
   ② コラム記事の本文
   本文 15px→18px（+2.25pt）。ページ側の .article-body p (0,1,1) を
   article を足した (0,1,2) で上書きする。
   ═══════════════════════════════════════════════════ */
article .article-body p {
  font-size: 18px;
  line-height: 1.9;
  margin-bottom: 1.5em;
}
article .article-body h2 {
  font-size: 24px;
  line-height: 1.6;
}
article .article-body h3 { font-size: 20px; }
article .article-body li { font-size: 17px; line-height: 1.9; }

/* 写真キャプション 10px→13px、タグ 9px→11px、日付・パンくず 11px→13px。
   （Tailwindの任意値クラスを上書きするため !important が必要） */
article figcaption { font-size: 13px !important; line-height: 1.7 !important; }
article header span[class*="text-[9px]"] { font-size: 11px !important; }
article p[class*="text-[11px]"] { font-size: 13px !important; }

/* AI開示ボックス（aside）12px→15px */
article aside p[class*="text-xs"],
article aside ol,
article aside ol li,
article aside ul,
article aside ul li { font-size: 15px !important; line-height: 1.9 !important; }
article aside p[class*="text-[10px]"] { font-size: 12px !important; }

/* 記事末尾のCTAブロック内の説明文 12px→15px */
article div[class*="bg-so-accent"] p[class*="text-xs"] { font-size: 15px !important; }
article div[class*="bg-so-accent"] a[class*="text-[11px]"] { font-size: 13px !important; }


/* ═══════════════════════════════════════════════════
   ③ 記事・サンプルの「閉じ方／戻り方」導線
   従来はページ最上部の11pxリンクだけで、読み終えた位置からは戻る手段が
   実質見えなかった。上部にはスクロールしても残る sticky バーを、
   末尾には大きな戻るブロックを置く。
   sticky を使うのは、position:fixed だと本文へ padding 補正が必要になり
   既存レイアウトを崩すリスクがあるため。
   ═══════════════════════════════════════════════════ */
.back-bar {
  position: sticky;
  top: 72px;                 /* 固定ナビ（高さ72px）の直下に張り付く */
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -24px 28px;      /* main の px-6 を打ち消して全幅に見せる */
  padding: 15px 24px;
  min-height: 52px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(27, 73, 101, 0.12);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1B4965;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.back-bar:hover { background: #fff; color: #0A121A; }

/* 末尾の戻るブロック */
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(27, 73, 101, 0.15);
}
.foot-nav__btn {
  flex: 1 1 240px;
  max-width: 320px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: #1B4965;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease;
}
.foot-nav__btn:hover { background: #0A121A; }
.foot-nav__btn--sub {
  background: #fff;
  color: #1B4965;
  border: 1px solid rgba(27, 73, 101, 0.35);
}
.foot-nav__btn--sub:hover { background: #E7F0F6; color: #0A121A; }


/* ═══════════════════════════════════════════════════
   ④ ギャラリー（制作実例）
   カードの文字を拡大。サンプル本文は専用ページ側で .md-* を使う。
   ═══════════════════════════════════════════════════ */
.sample-card h3 { font-size: 18px !important; line-height: 1.6 !important; }
.sample-card p  { font-size: 15px !important; line-height: 1.9 !important; }
.sample-card span[class*="text-[9px]"] { font-size: 11px !important; }
/* 「サンプルを見る →」は16pxのタップ領域→44px以上に */
.sample-open {
  font-size: 15px !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
}
/* 事業で絞り込むタブ */
.filter-btn { font-size: 15px !important; min-height: 44px; }


/* ═══════════════════════════════════════════════════
   ⑤ サンプル本文（Markdown簡易レンダリングの出力）
   コラム記事と同じ体裁・同じ18pxで読ませる。
   旧実装はJS側のインラインstyleで13px固定だったため、CSSでは上書き
   できなかった。専用ページの新レンダラーはクラスを出力する。
   ═══════════════════════════════════════════════════ */
.md-body { color: rgba(47, 62, 70, 0.88); }
.md-p {
  font-size: 18px;
  line-height: 1.9;
  margin: 0 0 1.4em;
}
.md-h2 {
  font-family: Optima, Candara, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1B4965;
  line-height: 1.6;
  margin: 2.2em 0 0.9em;
  padding-left: 14px;
  border-left: 3px solid rgba(27, 73, 101, 0.45);
}
.md-h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1B4965;
  line-height: 1.6;
  margin: 1.8em 0 0.7em;
}
.md-h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1B4965;
  line-height: 1.6;
  margin: 1.5em 0 0.6em;
}
.md-list { margin: 0 0 1.4em; padding-left: 1.6em; }
.md-list li { font-size: 18px; line-height: 1.9; margin-bottom: 0.5em; }
.md-list--ordered { list-style: decimal; }
.md-list--bullet  { list-style: disc; }
/* 表は幅が足りないとき、ページ本体ではなく表の中だけを横スクロールさせる */
.md-table-wrap { overflow-x: auto; margin: 1.2em 0 1.6em; }
.md-table { border-collapse: collapse; width: 100%; font-size: 16px; }
.md-table th {
  text-align: left;
  padding: 10px 12px;
  color: #1B4965;
  font-weight: 700;
  border-bottom: 2px solid #1B4965;
  white-space: nowrap;
}
.md-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(27, 73, 101, 0.15);
}
.md-body a {
  color: #1B4965;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ═══════════════════════════════════════════════════
   ⑥ 地図リンクの案内
   地図は target="_blank" で別タブに開くため、サイト側からは閉じられない
   （スマホではMapsアプリが起動することもあり、OSの戻る操作しかない）。
   閉じ方が分からなくなるのを防ぐため、文章で明示する。
   ═══════════════════════════════════════════════════ */
.map-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 28px;
  padding: 14px 18px;
  background: #E7F0F6;
  border-left: 3px solid rgba(27, 73, 101, 0.45);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(47, 62, 70, 0.9);
}


/* ═══════════════════════════════════════════════════
   ⑦ 意図しないページスクロールの抑止

   チャット欄などの「内側でスクロールする箱」は、既定では端まで到達した時点で
   スクロールが親（＝ページ本体）へ連鎖する（スクロールチェーン）。
   ヒヤリング中にチャットを読み進めて末端に触れた瞬間、ページごと下へ飛ぶのは
   これが原因で、「入力を確定したら画面が突然スクロールする」という体感になる。
   contain を指定すると、その箱の中でスクロールが止まり外へ伝播しない。

   あわせて、iOSでの慣性スクロールが親へ抜けるのも防ぐ。
   ※ページ本体のスクロール自体は妨げない（下部のコンテンツは今まで通り読める）。
   ═══════════════════════════════════════════════════ */
#chat-messages,
#m-chat-messages,
#hearing-image-panel,
#hearing-image-gallery,
#m-hearing-image-gallery,
.tabs-wrap,
.deliverable-bubble > div,
#contact-form-modal .modal-box,
.modal-box {
  overscroll-behavior: contain;
}


/* ═══════════════════════════════════════════════════
   スマホ向け調整
   ═══════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .back-bar { font-size: 14px; padding: 14px 20px; margin: 0 -24px 22px; }
  .foot-nav__btn { flex: 1 1 100%; max-width: none; font-size: 15px; }
  .md-table { font-size: 15px; }
  .md-table th, .md-table td { padding: 8px 10px; }
  .md-h2 { font-size: 21px; }
  .md-h3 { font-size: 19px; }
  article .article-body h2 { font-size: 21px; }
  .map-notice { font-size: 14px; padding: 12px 14px; }
}