/*
  レビューデスクMAGAZINE のスタイル。

  誌面型（ココナラマガジンのような形）にしている。読む場所と探す場所を
  分けたいので、**左に記事・右にカテゴリ**の2段組にした。

  **写真は使わない。** 借り物の写真で誌面を埋めても読む人の役に立たない。
  カテゴリの色の面と番号でサムネイルの代わりにする。用意する手間がゼロなので、
  記事を1本足すときに絵を探す作業が発生しない。

  色は本体（doc.css）と揃える。カテゴリ色だけ記事ごとに差し替わる（--c / --bg）。
*/

:root {
  --ink: #16303a;
  --soft: #4a6873;
  --line: #e2eaec;
  --line2: #eef3f4;
  --bg: #ffffff;
  --alt: #f7fafb;
  --accent: #0d7d8c;
  --accent2: #0a626e;
  /*
    見出しはブランドの濃紺で締める。本文の色（--ink）より濃くすることで、
    読み飛ばしているときでも見出しの位置が目に留まる。
    差し色（カテゴリ色）は記事ごとに --c で入ってくる。
  */
  --navy: #25395C;
  --sky: #78C3D4;
  /* カテゴリ帯の水色。白抜きの文字が読める濃さに落としてある */
  --sky-band: #7FC4E3;
  /*
    地の色。**灰色ではなく水色にする。**
    はじめは #F1F4F6 で白い面との差がほとんど無く、
    次にお手本（ラッコ手帳 #EAEDF2）に合わせて灰色寄りにした。
    そのうえで、ブランドの水色（--sky）を薄めた色に置き換えてある。
    白いカードとの差は保ったまま、誌面の地がブランドの色になる。
  */
  --paper: #E2EEF4;
}
/*
  ── 地と面 ──────────────────────────────
  **地を灰色にして、記事を白い面に載せる。**
  全部を白で組むと、記事の固まりが背景に溶けて「どこからどこまでが1本か」が
  分からなくなる。囲み線を足すより、地の色を1段落とすほうが軽く分かれる。
*/
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /*
    ── 字体 ──────────────────────────────────
    **お手本と同じ並びにする。**（xserver.ne.jp/blog の body から採った実物）
    -apple-system は OS の既定（Macでは San Francisco ＋ ヒラギノ）に任せる書き方で、
    見る環境ごとに字面が変わる。お手本の見え方に寄せるなら、和文の一番手を
    「ヒラギノ角ゴ ProN」と名指しするほうが確実。
    欧文を Helvetica Neue / Arial にすると、数字と英字が和文と同じ太さで並ぶ。
  */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", YuGothic, "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
/*
  ── 面の幅 ──────────────────────────────────
  お手本の実測値に合わせてある。
    中身の幅 1200 ＝ 本文の面 830 ＋ 間 50 ＋ 右の柱 320
  1080 で組んでいたときは本文の面が692pxしかなく、
  白い面のわりに文字の入る幅が狭くて、右側だけが白く空いて見えていた。
*/
.wrap { max-width: 1248px; margin: 0 auto; padding: 0 24px; }
a { color: var(--accent); }

/* ── 誌名と、カテゴリの並び ─────────────────── */
.mg-head { border-bottom: 1px solid var(--line); background: var(--bg); }
/*
  ロゴ・看板・戻り先の3分割。**看板を中央に据える。**
  ロゴだけの帯は「どこかの会社のページ」にしか見えない。
  何を読む場所で、誰が書いているのかを、最初の1画面で言い切る。
*/
.mg-top .wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  /*
    上下の空き。**誌名の大きさに対して18pxでは狭い。**
    看板が2行あるので、そのぶん帯としての厚みが要る。
    ここが薄いと、誌名が帯に押し込まれて窮屈に見える。
  */
  gap: 20px; padding-top: 30px; padding-bottom: 28px;
}
.mg-back { justify-self: end; }

.mg-catch { text-align: center; min-width: 0; overflow: hidden; }
.mg-catch .c {
  font-size: 12.5px; color: var(--soft); margin: 0; line-height: 1.6;
}
.mg-catch .t {
  font-size: 23px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.02em; line-height: 1.4; margin: 4px 0 0;
}
/* 言い切っているところだけ色を変える。全部を色付きにすると、どこも強くならない */
.mg-catch .t em { font-style: normal; color: var(--accent); }
/*
  誌名。**ここが誌面の看板なので、いちばん大きくする。**
  15pxだと「どこかの会社のヘッダー」に見えて、雑誌として立たない。
  中央の看板（.mg-catch）より大きいと主従が逆転するので、そこは超えない。
*/
.mg-logo {
  text-decoration: none; color: var(--navy);
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 9px;
  /*
    **折り返させない。** 3分割のグリッドで min-width:0 にすると、
    中央の看板に押されて「レビューデス／ク」と割れる（実際に割れた）。
    誌名が2行になると看板として成立しないので、ここは幅を譲らない。
  */
  white-space: nowrap; flex: none;
  transition: opacity 0.15s ease;
}
.mg-logo:hover { opacity: 0.75; }
/*
  「MAGAZINE」は屋号より小さく、字間を大きく開ける。
  同じ大きさで並べると2語が競って、どちらも読みにくくなる。
  字間を開けることで、飾りではなく誌名の一部として読める。
*/
.mg-logo span {
  font-size: 14px; font-weight: 800; letter-spacing: 0.22em;
  color: var(--accent); white-space: nowrap;
}
.mg-back { font-size: 13px; text-decoration: none; color: var(--soft); white-space: nowrap; }
.mg-back:hover { color: var(--accent); }

