/* ============================================================
   HARE — 本文パーツ（.prose コンポーネント）
   .prose で囲んだ本文に効く部品をすべて定義（記事系の「中身」）。
   ページの構造は article.css 側（記事ページのガワ）が担当。
   このファイル単体で .prose の本文タイポが完結する（固定ページでも
   本文を .prose で囲んで読み込めば同じパーツが使える）。
   ※ styles.css のカラートークンに依存（全ページ共通で読み込み済み）
============================================================ */

:root{
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --info:#1d93dc;   --info-bg:#eaf5fd;  --info-bd:#bfe2fa;  --info-tx:#14679f;
  --warn:#e6920c;   --warn-bg:#fff6e6;  --warn-bd:#f5cf7e;  --warn-tx:#8a5a00;
  --danger:#dc4b3e; --danger-bg:#fdecea;--danger-bd:#f3b3ab;--danger-tx:#b1352a;
  --ok:#2a9d62;     --ok-bg:#e9f7ef;    --ok-bd:#aedcc2;    --ok-tx:#1d7a4a;
}

/* セクション小見出しラベル */
.sg-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em;margin:26px 0 8px;}

/* ============ 本文タイポ 基礎（旧 article.css から集約） ============ */
.prose{margin-top:28px;}
.prose > *:first-child{margin-top:0;}
.prose h2{
  font-size:clamp(20px, 2.3vw, 25px);font-weight:700;line-height:1.5;
  margin:48px 0 18px;padding-left:16px;border-left:4px solid var(--blue);
  scroll-margin-top:92px;letter-spacing:.01em;
}
.prose p{font-size:15px;line-height:2.0;color:var(--ink-soft);margin:0 0 18px;}
.prose strong{color:var(--ink);font-weight:700;}

/* 引用ブロック（HARE） */
.quote{
  position:relative;margin:26px 0;padding:22px 28px 22px 58px;
  background:var(--sky);border-radius:12px;
  font-size:15px;line-height:1.9;color:var(--ink);
}
.quote::before{content:"\201C";position:absolute;left:16px;top:10px;font-size:46px;line-height:1;color:var(--blue);font-family:Georgia,"Times New Roman",serif;font-weight:700;}

/* 箇条書きカード（図版つき） */
.callout{
  display:flex;align-items:center;gap:clamp(20px, 3vw, 36px);
  margin:22px 0 10px;padding:26px 32px;background:var(--sky);border-radius:14px;
}
.callout__list{flex:1 1 auto;display:flex;flex-direction:column;gap:15px;min-width:0;}
.callout__list li{
  position:relative;padding-left:24px;
  font-size:15px;font-weight:700;color:var(--ink-soft);line-height:1.6;
}
.callout__list li::before{
  content:"";position:absolute;left:2px;top:.58em;
  width:9px;height:9px;border-radius:50%;background:var(--blue);
}
.callout__art{flex:none;width:clamp(200px, 28vw, 280px);}
.callout__art img{width:100%;height:auto;}
.callout__art .ph{width:100%;aspect-ratio:4 / 3;border-radius:12px;}

