/*
 * main.css — Mathematica テーマ 共通スタイルシート
 * renewal_B10_*.html の共通部分を集約。ページ固有スタイルは各テンプレートに残す。
 * ========================================================================== */


/* ==========================================================================
   0. CSS カスタムプロパティ
   ========================================================================== */

:root {
  /* Colors */
  --navy:      #14213d;
  --navy2:     #1e2e4f;
  --bg:        #ffffff;
  --grey:      #f4f5f8;
  --paper:     #ffffff;
  --line:      #e7e8f0;
  --ink:       #16223d;
  --ink2:      #5a6480;
  --body:      #08131a;

  --mint:      #16b3ad;
  --mint-d:    #0d8c87;
  --mint-soft: #e1f5f4;
  --coral:     #ff7a66;
  --lav:       #1aa3e8;
  --yellow:    #d4e84a;
  --pink:      #d44f9d;

  /* Layout */
  --radius:    18px;
  --shadow:    0 18px 40px rgba(29,27,58,.12);
  --shadow-sm: 0 8px 20px rgba(29,27,58,.07);
  --max:       1160px;
}


/* ==========================================================================
   1. リセット & ベース
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* スマホ表示で左右にスクロールしてしまう問題への対策。
   一部要素の幅がビューポート幅をわずかに超えることがあり、body自体を
   横スクロール不可にすることでページ全体が左右に動くのを防ぐ。
   2026-07-18: ステージング環境スマホ確認で複数ページにて発覚。 */
html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-size: 16px;
  font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  position: relative;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 一部の投稿本文に style="width:840px" のような固定インライン幅が直接
   ついている画像があり、上のルールだけでは（インラインスタイルの方が
   詳細度が高いため）勝てずにコンテナからはみ出していた。
   2026-07-15: 用語ページのレイアウト崩れ調査で発覚（60進法・死者の書・
   ピタゴラスの定理の3記事で確認）。!important で強制的に上書きする。
   2026-07-16: 対象を本文（.article/.prose）内の画像だけに限定するよう修正。
   以前は img 全称セレクタだったため、!important がカード/サムネイル系
   テンプレート（.rcard .th img 等、height:100%+object-fit:coverで
   クロップする作り）を軒並み上書きしてしまい、画像が中央に小さく表示
   される・下が欠けて見える等の崩れを複数箇所で引き起こしていた
   （QA指摘 A-1、および「読む」タブのコラムカードで再発）。 */
.article img,
.prose img {
  max-width: 100% !important;
  height: auto !important;
}

/* iframe（YouTube埋め込み・WPの内部リンク自動埋め込みカード等）が
   固定pxの幅/高さを持つ場合にコンテナからはみ出す問題への対策。
   2026-07-15: 用語・人物ページのレイアウト崩れ調査で発覚。 */
iframe {
  max-width: 100%;
}

/* 動画カード（/movie/ アーカイブ・トップページの動画セクション）のサムネイル。
   上の img{height:auto !important} だと縦長(9:16)カードの中で16:9サムネイルが
   小さく表示され下に空白ができてしまうため、これらのカードだけは
   コンテナに合わせて object-fit:cover でフィットさせる。
   2026-07-15: QA指摘 A-1 で発覚。 */
.vcard .thumb img,
.scard .thumb img,
.short img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}


/* ==========================================================================
   2. レイアウトユーティリティ
   ========================================================================== */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: 80px 0;
}

.kick {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mint-d);
  font-family: "Poppins",sans-serif;
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 30px;
}

.sec-head h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 0;
  line-height: 1.1;
}

.sec-head .kick {
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 700;
  color: var(--mint-d);
}

.more::after {
  content: "";
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center/contain;
}


/* ==========================================================================
   3. ボタン
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 40px;
  transition: .2s;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
}

.btn-fill  { background: var(--mint); color: #fff; }
.btn-fill:hover { background: var(--mint-d); transform: translateY(-2px); }

.btn-line  { border: 2px solid var(--navy); color: var(--navy); }
.btn-line:hover { background: var(--navy); color: #fff; }

.btn-ghost { border: 2px solid rgba(255,255,255,.45); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--navy); }

.btn-amazon { background: var(--yellow); color: #14213d; }
.btn-amazon:hover { filter: brightness(1.04); transform: translateY(-2px); }

.btn-sm { padding: 9px 17px; font-size: 13px; }


/* ==========================================================================
   4. 星マーク（難易度）
   ========================================================================== */