/*
  カテゴリの帯。**アイコンを上、名前を下**の2段にする。
  文字だけを横に流すと、どれも同じ見た目になって目的地を選べない。
  面はブランドの濃紺・文字は白・アイコンはスカイブルーで、ロゴの配色の延長にする。
*/
/*
  帯の色は水色。**濃紺だと、上のヘッダーと合わせて上端が重くなる。**
  ロゴの水色（--sky #78C3D4）そのままだと白い文字が浮くので、
  白抜きが読める濃さまで一段落とした色を、この帯専用に持たせる。
*/
.mg-cats { background: var(--sky-band); }
.mg-cats .wrap {
  display: flex; overflow-x: auto; padding: 0 24px;
  scrollbar-width: none;
}
.mg-cats .wrap::-webkit-scrollbar { display: none; }
.mg-cats a {
  flex: 1 0 auto; min-width: 96px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 14px 13px; font-size: 12.5px; font-weight: 700;
  color: #fff; text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; position: relative;
}
/* 仕切りの細線。区画が分かれていることを示す（枠線だと重くなる） */
.mg-cats a + a::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px; background: rgba(255, 255, 255, 0.5);
}
/*
  水色の面になったので、アイコンも白で抜く。
  面と同系の水色のままだと、字だけが白く浮いてアイコンが沈む。
*/
.mg-cats .ic { width: 21px; height: 21px; fill: #fff; display: block; }
.mg-cats a:hover { background: rgba(255, 255, 255, 0.16); }
.mg-cats a:hover, .mg-cats a.on { border-bottom-color: #fff; }
.mg-cats a.on { background: rgba(255, 255, 255, 0.2); }

/*
  中央寄せの見出し。**英字の小見出しを上に添えて、区画の始まりを示す。**
  日本語だけだと本文の見出しと区別がつかず、ページの構造が読み取れない。
  左右に線を伸ばして、区画の幅そのものを見せる。
*/
.sec-c {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 2px; text-align: center;
  font-size: 21px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.01em; margin: 0 0 26px; position: relative;
}
.sec-c .e {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--accent); order: -1;
}
/* 白い面の中では線を出さない。面の縁と二重になって、囲みが重く見える */
.find .sec-c::after {
  content: ""; display: block; width: 68px; height: 2px;
  background: var(--sky); margin-top: 14px;
}

/* ── 中身 ─────────────────────────────── */
.mg-main { padding: 30px 0 64px; }

/*
  白い面。灰色の地に載せて、記事の固まりの輪郭を出す。
  影は落とさない。**浮かせると付箋のように見えて、読み物の格が下がる。**
  角丸と細い線だけで十分に分かれる。
*/
.sheet {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  /* 内側の余白はお手本と同じ30px（面830 － 左右30 ＝ 文字の入る幅770） */
  padding: 30px; margin-bottom: 22px;
}
.mg-lead { color: var(--soft); font-size: 14px; line-height: 1.9; margin: 0 0 20px; }

/*
  一覧の頭。**何のブログかを1行で言い切る。**
  記事の並びだけを見せられても、読む人は「ここは何を読む場所か」が分からない。
  淡い面で囲って、記事の並びと区切る（濃い色で塗ると、記事より目立ってしまう）。
*/
.mg-mast { background: var(--alt); border-bottom: 1px solid var(--line); margin: -34px 0 34px; }
.mg-mast .wrap { padding-top: 34px; padding-bottom: 30px; }
.mg-mast h1 {
  font-size: 25px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.02em; line-height: 1.5; margin: 0; text-wrap: balance;
}
.mg-mast p {
  font-size: 14.5px; color: var(--soft); line-height: 1.85;
  margin: 12px 0 0; max-width: 42em;
}
/*
  区画の見出し。**左寄せで、素っ気なく。**
  以前は中央寄せで、上に英字（ARTICLES / CATEGORY）を添えていた。
  あれは2015年頃のテンプレートの作法で、いまはそこで目を止めさせない。
  参考にした3サイトは、どれも左に小さく置いているだけだった。
*/
.sec {
  font-size: 17px; font-weight: 800; color: var(--navy);
  letter-spacing: 0.01em; margin: 34px 0 16px;
  padding: 0 0 0 12px; border-left: 4px solid var(--sky);
  line-height: 1.5;
}
.mcol > .sec:first-of-type { margin-top: 8px; }
/* 左のカラム。中身は白い面の集まりなので、ここ自体には面を持たせない */
.mcol { min-width: 0; }

/* 2段組。右は探す場所なので、狭くてよい */
.cols { display: grid; grid-template-columns: 1fr 320px; gap: 50px; align-items: start; }
/*
  **グリッドの子は、既定では中身より狭くなれない**（min-width が auto）。
  記事の中に横に長いもの（表や長い英数字）が1つでもあると、
  記事の面ごと画面より広がる。実際スマホで幅1,598pxまで伸びていて、
  題名も本文も画面からはみ出していた。
  0まで縮められるようにして、はみ出す中身のほうを各自で処理させる。
*/
.cols > * { min-width: 0; }




.ph { display: block; border-radius: 6px; overflow: hidden; background: var(--alt); }
.ph img { display: block; width: 100%; height: auto; }

/*
  ── 記事の並び ────────────────────────────
  **2列。1枚ずつ白い面に載せる。**
  以前は3列で、しかも1本目だけ横長に大きくしていた。記事が4本しかないのに
  階層を付けたので、下の3本が「おまけ」に見えていた。均等に並べたほうが多く見える。

  1枚の中身は 絵 → 題名 → 抜粋 → 札と日付 の順。
  参考にした3サイトが揃ってこの順だった。絵で目を留めて、題名で決めて、
  抜粋で確かめる、という読み方の順に並んでいる。
*/
.cards {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.card a {
  display: flex; flex-direction: column; height: 100%;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 14px 16px;
  text-decoration: none; color: var(--ink); min-width: 0;
  transition: border-color 0.15s ease;
}
/*
  グリッド／フレックスの子は既定が min-width:auto で、**中の画像の実寸（1200px）に
  押し広げられる。** 列幅の指定が効かなくなるので、明示的に 0 まで縮められるようにする。
*/
.card a > * { min-width: 0; }
.card a:hover { border-color: var(--sky); }
.card .t {
  display: block; font-size: 16px; font-weight: 800; color: var(--navy);
  line-height: 1.6; margin: 14px 0 0;
}
.card a:hover .t { color: var(--accent); }
/*
  抜粋・日付・カテゴリの札は出さない。**アイキャッチに主題が焼いてある。**
  その下に抜粋まで並べると同じことを繰り返すことになり、1枚が縦に伸びる。
  （必要になったら、この display:none を外せば戻る）
*/
.card .d, .card .m, .card .k, .card .s { display: none; }
.empty { color: var(--soft); font-size: 14.5px; padding: 18px 0; list-style: none; grid-column: 1 / -1; }

/*
  意味のかたまりの途中で折り返さないための包み。
  中は折れなくなるので、結果として語の切れ目でしか折れない。
  **ただし、どうしても入らないときは折る。** これが無いと、
  長い固有名詞が1つ入っただけで枠から文字がはみ出す。
*/
.nb { display: inline-block; overflow-wrap: anywhere; }

/*
  ── 題名の2段組み ──────────────────────────
  題名は「主題｜補足」で揃えてある。1行に流すと「｜」が文中に紛れて、
  どこまでが主題か読み取れない。**主題を上に大きく、補足を下に小さく。**
  記事のページと一覧のカード、どちらも同じ組み方にする。
*/
.t-main, .t-sub { display: block; }
.t-sub {
  font-size: 0.66em; font-weight: 700; color: var(--soft);
  line-height: 1.6; margin-top: 6px;
}

/* カテゴリの札。色は記事ごとに差し替わる */
.tag {
  display: inline-block; background: var(--bg); color: var(--c);
  border: 1px solid currentColor; border-radius: 999px;
  padding: 2px 10px; font-size: 11.5px; font-weight: 700; line-height: 1.7;
}
.card .tag, .hero .tag { align-self: flex-start; }
/* 記事ページでは札を meta の中に置くので、題名の上には出さない */
.art > .tag { display: none; }


/*
  ── 目的別に探す ───────────────────────────
  **カテゴリ名だけを並べても、どれが自分の悩みか分からない。**
  上に問いを添えて、名前ではなく用で選べるようにする。
  面は塗らない。5色を一度に塗ると、そこだけ縁日の看板のようになる。
  色は問いの文字と、下線にだけ使う。
*/
.find { padding: 44px 0 0; margin: 0 0 40px; }
/*
  カテゴリは5つ。**格子で組むと必ず1マス余る。**
  3列にすると2段目が「2つ＋空き」になり、空いたマスだけが目に入る。
  伸び縮みする並べ方にして、最後の段は残った数で幅を分け合わせる。
*/
.fcards {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.fcards li { flex: 1 1 210px; min-width: 0; }
.fcards a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--bg); padding: 20px 12px; text-decoration: none; color: var(--navy);
  height: 100%; text-align: center; transition: background 0.15s ease;
}
.fcards a:hover { background: var(--alt); }
.fcards .q { font-size: 11.5px; font-weight: 800; color: var(--c); letter-spacing: 0.01em; }
.fcards .n { font-size: 15px; font-weight: 800; line-height: 1.4; }
.fcards a:hover .n { text-decoration: underline; text-underline-offset: 3px; }

/*
  ── 記事の下に置く案内 ─────────────────────
  **読み終えた人にだけ見せる。** 上に置くと、読む前に売り込まれた形になる。
*/
.cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--navy); color: #fff; border-radius: 16px; padding: 26px 30px;
  margin: 34px 0 8px;
}
/*
  マスコット。**案内役として、話しかける側に置く。**
  紺の面の上に白と水色の絵が乗るので、それだけで面が硬くなくなる。
  文字を押しのけないよう、幅は固定して縮まないようにする。
*/
.cta-m { flex: none; width: 96px; height: auto; margin: -10px 0 -14px; }
.cta h2 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.cta p { font-size: 14px; line-height: 1.85; color: #C3D3E4; margin: 10px 0 0; max-width: 46em; }
/* 記事の下の案内も、柱の入口と同じ「白で抜く」に揃える */
.cta a {
  flex: none; background: #fff; color: var(--navy); text-decoration: none;
  font-size: 15.5px; font-weight: 800; border-radius: 999px; padding: 15px 30px;
  white-space: nowrap; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cta a:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28); }

