@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   kawaruzo ブランドレイヤー（承認済み配色 2026-07-16 / Hex変更禁止）
   ⚠ 禁則: lime / lime-dark / pink を「地の上のテキスト色」に使わない。
          面・罫・マーカー地・CTA背景 のみ。ティント地の上の文字は navy。
   ========================================================================== */

:root{
  --kw-lime:#B4D335;   --kw-lime-dark:#8FB61A;
  --kw-pink:#E5388A;   --kw-pink-dark:#CE2076;
  --kw-navy:#26304A;   --kw-navy-soft:#5C6478;
  --kw-orange:#EE7A1F; --kw-yellow:#F3CE1D;
  --kw-line:#E9EBE3;   --kw-bg:#FBFCF8;  --kw-surface:#fff;
  --kw-line-green:#06C755;

  /* CTAの赤（2026-09-01 社長「押したくなる色。赤色系統にして」）。
     ⚠ **承認10色のHexは1つも変えていない。** これは承認色2つの中間から起こした派生色:
       オレンジ #EE7A1F と ピンク濃 #CE2076 を 40:60 で混ぜた値。
       （--neutral や職種ティントと同じ「承認色からの派生」の作り方）
     ⚠ 白文字とのコントラストは **4.23**。既存CTA（白×ピンクグラデ 3.99）を上回る。
       20px＋太字＝大文字基準3:1で成立させる前提は同じ。**サイズを下げないこと。**
     ⚠ この赤を「地の上の文字色」に使わない。**CTAの地・面・罫だけ**（ライム/ピンクと同じ扱い）。 */
  /* ⚠ **現在どこにも使っていない**（2026-09-01 に一度CTAへ入れたが、
     社長判断で自社枠と同じピンクグラデに揃えたため外した）。
     赤に戻したくなったときのために定義だけ残す。使うなら .kw-vCard__cta の background を差し替える。 */
  --kw-cta-red:#DB4453;  --kw-cta-red-dark:#B93340;

  /* 職種アクセント（罫）— 2026-08-12 に各職種のFV（KAWARUZO名義）の主役色へ合わせ直した。
     承認10色のHexは変えていない。割り当てだけを入れ替えている。
       栄養士 = lime（FVと一致・変更なし）
       介護   = #3AA6D0（FVがブルー主体。旧: orange）
       看護師 = pink（FVがピンク主体。旧: #3AA6D0）※面と罫のみ・文字色には使わない
       保育士 = yellow（FVにも黄の要素あり・変更なし）
     ⚠ orange #EE7A1F は職種アクセントから外れたが、パレットからは削っていない。 */
  --kw-accent-eiyoushi:#B4D335; --kw-accent-kaigo:#3AA6D0;
  --kw-accent-kango:#E5388A;    --kw-accent-hoiku:#F3CE1D;

  /* 職種ティント（面のみ）。上のアクセントを薄めた派生色。
     ⚠ #FCE8F1 は看護師をピンクに変えたときに新しく起こした淡色（承認10色の派生）。 */
  --kw-tint-eiyoushi:#F1F6E2; --kw-tint-kaigo:#E5F1F7;
  --kw-tint-kango:#FCE8F1;    --kw-tint-hoiku:#FBF6DC;

  /* 現在の職種の「地」と「罫」。職種クラスが無いページの既定値。 */
  --kw-tint:var(--kw-surface);
  --kw-accent:var(--kw-lime-dark);

  /* 見出し＝明朝 / 本文＝ゴシック（本文は SWELL の body_font_family=notosans） */
  --kw-font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
}

/* --------------------------------------------------------------------------
   1. 見出し＝明朝（本文はゴシックのまま）
   ⚠ ここで color を指定しないこと。SWELLのH2は「--color_htag の地 ＋ 白文字」の
     塗りつぶしデザインで、同じ詳細度のため後勝ちで潰れる（navy地にnavy文字＝不可視）。
     見出しの色は カスタマイザーの color_htag / color_text（どちらも navy）に任せる。
   -------------------------------------------------------------------------- */
.c-postTitle__ttl,      /* 投稿タイトル */
.c-pageTitle,           /* 固定ページ／各種アーカイブのタイトル */
.c-secTitle,
.c-widget__title,
.l-sidebar .wp-block-heading,  /* ブロックウィジェットの見出し */
.l-articleBottom__title,
.p-postList__title,
.c-catchphrase,
.post_content h1,
.post_content h2,
.post_content h3,
.post_content h4{
  font-family:var(--kw-font-serif);
  font-weight:700;
}
/* 明朝は字面が細いので、字間を本文よりわずかに締める */
.c-postTitle__ttl,
.post_content h2,
.post_content h3{ letter-spacing:.01em; }

/* --------------------------------------------------------------------------
   1.5 見出しの「重さ」を落とす
   SWELL既定のH2は navy の全面塗り。連続すると誌面が「箱の積み重ね」に見え、
   カード・ボックスと重さが競合してページが整わない。
   参考サイトの誌面感に寄せて "明朝＋ライムの罫" に置き換える。
   ⚠ 面（navy地）を捨てる代わりに、文字は navy（12.7:1）なのでコントラストは上がる。
   -------------------------------------------------------------------------- */
.post_content h2{
  background:transparent;
  color:var(--kw-navy);
  padding:0 0 .45em;
  margin:3.5rem 0 1.25rem;
  border-bottom:3px solid var(--kw-lime);
  border-radius:0;
  font-size:clamp(1.3rem, 3.2vw, 1.65rem);
  line-height:1.5;
}
/* SWELLがH2に付ける装飾の擬似要素を消す（塗りを外すと線だけが浮くため） */
.post_content h2::before,
.post_content h2::after{ content:none; }

.post_content h3{
  margin:2.5rem 0 .9rem;
  padding:0 0 .3em;
  font-size:clamp(1.1rem, 2.6vw, 1.3rem);
}

/* 本文の行間と段落間（日本語は行間を広めに取ると一気に読みやすくなる） */
.post_content p{ line-height:1.9; }
.post_content > p{ margin:0 0 1.5em; }
.post_content ul, .post_content ol{ line-height:1.9; }

/* --------------------------------------------------------------------------
   2. リンク＝navy文字 ＋ ライム濃の下線（色は"罫"として使う＝禁則に抵触しない）
   -------------------------------------------------------------------------- */
/* ⚠ カード全体をリンクにしている箇所（.kw-verticalCard__link）は除外する。
     除外し忘れるとカード内の見出し・説明文まで下線だらけになる。
   ⚠⚠ 2026-09-01 追加: `.kw-vpick__link` `.kw-byJob__head` の除外漏れで、
      職種セレクタのカードにライムの下線が乗っていた（詳細度 0,4,1 対 0,1,0 で負ける）。
      社長指摘「ここって記事の押すところじゃないの？」＝**カードが記事リンクに見えていた**。
      **カード型のリンクを新設したら、必ずこの除外リストに足すこと。** */
.post_content a:not(.kw-cta):not(.wp-block-button__link):not(.kw-verticalCard__link):not(.kw-vpick__link):not(.kw-byJob__head):not(.kw-vCard__cta):not(.kw-cSwitch__link):not(.kw-picks__link){
  color:var(--kw-navy);
  text-decoration:underline;
  text-decoration-color:var(--kw-lime-dark);
  text-decoration-thickness:2px;
  text-underline-offset:.2em;
}
.post_content a:not(.kw-cta):not(.wp-block-button__link):not(.kw-verticalCard__link):not(.kw-vpick__link):not(.kw-byJob__head):not(.kw-vCard__cta):not(.kw-cSwitch__link):not(.kw-picks__link):hover{
  text-decoration-color:var(--kw-navy);
}

/* --------------------------------------------------------------------------
   3. CTA＝ピンクグラデ・白文字・20px太字
   ⚠ 白 on ピンクグラデ＝3.989:1。WCAG「大きい文字」基準(3:1)で成立させる前提が
      「20px以上かつ太字」。この font-size / font-weight を下回らせないこと。
   -------------------------------------------------------------------------- */
.kw-cta,
.wp-block-button.is-style-kw > .wp-block-button__link{
  display:inline-block;
  padding:.9rem 1.6rem;
  border-radius:10px;
  background:linear-gradient(var(--kw-pink),var(--kw-pink-dark));
  color:#fff !important;
  font-size:20px;      /* ⚠ 下げない（コントラスト基準の前提） */
  font-weight:700;     /* ⚠ 外さない（同上） */
  line-height:1.5;
  text-decoration:none;
  border:none;
  transition:filter .15s ease, transform .05s ease;
}
.kw-cta:hover,
.wp-block-button.is-style-kw > .wp-block-button__link:hover{ filter:brightness(1.05); color:#fff !important; }
.kw-cta:active,
.wp-block-button.is-style-kw > .wp-block-button__link:active{ transform:translateY(1px); }
.kw-cta:focus-visible,
.wp-block-button.is-style-kw > .wp-block-button__link:focus-visible{
  outline:3px solid var(--kw-navy); outline-offset:2px;
}
.kw-cta--block{ display:block; width:100%; text-align:center; }

/* --------------------------------------------------------------------------
   4. マーカー（地だけ塗る／文字色は変えない）
   -------------------------------------------------------------------------- */
.kw-marker{ background:linear-gradient(transparent 62%, var(--kw-yellow) 62%); }
.kw-marker--lime{ background:linear-gradient(transparent 62%, var(--kw-lime) 62%); }

/* --------------------------------------------------------------------------
   5. 選定基準ボックス（E-E-A-T用・ライム左罫）
   -------------------------------------------------------------------------- */
.kw-criteria{
  border-left:4px solid var(--kw-lime);
  background:var(--kw-surface);
  border-radius:10px;
  padding:1rem 1.25rem;
  margin:1.5em 0;
  color:var(--kw-navy);
}
.kw-criteria__title{
  font-family:var(--kw-font-serif);
  font-weight:700;
  margin:0 0 .5em;
}

/* 注記（「◯年◯月◯日時点」／調査概要） */
.kw-note{
  font-size:.875rem;
  color:var(--kw-navy-soft);
  border-top:1px solid var(--kw-line);
  padding-top:.75em;
  margin-top:1.5em;
}

/* PR表記バー（H1直下固定・広告開示） */
.kw-prbar{
  background:var(--kw-line);
  color:var(--kw-navy);
  font-size:.8125rem;
  padding:.5em .875em;
  border-radius:6px;
  margin:0 0 1.5em;
}

/* --------------------------------------------------------------------------
   6. 職種アクセント（面のみ）
   ⚠ SWELLは body_class() を <body> ではなく内側のラッパー <div> に出力する。
     そのため .category-{slug} は body ではなくラッパーdivに付く（子孫セレクタは効く）。
   category-{slug} は functions.php で「単一投稿」と「職種ハブ固定ページ」にも付与している。
   -------------------------------------------------------------------------- */
/* 職種は「地(--kw-tint)」と「罫(--kw-accent)」の2変数だけを差し替える。
   これを使う側（.kw-vhero / .kw-accentRule / .kw-slot）は職種を知らなくていい。 */
.category-eiyoushi{ --kw-tint:var(--kw-tint-eiyoushi); --kw-accent:var(--kw-accent-eiyoushi); }
.category-kaigo   { --kw-tint:var(--kw-tint-kaigo);    --kw-accent:var(--kw-accent-kaigo); }
.category-kango   { --kw-tint:var(--kw-tint-kango);    --kw-accent:var(--kw-accent-kango); }
.category-hoiku   { --kw-tint:var(--kw-tint-hoiku);    --kw-accent:var(--kw-accent-hoiku); }

.kw-vhero{ background:var(--kw-tint); border-radius:12px; padding:1.5rem; }
.kw-accentRule{ border-top:4px solid var(--kw-accent); }

/* --------------------------------------------------------------------------
   6.5 比較ランキング／各社レビューの部品
   ⚠ 禁則は同じ。ライム・ピンクは面と罫とCTA地のみ。文字は navy / navy-soft。
   -------------------------------------------------------------------------- */

/* 順位バッジ（1位も特別扱いしない＝ピンクはCTA専用） */
.kw-rank{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.5em; padding:.15em .6em;
  background:var(--kw-navy); color:#fff;
  border-radius:999px;
  font-family:var(--kw-font-serif); font-weight:700; font-size:.95rem;
  letter-spacing:.02em;
}

/* 各社セクションのカード */
.kw-service{
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-radius:12px;
  padding:1.25rem 1.5rem;
  margin:2em 0;
}
.kw-service__head{
  display:flex; align-items:center; gap:.75rem;
  padding-bottom:.75rem; margin-bottom:1rem;
  border-bottom:1px solid var(--kw-line);
}
.kw-service__name{
  font-family:var(--kw-font-serif); font-weight:700; font-size:1.25rem;
  margin:0;
}
/* ロゴスロット（各社ロゴ待ち） */
.kw-logoSlot{
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:220px; min-height:64px;
  background:var(--kw-tint); border:1px dashed var(--kw-accent);
  border-radius:8px; color:var(--kw-navy-soft); font-size:.75rem;
}

/* メリット／デメリット（色は罫だけ。赤は承認色に無いので使わない） */
.kw-pros, .kw-cons{
  border-left:4px solid var(--kw-lime);
  background:var(--kw-bg);
  border-radius:8px;
  padding:.9rem 1.1rem;
  margin:1em 0;
}
.kw-cons{ border-left-color:var(--kw-navy-soft); }
.kw-pros__title, .kw-cons__title{
  font-family:var(--kw-font-serif); font-weight:700; margin:0 0 .4em;
}
.kw-pros ul, .kw-cons ul{ margin:0; padding-left:1.2em; }

/* 口コミカード（調査概要とセットでのみ使う＝出典なしで載せない） */
.kw-voice{
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-radius:10px;
  padding:.9rem 1.1rem;
  margin:.75em 0;
  font-size:.9375rem;
}
.kw-voice__meta{ color:var(--kw-navy-soft); font-size:.8125rem; margin:.5em 0 0; }

/* 比較表の◎◯△（記号だけ。色で意味を作らない＝色覚に依存させない） */
.kw-mark{ font-weight:700; }

/* 比較表（Flexible Table Block）のヘッダー行
   ⚠ SWELLは thead th を白文字にする一方、FTBは地を #f0f0f1 にするため、
     素のままだと 白×#f0f0f1 ＝ 1.14:1 で実質不可視になる（実測して発見）。
     地を navy にして白文字を成立させる（13.09:1）。
   ⚠ tbody th（基本情報表の縦見出し）は navy文字×薄地で 11.50:1 と正常なので触らない。 */
/* ⚠ FTBは `.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tr th`
     とクラスを二重に書いて詳細度(0,2,3)を稼いでいる。素直な `.…-table thead th`(0,1,2) では負ける。
     ここでは (0,2,4) にして確実に上回る（!important を使わずに解決する）。 */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table thead tr th{
  background-color:var(--kw-navy);
  color:#fff;
}
.wp-block-flexible-table-block-table figcaption{
  color:var(--kw-navy-soft);
  font-size:.8125rem;
}

/* 自社サービス枠（ランキング対象外であることを枠ごと分ける） */
.kw-ownService{
  border:2px solid var(--kw-navy);
  border-radius:12px;
  background:var(--kw-surface);
  padding:1.25rem 1.5rem;
  margin:2em 0;
}
.kw-ownService__label{
  display:inline-block;
  background:var(--kw-navy); color:#fff;
  border-radius:6px; padding:.2em .7em;
  font-size:.8125rem; font-weight:700;
  margin-bottom:.6em;
}

/* 自社サービス枠の中身
   ⚠ 「別枠であること」が一目で伝わることが最優先。ランキングのカード(.kw-service)とは
     わざと見た目を変えている（2px navy の囲み＋黒いラベル）。似せてはいけない。 */
/* 自社サービスのFVバナー。枠の一番上に置く。
   ⚠ 角丸は枠の内側に収める。画像の四隅が枠線からはみ出すと安っぽく見える。
   ⚠ バナーには文字が焼き込まれているので、alt に内容を書くこと（画像内テキストは読まれない）。 */
.kw-ownService__banner{
  display:block;
  margin:0 0 1.1rem;
  border-radius:8px;
  overflow:hidden;
  line-height:0;                      /* 画像下の余白を殺す */
  border:1px solid var(--kw-line);
  transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
}
.kw-ownService__banner img{ width:100%; height:auto; display:block; }
.kw-ownService__banner:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(38,48,74,.12); }
.kw-ownService__banner:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .kw-ownService__banner{ transition:none; }
  .kw-ownService__banner:hover{ transform:none; }
}

/* ⚠ 2件目以降（2026-09-07）。1件目は 16:9 の大きいバナー、こちらは右レール用の
   600×500（比1.2）をそのまま使う。**比率が違うので同じ幅では並べない。**
   16:9に切ると焼き込まれた文字が上下28%落ちるため、切らずに小さく置く。
   ⚠ 「別枠であること」は親の .kw-ownService（2px navy）が担保しているので、
     ここで枠を重ねない。区切りは細い罫1本だけにする。 */
.kw-ownService__extra{
  margin:1.5rem 0 0;
  padding-top:1.2rem;
  border-top:1px solid var(--kw-line);
}
.kw-ownService__extraTitle{
  margin:0;
  font-size:.9375rem; font-weight:700;
  color:var(--kw-navy-soft);
}
/* ⚠ `.post_content ul{ padding-left:… }`（SWELL・(0,1,1)）に負けるので詳細度を上げる（§2-26.3） */
.post_content .kw-ownExtra{
  list-style:none;
  margin:.9rem 0 0; padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem;
}
.kw-ownExtra__link{
  display:block;
  border:1px solid var(--kw-line);
  border-radius:10px;
  overflow:hidden;
  line-height:0;
  background:var(--kw-surface);
  text-decoration:none !important;
  transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
}
.kw-ownExtra__link:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(38,48,74,.12); }
.kw-ownExtra__link:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:2px; }
.kw-ownExtra__link img{
  display:block; width:100%; height:auto;
  aspect-ratio:6/5;              /* 素材は 600×500。読み込み前のずれ(CLS)を防ぐ */
}
@media (prefers-reduced-motion: reduce){
  .kw-ownExtra__link{ transition:none; }
  .kw-ownExtra__link:hover{ transform:none; }
}
@media (max-width:599px){
  /* SPで2列にすると1枚170px前後まで縮んで文字が読めない。1列にする */
  .post_content .kw-ownExtra{ grid-template-columns:1fr; }
}

.kw-ownService__name{
  font-family:var(--kw-font-serif); font-weight:700; font-size:1.375rem;
  margin:0 0 .5em; color:var(--kw-navy);
}
.kw-ownService__lead{ margin:0 0 1.2em; font-size:.9375rem; line-height:1.85; }

/* サービス概要（項目名と値の2列）。狭い画面では1列に落とす。 */
.kw-spec{
  display:grid; grid-template-columns:auto 1fr; gap:.4em 1em;
  margin:0 0 1.2em; padding:.9rem 1.1rem;
  background:var(--kw-bg); border-radius:8px;
  font-size:.9375rem;
}
.kw-spec dt{ font-weight:700; color:var(--kw-navy); white-space:nowrap; }
.kw-spec dd{ margin:0; color:var(--kw-navy); }
@media (max-width:480px){
  .kw-spec{ grid-template-columns:1fr; gap:.15em; }
  .kw-spec dd{ margin:0 0 .5em; }
}

.kw-ownService__points{ margin:0 0 1.4em; padding-left:1.2em; font-size:.9375rem; line-height:1.85; }
.kw-ownService__points li{ margin:.35em 0; }

/* 自社枠のCTAは幅いっぱい。⚠ .kw-cta の20px/太字は下げない（コントラストの前提） */
.kw-ownService .kw-cta{ margin:0 0 .8em; }
.kw-ownService__note{
  margin:0; font-size:.8125rem; color:var(--kw-navy-soft); line-height:1.75;
}

/* --------------------------------------------------------------------------
   6.6 記事を「読み物」にする部品（2026-08-12）
   地の文が続くと読み飛ばされる。話者・要点・結論を視覚的に分ける。
   ⚠ 禁則は同じ。ライム／ピンクは面・罫・マーカー地のみ。文字は navy / navy-soft。
   ⚠ アイコンはSVGのデータURIで持つ（画像素材を増やさない・色は承認色を直書き）。
   -------------------------------------------------------------------------- */

/* ---- 吹き出し（話者アイコン付き）---------------------------------------- */
.kw-balloon{
  display:flex; align-items:flex-start; gap:.9rem;
  margin:2em 0;
}
/* 話者の列。⚠ 幅を固定しないと、名前が1文字ずつ縦に折り返される（実際にそうなった）。 */
.kw-balloon__speaker,
.kw-balloon > div:first-child{   /* クラス無しで挿入された古いブロックへの保険 */
  flex:0 0 auto; width:88px; text-align:center;
}
.kw-balloon__avatar{
  /* ⚠ display:block が要る。<span>のままだと inline で width/height が効かず、
     アイコンが一切表示されない（実測で発覚）。 */
  display:block; margin:0 auto;
  /* 88px（2026-09-02）。⚠ 64pxから上げた。話者が白熊のフォトリアル画像になり、
     64pxでは毛の質感と眼鏡が潰れて表情が読めなかったため（実物で確認）。
     写真は線画より縮小に弱い。⚠ 下げると表情が読めなくなる。 */
  width:88px; height:88px; border-radius:50%;
  border:1px solid var(--kw-line);
  /* 話者は2人（2026-09-02 社長決定）。この既定は熊先生＝編集部。
     ちはる（読者代表）は .kw-balloon--ask 側で上書きする。
     ⚠ 正は docs/wp-swell/brand/CHARACTERS.md。触る前に読むこと。
     ⚠ 経歴・資格を文章で名乗らせない（架空の監修者を作らない＝§4）。
     ⚠ 画像URLは style.css からの相対パス。子テーマの assets/ に置いてある。
     ⚠ 既定は「説明する」相当の顔。到着9枚には**語りの顔（口を開けて話している顔アップ）が無い**ため、
       当面は留保の顔（bear-think）を既定に置いている。追加2種が届いたら差し替える。 */
  background:var(--kw-bg) url("assets/bear-think.jpg") no-repeat center center / cover;
}
/* 熊先生の表情。⚠ 使いどころは CHARACTERS.md の表に従う */
.kw-balloon__avatar.is-bear-surprise{ background-image:url("assets/bear-surprise.jpg"); }
.kw-balloon__avatar.is-bear-nod     { background-image:url("assets/bear-nod.jpg"); }
.kw-balloon__avatar.is-bear-worry   { background-image:url("assets/bear-worry.jpg"); }

/* ---- 話者の出し分け（2026-09-02）----------------------------------------
   ⚠ HTMLに <img> を増やさない。**背景画像だけ差し替える**（画像素材を増やさない方針）。
   ⚠ 切り出しは全カット「髪の外郭が収まる正方形」で機械的に揃えてある。
     揃えないと、コマごとに顔の大きさが跳ねて落ち着かない。
     揃え方は headcrop.py（髪の広がり幅を基準に切り出す）。
   ⚠ 円形に切り抜くので透過は不要。JPEGにして1枚20KB前後に抑えている。 */
.kw-balloon--ask .kw-balloon__avatar{
  background-image:url("assets/chiharu-ask.jpg");
}
/* ちはるの表情。会話ブロックごとに付け替える。
   ⚠ 使いどころは CHARACTERS.md の表に従う。とくに:
     --surprise … 会話②の山。結論をちはるが口にする瞬間
     --think    … 会話②前半。「まだ腑に落ちていない」段階。問いかけとの被りを解く
     --anxious  … 感情が強いので**悩み系の導入だけ**。通常は --worry を使う */
.kw-balloon--ask .kw-balloon__avatar.is-surprise{ background-image:url("assets/chiharu-surprise.jpg"); }
.kw-balloon--ask .kw-balloon__avatar.is-think   { background-image:url("assets/chiharu-think.jpg"); }
.kw-balloon--ask .kw-balloon__avatar.is-worry   { background-image:url("assets/chiharu-worry.jpg"); }
.kw-balloon--ask .kw-balloon__avatar.is-anxious { background-image:url("assets/chiharu-anxious.jpg"); }
.kw-balloon--ask .kw-balloon__avatar.is-agree   { background-image:url("assets/chiharu-agree.jpg"); }
.kw-balloon__name{
  display:block; margin-top:.4em;
  font-size:.75rem; line-height:1.3; text-align:center;
  color:var(--kw-navy-soft);
}
.kw-balloon__body{
  position:relative; flex:1 1 auto; min-width:0;
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-radius:12px;
  padding:1.1rem 1.3rem;
  color:var(--kw-navy);
  font-size:.9375rem; line-height:1.9;
}
/* 尻尾。罫の三角と地の三角を1pxずらして重ねる（枠線を途切れさせないため） */
.kw-balloon__body::before,
.kw-balloon__body::after{
  content:""; position:absolute; top:22px; width:0; height:0;
  border-style:solid; border-width:8px 10px 8px 0;
}
.kw-balloon__body::before{ left:-10px; border-color:transparent var(--kw-line) transparent transparent; }
.kw-balloon__body::after { left:-9px;  border-color:transparent var(--kw-surface) transparent transparent; }
.kw-balloon__body > :first-child{ margin-top:0; }
.kw-balloon__body > :last-child{ margin-bottom:0; }
.kw-balloon__body p{ margin:0 0 .8em; }
.kw-balloon__body p:last-child{ margin-bottom:0; }

/* 読者側は地をティントにして、編集部の白と対比させる */
.kw-balloon--ask .kw-balloon__body{ background:var(--kw-bg); }
.kw-balloon--ask .kw-balloon__body::after{ border-right-color:var(--kw-bg); }

@media (max-width:480px){
  .kw-balloon{ gap:.6rem; }
  /* 64px（2026-09-02）。⚠ 48pxから上げた。48pxでは白熊の表情が読めない。
     ⚠ これ以上は上げない。本文幅がSP390で290pxを切ると、日本語が1行4〜5文字で折れる。
     ⚠ background-size は指定しない（cover のまま）。26px指定だと顔が小さく出る。 */
  .kw-balloon__speaker,
  .kw-balloon > div:first-child{ width:64px; }
  .kw-balloon__avatar{ width:64px; height:64px; }
  .kw-balloon__body{ padding:.9rem 1rem; font-size:.9rem; }
  .kw-balloon__body::before, .kw-balloon__body::after{ top:16px; }
}

/* ---- ヒント枠 ------------------------------------------------------------ */
.kw-hint{
  display:flex; align-items:flex-start; gap:.8rem;
  background:var(--kw-bg);
  border-left:4px solid var(--kw-lime);
  border-radius:8px;
  padding:1rem 1.2rem;
  margin:1.8em 0;
  color:var(--kw-navy);
  font-size:.9375rem; line-height:1.85;
}
.kw-hint::before{
  content:""; flex:0 0 auto; width:22px; height:22px; margin-top:.2em;
  background:no-repeat center / contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FB61A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.5.4.8 1 .9 1.6h5.4c.1-.6.4-1.2.9-1.6A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}
.kw-hint > *:first-child{ margin-top:0; }
.kw-hint > *:last-child{ margin-bottom:0; }

/* ---- 口コミカード（属性アイコン付き）------------------------------------
   ⚠⚠ 実際に集めた声と調査概要（時期・方法・件数）が揃うまで公開しない。
       架空の口コミを作らない（絶対条件）。 */
