@charset "UTF-8";
/*
Theme Name:  UniMind SWELL Child
Theme URI:   https://unimind.co.jp/blog/
Description: 株式会社UniMind ブログ用のSWELL子テーマ。ヘッダー・フッター・配色・タイポを静的サイト（unimind.co.jp）と共通化する。色・余白・角丸は /assets/css/tokens.css（静的サイトと同一ファイル）が唯一の正典。ここには「ブログ本文まわりの微調整」だけを書く。
Author:      UniMind
Template:    swell
Version:     0.1.0
Text Domain: swell_child
*/

/* ============================================================
   ★ここは「ブログ本文専用」の調整だけを書く場所です。
     ヘッダー・フッター・色・余白・角丸・ボタンは
       /assets/css/tokens.css  … 色/余白/角丸トークン（静的と共有）
       /assets/css/style.css   … コンポーネント（静的と共有）
     を functions.php で読み込んでいます。
     見た目の共通ルールを変えたいときは、この2ファイル側を直すこと。
     ここに色や余白をハードコードすると二重管理になり、
     DESIGN.md §9「ページごとにルールが変わる」の禁止事項に触れます。
   ============================================================ */

/* ------------------------------------------------------------
   1. 管理バーのぶんヘッダーを下げる（ログイン中の編集者のみ）
      .um-header は position:fixed:top:0。WPの管理バー(fixed)と重なるため。
      非ログインの一般訪問者には body.admin-bar が付かないので無影響。
   ------------------------------------------------------------ */