/* ── 右の欄 ───────────────────────────── */
.side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 18px; }
.box { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.box h2 {
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--soft);
  margin: 0 0 12px;
}
.cl { list-style: none; padding: 0; margin: 0; }
.cl li + li { border-top: 1px solid var(--line2); }
.cl a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; text-decoration: none; color: var(--ink);
  font-size: 14px; font-weight: 700;
}
.cl a:hover { color: var(--c); }
.cl b {
  font-size: 12px; font-weight: 800; color: var(--c);
  background: var(--alt); border-radius: 999px; padding: 1px 9px; flex: none;
}
/*
  ── 柱のいちばん上 ──────────────────────────
  **ここだけ紺で塗る。**
  以前は「書いている人」と「レビューデスクとは」を白い箱で2つ並べていた。
  柱の中が全部同じ明るさになり、いちばん見てほしい診断への入口が、
  カテゴリの一覧と同じ強さで並んでいた。

  柱で唯一の濃い面にして、ここだけが押す場所だと分かるようにする。
  マスコットは上にはみ出させて、箱に貼り付いた絵に見えないようにする。
*/
.lead {
  background: var(--navy); border-color: transparent;
  text-align: center; padding: 0 20px 20px;
  margin-top: 46px;   /* はみ出した絵のぶん、上を空ける */
}
.lead-m {
  width: 132px; height: auto; display: block; margin: -46px auto 4px;
  /* 紺の上に載るので、下に薄い影を落として絵を浮かせる */
  filter: drop-shadow(0 6px 10px rgba(10, 22, 44, 0.35));
}
.lead h2 {
  font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
  color: #fff; margin: 0 0 10px;
}
.lead p {
  font-size: 12.5px; line-height: 1.9; color: #C3D3E4;
  margin: 0 0 16px; text-align: left;
}
/*
  診断への入口。**白で抜く。**
  水色（--sky）だと紺の面の上で沈み、柱の中でいちばん押してほしい場所が
  いちばん弱く見えていた。白は紺との差がいちばん大きい。
*/
.lead .btn {
  display: block; text-align: center; background: #fff; color: var(--navy);
  text-decoration: none; font-weight: 800; font-size: 15.5px;
  padding: 15px 16px; border-radius: 999px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lead .btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28); }