.kw-voice{
  display:flex; align-items:flex-start; gap:.9rem;
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-radius:10px;
  padding:1rem 1.2rem;
  margin:.9em 0;
  font-size:.9375rem;
}
.kw-voice__avatar{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  background:var(--kw-bg) no-repeat center / 28px 28px;
  border:1px solid var(--kw-line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6478' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 20c0-3.6 3.2-5.6 7.2-5.6s7.2 2 7.2 5.6'/%3E%3C/svg%3E");
}
.kw-voice__attr{
  display:block; margin-top:.35em;
  font-size:.6875rem; text-align:center; color:var(--kw-navy-soft); white-space:nowrap;
}
.kw-voice__body{ flex:1 1 auto; min-width:0; }
.kw-voice__title{
  font-family:var(--kw-font-serif); font-weight:700;
  color:var(--kw-navy); margin:0 0 .45em; line-height:1.6;
}
.kw-voice__body p{ margin:0; line-height:1.85; }
.kw-voice__meta{ color:var(--kw-navy-soft); font-size:.8125rem; margin:.5em 0 0; }

/* ---- よくある質問（開閉式）------------------------------------------------
   ⚠ <details>/<summary> を使う。JSを書かない・キーボードで開閉できる・
     JSが落ちても中身が読める（アコーディオンを自作すると全部失う）。
   ⚠ 質問文に h3 を使わない。13問がそのまま目次に並んでノイズになるため、
     セクションのH2だけを目次に残す。 */
.kw-faq{ margin:2em 0; border-top:1px solid var(--kw-line); }
.kw-faq__item{ border-bottom:1px solid var(--kw-line); }
.kw-faq__q{
  position:relative;
  display:block;                 /* ⚠ list-item のままだと三角マーカーが二重に出る */
  cursor:pointer;
  padding:1.1em 2.6em 1.1em 2.4em;
  font-family:var(--kw-font-serif); font-weight:700;
  font-size:1.0625rem; line-height:1.65; color:var(--kw-navy);
  list-style:none;
}
.kw-faq__q::-webkit-details-marker{ display:none; }   /* Safari の既定マーカー */
/* 左の Q。ライムは面として使う（文字色にしない）ので、navyの丸に白抜き */
.kw-faq__q::before{
  content:"Q"; position:absolute; left:0; top:1.05em;
  width:1.5em; height:1.5em; border-radius:50%;
  background:var(--kw-navy); color:#fff;
  font-family:var(--kw-sans, inherit); font-size:.8125rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
/* 右の＋。開くと − になる */
.kw-faq__q::after{
  content:""; position:absolute; right:.4em; top:1.5em;
  width:14px; height:14px;
  background:
    linear-gradient(var(--kw-lime-dark),var(--kw-lime-dark)) center/14px 3px no-repeat,
    linear-gradient(var(--kw-lime-dark),var(--kw-lime-dark)) center/3px 14px no-repeat;
  transition:transform .2s ease;
}
.kw-faq__item[open] > .kw-faq__q::after{
  background:linear-gradient(var(--kw-lime-dark),var(--kw-lime-dark)) center/14px 3px no-repeat;
  transform:rotate(180deg);
}
.kw-faq__q:hover{ background:var(--kw-bg); }
.kw-faq__q:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:-3px; }
.kw-faq__a{
  padding:0 .4em 1.3em 2.4em;
  font-size:.9375rem; line-height:1.95; color:var(--kw-navy);
}
.kw-faq__a > :first-child{ margin-top:0; }
.kw-faq__a > :last-child{ margin-bottom:0; }
.kw-faq__a p{ margin:0 0 .9em; }
@media (max-width:480px){
  .kw-faq__q{ padding:1em 2.2em 1em 2.1em; font-size:1rem; }
  .kw-faq__a{ padding-left:2.1em; }
}
@media (prefers-reduced-motion: reduce){ .kw-faq__q::after{ transition:none; } }

/* ---- 編集部プロフィール --------------------------------------------------
   ⚠ 名乗ってよいのは「編集部」と実務経歴まで。国家資格を持っているかのような
     書き方はしない（§4の決定）。数値を書くなら自社実績である旨と時点を添える。 */
.kw-profile{
  display:flex; align-items:flex-start; gap:1.2rem;
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-left:4px solid var(--kw-lime);
  border-radius:12px;
  padding:1.4rem 1.6rem;
  margin:2.5em 0;
}
.kw-profile__figure{ flex:0 0 auto; width:96px; text-align:center; }
.kw-profile__avatar{
  display:block; width:96px; height:96px; border-radius:50%;
  border:1px solid var(--kw-line);
  background:var(--kw-bg) url("assets/editor-avatar.png") no-repeat center top / cover;
}
.kw-profile__name{
  display:block; margin-top:.5em;
  font-family:var(--kw-font-serif); font-weight:700; font-size:.9375rem; color:var(--kw-navy);
}
.kw-profile__body{ flex:1 1 auto; min-width:0; }
.kw-profile__body p{ margin:0 0 .8em; font-size:.9375rem; line-height:1.9; color:var(--kw-navy); }
/* ⚠ 上の `.kw-profile__body p`（詳細度 0,1,1）より強くすること。
   `.kw-profile__role` 単独（0,1,0）だと負けて **navy地にnavy文字＝コントラスト1.00** になり、
   チップが真っ黒な空カプセルとして表示される（実測して発見）。
   SWELLとの衝突だけでなく、自分のCSS同士でも起きる。地と文字色をセットで持つ部品は必ず実測する。 */
.kw-profile__body p.kw-profile__role{
  display:inline-block; background:var(--kw-navy); color:#fff;
  border-radius:999px; padding:.25em .9em; margin:0 0 .7em;
  font-size:.75rem; line-height:1.6; font-weight:700; letter-spacing:.03em;
}
.kw-profile__body p:last-child{ margin-bottom:0; }
.kw-profile__facts{ margin:0 0 .8em; padding:0; list-style:none; }
.kw-profile__facts li{
  position:relative; padding-left:1.4em; margin:.3em 0;
  font-size:.9375rem; line-height:1.8; color:var(--kw-navy);
}
.kw-profile__facts li::before{
  content:""; position:absolute; left:.1em; top:.55em;
  width:.7em; height:.42em;
  border-left:3px solid var(--kw-lime-dark); border-bottom:3px solid var(--kw-lime-dark);
  transform:rotate(-45deg);
}
@media (max-width:520px){
  .kw-profile{ flex-direction:column; align-items:center; text-align:left; }
  .kw-profile__figure{ width:auto; }
}

/* ---- 「迷ったらここ」結論ブロック ---------------------------------------
   ⚠ サービスを名指しするのは比較ランキングが確定してから。
     それまでは「何を基準に選ぶか」と職種ハブへの導線で受ける。
     自社サービスをここに置かないこと（中立性の宣言と衝突する）。 */
.kw-pick{
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-top:5px solid var(--kw-lime);
  border-radius:12px;
  padding:1.4rem 1.6rem 1.5rem;
  margin:2.5em 0;
}
.kw-pick__label{
  display:inline-block;
  background:var(--kw-navy); color:#fff;
  border-radius:999px; padding:.3em 1em;
  font-size:.8125rem; font-weight:700; letter-spacing:.04em;
  margin:0 0 .8em;
}
.kw-pick__title{
  font-family:var(--kw-font-serif); font-weight:700;
  font-size:1.25rem; line-height:1.6; color:var(--kw-navy);
  margin:0 0 .7em;
}
.kw-pick__lead{ margin:0 0 1em; font-size:.9375rem; line-height:1.9; color:var(--kw-navy); }
.kw-pick ul{ margin:0 0 1.2em; padding:0; list-style:none; }
.kw-pick li{
  position:relative; padding-left:1.7em; margin:.45em 0;
  font-size:.9375rem; line-height:1.8; color:var(--kw-navy);
}
/* チェックはライムの罫で描く（文字色には使わない） */
.kw-pick li::before{
  content:""; position:absolute; left:.15em; top:.45em;
  width:.85em; height:.5em;
  border-left:3px solid var(--kw-lime-dark);
  border-bottom:3px solid var(--kw-lime-dark);
  transform:rotate(-45deg);
}
@media (max-width:480px){
  .kw-pick{ padding:1.2rem 1.1rem 1.3rem; }
}

/* ---- 「30秒でわかるまとめ」（2026-09-02）---------------------------------
   会話形式は「結論になかなか辿り着かない」と嫌われる。その逃げ道として、
   記事の冒頭と末尾に結論だけを置く。急ぐ読者は冒頭で離脱してよい。
   ⚠ 見出しは h2。SWELLの目次が自動で拾うので、目次の先頭に「まとめ」が並ぶ
     （社長の指示＝冒頭の目次にまとめ欄を置く）。h3にすると目次の階層が崩れる。
   ⚠ 冒頭と末尾で同じ内容を出す。末尾は見出しだけ「もう一度まとめ」に変える。
   ⚠ **本文を読まなくても意味が通ること**が条件。本文の要約ではなく、結論そのものを書く。
   ⚠ .kw-pick と構造を揃えてあるが、罫の色で区別する（pick=上罫ライム／summary=上罫ピンク）。
     ピンクは面・罫にのみ使う。文字には使わない（承認色の原則）。

   ⚠⚠ **見出し h2 は div の外に置く。** SWELLは目次を**最初の h2 の直前**に差し込むため、
     h2 を div の中に入れると**目次ごと枠の中に入り込む**（2026-09-04 に実際に入り、
     枠の高さが1248pxになった）。外に出したうえで、罫と角丸で1つの箱に見せている。
     HTMLの並びは必ずこの順:
       <h2 class="kw-summary__title">30秒でわかるまとめ</h2>
       <div class="kw-summary"><ul>…</ul></div> */
/* ⚠ セレクタを `.post_content h2.…` にしてあるのは**詳細度のため**。
   この子テーマは `.post_content h2`（0,1,1）で見出しに
   「下罫ライム3px・角丸0・背景なし・margin 3.5rem」を当てている。
   `.kw-summary__title` 単独（0,1,0）では**負ける**。実際に負けて、
   まとめの見出しに下罫ライムが残り、角丸も背景も効かなかった（2026-09-04 実測）。
   ⚠ `.post_content h2` 側は触らない（サイト全体の見出しでメインPCの持ち場）。
     こちらの詳細度を上げて解決している。 */
.post_content h2.kw-summary__title,
.kw-summary__title{
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-top:5px solid var(--kw-pink);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  margin:2em 0 0; padding:1.05rem 1.6rem .1rem;
  font-family:var(--kw-font-serif); font-weight:700;
  font-size:1.1875rem; line-height:1.6; color:var(--kw-navy);
}
/* ⚠ SWELLのh2装飾を打ち消す。親テーマ側は擬似要素で罫や番号を足すことがある。
   ⚠ ここも詳細度を上げる。インラインCSSが
     `.post_content h2:where(...)::before` で罫を描いているため。 */
.post_content h2.kw-summary__title::before,
.post_content h2.kw-summary__title::after,
.kw-summary__title::before,
.kw-summary__title::after{ content:none; display:none; }
.kw-summary{
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-top:0;
  border-radius:0 0 12px 12px;
  padding:.55rem 1.6rem 1.4rem;
  margin:0 0 2.4em;
}
/* ⚠ 番号は **CSSのカウンタ**で振る。HTMLに番号を書かない。
   こうしておくと、項目を増減しても振り直され、既存記事の変換でも番号を書き足さずに済む。 */
.kw-summary ul{ margin:0; padding:0; list-style:none; counter-reset:kwsum; }
.kw-summary li{
  position:relative; padding-left:0; margin:1.05em 0;
  font-size:.875rem; line-height:1.8; color:var(--kw-navy-soft);
}
.kw-summary li:first-child{ margin-top:0; }
/* ⚠ 既存記事の「この記事の要点」は **28項目すべてが太字の結論で始まっていた**（2026-09-02 実測）。
   その構造をそのまま使い、**太字＝結論を大きく、続く根拠を小さく**して階層をつける。
   こうすると本文を1文字も書き換えずに「太字だけ拾えば30秒」が成立する。
   ⚠ **文章を短縮しない。** 根拠まで含めて情報としての価値があるため、
     落とすのではなく**視覚的な優先順位で読み分けさせる**。 */
.kw-summary li > strong:first-child{
  display:block; margin-bottom:.15em;
  font-size:1.0625rem; line-height:1.6; color:var(--kw-navy);
}
/* 「Point 1」のバッジ。⚠ ピンクは**面**として使う（文字色には使わない＝承認色の原則）。
   ⚠ 語は "Point" で固定。"CHECK" は点検を促す語感があり、読むだけの読者に命令形で当たる。
   ⚠ 地を navy にしない。`.kw-pick` のラベルと同じ見た目になり、別の部品だと分からなくなる。
     まとめ＝ピンク、迷ったらここ＝navy、で役割を分けている。 */
.kw-summary li::before{
  counter-increment:kwsum;
  content:"Point " counter(kwsum);
  display:inline-block; margin:0 0 .45em;
  background:var(--kw-pink); color:#fff;
  border-radius:999px; padding:.3em .95em;
  font-size:.6875rem; font-weight:700; letter-spacing:.08em; line-height:1.5;
}
.kw-summary li:last-child{ margin-bottom:0; }
@media (max-width:480px){
  .post_content h2.kw-summary__title,
  .kw-summary__title{ padding:.95rem 1.1rem .1rem; margin:1.6em 0 0; }
  .kw-summary{ padding:.5rem 1.1rem 1.2rem; margin:0 0 2em; }
  .kw-summary__title{ font-size:1.0625rem; }
  .kw-summary li{ font-size:.9rem; }
}

/* 更新履歴 */
.kw-history{ font-size:.875rem; color:var(--kw-navy-soft); }
.kw-history ul{ margin:.4em 0 0; padding-left:1.2em; }

/* --------------------------------------------------------------------------
   6.7 トップページ（4職種への振り分け型）
   SNS流入が主軸なので、トップは「新着一覧」ではなく
   「自分の職種を選んでハブへ送る」ことに専念させる。
   -------------------------------------------------------------------------- */

/* トップのヒーローは箱で囲わない。罫と余白だけで「誌面の扉」に見せる。
   ⚠ 白いカードで囲うと下の職種カードと重さが並んでしまい、主役が消える。 */
.kw-hero{
  background:transparent;
  padding:1.5rem 0 2rem;
  margin:0 0 3rem;
  border:none;
  border-bottom:1px solid var(--kw-line);
}
/* ⚠ .kw-hero .kw-hero__title と2段にしているのは詳細度のため。
   ヒーローは h1（トップの主題を示すテキスト見出し）に変えてあり、
   単独の .kw-hero__title (0,1,0) では SWELL の .post_content h1 (0,1,1) に
   負けてサイズも余白も奪われる。 */
.kw-hero .kw-hero__title{
  font-family:var(--kw-font-serif);
  font-weight:700;
  font-size:clamp(1.75rem, 5.4vw, 2.75rem);
  line-height:1.4;
  letter-spacing:.02em;
  margin:0 0 .6em;
  color:var(--kw-navy);
}
.kw-hero__lead{ font-size:1.0625rem; line-height:1.95; }
/* ピンクは面と罫のみ。強調は「マーカー地」で作る（文字色は変えない） */
.kw-hero__title .kw-em{
  background:linear-gradient(transparent 58%, var(--kw-lime) 58%);
  padding:0 .08em;
}
.kw-hero__lead{ margin:0; color:var(--kw-navy); }
.kw-hero__note{
  margin:1em 0 0; font-size:.875rem; color:var(--kw-navy-soft);
  border-top:1px solid var(--kw-line); padding-top:.75em;
}

/* 4職種カード */
/* 4職種なので 2×2 に割る。280px下限＝サイドバーありの本文幅(約740px)で3列に
   割れて「3＋1」の不格好な折り返しになるのを防ぐ。 */
.kw-verticals{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1rem;
  margin:0 0 2.5rem;
  padding:0;
  list-style:none;
}
.kw-verticalCard{
  /* 職種色はこの2変数だけで切り替える（.category-* と同じ仕組み） */
  --kw-tint:var(--kw-surface);
  --kw-accent:var(--kw-lime-dark);
  background:var(--kw-tint);
  border:1px solid var(--kw-line);
  border-top:5px solid var(--kw-accent);
  border-radius:12px;
  margin:0;
}
.kw-verticalCard--eiyoushi{ --kw-tint:var(--kw-tint-eiyoushi); --kw-accent:var(--kw-accent-eiyoushi); }
.kw-verticalCard--kaigo   { --kw-tint:var(--kw-tint-kaigo);    --kw-accent:var(--kw-accent-kaigo); }
.kw-verticalCard--kango   { --kw-tint:var(--kw-tint-kango);    --kw-accent:var(--kw-accent-kango); }
.kw-verticalCard--hoiku   { --kw-tint:var(--kw-tint-hoiku);    --kw-accent:var(--kw-accent-hoiku); }

/* カード全体をリンクにする（タップ領域を最大化＝モバイル主軸のため） */
.kw-verticalCard__link{
  display:block;
  padding:1.25rem 1.25rem 1.4rem;
  color:var(--kw-navy);
  text-decoration:none;
  border-radius:inherit;
  min-height:96px;
}
.kw-verticalCard__link:hover{ background:rgba(255,255,255,.45); }
.kw-verticalCard__link:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:2px; }
.kw-verticalCard__name{
  display:block;
  font-family:var(--kw-font-serif); font-weight:700; font-size:1.25rem;
  margin:0 0 .35em;
}
.kw-verticalCard__desc{ display:block; font-size:.875rem; color:var(--kw-navy-soft); }
.kw-verticalCard__go{
  display:block; margin-top:.75em; font-size:.875rem; font-weight:700;
  text-decoration:underline; text-decoration-color:var(--kw-accent);
  text-decoration-thickness:2px; text-underline-offset:.25em;
}

/* サイドバー：職種ナビ（罫の色だけ職種で変える） */
/* ⚠ 2026-09-01 現在このクラスは**どこからも出力されていない**（実測: 全19ページで0件）。
   サイドバーの「職種から探す」ウィジェット（block-2）を職種セレクタ（.kw-vpick）へ
   差し替えたため。**消していないのは、退避した widget_block を戻したときに
   見た目が崩れないようにするため**（~/kawaruzo_backup/widget_block-*.json）。
   戻す予定が無くなったら、この節ごと削ってよい。 */
.kw-sideNav{ list-style:none; margin:0; padding:0; }
.kw-sideNav__item{
  --kw-accent:var(--kw-lime-dark);
  border-bottom:1px solid var(--kw-line);
}
.kw-sideNav__item--eiyoushi{ --kw-accent:var(--kw-accent-eiyoushi); }
.kw-sideNav__item--kaigo   { --kw-accent:var(--kw-accent-kaigo); }
.kw-sideNav__item--kango   { --kw-accent:var(--kw-accent-kango); }
.kw-sideNav__item--hoiku   { --kw-accent:var(--kw-accent-hoiku); }
.kw-sideNav__item > a{
  display:block;
  /* ⚠ タップ領域44px以上を確保する（実測で42pxだったため .7em→.85em）。
     SNS＝モバイル主軸なので、ここを下げない。 */
  padding:.85em .5em .85em .9em;
  border-left:4px solid var(--kw-accent);
  color:var(--kw-navy);
  text-decoration:none;
  font-weight:700;
}
.kw-sideNav__item > a:hover{ background:var(--kw-bg); }
.kw-sideNav__item > a:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:-3px; }

/* サイドバー：中立宣言と法務リンク */
.kw-sideNote{ font-size:.875rem; color:var(--kw-navy); margin:0 0 .8em; }
.kw-sideLinks{ margin:0; font-size:.8125rem; }
.kw-sideLinks a{
  display:block; padding:.35em 0;
  color:var(--kw-navy);
  text-decoration:underline;
  text-decoration-color:var(--kw-lime-dark);
  text-underline-offset:.2em;
}

/* このサイトの約束（中立性の明示＝E-E-A-Tの核） */
.kw-promise{
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-left:4px solid var(--kw-lime);
  border-radius:12px;
  padding:1.5rem 1.75rem;
  margin:0 0 2rem;
}
.kw-promise__title{
  font-family:var(--kw-font-serif); font-weight:700; font-size:1.125rem;
  margin:0 0 .75em;
}
.kw-promise ul{ margin:0; padding-left:1.2em; }
.kw-promise li{ margin:.4em 0; }

/* --------------------------------------------------------------------------
   6.9 スクロール演出
   ⚠ 初期状態を opacity:0 にしていないのは意図。JSが `.kw-inview` を付けて初めて隠れる。
     CSSだけで隠すと、JSが落ちたとき本文が永久に見えなくなる。
   -------------------------------------------------------------------------- */

/* トップページのロゴを大きく見せ、スクロールで通常サイズへ戻す。
   SWELLの追従ヘッダー(.l-fixHeader)は別物なので触っていない。 */
/* ── ロゴ画像のとき（現行）──────────────────────────────
   SWELLは `.c-headLogo__img { height:100%; object-fit:contain; width:auto }` で、
   高さは親 `.c-headLogo`（カスタマイザーの logo_size_pc = 56px）が決めている。
   だから **親の高さを変えないとロゴは1pxも動かない**。
   ⚠ 下の「文字ロゴのとき」の font-size 指定は、画像ロゴでは一切効かない（実測で確認）。 */
.home .c-headLogo{
  height:88px;
  transition:height .35s cubic-bezier(.22,.61,.36,1);
}
.kw-scrolled .home .c-headLogo{ height:56px; }  /* SWELLの標準サイズに戻す */
/* ⚠ 子の <img> に transition を付けてはいけない。
     img は height:100% で親を追うため、親をアニメさせると子が毎フレーム追従先を
     計算し直し、両方にtransitionがあると「追いかけっこ」になって収束が異常に遅くなる
     （実測: 900ms経っても 88→56 が 60.6 までしか進まなかった）。親だけをアニメさせる。 */
.c-headLogo__img{ transition:none; }

/* ── 文字ロゴに戻したときの保険 ──────────────────────────
   ⚠ 文字サイズを持っているのは h1(.c-headLogo) ではなく中の <a>。
     SWELLが `.-txt .c-headLogo__link { font-size:5vw }`(詳細度 0,2,0) を当てているので、
     `.home .c-headLogo .c-headLogo__link`(0,3,0) で上回る必要がある。 */
.home .-txt.c-headLogo .c-headLogo__link{
  font-size:clamp(1.75rem, 4.2vw, 3rem);
  line-height:1.15;
  transition:font-size .35s cubic-bezier(.22,.61,.36,1);
}
.kw-scrolled .home .-txt.c-headLogo .c-headLogo__link{ font-size:1.5rem; }

/* 追従ヘッダーを「浮く角丸カード」にする（キャリアトラス式）。
   ⚠ 自前で sticky を作らない。SWELLの `.l-fixHeader`（position:fixed / スクロールで
     opacity 0→1）をそのまま使い、見た目だけ差し替える。 */
.l-fixHeader{
  top:12px;
  background:transparent;
  box-shadow:none;
}
.l-fixHeader__inner{
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-radius:14px;
  box-shadow:0 6px 24px rgba(38,48,74,.10);
  padding-left:1.25rem;
  padding-right:1.25rem;
}

/* スクロールインのふわっと */
.kw-inview{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.kw-inview.is-in{ opacity:1; transform:none; }

/* カードは触れると少し持ち上がる（押せることを body で伝える） */
.kw-verticalCard{ transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; }
.kw-verticalCard:hover{ transform:translateY(-3px); box-shadow:0 6px 20px rgba(38,48,74,.10); }

/* 縦マーキー（asobisystem の c-marquee-v 相当）
   ⚠ JSは使わない。CSSアニメーションだけで無限ループさせる。
   ⚠ タイルは「同じ並びを2回」入れる前提。track を -50% 動かすと継ぎ目なくループする。
     枚数を変えるときは必ず偶数（同じ並び×2）にすること。 */
.kw-marquee{
  position:relative;
  height:420px;
  overflow:hidden;
  border-radius:12px;
  /* 上下を background にフェードさせて、切れ目を目立たせない */
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.kw-marquee__track{
  display:flex;
  flex-direction:column;
  gap:10px;
  animation:kw-marquee-up 28s linear infinite;
}
.kw-marquee:hover .kw-marquee__track{ animation-play-state:paused; }
.kw-marquee__item{
  flex:0 0 auto;
  border-radius:10px;
  overflow:hidden;
  line-height:0;
}
.kw-marquee__item img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
}
@keyframes kw-marquee-up{
  from{ transform:translateY(0); }
  to  { transform:translateY(-50%); }
}

/* ⚠ 動きを減らす設定の環境では演出を全部止める（前庭障害・乗り物酔いへの配慮） */
@media (prefers-reduced-motion: reduce){
  .home .c-headLogo,
  .home .-txt.c-headLogo .c-headLogo__link,
  .kw-inview,
  .kw-verticalCard{ transition:none; }
  .kw-inview{ opacity:1; transform:none; }
  .kw-verticalCard:hover{ transform:none; }
  .kw-marquee__track{ animation:none; }
  .kw-marquee{ height:auto; -webkit-mask-image:none; mask-image:none; }
}

/* --------------------------------------------------------------------------
   7. 画像スロット（実写アセット待ち。グレーの空箱にしない）
   -------------------------------------------------------------------------- */
.kw-slot{
  display:flex; align-items:center; justify-content:center;
  min-height:180px;
  background:var(--kw-tint);
  border:1px dashed var(--kw-accent);
  border-radius:12px;
  color:var(--kw-navy-soft);
  font-size:.875rem;
}

/* ══ §6.7 職場形態カード ══════════════════════════════════════════
   ハブの「働く場所で何が変わるか」。表にすると4列×6行でスマホ390pxに
   収まらず、Flexible Table Block は thead が 1.14:1 で不可視になる
   既知の地雷（CLAUDE.md §2-11）を踏むため、カードを縦積みにしている。
   ⚠ --kw-accent は .category-{slug} 依存（§205-208）で固定ページには
      当たらない。必ず .kw-worksites--{職種} を親に付けること。 */
.kw-worksites{
  display:grid; gap:1rem; margin:1.6rem 0;
  --kw-accent:var(--kw-lime-dark);
}
@media (min-width:768px){ .kw-worksites{ grid-template-columns:1fr 1fr; } }

.kw-worksites--eiyoushi{ --kw-accent:var(--kw-accent-eiyoushi); --kw-tint:var(--kw-tint-eiyoushi); }
.kw-worksites--kaigo   { --kw-accent:var(--kw-accent-kaigo);    --kw-tint:var(--kw-tint-kaigo); }
.kw-worksites--kango   { --kw-accent:var(--kw-accent-kango);    --kw-tint:var(--kw-tint-kango); }
.kw-worksites--hoiku   { --kw-accent:var(--kw-accent-hoiku);    --kw-tint:var(--kw-tint-hoiku); }

.kw-worksite{
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-radius:10px;
  padding:1.1rem 1.2rem 1.2rem;
}
.kw-worksite__name{
  margin:0 0 .7rem;
  padding-left:.6rem;
  border-left:4px solid var(--kw-accent);
  font-family:var(--kw-font-serif);
  font-size:1.15rem; font-weight:700; line-height:1.4;
  color:var(--kw-navy);
}
.kw-worksite dl{ margin:0; }
.kw-worksite dt{
  margin-top:.75rem;
  font-size:.72rem; font-weight:700; letter-spacing:.06em;
  color:var(--kw-navy-soft);
}
.kw-worksite dt:first-of-type{ margin-top:0; }
.kw-worksite dd{
  margin:.15rem 0 0;
  font-size:.92rem; line-height:1.8;
  color:var(--kw-navy);
}
/* 「入る前に確認すること」だけ地を敷いて立たせる */
.kw-worksite dd:last-of-type{
  background:var(--kw-bg);
  border-radius:6px;
  padding:.5rem .7rem;
  margin-top:.3rem;
}

/* ══ トップの記事スライダーを本文の下へ ═══════════════════════════
   スライダーは functions.php の get_footer フックで出しているが、
   get_footer は #content を閉じる前に発火するため、DOM上は
   .l-mainContent と .l-sidebar の「兄弟」として #content 直下に入る。
   #content は display:flex / flex-wrap:wrap なので、全幅のスライダーが
   main と sidebar の間に挟まると折り返しが起きて
   ⚠ サイドバーが右カラムから落ちる（実測で発生させた）。
   order を最後に回して、main+sidebar を1行目・スライダーを2行目にする。 */
.home #content > #post_slider{
  order:9;
  flex:0 0 100%;
  width:100%;
  margin-top:2.5rem;
}

/* ══ トップのヒーロー画像 ══════════════════════════════════════════
   社長支給のFV（KAWARUZO! / 介護・看護・保育・栄養士）。
   ⚠ H1はテキストのまま残す（この画像だけにしない）。画像内の文字は
      検索にも読み上げにも乗らないため、alt に内容を入れてある。
   ⚠ 全幅には敷かない。元画像が1731pxしかなく、全幅(2400〜2880px必要)では
      拡大でぼやける。本文幅（約814px）に収める前提。 */
.kw-heroImage{
  margin:0 0 1.25rem;
}
.kw-heroImage img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
}
/* 画像が上に来るぶん、ヒーロー本体の上余白を詰める */
.kw-heroImage + .kw-hero{ padding-top:.5rem; }



/* ══ §6.11 全幅カラーブロック（eichie.jp 型）══════════════════════════
   参考: https://eichie.jp/ 実測 — 色は「箱」ではなく「ページの地」そのもので、
   全幅のセクションが交互に切り替わり、その上に白いカードが浮く。
   図形は浮かせる装飾ではなく **色帯と色帯の境界の形** として使う。

   ⚠⚠ サイドバーONでは成立しない。SWELLが alignfull を潰すため:
        .-sidebar-on .l-content .alignfull{ left:-16px; width:calc(100% + 32px) }
      → 職種ハブは functions.php の swell_is_show_sidebar フィルタで1カラムにしてある。
   ⚠ CTAを含むセクション（運営会社のサービス）は帯にしない。白のまま
      （白×ピンクグラデ3.99:1の前提を守るため）。
   ⚠ H2は罫のまま。塗りに戻さない。 */

.kw-fw{
  position:relative;
  background:var(--kw-tint);
  margin:0;
  padding:3.2rem 0 3.6rem;
}
.kw-fw--eiyoushi{ --kw-tint:var(--kw-tint-eiyoushi); --kw-accent:var(--kw-accent-eiyoushi); }
.kw-fw--kaigo   { --kw-tint:var(--kw-tint-kaigo);    --kw-accent:var(--kw-accent-kaigo); }
.kw-fw--kango   { --kw-tint:var(--kw-tint-kango);    --kw-accent:var(--kw-accent-kango); }
.kw-fw--hoiku   { --kw-tint:var(--kw-tint-hoiku);    --kw-accent:var(--kw-accent-hoiku); }

/* 帯の中身は読み幅に戻す（全幅のまま流すと日本語は1行が長すぎて読めない） */
.kw-fw__inner{
  max-width:900px;
  margin-inline:auto;
  padding-inline:1.6rem;
}
.post_content .kw-fw__inner > h2:first-child{ margin-top:0; }

