/* WAIATが記事に埋め込む装飾パーツのスタイル（配布用の正本）。
 *
 * ⚠️ このファイルは WAIAT の src/lib/part-styles.ts が配信する。
 *    各サイトは bin/pull-waiat-css.sh で取得してコミットするだけ。**手で編集しない**。
 *    直すときは WAIAT 側を直して、各サイトで取り直す。
 *
 * ⚠️ 本文の見出し・素の表・タイポグラフィは**ここに入れない**。サイトごとに違うので
 *    各サイトのCSS（site.css / custom.css）が持つ。ここはWAIATが出すパーツだけ。
 *
 * ⚠️ 色は2種類ある。
 *    ・意味色（caution/info/success/danger/marker）＝**全メディア共通**。
 *      「注意＝オレンジ」「デメリット＝赤」の結びつきを壊さないため、サイトで上書きしない。
 *    ・ブランド色（main / htag）＝メディアごとに上書きする。
 */

/* 色の既定値。サイト側は上書きしたい変数だけ :root で再定義する */
:root{
  --waiat-main:#E60033;    /* ブランド色。要点ボックス・STEP・年表・定義リストなど */
  --waiat-htag:#0184ce;    /* 見出し用のブランド色（見出し本体はサイト側CSSが持つ） */
  --waiat-caution:#EF6C00; /* 注意・警告 */
  --waiat-info:#1565C0;    /* 情報・まとめ・目次・FAQ */
  --waiat-success:#16A34A; /* メリット・チェック・○ */
  --waiat-danger:#DC2626;  /* デメリット・× */
  --waiat-marker:#FFF59D;  /* 蛍光マーカー */
}

/* ⚠️ 以前は padding .375em で、残りの余白を中身の <p> のマージン頼みにしていた。
   中身が table や div だと上が詰まるので、padding だけで決まるようにする。
   実測 上22px/下24px/左右26px → 上下16px/左右20px（2026-09-07 児島指定で縮小） */