.lead .sub {
  display: block; text-align: center; font-size: 12.5px; color: #9FB4CE;
  text-decoration: none; margin-top: 11px;
}
.lead .sub:hover { color: #fff; text-decoration: underline; }

/* ── 記事 ─────────────────────────────── */
/*
  ── 記事の頭 ──────────────────────────────
  並びは パンくず → 題名 → 下線 → カテゴリの札と更新日。
  **札と日付は題名の下に置く。** 上に置くと、題名にたどり着く前に
  分類を読ませることになり、何の記事かが遅れて伝わる。
*/
.crumb {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; color: var(--soft); margin: 0 0 14px;
}
.crumb a { text-decoration: none; color: var(--soft); font-weight: 700; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }

.art h1 {
  font-size: 29px; line-height: 1.5; letter-spacing: -0.02em;
  font-weight: 800; color: var(--navy);
  margin: 6px 0 0; padding-bottom: 18px;
  /*
    **text-wrap: balance を使わない。**
    題名は .nb で「折ってよい単位」に区切ってある。balance はその単位を
    ひとかたまりとして数え、行の長さが揃うように配り直すので、
    右が大きく空いたまま3行に割られていた（実際そうなった）。
    折る場所はこちらで決めてあるので、balance の出番はない。
  */
  /*
    題名の下に1本。**細くする。**
    3pxの色付きだと、題名より線のほうが目に入っていた。
    ここは区切りを示すだけでよく、目立たせる場所ではない。
  */
  border-bottom: 1px solid var(--line);
}

/*
  マーカー。**黄色のベタ塗りをやめる。**
  蛍光ペンで塗った面は、記事の中でいちばん強い色になってしまう。
  下に細い線を引くだけにすると、拾い読みでは引っかかり、
  通しで読むときは邪魔にならない。（.md の ==ここ== が変換される）
*/
.rich mark {
  background: linear-gradient(transparent 62%, #FFF0A0 62%);
  color: inherit; font-weight: 800; padding: 0 1px;
}

/*
  記事の先頭のアイキャッチ。一覧と同じ絵を出して、開いた記事を照合できるようにする。
  本文（.rich）の外に置くので、本文の最大幅（42em）に縛られず全幅で出る。
*/
/*
  **面の左右いっぱいまで広げる。**
  白い面の内側の余白（30px）の中に収めていたので、記事の中の他の要素と
  同じ幅で並び、絵として立っていなかった。お手本（ラッコ手帳）は
  題名の下に、面の端から端まで入れている。
  余白のぶんだけ外へ出す（負のマージン）。
*/
.art-eye { margin: 22px -30px 6px; }
.art-eye img { display: block; width: 100%; height: auto; }

/* 札と日付。題名の下に、小さく横並びで */
.art .meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 12.5px; color: var(--soft); margin: 14px 0 0;
  padding-bottom: 0; border-bottom: none;
  font-variant-numeric: tabular-nums;
}
.art .meta .upd {
  background: var(--cbg, var(--alt)); color: var(--c, var(--accent));
  border-radius: 4px; padding: 3px 10px; font-weight: 700;
}
.art .meta .by { color: var(--soft); }
.art .meta .by::before { content: "／"; margin-right: 12px; color: var(--line); }

.cat-h { font-size: 26px; margin: 8px 0 4px; color: var(--c); letter-spacing: -0.01em; }

/*
  本文。**1行の長さを抑える。** 2段組の左は広くなりがちで、
  そのまま流すと目が行末から行頭に戻れなくなる。
*/
/*
  本文。**面の幅いっぱいに流す。**
  以前は42em（672px）で頭打ちにしていたが、面が広くなると右側だけが白く残り、
  見出しの下線や帯だけが面の縁まで伸びて、行が途中で切れているように見えた。
  面そのものを830pxに絞ってあるので、ここで重ねて絞る必要はない
  （770px＝約48em。お手本と同じ）。
*/
.rich { max-width: none; }
.rich > * { margin: 0 0 1.25em; }
.rich p, .rich li { font-size: 16px; line-height: 1.95; }

/*
  ── 本文に入れる画像 ───────────────────────────
  ルールで「1記事につき3枚以上」と決めた（docs/seo-rules.md）。
  **その画像に、これまでスタイルが1つも当たっていなかった。**
  実寸1,200pxのまま置かれて、スマホでは記事の面ごと画面からはみ出していた。

  枠線を細く付けるのは、管理画面の写真が白地だからで、
  付けないと本文の中に溶けて「どこからどこまでが画像か」が分からなくなる。
*/
/*
  **高さで頭打ちにする。幅ではない。**
  本文に入れる画像は、管理画面やスマホの写真なので**ほとんどが縦長**
  （`hero-serp.png` は 940×1408、`flow-p*.jpg` は 295×474）。
  幅100%で入れると、770pxの本文幅では高さが800〜1,240pxになり、
  1枚で画面を丸ごと占める。実際 `hero-serp.png` がそうなっていた。

  高さを440pxで止めれば、縦長でも横長でも**画面に占める大きさが揃う。**
  幅は縦横比に従って勝手に決まるので、絵ごとに指定しなくてよい。
*/
.rich img {
  display: block; max-width: 100%; width: auto;
  max-height: 440px; height: auto;
  border: 1px solid var(--line); border-radius: 8px;
  margin: 0 auto;
}
/* 画像だけの段落は、上下に空きを作って本文と区切る */
.rich p:has(> img:only-child) { margin: 2em 0 2.2em; }
/*
  ── 見出し ────────────────────────────────
  **色は使う。ただし記事ごとに変えない。**
  もともとは H2 の帯がカテゴリ色（--c）だったので、5本並べば5色になり、
  1本の記事の中でも帯・目次・囲みがそれぞれ色を持って散らかっていた。
  かといって全部を紺と灰色にすると、今度は白黒すぎて読む気配が出ない。

  折衷として、**色はブランドの4色に固定する。**
    紺 --navy … 見出しと帯
    水色 --sky … 節の目印、線
    ティール --accent … リンク、要点の囲み
    黄 #FFF3A8 … マーカー
  記事が何本増えても、この4色より増えない。
*/
/*
  H2の帯。**面は水色、文字は紺。**
  紺のベタ塗りに白抜きだと、5,000字の記事にh2が10個並んだとき、
  濃い帯が10本入って誌面が重くなる。面を水色に落とすと、
  章の切れ目としては十分に引っかかりつつ、読み通しても疲れない。
  左端だけ紺の線を残して、そこが章の始まりだと示す。
*/
.rich h2 {
  position: relative;
  font-size: 21px; line-height: 1.55; font-weight: 800;
  color: var(--navy); background: #D6EAF2;
  letter-spacing: 0.01em;
  margin: 3em 0 1.2em; padding: 15px 22px 15px 26px;
  border-radius: 6px;
  scroll-margin-top: 20px;
}
.rich h2::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; background: var(--navy); border-radius: 6px 0 0 6px;
}
/*
  H3は帯にしない。**同じ形にすると階層が消える。**
  左に水色の太い縦線を引いて、H2の帯の「左端の水色」と揃える。
*/
.rich h3 {
  font-size: 18.5px; line-height: 1.6; font-weight: 800;
  color: var(--navy);
  margin: 2.4em 0 0.8em; padding: 3px 0 3px 14px;
  border-left: 5px solid var(--sky);
  scroll-margin-top: 20px;
}
/* 記事の1つ目のH2だけ、上の空きを詰める（目次のすぐ下に来るため） */
.rich .toc + h2 { margin-top: 1.8em; }