/* ============ 見出し（採用＝D） ============ */
/* h2 は上の基礎で定義（青バー）。h3〜h6 を上書き／追加 */
.prose h3{
  font-size:18px;font-weight:700;line-height:1.5;margin:30px 0 12px;color:var(--ink);
  scroll-margin-top:92px;
}
.prose h3::before{content:"\2014\3000";color:var(--blue);font-weight:700;}
.prose h4{
  font-size:16px;font-weight:700;line-height:1.6;margin:24px 0 10px;color:var(--ink);
  display:flex;align-items:baseline;scroll-margin-top:92px;
}
.prose h4 .badge,.prose h4::before{}
.prose h4{padding-left:0;}
.prose h4 .sg-badge{flex:none;display:inline-block;width:7px;height:16px;border-radius:2px;background:var(--blue);margin-right:10px;transform:translateY(2px);}
.prose h5{
  font-size:15.5px;font-weight:700;line-height:1.6;margin:22px 0 8px;color:var(--ink);
  background:linear-gradient(transparent 62%,#cfeafb 62%);display:inline-block;padding:0 2px;
}
.prose h6{
  font-size:12.5px;font-weight:700;line-height:1.6;margin:22px 0 8px;color:var(--blue-600);
  letter-spacing:.12em;
}

/* ============ テキスト装飾 ============ */
.prose em{font-style:italic;}
.prose b{font-weight:700;color:var(--ink);}
.u-line{text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:3px;text-decoration-thickness:2px;}
.mk{padding:0 2px;}
.mk--y{background:linear-gradient(transparent 58%,#ffec99 58%);}
.mk--r{background:linear-gradient(transparent 58%,#ffc9c4 58%);}
.mk--b{background:linear-gradient(transparent 58%,#cfeafb 58%);}
.strike{text-decoration:line-through;text-decoration-color:var(--danger);color:var(--muted);}
small.note,.prose small{font-size:12px;color:var(--muted);}
.tx-blue{color:var(--blue-600);font-weight:700;}
.tx-red{color:var(--danger);font-weight:700;}
.tx-green{color:var(--ok);font-weight:700;}
.bg-tx{padding:2px 7px;border-radius:5px;font-weight:700;}
.bg-tx--sky{background:var(--sky);color:var(--blue-700);}
.bg-tx--y{background:#fff6c4;color:#7a6a00;}
.prose code,code.kbd{font-family:var(--mono);font-size:.9em;background:#f4f7fa;color:var(--blue-700);border:1px solid var(--border);border-radius:6px;padding:2px 7px;}
code.kbd{border-bottom-width:2px;}

/* ============ リンク（採用＝D最終形） ============ */
.prose a:not(.btn-link):not(.dl):not(.hashtag):not(.author-card__link){
  color:var(--blue-600);font-weight:700;text-decoration:underline;text-decoration-color:var(--border-2);
  text-underline-offset:3px;text-decoration-thickness:2px;
  background-image:linear-gradient(var(--blue),var(--blue));background-position:0 100%;
  background-repeat:no-repeat;background-size:0% 2px;
  transition:background-size .28s ease,color .2s,text-decoration-color .2s;padding-bottom:3px;
}
.prose a:not(.btn-link):not(.dl):not(.hashtag):not(.author-card__link):hover{
  color:var(--blue-700);text-decoration-color:transparent;background-size:100% 2px;
}
.prose a.link-ext::after{content:"\2197";font-weight:700;margin-left:3px;font-size:.92em;display:inline-block;}
.sg-btnrow{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 4px;}
.btn-link{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14px;text-decoration:none;border-radius:10px;padding:13px 24px;transition:transform .2s,background .2s,box-shadow .2s;}
.btn-link--primary{background:var(--blue);color:#fff;box-shadow:0 10px 22px -12px rgba(29,147,220,.8);}
.btn-link--primary:hover{background:var(--blue-600);transform:translateY(-2px);}
.btn-link--ghost{background:#fff;color:var(--blue-600);border:1.5px solid var(--blue);}
.btn-link--ghost:hover{background:var(--blue);color:#fff;transform:translateY(-2px);}
.btn-link--arrow::after{content:"\2192";font-size:1.08em;line-height:1;}
.dl{display:inline-flex;align-items:center;gap:12px;text-decoration:none;border:1px solid var(--border);border-radius:12px;padding:15px 18px;margin:8px 0 16px;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s;}
.dl:hover{border-color:var(--blue);box-shadow:0 10px 24px -14px rgba(29,147,220,.5);transform:translateY(-1px);}
.dl__ic{flex:none;width:42px;height:42px;display:flex;align-items:center;justify-content:center;}
.dl__ic img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.dl__main{display:flex;flex-direction:column;justify-content:center;gap:2px;}
.dl__t{font-size:14px;font-weight:700;color:var(--ink);line-height:1.25;}
.dl__meta{font-size:11.5px;color:var(--muted);line-height:1.25;}

/* ============ ボックス系 ============ */
.box{display:flex;gap:14px;border-radius:12px;padding:18px 20px;margin:14px 0;border:1px solid;}
.box__ic{flex:none;width:42px;height:42px;display:flex;align-items:center;justify-content:center;}
.box__ic img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.box--danger .box__ic img{width:30px;height:30px;}
.box__body{min-width:0;}
.box__t{font-size:14px;font-weight:700;margin:0 0 4px;}
.box__body p{font-size:14px;line-height:1.85;margin:0;color:var(--ink-soft);}
.box--info{background:var(--info-bg);border-color:var(--info-bd);} .box--info .box__t{color:var(--info-tx);}
.box--memo{background:var(--sky-2);border-color:var(--border-2);} .box--memo .box__t{color:var(--blue-700);}
.box--point{background:#fffdf2;border-color:#f1e08a;} .box--point .box__t{color:#8a6f00;}
.box--warn{background:var(--warn-bg);border-color:var(--warn-bd);} .box--warn .box__t{color:var(--warn-tx);}
.box--danger{background:var(--danger-bg);border-color:var(--danger-bd);} .box--danger .box__t{color:var(--danger-tx);}
.box--ok{background:var(--ok-bg);border-color:var(--ok-bd);} .box--ok .box__t{color:var(--ok-tx);}

/* ============ 吹き出し ============ */
.speech{display:flex;align-items:center;gap:14px;margin:16px 0;}
.speech--right{flex-direction:row-reverse;}
.speech__person{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:68px;}
.speech__avatar{flex:none;width:54px;height:54px;border-radius:50%;background:var(--sky);display:grid;place-items:center;overflow:hidden;border:2px solid var(--border-2);}
.speech__avatar svg{width:30px;height:30px;color:var(--blue);}
.speech__avatar:has(img){background:none;border:none;width:66px;height:66px;}
.speech__avatar img{width:100%;height:100%;object-fit:contain;display:block;}
.speech__name{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.3;}
.speech__bubble{position:relative;background:#fff;border:1.5px solid var(--border-2);border-radius:14px;padding:13px 17px;font-size:14px;line-height:1.8;color:var(--ink-soft);max-width:520px;}
.speech__bubble::before,.speech__bubble::after{content:"";position:absolute;top:50%;transform:translateY(-50%);border:8px solid transparent;}
.speech:not(.speech--right) .speech__bubble::before{left:-17px;border-right-color:var(--border-2);}
.speech:not(.speech--right) .speech__bubble::after{left:-14px;border-right-color:#fff;}
.speech--right .speech__bubble::before{right:-17px;border-left-color:var(--border-2);}
.speech--right .speech__bubble::after{right:-14px;border-left-color:#fff;}
.speech--blue .speech__bubble{background:var(--sky);border-color:var(--sky);color:var(--blue-ink);}
.speech--blue:not(.speech--right) .speech__bubble::before{border-right-color:var(--sky);}
.speech--blue:not(.speech--right) .speech__bubble::after{border-right-color:var(--sky);}
.speech--blue.speech--right .speech__bubble::before{border-left-color:var(--sky);}
.speech--blue.speech--right .speech__bubble::after{border-left-color:var(--sky);}

/* ============ リスト ============ */
/* 装飾リスト（HARE） */
.prose ul.b-list,.prose ol.n-list,.prose ul.c-list{margin:12px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
.b-list li{position:relative;padding-left:24px;font-size:15px;line-height:1.75;color:var(--ink-soft);}
.b-list li::before{content:"";position:absolute;left:3px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--blue);}
.n-list{counter-reset:n;}
.n-list li{position:relative;padding-left:40px;font-size:15px;line-height:1.75;color:var(--ink-soft);min-height:28px;}
.n-list li::before{counter-increment:n;content:counter(n);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;font-weight:900;display:grid;place-items:center;}
.c-list li{position:relative;padding-left:32px;font-size:15px;line-height:1.75;color:var(--ink-soft);}
.c-list li::before{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:6px;background:var(--ok-bg);border:1.5px solid var(--ok-bd);}
.c-list li::after{content:"";position:absolute;left:8px;top:6px;width:5px;height:9px;border:solid var(--ok);border-width:0 2.5px 2.5px 0;transform:rotate(42deg);}

/* 標準リスト（ネスト対応） */
.prose ul:not([class]),.prose ol:not([class]){margin:12px 0;padding-left:26px;}
.prose ul:not([class]){list-style:disc;}
.prose ul:not([class]) ul{list-style:circle;margin:6px 0;}
.prose ul:not([class]) ul ul{list-style:square;}
.prose ol:not([class]){list-style:decimal;}
.prose ol:not([class]) ol{list-style:lower-alpha;margin:6px 0;}
.prose ol:not([class]) ol ol{list-style:lower-roman;}
.prose ul:not([class]) li,.prose ol:not([class]) li{font-size:15px;line-height:1.9;color:var(--ink-soft);margin:3px 0;}
.prose ul:not([class]) li::marker,.prose ol:not([class]) li::marker{color:var(--blue);}

/* 定義リスト */
.prose dl{margin:14px 0;}
.prose dt{font-size:15px;font-weight:700;color:var(--ink);margin-top:14px;padding-left:14px;border-left:3px solid var(--blue);}
.prose dt:first-child{margin-top:0;}
.prose dd{margin:6px 0 0;padding-left:14px;font-size:14.5px;line-height:1.9;color:var(--ink-soft);}

/* ============ 引用 ============ */
/* 標準 blockquote（class 無し） */
.prose blockquote:not(.quote){
  margin:16px 0;padding:16px 22px;border-left:4px solid var(--border-2);
  background:var(--sky-2);border-radius:0 10px 10px 0;
  font-size:15px;line-height:1.95;color:var(--ink);
}
.prose blockquote:not(.quote) cite{display:block;margin-top:10px;font-size:12.5px;color:var(--muted);font-style:normal;}
.prose blockquote:not(.quote) cite::before{content:"\2014\2009";}
/* HARE quote / quote--cite は article.css の .quote を踏襲 */
.quote--cite figcaption{margin-top:10px;font-size:12.5px;color:var(--muted);font-style:normal;}
.quote--cite figcaption::before{content:"\2014\2009";}

/* ============ テーブル ============ */
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.prose table th,.prose table td{padding:13px 16px;border-bottom:1px solid var(--border);line-height:1.6;text-align:left;}
.prose table thead th{background:var(--sky);color:var(--blue-ink);font-weight:700;text-align:center;}
.prose table tbody tr:last-child td,.prose table tbody tr:last-child th{border-bottom:none;}
.prose table tbody tr:nth-child(even){background:var(--sky-2);}
/* tbody 内の行見出し th（比較表以外は中央。比較表は後段で左に上書き） */
.prose table tbody th{font-weight:700;color:var(--ink);background:var(--sky);text-align:center;}
/* シンプル表・スクロール対応表はデータセルを中央寄せ（比較表は除く・行見出しは左） */
.prose table:not(.tbl--cmp) td{text-align:center;}
/* 比較表（基底 .prose table td より優先させるため .prose を付与） */
.prose .tbl--cmp td{text-align:center;}
.prose .tbl--cmp td:first-child,.prose .tbl--cmp tbody th{font-weight:700;color:var(--ink);background:var(--sky);text-align:center;}
.tbl--cmp thead th:first-child{background:#fff;}
.tbl--cmp tbody tr:nth-child(even){background:#fff;}
.mark-o{color:var(--ok);font-weight:900;} .mark-t{color:var(--warn);font-weight:900;} .mark-x{color:var(--danger);font-weight:900;}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0;}
.scroll-x table{margin:0;min-width:560px;}
.scroll-hint{font-size:11.5px;color:var(--muted);margin:6px 2px 0;display:flex;align-items:center;gap:6px;}
.scroll-hint::before{content:"\2194";font-weight:700;font-size:1.25em;line-height:1;color:var(--blue);}

/* ============ 画像（配置） ============ */
.prose figure.sg-fig{margin:14px 0;}
.prose img.aligncenter{display:block;margin:14px auto;max-width:100%;height:auto;border-radius:10px;}
.prose img.alignnone{display:block;width:100%;height:auto;margin:14px 0;border-radius:10px;}
.prose img.alignleft{float:left;margin:6px 22px 12px 0;max-width:50%;height:auto;border-radius:10px;}
.prose img.alignright{float:right;margin:6px 0 12px 22px;max-width:50%;height:auto;border-radius:10px;}
.prose .clearfix{clear:both;}
.prose p[style*="center"] img{border-radius:10px;}

/* ============ 強調パーツ ============ */
.feat{border-radius:14px;padding:22px 24px;margin:16px 0;border:1px solid var(--border);background:#fff;}
.feat__head{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:900;margin-bottom:12px;}
.feat__head .pill{font-size:11px;font-weight:700;color:#fff;background:var(--blue);border-radius:999px;padding:4px 12px;letter-spacing:.04em;}
.feat--concl{background:linear-gradient(180deg,var(--sky) 0%,var(--sky-2) 100%);border-color:var(--sky);}
.feat--concl .feat__head{color:var(--blue-ink);}
.feat--sum{border-left:5px solid var(--blue);}
.feat--rec{background:#fffdf2;border-color:#f1e08a;}
.feat--rec .feat__head .pill{background:#e6920c;}
.feat p{font-size:14px;line-height:1.9;color:var(--ink-soft);margin:0;}
.procon{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0;}
.pc{border-radius:13px;padding:18px 20px;border:1px solid;}
.pc__h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900;margin-bottom:11px;}
.pc__h .s{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font-size:15px;font-weight:900;}
.pc--pro{background:var(--ok-bg);border-color:var(--ok-bd);} .pc--pro .pc__h{color:var(--ok-tx);} .pc--pro .s{background:var(--ok);}
.pc--con{background:var(--danger-bg);border-color:var(--danger-bd);} .pc--con .pc__h{color:var(--danger-tx);} .pc--con .s{background:var(--danger);}
.prose .pc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.prose .pc li{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.7;color:var(--ink-soft);padding-left:0;margin:0;}
.prose .pc li::marker{content:none;}
.prose .pc li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;}
.prose .pc--pro li::before{background:var(--ok);} .prose .pc--con li::before{background:var(--danger);}
.checkpoint{border:2px solid var(--blue);border-radius:14px;padding:0;margin:16px 0;overflow:hidden;}
.checkpoint__h{background:var(--blue);color:#fff;font-size:14px;font-weight:900;padding:11px 20px;display:flex;align-items:center;gap:8px;}
.checkpoint__b{padding:16px 22px;}
.checkpoint__b .c-list{margin:0;}

@media (max-width:700px){
  .procon{grid-template-columns:1fr;}
  .prose img.alignleft,.prose img.alignright{float:none;display:block;max-width:100%;margin:14px 0;}
  /* 本文タイポ（旧 article.css から集約） */
  .prose p{font-size:14.5px;line-height:1.95;}
  .callout{flex-direction:column;align-items:stretch;padding:22px 22px 24px;gap:18px;}
  .callout__art{width:min(62%, 220px);align-self:center;order:-1;}
}