/* 上端の境界を波形にする。
   ⚠ 色は mask で抜いて background から取る。SVGにfillを焼き込むと
      職種ごとに4つ書き分けることになり、変数の意味が消える。 */
.kw-fw::before{
  content:'';
  position:absolute;
  left:0; right:0; top:-42px;
  height:44px;
  background:inherit;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'><path d='M0,44 C240,6 480,42 720,24 C960,6 1200,40 1440,16 L1440,44 Z' fill='black'/></svg>") no-repeat center/100% 100%;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'><path d='M0,44 C240,6 480,42 720,24 C960,6 1200,40 1440,16 L1440,44 Z' fill='black'/></svg>") no-repeat center/100% 100%;
  pointer-events:none;
}
/* 下端も波形（上下で位相を変えて、同じ形の繰り返しに見せない） */
.kw-fw::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-42px;
  height:44px;
  background:inherit;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'><path d='M0,0 C240,38 480,2 720,20 C960,38 1200,4 1440,28 L1440,0 Z' fill='black'/></svg>") no-repeat center/100% 100%;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'><path d='M0,0 C240,38 480,2 720,20 C960,38 1200,4 1440,28 L1440,0 Z' fill='black'/></svg>") no-repeat center/100% 100%;
  pointer-events:none;
}

/* 帯の前後に波形ぶんの余白を空ける（隣の本文と重ならないように） */
.post_content > .kw-fw,
.post_content .kw-fw{ margin-block:4.2rem; }

/* 帯の中ではカードの入れ物を素通しにする（§6.9/§6.10 の地と二重掛けしない） */
.kw-fw .kw-worksites{
  background:transparent; padding:0; border-radius:0; overflow:visible;
}
.kw-fw .kw-worksites::before,
.kw-fw .kw-worksites::after{ content:none; }

/* 1カラムになると本文が900px幅になる。日本語は1行が長くなりすぎるので
   帯の外の地の文も読み幅に寄せる */
.-sidebar-off .post_content > p,
.-sidebar-off .post_content > ul,
.-sidebar-off .post_content > ol,
.-sidebar-off .post_content > h2,
.-sidebar-off .post_content > h3{
  max-width:760px;
}

@media (max-width:599px){
  .kw-fw{ padding:2.2rem 0 2.6rem; }
  .kw-fw__inner{ padding-inline:1rem; }
  .kw-fw::before{ top:-26px; height:28px; }
  .kw-fw::after{ bottom:-26px; height:28px; }
  .post_content .kw-fw{ margin-block:2.8rem; }
}

/* ══ §6.12 全幅帯の「あしらい」（2026-08-12）══════════════════════════
   語彙は社長支給のFV画像から borrow する（ドット・斜めストライプ・ブロブ）。
   新しい記号を発明しないこと。FVと同じ言語で揃えるからページが地続きに見える。

   ⚠ 文字の上には絶対に置かない。中身は z-index:1 で必ず前に出す。
   ⚠ opacity は上げない。あしらいが主役になると「賑やかなだけ」になる。 */

/* 帯の地に、ごく淡いブロブ（右上）を1つ置いて奥行きを作る。
   ⚠ ::before/::after（波形）は background:inherit をやめて色だけにする。
      inherit のままだとこのグラデーションが波形の帯にも流れ込んで滲む。 */
.kw-fw{
  background-color:var(--kw-tint);
  background-image:
    radial-gradient(58% 42% at 88% 10%,
      color-mix(in srgb, var(--kw-accent) 14%, transparent) 0%, transparent 70%);
  background-repeat:no-repeat;
}
.kw-fw::before,
.kw-fw::after{ background:var(--kw-tint); }

.kw-fw__inner{ position:relative; }
/* 中身は必ずあしらいより前に出す */
.kw-fw__inner > *{ position:relative; z-index:1; }

/* ドットの群れ（右上）。FVのドットと同じ語彙 */
.kw-fw__inner::before{
  content:'';
  position:absolute; z-index:0;
  top:-1.5rem; right:-.3rem;
  width:136px; height:98px;
  background:radial-gradient(circle, var(--kw-accent) 1.7px, transparent 1.8px) 0 0/14px 14px;
  opacity:.26;
  pointer-events:none;
}
/* 斜めストライプ（左下）。FVの斜線と同じ角度感 */
.kw-fw__inner::after{
  content:'';
  position:absolute; z-index:0;
  left:-.5rem; bottom:-1.2rem;
  width:124px; height:88px;
  background:repeating-linear-gradient(-45deg,
    var(--kw-accent) 0 2px, transparent 2px 10px);
  opacity:.15;
  pointer-events:none;
}

/* 形態カードにも小さなあしらい。名前の左罫の根元に点を置いて、
   罫が「ただの線」から「印」に見えるようにする */
.kw-worksite__name{ position:relative; }
.kw-worksite__name::before{
  content:'';
  position:absolute; left:-2px; top:.15em;
  width:8px; height:8px; border-radius:50%;
  background:var(--kw-accent);
  opacity:.55;
}

@media (max-width:599px){
  /* スマホは幅が無いので、あしらいが見出しに被らないよう小さくする */
  .kw-fw__inner::before{ width:92px; height:66px; top:-1rem; right:-.2rem; opacity:.22; }
  .kw-fw__inner::after{ width:84px; height:60px; bottom:-.8rem; }
}

/* ══ §6.13 トップ用の中立トーンと、写真の横マーキー帯 ═══════════════
   トップは職種が特定されないので、帯の色は職種色ではなく中立トーンにする。
   ⚠ 新しいHexを起こさず、承認色のライムから color-mix で派生させる
      （--kw-tint-kango #FCE8F1 と同じ考え方＝承認10色の派生）。 */