.star {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -3.5px;
  stroke-linejoin: round;
}

.star.f { color: var(--yellow); fill: currentColor; stroke: currentColor; stroke-width: 1.4px; }
.star.e { color: #c4c8d8; fill: none; stroke: currentColor; stroke-width: 2px; }

.lvpill {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  border-radius: 30px;
  padding: 4px 12px;
}

.lvpill .star.e { color: #5d6b86; }


/* ==========================================================================
   5. タブ（難易度フィルタ等）
   ========================================================================== */

.tabs {
  position: relative;
  display: inline-flex;
  background: #edf0f7;
  border-radius: 30px;
  padding: 4px;
  margin-bottom: 18px;
}

.tab-slider {
  position: absolute;
  top: 4px;
  border-radius: 26px;
  background: var(--navy);
  transition: left .24s cubic-bezier(.4,0,.2,1), width .24s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.tab {
  position: relative;
  z-index: 1;
  font-size: 13.5px;
  font-weight: 700;
  padding: 7px 22px;
  border-radius: 26px;
  color: var(--ink2);
  transition: color .24s;
  cursor: pointer;
  user-select: none;
}

.tab.on { color: #fff; }


/* ==========================================================================
   6. ヘッダー & ナビゲーション
   ========================================================================== */

.top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(29,27,58,.9);
  backdrop-filter: blur(12px);
  /* 2026-07-16: 人物・用語詳細ページなど、直後が濃紺のhero/パンくずになる場合に
     境界線が浮いて見えるため削除。白背景ページでは元々ほぼ視認できなかった。 */
  /* 2026-07-16(2): ブラウザ拡大率が100%以外のとき、stickyヘッダーの高さが小数ピクセルになり、
     ヘッダーとheroの間に白い body 背景が1px透けて線に見える（スクロールで出たり消えたりする）。
     直後の要素を1pxだけヘッダー下に重ねて隙間を塞ぐ。 */
  margin-bottom: -1px;
}

.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.brand {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Hiragino Mincho ProN","Noto Serif JP",serif;
}

.brand .mk {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--mint);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-family: "Poppins";
}

.brand .logo,
.foot-brand .logo { height: 32px; display: block; }
.foot-brand .logo { height: 28px; margin-bottom: 10px; }

.nv-new {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  background: transparent;
  border: 1.5px solid var(--yellow);
  color: var(--yellow);
  border-radius: 3px;
  padding: 2px 7px;
  margin-left: 4px;
  vertical-align: 1px;
  font-family: "Poppins",sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.menu {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  color: #c6c3e0;
  list-style: none;
  padding: 0;
}

/* wp_nav_menu が出力する <ul class="menu"><li> にも対応 */
.menu ul {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: auto;
}
.menu li { list-style: none; }

.menu a:hover, .menu a.on { color: #fff; }
.menu .m-only { display: none; }
.hd-cta { margin-left: 26px; }

.burger {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
}

@keyframes burgerPop {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.35) rotate(-15deg); }
  55%  { transform: scale(.8) rotate(10deg); }
  80%  { transform: scale(1.1) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.burger-anim { animation: burgerPop .38s cubic-bezier(.36,.07,.19,.97) both; }


/* ==========================================================================
   7. パンくずリスト
   ========================================================================== */

.crumb {
  background: var(--grey);
  font-size: 13px;
  color: var(--ink2);
}

.crumb .wrap { padding-top: 12px; padding-bottom: 12px; }
.crumb a:hover { color: var(--mint-d); }
.crumb span { margin: 0 8px; color: #b7bdce; }


/* ==========================================================================
   8. フッター
   ========================================================================== */

footer {
  background: var(--navy);
  color: #a7a3c8;
  padding: 48px 0 28px;
  font-size: 13px;
  margin-top: 8px;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.foot-grid h5 {
  color: #fff;
  font-size: 12px;
  margin-bottom: 12px;
  font-weight: 700;
  font-family: "Poppins";
}

.foot-grid a { display: block; padding: 4px 0; }
.foot-grid a:hover { color: var(--mint); }

.foot-brand {
  font-size: 22px;
  color: #fff;
  font-family: "Hiragino Mincho ProN",serif;
  margin-bottom: 10px;
}

.copy {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 18px;
  font-size: 12px;
  opacity: .85;
}
.copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.copy a:hover { color: var(--mint); }


/* ==========================================================================
   9. CTA バナー（共通）
   ========================================================================== */

.cta {
  background: var(--navy);
  color: #fff;
  border-radius: 26px;
  padding: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.cta .glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22,179,173,.25), transparent 65%);
  right: -40px;
  top: -60px;
}

.cta h2 { font-size: 28px; font-weight: 700; position: relative; }
.cta p  { color: #c6c3e0; margin-top: 8px; position: relative; }


/* ==========================================================================
   10. モバイル共通レスポンシブ
   ========================================================================== */

@media (max-width: 880px) {
  .wrap    { padding: 0 20px; }
  .section { padding: 50px 0; }

  .burger    { display: block; margin-left: auto; }
  .hd-cta   { display: none; }

  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    padding: 8px 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 22px 34px rgba(0,0,0,.35);
  }

  body.navopen .menu { display: flex; }
  /* wp_nav_menu の <ul> もドロップダウン内で縦並びに */
  .menu ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    width: 100%;
  }
  .menu a { padding: 13px 22px; font-size: 16px; }
  .menu .m-only { display: block; margin: 8px 22px 0; text-align: center; }
  .burger:active { transform: scale(.85); opacity: .6; transition: .08s; }

  .foot-grid { grid-template-columns: 1fr 1fr; }

  .cta { flex-direction: column; align-items: flex-start; padding: 32px 22px; }
}

@media (max-width: 560px) {
  .wrap    { padding: 0 16px; }
  .sec-head h2 { font-size: 22px; }
  .section { padding: 40px 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 20px; }
}


/* ==========================================================================
   11. MW WP Form グローバルスタイル（入力・確認・完了 共通）
   ========================================================================== */

/* リセット */
.mw_wp_form ul, .mw_wp_form ol { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.mw_wp_form li, .mw_wp_form li::marker { list-style: none !important; content: "" !important; }

/* 入力フォーム（.mw_wp_form_input）*/
.mw_wp_form_input li { margin-bottom: 4px; }
.mw_wp_form_input li:has(input, textarea, select) { margin-bottom: 20px; }
/* :has() 非対応ブラウザ向けフォールバック（偶数=入力欄） */
.mw_wp_form_input ul > li:nth-child(even) { margin-bottom: 20px; }
.mw_wp_form_input ul > li:nth-child(odd)  { margin-bottom: 4px; }

/* ラベル行 */
.mw_wp_form label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 0; }

/* 必須マーク（全パターン） */
.mw_wp_form .mwform-required,
.mw_wp_form .mwform-required-text,
.mw_wp_form abbr.mwform-required,
.mw_wp_form span.required,
.mw_wp_form .required { color: var(--coral) !important; font-size: 12px !important; font-weight: 700 !important; font-style: normal !important; margin-left: 6px; text-decoration: none !important; border-bottom: none !important; }

/* 入力欄共通 */
.mw_wp_form input[type="text"],
.mw_wp_form input[type="email"],
.mw_wp_form input[type="tel"],
.mw_wp_form input[type="url"],
.mw_wp_form select,
.mw_wp_form textarea {
  width: 100%; font-size: 15px; font-family: inherit; color: var(--ink);
  background: var(--grey); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; transition: .18s; box-sizing: border-box; margin-top: 4px;
}
.mw_wp_form input:focus, .mw_wp_form select:focus, .mw_wp_form textarea:focus {
  outline: none; border-color: var(--mint); background: #fff;
  box-shadow: 0 0 0 3px rgba(22,179,173,.14);
}
.mw_wp_form textarea { min-height: 150px; resize: vertical; }
.mw_wp_form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mint); vertical-align: middle; margin-right: 6px; }

/* 送信・確認ボタン（入力フォーム） */
.mw_wp_form_input input[type="submit"] {
  font-size: 15.5px; padding: 15px; border-radius: 40px;
  background: var(--mint); color: #fff; border: 0; cursor: pointer;
  font-weight: 700; transition: .2s; font-family: inherit; width: 100%; display: block; margin-top: 16px;
}
.mw_wp_form_input input[type="submit"]:hover { background: var(--mint-d); }

/* ── 確認画面（.mw_wp_form_confirm）── */
.mw_wp_form_confirm { max-width: 640px; margin: 0 auto; }

/* 案内テキスト */
.mw_wp_form_confirm > p:first-child,
.mw_wp_form_confirm form > p:first-child {
  border-left: 3px solid var(--mint); background: var(--mint-soft);
  padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 13.5px;
  color: var(--ink2); line-height: 1.7; margin-bottom: 28px;
}

/* 確認データリスト */
.mw_wp_form_confirm ul { margin-bottom: 28px !important; }
.mw_wp_form_confirm ul > li { display: block; }
.mw_wp_form_confirm ul > li:nth-child(odd) {
  font-size: 12px; font-weight: 700; color: var(--ink2); letter-spacing: .04em;
  padding: 16px 0 4px; border-top: 1px solid var(--line);
}
.mw_wp_form_confirm ul > li:first-child { padding-top: 0; border-top: none; }
.mw_wp_form_confirm ul > li:nth-child(even) {
  font-size: 15px; color: var(--ink); padding: 4px 0 12px; word-break: break-all; min-height: 1.5em;
}

/* ボタン行（横並び） */
.mw_wp_form_confirm form > p:last-child,
.mw_wp_form_confirm > p:last-child {
  display: flex !important; gap: 12px; margin-top: 8px;
}
.mw_wp_form_confirm input[name="back"] {
  flex: 1; width: auto !important; padding: 14px 20px !important; border-radius: 40px !important;
  background: #fff !important; color: var(--ink) !important;
  border: 1.5px solid var(--line) !important; cursor: pointer; font-weight: 700 !important;
  font-size: 15px !important; margin-top: 0 !important; transition: .2s;
}
.mw_wp_form_confirm input[name="back"]:hover { border-color: var(--mint) !important; color: var(--mint-d) !important; }
.mw_wp_form_confirm input[type="submit"]:not([name="back"]) {
  flex: 2; width: auto !important; padding: 14px 20px !important;
  border-radius: 40px !important; font-size: 15px !important; margin-top: 0 !important;
}

/* ── 完了画面（.mw_wp_form_complete）── */
.mw_wp_form_complete p { font-size: 15px; line-height: 1.8; color: var(--ink2); }


/* ==========================================================================
   12. アクセシビリティ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   12b. 関連記事プラグイン（Related Posts for WordPress）の非表示
   -----------------------------------------------------------------------
   「おすすめ記事」欄は一旦非表示（CTAは電子書籍のみに一本化する方針のため）。
   プラグイン本体・保存済みの関連付けデータは維持し、表示のみ止める。
   再表示したい場合はこのルールを削除するだけでよい。
   ========================================================================== */
.rp4wp-related-posts {
  display: none !important;
}


/* ==========================================================================
   13. 数式ボックス（.mtm-formula）
   -----------------------------------------------------------------------
   本文中の数式をグレーの角丸背景で見せるための共通クラス。
   用語・連載記事・投稿など、the_content() を通す場所ならどこでも使える。
   ブロックパターン「数式ボックス」（＋→パターン→Mathematica）から挿入可能。
   フォントは STIX Two Text（立体・非イタリック）。
   ========================================================================== */
.mtm-formula {
  display: block;
  background: var(--grey);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 20px 0;
  font-family: "STIX Two Text", Georgia, serif;
  font-style: normal;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.8;
  color: #0d0d0d;
  overflow-x: auto;
  white-space: pre-line;
}
.mtm-formula mjx-container {
  color: inherit;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  font-size: 113% !important;
}
.mtm-formula mjx-container mjx-linebox,
.mtm-formula mjx-container mjx-math {
  text-align: left !important;
  max-width: 100%;
  white-space: normal !important;
}
/* 式番号(N)を右端に独立配置するパターン（.eq-body / .eq-num を内部に持つ場合） */
.mtm-formula.has-num {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mtm-formula.has-num .eq-body {
  flex: 1;
  min-width: 0;
}
.mtm-formula.has-num .eq-num {
  flex: none;
  font-size: 0.85em;
  color: var(--ink);
  opacity: .6;
  font-family: "STIX Two Text", Georgia, serif;
}
/* 文中に埋め込む短い数式用（段落内で個別に class="mtm-formula inline" を付けて使用）
   2026-07-21: inline-block + vertical-align の微調整だとベースラインが周囲の文字と
   ズレて見える問題があったため、display:inline に変更。inline要素は周囲のテキストと
   自然にベースラインが揃い、paddingがあっても行の高さ・位置に影響しない。
   box-decoration-break は、万一2行にまたがって折り返した場合でも背景・角丸が
   分断されず自然に見えるようにするための指定。 */
.mtm-formula.inline {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  margin: 0 1px;
  padding: 0.15em 0.5em;
  border-radius: 6px;
  font-size: 1em;
}

/* ==========================================================================
   13-b. 定理ボックス（.mtm-theorem）
   -----------------------------------------------------------------------
   白背景・ターコイズグリーンの角丸枠で定理などを見せる共通クラス。
   ブロックパターン「定理ボックス」（＋→パターン→Mathematica）から挿入可能。
   ========================================================================== */
.mtm-theorem {
  display: block;
  background: #fff;
  border: 2px solid var(--mint);
  border-radius: 14px;
  padding: 18px 24px;
  margin: 24px 0;
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink);
}
.mtm-theorem .label {
  color: var(--mint-d);
  font-weight: 700;
}
/* 定理ボックスの中に数式ボックスを入れ子にした場合の余白調整（背景色は数式ボックスと共通のグレーのまま） */
.mtm-theorem .mtm-formula {
  margin: 14px 0 0;
}

/* 既存記事内の「定理」ボックス（Spectraプラグインの通知ブロック／.uagb-notice系）を
   オレンジ・黄色からターコイズグリーンへ全記事共通で上書き。
   ブロックごとに固有クラス（.uagb-block-xxxxxxxx）が振られ背景色がインラインCSSで
   直接指定されているため、!important で確実に上書きする。 */
.uagb-notice-title {
  background: var(--mint) !important;
  color: #fff !important;
}
.uagb-notice-text {
  border-color: var(--mint) !important;
}

/* 2026-07-22: Tさんサイトチェック反映
   euclid1-4ほか：公理・公準ラベル（.axiom）に背景色を付ける（元サイトの見た目に寄せる） */
.article .axiom {
  display: inline-block;
  background: #e1f5f4;
  color: #0d8c87;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 12px;
  margin-right: 10px;
  font-size: .92em;
  white-space: nowrap;
}

/* 2026-07-22: Tさんサイトチェック反映（egypt1-2ほか）
   旧サイトの吹き出し構造（.balloon > .faceicon + .chatting > .says）を
   「左：アイコン／右：吹き出し」のレイアウトで復元する。
   リニューアル前の記事本文にこの構造が残っており、CSSが無いと上下に積まれて表示される */
.article .balloon{display:flex;align-items:flex-start;gap:14px;margin:24px 0}
.article .balloon .faceicon{flex:none;width:64px}
.article .balloon .faceicon img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--line,#e4e7ec);max-width:100% !important}
.article .balloon .chatting{flex:1;min-width:0}
.article .balloon .says{position:relative;background:#f2f3f6;border-radius:14px;border-top-left-radius:2px;padding:13px 18px}
.article .balloon .says p{margin:0}
.article .balloon .says::before{content:"";position:absolute;left:-8px;top:16px;border:8px solid transparent;border-right-color:#f2f3f6;border-left:0}
@media(max-width:560px){
  .article .balloon .faceicon{width:52px}
  .article .balloon .faceicon img{width:52px;height:52px}
}