body.admin-bar .um-header { top: 32px; }
body.admin-bar .um-drawer { top: calc(var(--um-header-h) + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .um-header { top: 46px; }
  body.admin-bar .um-drawer { top: calc(var(--um-header-h) + 46px); }
}

/* ------------------------------------------------------------
   2. ブログ本文エリアの外枠
      SWELLが出力する記事本体を、静的サイトのセクションと同じ
      左右余白・最大幅に収める。
   ------------------------------------------------------------ */
/* ★.um-sub-main には縦paddingを絶対に付けない。
     タイトル帯(.um-page-header)が .um-sub-main の最初の子のため、
     padding-top を付けると帯ごと下がり、透過ヘッダーの下に白い隙間ができて
     「ヘッダーが白い（＝上位ページと違う）」ように見える（2026-07-23 実測で確認）。
     縦の余白は帯の“下”の .um-blog-wrap 側に付ける。 */
.um-sub-main { background: var(--um-white); }

.um-blog-wrap {
  max-width: var(--um-content-max, 1120px);
  margin-inline: auto;
  padding-inline: var(--um-gutter, 24px);
  /* 帯とCTAの間に、静的サイトのセクションと同じ縦余白 */
  padding-block: clamp(48px, 8vw, 96px);
}
/* SWELLの本文カラムは既定でサイドバー用に左寄せ（実測 716px）になる。
   1カラム運用なら中央寄せして余白を左右均等にする。
   ※根本はSWELLカスタマイザーで「サイドバー無し・コンテンツ幅」を設定するのが本筋。 */
.um-blog-wrap .l-mainContent__inner { margin-inline: auto; }

/* カテゴリラベルの可読性修正：
   SWELLはバッジ背景＝メインカラー(#2563EB)、文字＝リンクカラー(#2563EB)を当てるため
   「青の上に青」で文字が消える（2026-07-23 実測）。塗り青バッジなので文字を白に固定。
   ※基本カラーで分離できないためCSSで補正（サイト全体のリンク色は青のまま保つ）。 */
.um-blog-wrap .c-categoryList__link,
.um-blog-wrap .c-categoryList__link:hover { color: var(--um-white); }

/* ▼メインカラー塗り装飾の可読性（systemicな一括補正）
   SWELLは「メインカラーで塗った上の文字色」を制御する変数を持たず、装飾ごとに
   黒(--color_text)/白がバラつく。#2563EB は濃い青なので黒文字だと読みにくい。
   → メインカラーで塗られる装飾の文字をまとめて白に固定（青地×白＝プライマリボタンと同じ）。
   SWELLソース(build/css)から抽出した「background:var(--color_main)」を持つ装飾を対象にしている。
   ※方針としては塗り装飾は多用せず、見出し=線／ボックス=枠線を基本にする。これは"塗りを使ったときの保険"。 */
.um-blog-wrap .has-swl-main-background-color,                                    /* 任意ブロックにメイン背景を指定 */
.um-blog-wrap .is-style-balloon_box,                                            /* 吹き出しボックス */
.um-blog-wrap .swell-block-accordion.is-style-main .swell-block-accordion__title, /* アコーディオン(塗り) */
.um-blog-wrap .is-style-vtabel > .swell-block-dl__dt,                           /* 縦型テーブルの見出しセル */
.um-blog-wrap .fill_col_main {                                                  /* テーブルのメイン塗りセル */
  color: var(--um-white);
}
/* 塗りボックス内のリンクも青のままだと青on青で消えるため白＋下線に */
.um-blog-wrap .has-swl-main-background-color a,
.um-blog-wrap .is-style-balloon_box a { color: var(--um-white); text-decoration: underline; }

/* 塗りボタン・共有ボタンの文字/アイコン
   SWELLは「メインカラー塗りのボタンは白文字」を :where() など低詳細度で指定しているため、
   共有 tokens.css の a{color:var(--um-primary)}（後読み込み・同詳細度0-0-1）に負けて
   青on青で消える（2026-07-23 ローカル実測。編集画面は共有CSS未読込のため白に見えていた）。
   塗り系ボタンだけ白に上書きして回復（線・テキスト型ボタンは対象外）。 */
.um-blog-wrap .is-style-btn_normal .swell-block-button__link,
.um-blog-wrap .is-style-btn_shiny .swell-block-button__link { color: var(--um-white); }

/* 共有ボタン（SNSシェア）。
   実装が「background = currentColor（＝文字色）」なので、文字ごと白にすると背景まで白くなり
   白on白で消える。アイコン(::before / svg)だけ白にして、背景の青は保つ。 */
.um-blog-wrap .c-shareBtns__btn::before,
.um-blog-wrap .c-shareBtns__btn svg { color: var(--um-white); fill: var(--um-white); }

/* ------------------------------------------------------------
   3. 記事本文タイポ（見出し・リスト・引用）
      Claude Design「記事詳細テンプレート」に寄せる最小限。
      値はトークン変数を参照し、生の色・pxを置かない。
   ------------------------------------------------------------ */
.um-blog-wrap :is(h2, h3, h4) { color: var(--um-heading); line-height: var(--um-lh-head, 1.4); }
.um-blog-wrap h2 {
  font-size: var(--um-h3, 1.5rem); margin: 2.4em 0 0.8em;
  padding-bottom: 0.4em; border-bottom: 2px solid var(--um-border);
}
.um-blog-wrap h3 { font-size: var(--um-h4, 1.25rem); margin: 2em 0 0.6em; }
.um-blog-wrap :is(p, li) { color: var(--um-text); line-height: var(--um-lh-body, 1.9); }
.um-blog-wrap a { color: var(--um-primary); text-underline-offset: 0.15em; }
.um-blog-wrap blockquote {
  margin: 1.6em 0; padding: var(--um-sp-3, 16px) var(--um-sp-4, 24px);
  border-left: 3px solid var(--um-primary);
  background: var(--um-off); border-radius: var(--um-r-img, 12px);
  color: var(--um-muted);
}
.um-blog-wrap img { border-radius: var(--um-r-img, 12px); }

/* ------------------------------------------------------------
   4. 記事カード（一覧）
      DESIGN.md：右上48pxのアシンメトリー角丸／ホバー反転／
      カテゴリはピル型バッジ。SWELLの投稿リスト出力へ後付けする。
      ★SWELLの実クラス名はテーマにより異なるため、WP稼働後に
        実DOMを見てセレクタを確定する（READMEの検証項目）。ここは雛形。
   ------------------------------------------------------------ */
/*
.um-blog-wrap .p-postList__item {
  border: 1px solid var(--um-border);
  border-radius: var(--um-r-card, 16px) var(--um-r-card, 16px) var(--um-r-card, 16px) 48px;
  overflow: hidden; transition: background .3s, color .3s;
}
.um-blog-wrap .p-postList__item:hover { background: var(--um-dark); color: var(--um-white); }
*/

/* ------------------------------------------------------------
   5. SP追従バーぶんの下余白（フッターが隠れないように）
   ------------------------------------------------------------ */
@media (max-width: 899px) { .um-footer { padding-bottom: calc(var(--um-sp-6, 40px) + 64px); } }