.kw-fw--neutral{
  --kw-tint:color-mix(in srgb, var(--kw-lime) 13%, #fff);
  --kw-accent:var(--kw-lime-dark);
}

/* 写真の帯。もとはサイドバーの縦マーキー（6タイル）だったものを、
   1カラム化で居場所が無くなるため全幅の横スクロールへ移設した。
   ⚠ 栄養士の写真が使われていなかったので4職種そろえてある（各2回＝8タイル）。 */
.kw-fw--strip{
  --kw-tint:color-mix(in srgb, var(--kw-lime) 13%, #fff);
  --kw-accent:var(--kw-lime-dark);
  padding:2.2rem 0 2.4rem;
}
.kw-strip{ overflow:hidden; }
.kw-strip__track{
  display:flex;
  gap:1rem;
  width:max-content;
  animation:kw-strip-scroll 46s linear infinite;
}
.kw-strip__item{
  flex:0 0 auto;          /* ⚠ 外すと縮んで指定幅が効かなくなる（罠25と同じ） */
  width:280px;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
}
.kw-strip__item img{
  display:block; width:100%; height:100%;
  object-fit:cover;
}
/* 同じ並びを2周ぶん置いてあるので、-50% まで動かすと継ぎ目なくループする */
@keyframes kw-strip-scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
/* ⚠ 動きを減らす設定の人には止める */
@media (prefers-reduced-motion: reduce){
  .kw-strip__track{ animation:none; }
}
@media (max-width:599px){
  .kw-strip__item{ width:190px; }
  .kw-fw--strip{ padding:1.6rem 0 1.8rem; }
}

/* ══ §6.14 全幅の色帯と共存するサイドバー（eichie.jp 方式）═══════════
   ⚠ SWELL標準のサイドバーは使えない。サイドバーONだと alignfull が潰され、
      全幅の色帯が作れなくなるため（§6.11 参照）。
   → 参考サイトを実測したところ、あちらのサイドバーは色帯セクションの**外**に
      `position:absolute` で浮かせてあった（`サイドバーは全幅セクションの中か: false`）。
      スマホでは `display:contents` で本文の流れへ戻している。同じ方式を採る。

   ⚠ .alignfull は position:relative + left:calc(50% - 50vw) で全幅を作る。
      left は「通常位置からのオフセット」なので、祖先に position:relative が
      あっても壊れない（実測確認済み）。 */

.kw-withSide{ position:relative; }

/* ── スマホ: 本文の流れに戻す（絶対配置しない）── */
.kw-side{
  margin:2rem 0 0;
}
.kw-side__box{
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-radius:14px;
  padding:1.1rem 1.2rem;
  margin-bottom:1rem;
}
.kw-side__title{
  margin:0 0 .7rem;
  padding-left:.55rem;
  border-left:4px solid var(--kw-lime);
  font-family:var(--kw-font-serif);
  font-size:1rem; font-weight:700;
  color:var(--kw-navy);
}
.kw-side__list{ list-style:none; margin:0; padding:0; }
.kw-side__list li{ border-bottom:1px solid var(--kw-line); }
.kw-side__list li:last-child{ border-bottom:none; }
.kw-side__list a{
  display:block; padding:.6rem .2rem;
  font-size:.9rem; color:var(--kw-navy); text-decoration:none;
}
.kw-side__list a:hover{ text-decoration:underline; text-decoration-color:var(--kw-lime-dark); }
/* SNSはこれから紐づけるので、いまは器だけ置いておく */
.kw-side__sns{ display:flex; gap:.6rem; flex-wrap:wrap; }
.kw-side__sns a{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;            /* ⚠ タップ標的は44px以上を確保する */
  border-radius:12px;
  background:var(--kw-bg);
  border:1px solid var(--kw-line);
  color:var(--kw-navy); text-decoration:none; font-size:.75rem; font-weight:700;
}
.kw-side__note{ margin:.6rem 0 0; font-size:.78rem; color:var(--kw-navy-soft); }

/* ── PC: 色帯の上に浮かせる ── */
@media (min-width:960px){
  .kw-withSide{ --kw-side-w:300px; --kw-side-gap:40px; }
  .kw-side{
    position:absolute;
    top:0;
    right:0;
    width:var(--kw-side-w);
    margin:0;
    z-index:2;                        /* 帯のあしらい(z-index:0)より前 */
  }
  /* 本文側にサイドバーぶんの逃げを作る。
     ⚠ 帯は全幅のままにして、**内側の読み幅だけ**を左に寄せる。
        帯自体を狭めると全幅デザインが壊れる。 */
  .kw-withSide .kw-fw__inner{
    max-width:calc(900px + var(--kw-side-w) + var(--kw-side-gap));
    padding-right:calc(var(--kw-side-w) + var(--kw-side-gap));
  }
  .kw-withSide > .kw-hero,
  .kw-withSide > .kw-heroImage,
  .kw-withSide > p,
  .kw-withSide > h2{
    max-width:calc(100% - var(--kw-side-w) - var(--kw-side-gap));
  }
  .kw-side__box{ margin-bottom:1.2rem; }
}

/* ══ §6.15 サイドバーの位置基準を帯と揃える（§6.14の修正）══════════
   ⚠ 最初 .kw-withSide を通常幅のまま position:relative にしたら、
      サイドバーの基準が「本文カラム」になり、全幅帯の内側コンテナとズレて
      **本文に146px重なった**（実測）。
   → ラッパー自体を全幅にして、帯は「その中の100%」に落とす。
      サイドバーは内側コンテナの右端（50vw - 620px）に合わせる。
   ⚠ aside はHTMLの**末尾**に置くこと。先頭に置くとスマホ（絶対配置しない）で
      ページの一番上に出る（実測で発生させた）。 */

@media (min-width:960px){
  .kw-withSide{
    position:relative;
    left:calc(50% - 50vw);
    width:100vw;
  }
  /* ラッパーが既に全幅なので、中の alignfull は素直に100%へ戻す */
  .kw-withSide .alignfull{
    left:0 !important;
    width:100% !important;
    max-width:100% !important;
  }
  /* 帯の外の要素（ヒーロー画像・H1など）は読み幅へ戻す */
  .kw-withSide > .kw-heroImage,
  .kw-withSide > .kw-hero,
  .kw-withSide > p,
  .kw-withSide > h2,
  .kw-withSide > .kw-promise{
    max-width:calc(1240px - 300px - 40px);
    margin-inline:auto;
    margin-left:max(1.6rem, calc(50vw - 620px));
    padding-right:0;
  }
  /* サイドバーは内側コンテナの右端に合わせる（1240px の半分＝620px） */
  .kw-side{
    position:absolute;
    top:0;
    right:max(1.6rem, calc(50vw - 620px));
    width:300px;
    margin:0;
    z-index:2;
  }
}

/* ══ §6.16 ハブの記事一覧（職種タグで抽出）═══════════════════════════
   core/latest-posts はタグで絞れないため自前でレンダリングしている。
   ⚠ カテゴリーアーカイブ /kaigo/ は同名の固定ページに占有されているので、
      **この一覧が記事への唯一の導線**。消さないこと。 */
.kw-artList{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.9rem; }
.kw-artList__link{
  display:flex; gap:.9rem; align-items:center;
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-radius:12px;
  padding:.7rem .9rem;
  text-decoration:none !important;
  color:var(--kw-navy);
}
.kw-artList__link:hover{ border-color:var(--kw-accent); }
.kw-artList__thumb{ flex:0 0 auto; width:96px; }   /* ⚠ flex:0 0 auto を外すと縮む */
.kw-artList__thumb img{ display:block; width:100%; height:auto; border-radius:8px; }
.kw-artList__body{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.kw-artList__title{ font-weight:700; line-height:1.5; font-size:.95rem; }
.kw-artList__date{ font-size:.78rem; color:var(--kw-navy-soft); }
@media (max-width:599px){ .kw-artList__thumb{ width:76px; } }

/* ══ §6.18 自社サービスのサイドバナー（トップ右レール・2026-08-17）═════
   社長支給の 600×500（表示300×250）バナー4枚。差し込みは
   `scripts/insert-side-banners.php`（冪等・「フォローする」の直後）。

   ⚠ `kw-afl` は付けない。GA4は **own_service_click**（`data-position="side"`）。
      アフィリに混ぜるとASP突合が壊れる（§3「自社サービス枠」と同じ扱い）。
   ⚠ **枠は運営会社の開示が役目。** ランキング対象外を連呼しない（2026-08-12 社長判断）。
   ⚠ バナーは文字が焼き込まれているので alt に中身を入れてある。
   ⚠ ここに「1位」「おすすめ」の類の装飾を足さないこと。別枠の意味が消える。 */

/* ⚠ `.post_content ul{ padding-left:var(--swl-list-padding--left) }`（SWELL・(0,1,1)）に
   負けるので、`.kw-ownSide{ padding:0 }`（0,1,0）だけでは**24px内側にずれる**
   （実測: 枠219.9pxに対し列が195.9pxしかなかった）。詳細度を上げて打ち消す。 */
.post_content .kw-ownSide{
  list-style:none;
  margin:.9rem 0 0; padding:0;
  display:grid;
  gap:.8rem;
  /* ⚠⚠ 2026-09-07: **1列に戻した。** 社長「バナーの画像全く文字が読めない」
     →「今のレジュマップぐらいがいい」（＝全幅＝260px）。
     実測（`docs/wp-swell/brand/own-side/_sizetest.png`）: このバナーは
     **222px を下回るとボタンの文字が潰れ、176px でサービス名以外読めない。**
     2列だと 1枚122px にしかならず、**レールが300pxである限り2列では絶対に読めない。**
     ⚠ 代償: 枠は 820px → 約1,780px に伸びる。トップは本文が長いので問題ないが、
       `/contents/` はレールが本文を追い越す（下の実測を参照）。
     ⚠ 2026-09-04 に2列にしたのは「収まり」のためだったが、**読めないなら意味がない。** */
  grid-template-columns:1fr;
}
/* ⚠ 1列になったので `--wide` は実質何もしない（既に全幅）。
   2列へ戻す判断が出たときのために残してある。 */
.post_content .kw-ownSide__item--wide{ grid-column:1 / -1; }
.kw-ownSide__link{
  display:block;
  border-radius:12px;
  overflow:hidden;           /* 角丸から画像がはみ出さないように */
  border:1px solid var(--kw-line);
  background:var(--kw-surface);
  line-height:0;             /* img下の余白を消す */
  text-decoration:none !important;
}
.kw-ownSide__link:hover{ border-color:var(--kw-lime-dark); }
.kw-ownSide__link img{
  display:block;
  width:100%; height:auto;
  /* ⚠ 素材は 600×500（比率1.2）。aspect-ratio を明示して、
     読み込み前のレイアウトずれ（CLS）を防ぐ。 */
  aspect-ratio:6/5;
}
/* リード文は枠の性格を説明する部分。小さくしすぎない */
.kw-ownSide__lead{ margin-top:0; }

/* ⚠ 「そのほかのサービス」（2026-09-07）。主力4件と同じ列に7枚並べると
   「多い」と言われた形に戻るので、**細い罫と小見出しで区切る。**
   ⚠ 枠を重ねない。別枠であることは親の .kw-side__box--own が担保している。 */
.kw-ownSide__more{
  margin-top:1.1rem;
  padding-top:.9rem;
  border-top:1px solid var(--kw-line);
}
.kw-ownSide__moreTitle{
  margin:0;
  font-size:.8125rem; font-weight:700;
  color:var(--kw-navy-soft);
}

@media (max-width:959px){
  /* SPではサイドバーが本文末尾に流れる（§6.14）。
     ⚠ 2026-09-04 に**PCも2列にした**ので、列数はここでは変えていない。
       残しているのは **gap を詰める**ぶんだけ（画面が狭く、余白が効きすぎるため）。
     ⚠ 集客の主軸がSNS＝SPなので「PCだけ」にはしない（クリック機会を捨てることになる）。 */
  .post_content .kw-ownSide{ gap:.7rem; }
}

/* ══ §6.17 記事アーカイブ /column/ /news/（2026-08-17）═════════════════
   記事の量産に備えた「受け皿」。トップ／4職種ハブと同じ語彙で、
   h1＋リード文を全幅のヘッダー帯に入れ、その下に一覧を置く。

   ⚠ 適用条件は functions.php の kw_is_banded_archive() ひとつに集約してある。
      サイドバーOFFと帯は**対**。CSSだけ増やしてページを足さないこと
      （サイドバーONのまま帯を出すと alignfull が潰れて半端な箱になる。§6.11）。
   ⚠ 職種タグ /tag/kaigo/ は対象外。あちらはサイドバーONのまま。
   ⚠ ここは prose ではなく一覧なので、読み幅900pxではなく 1120px を基準にする。
      **帯の内側と一覧の最大幅を必ず同じ値にすること。** ずらすと縦のラインが
      揃わず、見出しと記事カードが別のページの部品に見える。 */

.kw-archive-banded{ --kw-arch-w:1120px; }

/* 本文カラムの幅は **main.l-article の max-width:var(--article_size)（900px）** で
   決まっている（.l-mainContent__inner ではない。実測で判明）。
   帯の内側（1120px）と一覧の左右を揃えるため、このアーカイブだけ広げる。
   ⚠ 広げるのは入れ物だけ。リード文は .kw-archLead で読み幅に戻している。 */
.kw-archive-banded .l-mainContent.l-article{ max-width:var(--kw-arch-w); }

/* ── ヘッダー帯 ───────────────────────────────────────────── */
.kw-fw--archHead{ padding:3.4rem 0 3rem; }

/* 帯をパンくずの直下に密着させる。
   ⚠ 帯とヘッダーの間に白が残ると「浮いた箱」に見えて全幅の意味が消える。
   ⚠⚠ **負のマージンで詰めようとしないこと。** SWELLが
      `.l-mainContent__inner > :first-child{ margin-top:0 !important }`（main.css）を
      当てているため、詳細度をいくら上げても勝てない（実測: (0,3,0) でも 0px のまま）。
      → 打ち消すのではなく、**コンテナ側の余白を切る**。
      `.l-content{ padding-top:2em / 4em }` が余白の出どころ。こちらは !important が
      無いので (0,2,0) で上書きでき、SP（2em）とPC（4em）の両方が同時に片付く。 */
.kw-archive-banded .l-content{ padding-top:0; }

/* 左右の余白も切る。
   ⚠ 帯は alignfull でこのコンテナを飛び出すので、コンテナに左右padding が
      残っていると **帯の内側だけが基準からずれる**（SP実測: 見出し14px／一覧29.6px）。
      余白は「コンテナ」ではなく「帯の内側と一覧」の双方に同じ値で持たせる。
   ⚠ PCの中央位置は変わらない（実測: どちらでも main は x=72.5）。 */
.kw-archive-banded .l-content{ padding-inline:0; }

/* 上端の波形は出さない（帯の上に何も無いので、波の先が宙に浮く） */
.kw-fw--archHead::before{ content:none; }

.kw-fw--archHead .kw-fw__inner{ max-width:var(--kw-arch-w); }

/* 帯の中の h1。SWELL既定の24pxでは全幅の地に対して小さい */
.kw-fw--archHead .c-pageTitle{
  margin:0;
  font-family:var(--kw-font-serif);
  font-size:clamp(1.6rem, 1.15rem + 1.6vw, 2.25rem);
  line-height:1.35;
  color:var(--kw-navy);
}

/* リード文だけは読み幅に戻す（一覧の幅で流すと1行が長すぎる） */
.kw-archLead{
  max-width:760px;
  margin:.9rem 0 0;
  font-size:.95rem;
  line-height:1.9;
  color:var(--kw-navy-soft);
}
.kw-archLead p{ margin:0; }
.kw-archLead p + p{ margin-top:.5rem; }

/* ── 一覧 ─────────────────────────────────────────────────── */
/* 帯の内側（.kw-fw__inner）と**同じ max-width・同じ padding**にして、
   見出しと記事カードの左右のラインを1本に揃える。
   ⚠ 片方だけ calc で引くとズレる（実測で 900 と 1120 に割れた）。 */
.kw-archive-banded .p-termContent{
  max-width:var(--kw-arch-w);
  margin-inline:auto;
  padding-inline:1.6rem;
  /* 帯の下端の波形（-42px）と重ならない高さを確保する */
  margin-top:4.5rem;
}

/* ── 記事が0本のとき（いまの /news/）────────────────────────── */
.kw-archEmpty{
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-radius:14px;
  padding:1.6rem 1.5rem;
}
.kw-archEmpty__lead{
  margin:0;
  font-family:var(--kw-font-serif);
  font-size:1.05rem; font-weight:700;
  color:var(--kw-navy);
}
.kw-archEmpty__note{
  margin:.5rem 0 0;
  font-size:.9rem; line-height:1.8;
  color:var(--kw-navy-soft);
}
.kw-archEmpty__links{
  list-style:none;
  margin:1.1rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem;
}
/* ⚠ フレックス項目は <a> ではなく <li>。<a> に width:100% を書いても
   li が内容幅のままなので効かない（実測で 108px のまま）。幅は li で決める。 */
.kw-archEmpty__links li{ display:flex; }
.kw-archEmpty__links a{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%;
  min-height:44px;                    /* ⚠ タップ標的は44px以上 */
  padding:.4rem 1rem;
  border:1px solid var(--kw-line);
  border-radius:999px;
  background:var(--kw-bg);
  font-size:.9rem; font-weight:700;
  color:var(--kw-navy); text-decoration:none;
}
.kw-archEmpty__links a:hover{ border-color:var(--kw-lime-dark); }

@media (max-width:599px){
  .kw-fw--archHead{ padding:2.2rem 0 2.2rem; }
  .kw-archive-banded .p-termContent{
    padding-inline:1rem;
    margin-top:3rem;
  }
  .kw-archEmpty{ padding:1.2rem 1.1rem; }
  /* SPは2列。4職種とも5〜6文字なので1列に伸ばすより収まりが良い */
  .kw-archEmpty__links li{ flex:1 1 calc(50% - .3rem); }
}

/* ---- ニュース一覧だけ日付を主役にする（2026-09-02）------------------------
   ニュースは鮮度が価値。SWELL既定では日付が `u-thin` で薄いメタ情報として
   タイトルの下に出るが、それでは「いつの話か」が一覧で追えない。
   ⚠ 適用は `.kw-archive-news`（`/news/` の一覧のみ）。column には効かせない。
     column は「いつ書かれたか」より内容で読ませるため。
   ⚠ WP標準の `.category-news` に相乗りしない（記事ページまで巻き込む）。
   ⚠ カード内部の実DOM（2026-09-02 に本番で実測）:
       .p-postList__body
         ├ .p-postList__title (h2)
         ├ .p-postList__excerpt
         └ .p-postList__meta
             └ .p-postList__times > time.c-postTimes__posted
     **日付は meta の中＝flexの孫**。`.p-postList__times` に order を当てても効かない
     （一度それで外した）。**order は `.p-postList__meta` に当てる。**
     SWELLを更新したら `/news/` の一覧を目視すること。
   ⚠ 年月での区切り（「2026年9月」の見出しを挟む）は入れていない。
     投稿ループへの割り込みが要るうえ、**記事0本では見た目を検証できない**ため。
     記事が数本入ってから、実物を見て判断する。 */
.kw-archive-news .p-postList__body{
  display:flex; flex-direction:column;
}
/* 日付を含む meta ごと先頭へ。title / excerpt は自然順のまま */
.kw-archive-news .p-postList__meta{ order:-1; margin:0 0 .5em; }

/* `u-thin` の薄さを打ち消して前面へ。⚠ 色は navy-soft まで。承認色は使わない */
.kw-archive-news .p-postList__times.u-thin,
.kw-archive-news .c-postTimes{
  opacity:1;
  font-size:.8125rem; font-weight:700; letter-spacing:.02em;
  color:var(--kw-navy-soft);
}
/* 日付の前に短い罫を引いて、時系列の並びに見せる */
.kw-archive-news .c-postTimes__posted{
  position:relative; padding-left:1.5em;
}
.kw-archive-news .c-postTimes__posted::before{
  content:""; position:absolute; left:0; top:.62em;
  width:1em; height:2px; background:var(--kw-pink);
}
/* SWELLのアイコンフォントは消す（罫と二重になるため） */
.kw-archive-news .c-postTimes__posted.icon-posted::after{ content:none; }

@media (max-width:599px){
  .kw-archive-news .p-postList__times.u-thin,
  .kw-archive-news .c-postTimes{ font-size:.75rem; }
}

/* ══ §6.19 記事カードの職種バッジ（2026-08-17）═══════════════════════
   分類再編で `/column/` のカードが4枚とも「お役立ちコンテンツ」になり、
   バッジの情報量がゼロだった。職種を出すように差し替えてある
   （functions.php の swl_parts__post_list_category）。

   ⚠ **地はnavyのまま。職種色を地にしない。**
      バッジはサムネイル画像の**上**に乗るので、淡いティントだと画像に負ける。
      色は「罫」で示す＝承認色の使い方の原則（面・罫・マーカー地・CTAのみ）どおり。
   ⚠ 職種の判定は `data-kw-vertical`。**`data-cat-id` を使わない**
      （CSSに term_id を直書きすると、タグを作り直した瞬間に無言で壊れる）。 */

.c-postThumb__cat[data-kw-vertical]{
  border-left:4px solid var(--kw-accent, var(--kw-lime));
}
.c-postThumb__cat[data-kw-vertical="eiyoushi"]{ --kw-accent:var(--kw-accent-eiyoushi); }
.c-postThumb__cat[data-kw-vertical="kaigo"]   { --kw-accent:var(--kw-accent-kaigo); }
.c-postThumb__cat[data-kw-vertical="kango"]   { --kw-accent:var(--kw-accent-kango); }
.c-postThumb__cat[data-kw-vertical="hoiku"]   { --kw-accent:var(--kw-accent-hoiku); }

/* ══ §6.20 トップ「職種別の記事」（2026-08-17）════════════════════════
   トップからは職種ハブへは行けるが、**どの職種にどんな記事があるか**が
   見えなかった（「新着の記事」スライダーは時系列で職種が混ざる）。社長指示。

   ⚠ PCは2列×2段。**4列にしない。** 帯の内側が900pxで、さらにトップは
      サイドバーぶん（340px）逃げているため、4列だと1列210px程度になり
      日本語のタイトルが2〜3行に折れて読めない。
   ⚠ 記事0本の職種も**枠は出す**（準備中と書く）。4職種そろえないと
      「この職種は扱っていない」と読まれる。
   ⚠ 「もっと見る」の行き先は職種ハブ。タグ一覧 /tag/{職種}/ は noindex なので送らない。 */

.kw-byJob{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
  margin-top:1.2rem;
}
.kw-byJob__col{
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-top:4px solid var(--kw-accent, var(--kw-lime));
  border-radius:12px;
  padding:1rem 1.1rem 1.1rem;
  display:flex; flex-direction:column;
}
.kw-byJob__col--eiyoushi{ --kw-accent:var(--kw-accent-eiyoushi); }
.kw-byJob__col--kaigo   { --kw-accent:var(--kw-accent-kaigo); }
.kw-byJob__col--kango   { --kw-accent:var(--kw-accent-kango); }
.kw-byJob__col--hoiku   { --kw-accent:var(--kw-accent-hoiku); }

.kw-byJob__name{
  margin:0 0 .6rem;
  font-family:var(--kw-font-serif);
  font-size:1.05rem; font-weight:700;
  color:var(--kw-navy);
}
/* ⚠ `.post_content ul` の padding-left に負けるので `.post_content` を前置する（§2-26.3） */
.post_content .kw-byJob__list{
  list-style:none; margin:0; padding:0;
  flex:1 1 auto;
}
.kw-byJob__list li{ border-top:1px solid var(--kw-line); }
.kw-byJob__list li:first-child{ border-top:none; }
.kw-byJob__list a{
  display:block;
  padding:.55rem .1rem;
  font-size:.92rem; line-height:1.6;
  color:var(--kw-navy); text-decoration:none !important;
}
.kw-byJob__list a:hover{ text-decoration:underline !important; text-decoration-color:var(--kw-accent) !important; }
.kw-byJob__empty{
  flex:1 1 auto;
  margin:0; padding:.5rem 0;
  font-size:.88rem; color:var(--kw-navy-soft);
}
.kw-byJob__more{
  display:inline-flex; align-items:center;
  align-self:flex-start;
  min-height:44px;                  /* ⚠ タップ標的は44px以上 */
  margin-top:.7rem;
  padding:.35rem .95rem;
  border:1px solid var(--kw-line);
  border-radius:999px;
  background:var(--kw-bg);
  font-size:.87rem; font-weight:700;
  color:var(--kw-navy); text-decoration:none !important;
}
.kw-byJob__more:hover{ border-color:var(--kw-accent); }

@media (max-width:599px){
  .kw-byJob{ grid-template-columns:1fr; gap:.9rem; }
  .kw-byJob__more{ width:100%; justify-content:center; }
}

/* ══ §6.21 記事本文のコピー抑止（2026-08-17 社長判断）════════════════
   ⚠⚠ **防止ではなく抑止。** ソース表示・JS無効化・リーダーモード・
      スクレイパー・AIクローラーには一切効かない。「対策済み」と考えないこと。
      挙動と、あえてやっていないことは assets/kw-copy-guard.js の冒頭に書いてある。

   ⚠ 適用は **単一投稿の .post_content だけ**（body の kw-protect で絞る）。
      サイト全体にかけると検索欄・フォーム・サイドバー・URLのコピーまで巻き込む。
   ⚠ 職種ハブ（固定ページ）は対象外。「入る前に聞く質問リスト」は
      読者が面接に持っていくために**コピーしてほしい**道具なので塞がない。
   ⚠ user-select はスクリーンリーダーの読み上げもブラウザ翻訳も妨げない。
      妨げるのは「選択してコピー」だけ。 */

.kw-protect .post_content{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;   /* iOSの長押しメニュー（画像を保存 等） */
}

/* ⚠ 入力欄は必ず除外する。選択できないと入力の修正ができない。
   （いまの記事本文には無いが、将来フォームを埋め込んだときに無言で壊れる） */
.kw-protect .post_content input,
.kw-protect .post_content textarea,
.kw-protect .post_content [contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

/* ⚠ リンクは長押しメニューを残す（JS側も <a> を除外している）。
   記事内のCTA・ハブ導線を「新しいタブで開く」を塞ぐと click-out を捨てることになる。 */
.kw-protect .post_content a{
  -webkit-touch-callout:default;
}

/* ══ §6.22 職種フィルタ「職種から探す」（2026-08-28）═══════════════════
   記事が40本になり、`/column/` では4職種が混ざって目的の職種を追えなくなった。
   参考: ジョブメドレー /tips/ の「職種ごとに記事を読む」。
   あちらも**職種はタグ**で持っており、構造の判断は同じでよいと実物で確認した。

   ⚠ 行き先は `/tag/{職種}/`。職種ハブ `/kaigo/` ではない（ハブは3,500字の読み物で、
      記事一覧は9セクション中の8番目。一覧を見たい読者をあそこへ送らない）。
   ⚠ 職種色は**罫と現在地の面**だけ。文字は navy のまま（承認色の原則）。
   ⚠ 現在地は色だけで示さない。`aria-current` と太字も併用する
      （色覚に依存させない）。 */

.kw-vFilter{ margin-top:1.4rem; }
.kw-vFilter__label{
  margin:0 0 .55rem;
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
  color:var(--kw-navy-soft);
}
/* ⚠ `.post_content ul` の padding-left に負けるので `.post_content` を前置（§2-26.3）。
   ⚠ アーカイブは post_content 配下ではないが、将来固定ページに置いても崩れないよう両方書く。 */
.kw-vFilter__list,
.post_content .kw-vFilter__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.kw-vFilter__item{
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:44px;                     /* ⚠ タップ標的は44px以上 */
  padding:.35rem .95rem;
  border:1px solid var(--kw-line);
  border-radius:999px;
  background:var(--kw-surface);
  font-size:.9rem; font-weight:700;
  color:var(--kw-navy); text-decoration:none !important;
  white-space:nowrap;
}
.kw-vFilter__item:hover{ border-color:var(--kw-accent, var(--kw-lime-dark)); }

/* 職種ごとの罫（面ではなく罫で示す） */
.kw-vFilter__item--kaigo   { --kw-accent:var(--kw-accent-kaigo);    border-left:4px solid var(--kw-accent); }
.kw-vFilter__item--kango   { --kw-accent:var(--kw-accent-kango);    border-left:4px solid var(--kw-accent); }
.kw-vFilter__item--hoiku   { --kw-accent:var(--kw-accent-hoiku);    border-left:4px solid var(--kw-accent); }
.kw-vFilter__item--eiyoushi{ --kw-accent:var(--kw-accent-eiyoushi); border-left:4px solid var(--kw-accent); }

/* 現在地。⚠ 色だけで示さない（太字＋地の反転＋aria-current） */
.kw-vFilter__item.is-current{
  background:var(--kw-navy);
  border-color:var(--kw-navy);
  color:#fff;
}
.kw-vFilter__item.is-current .kw-vFilter__count{
  background:rgba(255,255,255,.22);
  color:#fff;
}

.kw-vFilter__count{
  display:inline-block;
  min-width:1.6em;
  padding:.05em .4em;
  border-radius:999px;
  background:var(--kw-bg);
  font-size:.76rem; font-weight:700;
  color:var(--kw-navy-soft);
  text-align:center;
}

@media (max-width:599px){
  .kw-vFilter{ margin-top:1.1rem; }
  .kw-vFilter__list{ gap:.45rem; }
  .kw-vFilter__item{ padding:.3rem .75rem; font-size:.86rem; }
}

/* ══ §6.23 アーカイブの右ナビ（2026-08-28）════════════════════════════
   参考: ジョブメドレー /tips/ の左サイドナビ（280px幅・実測）。
   ⚠ **側は右**にした。トップの aside.kw-side が右なので、サイト内で側を割らないため。
      左に寄せたいなら下の order を入れ替えるだけでよい。

   ⚠⚠ **DOM上はナビが記事一覧より“前”にある。** 右配置は order で作っている。
      SWELLの archive-term.php には記事一覧の後ろにフックが無く、
      DOM順で右に置くには親テンプレートの複製が要るため（更新に弱くなるので採らない）。

   ⚠ SWELL標準のサイドバーは使えない（サイドバーONだと alignfull が潰れる。§6.11）。
      ここは `.l-mainContent__inner` を flex にして自前で2カラムを作っている。
   ⚠ 帯（.kw-fw--archHead）は flex-basis:100% で必ず1行を占有させる。
      これを外すと帯がカラムの中に入り、全幅が壊れる。 */

/* ⚠⚠ **flex ではなく grid を使う。**
   flex にすると `flex:0 0 100%` の flex-basis が `.alignfull{width:100vw}` を上書きし、
   **帯が全幅(1265px)ではなくカラム幅(1120px)に縮む**（実測で踏んだ）。
   grid には flex-basis が無いので、帯は width:100vw のまま全幅を保てる。

   ⚠ DOM順は [帯][ナビ][一覧]（SWELLに一覧の後ろのフックが無いため）。
      **行を明示**して見た目の順を作る。SPでも grid のままにして、
      ナビを3行目へ送る（display:block に戻すとDOM順どおりナビが一覧の上に出る。実測で踏んだ）。 */
.kw-archive-banded{ --kw-archNav-w:280px; --kw-archNav-gap:40px; }
.kw-archive-banded .l-mainContent__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.kw-archive-banded .kw-fw--archHead{ grid-column:1 / -1; grid-row:1; }
.kw-archive-banded .p-termContent{ grid-row:2; }
.kw-archive-banded .kw-archNav{ grid-row:3; }

@media (min-width:960px){
  /* PCは2カラム。ナビは2列目の2行目へ。
     ⚠⚠ 2026-08-31 修正: ここは以前、**コメントの閉じ漏れで地の文が3行むき出し**になっており、
        CSSパーサが壊れて直後の grid-template-columns / column-gap / align-items が
        **丸ごと捨てられていた**（実測: computed が `733.609px 386.391px`、column-gap が `normal`）。
        それでも2カラムに見えていたのは、下の `.kw-archNav{ grid-column:2 }` が
        **暗黙の列**を作っていたため。列幅が「中身なり」だったので、
        ナビの中身を変えた瞬間に 280px → 386px に広がって記事一覧を圧迫した。
        **見た目が成立してしまうので気づけない類のバグ。**
     ⚠ flex にしないこと。`flex:0 0 100%` の flex-basis が `.alignfull{width:100vw}` を
        上書きし、帯が全幅(1265px)ではなくカラム幅(1120px)に縮む（実測で踏んだ）。
        grid には flex-basis が無いので、帯は width:100vw のまま全幅を保てる。 */
  .kw-archive-banded .l-mainContent__inner{
    grid-template-columns:minmax(0,1fr) var(--kw-archNav-w);
    column-gap:var(--kw-archNav-gap);
    align-items:start;
  }
  .kw-archive-banded .p-termContent{
    grid-column:1; grid-row:2;
    max-width:none;
    margin-inline:0;
    min-width:0;
  }
  .kw-archive-banded .kw-archNav{ grid-column:2; grid-row:2; }

  /* 帯の内側もナビぶん逃がして、見出しと記事一覧の右端を揃える */
  .kw-fw--archHead .kw-fw__inner{
    padding-right:calc(var(--kw-archNav-w) + var(--kw-archNav-gap) + 1.6rem);
  }

  /* 上部のチップはPCでは重複するので隠す（ナビ側に同じものがある） */
  .kw-archive-banded .kw-vFilter{ display:none; }
}

/* ── ナビ本体 ───────────────────────────────────────── */
.kw-archNav{ margin-top:4.5rem; }
.kw-archNav__box{
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-radius:14px;
  padding:1.1rem 1.2rem;
  margin-bottom:1rem;
}
.kw-archNav__title{
  margin:0 0 .7rem;
  padding-left:.55rem;
  border-left:4px solid var(--kw-lime);
  font-family:var(--kw-font-serif);
  font-size:1rem; font-weight:700;
  color:var(--kw-navy);
}
/* ⚠ `.post_content ul` の padding-left に負けるので両方書く（§2-26.3） */
.kw-archNav__list,
.post_content .kw-archNav__list{ list-style:none; margin:0; padding:0; }
.kw-archNav__list li{ border-bottom:1px solid var(--kw-line); }
.kw-archNav__list li:last-child{ border-bottom:none; }

.kw-archNav__link{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  min-height:44px;                      /* ⚠ タップ標的は44px以上 */
  padding:.55rem .2rem;
  font-size:.9rem; font-weight:500;
  color:var(--kw-navy); text-decoration:none !important;
}
.kw-archNav__link:hover{ text-decoration:underline !important; text-decoration-color:var(--kw-accent, var(--kw-lime-dark)) !important; }

/* 職種色は左罫だけ。⚠ 地にしない（承認色の原則） */
.kw-archNav__link--kaigo   { --kw-accent:var(--kw-accent-kaigo);    border-left:4px solid var(--kw-accent); padding-left:.6rem; }
.kw-archNav__link--kango   { --kw-accent:var(--kw-accent-kango);    border-left:4px solid var(--kw-accent); padding-left:.6rem; }
.kw-archNav__link--hoiku   { --kw-accent:var(--kw-accent-hoiku);    border-left:4px solid var(--kw-accent); padding-left:.6rem; }
.kw-archNav__link--eiyoushi{ --kw-accent:var(--kw-accent-eiyoushi); border-left:4px solid var(--kw-accent); padding-left:.6rem; }

/* 現在地。⚠ 色だけで示さない（太字＋地＋aria-current） */
.kw-archNav__link.is-current{
  background:var(--kw-bg);
  font-weight:700;
  border-radius:8px;
}
.kw-archNav__count{
  flex:0 0 auto;
  min-width:1.7em; padding:.05em .45em;
  border-radius:999px;
  background:var(--kw-bg);
  font-size:.76rem; font-weight:700;
  color:var(--kw-navy-soft);
  text-align:center;
}
.kw-archNav__link.is-current .kw-archNav__count{ background:#fff; }
.kw-archNav__note{
  margin:.6rem 0 0;
  font-size:.78rem; line-height:1.7;
  color:var(--kw-navy-soft);
}

/* SPではナビを記事一覧の下へ。⚠ 上部のチップが絞り込みを担うので重複しない */
@media (max-width:959px){
  /* ⚠ ナビにも一覧と同じ左右余白を持たせる。無いと画面端に貼りつく（実測で踏んだ）。 */
  .kw-archNav{ margin-top:2.4rem; padding-inline:1.6rem; }
}
@media (max-width:599px){
  .kw-archNav{ padding-inline:1rem; }
}

/* ==========================================================================
   職種セレクタ .kw-vpick（2026-08-31）
   ⚠ 社長指摘「職種から選ぶのところ地味すぎる／手抜き感満載」への対応。
     これまで職種の導線は全部プレーンな <ul> のテキストリンクだった。
     職種はこのサイトの主軸なのに、視覚的な扱いがゼロだった。

   ⚠ 承認10色のHexは変えていない。:root にある --kw-tint-{職種} / --kw-accent-{職種}
     （このファイルの40〜46行目）をそのまま使っている。
   ⚠ **文字色は必ず navy。** ライム／ピンクは面と罫だけ（ブランド禁則）。
     ティント地の上の文字を職種色にしないこと。看護師のピンク #E5388A を
     #FCE8F1 の上に置くと 3.2:1 で本文サイズでは通らない（実測）。
   ========================================================================== */

.kw-vpick__title{
  margin:0 0 .7rem;
  font-family:var(--kw-font-serif);
  font-weight:700; font-size:1.0625rem;
  color:var(--kw-navy);
  letter-spacing:.02em;
}
.kw-vpick__list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
/* ⚠ `.post_content ul` の padding-left に負けるので前置が要る（§2-26.3 と同じ罠） */
.post_content .kw-vpick__list{ list-style:none; margin:0; padding:0; }

/* ⚠ 2026-09-01: 地と罫は **li（.kw-vpick__item）側** に移した。
   カードの下にハブへの副リンク（.kw-vpick__hub）を兄弟として置くため。
   ⚠ `<a>` の入れ子はHTMLとして不正なので、副リンクをカードの中に入れないこと。 */
.kw-vpick__item{
  background:var(--kw-tint, var(--kw-surface));
  border:1px solid var(--kw-line);
  border-left:5px solid var(--kw-accent, var(--kw-lime-dark));
  border-radius:10px;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
/* 職種ごとの地と罫。data属性で当てているのは term_id を CSS に直書きしないため
   （タグを作り直すと壊れる。§3 のバッジと同じ理由）。 */
.kw-vpick__item[data-kw-vertical="kaigo"]   { --kw-tint:var(--kw-tint-kaigo);    --kw-accent:var(--kw-accent-kaigo); }
.kw-vpick__item[data-kw-vertical="kango"]   { --kw-tint:var(--kw-tint-kango);    --kw-accent:var(--kw-accent-kango); }
.kw-vpick__item[data-kw-vertical="hoiku"]   { --kw-tint:var(--kw-tint-hoiku);    --kw-accent:var(--kw-accent-hoiku); }
.kw-vpick__item[data-kw-vertical="eiyoushi"]{ --kw-tint:var(--kw-tint-eiyoushi); --kw-accent:var(--kw-accent-eiyoushi); }
.kw-vpick__item:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(38,48,74,.10); }
/* 現在地は色だけで示さない。地を反転して罫を太くする（色覚に依存させない） */
.kw-vpick__item.is-current{
  background:var(--kw-surface);
  border-left-width:9px;
  box-shadow:inset 0 0 0 1px var(--kw-accent);
}

.kw-vpick__link{
  display:block;
  padding:.85rem 1rem .9rem;
  min-height:44px;
  color:var(--kw-navy);
  text-decoration:none;
}
.kw-vpick__link:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:-3px; }

/* 職種ハブへの副リンク。**カードの主役は記事一覧**なので、こちらは控えめに。
   ⚠ 「選び方を見る」では何のページか伝わらない（社長指摘）。
      ハブの中身（働く場所のちがい／求人票の分解／聞く質問リスト）をそのまま言う。 */
.kw-vpick__hub{
  display:flex; align-items:center; justify-content:space-between;
  gap:.4rem;
  padding:.55rem 1rem;
  min-height:44px;
  background:color-mix(in srgb, var(--kw-surface) 72%, transparent);
  border-top:1px solid color-mix(in srgb, var(--kw-accent) 32%, transparent);
  color:var(--kw-navy);
  font-size:.8125rem; font-weight:700;
  text-decoration:none;
}
.kw-vpick__hub:hover{ background:var(--kw-surface); }
.kw-vpick__hub:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:-3px; }
.kw-vpick__arrow{ flex:0 0 auto; }

.kw-vpick__head{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.kw-vpick__name{
  font-family:var(--kw-font-serif);
  font-weight:700; font-size:1.1875rem; line-height:1.4;
  color:var(--kw-navy);
}
.kw-vpick__count{ font-size:.8125rem; color:var(--kw-navy-soft); white-space:nowrap; }
.kw-vpick__count b{ font-size:1.0625rem; color:var(--kw-navy); }
.kw-vpick__sub{
  display:block; margin-top:.3rem;
  font-size:.8125rem; line-height:1.65;
  color:var(--kw-navy-soft);
}

/* --- 右レール／右ナビ用（幅280px前後）。1列で縦に積む --- */
.kw-vpick--rail .kw-vpick__list{ gap:.5rem; }
.kw-vpick--rail .kw-vpick__name{ font-size:1.125rem; }

/* --- 全幅の出口ブロック用。PC 4列 → SP 2列 --- */
.kw-fw--exit{ padding:2.8rem 0 3rem; }
.kw-fw--exit .kw-fw__inner{ max-width:1120px; }
.kw-exit__title{
  margin:0 0 .4rem;
  font-family:var(--kw-font-serif);
  font-size:1.5rem; font-weight:700; color:var(--kw-navy);
}
.kw-exit__lead{ margin:0 0 1.2rem; font-size:.9375rem; line-height:1.9; color:var(--kw-navy); }
.kw-vpick--exit .kw-vpick__list{ grid-template-columns:repeat(4,1fr); gap:.8rem; }
.kw-vpick--exit .kw-vpick__item{ display:flex; flex-direction:column; }
.kw-vpick--exit .kw-vpick__link{ flex:1 1 auto; padding:1rem 1.1rem 1.1rem; }
.kw-vpick--exit .kw-vpick__name{ font-size:1.25rem; }

@media (max-width:959px){
  /* ⚠ 4枚を縦に積むと約900pxの壁になる。自社バナーと同じ理由で2列にする（§3） */
  .kw-vpick--exit .kw-vpick__list{ grid-template-columns:1fr 1fr; }
  .kw-fw--exit{ padding:2rem 0 2.2rem; }
  .kw-exit__title{ font-size:1.25rem; }
}
@media (max-width:380px){
  .kw-vpick--exit .kw-vpick__list{ grid-template-columns:1fr; }
}

/* --- 出口ブロックの囲み版（サイドバーONのページ＝記事）------------------------
   ⚠ 記事は `.-sidebar-on` なので alignfull が潰れる。全幅にせず本文幅の囲みにする。 */
.kw-exit--boxed{
  margin:3.2rem 0 1rem;
  padding:1.6rem 1.6rem 1.8rem;
  background:color-mix(in srgb, var(--kw-lime) 13%, #fff);
  border-radius:14px;
}
.kw-exit--boxed .kw-exit__title{ font-size:1.25rem; }
.kw-exit--boxed .kw-vpick__list{ grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:600px){
  .kw-exit--boxed{ padding:1.2rem 1.1rem 1.3rem; }
  .kw-exit--boxed .kw-vpick__list{ grid-template-columns:1fr; }
}

/* --- 淡いCTA（ハブの「すべて見る」など。ピンクグラデCTAと役割を割る）----------
   ⚠ `.kw-cta` のピンクグラデは「1画面に1つ」の約束。数を増やすと本命が埋もれる。
     ここは navy の輪郭で、CTAという語彙を薄めない。 */
.kw-cta--ghost{
  display:inline-block;
  padding:.75rem 1.4rem;
  min-height:44px;
  background:var(--kw-surface);
  border:2px solid var(--kw-navy);
  border-radius:999px;
  /* ⚠⚠ **`!important` を外さないこと。**
     このクラスは必ず `class="kw-cta kw-cta--ghost"` の形で使われており、
     `.kw-cta` 側が `color:#fff !important` を持っている。
     こちらに `!important` が無いと**白地に白文字**になり、**文字が消える**。
     実測（2026-09-02）: コントラスト **1.00**。ボタンの枠だけが出て中身が見えない状態だった。
     ⚠ 発見が遅れた理由: この組み合わせは3箇所で使われているが、
       うち2つ（ハブの「すべて見る」＝1職種19本超で発火／ニュースの「すべて見る」＝5本以上）が
       **一度も条件を満たしておらず、本番に出たことが無かった**。
       記事は1日4本増えるので、数日後にハブへ**白文字のボタン**が出るところだった。
     ⚠ 同じ理由で `:hover` の `color:#fff` にも `!important` が要る。 */
  color:var(--kw-navy) !important;
  font-weight:700; font-size:.9375rem;
  text-decoration:none;
}
.kw-cta--ghost:hover{ background:var(--kw-navy); color:#fff !important; }
.kw-cta--ghost:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:2px; }
.kw-artList__more{ margin:1.4rem 0 0; text-align:center; }

/* --- アーカイブ右ナビ：「すべての記事」を職種セレクタの上に置く --- */
.kw-archNav__all{ margin:0 0 .55rem; }
.kw-archNav__all .kw-archNav__link{ display:block; }

/* --- トップ「職種別の記事」を職種セレクタと同じ語彙に揃える（2026-08-31）------
   ⚠ 社長指摘「職種別の記事のところも雑すぎる」。見出しが 1.05rem で、
     その下に長いタイトルが3本並ぶだけだった。見出しを立てて職場例と本数を足す。 */
.kw-byJob__col[data-kw-vertical="kaigo"]   { --kw-tint:var(--kw-tint-kaigo);    --kw-accent:var(--kw-accent-kaigo); }
.kw-byJob__col[data-kw-vertical="kango"]   { --kw-tint:var(--kw-tint-kango);    --kw-accent:var(--kw-accent-kango); }
.kw-byJob__col[data-kw-vertical="hoiku"]   { --kw-tint:var(--kw-tint-hoiku);    --kw-accent:var(--kw-accent-hoiku); }
.kw-byJob__col[data-kw-vertical="eiyoushi"]{ --kw-tint:var(--kw-tint-eiyoushi); --kw-accent:var(--kw-accent-eiyoushi); }

/* 見出しはティント地のブロックにして、そのままハブへのリンクにする */
.kw-byJob__head{
  display:block;
  margin:-1rem -1.1rem .9rem;              /* カードの padding を食い切って地を端まで */
  padding:.9rem 1.1rem 1rem;
  background:var(--kw-tint);
  border-radius:8px 8px 0 0;
  color:var(--kw-navy);
  text-decoration:none;
}
.kw-byJob__head:hover .kw-byJob__name{ text-decoration:underline; text-decoration-color:var(--kw-accent); }
.kw-byJob__head:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:-3px; }
.kw-byJob__nameRow{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.kw-byJob__name{
  font-family:var(--kw-font-serif);
  font-weight:700; font-size:1.375rem; line-height:1.35;
  color:var(--kw-navy);
}
.kw-byJob__count{ font-size:.8125rem; color:var(--kw-navy-soft); white-space:nowrap; }
.kw-byJob__count b{ font-size:1.0625rem; color:var(--kw-navy); }
.kw-byJob__sub{
  display:block; margin-top:.25rem;
  font-size:.78rem; line-height:1.6; color:var(--kw-navy-soft);
}
@media (max-width:599px){
  .kw-byJob__name{ font-size:1.1875rem; }
}

/* ==========================================================================
   検索（2026-08-31）
   ⚠ 検索はヘッダーのアイコンにしか無かった。1,000本計画では主要動線になるので、
     アーカイブ右ナビに常設する（ジョブメドレーも側ナビに置いている・実測）。
   ========================================================================== */

/* スクリーンリーダー用。label を消さずに見た目だけ隠す
   ⚠ display:none / visibility:hidden にしないこと（読み上げからも消える） */
.kw-vh{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

.kw-search{ display:flex; gap:.4rem; }
.kw-search__input{
  flex:1 1 auto; min-width:0;      /* ⚠ min-width:0 が無いと flex 項目が縮まず溢れる */
  height:44px;                      /* タップ標的 */
  padding:0 .8rem;
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-radius:8px;
  color:var(--kw-navy);
  font-size:.9375rem;
}
.kw-search__input::placeholder{ color:var(--kw-navy-soft); opacity:1; }
.kw-search__input:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:1px; }
.kw-search__btn{
  flex:0 0 auto;
  height:44px; padding:0 1rem;
  background:var(--kw-navy); color:#fff;   /* navy地に白＝13.09:1 */
  border:none; border-radius:8px;
  font-weight:700; font-size:.9375rem;
  cursor:pointer;
}
.kw-search__btn:hover{ background:#1b2338; }
.kw-search__btn:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:2px; }

/* 検索結果の見出しに出す件数。
   ⚠ 見出しは wp_kses( $title, SWELL::$allowed_text_html ) を通るので span だけ使う。 */
.kw-searchCount{
  display:inline-block;
  margin-left:.6em;
  padding:.15em .7em;
  background:var(--kw-navy); color:#fff;
  border-radius:999px;
  font-family:var(--kw-font-sans, inherit);
  font-size:.9375rem; font-weight:700;
  vertical-align:middle;
}

/* 0件のときの逃げ道。⚠ ここに職種セレクタを出す（行き止まりにしない） */
.kw-archEmpty .kw-vpick{ margin-top:1.2rem; }

/* ==========================================================================
   6.24 職種ハブのヘッダー帯（2026-09-01）
   ⚠ ハブは**このサイトの本命ページ**（検索の入口・全記事の kw-pick の送り先）なのに、
     H1が24px・帯なしで、ただの一覧ページ /column/（36px・全幅帯）より弱く見えていた。
     実測: /kaigo/ = 24px・帯なし・本文900px内 ／ /column/ = 36px・全幅1265pxの帯。

   ⚠⚠ **`swl_parts__page_title` を上書きしないこと。**
      あの pluggable part は archive.php / search.php / author.php / top_title_area.php も
      通る（実測）。`if ( ! function_exists() )` で守られているので子テーマで定義すると
      **親の実装が二度と読まれなくなり**、全部を自分で再実装することになる。
      → テンプレートには触らず、body の `.kw-hub`（functions.php で付与）を足がかりに
        CSSだけで帯にする。

   ⚠⚠ **`left:calc(50% - 50vw); width:100vw` は使わない。**
      SWELLの .alignfull はこの式だが、`100vw` は**スクロールバーを含む**ので
      本文カラムの中心（実測 x=633）とビューポート中心（640.5）が 7.5px ずれ、
      帯が右へはみ出して横スクロールが出る（§2-26.9 と同根）。
      → `box-shadow` を横へ広げて地を描く。box-shadow はスクロール領域を広げないので
        **構造的に横スクロールが出ない**。`clip-path` で上下だけ切る。
   ========================================================================== */

/* 帯をパンくずの直下に密着させる。⚠ 負のマージンでは詰められない（§6.17 と同じ理由。
   SWELLの `.l-mainContent__inner > :first-child{ margin-top:0 !important }` に勝てない）。
   コンテナ側の padding-top を切る。 */
.kw-hub .l-content{ padding-top:0; }

.kw-hub .c-pageTitle{
  position:relative;
  margin:0 0 2.4rem;
  padding:3rem 0 2.6rem;
  /* 地は職種のティント。`.category-{職種}` が --kw-tint を差し替えている（§6）。
     ⚠ 文字は navy のまま。ティントの上に職種色の文字を置かない（ブランド禁則）。 */
  background:var(--kw-tint, var(--kw-surface));
  box-shadow:0 0 0 100vmax var(--kw-tint, var(--kw-surface));
  clip-path:inset(0 -100vmax);
  /* ⚠ ここに border-bottom を付けない。罫は要素（本文カラム900px）にしか乗らず、
     地は box-shadow で全幅に伸びるため、**帯の幅でも文字の幅でもない中途半端な罫**になる
     （一度入れて実測し、外した）。地の色だけで職種を示す。/column/ の帯にも罫は無い。 */
  font-family:var(--kw-font-serif);
  /* /column/ の帯と同じ字送り。片方だけ変えないこと */
  font-size:clamp(1.6rem, 1.15rem + 1.6vw, 2.25rem);
  line-height:1.35;
  color:var(--kw-navy);
}

/* SWELLの見出しスタイル（data-style="b_bottom" 等）の装飾を止める。
   帯がその役割を担うので、二重に罫が出るとうるさい。 */
.kw-hub .c-pageTitle[data-style]::before,
.kw-hub .c-pageTitle[data-style]::after{ content:none; }
.kw-hub .c-pageTitle .c-pageTitle__inner{
  display:block;
  border:none;
  padding:0;
}

@media (max-width:959px){
  .kw-hub .c-pageTitle{ padding:2.2rem 0 1.9rem; margin-bottom:1.8rem; }
}

/* ⚠ H1のテキストを本文の左端に揃える。
   `.post_content` は **960px以上でだけ** padding-inline:16px を持つ（実測: 959px=0 / 960px=16）。
   H1 は .post_content の外（.l-mainContent__inner の直下）にあるのでその余白を受けない。
   揃えないと **PCだけ H1 が本文より16px左**にずれる（実測: H1 182.5 / 本文 198.5）。
   ⚠ SPは .post_content の padding が0なので、足すとかえってずれる。**PCだけに当てること。** */
@media (min-width:960px){
  .kw-hub .c-pageTitle{ padding-inline:16px; }
}


/* ==========================================================================
   6.25 記事一覧カードの抜粋（2026-09-01）
   ⚠ 実測: 抜粋が123〜143文字・137〜156px（6〜7行）で行数制限が無く、
     カード高さが 395/415 と不揃いだった。一覧は「拾い読みして選ぶ」画面なので、
     本文を読ませる長さは要らない。3行で切る。
   ⚠ 先頭の「この記事の要点」は functions.php 側（kw_strip_lead_boilerplate）で落としている。
     **10枚すべてが同じ7文字で始まっていた**（実測）。CSSではなくテキスト側の問題。
   ========================================================================== */
.p-postList__excerpt{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}

/* ==========================================================================
   6.26 記事本文の写真（2026-09-01）
   ⚠ 実測: 1記事に3枚・高さ 586 / 521 / 521px ＝ **合計1,628px。ページ全体の13.6%**。
     しかも縦横比が 1.33 / 1.50 / 1.50 とバラバラで、スクロールの調子が崩れていた。
   ⚠ 3枚とも「入浴用チェア」「頭を抱える」「突っ伏す」＝**情報を持たない飾り写真**。
     読ませたいのは6,900字の本文なので、飾りに画面の6割を渡さない。
   → 16:9 に統一（782×440）。合計 1,628 → 1,320px。3枚が同じ形になる。

   ⚠ 対象は `figure.wp-block-image` の中の img だけ。
     吹き出しのアイコン・自社バナー・職種セレクタなど他の画像を巻き込まないこと。
   ⚠ object-fit:cover なので上下が11%切れる。人物が端に寄った写真を入れるときは
     `object-position` で寄せ直すか、この節の対象から外す。
   ========================================================================== */
.post_content figure.wp-block-image > img,
.post_content figure.wp-block-image > a > img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:10px;
}

/* ⚠ 図表・スクリーンショットなど「中身を見せる」画像は切らない。
   その場合は figure に is-not-cropped を付ける（ブロックの追加CSSクラスで指定できる）。 */
.post_content figure.wp-block-image.is-not-cropped > img{
  aspect-ratio:auto;
  object-fit:contain;
}

/* ==========================================================================
   6.27 トップ「職種から選ぶ」＝本線（2026-09-01 作り直し）
   社長指摘「メインの各ランキングへの導線なのに地味すぎる」。

   ⚠ 原因は配色ではなく**階層**だった（実測）:
     トップの帯3本が全部 `--neutral` の同じ地色で、どれが本線か区別できなかった。
     さらに §3 の全幅カラーブロックの定義は「色はページの地そのもの、
     **白いカードがその上に浮く**」なのに、**帯もカードも両方ティント**で
     塗られていて、何も浮いていなかった。
   → 帯を navy にして**ページ内で唯一の濃い帯**にし、カードを白にして浮かせる。

   ⚠ 承認10色のHexは変えていない。navy #26304A は既にサイトの文字色・
     バッジ地として使っている色。白文字とのコントラストは 13.09:1。
   ⚠ 職種色は**上罫・名前の面・箇条書きの印**だけ。文字色には使わない（ブランド禁則）。
   ========================================================================== */

/* ── 帯 ─────────────────────────────────────────────────── */
/* ⚠⚠ 2026-09-01: 一度この帯を navy にしたが**社長判断で元に戻した**。
   「色味最悪／サイト全体のバランスが崩れた」。トップに濃い帯を1本だけ入れると、
   他の帯（--neutral）と喧嘩して全体の調子が壊れる。**ここは他の帯と同じ地色にする。**
   セクションを主役にするのは**帯の色ではなく、中のカード**でやること。 */
.kw-fw--pick{
  --kw-tint:color-mix(in srgb, var(--kw-lime) 13%, #fff);
  --kw-accent:var(--kw-lime-dark);
  padding:3.2rem 0 3.6rem;
}
/* 見出しは白。⚠ SWELLのH2塗りつぶしに負けないよう色を明示する（§2-5 と同根） */
.kw-fw--pick .wp-block-heading,
.kw-fw--pick h2{
  color:var(--kw-navy);
  font-size:clamp(1.6rem, 1.1rem + 1.8vw, 2.25rem);
  border:none;
  background:none;
  padding:0;
}
.kw-fw--pick .kw-pickLead{
  margin:.6rem 0 2rem;
  max-width:46em;
  font-size:.9375rem; line-height:1.95;
  color:var(--kw-navy-soft);
}

/* ── カード ─────────────────────────────────────────────── */
.post_content .kw-verticals,
.kw-verticals{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;
}
.kw-vCard{
  position:relative;                    /* CTAの当たり判定を広げるため */
  display:flex; flex-direction:column;
  background:var(--kw-surface);
  border-radius:16px;
  border-top:6px solid var(--kw-accent, var(--kw-lime-dark));
  padding:1.4rem 1.5rem 1.5rem;
  box-shadow:0 6px 20px rgba(38,48,74,.10);
  transition:transform .18s ease, box-shadow .18s ease;
}
.kw-vCard[data-kw-vertical="kaigo"]   { --kw-tint:var(--kw-tint-kaigo);    --kw-accent:var(--kw-accent-kaigo); }
.kw-vCard[data-kw-vertical="kango"]   { --kw-tint:var(--kw-tint-kango);    --kw-accent:var(--kw-accent-kango); }
.kw-vCard[data-kw-vertical="hoiku"]   { --kw-tint:var(--kw-tint-hoiku);    --kw-accent:var(--kw-accent-hoiku); }
.kw-vCard[data-kw-vertical="eiyoushi"]{ --kw-tint:var(--kw-tint-eiyoushi); --kw-accent:var(--kw-accent-eiyoushi); }
.kw-vCard:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(38,48,74,.16); }

.kw-vCard__name{
  display:inline-block;
  margin:0 0 .5rem;
  padding:.2em .7em;
  background:var(--kw-tint);            /* 職種色は「面」で使う */
  border-radius:6px;
  font-family:var(--kw-font-serif);
  font-size:1.5rem; font-weight:700; line-height:1.3;
  color:var(--kw-navy);
}
.kw-vCard__desc{
  margin:0 0 .9rem;
  font-size:.9375rem; line-height:1.85;
  color:var(--kw-navy);
}
.post_content .kw-vCard__facts,
.kw-vCard__facts{
  list-style:none; margin:0 0 1.2rem; padding:0;
  flex:1 1 auto;
}
.kw-vCard__facts li{
  position:relative;
  padding-left:1.5em; margin:.35em 0;
  font-size:.875rem; line-height:1.7;
  color:var(--kw-navy-soft);
}
/* 印は職種色の罫で描く（文字色には使わない） */
.kw-vCard__facts li::before{
  content:""; position:absolute; left:.15em; top:.5em;
  width:.75em; height:.42em;
  border-left:3px solid var(--kw-accent);
  border-bottom:3px solid var(--kw-accent);
  transform:rotate(-45deg);
}
.kw-vCard__facts b{ font-size:1.125rem; color:var(--kw-navy); }

/* CTA。⚠ 20px以上＋太字（§4 の約束）。navy地に白文字＝13.09:1 */
.kw-vCard__cta{
  display:block; text-align:center;
  padding:.85rem 1rem;
  min-height:56px;
  /* ⚠ 自社サービス枠の CTA（.kw-cta）と**同じ**ピンクグラデ（2026-09-01 社長判断）。
     サイト内でCTAの色を1つに保つ。白文字 3.99:1 を 20px＋太字で成立させる前提。 */
  background:linear-gradient(var(--kw-pink),var(--kw-pink-dark)); color:#fff;
  border-radius:999px;
  /* ⚠ **px で指定する。** SWELLはSPでルートの font-size を縮めるため、rem だと
     実寸が落ちる（実測: 1.125rem が SP で **15.2px** になっていた）。
     §4「CTAは20px以上＋太字」を実寸で守る。 */
  font-size:20px; font-weight:700; line-height:1.5;
  text-decoration:none;
}
.kw-vCard__cta:hover{ filter:brightness(1.05); }
.kw-vCard__cta:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:3px; }
/* カード全体を当たり判定にする。⚠ <a> はカードに1本だけ（入れ子リンクにしない） */
.kw-vCard__cta::after{ content:""; position:absolute; inset:0; border-radius:16px; }

@media (max-width:767px){
  .post_content .kw-verticals,
  .kw-verticals{ grid-template-columns:1fr; gap:.9rem; }
  .kw-fw--pick{ padding:2.4rem 0 2.6rem; }
  .kw-vCard{ padding:1.2rem 1.2rem 1.3rem; }
  .kw-vCard__name{ font-size:1.3125rem; }
  .kw-vCard__cta{ font-size:20px; min-height:56px; padding-inline:.6rem; }
}

/* ── カードの写真（2026-09-01 社長「画像つけて画像クリックで飛ぶ方がビジュアル的にいい」）──
   ⚠ カード全体が既に1本のリンク（CTAの ::after が全面を覆う）なので、
     **画像を <a> で包まない**。包むと入れ子リンクになる。
   ⚠ 記事本文の写真と同じ 16:9（§6.26）。サイト内で写真の比率を割らない。
   ⚠ 写真は「職種固有」のものを使う（量産側の写真ライブラリの `-01-`）。
     `-x-` は悩み系の汎用写真なので職種が伝わらない。 */
.kw-vCard__photo{
  display:block;
  margin:-1.4rem -1.5rem 1.1rem;   /* カードの padding を食い切って端まで */
  border-radius:10px 10px 0 0;
  overflow:hidden;
  background:var(--kw-tint);        /* 読み込み前の地。白い穴を作らない */
}
.kw-vCard__img{
  display:block; width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
}
@media (max-width:767px){
  .kw-vCard__photo{ margin:-1.2rem -1.2rem 1rem; }
}

/* CTAの折り返し位置を固定する。
   ⚠ 日本語は既定でどこでも折り返すので、放っておくと「転職サ／イトを見る」のように割れる。
     2つの inline-block に分けると、**その境目でだけ**折り返る。 */
.kw-vCard__cta span{ display:inline-block; }

/* ==========================================================================
   6.28 まとめTOP `/contents/`（2026-09-02）
   社長指示「ニュースやお役立ちコンテンツをまとめているTOPページ。
   そこからニュース一覧なのかコンテンツ一覧なのか選ぶページ」。

   ⚠ このページは1カラム（サイドバーOFF）。全幅の帯を使うため。
     判定は `functions.php` の `swell_is_show_sidebar` と
     `inc/vertical-picker.php` の `kw_is_onecolumn()` の**2箇所**にある。片方だけ直さないこと。

   ⚠ H1の帯は §6.24（職種ハブ）と**同じ作りだが、別に書いてある**。
     あちらの地は職種ティント（--kw-tint を `.category-{職種}` が差し替える）で、
     こちらは職種が決まらないので中立トーン。**共通化して `--kw-tint` を body に
     生やすと、中のカードや帯まで巻き添えになる**ので、H1にだけ効かせる。
     ⚠ 帯の作り方（box-shadow で地を横に伸ばす理由・100vw を使わない理由）は §6.24 を読むこと。
   ========================================================================== */

.kw-contents .l-content{ padding-top:0; }

.kw-contents .c-pageTitle{
  position:relative;
  margin:0 0 2.4rem;
  padding:3rem 0 2.6rem;
  /* 中立トーン。⚠ 新しいHexを起こさず、承認色ライムからの派生（§6.13 と同じ値）。 */
  background:color-mix(in srgb, var(--kw-lime) 13%, #fff);
  box-shadow:0 0 0 100vmax color-mix(in srgb, var(--kw-lime) 13%, #fff);
  clip-path:inset(0 -100vmax);
  font-family:var(--kw-font-serif);
  /* /column/ ・ハブの帯と同じ字送り。**片方だけ変えない。** */
  font-size:clamp(1.6rem, 1.15rem + 1.6vw, 2.25rem);
  line-height:1.35;
  color:var(--kw-navy);
}
.kw-contents .c-pageTitle[data-style]::before,
.kw-contents .c-pageTitle[data-style]::after{ content:none; }
.kw-contents .c-pageTitle .c-pageTitle__inner{ display:block; border:none; padding:0; }

@media (max-width:959px){
  .kw-contents .c-pageTitle{ padding:2.2rem 0 1.9rem; margin-bottom:1.8rem; }
}
/* ⚠ PCだけ。`.post_content` は960px以上でだけ padding-inline:16px を持つ（§6.24 参照）。 */
@media (min-width:960px){
  .kw-contents .c-pageTitle{ padding-inline:16px; }
}

/* ── FV（2026-09-02 社長支給）─────────────────────────────
   ⚠ **本体のCSSは書かない。** トップのFVで使っている `.kw-heroImage`
     （幅100%・高さauto・角丸12px）をそのまま共用する。サイト内で見た目を割らないため。
   ⚠ **全幅に敷かない。** 元画像が1600pxで、全幅（PCは2400〜2880px要る）に伸ばすとぼやける。
     この判断はトップのFVと同じ（§6.11 付近のコメントを参照）。
   ⚠ **H1（テキスト）は消さない。** 画像内の文字は検索にも読み上げにも乗らない。
     ここで `.c-pageTitle` を隠すと、このページから見出しが消える。
   ここで足すのは、H1帯の直下に画像が来るぶんの余白調整だけ。 */
.kw-contents .c-pageTitle{ margin-bottom:1.6rem; }
.kw-heroImage--contents{ margin:0 0 2.2rem; }
@media (max-width:767px){
  .kw-contents .c-pageTitle{ margin-bottom:1.1rem; }
  .kw-heroImage--contents{ margin-bottom:1.5rem; }
}

/* ── 見出しとリード ───────────────────────────────────────── */
.kw-contents__intro{
  max-width:46em;
  margin:0 0 2.4rem;
  font-size:1rem; line-height:1.95;
  color:var(--kw-navy);
}
.post_content .kw-contents__h2,
.kw-contents__h2{
  margin:3.2rem 0 0;
  font-family:var(--kw-font-serif);
  font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  line-height:1.4;
  color:var(--kw-navy);
  /* SWELLのH2装飾（塗り・罫）を止める。帯と二重になるため（§2-5 と同根） */
  border:none; background:none; padding:0;
}
.post_content .kw-contents__h2::before,
.post_content .kw-contents__h2::after{ content:none; }
/* 帯の中では上の余白は帯の padding が持つ */
.kw-fw .kw-contents__h2{ margin-top:0; }

.kw-contents__lead{
  margin:.6rem 0 1.4rem;
  max-width:46em;
  font-size:.9375rem; line-height:1.95;
  color:var(--kw-navy-soft);
}

/* ── ① どちらを読むか（2枚の選択カード）─────────────────────
   ⚠ ニュースが0本のときは PHP 側が `<a>` を出さない（`<div>` になる）。
     押せないことが見て分かるよう、罫と地を落とす。**hover も出さない。**
   ========================================================================== */
.post_content .kw-cSwitch,
.kw-cSwitch{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;
}
.kw-cSwitch__item{ margin:0; }
.kw-cSwitch__link{
  display:flex; flex-direction:column; gap:.55rem;
  height:100%;
  padding:1.35rem 1.25rem 1.2rem;
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-top:4px solid var(--kw-lime-dark);
  border-radius:14px;
  /* ⚠⚠ 色と下線を**明示する**。`.post_content a:not(…)` は詳細度 (0,5,1) で
     クラスセレクタに勝つ（2026-09-01 にCTAが地と同色になり「文字も見えない」事故）。
     除外リストにも `.kw-cSwitch__link` を追加済み（style.css 131行目付近）。 */
  color:var(--kw-navy) !important;
  text-decoration:none !important;
  box-shadow:0 1px 2px rgba(38,48,74,.05);
  transition:border-color .15s, box-shadow .15s;
}
a.kw-cSwitch__link:hover{
  border-color:var(--kw-lime-dark);
  box-shadow:0 4px 14px rgba(38,48,74,.09);
}
.kw-cSwitch__head{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.kw-cSwitch__name{
  font-family:var(--kw-font-serif);
  font-size:1.3rem; font-weight:700; line-height:1.3;
}
.kw-cSwitch__count{ font-size:.82rem; color:var(--kw-navy-soft); }
.kw-cSwitch__count b{ font-size:1.05rem; color:var(--kw-navy); }
.kw-cSwitch__count--pending{
  padding:.12rem .6rem;
  border:1px solid var(--kw-navy-soft);
  border-radius:999px;
  font-size:.75rem;
  color:var(--kw-navy-soft);
}
.kw-cSwitch__sub{ font-size:.9rem; line-height:1.85; color:var(--kw-navy-soft); }
.kw-cSwitch__go{
  margin-top:auto; padding-top:.7rem;
  font-size:.95rem; font-weight:700;
  color:var(--kw-navy);
}
/* 準備中（リンクではない） */
.kw-cSwitch__item.is-pending .kw-cSwitch__link{
  border-top-color:var(--kw-line);
  background:color-mix(in srgb, var(--kw-navy) 3%, #fff);
  box-shadow:none;
  cursor:default;
}

/* ── ② 編集部のおすすめ（手動ピン留め・最大3本）───────────── */
.post_content .kw-picks,
.kw-picks{
  list-style:none; margin:1.4rem 0 0; padding:0;
  /* ⚠⚠ **2×2。4枚を横1列に並べない。**
     このセクションは帯の中ではなく**本文幅（実測760px）**に置いてあるので、
     4列にすると1枚177pxまで痩せる。実測（2026-09-02・PC1280）: タイトルが**5〜6行**、
     推薦理由が**6〜8行**に折り返し、細い文字の柱が4本並ぶ見た目になった。
     カードの価値は「なぜ薦めるか」の1行なので、**読める幅**を優先する。
     2列なら1枚370px＝タイトル2行・理由3行に収まる。
     ⚠ 4列にしたいなら、先にこのセクションを全幅の帯（`.kw-fw__inner` 1120px）へ移すこと。
       幅を確保せずに列だけ増やすと同じことになる。 */
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1.1rem;
}
.kw-picks__item{ margin:0; }
.kw-picks__link{
  display:flex; flex-direction:column;
  height:100%;
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-top:4px solid var(--kw-lime-dark);
  border-radius:14px;
  overflow:hidden;
  /* ⚠ 上と同じ理由で色・下線を明示（詳細度 (0,5,1) 対策） */
  color:var(--kw-navy) !important;
  text-decoration:none !important;
  box-shadow:0 1px 2px rgba(38,48,74,.05);
  transition:border-color .15s, box-shadow .15s;
}
.kw-picks__link:hover{ box-shadow:0 4px 14px rgba(38,48,74,.09); }
/* 職種の罫。⚠ **面には使わない。** ライム／ピンクは面と罫だけで、地の上の文字色にしない（§4） */
.kw-picks__item[data-kw-vertical="kaigo"]    .kw-picks__link{ border-top-color:var(--kw-accent-kaigo); }
.kw-picks__item[data-kw-vertical="kango"]    .kw-picks__link{ border-top-color:var(--kw-accent-kango); }
.kw-picks__item[data-kw-vertical="hoiku"]    .kw-picks__link{ border-top-color:var(--kw-accent-hoiku); }
.kw-picks__item[data-kw-vertical="eiyoushi"] .kw-picks__link{ border-top-color:var(--kw-accent-eiyoushi); }

/* ⚠ **アイキャッチは出していない**（PHP側で描いていない・2026-09-02）。
   このサイトのアイキャッチは文字バナーで、画像の文言とカードのタイトルが
   同じことを2回言う状態だった。カードの価値は「なぜ薦めるか」の1行なので、そこに面積を渡す。
   ⚠ 画像を戻すなら 16:9 で（サイト内の写真は §6.26 / §6.27 で統一してある）。 */
.kw-picks__body{ display:flex; flex-direction:column; gap:.5rem; padding:1rem 1.05rem 1.15rem; }
/* バッジの地は navy 固定。⚠ 職種色を地にしない（§6.19 と同じ判断） */
.kw-picks__badge{
  align-self:flex-start;
  padding:.16rem .6rem;
  border-radius:999px;
  background:var(--kw-navy); color:#fff;
  font-size:.72rem; font-weight:700; line-height:1.6;
}
.kw-picks__title{ font-size:1rem; font-weight:700; line-height:1.55; }
.kw-picks__why{ font-size:.85rem; line-height:1.8; color:var(--kw-navy-soft); }

/* ── ③ 今読みたいニュース（0本のとき）─────────────────────── */
.kw-newsNow--pending{
  margin-top:1.2rem;
  padding:1.4rem 1.3rem;
  background:var(--kw-surface);
  border:1px dashed var(--kw-navy-soft);
  border-radius:14px;
}
.kw-newsNow__note{ margin:0 0 .5rem; font-size:.95rem; line-height:1.9; color:var(--kw-navy); }
.kw-newsNow__alt{ margin:0; font-size:.9rem; line-height:1.9; color:var(--kw-navy-soft); }

/* ── レスポンシブ ─────────────────────────────────────────── */
/* ⚠ おすすめは PC で 2×2。SPで1列に落とす刻みは、同じページの
   職種カード（`.kw-vpick--exit`）の 599px と揃えてある。**片方だけ変えない。** */
@media (max-width:767px){
  .post_content .kw-cSwitch,
  .kw-cSwitch{ grid-template-columns:1fr; }
  .post_content .kw-contents__h2,
  .kw-contents__h2{ margin-top:2.4rem; }
  .kw-contents__intro{ margin-bottom:1.8rem; }
}
@media (max-width:599px){
  .post_content .kw-picks,
  .kw-picks{ grid-template-columns:1fr; }
}

/* トップ「新着の記事」から `/contents/` へ渡す導線（2026-09-02）。
   ⚠ **ピンクのCTAにしない。** §4の約束「ピンクグラデは1画面に1つ」。
     トップのピンク枠は職種カードのCTA4つ＝ランキングへの本線が使っている。
   ⚠ `/contents/` が draft のあいだは PHP 側が何も出さない（404へのリンクを作らないため）。 */
.kw-topLink{ margin:1.6rem 0 0; text-align:center; }

/* `/contents/` の新着フィード＝**横長カード1列**（2026-09-03）。
   ⚠⚠ 一度は「2列の小さいタイル」にしたが、`/column/` を横長1列に変えた結果、
     **同じ「記事の一覧」なのに見た目が2種類**になった。サイト内で一覧の語彙を割らないため、
     `/column/` と同じ情報量（画像・職種バッジ・タイトル・抜粋・日付）に揃える。
   ⚠ 本体は §6.16 の `.kw-artList` を共用し、ここは差分だけ書く（新しいカードを作らない）。
   ⚠ **6本まで**（PHP側）。10本を横長にするとこの区画だけで約1,100px伸びる。
     ここは入口の抜粋であって全件一覧ではない。続きは「すべて見る」で `/column/` へ渡す。
   ⚠ サムネは `height:auto`（親の `.kw-artList__thumb img`）＝**切り取らない**。
     アイキャッチは文字バナーなので、cover で切ると文字が欠ける（§2-40）。 */
.kw-artList--wide{ grid-template-columns:1fr; gap:1rem; }
.kw-artList--wide .kw-artList__link{ gap:1.1rem; padding:.9rem 1.1rem; }
.kw-artList--wide .kw-artList__thumb{ flex:0 0 auto; width:240px; }
.kw-artList--wide .kw-artList__body{ gap:.4rem; }
/* 地は navy 固定。⚠ 職種色を地にしない（§6.19 と同じ判断） */
.kw-artList--wide .kw-artList__badge{
  align-self:flex-start;
  padding:.14rem .55rem;
  border-radius:999px;
  background:var(--kw-navy); color:#fff;
  font-size:.7rem; font-weight:700; line-height:1.6;
}
.kw-artList--wide .kw-artList__title{ font-size:1.0625rem; line-height:1.5; }
.kw-artList--wide .kw-artList__excerpt{
  font-size:.85rem; line-height:1.8; color:var(--kw-navy-soft);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
@media (max-width:599px){
  /* SPは本流が332pxしかない。サムネを詰めて、抜粋は落とす（残すと1行に4〜5文字しか入らない） */
  .kw-artList--wide .kw-artList__link{ gap:.8rem; padding:.7rem .9rem; }
  .kw-artList--wide .kw-artList__thumb{ width:110px; }
  .kw-artList--wide .kw-artList__excerpt{ display:none; }
  .kw-artList--wide .kw-artList__title{ font-size:.95rem; }
}

/* ── `/contents/` の中段＝2カラム（2026-09-03）─────────────────
   社長「配置デザイン／ページの見た目の構成をジョブメドレーと同じ感じにしたい」。
   実測したあちらの `/tips/`: H1 →（特集）→［サイド280px＋本流600px］→ 全幅の出口。

   ⚠⚠ **`alignfull` で一度全幅へ逃がしてから2カラムにする。**
     このページの本文幅は **760px** しかなく、そこに300pxのレールを置くと
     本流が **420px** に潰れる。`alignfull`（SWELL標準。このページで x=0 w=1265 を実測済み）で
     全幅にし、内側を1120pxの器へ戻すと本流が **748px** になり `/column/`（765px）と揃う。
     ⚠ 自前で `left:calc(50% - 50vw); width:100vw` と書かないこと（§6.24 の罠。
       100vwはスクロールバーを含むので横スクロールが出る）。**SWELLの alignfull に任せる。**
   ⚠ **この中に帯（`.kw-fw`）を入れない。** 中段は白のまま。
     ジョブメドレーの本流も白地にカードが並ぶだけで帯は無い（実測）。
   ⚠ 側は**右**。`§6.23`「トップの aside.kw-side が右なので、サイト内で側を割らない」。
   ⚠ レールのDOMは**本流の後ろ**に置いてある。SPで1カラムに落ちたとき、
     記事より先にレールが出ないようにするため（§6.23 で一度踏んでいる罠と同じ）。 */
.kw-contents__cols{ margin:2.4rem 0 0; }
.kw-contents__colsInner{
  max-width:1120px;
  margin-inline:auto;
  padding-inline:1.6rem;
}
/* 先頭の見出しは、上の帯との間隔を帯側の padding が持つので詰める */
.kw-contents__main > .kw-contents__h2:first-child,
.post_content .kw-contents__main > .kw-contents__h2:first-child{ margin-top:0; }

@media (min-width:960px){
  .kw-contents__colsInner{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 300px;
    column-gap:40px;
    align-items:start;
  }
  /* ⚠ minmax(0,1fr) と対で min-width:0 が要る。無いと中の長いタイトルが
     カラムを押し広げ、レールが右へはみ出す（grid の既定 min-width:auto のため）。 */
  .kw-contents__main{ min-width:0; }
  /* レールの上余白はアーカイブ用の値（4.5rem）なので、ここでは打ち消す */
  .kw-contents__cols .kw-archNav{ margin-top:0; padding-inline:0; }
}

@media (max-width:959px){
  /* SPは1カラム。器の左右余白は colsInner が持っているので、レール側は0にする
     （両方が持つと二重に効いて中身が細くなる） */
  .kw-contents__cols .kw-archNav{ margin-top:2.6rem; padding-inline:0; }
}

/* ==========================================================================
   6.29 フッター直上のサイトマップ（2026-09-03）
   社長「サイトのフッターの少し上によくある、サイトの直飛びリンクみたいにまとめる感じ」。
   参考: ジョブメドレー `/tips/` 最下部（全幅960px・6グループ・テキストリンク30本・実測）。

   ⚠ **カードにしない。地味なテキストリンクにする。**
     これは回遊のための地図であって、押させるためのCTAではない。
     同じページに出口ブロック（`.kw-exit`）が出ることがあるので、そちらと重さを割る。
   ⚠ **ピンクのCTAを使わない**（§4「ピンクグラデは1画面に1つ」）。
   ⚠ SWELLの「フッター直前ウィジェット」に入れているので**全ページに出る**。
     ページ側の `.post_content` の外なので、本文用のCSS（下線の除外リスト等）は効かない。
     **色と下線はここで明示する。**
   ========================================================================== */
/* ⚠⚠ 余白を持っているのは `.w-beforeFooter` ではなく、その中の **`.l-container`**
   （SWELL共通。実測: `padding-inline:48px` / `max-width:1296px`）。
   そのままだと**地が両端48px手前で切れて、帯が失敗して見える**。
   ⚠ `.l-container` はサイト全体で使われている。**素で padding:0 にしない。**
     このウィジェット領域の中だけに限定する（この領域はこのブロック専用）。
   読み幅は下の `.kw-sitemap__inner`（1120px・中央寄せ）が持つので、器は端まで伸ばしてよい。 */
.w-beforeFooter > .l-container{ padding-inline:0; max-width:none; }

.kw-sitemap{
  /* 地は中立トーン。⚠ 新しいHexを起こさず承認色ライムからの派生（§6.13 と同じ値） */
  background:color-mix(in srgb, var(--kw-lime) 8%, #fff);
  border-top:1px solid var(--kw-line);
  padding:2.8rem 0 3rem;
}
.kw-sitemap__inner{
  max-width:1120px;
  margin-inline:auto;
  padding-inline:1.6rem;
}
.kw-sitemap__title{
  margin:0 0 1.6rem;
  font-family:var(--kw-font-serif);
  font-size:1.25rem; font-weight:700; line-height:1.4;
  color:var(--kw-navy);
}
/* ⚠ **列数を固定しない。** 中身が無い列は出さない作りなので（テーマが0本なら3列、
   タグが付けば4列）、`repeat(4, 1fr)` にすると**3列のとき右が丸ごと空く**（実測で踏んだ）。
   `auto-fit` にして、ある列だけで均等に割る。 */
.kw-sitemap__cols{
  display:grid;
  /* ⚠ 列が5〜6本に増えた（2026-09-03）。長いラベル（「◯◯のおすすめ転職サイトランキング」）が
     入るので、最小幅を確保して折り返させる。固定列数にしないのは上のとおり。 */
  grid-template-columns:repeat(auto-fit, minmax(188px, 1fr));
  gap:1.8rem 1.8rem;
}
.kw-sitemap__head{
  margin:0 0 .6rem;
  padding-bottom:.45rem;
  border-bottom:2px solid var(--kw-lime-dark);
  font-size:.9rem; font-weight:700;
  color:var(--kw-navy);
}
.kw-sitemap__list{ list-style:none; margin:0; padding:0; }
.kw-sitemap__list li{ margin:0; }
/* ⚠ 色と下線を明示する。ここは `.post_content` の外なので、
   本文リンクの除外リスト（§2-39 と同根の詳細度の話）が届かない。 */
.kw-sitemap__link{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  min-height:40px;                    /* ⚠ タップ標的。フッターでも小さくしすぎない */
  padding:.3rem 0;
  font-size:.8125rem; line-height:1.55;
  color:var(--kw-navy) !important;
  text-decoration:none !important;
}
/* ⚠ 長いラベルは折り返す。数値ピルと外部リンク印は縮ませない（上の flex の相手） */
.kw-sitemap__link > span:first-child{ min-width:0; }
.kw-sitemap__ext{ flex:0 0 auto; font-size:.7rem; color:var(--kw-navy-soft); }
.kw-sitemap__link:hover{
  text-decoration:underline !important;
  text-decoration-color:var(--kw-lime-dark) !important;
}
.kw-sitemap__count{
  flex:0 0 auto;
  min-width:1.7em; padding:.05em .45em;
  border-radius:999px;
  background:#fff;
  font-size:.72rem; font-weight:700;
  color:var(--kw-navy-soft);
  text-align:center;
}

@media (max-width:959px){
  .kw-sitemap__cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:599px){
  .kw-sitemap{ padding:2.2rem 0 2.4rem; }
  .kw-sitemap__cols{ grid-template-columns:1fr; gap:1.4rem; }
  .kw-sitemap__title{ font-size:1.125rem; margin-bottom:1.2rem; }
}

/* ══ §6.30 月ごとの「いまの転職動向」（2026-09-08）══════════════════
   社長「何月は〜のところは、自動で変わるようにしたい」。
   参考: fb.nurse-career.biz の `.situation`。

   ⚠ 参考サイトはピンクの地に白抜きの見出しだが、**そのまま真似しない。**
     §4「ライム／ピンクを地の上の文字色に使わない（面・罫・マーカー地・CTAのみ）」。
     → 地は職種ティント（`--kw-tint`）、文字は navy にする。
   ⚠ 数値を出さない枠なので、**数字を大きく見せる装飾を付けない**（§4 データを捏造しない）。 */
.kw-season{
  margin:2.4em 0;
  border:1px solid var(--kw-line);
  border-left:6px solid var(--kw-accent, var(--kw-lime));
  border-radius:12px;
  background:var(--kw-tint, var(--kw-surface));
  padding:1.3rem 1.5rem;
}
.kw-season__eyebrow{
  margin:0 0 .3em;
  font-family:var(--kw-font-serif);
  font-size:.8125rem; font-weight:700;
  letter-spacing:.08em;
  color:var(--kw-navy-soft);
}
/* ⚠ `.post_content h2` の装飾（明朝＋ライムの罫）を打ち消す。
   ここは枠の中の見出しなので、外の H2 と同じ重さにすると枠が二重に見える。 */
.kw-season__title,
.post_content .kw-season__title{
  margin:0 0 .7em;
  padding:0; border:none; background:none;
  font-family:var(--kw-font-serif);
  font-size:1.375rem; font-weight:700;
  color:var(--kw-navy);
}
.kw-season__lead{ margin:0; font-size:.9375rem; line-height:1.9; color:var(--kw-navy); }
.kw-season__move{
  margin:1rem 0 0;
  padding-top:.9rem;
  border-top:1px solid var(--kw-line);
  font-size:.9375rem; font-weight:700; color:var(--kw-navy);
}
.kw-season__label{
  display:inline-block;
  margin-right:.6em;
  padding:.15em .7em;
  border-radius:6px;
  background:var(--kw-navy); color:#fff;   /* ⚠ 地はnavy。ピンク／ライムを地にしない */
  font-size:.75rem; font-weight:700;
  vertical-align:.1em;
}
@media (max-width:599px){
  .kw-season{ padding:1.1rem 1.1rem; }
  .kw-season__title, .post_content .kw-season__title{ font-size:1.1875rem; }
}

/* == 6.31 タブ付きの比較表（2026-09-11）==============================
   社長「各項目の切り替えタブとかセクションの構成を踏襲したい」。
   参考: fb.nurse-career.biz の .service-compare。

   構造の踏襲はするが、配色は踏襲しない。
   あちらはピンク地に白抜きの見出し行だが、承認色の原則
   「ライム／ピンクは面・罫・マーカー地・CTAのみ」に反する（CLAUDE.md 4章）。
   → 見出し行は navy 地、職種色は上罫だけに置く。 */
.kw-compare{ margin:2em 0; }

/* -- タブ ------------------------------------------------------- */
.kw-compare__tabs{
  display:flex;
  gap:.4rem;
  border-bottom:2px solid var(--kw-line);
}
.kw-compare__tab{
  flex:1 1 0;
  appearance:none;
  border:1px solid var(--kw-line);
  border-bottom:none;
  border-radius:10px 10px 0 0;
  background:var(--kw-surface);
  padding:.75em .6em;
  font-family:var(--kw-font-serif);
  font-size:1rem; font-weight:700;
  color:var(--kw-navy-soft);
  cursor:pointer;
  /* タップ標的を44px以上にする */
  min-height:44px;
  transition:background .15s ease, color .15s ease;
}
.kw-compare__tab:hover{ background:var(--kw-tint, var(--kw-surface)); }
.kw-compare__tab:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:2px; }
/* 現在地は色だけで示さない。地の反転＋上罫＋太字の3つで示す */
.kw-compare__tab.is-current{
  background:#fff;
  color:var(--kw-navy);
  border-top:4px solid var(--kw-accent, var(--kw-lime));
  box-shadow:0 2px 0 0 #fff;   /* 下の罫を1本ぶん隠して「つながって」見せる */
}

/* -- 表 --------------------------------------------------------- */
.kw-compare__panel{ padding-top:1rem; }
/* 表は横に溢れる。自分の中でスクロールさせる。
   ページ全体を横スクロールさせないこと（SP375の必須条件）。 */
.kw-compare__scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.kw-compare__table{
  width:100%;
  min-width:640px;          /* これ未満だと列が潰れる。溢れたら上の箱がスクロールする */
  border-collapse:collapse;
  font-size:.9375rem;
}
.kw-compare__table th,
.kw-compare__table td{
  border:1px solid var(--kw-line);
  padding:.7em .8em;
  text-align:center;
  vertical-align:middle;
}
.kw-compare__table thead th{
  background:var(--kw-navy);      /* 地は navy。ピンク／ライムを地にしない */
  color:#fff;
  font-size:.875rem; font-weight:700;
  white-space:nowrap;
}
.kw-compare__table tbody tr:nth-child(odd) td{ background:var(--kw-surface); }

.kw-compare__svc{ text-align:left !important; white-space:nowrap; }
.kw-compare__rank{
  display:inline-block;
  min-width:1.7em;
  margin-right:.5em;
  padding:.1em 0;
  border-radius:6px;
  background:var(--kw-navy); color:#fff;
  font-weight:700; font-size:.8125rem;
  text-align:center;
}
.kw-compare__name{ font-weight:700; color:var(--kw-navy); }
/* 出典の時点。数値とセットで必ず出す（4章 データを捏造しない） */
.kw-compare__at{
  display:block;
  margin-top:.2em;
  font-size:.6875rem;
  color:var(--kw-navy-soft);
}

/* CTA。サイト内のCTAは1色（白×ピンクグラデ）に統一されている */
.kw-compare__cta{
  display:inline-block;
  padding:.5em 1.1em;
  border-radius:999px;
  background:var(--kw-cta-bg, linear-gradient(90deg, var(--kw-pink), var(--kw-pink-dark)));
  color:#fff !important;
  font-weight:700; font-size:.875rem;
  text-decoration:none !important;
  white-space:nowrap;
  min-height:44px;
  line-height:2.2;
}
/* リンク側の「PR」（2026-10-05）。/disclosure/「外部サイトへ遷移するリンクには『PR』を併記」の実装。
   ⚠ 小さくしすぎない・薄くしない（消費者庁「分かりやすい表示」）。CTAの白文字の上で読める枠線つき */
.kw-pr{
  display:inline-block;
  margin-right:.45em;
  padding:0 .4em;
  border:1px solid currentColor;
  border-radius:3px;
  font-size:.75em;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.04em;
  vertical-align:.1em;
}
.kw-compare__cta:hover{ opacity:.92; }
.kw-compare__cta:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:2px; }

@media (max-width:599px){
  .kw-compare__tab{ font-size:.9375rem; padding:.7em .4em; }
  .kw-compare__table{ font-size:.875rem; }
  .kw-compare__table th, .kw-compare__table td{ padding:.6em .5em; }
}

/* == 6.32 プロモーション表記（2026-09-11）===========================
   /disclosure/ に「広告を含むページには、ページ上部に
   『プロモーションを含みます』と明示します」と書いてあるのに未実装だった。

   消費者庁の運用基準は「一般消費者にとって分かりやすい表示」を要件にしている。
   小さすぎる・薄すぎる・他の文章に紛れる、は避ける。
   本文のいちばん上、独立した1行、コントラストは本文と同等にする。 */
.kw-promo{
  display:flex;
  align-items:center;
  gap:.6em;
  margin:0 0 1.6em;
  padding:.6em .9em;
  border:1px solid var(--kw-line);
  border-radius:8px;
  background:var(--kw-surface);
  font-size:.8125rem;
  color:var(--kw-navy);           /* 薄くしない。本文と同じ濃さ */
  line-height:1.6;
}
.kw-promo__tag{
  flex:0 0 auto;
  padding:.15em .6em;
  border-radius:4px;
  background:var(--kw-navy);      /* 地は navy。ピンク／ライムを地にしない */
  color:#fff;
  font-size:.75rem; font-weight:700;
  letter-spacing:.04em;
}
.kw-promo__link{
  margin-left:auto;
  flex:0 0 auto;
  color:var(--kw-navy) !important;
  font-weight:700;
  white-space:nowrap;
}
@media (max-width:599px){
  /* SPは2行に折り返す。リンクを右端に押し付けると読みにくい */
  .kw-promo{ flex-wrap:wrap; }
  .kw-promo__link{ margin-left:0; }
}

/* == 6.33 ランキングカード（2026-09-11）=============================
   社長「前回clone投げたように寄せて作成してほしい」。
   参考: fb.nurse-career.biz の RankingMain（1社あたり約660px）。

   骨は踏襲する（順位バッジ／バナー／CTA上下2本／仕様表）。
   配色は踏襲しない。あちらはピンク地に白抜き＋緑のCTAだが、
   承認色の原則（ライム／ピンクは面・罫・マーカー地・CTAのみ）と
   「サイト内のCTAは1色」に反する。 */
/* ⚠⚠ 器の名前は `kw-ranking`。`kw-rank` は**既存の順位バッジ**（235行目・inline-flex）。
   最初 `kw-rank` を器に使ってカードが横並びに潰れた。**新クラスは必ず grep してから作る。** */
.kw-ranking{ margin:2em 0; }

.kw-rankCard{
  position:relative;
  margin:0 0 1.6rem;
  padding:1.4rem 1.5rem 1.5rem;
  border:1px solid var(--kw-line);
  border-top:4px solid var(--kw-accent, var(--kw-lime));
  border-radius:14px;
  background:#fff;
  box-shadow:0 2px 10px rgba(38,48,74,.06);
}

/* -- 見出し ----------------------------------------------------- */
.kw-rankCard__head{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:1rem;
}
/* 順位は数字だけ。「人気No.1」の類は書かない（根拠が無い） */
.kw-rankCard__no{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:2.2em; height:2.2em;
  border-radius:10px;
  background:var(--kw-navy); color:#fff;
  font-family:var(--kw-font-serif);
  font-size:1.125rem; font-weight:700;
}
/* ⚠⚠ SWELLは h3 の下に**点線の罫を ::before で**出している
   （`repeating-linear-gradient(90deg,…)`・高さ2px・見出しの幅ぴったり）。
   ⚠ `text-decoration` でも `border-bottom` でもないので、
     computed を見ても `none` / `0px` と返る。**実際には出ている。**
   2026-09-11 に「下線が出ている」→computedは none→「誤読か」と往復した。
   ⚠ **見出しの装飾を消すときは ::before / ::after まで見ること。** */
.post_content .kw-rankCard__name::before{ content:none; }

.kw-rankCard__name,
.post_content .kw-rankCard__name{
  margin:0; padding:0; border:none; background:none;
  font-family:var(--kw-font-serif);
  font-size:1.375rem; font-weight:700;
  color:var(--kw-navy);
  line-height:1.4;
}

/* -- バナー ----------------------------------------------------- */
/* 画像は後付け。無ければこの枠ごと出さない（空の灰色の箱を置かない） */
.kw-rankCard__banner{
  display:block;
  margin:0 0 1.1rem;
  border:1px solid var(--kw-line);
  border-radius:10px;
  overflow:hidden;
  line-height:0;
}
.kw-rankCard__banner img{ display:block; width:100%; height:auto; }

/* 公式サイトのトップ画面（2026-10-05）。ASP素材が届くまでのつなぎ。出典を必ず添える */
.kw-rankCard__shot{ margin:0 0 1.1rem; }
.kw-rankCard__shot a{
  display:block;
  border:1px solid var(--kw-line);
  border-radius:10px;
  overflow:hidden;
  line-height:0;
}
.kw-rankCard__shot img{ display:block; width:100%; height:auto; }
.kw-rankCard__shot figcaption{
  margin-top:.35em;
  font-size:.6875rem;
  color:var(--kw-navy-soft);
  text-align:right;
}

/* -- CTA（上下2本）---------------------------------------------- */
/* 2本あるのが効いている（参考サイトも同じ）。上は「今すぐ」、下は「読んだあと」 */
.kw-rankCard__cta{ margin:1.1rem 0 0; }
.kw-rankCard__cta:first-of-type{ margin-top:0; }
/* SPで「…見る」の「る」だけが2行目に落ちる（PR を足して幅が増えた・2026-10-05実測）。行の長さを揃える */
.kw-rankCard__cta .kw-cta{ text-wrap:balance; }

/* -- 仕様表 ----------------------------------------------------- */
.kw-rankCard__spec{
  margin:1.2rem 0 0;
  border-top:1px solid var(--kw-line);
}
.kw-rankCard__row{
  display:grid;
  grid-template-columns:8.5em 1fr;
  border-bottom:1px solid var(--kw-line);
}
.kw-rankCard__row dt,
.kw-rankCard__row dd{
  margin:0;
  padding:.7em .9em;
  font-size:.9375rem;
  line-height:1.7;
}
.kw-rankCard__row dt{
  background:var(--kw-surface);
  font-weight:700;
  color:var(--kw-navy);
}
.kw-rankCard__row dd{ color:var(--kw-navy); }
/* 出典の時点。数値とセットで必ず出す */
.kw-rankCard__at{
  display:block;
  margin-top:.15em;
  font-size:.75rem;
  color:var(--kw-navy-soft);
}

/* -- 向いている人 ------------------------------------------------ */
/* 「ここがすごい！」にしない。褒め言葉は根拠が要る。誰に向くかだけを書く */
.kw-rankCard__fit{
  margin:1.1rem 0 0;
  padding:.9rem 1rem;
  border-radius:10px;
  background:var(--kw-tint, var(--kw-surface));
  font-size:.9375rem; font-weight:700;
  color:var(--kw-navy);
}
.kw-rankCard__fitLabel{
  display:inline-block;
  margin-right:.7em;
  padding:.15em .7em;
  border-radius:6px;
  background:var(--kw-navy); color:#fff;
  font-size:.75rem; font-weight:700;
  vertical-align:.1em;
}

/* -- おすすめポイント／注意したい点（2026-10-05）---------------------
   中身は公式サイトの事実だけ。注意したい点は「デメリットも記載」（/ad-guideline/）の実装 */
.kw-rankCard__block{ margin:1.1rem 0 0; }
.kw-rankCard__blockTitle{
  margin:0 0 .5rem;
  font-size:.9375rem; font-weight:700;
  color:var(--kw-navy);
}
.kw-rankCard__block ol,
.kw-rankCard__block ul{ margin:0; padding:0; list-style:none; }
.kw-rankCard__points li{
  position:relative;
  margin:0 0 .6rem;
  padding:.75rem .9rem .75rem 2.9rem;
  border:1px solid var(--kw-line);
  border-radius:10px;
  counter-increment:kwpt;
}
.kw-rankCard__points ol{ counter-reset:kwpt; }
.kw-rankCard__points li::before{
  content:counter(kwpt);
  position:absolute; left:.9rem; top:.8rem;
  width:1.5rem; height:1.5rem;
  border-radius:50%;
  background:var(--kw-pink); color:#fff;
  font-size:.8125rem; font-weight:700; line-height:1.5rem; text-align:center;
}
.kw-rankCard__points strong{ display:block; color:var(--kw-navy); font-size:.9375rem; }
.kw-rankCard__points span{ display:block; margin-top:.2em; font-size:.875rem; line-height:1.7; }
.kw-rankCard__cautions ul{
  padding:.75rem .9rem;
  border-radius:10px;
  background:var(--kw-surface, #f6f6f3);
}
.kw-rankCard__cautions li{
  position:relative;
  padding-left:1.1em;
  font-size:.875rem; line-height:1.7;
}
.kw-rankCard__cautions li + li{ margin-top:.35em; }
.kw-rankCard__cautions li::before{ content:"・"; position:absolute; left:0; color:var(--kw-navy-soft); }
.kw-rankCard__src{
  margin:.45rem 0 0;
  font-size:.6875rem;
  color:var(--kw-navy-soft);
  text-align:right;
}

@media (max-width:599px){
  .kw-rankCard{ padding:1.1rem 1.1rem 1.2rem; }
  .kw-rankCard__name, .post_content .kw-rankCard__name{ font-size:1.1875rem; }
  /* SPは2列だと項目名が折れる。1列に積む */
  .kw-rankCard__row{ grid-template-columns:1fr; }
  .kw-rankCard__row dt{ padding-bottom:.2em; }
  .kw-rankCard__row dd{ padding-top:.2em; }
}

/* =====================================================================
   ★ ランキングらしさ（2026-10-05）— 表彰台・メダル・王冠
   社長「ランキングが地味すぎ…1〜3位の表示も地味…ランキングらしさをしっかり欲しい」
   ⚠ メダルの色は**承認10色から作る**（新色を足さない）:
     金＝yellow＋orange ／ 銀＝navy-soft を白で割る ／ 銅＝orange を navy で沈める
   ⚠ 「人気No.1」等は書かない。順位の数字と「位」だけ
   ===================================================================== */
:root{
  --kw-medal-gold:color-mix(in srgb, var(--kw-yellow) 78%, var(--kw-orange));
  --kw-medal-gold-deep:color-mix(in srgb, var(--kw-orange) 55%, var(--kw-yellow));
  --kw-medal-gold-tint:color-mix(in srgb, var(--kw-yellow) 14%, #fff);
  --kw-medal-silver:color-mix(in srgb, var(--kw-navy-soft) 62%, #fff);
  --kw-medal-silver-deep:var(--kw-navy-soft);
  --kw-medal-silver-tint:color-mix(in srgb, var(--kw-navy-soft) 9%, #fff);
  --kw-medal-bronze:color-mix(in srgb, var(--kw-orange) 72%, var(--kw-navy));
  --kw-medal-bronze-deep:color-mix(in srgb, var(--kw-orange) 55%, var(--kw-navy));
  --kw-medal-bronze-tint:color-mix(in srgb, var(--kw-orange) 10%, #fff);
}
.kw-crown{ display:block; width:100%; height:auto; }

/* 王冠＋「PR」: 画像リンクも外部遷移なので PR を重ねる（/disclosure/ の約束） */
.kw-podium__shot,
.kw-rankCard__shot a{ position:relative; }
.kw-podium__shot::after,
.kw-rankCard__shot a::after{
  content:"PR";
  position:absolute; top:.5rem; right:.5rem;
  padding:.05em .45em;
  border-radius:3px;
  background:rgba(38,48,74,.82); color:#fff;
  font-size:.6875rem; font-weight:700; line-height:1.6; letter-spacing:.04em;
}

/* -- 表彰台（1〜3位の早見）----------------------------------------- */
.kw-podium{
  margin:1.6rem 0 2.2rem;
  padding:1.6rem 1.4rem 1.4rem;
  border-radius:18px;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--kw-medal-gold-tint), transparent 70%),
    linear-gradient(180deg, #fff, var(--kw-bg));
  border:1px solid var(--kw-line);
}
.kw-podium__title{
  margin:0 0 3.6rem;   /* 1位の王冠（バッジの上に出る）が見出しに重ならない高さ */
  text-align:center;
  font-family:var(--kw-font-serif);
  font-size:1.5rem; font-weight:700; line-height:1.4;
  color:var(--kw-navy);
  letter-spacing:.04em;
}
.kw-podium__title span{
  display:block;
  font-family:inherit;
  font-size:.8125rem; letter-spacing:.2em;
  color:var(--kw-pink-dark);
}
.kw-podium__list{
  display:grid;
  grid-template-columns:1fr 1.12fr 1fr;
  align-items:end;
  gap:.9rem;
  margin:0; padding:0; list-style:none;
}
.kw-podium__item{
  --m:var(--kw-medal-gold); --md:var(--kw-medal-gold-deep); --mt:var(--kw-medal-gold-tint);
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  margin:0;
  padding:2.3rem .9rem 1rem;
  border:2px solid var(--m);
  border-radius:16px;
  background:linear-gradient(180deg, var(--mt), #fff 46%);
  text-align:center;
  box-shadow:0 6px 18px rgba(38,48,74,.08);
}
.kw-podium__item--silver{ --m:var(--kw-medal-silver); --md:var(--kw-medal-silver-deep); --mt:var(--kw-medal-silver-tint); order:-1; }
.kw-podium__item--bronze{ --m:var(--kw-medal-bronze); --md:var(--kw-medal-bronze-deep); --mt:var(--kw-medal-bronze-tint); }
/* 1位は一段高く・太い枠 */
.kw-podium__item--gold{
  padding-top:2.9rem; padding-bottom:1.3rem;
  border-width:3px;
  box-shadow:0 10px 28px rgba(205,140,20,.22);
  transform:translateY(-.6rem);
}
.kw-podium__rank{
  position:absolute; top:0; left:50%;
  transform:translate(-50%, -48%);
  display:flex; align-items:flex-end; justify-content:center; gap:.05em;
  margin:0;
  padding:.35em .9em .25em;
  border-radius:999px;
  background:var(--md); color:#fff;
  font-family:var(--kw-font-serif); font-weight:700; line-height:1;
  box-shadow:0 3px 8px rgba(38,48,74,.18);
  white-space:nowrap;
}
.kw-podium__crown{
  position:absolute; left:50%; bottom:100%;
  width:2.1rem; transform:translate(-50%, .25rem);
  color:var(--m);
  filter:drop-shadow(0 1px 0 rgba(38,48,74,.25));
}
.kw-podium__item--gold .kw-podium__crown{ width:2.7rem; }
.kw-podium__num{ font-size:1.75rem; }
.kw-podium__item--gold .kw-podium__num{ font-size:2.25rem; }
.kw-podium__unit{ font-size:.875rem; padding-bottom:.15em; }
.kw-podium__shot{
  display:block; width:100%;
  margin:0 0 .75rem;
  border:1px solid var(--kw-line);
  border-radius:10px; overflow:hidden; line-height:0;
}
.kw-podium__shot img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:top; }
.kw-podium__name{
  margin:0 0 .35rem;
  font-family:var(--kw-font-serif);
  font-size:1.0625rem; font-weight:700; line-height:1.45;
  color:var(--kw-navy);
}
.kw-podium__item--gold .kw-podium__name{ font-size:1.25rem; }
.kw-podium__fit{
  margin:0 0 .8rem;
  font-size:.8125rem; line-height:1.6;
  color:var(--kw-navy-soft);
}
.kw-podium__cta{
  display:block; width:100%;
  margin-top:auto;
  padding:.7em .6em;
  border-radius:999px;
  background:var(--kw-cta-bg, linear-gradient(90deg, var(--kw-pink), var(--kw-pink-dark)));
  color:#fff !important;
  font-weight:700; font-size:.875rem;
  text-decoration:none !important;
  box-shadow:0 4px 0 color-mix(in srgb, var(--kw-pink-dark) 70%, var(--kw-navy));
  transition:transform .15s ease, box-shadow .15s ease;
}
.kw-podium__cta:hover{ transform:translateY(2px); box-shadow:0 2px 0 color-mix(in srgb, var(--kw-pink-dark) 70%, var(--kw-navy)); }
.kw-podium__cta:focus-visible{ outline:3px solid var(--kw-navy); outline-offset:2px; }
.kw-podium__more{
  margin-top:.6rem;
  font-size:.8125rem; font-weight:700;
  color:var(--kw-navy) !important;
}
.kw-podium__more::after{ content:" ↓"; }

/* 1位の王冠だけ、読み込み時に一度だけ光る（動きを減らす設定では出さない） */
.kw-podium__item--gold .kw-podium__crown{ animation:kw-crown-in .7s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes kw-crown-in{
  from{ opacity:0; transform:translate(-50%, .9rem) scale(.6) rotate(-12deg); }
  to{ opacity:1; transform:translate(-50%, .25rem) scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce){
  .kw-podium__item--gold .kw-podium__crown{ animation:none; }
  .kw-podium__cta{ transition:none; }
}

/* SP: 1→2→3 を縦に。横長の行（画面｜名前・CTA） */
@media (max-width:767px){
  .kw-podium{ padding:1.3rem .9rem 1rem; }
  .kw-podium__title{ font-size:1.25rem; margin-bottom:2.2rem; }
  .kw-podium__list{ grid-template-columns:1fr; gap:1.6rem; }
  .kw-podium__item--silver{ order:0; }
  .kw-podium__item, .kw-podium__item--gold{
    display:grid;
    grid-template-columns:42% 1fr;
    grid-template-areas:"shot name" "shot fit" "cta cta" "more more";
    column-gap:.8rem;
    align-items:start;
    padding:1.9rem .9rem .9rem;
    text-align:left;
    transform:none;
  }
  .kw-podium__shot{ grid-area:shot; margin:0; }
  .kw-podium__name{ grid-area:name; }
  .kw-podium__fit{ grid-area:fit; margin-bottom:.6rem; }
  .kw-podium__cta{ grid-area:cta; text-align:center; margin-top:.4rem; }
  .kw-podium__more{ grid-area:more; text-align:center; }
  .kw-podium__rank{ left:1rem; transform:translateY(-50%); }
  .kw-podium__item--gold .kw-podium__crown{ animation:none; }
  .kw-podium__crown, .kw-podium__item--gold .kw-podium__crown{ width:1.9rem; transform:translate(-50%, .2rem); }
  .kw-podium__num, .kw-podium__item--gold .kw-podium__num{ font-size:1.5rem; }
  .kw-podium__name, .kw-podium__item--gold .kw-podium__name{ font-size:1.0625rem; }
}

/* -- カードの順位（1〜3位はメダル）---------------------------------- */
.kw-rankCard__noUnit{ font-size:.6em; margin-left:.05em; }
.kw-rankCard__no{
  display:inline-flex; align-items:baseline; justify-content:center;
  width:auto; height:auto; min-width:2.6em;
  padding:.35em .55em .3em;
  line-height:1;
}
.kw-rankCard--medal{
  --m:var(--kw-medal-gold); --md:var(--kw-medal-gold-deep); --mt:var(--kw-medal-gold-tint);
  border-top:0;
  border:2px solid var(--m);
  padding-top:0;
  overflow:hidden;
}
.kw-rankCard--silver{ --m:var(--kw-medal-silver); --md:var(--kw-medal-silver-deep); --mt:var(--kw-medal-silver-tint); }
.kw-rankCard--bronze{ --m:var(--kw-medal-bronze); --md:var(--kw-medal-bronze-deep); --mt:var(--kw-medal-bronze-tint); }
.kw-rankCard--gold{ border-width:3px; box-shadow:0 10px 30px rgba(205,140,20,.18); }
/* 見出しを帯にする（カードの端まで） */
.kw-rankCard--medal .kw-rankCard__head{
  margin:0 -1.5rem 1.2rem;
  padding:1rem 1.5rem;
  background:linear-gradient(100deg, var(--mt) 0%, #fff 75%);
  border-bottom:1px solid color-mix(in srgb, var(--m) 45%, #fff);
  gap:1rem;
}
.kw-rankCard__no--medal{
  position:relative;
  display:flex; flex-direction:row; align-items:baseline; justify-content:center;
  width:3.6rem; height:3.6rem; min-width:0; padding:.95rem 0 0;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--m) 55%, #fff), var(--md) 72%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.55), 0 4px 10px rgba(38,48,74,.18);
  font-size:1rem; line-height:1;
}
.kw-rankCard__no--medal .kw-crown{
  position:absolute; top:-1.05rem; left:50%;
  width:1.9rem; transform:translateX(-50%);
  color:var(--m);
  filter:drop-shadow(0 1px 0 rgba(38,48,74,.3));
}
.kw-rankCard__no--medal .kw-rankCard__noNum{ font-size:1.6rem; }
.kw-rankCard--gold .kw-rankCard__no--medal{ width:4.1rem; height:4.1rem; }
.kw-rankCard--gold .kw-rankCard__no--medal .kw-rankCard__noNum{ font-size:1.9rem; }
.kw-rankCard--medal .kw-rankCard__name,
.post_content .kw-rankCard--medal .kw-rankCard__name{ font-size:1.5rem; }
.kw-rankCard--medal .kw-rankCard__head{ padding-top:1.4rem; }
@media (max-width:599px){
  .kw-rankCard--medal .kw-rankCard__head{ margin:0 -1.1rem 1rem; padding:1.3rem 1.1rem .9rem; }
  .kw-rankCard--medal .kw-rankCard__name,
  .post_content .kw-rankCard--medal .kw-rankCard__name{ font-size:1.25rem; }
}

/* -- 比較表の順位 -------------------------------------------------- */
.kw-compare__rank small{ font-size:.75em; margin-left:.05em; }
.kw-compare__rank{ position:relative; min-width:2.4em; padding:.15em .35em; }
.kw-compare__rank--gold,
.kw-compare__rank--silver,
.kw-compare__rank--bronze{
  margin-top:.7em;
  background:var(--md); color:#fff;
}
.kw-compare__rank--gold{ --m:var(--kw-medal-gold); --md:var(--kw-medal-gold-deep); }
.kw-compare__rank--silver{ --m:var(--kw-medal-silver); --md:var(--kw-medal-silver-deep); }
.kw-compare__rank--bronze{ --m:var(--kw-medal-bronze); --md:var(--kw-medal-bronze-deep); }
.kw-compare__rank .kw-crown{
  position:absolute; top:-.85em; left:50%;
  width:1.25em; transform:translateX(-50%);
  color:var(--m);
}
.kw-compare__top td{ background:var(--kw-medal-gold-tint) !important; }

/* -- ランキングカードの中の口コミ（2026-09-11）---------------------
   ⚠⚠ 調査概要が無ければ1件も出さない（PHP側で止めている）。
     求人数に「時点」が無ければ数字を出さないのと同じ考え方。
     出どころの無い体験談は景表法（優良誤認・ステマ規制）で出せない。

   ⚠ カードは `.kw-voice` を**既存のまま使う**。新しい口コミ部品を作らない
     （記事本文の口コミカードと見た目が割れるため）。
     ここで足すのは「並べ方」と「属性の見せ方」だけ。 */
.kw-rankCard__voices{
  margin:1.2rem 0 0;
  padding-top:1.1rem;
  border-top:1px solid var(--kw-line);
}
.kw-rankCard__voicesTitle{
  margin:0 0 .2em;
  font-size:.9375rem; font-weight:700;
  color:var(--kw-navy);
}
/* ⚠ `.post_content ul` の padding-left に負けるので詳細度を上げる（§2-26.3） */
.post_content .kw-voices,
.kw-voices{
  list-style:none;
  margin:.8rem 0 0; padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;   /* PCは2列。4件が2行で収まる */
  gap:.9rem;
}
/* 既存の .kw-voice は margin を持っているのでグリッドの gap と二重になる。ここだけ消す */
.kw-voices .kw-voice{ margin:0; }

/* アバターと属性を縦に積む列。既存の `__attr` は「アバターの下」前提の指定 */
.kw-voiceFig{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center;
  width:52px;
}
.kw-voices .kw-voice__body p{ font-size:.875rem; line-height:1.8; }

/* 調査概要。⚠ 別ページに逃がさず枠の中に添える（声だけが独り歩きしないように） */
.kw-rankCard__survey{
  margin:.9rem 0 0;
  font-size:.75rem;
  line-height:1.7;
  color:var(--kw-navy-soft);
}

@media (max-width:767px){
  /* SPで2列にすると1件が150px前後になり、日本語が1行2〜3文字で折れる */
  .post_content .kw-voices,
  .kw-voices{ grid-template-columns:1fr; }
}


/* ==========================================================================
   6.40 ランキングの組み直し（2026-10-05）— inc/ranking-layout.php
   社長承認「良し。これで行こう」のモック（tools/preview/mock/mock.css＋mock-ui.css）をそのまま移した。
   ⚠ クラスは kwr-（旧 .kw-compare／.kw-rankCard は職種が増えたときの予備で残している）
   ⚠ 飾りは全部フラット（SVG・CSS）。金属調・写実の画像を足さない（社長「このあしらいダサくね？」）
   ⚠ 色は承認10色＋そこから color-mix のメダル色だけ。白文字ボタンは 20px 太字か --kw-pink-dark
   ========================================================================== */
/* ==========================================================================
   【モック】ランキングの組み直し案（2026-10-05）— 確認用。子テーマの style.css にはまだ入れていない
   ⚠ 色は承認10色と、そこから color-mix で作ったメダル色（--kw-medal-*）だけ。新しい色は足さない
   ⚠ 2026-10-05 社長「色数が少ないからもう一色」→ 承認済みのライム（--kw-lime）を3色目に使う。ライムに白文字は載せない（navy 文字）
   ⚠ 白文字のボタンは 20px 太字（.kw-cta）か、濃いピンク（--kw-pink-dark・白で約5:1）に限る
   ========================================================================== */

.kwr{
  margin:0 0 3rem;
  --kwr-crown:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M2 7l7 6 7-11 7 11 7-6-3 15H5z'/%3E%3Ccircle cx='2' cy='6' r='2'/%3E%3Ccircle cx='16' cy='2' r='2'/%3E%3Ccircle cx='30' cy='6' r='2'/%3E%3Crect x='5' y='20' width='22' height='3' rx='1'/%3E%3C/svg%3E");
}
.kwr *{ box-sizing:border-box; }

/* ── A. FV（写真は生成画像・文字は HTML）──────────────────────── */
.kwr-fv{
  position:relative;
  margin:0 0 1.2rem;
  border-radius:18px;
  overflow:hidden;
  background:var(--kw-tint-kango);
  isolation:isolate;
}
.kwr-fv__bg img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:78% 30%;
}
/* 文字の下だけ、写真の白い余白をもう一段明るく（読みやすさ。人物には掛けない）*/
.kwr-fv::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 38%, rgba(255,255,255,0) 62%);
}
.kwr-fv__copy{ padding:2.4rem 2rem 1.6rem; max-width:58%; }
.kwr-fv__ver{
  display:inline-flex; align-items:center; gap:.4em;
  margin:0 0 .8rem; padding:.25em 1em .25em .8em;
  border-radius:999px;
  background:var(--kw-navy); color:var(--kw-yellow);
  font-size:.875rem; font-weight:700; letter-spacing:.08em;
}
.kwr-fv__ver::before{
  content:""; width:1.1em; height:.85em; background:var(--kw-yellow);
  -webkit-mask:var(--kwr-crown) center/contain no-repeat; mask:var(--kwr-crown) center/contain no-repeat;
}
.post_content h2.kwr-fv__title{
  margin:0 0 1rem; padding:0; border:0; background:none;
  color:var(--kw-navy); line-height:1.2; letter-spacing:.02em;
}
.kwr-fv__pre{ display:block; font-size:clamp(1rem, 2.6vw, 1.375rem); margin-bottom:.35rem; }
.kwr-fv__main{
  display:block;
  font-size:clamp(2.1rem, 6.4vw, 3.4rem);
  color:var(--kw-pink-dark);
  text-shadow:0 2px 0 #fff;
}
.kwr-fv__pts{ display:grid; gap:.4rem; list-style:none; margin:0; padding:0; }
.kwr-fv__pts li{
  display:flex; align-items:center; gap:.5rem;
  margin:0; width:max-content; max-width:100%;
  padding:.3em .9em .3em .35em;
  border-radius:999px;
  background:var(--kw-surface);
  box-shadow:0 2px 8px rgba(38,48,74,.10);
  font-size:.875rem; font-weight:700; color:var(--kw-navy); line-height:1.4;
}
.kwr-fv__pts li::before{
  content:"✓"; flex:none; display:grid; place-items:center;
  width:1.4rem; height:1.4rem; border-radius:50%;
  background:var(--kw-lime); color:var(--kw-navy); font-size:.8125rem;
}
.kwr-fv__pts b{ color:var(--kw-pink-dark); }
/* 掲載サービスの帯（介護転職ナビのロゴ帯にあたる。ロゴは承認後にもらえるまで名前で）*/
.kwr-fv__names{
  display:flex; align-items:center; gap:.7rem;
  padding:.65rem 1rem;
  background:rgba(255,255,255,.94);
  border-top:3px solid var(--kw-lime);
}
.kwr-fv__names p{ flex:none; margin:0; font-size:.75rem; font-weight:700; color:var(--kw-navy-soft); }
.kwr-fv__names ul{ display:flex; flex-wrap:wrap; gap:.3rem; list-style:none; margin:0; padding:0; }
.kwr-fv__names li{
  margin:0; padding:.1em .7em;
  border-radius:999px; background:var(--kw-bg); border:1px solid var(--kw-line);
  font-size:.75rem; font-weight:700; color:var(--kw-navy); white-space:nowrap;
}
@media (max-width:767px){
  /* SP は横に並べると文字が人物の顔に重なる → 写真を上、文字を下（白のグラデーションで受ける）*/
  .kwr-fv__bg img{ object-position:80% 0%; }
  .kwr-fv::before{ background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,.88) 50%, #fff 64%); }
  .kwr-fv__copy{ max-width:none; padding:12.8rem 1rem 1.1rem; }
  .kwr-fv__ver{ position:absolute; top:.9rem; left:.9rem; }
  .kwr-fv__ver{ font-size:.75rem; margin-bottom:.6rem; }
  .kwr-fv__pts li{ font-size:.75rem; padding:.25em .7em .25em .3em; }
  .kwr-fv__pts li::before{ width:1.15rem; height:1.15rem; font-size:.6875rem; }
  .kwr-fv__names{ display:block; padding:.6rem .9rem; }
  .kwr-fv__names p{ margin-bottom:.2rem; }
  .kwr-fv__names li{ font-size:.6875rem; }
}

/* 表彰台はそのまま使う。見出しは FV に任せて消し、王冠のぶんだけ上を空ける */
.kwr .kw-podium{ padding-top:4.2rem; margin-top:0; }
.kwr .kw-podium__more::after{ color:inherit; }
.kwr .kw-podium__title{ display:none; }
/* 順位バッジを**正円**に（1位だけ縦長のカプセルになって崩れて見えた。2026-10-05 社長指摘）
   ⚠ 高さ＝幅で固定し、数字と「位」は同じ行・同じベースライン（line-height＝高さ で上下中央）*/
.kwr .kw-podium__rank{
  display:block;
  width:3.5rem; height:3.5rem; padding:0;
  line-height:3.5rem; text-align:center;
  border-radius:50%;
  border:3px solid #fff;
  transform:translate(-50%, -55%);
  background:radial-gradient(circle at 35% 30%, var(--m), var(--md));
}
.kwr .kw-podium__item--gold .kw-podium__rank{ width:4.3rem; height:4.3rem; line-height:4.3rem; }
.kwr .kw-podium__num,
.kwr .kw-podium__item--gold .kw-podium__num{ font-size:1.6rem; vertical-align:baseline; }
.kwr .kw-podium__item--gold .kw-podium__num{ font-size:2rem; }
.kwr .kw-podium__unit{ font-size:.8125rem; padding:0 0 0 .05em; vertical-align:baseline; }
.kwr .kw-podium__crown{ line-height:0; transform:translate(-50%, .45rem); }
.kwr .kw-podium__item--gold .kw-podium__crown{ animation:none; }
.kwr .kw-podium__item{ padding-top:2.6rem; }
.kwr .kw-podium__item--gold{ padding-top:3.1rem; }
/* 「詳しく見る」を追加色（ライム）の小さな帯に */
.kwr .kw-podium__more{
  display:inline-block; margin-top:.7rem; padding:.2em .9em;
  border-radius:999px; background:color-mix(in srgb, var(--kw-lime) 28%, #fff);
  text-decoration:none !important;
}

/* ── 区切り見出し ───────────────────────────────────────── */
.kwr-sec{
  display:flex; flex-direction:column; align-items:center;
  margin:2.4rem 0 1rem;
  font-family:var(--kw-font-serif); font-weight:700;
  font-size:1.375rem; color:var(--kw-navy); line-height:1.4;
}
.kwr-sec span{
  font-family:inherit;
  font-size:.75rem; letter-spacing:.12em;
  color:var(--kw-pink-dark);
  margin-bottom:.2rem;
}
.kwr-sec::after{
  content:""; width:2.5rem; height:3px; border-radius:2px;
  background:var(--kw-lime); margin-top:.5rem;
}

/* ── B. 早見表（スマホ1画面・横スクロールなし）──────────────── */
.kwr-quick__table{
  width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0;
  margin:0; font-size:.875rem;
  border:1px solid var(--kw-line); border-radius:14px; overflow:hidden;
  background:var(--kw-surface);
}
.kwr-quick__table th{
  background:var(--kw-navy); color:#fff;
  font-size:.75rem; font-weight:700; padding:.55em .4em; text-align:center; border:0;
}
.kwr-quick__table th:nth-child(1){ width:60%; text-align:left; padding-left:.8em; }
.kwr-quick__table th:nth-child(2){ width:20%; }
.kwr-quick__table th:nth-child(3){ width:20%; }
.kwr-quick__table td{
  padding:.7em .45em; border:0; border-top:1px solid var(--kw-line);
  vertical-align:middle; background:transparent;
}
.kwr-quick__table tr.is-top td{ background:var(--kw-medal-gold-tint); }
.kwr-quick__svc{ display:flex; align-items:center; gap:.55rem; padding-left:.15em; }
.kwr-quick__txt{ display:flex; flex-direction:column; min-width:0; }
.kwr-quick__name{
  font-weight:700; color:var(--kw-navy); text-decoration:none; line-height:1.4;
  font-size:.9375rem;
}
.kwr-quick__name:hover{ text-decoration:underline; }
.kwr-quick__tag{ font-size:.75rem; color:var(--kw-navy-soft); line-height:1.45; margin-top:.1em; }
.kwr-quick__area{ text-align:center; font-size:.75rem; color:var(--kw-navy); line-height:1.45; font-weight:700; }
.kwr-quick__go{ text-align:center; }
.kwr-quick__cta{
  display:inline-block; width:100%;
  padding:.45em .2em;
  border-radius:8px;
  background:var(--kw-pink-dark);
  color:#fff !important; text-decoration:none;
  font-size:.75rem; font-weight:700; line-height:1.35;
  box-shadow:0 3px 0 color-mix(in srgb, var(--kw-pink-dark) 70%, var(--kw-navy));
}
.kwr-quick__cta .kw-pr{ display:block; width:max-content; margin:0 auto .2em; font-size:.625rem; }
.kwr-quick__cta:active{ transform:translateY(2px); box-shadow:0 1px 0 color-mix(in srgb, var(--kw-pink-dark) 70%, var(--kw-navy)); }

/* 順位の丸（早見表）*/
.kwr-qrank{
  --m:var(--kw-navy);
  position:relative; flex:none;
  display:inline-flex; align-items:baseline; justify-content:center;
  width:2.2rem; height:2.2rem; padding-top:.42rem;
  border-radius:50%;
  background:var(--m); color:#fff;
  font-weight:700; line-height:1;
}
.kwr-qrank b{ font-size:1rem; }
.kwr-qrank small{ font-size:.5625rem; }
.kwr-qrank .kw-crown{ position:absolute; top:-.72rem; left:50%; width:1.15rem; transform:translateX(-50%); color:var(--m); }
.kwr-qrank--gold{ --m:var(--kw-medal-gold-deep); }
.kwr-qrank--silver{ --m:var(--kw-medal-silver-deep); }
.kwr-qrank--bronze{ --m:var(--kw-medal-bronze-deep); }

.kwr-note{ margin:.6rem 0 0; font-size:.75rem; color:var(--kw-navy-soft); line-height:1.6; }

/* ── C. カード ─────────────────────────────────────────── */
.kwr-cards{ display:grid; gap:1.6rem; }
.kwr-card{
  --m:var(--kw-pink); --md:var(--kw-pink-dark); --mt:var(--kw-tint-kango);
  position:relative;
  background:var(--kw-surface);
  border:1px solid var(--kw-line);
  border-top:4px solid var(--kw-pink);
  border-radius:16px;
  padding:0 1rem 1.2rem;
  box-shadow:0 6px 18px -12px rgba(38,48,74,.35);
  scroll-margin-top:5rem;
}
.kwr-card--medal{ border:2px solid var(--m); border-top-width:2px; }
.kwr-card--gold{   --m:var(--kw-medal-gold);   --md:var(--kw-medal-gold-deep);   --mt:var(--kw-medal-gold-tint); }
.kwr-card--silver{ --m:var(--kw-medal-silver); --md:var(--kw-medal-silver-deep); --mt:var(--kw-medal-silver-tint); }
.kwr-card--bronze{ --m:var(--kw-medal-bronze); --md:var(--kw-medal-bronze-deep); --mt:var(--kw-medal-bronze-tint); }

.kwr-card__head{
  display:flex; align-items:center; gap:.8rem;
  margin:0 -1rem 1rem; padding:1.1rem 1rem .9rem;
  border-radius:14px 14px 0 0;
  background:var(--mt);
  border-bottom:1px solid color-mix(in srgb, var(--m) 35%, #fff);
}
.kwr-card:not(.kwr-card--medal) .kwr-card__head{ background:var(--kw-surface); border-bottom-color:var(--kw-line); }
.kwr-card__ttl{ min-width:0; }
.kwr-card__catch{ margin:0 0 .15rem; font-size:.75rem; font-weight:700; color:var(--kw-pink-dark); line-height:1.45; }
.post_content h3.kwr-card__name{
  margin:0; padding:0; border:0; background:none;
  font-size:1.375rem; line-height:1.35; color:var(--kw-navy);
}
.post_content h3.kwr-card__name::before,
.post_content h3.kwr-card__name::after{ content:none; }

/* 順位の丸（カード）*/
.kwr-crank{
  --c:var(--kw-navy);
  position:relative; flex:none;
  display:inline-flex; align-items:baseline; justify-content:center;
  width:3.1rem; height:3.1rem; padding-top:.6rem;
  border-radius:50%;
  background:var(--c); color:#fff; font-weight:700; line-height:1;
}
.kwr-crank b{ font-size:1.5rem; font-family:var(--kw-font-serif); }
.kwr-crank small{ font-size:.6875rem; }
.kwr-crank .kw-crown{ position:absolute; top:-.95rem; left:50%; width:1.6rem; transform:translateX(-50%); color:var(--c); }
.kwr-crank--gold{   --c:var(--kw-medal-gold-deep);   background:radial-gradient(circle at 35% 30%, var(--kw-medal-gold), var(--kw-medal-gold-deep)); width:3.6rem; height:3.6rem; padding-top:.7rem; }
.kwr-crank--gold b{ font-size:1.8rem; }
.kwr-crank--silver{ --c:var(--kw-medal-silver-deep); background:radial-gradient(circle at 35% 30%, var(--kw-medal-silver), var(--kw-medal-silver-deep)); }
.kwr-crank--bronze{ --c:var(--kw-medal-bronze-deep); background:radial-gradient(circle at 35% 30%, var(--kw-medal-bronze), var(--kw-medal-bronze-deep)); }

/* 公式サイトのトップ画面（PRは画像の右上にも）*/
.kwr-card__shot{ margin:0 0 .9rem; }
.kwr-card__shot a{ position:relative; display:block; border-radius:10px; overflow:hidden; border:1px solid var(--kw-line); }
.kwr-card__shot a::after{
  content:"PR"; position:absolute; top:.45rem; right:.45rem;
  padding:0 .4em; border-radius:3px;
  background:var(--kw-navy); color:#fff; font-size:.6875rem; font-weight:700; line-height:1.6;
}
.kwr-card__shot img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:top; }
.kwr-card__shot figcaption{ margin-top:.3rem; font-size:.6875rem; color:var(--kw-navy-soft); text-align:right; }

.kwr-card__fit{
  display:flex; gap:.6rem; align-items:flex-start;
  margin:0 0 .9rem; padding:.7rem .8rem;
  border-radius:10px; background:var(--kw-tint-kango);
  font-size:.875rem; font-weight:700; color:var(--kw-navy); line-height:1.6;
}
.kwr-card__fit span{
  flex:none; padding:.1em .6em; border-radius:4px;
  background:var(--kw-pink-dark); color:#fff; font-size:.75rem; line-height:1.7;
}

/* 数字のタイル（介護転職ナビの丸バッジにあたる）*/
.kwr-dots{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:.45rem;
  list-style:none; margin:0 0 .8rem; padding:0;
}
.kwr-dot{
  display:flex; flex-direction:column; align-items:center;
  margin:0; padding:0 0 .6rem;
  border-radius:12px; overflow:hidden;
  background:var(--kw-surface);
  border:1.5px solid color-mix(in srgb, var(--kw-pink) 35%, #fff);
  text-align:center;
}
.kwr-dot__k{
  align-self:stretch;
  padding:.25em 0; margin-bottom:.5rem;
  background:color-mix(in srgb, var(--kw-pink) 10%, #fff);
  font-size:.6875rem; font-weight:700; color:var(--kw-pink-dark);
}
.kwr-dot__ring{ display:flex; flex-direction:column; align-items:center; padding:0 .35rem; }
.kwr-dot__v{ font-size:.875rem; font-weight:700; color:var(--kw-navy); line-height:1.35; word-break:keep-all; overflow-wrap:anywhere; }
.kwr-dot__v small{ display:block; font-size:.6875rem; font-weight:500; color:var(--kw-navy-soft); margin-top:.15em; }
.kwr-dot__at{ margin-top:.25rem; padding:0 .35rem; font-size:.625rem; color:var(--kw-navy-soft); line-height:1.4; }
.kwr-dot.is-empty{ border-color:var(--kw-line); }
.kwr-dot.is-empty .kwr-dot__k{ background:var(--kw-bg); color:var(--kw-navy-soft); }
.kwr-dot.is-empty .kwr-dot__v{ font-size:.75rem; color:var(--kw-navy-soft); font-weight:500; }

/* 勤務形態のタグ */
.kwr-tags{ display:flex; gap:.5rem; align-items:flex-start; margin:0 0 1rem; }
.kwr-tags__k{ flex:none; margin:.2rem 0 0; font-size:.75rem; font-weight:700; color:var(--kw-navy); }
.kwr-tags ul{ display:flex; flex-wrap:wrap; gap:.3rem; list-style:none; margin:0; padding:0; }
.kwr-tags li{
  margin:0; padding:.15em .7em;
  border-radius:999px; border:1px solid var(--kw-lime-dark);
  color:var(--kw-navy); background:color-mix(in srgb, var(--kw-lime) 16%, #fff);
  font-size:.75rem; font-weight:700; line-height:1.6;
}

.kwr-card__cta{ margin:0 0 1.1rem; }
.kwr-card__cta:last-child{ margin:1rem 0 0; }
.kwr-card__cta .kw-cta{ box-shadow:0 4px 0 color-mix(in srgb, var(--kw-pink-dark) 70%, var(--kw-navy)); text-wrap:balance; }

.kwr-sub{
  display:flex; align-items:baseline; gap:.5rem;
  margin:0 0 .5rem; font-size:.9375rem; font-weight:700; color:var(--kw-navy);
}
.kwr-sub small{ font-size:.6875rem; font-weight:500; color:var(--kw-navy-soft); }

/* おすすめポイント（見出しだけ見せ、説明はタップで開く）*/
.kwr-pts ol{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.4rem; }
.kwr-pts li{ margin:0; }
.kwr-pts details{ border-radius:10px; background:var(--kw-bg); border:1px solid var(--kw-line); }
.kwr-pts summary{
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem 2.2rem .65rem .7rem; position:relative;
  list-style:none; cursor:pointer;
  font-size:.9375rem; font-weight:700; color:var(--kw-navy); line-height:1.45;
}
.kwr-pts summary::-webkit-details-marker{ display:none; }
.kwr-pts summary::after{
  content:""; position:absolute; right:.9rem; top:50%;
  width:.5rem; height:.5rem; margin-top:-.35rem;
  border-right:2px solid var(--kw-lime-dark); border-bottom:2px solid var(--kw-lime-dark);
  transform:rotate(45deg); transition:transform .2s;
}
.kwr-pts details[open] summary::after{ transform:rotate(-135deg); margin-top:-.1rem; }
.kwr-pt__no{
  flex:none; display:grid; place-items:center;
  width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--kw-lime); color:var(--kw-navy); font-size:.8125rem; font-weight:700;
}
.kwr-pts details p{ margin:0; padding:0 .9rem .8rem 2.8rem; font-size:.875rem; line-height:1.7; color:var(--kw-navy); }

/* 注意したい点（/ad-guideline/ の約束。畳まない）*/
.kwr-caution{
  margin:0 0 1rem; padding:.8rem .9rem .7rem;
  border-radius:10px;
  background:color-mix(in srgb, var(--kw-orange) 7%, #fff);
  border:1px solid color-mix(in srgb, var(--kw-orange) 30%, #fff);
}
.kwr-caution .kwr-sub::before{
  content:"!"; display:grid; place-items:center; align-self:center;
  width:1.2rem; height:1.2rem; border-radius:50%;
  background:var(--kw-orange); color:var(--kw-navy); font-size:.75rem;
}
.kwr-caution ul{ margin:0; padding:0 0 0 1.1em; }
.kwr-caution li{ margin:0 0 .3em; font-size:.8125rem; line-height:1.65; color:var(--kw-navy); }

/* 詳しい情報（畳む）*/
.kwr-more{ margin:0 0 .4rem; border-top:1px dashed var(--kw-line); border-bottom:1px dashed var(--kw-line); }
.kwr-more summary{
  padding:.7rem .2rem; cursor:pointer; list-style:none;
  font-size:.875rem; font-weight:700; color:var(--kw-navy);
}
.kwr-more summary::-webkit-details-marker{ display:none; }
.kwr-more summary::before{ content:"＋"; color:var(--kw-lime-dark); margin-right:.4em; }
.kwr-more[open] summary::before{ content:"－"; }
.kwr-more dl{ margin:0 0 .8rem; display:grid; gap:.1rem; }
.kwr-more dl div{ display:grid; grid-template-columns:6.5em 1fr; gap:.6rem; padding:.45rem .2rem; border-top:1px solid var(--kw-line); }
.kwr-more dt{ font-size:.8125rem; font-weight:700; color:var(--kw-navy-soft); }
.kwr-more dd{ margin:0; font-size:.875rem; color:var(--kw-navy); }

.kwr-card__src{ margin:.4rem 0 0; font-size:.6875rem; color:var(--kw-navy-soft); text-align:right; }

/* PC: カード上部を「画像｜数字」の2列に */
@media (min-width:768px){
  .kwr-card{ padding:0 1.5rem 1.5rem; }
  .kwr-card__head{ margin:0 -1.5rem 1.2rem; padding:1.2rem 1.5rem 1rem; }
  .kwr-card__body{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
  .kwr-quick__table th:nth-child(1){ width:62%; }
  .kwr-quick__cta br{ display:none; }
  .kwr-quick__cta .kw-pr{ display:inline-block; margin:0 .35em 0 0; }
}

/* SWELL の .post_content ul/ol/a（左の余白・リンクの下線）に負けないよう、詳細度を1段上げて打ち消す */
.post_content .kwr ul,
.post_content .kwr ol{ padding-left:0; margin-left:0; }
.post_content .kwr .kwr-caution ul{ padding-left:1.1em; }
.post_content .kwr li::before{ content:none; }
.post_content .kwr .kwr-fv__pts li::before{ content:"✓"; }
.post_content .kwr a.kwr-quick__name,
.post_content .kwr a.kwr-quick__cta{ text-decoration:none !important; background-image:none; }
.post_content .kwr a.kwr-quick__cta{ background-color:var(--kw-pink-dark); }
.kwr-card__body + .kwr-card__cta{ margin-top:1.1rem; }
.post_content .kwr .kwr-pts ol{ margin-bottom:1rem; }

@media (prefers-reduced-motion:reduce){
  .kwr-pts summary::after{ transition:none; }
}

/* SP の表彰台: バッジはカードの左上の内側に（中央寄せの translate が残ると角からはみ出した）*/
@media (max-width:767px){
  .kwr .kw-podium{ padding-top:2.4rem; }
  .kwr .kw-podium__rank,
  .kwr .kw-podium__item--gold .kw-podium__rank{ left:.9rem; transform:translateY(-50%); }
  .kwr .kw-podium__item,
  .kwr .kw-podium__item--gold{ padding-top:2.4rem; }
  .kwr .kw-podium__item--gold .kw-podium__rank{ width:3.9rem; height:3.9rem; line-height:3.9rem; }
}

/* ── 看護師転職のコツ（「働く場所で何が変わるか」の上）──────────────── */
.kwr-tips{
  position:relative;
  margin:1rem 0 0;
  padding:2.2rem 1.4rem 1.6rem;
  border-radius:18px;
  background:
    radial-gradient(70% 40% at 100% 0%, color-mix(in srgb, var(--kw-lime) 22%, transparent), transparent 70%),
    var(--kw-tint-kango);
  text-align:center;
}
.kwr-tips__label{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:0 0 .7rem; padding:.3em 1.2em;
  border-radius:999px; background:var(--kw-pink-dark); color:#fff;
  font-size:.9375rem; font-weight:700; letter-spacing:.06em;
}
.kwr-tips__label::before{
  content:""; width:1em; height:1em; border-radius:50%;
  background:var(--kw-yellow);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--kw-yellow) 35%, transparent);
}
.post_content h2.kwr-tips__title{
  margin:0 0 .8rem; padding:0; border:0; background:none;
  font-size:clamp(1.45rem, 5.2vw, 2rem); line-height:1.45; color:var(--kw-navy);
}
.kwr-tips__title em{
  font-style:normal; font-size:1.3em; color:var(--kw-pink-dark);
  background:linear-gradient(transparent 70%, color-mix(in srgb, var(--kw-yellow) 75%, #fff) 70%);
  padding:0 .08em;
}
.kwr-tips__lead{ margin:0 auto 1.4rem; max-width:42em; font-size:.9375rem; line-height:1.8; color:var(--kw-navy); }
.kwr-tips__lead strong{ background:linear-gradient(transparent 65%, color-mix(in srgb, var(--kw-lime) 45%, #fff) 65%); }

.kwr-why{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; list-style:none; margin:0 0 1.2rem; padding:0; }
.kwr-why__item{
  position:relative; margin:0;
  padding:1.6rem 1.1rem 1.2rem;
  border-radius:16px; background:var(--kw-surface);
  box-shadow:0 6px 18px -12px rgba(38,48,74,.35);
}
.kwr-why__no{
  position:absolute; top:-.9rem; left:1rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:3.6rem; height:3.6rem; margin:0; padding-top:.1rem;
  border-radius:50%; background:var(--kw-pink-dark); color:#fff;
  font-family:var(--kw-font-serif); font-size:1.375rem; font-weight:700; line-height:1;
  box-shadow:0 0 0 4px var(--kw-surface);
}
.kwr-why__no small{ font-family:inherit; font-size:.625rem; letter-spacing:.12em; margin-bottom:.2rem; }
.post_content h3.kwr-why__ttl{
  margin:0 0 .4rem 3.1rem; padding:0; border:0; background:none; text-align:left;
  font-size:1.125rem; line-height:1.45; color:var(--kw-navy);
}
.post_content h3.kwr-why__ttl::before, .post_content h3.kwr-why__ttl::after{ content:none; }
.kwr-why__img{ mix-blend-mode:multiply; display:block; width:72%; max-width:220px; height:auto; margin:.2rem auto .6rem; }
.kwr-why__txt{ margin:0; text-align:left; font-size:.875rem; line-height:1.75; color:var(--kw-navy); }
.kwr-why__txt strong{ color:var(--kw-pink-dark); }

.kwr-tips__note{
  margin:0 0 1.6rem; padding:.8rem 1rem;
  border-radius:12px; background:var(--kw-surface);
  border:2px dashed color-mix(in srgb, var(--kw-orange) 45%, #fff);
  text-align:left;
}
.kwr-tips__note p{ margin:0; font-size:.875rem; line-height:1.7; color:var(--kw-navy); }
.kwr-tips__note strong{ color:var(--kw-navy); }
.kwr-tips__note p::before{ content:"!"; display:inline-grid; place-items:center; width:1.2rem; height:1.2rem; margin-right:.45rem; border-radius:50%; background:var(--kw-orange); color:var(--kw-navy); font-size:.75rem; font-weight:700; vertical-align:.1em; }

.kwr-pair{ padding:1.4rem 1rem 1rem; border-radius:16px; background:color-mix(in srgb, var(--kw-yellow) 16%, #fff); }
.kwr-pair__head{
  display:flex; flex-direction:column; align-items:center;
  margin:0 0 1rem; font-family:var(--kw-font-serif); font-weight:700; font-size:1.375rem; color:var(--kw-navy);
}
.kwr-pair__head span{ font-family:inherit; font-size:.75rem; letter-spacing:.1em; color:var(--kw-pink-dark); margin-bottom:.2rem; }
.kwr-pair ul{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.6rem; list-style:none; margin:0 0 .6rem; padding:0; }
.kwr-pair__item{
  display:flex; flex-direction:column; align-self:stretch;
  margin:0; padding:.9rem .8rem; border-radius:14px; background:var(--kw-surface);
  border:2px solid color-mix(in srgb, var(--kw-lime) 70%, #fff);
}
.kwr-pair__type{
  align-self:center; margin:0 0 .4rem; padding:.15em .8em; border-radius:999px;
  background:var(--kw-lime); color:var(--kw-navy); font-size:.75rem; font-weight:700;
}
.kwr-pair__name{ margin:0 0 .5rem; font-family:var(--kw-font-serif); font-weight:700; font-size:1.0625rem; color:var(--kw-navy); }
.kwr-pair__shot{ position:relative; display:block; margin:0 0 .5rem; border-radius:8px; overflow:hidden; border:1px solid var(--kw-line); line-height:0; }
.kwr-pair__shot::after{ content:"PR"; position:absolute; top:.3rem; right:.3rem; padding:0 .35em; border-radius:3px; background:var(--kw-navy); color:#fff; font-size:.625rem; font-weight:700; line-height:1.6; }
.kwr-pair__shot img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:top; }
.kwr-pair__fit{ margin:0 0 .7rem; font-size:.8125rem; line-height:1.6; color:var(--kw-navy-soft); text-align:left; }
.kwr-pair__cta{
  display:block; margin-top:auto; padding:.6em .5em; border-radius:999px;
  background:var(--kw-pink-dark); color:#fff !important; text-decoration:none !important;
  font-size:.875rem; font-weight:700;
  box-shadow:0 3px 0 color-mix(in srgb, var(--kw-pink-dark) 70%, var(--kw-navy));
}
.kwr-pair__plus{
  margin:0; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%;
  background:var(--kw-orange); color:var(--kw-navy); font-weight:700; font-size:1.1rem;
}
.post_content .kwr .kwr-pair ul{ padding-left:0; }

@media (max-width:767px){
  .kwr-tips{ padding:1.8rem .9rem 1.2rem; }
  .kwr-why{ grid-template-columns:1fr; gap:1.6rem; }
  .kwr-why__img{ width:58%; }
  .kwr-pair ul{ grid-template-columns:1fr auto 1fr; gap:.35rem; }
  .kwr-pair__item{ padding:.7rem .55rem; }
  .kwr-pair__name{ font-size:.875rem; }
  .kwr-pair__type{ font-size:.6875rem; padding:.15em .6em; }
  .kwr-pair__fit{ font-size:.75rem; }
  .kwr-pair__cta{ font-size:.75rem; }
  .kwr-pair__plus{ width:1.6rem; height:1.6rem; font-size:.95rem; }
}

/* ==========================================================================
   UI（2026-10-05）— mock.css の後に読む（build.mjs）
   経緯:
   ① 社長「ボタンとかUIがダサすぎる」→ 生成画像（金属調の月桂樹・リボン・キラキラ・筆）で飾った
   ② 社長「このあしらいダサくね？参考サイトみてみてよ」
      → 参考サイト（介護転職ナビ）は**飾りが全部フラット**（淡い単色の月桂樹・単色トロフィー・小さな星・点線）。
        金属調・立体の画像はフラットな UI と質感が喧嘩していた。**画像の飾りはやめ、フラットな SVG／CSS に統一**
   ⚠ 質感を混ぜない: 立体のグラデ・光沢・写実の画像は使わない。面は単色＋淡い影まで
   ⚠ 色は承認10色（＋そこから color-mix のメダル色）だけ
   ========================================================================== */

/* ── 見出しラベル（＼ 探し方の違いも比べられる ／）──────────────── */
.kwr-sec span,
.kwr-pair__head span{
  position:relative;
  display:inline-flex; align-items:center; gap:.7em;
  margin:0 0 .45rem;
  color:var(--kw-pink-dark);
  font-family:var(--kw-font-serif); font-weight:700;
  font-size:.875rem; letter-spacing:.14em;
}
.kwr-sec span::before, .kwr-sec span::after,
.kwr-pair__head span::before, .kwr-pair__head span::after{
  content:""; flex:none; width:2px; height:1.1em; border-radius:2px;
  background:currentColor; transform:rotate(-28deg);
}
.kwr-sec span::after, .kwr-pair__head span::after{ transform:rotate(28deg); }

/* 見出しの下: 3色の点（ピンク・黄・ライム）*/
.kwr-sec::after{
  content:""; width:2.6rem; height:.45rem; margin-top:.55rem; border-radius:0;
  background:
    radial-gradient(circle, var(--kw-pink) 0 .22rem, transparent .24rem) 0 50%/.86rem .45rem no-repeat,
    radial-gradient(circle, var(--kw-yellow) 0 .22rem, transparent .24rem) 50% 50%/.86rem .45rem no-repeat,
    radial-gradient(circle, var(--kw-lime) 0 .22rem, transparent .24rem) 100% 50%/.86rem .45rem no-repeat;
}

/* 「看護師転職のコツ」: 塗りのピル＋左右に伸びる線＋右肩のキラ線（参考サイトの見出しラベルの型）*/
.kwr-tips__label{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  margin:0 0 .9rem; padding:0;
  background:none; box-shadow:none; border-radius:0;
  color:var(--kw-pink-dark); font-size:1rem; letter-spacing:.1em;
}
.kwr-tips__label::before,
.kwr-tips__label::after{
  content:""; flex:1; max-width:5rem; height:2px; border-radius:2px;
  background:var(--kw-pink); box-shadow:none;
}
.kwr-tips__label > b{
  position:relative;
  padding:.35em 1.3em; border-radius:999px;
  background:var(--kw-pink-dark); color:#fff; font-weight:700;
}
/* キラ線（3本）*/
.kwr-tips__label > b::after{
  content:""; position:absolute; top:-.7rem; right:-1rem;
  width:1.15rem; height:1.15rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg stroke='%23EE7A1F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 12 7 15'/%3E%3Cpath d='M9 3l1 6'/%3E%3Cpath d='M17 5l-4 5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

/* 「2〜3社」: 白フチの数字＋平らな黄色のマーカー */
.kwr-tips__title em{
  position:relative; z-index:0;
  background:linear-gradient(transparent 62%, color-mix(in srgb, var(--kw-yellow) 70%, #fff) 62%, color-mix(in srgb, var(--kw-yellow) 70%, #fff) 92%, transparent 92%);
  text-shadow:2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff;
}

/* FV: フラットな星 */
.kwr-fv__main{ position:relative; width:max-content; }
.kwr-fv__main::after{
  content:""; position:absolute; top:-.4em; right:-1em;
  width:.95em; height:.95em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M14 4c1 6 3 8 9 9-6 1-8 3-9 9-1-6-3-8-9-9 6-1 8-3 9-9z' fill='%23F3CE1D'/%3E%3Cpath d='M31 18c.6 3.6 1.8 4.8 5.4 5.4-3.6.6-4.8 1.8-5.4 5.4-.6-3.6-1.8-4.8-5.4-5.4 3.6-.6 4.8-1.8 5.4-5.4z' fill='%23F3CE1D'/%3E%3Ccircle cx='30' cy='7' r='2' fill='%23B4D335'/%3E%3Ccircle cx='9' cy='31' r='1.6' fill='%23E5388A'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── 地の模様（ドット）──────────────────────────── */
.kwr-tips{
  background-color:var(--kw-tint-kango);
  background-image:radial-gradient(color-mix(in srgb, var(--kw-pink) 13%, transparent) 1.2px, transparent 1.4px);
  background-size:16px 16px;
}
.kwr .kw-podium{
  background-color:#fff;
  background-image:
    radial-gradient(color-mix(in srgb, var(--kw-yellow) 32%, transparent) 1.2px, transparent 1.4px),
    radial-gradient(120% 70% at 50% 0%, var(--kw-medal-gold-tint), transparent 70%);
  background-size:16px 16px, auto;
}

/* ── ボタン（平らな塗り＋下の影＋右の「＞」）──────────────── */
.kwr .kw-cta,
.kwr .kw-podium__cta,
.kwr .kwr-pair__cta{
  position:relative; display:block; text-align:center;
  border-radius:999px;
  background:linear-gradient(90deg, var(--kw-pink), var(--kw-pink-dark));
  box-shadow:0 4px 0 color-mix(in srgb, var(--kw-pink-dark) 62%, var(--kw-navy));
  transition:transform .12s ease, box-shadow .12s ease;
}
.kwr .kw-cta::after,
.kwr .kw-podium__cta::after,
.kwr .kwr-pair__cta::after{
  content:""; position:absolute; right:1.1em; top:50%;
  width:.5em; height:.5em; margin-top:-.25em;
  border-top:2.5px solid #fff; border-right:2.5px solid #fff;
  transform:rotate(45deg);
}
.kwr .kw-cta:hover,
.kwr .kw-podium__cta:hover,
.kwr .kwr-pair__cta:hover{ transform:translateY(2px); box-shadow:0 2px 0 color-mix(in srgb, var(--kw-pink-dark) 62%, var(--kw-navy)); }
.kwr .kw-cta .kw-pr,
.kwr .kw-podium__cta .kw-pr,
.kwr .kwr-pair__cta .kw-pr{ margin-right:.45em; vertical-align:.12em; border-color:rgba(255,255,255,.85); }
.kwr .kw-podium__cta,
.kwr .kwr-pair__cta{ padding:.75em 2.2em; font-size:.9375rem; }
.kwr-card__cta .kw-cta{ padding:.95rem 2.6em; line-height:1.4; }

.post_content .kwr a.kwr-quick__cta{
  position:relative; padding:.5em 1.3em .5em .35em; border-radius:10px;
  background:var(--kw-pink-dark);
  box-shadow:0 3px 0 color-mix(in srgb, var(--kw-pink-dark) 62%, var(--kw-navy));
}
.kwr-quick__cta::after{
  content:""; position:absolute; right:.45em; top:50%; width:.42em; height:.42em; margin-top:-.22em;
  border-right:2px solid #fff; border-top:2px solid #fff; transform:rotate(45deg);
}

/* 「詳しく見る」: 下向きの「＞」つき文字リンク */
.kwr .kw-podium__more{
  display:inline-flex; align-items:center; gap:.4em;
  margin-top:.8rem; padding:0 0 .1em;
  background:none; border-radius:0; border-bottom:1.5px dotted var(--kw-navy-soft);
  font-size:.8125rem; color:var(--kw-navy) !important; text-decoration:none !important;
}
.kwr .kw-podium__more::after{
  content:""; width:.42em; height:.42em; margin:-.2em 0 0 .15em;
  border-right:2px solid var(--kw-pink-dark); border-bottom:2px solid var(--kw-pink-dark);
  transform:rotate(45deg);
}
@media (max-width:767px){ .kwr .kw-podium__more{ justify-self:center; } }

/* ── 順位のトロフィー（SVG・フラット）──────────────────── */
.kwr-trophy{
  --m:var(--kw-medal-gold); --md:var(--kw-medal-gold-deep);
  --ml:color-mix(in srgb, var(--kw-yellow) 42%, #fff);
  display:block; width:100%; line-height:0;
}
.kwr-trophy--silver{ --m:color-mix(in srgb, var(--kw-navy-soft) 52%, #fff); --md:color-mix(in srgb, var(--kw-navy-soft) 80%, #fff); --ml:color-mix(in srgb, var(--kw-navy-soft) 24%, #fff); }
.kwr-trophy--bronze{ --m:var(--kw-medal-bronze); --md:var(--kw-medal-bronze-deep); --ml:color-mix(in srgb, var(--kw-orange) 30%, #fff); }
.kwr-trophy:not([class*="--"]){ --ml:color-mix(in srgb, var(--kw-navy-soft) 26%, #fff); }
.kwr-trophy svg{ display:block; width:100%; height:auto; overflow:visible; }
.kwr-tr__laurel path{ fill:var(--ml); }
.kwr-tr__laurel .kwr-tr__stem2{ fill:none; stroke:var(--ml); }
.kwr-tr__crown,
.kwr-tr__cup{ fill:var(--m); }
.kwr-tr__handle{ stroke:var(--m); }
.kwr-tr__shine{ stroke:rgba(255,255,255,.7); }
.kwr-tr__stem,
.kwr-tr__base{ fill:var(--md); }
.kwr-tr__num{ fill:#fff; font:700 13px/1 "Noto Sans JP", system-ui, sans-serif; }
.kwr-tr__num--plain{ fill:var(--kw-navy); font-size:22px; font-family:var(--kw-font-serif); }

/* 白い丸の「タブ」をカードの上辺にまたがせる（参考サイトの型）*/
.kwr-podium__tab,
.kwr-card__tab{
  position:absolute; left:50%; top:0; z-index:2;
  display:grid; place-items:center;
  width:4.9rem; height:4.9rem; padding:.55rem .6rem .75rem;
  border-radius:50%;
  background:#fff;
  transform:translate(-50%, -52%);
  box-shadow:0 -3px 8px -4px rgba(38,48,74,.18);
}

/* 表彰台 */
.kwr .kw-podium{ padding-top:3.6rem; }
.kwr .kw-podium__list{ row-gap:3.2rem; }
.kwr .kw-podium__item{ padding-top:2.9rem; }
.kwr .kw-podium__item--gold{ padding-top:3.2rem; }
.kwr .kw-podium__item--gold .kwr-podium__tab{ width:5.6rem; height:5.6rem; }
@media (max-width:767px){
  .kwr .kw-podium{ padding-top:3rem; }
  .kwr .kw-podium__item,
  .kwr .kw-podium__item--gold{ padding-top:2.9rem; }
  .kwr .kw-podium__item--gold .kwr-podium__tab{ width:4.9rem; height:4.9rem; }
}

/* カード: 横並びの見出し → 中央寄せ（タブ・特徴・名前）*/
.kwr-cards{ gap:3.4rem; padding-top:2.6rem; }
.kwr-card__head,
.kwr-card--medal .kwr-card__head{
  position:relative;
  display:block; text-align:center;
  padding:2.9rem 1rem 1rem;
}
.kwr-card__catch{ font-size:.8125rem; }
.kwr-card__tab{ background:var(--kw-surface); }
@media (min-width:768px){
  .kwr-card__head,
  .kwr-card--medal .kwr-card__head{ padding:3rem 1.5rem 1.1rem; }
}

@media (prefers-reduced-motion:reduce){
  .kwr .kw-cta, .kwr .kw-podium__cta, .kwr .kwr-pair__cta{ transition:none; }
}

/* 調整: トロフィーが小さく数字が読めない／月桂樹が淡すぎた／表彰台のボタンが2行に折れた */
.kwr-podium__tab, .kwr-card__tab{ padding:.3rem .35rem .5rem; }
.kwr-trophy{ --ml:color-mix(in srgb, var(--kw-yellow) 72%, var(--kw-orange) 8%); }
.kwr-trophy--silver{ --ml:color-mix(in srgb, var(--kw-navy-soft) 42%, #fff); }
.kwr-trophy--bronze{ --ml:color-mix(in srgb, var(--kw-orange) 48%, #fff); }
.kwr-trophy:not([class*="--"]){ --ml:color-mix(in srgb, var(--kw-navy-soft) 40%, #fff); }
.kwr-tr__num{ font-size:15px; }
.kwr .kw-podium__cta{ padding:.75em 2em .75em 1.1em; font-size:.875rem; white-space:nowrap; }
.kwr .kw-podium__cta::after{ right:.9em; }

.kwr-fv__main::after{ top:-.1em; right:-1.15em; }

/* ── 区切り見出し（参考サイトの「2026年10月最新版／○○向け転職サイト 5社比較」の型）──────
   ピル＋左右に人物 → 太いゴシックの大見出し（「看護師向け」「社」をピンク・数字だけ特大）→ 左右に斜めの点線
   ⚠ ここだけ明朝ではなく太いゴシック（ランキングの「見出し看板」なので強さを優先）*/
.kwr-head{
  position:relative;
  margin:2.6rem 0 1.2rem; padding:1.3rem 1rem 1.4rem;
  border-radius:18px;
  background:color-mix(in srgb, var(--kw-yellow) 13%, #fff);
  text-align:center;
}
.kwr-head::before,
.kwr-head::after{
  content:""; position:absolute; bottom:1.1rem;
  width:2.6rem; height:3.3rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50' fill='%23EE7A1F'%3E%3Ccircle cx='4.0' cy='4.0' r='1.7'/%3E%3Ccircle cx='6.2' cy='9.2' r='1.7'/%3E%3Ccircle cx='8.5' cy='14.5' r='1.7'/%3E%3Ccircle cx='10.8' cy='19.8' r='1.7'/%3E%3Ccircle cx='13.0' cy='25.0' r='1.7'/%3E%3Ccircle cx='15.2' cy='30.2' r='1.7'/%3E%3Ccircle cx='17.5' cy='35.5' r='1.7'/%3E%3Ccircle cx='19.8' cy='40.8' r='1.7'/%3E%3Ccircle cx='22.0' cy='46.0' r='1.7'/%3E%3Ccircle cx='16.0' cy='4.0' r='1.7'/%3E%3Ccircle cx='18.2' cy='9.2' r='1.7'/%3E%3Ccircle cx='20.5' cy='14.5' r='1.7'/%3E%3Ccircle cx='22.8' cy='19.8' r='1.7'/%3E%3Ccircle cx='25.0' cy='25.0' r='1.7'/%3E%3Ccircle cx='27.2' cy='30.2' r='1.7'/%3E%3Ccircle cx='29.5' cy='35.5' r='1.7'/%3E%3Ccircle cx='31.8' cy='40.8' r='1.7'/%3E%3Ccircle cx='34.0' cy='46.0' r='1.7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.kwr-head::before{ left:1rem; }
.kwr-head::after{ right:1rem; transform:scaleX(-1); }
.kwr-head__top{
  display:flex; align-items:flex-end; justify-content:center; gap:.5rem;
  margin:0 0 .5rem;
}
.kwr-head__person{ width:2.6rem; height:2.6rem; object-fit:contain; }
.kwr-head__pill{
  padding:.3em 1.4em; border-radius:999px;
  background:var(--kw-pink-dark); color:#fff;
  font-size:.9375rem; font-weight:700; letter-spacing:.06em; line-height:1.5;
}
.post_content h2.kwr-head__title{
  margin:0; padding:0; border:0; background:none;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",sans-serif;
  font-weight:800; letter-spacing:.06em;
  font-size:clamp(1.35rem, 5.4vw, 1.875rem); line-height:1.35;
  color:var(--kw-navy);
}
.post_content h2.kwr-head__title::before,
.post_content h2.kwr-head__title::after{ content:none; }
.kwr-hl{ color:var(--kw-pink-dark); }
.kwr-big{
  display:inline-block;
  margin-right:.04em;
  font-size:2.1em; line-height:1; font-weight:800;
  color:var(--kw-pink-dark);
  vertical-align:-.08em;
  text-shadow:3px 3px 0 color-mix(in srgb, var(--kw-yellow) 75%, #fff);
}
@media (max-width:767px){
  .kwr-head{ padding:1.1rem .6rem 1.2rem; }
  .kwr-head::before, .kwr-head::after{ width:1.9rem; height:2.6rem; bottom:.9rem; }
  .kwr-head::before{ left:.5rem; } .kwr-head::after{ right:.5rem; }
  .kwr-head__person{ width:2.2rem; height:2.2rem; }
  .kwr-head__pill{ font-size:.8125rem; }
}

/* ── 早見表: ロゴ＋名前＋特徴、順位はトロフィー ─────────────────── */
.kwr-quick__rank{ flex:none; width:2.7rem; }
.kwr-quick__rank .kwr-tr__num{ font-size:16px; }
.kwr-quick__txt{ gap:.15rem; }
.kwr-quick__logo{
  display:block; width:auto; height:auto;
  max-width:8.5rem; max-height:1.9rem; object-fit:contain; object-position:left center;
  margin:0 0 .1rem;
}
.post_content .kwr a.kwr-quick__name{ font-size:.8125rem; color:var(--kw-navy); text-decoration:underline !important; text-decoration-color:color-mix(in srgb, var(--kw-navy) 35%, transparent) !important; text-underline-offset:2px; }
.kwr-quick__table td{ padding-top:.85em; padding-bottom:.85em; }
.kwr-quick__table tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--kw-pink) 4%, #fff); }
.kwr-quick__table tr.is-top td{ background:var(--kw-medal-gold-tint); }
.kwr-quick__table td + td{ border-left:1px dashed var(--kw-line); }

/* ロゴの白い地が、色つきの行で白い箱に見えた → 乗算で地を消す */
.kwr-quick__logo{ mix-blend-mode:multiply; }
.kwr-tr__num--plain{ font-size:26px; }

.kwr-quick__rank .kwr-tr__num--plain{ font-size:27px; }


/* ── 掲載サービスの帯: ロゴが流れ続ける（2026-10-06 社長「ロゴをメリーゴーランドのように動かしたい」）──
   ・同じ並びの <ul> を2本横に並べ、両方を自分の幅ぶん左へ動かす → 1本目が抜けた所に2本目が来て切れ目が無い
   ・端はフェードで消す（急に切れて見えない）。マウスを乗せると止まる（ロゴを確かめられる）
   ⚠ 動きを減らす設定の人には動かさない（2本目を隠し、1本目を折り返して並べる） */
.kwr-fv__names{ gap:.9rem; padding:.55rem 0 .55rem 1rem; overflow:hidden; }
.kwr-marquee{
  display:flex; flex:1; min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.post_content .kwr .kwr-marquee__track{
  display:flex; align-items:center; flex:none; gap:0;
  margin:0; padding:0; list-style:none;
  animation:kwr-marquee calc(var(--kwr-n, 7) * 4.2s) linear infinite;
}
.kwr-marquee:hover .kwr-marquee__track{ animation-play-state:paused; }
@keyframes kwr-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
.post_content .kwr .kwr-marquee__item{
  display:flex; align-items:center; justify-content:center;
  flex:none; margin:0 1.1rem; padding:0;
  height:2.6rem;
  background:none; border:0;   /* 枠・白地なし（2026-10-06 社長「枠あるとダサく感じる」）。ロゴの間隔で区切る */
}
.kwr-marquee__logo{ display:block; width:auto; height:auto; max-height:1.6rem; max-width:8rem; object-fit:contain; mix-blend-mode:multiply; }
.kwr-marquee__name{ font-size:.8125rem; font-weight:700; color:var(--kw-navy); white-space:nowrap; }
@media (max-width:767px){
  .kwr-fv__names{ display:block; padding:.6rem 0 .65rem; }
  .kwr-fv__names p{ margin:0 0 .35rem .9rem; }
  .post_content .kwr .kwr-marquee__item{ height:2.3rem; padding:0; margin:0 .8rem; }
  .kwr-marquee__logo{ max-height:1.35rem; max-width:6.5rem; }
}
@media (prefers-reduced-motion:reduce){
  .post_content .kwr .kwr-marquee__track{ animation:none; flex-wrap:wrap; flex:1; row-gap:.4rem; }
  .post_content .kwr .kwr-marquee__track[aria-hidden="true"]{ display:none; }
  .kwr-marquee{ -webkit-mask-image:none; mask-image:none; }
}

/* 帯の地を白に（半透明だとロゴの白い地が四角く浮いた）*/
.kwr-fv__names{ background:#fff; }