/*
  ── 目次 ─────────────────────────────────
  読む前に全体像を渡す。**開閉できるが、既定は開く。**
  閉じて置くと、ほとんどの人は開かないまま読み進めてしまう。
  開閉はJavaScriptを使わず checkbox で作っている（読み込みを増やさない）。
*/
/*
  ── 目次 ─────────────────────────────────
  **目立たせない。**
  紺の帯を載せていたが、記事の中でいちばん濃い面が冒頭に来るので、
  本文より目次のほうが目に入っていた。目次は本文へ渡すための案内板で、
  ここで足を止めさせる場所ではない。
  お手本（ラッコ手帳）も、薄いグレーの箱に細い線があるだけだった。
*/
.toc {
  border: 1px solid #E3E7EA; border-radius: 4px;
  background: #F7F8F9; padding: 0; margin: 2em 0 2.6em;
  overflow: hidden;
}
.toc-t { position: absolute; opacity: 0; pointer-events: none; }
/*
  見出し。**色の帯をやめる。**
  目次は本文へ渡すための案内板であって、そこで目を止めさせる場所ではない。
  帯にすると、記事でいちばん色の濃い面が冒頭に来て、本文より目立ってしまう。
  下に線を1本引くだけで、始まりは十分に伝わる。
*/
.toc-h {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  color: var(--ink);
  font-size: 14.5px; font-weight: 800; letter-spacing: 0.04em;
  padding: 16px 22px 6px;
}
/* [ 非表示 ] / [ 表示 ]。いまの状態ではなく「押すとどうなるか」を出す */
.toc-h::after {
  content: "[ 非表示 ]";
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: #9AA5AB;
}
.toc-t:not(:checked) ~ .toc-h::after { content: "[ 表示 ]"; }
/* 閉じているときは下の余白も詰める（空の箱が残らないように） */
.toc-t:not(:checked) ~ .toc-h { padding-bottom: 16px; }
.toc-t:not(:checked) ~ .toc-l { display: none; }
.toc-t:focus-visible ~ .toc-h { outline: 2px solid var(--navy); outline-offset: -4px; }

.toc-l, .toc-sub { list-style: none; margin: 0; padding: 0; }
.toc-l { padding: 18px 22px 20px; }
/* H2は太字でそのまま。番号も記号も付けない（本文の見出しと対応が取れる） */
.toc-l > li { margin-top: 10px; line-height: 1.6; }
.toc-l > li:first-child { margin-top: 0; }
.toc-l > li > a {
  color: var(--ink); text-decoration: none;
  font-size: 15.5px; font-weight: 800;
}
.toc-l > li > a:hover { color: var(--c, var(--accent)); text-decoration: underline; }

/* H3は一段下げて「›」を付ける。字の太さも落として階層を出す */
.toc-sub { margin: 8px 0 12px; }
.toc-sub li { position: relative; padding-left: 20px; margin-top: 7px; }
.toc-sub li::before {
  content: "›"; position: absolute; left: 4px; top: -1px;
  color: var(--soft); font-size: 15px;
}
.toc-sub a { font-size: 14.5px; font-weight: 400; color: var(--ink); text-decoration: none; }
.toc-sub a:hover { color: var(--c, var(--accent)); text-decoration: underline; }