.waiat-box{position:relative;border:.1875em solid #ccc;border-radius:0 .375em .375em .375em;padding:1em 1.25em;margin:4em 0;background:#fff}
.waiat-box>.waiat-box__label+*{margin-top:0}
.waiat-box__label{position:absolute;top:0;transform:translateY(-100%);left:-.2143em;display:inline-flex;align-items:center;gap:.4286em;color:#fff;font-weight:700;font-size:.875em;line-height:1;padding:.5714em 1em .5714em .8571em;border-radius:.4286em .4286em 0 0}
/* ⚠️ 親の .waiat-box__label が .875em なので、ここでの1emは14px。16px相当にするため1.1429emにする */
.waiat-box__label::before{content:"";display:inline-block;width:1.1429em;height:1.1429em;background-position:center;background-repeat:no-repeat;background-size:contain}
.waiat-box>:last-child{margin-bottom:0}
.waiat-box ul,.waiat-box ol{margin:0;padding-left:1.4em}
.waiat-box li{margin:.25em 0}
/* ⚠️ 先頭/末尾の li のマージンは ul を通り抜けてボックスの余白に足し算される。
   打ち消しておかないと、中身がリストかどうかで上下の余白が変わる */
.waiat-box li:first-child{margin-top:0}
.waiat-box li:last-child{margin-bottom:0}
/* ⚠️ 入稿HTMLは li の中身を <p> で包む。その既定マージンが ul を通り抜けて
   ボックスの余白に足し算され、上下だけ余分に空いていた */
.waiat-box li>p{margin:0}
.waiat-box li>p+p{margin-top:.5em}
.waiat-box--point{border-color:var(--waiat-main,#E60033)}
.waiat-box--point .waiat-box__label{background:var(--waiat-main,#E60033)}
.waiat-box--point .waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M9%2021h6v-1H9v1zm3-19a7%207%200%200%200-4%2012.7V17h8v-2.3A7%207%200%200%200%2012%202z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--caution{border-color:var(--waiat-caution,#EF6C00)}
.waiat-box--caution .waiat-box__label{background:var(--waiat-caution,#EF6C00)}
.waiat-box--caution .waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M1%2021h22L12%202%201%2021zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--summary{border-color:var(--waiat-info,#1565C0)}
.waiat-box--summary .waiat-box__label{background:var(--waiat-info,#1565C0)}
.waiat-box--summary .waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M9%2016.2%204.8%2012l-1.4%201.4L9%2019%2021%207l-1.4-1.4L9%2016.2z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--note{border-color:#6B7280}
.waiat-box--note .waiat-box__label{background:#6B7280}
.waiat-box--note .waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M11%207h2v2h-2V7zm0%204h2v6h-2v-6zm1-9a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%2018a8%208%200%201%201%200-16%208%208%200%200%201%200%2016z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--toc{border-color:#0D9488}
.waiat-box--toc .waiat-box__label{background:#0D9488}
.waiat-box--toc .waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M4%206h10v2H4V6zm0%205h10v2H4v-2zm0%205h10v2H4v-2zm13-9%204%204-1.4%201.4L17%2010.8%2017%2018h-2V8h2z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--merit{border-color:var(--waiat-success,#16A34A)}
.waiat-box--merit .waiat-box__label{background:var(--waiat-success,#16A34A)}
.waiat-box--merit .waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm-1.2%2014.2L6.5%2012l1.4-1.4%202.9%202.9%205.3-5.3L17.5%209l-6.7%207.2z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--demerit{border-color:var(--waiat-danger,#DC2626)}
.waiat-box--demerit .waiat-box__label{background:var(--waiat-danger,#DC2626)}
.waiat-box--demerit .waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm3.5%2012.1L14.1%2015.5%2012%2013.4l-2.1%202.1-1.4-1.4L10.6%2012%208.5%209.9l1.4-1.4L12%2010.6l2.1-2.1%201.4%201.4L13.4%2012l2.1%202.1z%22%2F%3E%3C%2Fsvg%3E")}
mark{background:linear-gradient(transparent 60%,var(--waiat-marker,#FFF59D) 60%);padding:0 .1em;color:inherit}
.waiat-check{list-style:none;padding-left:0}
.waiat-check li{position:relative;padding-left:1.75em;margin:.5em 0}
.waiat-check li::before{content:"\2713";position:absolute;left:0;top:.25em;color:var(--waiat-success,#16A34A);font-weight:700;font-size:1.25em;line-height:1}
.waiat-steps{list-style:none;counter-reset:wstep;padding-left:.5em;margin:1.5em 0}
.waiat-steps>li{counter-increment:wstep;position:relative;padding:0 0 1.3em 1.8em;border-left:.125em solid #C7D2E0;margin-left:1em}
.waiat-steps>li:last-child{border-left-color:transparent;padding-bottom:.2em}
.waiat-steps>li::before{content:counter(wstep);position:absolute;left:-1.05em;top:-.15em;width:2em;height:2em;background:var(--waiat-info,#1565C0);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85em}
details.waiat-faq{/* border:.0625em solid #E2E2E2; */border-radius:.25em;margin:.6em 0;overflow:hidden}
details.waiat-faq>summary{cursor:pointer;list-style:none;padding:.9em 2.4em .9em 2.6em;position:relative;font-weight:700;background:#F6F7F9}
details.waiat-faq>summary::-webkit-details-marker{display:none}
details.waiat-faq>summary::before{content:"Q";position:absolute;left:.9em;top:.9em;color:var(--waiat-info,#1565C0);font-weight:800}
details.waiat-faq>summary::after{content:"+";position:absolute;right:.95em;top:.75em;font-size:1.2em;color:#999}
details.waiat-faq[open]>summary::after{content:"\2212"}
details.waiat-faq .waiat-faq__a{padding:.5em 1em .5em 1em}
/* 目次（2026-09-07 児島指定のデザイン）
   淡いピンクの地に、枠線なし・角丸なし。番号は 1 / 2.1 の階層表記にする。
   ⚠️ 番号は元のHTMLに無い。CSSカウンタで作るので list-style は使わない。 */
.waiat-toc{background:#FDF0F0;border:0;border-radius:0;padding:2.25em 2.5em;margin:2em 0}
.waiat-toc__title{margin:0 0 1.35em;font-size:1.0625em;font-weight:500;color:#1A1A1A}
.waiat-toc ol,.waiat-toc__sub{list-style:none;margin:0;padding:0}
.waiat-toc>ol{counter-reset:toc-h2}
.waiat-toc>ol>li{counter-increment:toc-h2;display:grid;grid-template-columns:1.5em 1fr;column-gap:.5em;margin:0 0 .95em}
.waiat-toc>ol>li::before{content:counter(toc-h2);color:#1A1A1A;font-variant-numeric:tabular-nums}
.waiat-toc>ol>li:last-child{margin-bottom:0}
/* 子リストは行を丸ごと使う。親の文字位置ではなく、番号のすぐ内側から始める */
.waiat-toc__sub{grid-column:1 / -1;counter-reset:toc-h3;padding-left:.6em;margin:.7em 0 0}
.waiat-toc__sub>li{counter-increment:toc-h3;display:grid;grid-template-columns:2.2em 1fr;column-gap:.5em;margin:0 0 .55em;font-size:.9375em}
.waiat-toc__sub>li::before{content:counter(toc-h2) "." counter(toc-h3);color:#1A1A1A;font-variant-numeric:tabular-nums}
.waiat-toc__sub>li:last-child{margin-bottom:0}
.waiat-toc a{color:#1A1A1A;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:.0625em}
.waiat-toc a:hover{opacity:.6}
@media (max-width: 769px){
	.waiat-toc{padding:1.5em 1.25em}
}
.waiat-box--term{border-color:#4F46E5}
.waiat-box--term .waiat-box__label{background:#4F46E5}
.waiat-box--term .waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M4%204h13a2%202%200%200%201%202%202v14l-3-2-3%202-3-2-3%202V6a2%202%200%200%201%202-2zm2%204v2h9V8H6zm0%204v2h7v-2H6z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-quote{position:relative;margin:1.5em 0;padding:1em 1.2em 1em 2.6em;background:#FAFAFA;border-left:.25em solid #C7CCD6;border-radius:.3em}
.waiat-quote::before{content:"\201C";position:absolute;left:.35em;top:.05em;font-size:2.4em;color:#C7CCD6;line-height:1}
.waiat-quote blockquote{margin:0;border:0;padding:0}
.waiat-quote__cite{margin-top:.5em;font-size:.85em;color:#777;text-align:right}
.waiat-quote__cite::before{content:"\2014 "}
.waiat-compare-wrap{overflow-x:auto;margin:1.5em 0}
.waiat-compare{border-collapse:collapse;width:100%;min-width:30em}
.waiat-compare th,.waiat-compare td{border:.0625em solid #E2E2E2;padding:.6em .8em;text-align:center}
.waiat-compare thead th{background:var(--waiat-info,#1565C0);color:#fff}
.waiat-compare tbody tr:nth-child(even){background:#F7F9FC}
.waiat-compare tbody td:first-child,.waiat-compare tbody th{text-align:left;font-weight:600}
.waiat-compare tr.recommend{background:#FFF7E6}
.waiat-compare tr.recommend td:first-child{box-shadow:inset .25em 0 0 var(--waiat-caution,#EF6C00)}
.wsym{font-weight:700}.wsym-good{color:var(--waiat-success,#16A34A)}.wsym-mid{color:#E8890B}.wsym-bad{color:var(--waiat-danger,#DC2626)}
.waiat-rank{position:relative;border:.0625em solid #E5E7EB;border-radius:.6em;padding:1em 1.2em 1em 4.4em;margin:1em 0;background:#fff}
.waiat-rank__badge{position:absolute;left:.9em;top:1em;width:2.6em;height:2.6em;border-radius:50%;background:#9AA0A6;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:1.05em;line-height:1}
.waiat-rank__badge small{font-size:.5em;font-weight:600;margin-top:.1em}
.waiat-rank--1 .waiat-rank__badge{background:#E0A800}
.waiat-rank--2 .waiat-rank__badge{background:#9AA0A6}
.waiat-rank--3 .waiat-rank__badge{background:#B87333}
.waiat-rank__name{font-weight:700;font-size:1.1em;margin:0 0 .2em}
.waiat-rank__stars{color:#E8A100;letter-spacing:.05em;margin:0 0 .4em}
.waiat-rank__num{color:#666;font-size:.85em;margin-left:.3em}
.waiat-rank>p:last-child{margin-bottom:0}
.waiat-plan{position:relative;border:.125em solid #E5E7EB;border-radius:.7em;padding:1.2em 1.4em;margin:1.2em 0;background:#fff}
.waiat-plan--rec{border-color:var(--waiat-caution,#EF6C00)}
.waiat-plan__ribbon{position:absolute;top:-.8em;left:1.2em;background:var(--waiat-caution,#EF6C00);color:#fff;font-size:.75em;font-weight:700;padding:.25em .8em;border-radius:.3em}
.waiat-plan__name{font-weight:700;font-size:1.15em;margin:0 0 .2em}
.waiat-plan__price{font-size:1.6em;font-weight:800;color:var(--waiat-info,#1565C0);margin:0 0 .5em}
.waiat-plan__price small{font-size:.55em;font-weight:600;color:#666}
.waiat-plan ul{margin:0;padding-left:1.3em}
.waiat-plan li{margin:.3em 0}
.waiat-linkcard{margin:1.2em 0}
.waiat-linkcard a{display:block;border:.0625em solid #E5E7EB;border-radius:.6em;padding:.9em 1.1em;text-decoration:none;color:inherit;transition:background .15s}
.waiat-linkcard a:hover{background:#F7F8FA}
.waiat-linkcard__title{display:block;font-weight:700;color:var(--waiat-info,#1565C0);margin-bottom:.2em}
.waiat-linkcard__desc{display:block;font-size:.9em;color:#555;margin-bottom:.3em}
.waiat-linkcard__url{display:block;font-size:.8em;color:#999}
.waiat-linkcard__url::before{content:"\1F517 "}
.waiat-ba{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin:1.5em 0}
.waiat-ba__item{position:relative;margin:0}
.waiat-ba__item img{width:100%;height:auto;border-radius:.4em;display:block}
.waiat-ba__label{position:absolute;top:.5em;left:.5em;background:rgba(0,0,0,.7);color:#fff;font-size:.75em;font-weight:700;padding:.2em .6em;border-radius:.3em}
@media (max-width: 769px){.waiat-ba{grid-template-columns:1fr}}
figure.waiat-table-wrap,figure.wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
figure.waiat-table-wrap>table,figure.wp-block-table>table{width:auto;min-width:100%}
figure.waiat-table-wrap>table.waiat-table--card,figure.wp-block-table>table.waiat-table--card{min-width:46em}
@media (max-width: 769px){figure.waiat-table-wrap>table.waiat-table--card thead,figure.wp-block-table>table.waiat-table--card thead{display:none}figure.waiat-table-wrap>table.waiat-table--card,figure.wp-block-table>table.waiat-table--card,figure.waiat-table-wrap>table.waiat-table--card tbody,figure.wp-block-table>table.waiat-table--card tbody{display:block;min-width:0}figure.waiat-table-wrap>table.waiat-table--card tr,figure.wp-block-table>table.waiat-table--card tr{display:block;margin:0 0 1em;border:.0625em solid #E2E2E2;border-radius:.5em}figure.waiat-table-wrap>table.waiat-table--card td,figure.wp-block-table>table.waiat-table--card td{display:block;min-width:0;padding:.4em .75em;border:0;border-bottom:.0625em solid #F0F0F0;text-align:left}figure.waiat-table-wrap>table.waiat-table--card tr td:last-child,figure.wp-block-table>table.waiat-table--card tr td:last-child{border-bottom:0}figure.waiat-table-wrap>table.waiat-table--card td::before,figure.wp-block-table>table.waiat-table--card td::before{content:attr(data-label);display:block;font-weight:700;color:#666;font-size:.8em;margin-bottom:.15em}figure.waiat-table-wrap>table.waiat-table--card td:empty,figure.wp-block-table>table.waiat-table--card td:empty{display:none}}
.waiat-score{border:.0625em solid #E5E7EB;border-radius:.6em;padding:1.1em 1.3em;margin:1.4em 0;background:#fff}
.waiat-score__title{font-weight:700;font-size:1.1em;margin:0 0 .5em}
.waiat-score__overall{display:flex;align-items:baseline;gap:.15em;margin:0 0 .8em;flex-wrap:wrap}
.waiat-score__avgnum{font-size:2em;font-weight:800;color:var(--waiat-caution,#EF6C00);line-height:1}
.waiat-score__avgmax{font-size:.9em;color:#999;margin-right:.4em}
.waiat-score__avgstars{color:#E8A100;letter-spacing:.05em;font-size:1.2em}
.waiat-score__row{display:flex;align-items:center;gap:.6em;margin:.45em 0}
.waiat-score__label{flex:0 0 7em;font-size:.92em;font-weight:600;margin:0}
.waiat-score__bar{flex:1 1 auto;height:.7em;background:#EEF1F4;border-radius:.4em;overflow:hidden}
.waiat-score__fill{display:block;height:100%;background:linear-gradient(90deg,#FBBF24,#EF6C00);border-radius:.4em}
.waiat-score__val{flex:0 0 2.4em;text-align:right;font-weight:700;color:#555;font-size:.9em}
@media (max-width: 769px){.waiat-score__label{flex-basis:5em;font-size:.85em}}
.waiat-author{border:.0625em solid #E5E7EB;border-radius:.6em;padding:1.1em 1.3em;margin:1.6em 0;background:#FAFAFB}
.waiat-author__role{display:inline-block;font-size:.75em;font-weight:700;color:#fff;background:var(--waiat-info,#1565C0);padding:.2em .7em;border-radius:.3em;margin:0 0 .6em}
.waiat-author__head{display:flex;align-items:center;gap:.9em;margin:0}
.waiat-author__avatar{width:3.6em;height:3.6em;border-radius:50%;object-fit:cover;border:.0625em solid #E5E5E5;flex-shrink:0}
.waiat-author__avatar--none{display:flex;align-items:center;justify-content:center;background:#EEF1F4;color:#9AA0A6;font-weight:800;font-size:1.3em}
.waiat-author__meta{display:flex;flex-direction:column;margin:0}
.waiat-author__name{font-weight:700;font-size:1.1em}
.waiat-author__title{font-size:.85em;color:#666;margin-top:.1em}
.waiat-author__bio{font-size:.92em;color:#444;margin:.7em 0 0}
.waiat-author__link{margin:.5em 0 0;font-size:.85em}
.waiat-author__link a{color:var(--waiat-info,#1565C0);text-decoration:none}
.waiat-author__link a:hover{text-decoration:underline}
/* 仮枠はワイヤーフレーム風の無地の矩形（2026-09-07）。絵文字・文字は入れない */
.waiat-imgph{display:block;min-height:0;aspect-ratio:16/9;margin:1.5em 0;padding:0;background:#D9DCE0;border:0;border-radius:0}
.waiat-imgph__wrap{margin:1.5em 0}
.waiat-imgph__wrap .waiat-imgph{margin:0}
.waiat-imgph__cap{display:block;margin-top:.4em;font-size:.8125em;color:#7A8088;text-align:center}
.waiat-imgrow{display:grid;gap:.6em;margin:1.5em 0;align-items:start}
/* ⚠️ グリッドの子は min-width:auto だと中身の最小幅で膨らむ。aspect-ratio を持つ
   空セルが列を占有し、隣の列が数pxに潰れていた（2026-09-07 実発生）。 */
.waiat-imgrow>*{min-width:0}
/* ⚠️ 列幅は画像の縦横比から算出した値を --waiat-imgrow-cols で受け取る
   （幅÷高さ を fr にすると全セルの高さが揃う）。寸法が分からないときは等分。
   変数で渡すのは、下のメディアクエリで1列へ落とせるようにするため。 */
.waiat-imgrow--2{grid-template-columns:var(--waiat-imgrow-cols,1fr 1fr)}
.waiat-imgrow--3{grid-template-columns:var(--waiat-imgrow-cols,1fr 1fr 1fr)}
/* 高さを揃えるので上端揃えの意味がなくなる。伸縮させて下端まで一致させる */
.waiat-imgrow--2 .waiat-imgcell--filled img,
.waiat-imgrow--3 .waiat-imgcell--filled img{width:100%;height:auto}
/* ⚠️ 実画像のセルは <figure>。ブラウザ既定の margin:1em 40px が効いて、
   左右40pxずつ痩せていた。列幅を縦横比どおりに配っても高さが揃わない
   原因になる（2026-09-08 実測で判明） */
.waiat-imgcell{display:block;min-height:0;aspect-ratio:4/3;margin:0;padding:0;background:#D9DCE0;border:0;border-radius:0}
@media (max-width: 769px){.waiat-imgrow--2,.waiat-imgrow--3{grid-template-columns:1fr}}
.waiat-fnref{font-size:.7em;vertical-align:super;line-height:0;margin-left:.1em}
.waiat-fnref a{color:var(--waiat-info,#1565C0);text-decoration:none}
.waiat-refs-wrap{margin:1.2em 0}
.waiat-refs{font-size:.88em;color:#555;padding-left:1.6em;margin:.4em 0}
.waiat-refs li{margin:.45em 0;line-height:1.6}
.waiat-refs a{color:var(--waiat-info,#1565C0);text-decoration:none;word-break:break-word}
.waiat-refs a:hover{text-decoration:underline}
.waiat-refs__dom{color:#999;font-size:.9em;margin-left:.3em}
.waiat-refs__back{margin-left:.4em;text-decoration:none;color:#999}
/* 吹き出し（WAIATの data-type="callout" 由来）。
 * WAIAT本体は話者アイコン付きの block-balloon を出すが、そのアイコンは旧WPテーマのパスを
 * 指しており本サイトには存在しないため、セリフだけのシンプルな表示にしている。 */
.waiat-balloon {
    position: relative;
    margin: 1.5em 0;
    padding: 1em 1.25em;
    background: #f6f7f9;
    border-radius: .75em;
}
.waiat-balloon::before {
    content: "";
    position: absolute;
    top: -0.5em;
    left: 1.5em;
    border-left: .5em solid transparent;
    border-right: .5em solid transparent;
    border-bottom: .5em solid #f6f7f9;
}
.waiat-balloon--right::before { left: auto; right: 1.5em; }
.waiat-balloon--right { background: #fdf0f0; }
.waiat-balloon--right::before { border-bottom-color: #fdf0f0; }
.waiat-balloon__name {
    display: block;
    font-size: .75em;
    font-weight: 700;
    color: #888;
    margin-bottom: .25em;
}
.waiat-balloon__says { margin: 0; }

/* 記事本文に差し込んだ画像（管理画面からアップロードしたもの） */
.waiat-figure {
    margin: 2em 0;
}
.waiat-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .375em;
}
.waiat-figure figcaption {
    margin-top: .5em;
    font-size: .8125em;
    color: #666;
    text-align: center;
}

/* 本文に1枚だけ入る実画像。⚠️ figureのブラウザ既定（左右40pxの余白）が効くと
   本文から段落ひとつぶんずれる。ここで必ず打ち消す */
.waiat-image{margin:2em 0}
.waiat-image img{display:block;width:100%;height:auto;border-radius:.375em}
.waiat-image figcaption{margin-top:.5em;font-size:.8125em;color:#666;text-align:center}

/* 生成AIで作った写真であることの注記。読者に届く必要があるのでCSSのcontentでは出さない
   （出しているのは WaiatHtml::aiNotices）。小さく、しかし読める濃さで置く */

/* 実画像が入ったセル。仮枠(.waiat-imgcell)の点線・背景は打ち消す（2026-09-07） */
.waiat-imgcell--filled{aspect-ratio:auto;background:none}
.waiat-imgcell--filled img{width:100%;height:auto;display:block}
.waiat-imgcell--filled figcaption{margin-top:.4em;font-size:.8125em;color:#666;text-align:center}

/* 補足ボックス（2026-09-14 児島指定のデザイン）
   枠線なし・薄いグレー地・角丸なし。ラベルは箱の外に浮かせず、箱の中の左上に小さなグレーの札として置く。
   本文は12px相当（= .75em）。他の variant（要点・注意など）は従来のまま */
.waiat-box--note{border:0;border-radius:0;background:#F0F0F0;padding:2em 3em 2.25em;margin:2.5em 0;font-size:.75em;line-height:1.85;color:#1A1A1A}
.waiat-box--note>.waiat-box__label{position:static;transform:none;left:auto;display:inline-block;margin:0 0 .75em;padding:.3em .65em;border-radius:0;background:#9AA0A6;color:#fff;font-size:1em;font-weight:500;line-height:1}
.waiat-box--note>.waiat-box__label::before{display:none}
.waiat-box--note p{margin:0}
.waiat-box--note p+p{margin-top:.75em}
@media (max-width: 769px){.waiat-box--note{padding:1.5em 1.25em 1.75em}}

/* =====================================================================
   装飾ボックスの統一デザイン（2026-09-14 児島指定）
   枠線なし・淡い色地・角丸。ラベルは箱の外のタブではなく、箱の中に「色付きアイコン＋色付き文字」で置く。
   バリアントごとに色相だけ変える。⚠️ 上にある旧ルール（枠線・タブ）をここで上書きしているので、
   このブロックはファイル末尾に置いたままにすること。
   ===================================================================== */
.waiat-box{border:0;border-radius:.75em;padding:1.5em 1.75em;margin:2em 0;background:#F4F4F4;color:#2B2B2B}
.waiat-box>.waiat-box__label{position:static;transform:none;left:auto;display:flex;align-items:center;gap:.5em;margin:0 0 .75em;padding:0;border-radius:0;background:none;font-size:1.0625em;font-weight:700;line-height:1.3}
.waiat-box>.waiat-box__label::before{width:1.25em;height:1.25em;flex:0 0 auto}
.waiat-box>.waiat-box__label+*{margin-top:0}
.waiat-box p{margin:0}.waiat-box p+p{margin-top:.6em}
.waiat-box--note{font-size:1em;line-height:inherit;padding:1.5em 1.75em;margin:2em 0}
.waiat-box--point{background:#FDE8EC}
.waiat-box--point>.waiat-box__label{color:#E8365D}
.waiat-box--point>.waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23E8365D%22%3E%3Cpath%20d%3D%22M9%2021h6v-1H9v1zm3-19a7%207%200%200%200-4%2012.7V17h8v-2.3A7%207%200%200%200%2012%202z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--caution{background:#FEF6DC}
.waiat-box--caution>.waiat-box__label{color:#E09A00}
.waiat-box--caution>.waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23E09A00%22%3E%3Cpath%20d%3D%22M1%2021h22L12%202%201%2021zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--summary{background:#E5F7EA}
.waiat-box--summary>.waiat-box__label{color:#2EAE5A}
.waiat-box--summary>.waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%232EAE5A%22%3E%3Cpath%20d%3D%22M9%2016.2%204.8%2012l-1.4%201.4L9%2019%2021%207l-1.4-1.4L9%2016.2z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--note{background:#E5F1FB}
.waiat-box--note>.waiat-box__label{color:#1E88E5}
.waiat-box--note>.waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%231E88E5%22%3E%3Cpath%20d%3D%22M11%207h2v2h-2V7zm0%204h2v6h-2v-6zm1-9a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%2018a8%208%200%201%201%200-16%208%208%200%200%201%200%2016z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--toc{background:#EEE9FB}
.waiat-box--toc>.waiat-box__label{color:#7C4DDB}
.waiat-box--toc>.waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%237C4DDB%22%3E%3Cpath%20d%3D%22M4%206h10v2H4V6zm0%205h10v2H4v-2zm0%205h10v2H4v-2zm13-9%204%204-1.4%201.4L17%2010.8%2017%2018h-2V8h2z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--merit{background:#FCE4EC}
.waiat-box--merit>.waiat-box__label{color:#E53961}
.waiat-box--merit>.waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23E53961%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm-1.2%2014.2L6.5%2012l1.4-1.4%202.9%202.9%205.3-5.3L17.5%209l-6.7%207.2z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--demerit{background:#E3F0FA}
.waiat-box--demerit>.waiat-box__label{color:#2F80D0}
.waiat-box--demerit>.waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%232F80D0%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm3.5%2012.1L14.1%2015.5%2012%2013.4l-2.1%202.1-1.4-1.4L10.6%2012%208.5%209.9l1.4-1.4L12%2010.6l2.1-2.1%201.4%201.4L13.4%2012l2.1%202.1z%22%2F%3E%3C%2Fsvg%3E")}
.waiat-box--term{background:#EDE9FB}
.waiat-box--term>.waiat-box__label{color:#7B49D4}
.waiat-box--term>.waiat-box__label::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%237B49D4%22%3E%3Cpath%20d%3D%22M4%204h13a2%202%200%200%201%202%202v14l-3-2-3%202-3-2-3%202V6a2%202%200%200%201%202-2zm2%204v2h9V8H6zm0%204v2h7v-2H6z%22%2F%3E%3C%2Fsvg%3E")}
@media (max-width: 769px){.waiat-box{padding:1.25em 1.125em}}
/* ボックスの中身は本文より1段小さく（.875em＝14px相当・2026-09-14 児島指定）。ラベルは元の大きさを保つ */
.waiat-box{font-size:.875em}
.waiat-box>.waiat-box__label{font-size:1.2143em}
/* ラベルも1段小さく（箱の .875em 基準で 1.0625em ≒ 15px相当）・下パディングを狭く（2026-09-14 児島指定） */
.waiat-box{padding:1.5em 1.75em 1.125em}
.waiat-box>.waiat-box__label{font-size:1.0625em}
@media (max-width: 769px){.waiat-box{padding:1.25em 1.125em .875em}}

/* 定義リスト（用語と説明の対・2026-09-14 児島指定）。SWELLの「説明リスト（ボーダー）」を写す:
   dt=太字＋メインカラーの細い左線、dd=一段下げて内側に余白 */
.waiat-dl{margin:1.5em 0}
.waiat-dl__dt{font-weight:700;border-left:.0625em solid var(--waiat-main,#E60033);padding-left:.75em;margin:0}
.waiat-dl__dd{margin:0 0 0 1em;padding:1em}
.waiat-dl__dd+.waiat-dl__dt{margin-top:1em}
.waiat-dl__dd>*{margin:0 0 1em}
.waiat-dl__dd>:last-child{margin-bottom:0}

/* タイトル付きボックス（SWELLのキャプションボックス「小見出し」を写す・2026-09-14）
   小さな色付きの札が枠の上辺に食い込む形。色はサイトのメインカラー */
.waiat-capbox{position:relative;margin:2em 0}
.waiat-capbox__ttl{float:left;position:relative;top:.0625em;display:inline-flex;align-items:center;padding:.25em .75em;background:var(--waiat-main,#E60033);color:#fff;font-size:.85em;font-weight:700;line-height:1.5;margin:0}
.waiat-capbox__content{clear:both;position:relative;margin-top:-.125em;padding:1.25em;border:.0625em solid var(--waiat-main,#E60033)}
.waiat-capbox__content>*{margin:0 0 1em}
.waiat-capbox__content>:last-child{margin-bottom:0}

/* STEP（タイトル＋本文）。SWELLの「ステップ」既定スタイルを写す。番号はCSSカウンタ */
.waiat-stepbox{counter-reset:wstepbox;margin:2em 0}
.waiat-stepbox__item{position:relative;padding:0 0 3em 4em}
.waiat-stepbox__item::before{content:"";position:absolute;left:1.4375em;top:0;height:100%;border-left:.0625em dashed #D6D6D6}
.waiat-stepbox__item:last-child{padding-bottom:0}
.waiat-stepbox__item:last-child::before{content:none}
.waiat-stepbox__num{position:absolute;left:0;top:0;width:3em;height:3em;border-radius:50%;background:var(--waiat-main,#E60033);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.waiat-stepbox__num::before{content:"STEP";font-size:.625em;padding-bottom:.125em}
.waiat-stepbox__num::after{counter-increment:wstepbox;content:counter(wstepbox);font-size:1.25em;font-weight:700}
.waiat-stepbox__ttl{display:flex;align-items:center;min-height:3em;margin:0;font-weight:700}
.waiat-stepbox__body{margin-top:.5em}
.waiat-stepbox__body>*{margin:0 0 1em}
.waiat-stepbox__body>:last-child{margin-bottom:0}

/* ○×リスト（メリット／デメリット） */
.waiat-good,.waiat-bad{list-style:none;padding-left:0}
.waiat-good li,.waiat-bad li{position:relative;padding-left:1.6em;margin:.5em 0}
.waiat-good li::before,.waiat-bad li::before{position:absolute;left:0;top:0;font-weight:700}
.waiat-good li::before{content:"○";color:#16A34A}
.waiat-bad li::before{content:"×";color:#DC2626}

/* ブログカード（内部リンクをサムネ＋タイトル＋抜粋で・2026-09-14）。SWELLの関連記事カードを写す */
.waiat-blogcard{display:flex;gap:1em;align-items:stretch;margin:1.5em 0;border:.0625em solid #E2E2E2;border-radius:.5em;overflow:hidden;text-decoration:none;color:inherit;background:#fff;transition:background .15s}
.waiat-blogcard:hover{background:#F7F8FA}
.waiat-blogcard__img{flex:0 0 9em;display:block}
.waiat-blogcard__img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;margin:0}
.waiat-blogcard__body{display:flex;flex-direction:column;justify-content:center;gap:.35em;padding:.9em 1em .9em 0;min-width:0}
.waiat-blogcard__img+.waiat-blogcard__body{padding-left:0}
.waiat-blogcard__body:first-child{padding-left:1em}
.waiat-blogcard__ttl{font-weight:700;line-height:1.5;color:#1A1A1A}
.waiat-blogcard__desc{font-size:.8125em;line-height:1.6;color:#666;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.waiat-blogcard--plain{display:block;padding:.9em 1em;color:var(--waiat-main,#E60033);word-break:break-all}
@media (max-width: 769px){.waiat-blogcard__img{flex-basis:6.5em}}

/* スクリーンショット用のブラウザ枠（画像枠の data-frame="browser"） */
figure[data-frame="browser"]{position:relative;padding-top:1.9em;background:#E9ECF0;border-radius:.5em;overflow:hidden}
figure[data-frame="browser"]::before{content:"";position:absolute;left:.8em;top:.65em;width:.6em;height:.6em;border-radius:50%;background:#FF5F57;box-shadow:1em 0 0 #FEBC2E,2em 0 0 #28C840}
figure[data-frame="browser"] img{display:block;border-radius:0}
figure[data-frame="browser"] figcaption{background:#fff;padding:.5em .75em .6em;margin:0}

/* マーカーの色違い（既定は黄）。<mark data-color="blue|pink"> */
mark[data-color="blue"]{background:linear-gradient(transparent 60%,#BFE3FF 60%)}
mark[data-color="pink"]{background:linear-gradient(transparent 60%,#FFD1DC 60%)}

/* シンプル表（SWELLの「シンプル」を写す・2026-09-14）: 縦の罫線を消し横線だけ。ヘッダー行の下は二重線 */
.article-body table.waiat-table--simple,.editor-styles-wrapper table.waiat-table--simple,.article-preview table.waiat-table--simple{border-collapse:collapse}
.article-body table.waiat-table--simple th,.editor-styles-wrapper table.waiat-table--simple th,.article-preview table.waiat-table--simple th,.article-body table.waiat-table--simple td,.editor-styles-wrapper table.waiat-table--simple td,.article-preview table.waiat-table--simple td{border-left:0;border-right:0;border-top:0;border-bottom:.0625em solid #E2E2E2;background:none}
.article-body table.waiat-table--simple thead th,.editor-styles-wrapper table.waiat-table--simple thead th,.article-preview table.waiat-table--simple thead th,.article-body table.waiat-table--simple tbody tr:first-child th,.editor-styles-wrapper table.waiat-table--simple tbody tr:first-child th,.article-preview table.waiat-table--simple tbody tr:first-child th{background:none;border-bottom:.25em double #C8C8C8;font-weight:700}
.article-body table.waiat-table--simple tbody tr:nth-child(even),.editor-styles-wrapper table.waiat-table--simple tbody tr:nth-child(even),.article-preview table.waiat-table--simple tbody tr:nth-child(even){background:none}

/* タイムライン（時系列・2026-09-15）。ラベルは自由入力（「3ヶ月前」「当日朝」など）。
   ⚠️ STEPと使い分ける: 順番＝STEP、時点＝タイムライン。
   始点と終点のマーカーだけ塗りつぶし、途中は中抜きにして範囲が図で読めるようにする */
.waiat-timeline{margin:2em 0}
.waiat-timeline__item{position:relative;padding:0 0 1.75em 1.875em}
.waiat-timeline__item::before{content:"";position:absolute;left:.375em;top:1.375em;bottom:0;width:.125em;background:#D9DEE3}
.waiat-timeline__item:last-child{padding-bottom:0}
.waiat-timeline__item:last-child::before{content:none}
.waiat-timeline__marker{position:absolute;left:0;top:.375em;box-sizing:border-box;width:.875em;height:.875em;border-radius:50%;border:.1875em solid var(--waiat-main,#E60033);background:#fff}
.waiat-timeline__item:first-child>.waiat-timeline__marker,
.waiat-timeline__item:last-child>.waiat-timeline__marker{background:var(--waiat-main,#E60033)}
.waiat-timeline__label{margin:0;font-size:.75em;font-weight:700;line-height:1.3;color:#8A9096}
.waiat-timeline__ttl{margin:.25em 0 0;font-size:1.0625em;font-weight:700;line-height:1.5}
.waiat-timeline__body{margin-top:.5em}
.waiat-timeline__body>*{margin:0 0 .8em}
.waiat-timeline__body>:last-child{margin-bottom:0}

/* SVGで描いた図解（2026-09-16）
   ⚠️ font-family:inherit が要。SVG内の font-family はプレゼンテーション属性でCSSより弱いので、
      これで記事本文と同じ書体に揃う。指定のままだと端末ごとに書体が変わる。
   ⚠️ width/height 属性のあるSVGは固定サイズになる。幅100%・高さautoで流す。 */
figure.waiat-svg{margin:1.5em 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
figure.waiat-svg svg{display:block;width:100%;height:auto;font-family:inherit}
figure.waiat-svg figcaption{margin-top:.4em;font-size:.8125em;color:#666;text-align:center}
/* ⚠️ 幅いっぱいまで縮めると図の文字が本文の半分以下になって読めない。
   最小幅を持たせて横にスクロールさせる。34emは実測で決めた値
   （26emは縮みすぎ、44emはスクロール量が大きすぎた）。 */
@media (max-width: 769px){figure.waiat-svg svg{min-width:34em}}