/*
  ── 渡辺さんの一言 ───────────────────────────
  **一次情報の置き場所。** 地の文に混ぜると、どこが本人の経験か分からなくなる。
  吹き出しの形にすることで「これは人が実際に見聞きしたこと」だと伝わる。
  顔は写真を使わず、ブランド色の丸に人型を描く（写真を借りてこない方針のまま）。
*/
.say { display: flex; align-items: flex-start; gap: 16px; margin: 2.2em 0; }
.say-who {
  flex: none; width: 68px; display: flex; flex-direction: column;
  align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; color: var(--navy);
}
.say-face {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--navy); position: relative; overflow: hidden;
}
/* 頭と肩。丸だけだと何の絵か分からないので、人の形にする */
.say-face::before {
  content: ""; position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: var(--sky);
}
.say-face::after {
  content: ""; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  width: 40px; height: 30px; border-radius: 20px 20px 0 0; background: var(--sky);
}
/*
  ── 吹き出しの中身 ──────────────────────────
  **面は塗らない。白のまま、細い線で囲うだけ。**
  以前は薄い水色や薄いグレーで塗っていたが、5,000字の記事に
  塗った箱がいくつも並ぶと、本文より箱のほうが目に入る。
  お手本（ラッコ手帳）も、吹き出しは白地に細いグレーの枠だけだった。
*/
.say-body {
  position: relative; flex: 1; min-width: 0;
  background: var(--bg); border: 1px solid #D8E0E4;
  border-radius: 10px; padding: 15px 19px;
}
/*
  左向きの三角。**枠線があるので、三角も2枚重ねる。**
  1枚（面の色だけ）だと、線で囲った箱から色のない角が飛び出して見える。
  外側に線と同じ色、内側に白を、1pxずらして重ねる。
*/
.say-body::before, .say-body::after {
  content: ""; position: absolute; top: 19px;
  border: 9px solid transparent; border-left: 0;
}
.say-body::before { left: -9px; border-right-color: #D8E0E4; }
.say-body::after  { left: -8px; border-right-color: var(--bg); }
/*
  マスコットの吹き出し。**渡辺さんのものとは別扱いにする。**
  渡辺＝実際に見聞きしたこと、マスコット＝用語の補足や注意。
  同じ見た目にすると、どちらが一次情報か分からなくなる。
  面を薄い水色にして、案内の欄だと形で分かるようにする。
*/
/*
  マスコットは**丸く抜く。**
  全身のまま置くと、渡辺さん側の丸いアイコンと形が揃わず、
  2つの吹き出しが別々の作りに見えていた。お手本（ラッコ手帳）も丸。

  画像を切り抜いた別ファイルは作らない。**表示のときだけ丸で抜く。**
  object-position を上寄りにして、顔が円の中心に来るようにしてある
  （全身画像の上半分に顔がある）。
*/
.say-face.m {
  width: 62px; height: 62px; border-radius: 50%;
  background: #EAF3F8; border: 2px solid #DCE9EF;
  display: block;
}
/*
  名前の欄。**「レビューデス／ク」と割れないだけの幅を持たせる。**
  渡辺（2文字）に合わせた68pxのままだと、マスコット側の長い名前が折れる。
  名前が決まって短くなれば、ここは自然に収まる。
*/
.say.bot .say-who {
  width: 88px; color: var(--accent2); font-size: 11px; line-height: 1.4;
}
/* マスコット側は枠の色だけ変える。中は渡辺さんと同じく白のまま */
.say.bot .say-body { border-color: #BFD9E6; }
.say.bot .say-body::before { border-right-color: #BFD9E6; }
.say.bot .say-body p { font-weight: 400; }

.say-body > *:first-child { margin-top: 0; }
.say-body > *:last-child { margin-bottom: 0 !important; }
.say-body p { font-size: 15px !important; font-weight: 700; line-height: 1.9; }

/*
  ── 囲みボックス ───────────────────────────
  **タブ状の見出しと色枠をやめる。**
  以前は種類ごとに枠の色・面の色・タブの色が変わっていて、
  1本の記事に3色4色が同時に出ていた。囲みは「別扱いだ」と伝われば足りる。

  枠線を1本、面を薄いグレーに落として、見出しは中の1行目として置く。
  種類の差は**左の縦線の色だけ**で出す。差し色は1つに絞る。
*/
.cal {
  border: 1px solid #C9DDE6; border-left: 5px solid var(--sky);
  border-radius: 6px; background: #F2F8FB;
  padding: 20px 22px; margin: 2.4em 0 2em;
}
/* 見出しは種類の色。ここが記事の中で唯一「色で分かれる」ところ */
.cal-h {
  display: flex; align-items: center; gap: 8px;
  color: var(--accent2);
  font-size: 14px; font-weight: 800; letter-spacing: 0.02em;
  margin: 0 0 10px !important;
}
.cal-h::before { content: "＋"; font-size: 13px; }
.cal > *:last-child { margin-bottom: 0 !important; }
.cal p, .cal li { font-size: 15.5px !important; }
.cal ul, .cal ol { padding-left: 1.3em; }
.cal li { margin-bottom: 0.7em; }
.cal li::marker { color: var(--sky); }

/* 要点はティール、注意は橙。3種類より増やさない（迷って手が止まる） */
.cal.point { border-left-color: var(--accent); border-color: #B8DBDF; background: #EFF8F9; }
.cal.point .cal-h { color: var(--accent); }
.cal.point .cal-h::before { content: "☑"; }
.cal.point li::marker { color: var(--accent); }
.cal.warn  { border-left-color: #E0913C; border-color: #F0DCBB; background: #FDF7EC; }
.cal.warn  .cal-h { color: #B9721F; }
.cal.warn  .cal-h::before { content: "！"; }
.cal.warn  li::marker { color: #E0913C; }

/* 質問を置く場所。地の文と混ざらないように */
.rich blockquote {
  padding: 14px 20px; background: var(--alt);
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  color: var(--ink);
}
.rich blockquote p:last-child { margin-bottom: 0; }

/* 例文。等幅にすると「入力するもの」に見えるので、そのまま読める字にする */
.rich pre {
  background: var(--alt); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 18px; overflow-x: auto; font-size: 14.5px; line-height: 1.9;
  font-family: inherit; white-space: pre-wrap;
}
.rich code {
  background: var(--alt); padding: 2px 6px; border-radius: 4px;
  font-size: 14px; font-family: inherit;
}
.rich pre code { background: none; padding: 0; }

.rich table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rich th, .rich td {
  border: 1px solid var(--line); padding: 11px 14px; text-align: left; vertical-align: top;
}
/* 見出し行は紺の面。表がどこから始まるかが、拾い読みでも分かる */
.rich th {
  background: var(--navy); color: #fff; font-weight: 800;
  border-color: var(--navy);
}
/* 1行おきに薄く敷く。横に長い表で、目が隣の行へ滑るのを止める */
.rich tbody tr:nth-child(even) td { background: #F5FAFB; }
/* 左の列は見出しの役。太字にして、値の列と役割を分ける */
.rich tbody td:first-child { font-weight: 700; color: var(--navy); }

/*
  リストの記号。**ここも色を持たせる。**
  黒い点が並ぶだけだと、本文と地続きに見えて箇条書きとして立たない。
*/
.rich > ul > li::marker { color: var(--accent); }
.rich > ol > li::marker { color: var(--accent); font-weight: 800; }
.rich ul, .rich ol { padding-left: 1.4em; }
.rich li { margin-bottom: 0.5em; }

/*
  ── あわせて読む ───────────────────────────
  枠で囲って「関連記事」の札を右上に出す。**本文の続きに見せない。**

  **.cards は一覧用に2列グリッドになっている。**
  ここで子だけを横並びに変えると、親のグリッドが列幅を決めたまま残り、
  タイトルが1文字ずつ縦に折り返した（実際そうなった）。
  親のグリッドごと1列に戻してから組む。
*/
/*
  ── 関連記事 ────────────────────────────────
  **一覧のカードと同じ形にする。**
  以前は色枠で囲って右上に「関連記事」の札を載せ、中は横並びの一覧だった。
  記事の末尾でいちばん濃い枠が出て、しかも一覧のカードと形が違うので、
  同じサイトの中で記事の見せ方が2種類ある状態になっていた。

  枠も札も外して、絵の上・題名の下だけにする。囲まなくても、
  見出し（関連記事）があれば何の並びかは分かる。
*/
.more { margin: 56px 0 0; }
.more .cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 24px; border: 0; padding: 0;
}
.more .card a {
  display: flex; flex-direction: column; height: 100%;
  background: none; border: 0; padding: 0;
}
.more .card a > * { min-width: 0; }
.more .card .ph { border: 1px solid var(--line); border-radius: 6px; margin: 0; }
.more .card .t {
  font-size: 15px; font-weight: 800; margin: 11px 0 0;
  line-height: 1.6; white-space: normal;
}
.more .card .t-sub { font-size: 0.8em; margin-top: 4px; }
.more .card .k, .more .card .d, .more .card .m, .more .card .s { display: none; }

.more h2 {
  font-size: 17px; font-weight: 800; color: var(--navy);
  letter-spacing: 0.01em; margin: 0 0 16px;
  padding: 0 0 0 12px; border-left: 4px solid var(--sky); line-height: 1.5;
}

/*
  ── 追従バー（記事のページだけ）────────────────────
  **薄くする。** LPの追従バーは120pxあるが、あれは1枚もののLPだから成り立つ。
  記事は本文を読ませる場所なので、画面の下を厚く塞ぐと読む邪魔になる。
  高さは60px前後に抑えて、そのぶん body の下に同じだけ余白を作る
  （作らないと、記事の末尾がバーの下に隠れる）。
*/
.mg-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(226, 246, 233, 0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(140, 200, 165, 0.5);
  padding: 9px 20px;
}
.mg-cta .inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 22px;
}
.mg-cta .t { margin: 0; line-height: 1.3; text-align: right; }
.mg-cta .s {
  display: block; font-size: 12px; font-weight: 700; color: #1E6B4E; letter-spacing: 0.02em;
}
.mg-cta .s::before { content: "＼"; margin-right: 5px; }
.mg-cta .s::after { content: "／"; margin-left: 5px; }
.mg-cta .t b {
  display: block; font-size: 19px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.01em; margin-top: 1px;
}
.mg-cta a {
  flex: none; background: #22C55E; color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 800; padding: 12px 26px; border-radius: 999px;
  white-space: nowrap; box-shadow: 0 3px 0 #1a9b47;
  transition: transform 0.12s ease;
}
.mg-cta a:hover { transform: translateY(-1px); }
/* バーの高さぶん、記事の下に空きを作る */
body:has(.mg-cta) { padding-bottom: 78px; }

/* ── フッター ──────────────────────────── */
.mg-foot {
  border-top: 1px solid var(--line); padding: 30px 0 40px;
  font-size: 13.5px; color: var(--soft);
}
.mg-foot a { color: var(--soft); text-decoration: none; margin-right: 18px; }
.mg-foot a:hover { text-decoration: underline; }
.mg-foot .c { margin-top: 18px; font-size: 12.5px; }

/* ── 狭い画面 ─────────────────────────── */
@media (max-width: 860px) {
  /*
    ヘッダーの3分割をやめる。**看板を中央に置いたまま横に3つ並べると、
    両端のロゴと戻り先が潰れて1文字ずつ折り返す。**
    ロゴと戻り先を1行目に、看板を2行目に落とす。
  */
  .mg-top .wrap {
    grid-template-columns: 1fr auto; gap: 10px 16px;
    padding-top: 14px; padding-bottom: 16px;
  }
  .mg-catch { grid-column: 1 / -1; text-align: left; }
  .mg-catch .c { font-size: 11.5px; }
  .mg-catch .t { font-size: 19px; }
  .mg-logo { font-size: 20px; }
  .mg-logo span { font-size: 12px; letter-spacing: 0.18em; }
}
@media (max-width: 560px) {
  /*
    ── スマホの頭 ────────────────────────────
    お手本（xserver.ne.jp/blog）と同じ組み方にする。

        誌名（大きく）              ○ ← 丸いボタン
        何を書いている場所かの説明（2行）

    以前は ロゴ／看板／説明文／戻り先 が縦に4段積みで、
    記事にたどり着く前に1画面ぶん使っていた。
    **看板（「Googleマップと口コミの、実際のところ」）は落とす。**
    すぐ下の説明文とほぼ同じことを言っていて、狭い画面で2つは要らない。
  */
  .mg-top .wrap {
    grid-template-columns: 1fr auto;
    align-items: start; gap: 7px 12px;
    padding-top: 14px; padding-bottom: 14px;
  }
  .mg-logo { grid-column: 1; font-size: 21px; }
  .mg-logo span { font-size: 11.5px; letter-spacing: 0.16em; }
  /* 説明文は誌名の下。ボタンの下には回り込ませない */
  .mg-catch { grid-column: 1; text-align: left; }
  .mg-catch .t { display: none; }
  .mg-catch .c {
    display: block; font-size: 13px; font-weight: 700;
    color: var(--navy); line-height: 1.55;
  }
  /*
    右上の丸いボタン。文字を消して矢印だけにする。
    「サービスのご案内 →」は狭い画面では2行になり、誌名を押し潰していた。
    行き先は変えていないので、押せば今までどおりサービスの案内へ行く。
  */
  .mg-back {
    grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end;
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    background: linear-gradient(140deg, var(--sky), var(--accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 0; color: #fff;
    box-shadow: 0 2px 8px rgba(13, 125, 140, 0.28);
  }
  .mg-back::after { content: "→"; font-size: 19px; font-weight: 800; }
  .mg-back:hover { color: #fff; }
}

@media (max-width: 900px) {
  /* 2段組をやめる。右の欄は探す場所なので、記事の後ろでよい */
  .cols { grid-template-columns: 1fr; gap: 34px; }
  /* 3列は1枚が小さくなりすぎる。2列に落とす */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr; gap: 20px; }
  /* 目的別は5つ横並びだと札の文字が折り返す。3列にして2段にする */
  .fcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
  .cta { flex-direction: column; align-items: flex-start; padding: 26px; }
  .cta a { align-self: stretch; text-align: center; }
  .side { position: static; }
  .hero .t { font-size: 20px; }
  .art h1 { font-size: 25px; }
  .rich { max-width: none; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .mg-cats .wrap { padding: 0 18px; }
  .mg-main { padding: 24px 0 56px; }
  /*
    ── スマホでも2列のまま ──────────────────────
    以前は「画像を左に116px、文字を右に」の横並び1列にしていた。
    絵が小さすぎて何の記事か読み取れず、アイキャッチを作った意味が消えていた。

    お手本（ラッコ手帳）はスマホでも**2列のグリッドを崩していない。**
    日本語の記事一覧では、これが標準的な形になっている。
    2列にすると1枚が小さくなるが、**絵が上・題名が下**の並びは保てるので、
    絵で目を留めて題名で決める、という読み方の順が壊れない。
  */
  .cards, .cards.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card a { padding: 8px 8px 12px; border-radius: 8px; }
  .card .t { font-size: 13px; line-height: 1.55; margin: 9px 0 0; }
  .card .t-sub { font-size: 0.82em; margin-top: 4px; }
  .card .ph { border-radius: 5px; }

  /* 目的別も2列。1列にすると縦に長くなり、一覧として見渡せなくなる */
  .fcards { gap: 1px; }
  .fcards li { flex: 1 1 42%; }
  .fcards a { padding: 15px 8px; gap: 3px; }
  .fcards .q { font-size: 10px; }
  .fcards .n { font-size: 13px; }
  .find { padding: 34px 0 38px; margin: 40px 0; }
  .sec { font-size: 15.5px; margin: 26px 0 12px; padding-left: 10px; border-left-width: 3px; }
  .cta { padding: 20px; gap: 16px; }
  .cta h2 { font-size: 17px; }
  .cta p { font-size: 13.5px; }
  .cta-m { width: 72px; margin: -8px 0 -10px; }
  /*
    ── カテゴリは全部並べる ─────────────────────
    **横に送る形をやめる。**
    6つのうち画面に出るのは4つで、残り2つ（Googleマップ・基本）は
    横に送らないと見えなかった。**送れることに気づかなければ、無いのと同じ。**
    6つは 3列×2段でちょうど収まる。

    区切り線は border ではなく box-shadow で引く。
    border-bottom は「いま見ている場所」の下線に使っているので、
    そこへ区切り線を足すと2つの役割が混ざる。
  */
  .mg-cats .wrap {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible; padding: 0;
  }
  /*
    **6つを1段に収める。** お手本も1段だった。
    2段にすると帯の厚みが倍になり、記事にたどり着く前の高さが増える。
    そのぶん1つあたりは65pxしかないので、字は小さく、名前は2行に折れてよい。
  */
  .mg-cats a {
    min-width: 0; font-size: 9.5px; letter-spacing: -0.01em;
    padding: 9px 2px 8px; gap: 4px; line-height: 1.35;
    white-space: normal; word-break: auto-phrase;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.45);
  }
  .mg-cats a:last-child { box-shadow: none; }
  /* 2行に折れる名前を中央に揃える（折り位置は blog-build.mjs の CATS.br で決めている） */
  .mg-cats a > span { display: block; text-align: center; }
  /* 横に流していたときの縦線は要らない（box-shadowで引き直している） */
  .mg-cats a + a::before { content: none; }
  .mg-cats .ic { width: 17px; height: 17px; }

  /* 柱は記事の後ろへ。紺の箱だけは、そこで目が留まるので幅いっぱいに出す */
  .lead { margin-top: 40px; padding: 0 18px 18px; }
  .lead-m { width: 112px; margin-top: -40px; }
  /*
    **紺の箱を2つ続けない。**
    一覧では本文の最後が「いまの集客力を、1分で採点します」（紺）で、
    その真下に柱の「レビューデスクとは」（紺）が来る。横に並んでいる
    ときは別々の役割だが、縦に積むと**同じ色・同じボタンが連続する。**
    直前に同じ案内があるページでは、柱のほうを出さない。
  */
  .mcol:has(.cta) + .side .lead { display: none; }
  .mg-mast { margin: -24px 0 26px; }
  .mg-mast .wrap { padding-top: 24px; padding-bottom: 22px; }
  .mg-mast h1 { font-size: 20px; }
  .mg-mast p { font-size: 13.5px; margin-top: 10px; }
  .art h1 { font-size: 22px; }
  .rich p, .rich li { font-size: 15.5px; }
  .rich h2 { font-size: 18.5px; padding-left: 11px; border-left-width: 4px; }
  .rich h3 { font-size: 16px; }
  .rich pre { font-size: 13.5px; padding: 13px 14px; }
  /*
    追従バーは、狭い画面ではもっと薄くする。
    看板を1行に畳んで、ボタンだけ押せる大きさを残す。
  */
  .mg-cta { padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); }
  .mg-cta .inner { gap: 12px; }
  .mg-cta .s { display: none; }
  .mg-cta .t b { font-size: 14.5px; }
  .mg-cta a { font-size: 14px; padding: 11px 18px; }
  body:has(.mg-cta) { padding-bottom: 64px; }

  /* 関連記事もカードと同じ2列のまま */
  .more .cards { gap: 16px 12px; }
  .more .card .t { font-size: 13px; margin-top: 9px; }

  /* 図は狭い画面ではもう一段小さく。440pxのままだと1枚で画面が埋まる */
  .rich img { max-height: 300px; }
  /*
    ── 記事の面を、画面の端まで広げる ─────────────────
    左右に18pxの余白があり、そこに地の水色が細く出ていた。
    **その帯には何も入っていない。** 狭い画面では、読むための幅を
    36px削ってまで残す意味がない（お手本のラッコ手帳も端まで白い）。

    面そのものを外へ出して、内側の余白で文字の入る位置を作る。
  */
  .art.sheet {
    margin-left: -18px; margin-right: -18px;
    padding: 20px 18px 26px;
    border-radius: 0; border-left: 0; border-right: 0;
  }
  /* アイキャッチは面の端から端まで（内側の余白ぶんだけ外へ出す） */
  .art-eye { margin: 16px -18px 6px; }

  .rich table { font-size: 12.5px; }
  .rich th, .rich td { padding: 8px 8px; }
  /*
    **3列の表が画面に収まるようにする。**
    列の最低幅を 8em にしていたので、3列では 390px の画面に入らず、
    右の1列が切れたまま出ていた。横に送れるようにはしてあるが、
    切れていること自体が見えないので、そもそも送らせないほうがよい。
    5.5em まで詰めると3列が収まる。4列以上のときだけ横送りになる。
  */
  .rich table th, .rich table td { min-width: 5.5em; }

  /*
    目次は指で押す。行の間隔を広げないと、隣の項目を押してしまう。
    ただし**左の字下げは詰める。** 34px下げていたので、狭い画面では
    見出しが2〜3行に折り返して、目次のほうが本文より読みにくくなっていた。
  */
  .toc { border-radius: 8px; }
  .toc-h { padding: 12px 16px; font-size: 14px; }
  .toc-l { padding: 14px 16px 16px; }
  .toc-l > li { margin-top: 11px; padding-left: 0; }
  .toc-l > li > a { font-size: 14px; }
  .toc-sub li { margin-top: 8px; padding-left: 16px; }
  .toc-sub a { font-size: 13px; }

  /*
    日付と書き手。狭い画面では2行になり、行頭に「／」だけが残っていた。
    折り返す前提にして、区切りの記号を消す。
  */
  .art .meta .by { flex-basis: 100%; }
  .art .meta .by::before { content: none; }

  .cal { padding: 13px 15px; }
  .cal p, .cal li { font-size: 14.5px !important; }

  /* 前後の記事は縦に積む。横2列だとタイトルが2文字ずつ折り返して読めない */
  .pn { grid-template-columns: 1fr; margin-top: 36px; }
  .pn .n, .pn .p { grid-column: 1; text-align: left; }

  /* 日付・更新日・書き手は詰めて1〜2行に収める */
  .art .meta { gap: 8px; font-size: 12px; }
  .art .meta .by::before { margin-right: 8px; }
}

/*
  表がはみ出す場合の逃げ道。**縮小せず、横に送れるようにする。**
  文字を小さくして収めると、スマホでは読めない大きさになる。
*/
.rich table { display: block; overflow-x: auto; white-space: nowrap; }
.rich table th, .rich table td { white-space: normal; min-width: 8em; }