/* 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{
  /* ⚠️ 既定はモノクロ（2026-09-25 児島指定）。ブランド色は各サイトが :root で上書きする。
     WAIATの編集タブはサイトが決まらないので、この既定（黒）で出る */
  --waiat-main:#333;       /* ブランド色。要点ボックス・STEP・年表・定義リストなど */
  /* ⚠️ 主役色の上に載せる文字の色。accent が明るいサイト（淡いピンク・レモンイエロー）で
     白のままだと読めない。サイト側で上書きする */
  --waiat-main-on:#fff;
  --waiat-htag:#333;       /* 見出し用のブランド色（見出し本体はサイト側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,#333)}
.waiat-box--point .waiat-box__label{background:var(--waiat-main,#333);color:var(--waiat-main-on,#fff)}
.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:"";position:absolute;left:.3em;top:.3em;box-sizing:border-box;width:.45em;height:.8em;border:solid var(--waiat-main-strong,var(--waiat-main,#16A34A));border-width:0 .2em .2em 0;transform:rotate(45deg)}
.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 #D9DEE3;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-main-strong,var(--waiat-main,#1565C0));color:var(--waiat-main-on,#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-main-strong,var(--waiat-main,#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 は使わない。 */
/* 目次（参考 https://www.seohacks.net/column/22481/ の computed style を実測・2026-09-18）
   ⚠️ 目分量で寄せると行間がずれる。実測した値をそのまま使う。
        枠 背景#F7F7F7 / padding 30px 20px
        見出し 20px / w500 / lh36px / #000 / margin-bottom 10px
        大見出し 16px / w700 / lh28.8px(1.8) / padding-left 16px、▼ 10px absolute left0 top5px
        小見出し 14px / w400 / lh25.2px(1.8) / margin 7px 0 0 14px / padding-left 14px、● 8px
   ⚠️ 位置合わせは absolute。grid+baseline や line-height だと文字サイズを変えるたびにずれる。
   ⚠️ 文字はブランド色そのものではなく --waiat-main-strong を使う。マタニティのレモン
      イエロー(#ffe600)は灰色地との比が1.18、ウェディングの淡いピンク(#ffc2d4)は1.41で
      読めないため、サイト側が色相を保ったまま暗くした値を渡す（App\Support\Contrast）。
      ▼ と ● は装飾なのでブランド色そのままでよい。 */
/* 目次（2026-09-23 児島指定のデザイン）。左に主役色の太線、大きな「INDEX」＋小さな「目次」、
   見出し2は濃い太字、見出し3は灰色で字下げ。▼●の行頭記号はやめた。
   ⚠️ 「INDEX」は ::before で出す（HTMLは <p class="waiat-toc__title">目次</p> のまま）。
   ⚠️ 見出し3の灰色は #6B7280（#F7F7F7 との比 4.6）。見本の薄い灰色だと 3:1 前後で読みにくい */
.waiat-toc{position:relative;background:#F7F7F7;border:0;border-left:.375em solid var(--waiat-main,#333);border-radius:0;padding:2.5em 3em;margin:2em 0;font-size:1em}
.waiat-toc__title{display:flex;align-items:baseline;gap:.6em;margin:0 0 1.75em;font-size:1.25em;font-weight:700;line-height:1;color:#6B7280}
.waiat-toc__title::before{content:"INDEX";font-size:1.2em;font-weight:800;letter-spacing:-.01em;line-height:1;color:#1a1a1a}
.waiat-toc ol,.waiat-toc__sub{list-style:none;margin:0;padding:0}
.waiat-toc>ol{margin:0}
.waiat-toc>ol>li{margin:0 0 .875em;padding:0}
.waiat-toc>ol>li:last-child{margin-bottom:0}
.waiat-toc>ol>li>a{display:block;font-size:.9375em;font-weight:700;line-height:1.5;color:#1a1a1a}
.waiat-toc__sub{margin:.375em 0 0 2.25em;padding:0}
.waiat-toc__sub>li{margin:.25em 0 0;padding:0}
.waiat-toc__sub>li>a{display:block;font-size:.8125em;font-weight:700;line-height:1.6;color:#6B7280}
.waiat-toc a{text-decoration:none}
.waiat-toc a:hover{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:.0625em}
@media (max-width: 769px){.waiat-toc{padding:1.75em 1.5em}.waiat-toc__title::before{font-size:1.2em}.waiat-toc__sub{margin-left:1em}}
/* 子リストは行を丸ごと使う。親の文字位置ではなく、番号のすぐ内側から始める */
@media (max-width: 769px){
	}
.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;font-size:.875em}
.waiat-compare th,.waiat-compare td{border:.0625em solid #E2E2E2;padding:.6em .8em;text-align:center}
.waiat-compare thead th{background:var(--waiat-main-strong,var(--waiat-main,#1565C0));color:var(--waiat-main-on,#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,.waiat-compare tbody tr.recommend:nth-child(even){background:var(--waiat-tint,#FFF7E6)}
.waiat-compare tr.recommend td:first-child{box-shadow:inset .25em 0 0 var(--waiat-main,#333)}
.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-blogcard）だけ（2026-09-19 児島指定） */
.waiat-extlink{margin:1.5em 0;font-size:.9375em;line-height:1.8}
.waiat-extlink__link{color:#2C54B0;text-decoration:underline;font-weight:700}
.waiat-extlink__domain{color:#999;font-size:.8667em;margin-left:.5em;white-space:nowrap}
.waiat-extlink__desc{display:block;color:#555;font-size:.9333em;margin-top:.15em}
.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 にすると全セルの高さが揃う）。寸法が分からないときは等分。
   寸法が無い古い本文でも崩れないよう、既定値は等分にしてある。 */
.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)}
/* 4枚組は2×2（2026-09-28）。スマホでも2列のまま（1列だと4枚が縦に長く続く） */
.waiat-imgrow--4{grid-template-columns:1fr 1fr}
/* 高さを揃えるので上端揃えの意味がなくなる。伸縮させて下端まで一致させる */
.waiat-imgrow--2 .waiat-imgcell--filled img,
.waiat-imgrow--3 .waiat-imgcell--filled img,
.waiat-imgrow--4 .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}
/* スマホでも2枚組・3枚組は横に並べたまま（2026-10-17 児島指定）。縦に積むと同じ構図が続いて比較にならない。
   小さい分はタップで拡大（サイト側の waiat/article.blade.php のライトボックス）。隙間と説明文だけ詰める */
@media (max-width: 769px){.waiat-imgrow{gap:.35em}.waiat-imgrow--3 .waiat-imgcell--filled figcaption{font-size:.6875em;line-height:1.35}}
.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-balloon--face（顔アイコン付き・下）、無ければセリフだけの箱。 */
.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 を前に付けて強くする。本文の段落の余白（.article-body p 等の margin-bottom 1.5em）に負けると、吹き出しの下が空く（2026-09-26） */
.waiat-balloon .waiat-balloon__says { margin: 0; }
/* 顔アイコン付きの吹き出し（2026-09-26）。サイト設定の吹き出しキャラの画像（表情ごと）を出す。
 * ⚠️ 画像の指定は .waiat-balloon を前に付けて強くする。各サイトの「本文の画像は幅100%・高さauto」に負けると丸く切れない */
.waiat-balloon--face { display: flex; align-items: flex-start; gap: 1em; padding: 0; background: none; }
.waiat-balloon--face::before { content: none; }
.waiat-balloon--face.waiat-balloon--right { flex-direction: row-reverse; background: none; }
.waiat-balloon .waiat-balloon__face { flex: 0 0 4.5em; margin: 0; text-align: center; }
.waiat-balloon .waiat-balloon__face img { display: block; width: 4.5em; height: 4.5em; max-width: none; margin: 0 auto; border-radius: 50%; object-fit: cover; border: .125em solid var(--waiat-main,#333); background: #fff; box-sizing: border-box; }
.waiat-balloon .waiat-balloon__face figcaption { margin: .375em 0 0; font-size: .6875em; font-weight: 700; line-height: 1.3; color: #666; }
.waiat-balloon__body { position: relative; flex: 1; min-width: 0; padding: 1em 1.25em; border-radius: .75em; background: #f6f7f9; }
.waiat-balloon__body::before { content: ""; position: absolute; top: 1.5em; left: -.5em; border-top: .5em solid transparent; border-bottom: .5em solid transparent; border-right: .5em solid #f6f7f9; }
.waiat-balloon--right .waiat-balloon__body { background: #fdf0f0; }
.waiat-balloon--right .waiat-balloon__body::before { left: auto; right: -.5em; border-right: 0; border-left: .5em solid #fdf0f0; }

/* 記事本文に差し込んだ画像（管理画面からアップロードしたもの） */
.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")}
/* 補足ボックスは背景なし・上に罫線だけのシンプルな形（2026-09-23 児島指定）。
   ⚠️ 上の統一デザイン（淡い色地・角丸・内側の余白）をここで上書きしている。ラベルの色とアイコンはそのまま。
   ⚠️ セレクタを2クラスにしている。末尾近くの .waiat-box{padding:…}（全ボックス共通）が後ろにあり、1クラスだと余白が戻る */
.waiat-box.waiat-box--note{background:none;border:0;border-top:.0625em solid #C8CDD3;border-radius:0;padding:1.25em 0 0}
.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")}
/* 「この記事でわかること」をサイトのブランド色で出す（2026-09-23 児島指定）。
   背景はブランド色をごく薄く、枠はやや淡く、見出しとアイコンは読める濃さ（--waiat-main-strong）。
   ⚠️ アイコンは色を変えられるよう background-image ではなく mask で描く（下の旧指定を上書き）。
   ⚠️ color-mix が効かない古いブラウザでは直前の単色（#F7F7F7 / #E2E2E2）になる */
.waiat-box.waiat-box--toc{background:#F7F7F7;background:var(--waiat-tint,color-mix(in srgb,var(--waiat-main,#7C4DDB) 7%,#fff));border:0}
/* 見出しの文字は配色設定の「強調」（--waiat-accent・2026-09-25 児島指定）。未設定のサイトはメインカラー */
.waiat-box.waiat-box--toc>.waiat-box__label{color:var(--waiat-accent,var(--waiat-main-strong,var(--waiat-main,#7C4DDB)))}
.waiat-box.waiat-box--toc>.waiat-box__label::before{background-image:none;background-color:var(--waiat-main-strong,var(--waiat-main,#7C4DDB));-webkit-mask: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") center/contain no-repeat;mask: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") center/contain no-repeat}
/* 2026-09-23 児島指定: 枠線なし・見出しのアイコンなし・行頭は ☑（ブランド色）。行頭のアイコンはブランド色の丸に白抜きのチェック（SVG内の mask で抜いている）。
   ⚠️ 本文用の .article-body .waiat-box ul（余白）に負けないよう、.article-body 等＋2クラスで強めている */
.waiat-box.waiat-box--toc>.waiat-box__label::before{display:none}
.waiat-box.waiat-box--toc ul,.article-body .waiat-box.waiat-box--toc ul,.editor-styles-wrapper .waiat-box.waiat-box--toc ul,.article-preview .waiat-box.waiat-box--toc ul{list-style:none;padding-left:0}
.waiat-box.waiat-box--toc li,.article-body .waiat-box.waiat-box--toc li,.editor-styles-wrapper .waiat-box.waiat-box--toc li,.article-preview .waiat-box.waiat-box--toc li{position:relative;padding-left:1.6em}
.waiat-box.waiat-box--toc li::before{content:"";position:absolute;left:0;top:.2em;width:1.15em;height:1.15em;background-color:var(--waiat-main-strong,var(--waiat-main,#7C4DDB));-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M6.8%2012.4l3.6%203.6%206.9-7%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fmask%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2211%22%20fill%3D%22%23000%22%20mask%3D%22url%28%23m%29%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M6.8%2012.4l3.6%203.6%206.9-7%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fmask%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2211%22%20fill%3D%22%23000%22%20mask%3D%22url%28%23m%29%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}

.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.75em 2.5em 1.5em}
.waiat-box>.waiat-box__label{font-size:1.0625em}
@media (max-width: 769px){.waiat-box{padding:1.25em 1.125em .875em}}

/* 定義リスト（用語と説明の対）。2026-09-24 児島指定で「左右2列」に変更（デザイン案C。直前の案Dから差し替え）:
   用語を左（8.5em）、説明を右に並べ、組ごとに細い横線で区切る。用語は読める濃さのブランド色の太字。スマホでは縦に積む。
   ⚠️ 本文用の .article-body p（行の高さ2・下余白1.75em）に負けないよう、dd の中身は .article-body 等で強めている */
.waiat-dl{display:grid;grid-template-columns:8.5em 1fr;margin:1.5em 0;border-top:.0625em solid #E4E4E4}
.waiat-dl__dt{margin:0;padding:1em .75em 1em 0;border:0;border-bottom:.0625em solid #E4E4E4;background:none;color:var(--waiat-main-strong,var(--waiat-main,#333));font-weight:700;line-height:1.6}
.waiat-dl__dd{margin:0;padding:1em 0;border-bottom:.0625em solid #E4E4E4}
.waiat-dl__dd>*{margin:0 0 .75em}
.waiat-dl__dd>:last-child{margin-bottom:0}
.article-body .waiat-dl__dd>*,.editor-styles-wrapper .waiat-dl__dd>*,.article-preview .waiat-dl__dd>*{margin:0 0 .75em;line-height:1.75}
.article-body .waiat-dl__dd>:last-child,.editor-styles-wrapper .waiat-dl__dd>:last-child,.article-preview .waiat-dl__dd>:last-child{margin-bottom:0}
@media (max-width: 769px){.waiat-dl{grid-template-columns:1fr}.waiat-dl__dt{border-bottom:0;padding:1em 0 .25em}.waiat-dl__dd{padding:0 0 1em}}

/* タイトル付きボックス（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,#333);color:var(--waiat-main-on,#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,#333)}
.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 2em 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,#333);color:var(--waiat-main-on,#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:.25em}
.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 12em;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-size:.9375em;font-weight:700;line-height:1.5;color:#1A1A1A}
.waiat-blogcard__desc{font-size:.75em;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,#333);word-break:break-all}
@media (max-width: 769px){.waiat-blogcard__img{flex-basis:9em}}

/* スクリーンショット用のブラウザ枠（画像枠の 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{width:100%;border-collapse:collapse;font-size:.875em;line-height:1.6;border:.0625em solid #D9D9D9}
.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{padding:1em 1.25em;border:.0625em solid #D9D9D9;background:#fff;text-align:left;vertical-align:middle}
.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:#EEEEEE;border-bottom:.0625em solid #D9D9D9;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,#333);background:#fff}
.waiat-timeline__item:first-child>.waiat-timeline__marker,
.waiat-timeline__item:last-child>.waiat-timeline__marker{background:var(--waiat-main,#333)}
.waiat-timeline__label{margin:0!important;font-size:.75em;font-weight:700;line-height:1.3!important}
.waiat-timeline__ttl{margin:.5em 0 0!important;font-size:1.0625em;font-weight:700;line-height:1.5!important}
.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}}

/* 本文の見出し（2026-09-18・参考 https://www.seohacks.net/blog/28359/ を実測）
   ⚠️ もとは各サイトのCSSが持っていたが、全メディアで同じ形にするため正本へ移した。
   ⚠️ ベタ塗りをやめ、細い線と小さな色面で階層を出す。参考の実測値（body 16px 基準）:
        h2 28px/w700/lh39.2 下線4px #CCC 左に50×4pxの色バー margin 80/40 padding-bottom14
        h3 20px/w700/lh28   下線1px #CCC 左に8×8pxの色ドット margin 60/40 padding 0 0 14 20
      それぞれ自身の font-size を基準に em へ直してある。
   ⚠️ 見出しの線と点は配色設定の色（--waiat-main）そのまま（2026-09-25 児島指定）。
      以前は読める濃さへ自動で暗くした --waiat-main-strong で、設定にない色に見えていた。 */
.article-body h2,.editor-styles-wrapper h2,.article-preview h2{position:relative;margin:2.857em 0 1.429em;padding:0 0 .5em;font-size:1.75em;font-weight:700;line-height:1.4;color:#333;background:none;border:0;border-bottom:.143em solid #CCC;border-radius:0}
.article-body h2::before,.editor-styles-wrapper h2::before,.article-preview h2::before{content:"";position:absolute;left:0;bottom:-.143em;width:1.786em;height:.143em;background:var(--waiat-main,#333)}
.article-body h3,.editor-styles-wrapper h3,.article-preview h3{position:relative;margin:2em 0 1.25em;padding:0 0 .7em 1em;font-size:1.25em;font-weight:700;line-height:1.4;color:#333;background:none;border:0;border-bottom:.05em solid #CCC;border-radius:0}
.article-body h3::before,.editor-styles-wrapper h3::before,.article-preview h3::before{content:"";position:absolute;left:0;top:.45em;width:.4em;height:.4em;background:var(--waiat-main,#333)}
.article-body h4,.editor-styles-wrapper h4,.article-preview h4{margin:2em 0 1em;padding:0;font-size:1.0625em;font-weight:700;line-height:1.5;color:#333;border:0}
.article-body h2+*,.editor-styles-wrapper h2+*,.article-preview h2+*,.article-body h3+*,.editor-styles-wrapper h3+*,.article-preview h3+*,.article-body h4+*,.editor-styles-wrapper h4+*,.article-preview h4+*{margin-top:0}

/* 本文・リスト・表（2026-09-18・参考 https://www.seohacks.net/blog/28359/ を実測）
   ⚠️ サイトごとに持っていたものを正本へ集約した。見出しと同じ理由（全メディアで同じ形にする）。
   参考の実測値（body 16px 基準）:
        本文   lh 32px(2.0) / #333、リンク #2C54B0
        ul>li  margin 15px 0
        ol>li  margin 0 0 12px / padding-left 10px、ol 全体は padding-left 20px
        表     枠 1px #A8ADB9 / セル padding 10px / 見出し行の背景 #334171・白文字
   ⚠️ 表の見出し行はブランド色ではなく --waiat-main-strong を使う。淡い主役色のサイトで
      白文字が読めなくなるため（マタニティのレモンイエロー、ウェディングの淡いピンク）。
   ⚠️ .waiat-table--simple / .waiat-compare など、専用の見た目を持つ表には当てない。 */
.article-body p,.editor-styles-wrapper p,.article-preview p{margin:0 0 1.5em;line-height:1.8}
/* 本文の画像は列幅を超えない（2026-10-17）。⚠️ 各サイトの site.css に任せていたため、持たないサイト（whitepanda）の旧記事の写真がスマホで横にはみ出した */
.article-body img,.editor-styles-wrapper img,.article-preview img{max-width:100%;height:auto}
.article-body a,.editor-styles-wrapper a,.article-preview a{color:var(--waiat-main-strong,var(--waiat-main,#2C54B0))}
.article-body ul,.editor-styles-wrapper ul,.article-preview ul,.article-body ol,.editor-styles-wrapper ol,.article-preview ol{margin:0 0 1.75em;padding-left:1.25em;line-height:1.6}
.article-body ul>li,.editor-styles-wrapper ul>li,.article-preview ul>li{margin:.5em 0}
.article-body ol>li,.editor-styles-wrapper ol>li,.article-preview ol>li{margin:0 0 .5em;padding-left:.625em}

/* ⚠️ 上の本文リストのルールは、装飾パーツの中のリストにも当たってしまう。
      「.article-body ul>li」（クラス1＋要素2）が「.waiat-check li」（クラス1＋要素1）より
      強いため、チェックリストの項目間が .5em ではなく .9375em になっていた
      （2026-09-19 実測: 8px のはずが 15px、目次の li も 0 のはずが 12px）。
   ⚠️ :not() で装飾パーツを除外する手もあるが、複雑な :not() は Safari 16.4 より前で
      選択子ごと無効になり、本文のリストが素の見た目に落ちる。
      ここは素直に、パーツ側を同じ入れ物つきで書き直して勝たせる。
   ⚠️ このファイルはテンプレートリテラル。コメントにバッククォートを書くと文字列が閉じる。 */
.article-body ul.waiat-check,.editor-styles-wrapper ul.waiat-check,.article-preview ul.waiat-check,.article-body ul.waiat-good,.editor-styles-wrapper ul.waiat-good,.article-preview ul.waiat-good,.article-body ul.waiat-bad,.editor-styles-wrapper ul.waiat-bad,.article-preview ul.waiat-bad{padding-left:0}
.article-body ul.waiat-check>li,.editor-styles-wrapper ul.waiat-check>li,.article-preview ul.waiat-check>li{margin:.5em 0;padding-left:1.75em}
.article-body ul.waiat-good>li,.editor-styles-wrapper ul.waiat-good>li,.article-preview ul.waiat-good>li,.article-body ul.waiat-bad>li,.editor-styles-wrapper ul.waiat-bad>li,.article-preview ul.waiat-bad>li{margin:.5em 0;padding-left:1.6em}
.article-body ol.waiat-steps,.editor-styles-wrapper ol.waiat-steps,.article-preview ol.waiat-steps{padding-left:.5em;margin:1.5em 0}
.article-body ol.waiat-steps>li,.editor-styles-wrapper ol.waiat-steps>li,.article-preview ol.waiat-steps>li{margin:0 0 0 1em;padding:0 0 1.3em 1.8em}
/* 引用（2026-09-23 児島指定）。左の罫線なし・本文の文字を少し小さく・本文と引用元のすき間を詰める。
   ⚠️ 本文用の共通指定（p の下余白 1.75em）に負けないよう .article-body 等で強めている */
.article-body .waiat-quote,.editor-styles-wrapper .waiat-quote,.article-preview .waiat-quote{border-left:0}
.article-body .waiat-quote blockquote,.editor-styles-wrapper .waiat-quote blockquote,.article-preview .waiat-quote blockquote{font-size:.875em}
.article-body .waiat-quote blockquote p,.editor-styles-wrapper .waiat-quote blockquote p,.article-preview .waiat-quote blockquote p{margin:0}
.article-body .waiat-quote blockquote p+p,.editor-styles-wrapper .waiat-quote blockquote p+p,.article-preview .waiat-quote blockquote p+p{margin-top:.6em}
.article-body .waiat-quote__cite,.editor-styles-wrapper .waiat-quote__cite,.article-preview .waiat-quote__cite{margin-top:.5em}
/* 縦長の1枚画像は幅75%・中央寄せ（2026-09-23 児島指定）。waiat-image--portrait は各サイトが表示時に
   実ファイルの縦横を見て付ける（App\Support\PortraitImages）。本文用の figure の余白指定に負けないよう強めている */
.article-body .waiat-image--portrait,.editor-styles-wrapper .waiat-image--portrait,.article-preview .waiat-image--portrait{width:75%;margin-left:auto;margin-right:auto}
/* タイトル付きボックスの本文は少し小さく・行間を詰める（2026-09-24 児島指定）。
   ⚠️ 本文用の .article-body p（行の高さ2）に負けないよう .article-body 等で強めている */
.article-body .waiat-capbox__content,.editor-styles-wrapper .waiat-capbox__content,.article-preview .waiat-capbox__content{font-size:.875em;line-height:1.7}
.article-body .waiat-capbox__content p,.editor-styles-wrapper .waiat-capbox__content p,.article-preview .waiat-capbox__content p{line-height:1.7}
/* 表のセルの中の段落（<td><p>…</p></td>）に本文用の下余白 1.75em が効き、セルの下が空いていた（2026-09-24）。
   素の表には以前から同じ指定がある。シンプルな表と比較表にも入れる */
.article-body table.waiat-table--simple th p,.article-body table.waiat-table--simple td p,.article-body table.waiat-compare th p,.article-body table.waiat-compare td p,.editor-styles-wrapper table.waiat-table--simple th p,.editor-styles-wrapper table.waiat-table--simple td p,.editor-styles-wrapper table.waiat-compare th p,.editor-styles-wrapper table.waiat-compare td p,.article-preview table.waiat-table--simple th p,.article-preview table.waiat-table--simple td p,.article-preview table.waiat-compare th p,.article-preview table.waiat-compare td p{margin:0;line-height:inherit}
.article-body table.waiat-table--simple th p+p,.article-body table.waiat-table--simple td p+p,.article-body table.waiat-compare th p+p,.article-body table.waiat-compare td p+p,.editor-styles-wrapper table.waiat-table--simple th p+p,.editor-styles-wrapper table.waiat-table--simple td p+p,.editor-styles-wrapper table.waiat-compare th p+p,.editor-styles-wrapper table.waiat-compare td p+p,.article-preview table.waiat-table--simple th p+p,.article-preview table.waiat-table--simple td p+p,.article-preview table.waiat-compare th p+p,.article-preview table.waiat-compare td p+p{margin-top:.5em}
/* 箇条書きの項目の中の段落（<li><p>…</p></li>）に本文用の下余白 1.75em・行の高さ2 が効き、項目の間が空いていた（2026-09-24）。
   WAIATのビジュアルエディタで保存すると <li> の中身が <p> で包まれるため、編集した記事だけ見た目が変わっていた。
   どちらの書き方でも同じ見た目にする。段落が2つ以上ある項目だけ、段落の間を少し空ける */
.article-body li>p,.editor-styles-wrapper li>p,.article-preview li>p{margin:0;line-height:inherit}
.article-body li>p+p,.editor-styles-wrapper li>p+p,.article-preview li>p+p{margin-top:.5em}
/* STEP の本文は行間を詰める（2026-09-24 児島指定）。本文用の .article-body p（行の高さ2・下余白1.75em）に負けないよう強めている */
.article-body .waiat-stepbox__body>*,.editor-styles-wrapper .waiat-stepbox__body>*,.article-preview .waiat-stepbox__body>*{margin:0 0 .75em;line-height:1.75}
.article-body .waiat-stepbox__body>:last-child,.editor-styles-wrapper .waiat-stepbox__body>:last-child,.article-preview .waiat-stepbox__body>:last-child{margin-bottom:0}
/* 3列以上の比較表・シンプルな表は、1列目（タイトル列）を30%にし、2列目以降を均等にする（2026-09-24 児島指定）。
   table-layout:fixed で、幅を指定しない列に残りが均等に割り振られる。2列以下の表と素の表は中身に合わせたまま */
.article-body table.waiat-compare:has(tr>:nth-child(3)),.article-body table.waiat-table--simple:has(tr>:nth-child(3)),.editor-styles-wrapper table.waiat-compare:has(tr>:nth-child(3)),.editor-styles-wrapper table.waiat-table--simple:has(tr>:nth-child(3)),.article-preview table.waiat-compare:has(tr>:nth-child(3)),.article-preview table.waiat-table--simple:has(tr>:nth-child(3)){table-layout:fixed}
.article-body table.waiat-compare:has(tr>:nth-child(3)) tr>:first-child,.article-body table.waiat-table--simple:has(tr>:nth-child(3)) tr>:first-child,.editor-styles-wrapper table.waiat-compare:has(tr>:nth-child(3)) tr>:first-child,.editor-styles-wrapper table.waiat-table--simple:has(tr>:nth-child(3)) tr>:first-child,.article-preview table.waiat-compare:has(tr>:nth-child(3)) tr>:first-child,.article-preview table.waiat-table--simple:has(tr>:nth-child(3)) tr>:first-child{width:30%}
.article-body .waiat-box ul,.editor-styles-wrapper .waiat-box ul,.article-preview .waiat-box ul,.article-body .waiat-box ol,.editor-styles-wrapper .waiat-box ol,.article-preview .waiat-box ol{margin:0;padding-left:1.4em}
.article-body .waiat-box ul>li,.editor-styles-wrapper .waiat-box ul>li,.article-preview .waiat-box ul>li,.article-body .waiat-box ol>li,.editor-styles-wrapper .waiat-box ol>li,.article-preview .waiat-box ol>li{margin:.25em 0;padding-left:0}
.article-body .waiat-box ul>li:first-child,.editor-styles-wrapper .waiat-box ul>li:first-child,.article-preview .waiat-box ul>li:first-child,.article-body .waiat-box ol>li:first-child,.editor-styles-wrapper .waiat-box ol>li:first-child,.article-preview .waiat-box ol>li:first-child{margin-top:0}
.article-body .waiat-box ul>li:last-child,.editor-styles-wrapper .waiat-box ul>li:last-child,.article-preview .waiat-box ul>li:last-child,.article-body .waiat-box ol>li:last-child,.editor-styles-wrapper .waiat-box ol>li:last-child,.article-preview .waiat-box ol>li:last-child{margin-bottom:0}
.article-body .waiat-toc ol,.editor-styles-wrapper .waiat-toc ol,.article-preview .waiat-toc ol{margin:0;padding:0}
.article-body .waiat-toc>ol,.editor-styles-wrapper .waiat-toc>ol,.article-preview .waiat-toc>ol{margin:0}
.article-body .waiat-toc>ol>li,.editor-styles-wrapper .waiat-toc>ol>li,.article-preview .waiat-toc>ol>li{margin:0 0 .875em;padding:0}
.article-body .waiat-toc>ol>li:last-child,.editor-styles-wrapper .waiat-toc>ol>li:last-child,.article-preview .waiat-toc>ol>li:last-child{margin-bottom:0}
.article-body .waiat-toc__title,.editor-styles-wrapper .waiat-toc__title,.article-preview .waiat-toc__title{margin:0 0 1.75em;line-height:1}
.article-body .waiat-toc .waiat-toc__sub,.editor-styles-wrapper .waiat-toc .waiat-toc__sub,.article-preview .waiat-toc .waiat-toc__sub{margin:.375em 0 0 2.25em;padding:0}
@media (max-width: 769px){.article-body .waiat-toc .waiat-toc__sub,.editor-styles-wrapper .waiat-toc .waiat-toc__sub,.article-preview .waiat-toc .waiat-toc__sub{margin-left:1em}}
.article-body .waiat-toc__sub>li,.editor-styles-wrapper .waiat-toc__sub>li,.article-preview .waiat-toc__sub>li{margin:.25em 0 0;padding:0}
.article-body table:not(.waiat-compare):not(.waiat-table--simple),.editor-styles-wrapper table:not(.waiat-compare):not(.waiat-table--simple),.article-preview table:not(.waiat-compare):not(.waiat-table--simple){width:100%;border-collapse:collapse;margin:1.75em 0;font-size:.875em;line-height:1.7;border:.0625em solid #A8ADB9}
.article-body table:not(.waiat-compare):not(.waiat-table--simple) th,.editor-styles-wrapper table:not(.waiat-compare):not(.waiat-table--simple) th,.article-preview table:not(.waiat-compare):not(.waiat-table--simple) th,.article-body table:not(.waiat-compare):not(.waiat-table--simple) td,.editor-styles-wrapper table:not(.waiat-compare):not(.waiat-table--simple) td,.article-preview table:not(.waiat-compare):not(.waiat-table--simple) td{padding:.625em;border:.0625em solid #A8ADB9;text-align:left;vertical-align:top}
.article-body table:not(.waiat-compare):not(.waiat-table--simple) thead th,.editor-styles-wrapper table:not(.waiat-compare):not(.waiat-table--simple) thead th,.article-preview table:not(.waiat-compare):not(.waiat-table--simple) thead th,.article-body table:not(.waiat-compare):not(.waiat-table--simple) tbody tr:first-child th,.editor-styles-wrapper table:not(.waiat-compare):not(.waiat-table--simple) tbody tr:first-child th,.article-preview table:not(.waiat-compare):not(.waiat-table--simple) tbody tr:first-child th{background:var(--waiat-main-strong,var(--waiat-main,#334171));color:var(--waiat-main-on,#fff);font-weight:700}
.article-body table:not(.waiat-compare):not(.waiat-table--simple) th>p,.editor-styles-wrapper table:not(.waiat-compare):not(.waiat-table--simple) th>p,.article-preview table:not(.waiat-compare):not(.waiat-table--simple) th>p,.article-body table:not(.waiat-compare):not(.waiat-table--simple) td>p,.editor-styles-wrapper table:not(.waiat-compare):not(.waiat-table--simple) td>p,.article-preview table:not(.waiat-compare):not(.waiat-table--simple) td>p{margin:0;line-height:1.7}
.article-body table:not(.waiat-compare):not(.waiat-table--simple) th>p+p,.editor-styles-wrapper table:not(.waiat-compare):not(.waiat-table--simple) th>p+p,.article-preview table:not(.waiat-compare):not(.waiat-table--simple) th>p+p,.article-body table:not(.waiat-compare):not(.waiat-table--simple) td>p+p,.editor-styles-wrapper table:not(.waiat-compare):not(.waiat-table--simple) td>p+p,.article-preview table:not(.waiat-compare):not(.waiat-table--simple) td>p+p{margin-top:.5em}
/* メリット／デメリットの横並び（2026-09-28 児島指定）。
   本文で「メリット」「デメリット」のボックス、または○リストと×リストが続けて置かれていると、
   サイト側（PairedBlocks）が .waiat-pair で包む。PCは2列・高さ揃え、スマホは縦積み。 */
.waiat-pair{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin:2em 0;align-items:stretch}
.waiat-pair>*{margin:0;min-width:0}
/* ⚠️ 本文側の .article-body ul.waiat-good{padding-left:0} のほうが詳細度が高く、左右の余白だけ0に
   上書きされていた（2026-09-28 児島指摘）。同じスコープを付けて上回る */
.waiat-pair>ul.waiat-good,.waiat-pair>ul.waiat-bad,.article-body .waiat-pair>ul.waiat-good,.article-body .waiat-pair>ul.waiat-bad,.editor-styles-wrapper .waiat-pair>ul.waiat-good,.editor-styles-wrapper .waiat-pair>ul.waiat-bad,.article-preview .waiat-pair>ul.waiat-good,.article-preview .waiat-pair>ul.waiat-bad{padding:1.25em 1.5em;border-radius:.75em;background:#F7F8F9}
.waiat-pair>.waiat-good li:first-child,.waiat-pair>.waiat-bad li:first-child{margin-top:0}
.waiat-pair>.waiat-good li:last-child,.waiat-pair>.waiat-bad li:last-child{margin-bottom:0}
@media (max-width: 769px){.waiat-pair{display:block}.waiat-pair>*+*{margin-top:1em}}
/* ボタン（編集画面の「ボタン」パーツ・2026-09-29）。色はパーツで選んだもの、無ければ配色のメイン色。
   ⚠️ 本文のリンク色（.article-body a）に負けないよう、本文と同じスコープを付けて上回る */
.waiat-button{margin:2em 0;text-align:center}
.waiat-button--left{text-align:left}
.waiat-button--right{text-align:right}
.waiat-button__link,.article-body .waiat-button__link,.editor-styles-wrapper .waiat-button__link,.article-preview .waiat-button__link{display:inline-block;min-width:16em;max-width:100%;padding:1em 2.25em;border-radius:62.4375em;background:var(--waiat-btn-bg,var(--waiat-main,#1A1A1A));color:var(--waiat-btn-fg,var(--waiat-main-on,#fff));font-weight:700;line-height:1.5;text-align:center;text-decoration:none;box-shadow:0 .1875em 0 rgba(0,0,0,.12);transition:opacity .2s}
.waiat-button__link:hover,.waiat-button__link:focus-visible{opacity:.85}
@media (max-width: 769px){.waiat-button__link,.article-body .waiat-button__link{display:block;min-width:0}}
/* YouTube（編集画面の「YouTube」パーツ）。埋め込みは幅640px固定で出るので、横幅いっぱい・16:9にする（2026-09-29） */
[data-youtube-video]{margin:2em 0}
[data-youtube-video] iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0}

/*-----
記事ページ・記事一覧の共通レイアウト（wa-）
-----*/
.wa-article,.wa-list,.wa-related,.wa-cards{
  --_m:var(--wa-main,var(--waiat-main,#1a1a1a));
  --_on:var(--wa-main-on,var(--waiat-main-on,#fff));
  --_t:var(--wa-tint,var(--waiat-tint,#f5f5f5));
  --_a:var(--wa-accent,var(--_m));
  --_mu:#717171;
  --_l:#e8e8e8;
}
.wa-article,.wa-list{margin:0 auto;padding:var(--wa-top,2em) 0 var(--wa-bottom,3em);width:min(92%,71.25em)}

/* パンくず */
.wa-crumbs{margin:0 0 1em;font-size:.75em;line-height:1.6;color:var(--_mu)}
.wa-crumbs a,.wa-crumbs span{text-decoration:none;color:inherit}
.wa-crumbs a:hover{color:var(--_a)}
.wa-crumbs > * + *::before{content:"›";margin:0 .5em;opacity:.5}

/* 記事：本文65%＋目次サイドの2カラム */
.wa-grid{display:flex;gap:3%;align-items:flex-start}
.wa-main{width:65%;min-width:0}
.wa-side{position:sticky;top:calc(var(--wa-top,2em) - 1em);width:32%}

.wa-head{margin:0 0 1.5em}
.wa-head h1{margin:.25em 0 .5em;padding:0;font-size:1.75em;font-weight:700;line-height:1.45;color:inherit;background:none;border:0}
.wa-head h1::before,.wa-head h1::after{content:none}
.wa-cat{display:inline-block;padding:.2em .75em;font-size:.75em;text-decoration:none;color:var(--_m);background:var(--_t);border-radius:1em}
.wa-cat:hover{color:var(--_on);background:var(--_m)}
.wa-meta{display:flex;flex-wrap:wrap;gap:1em;margin:0 0 1.5em;font-size:.75em;color:var(--_mu)}
.wa-thumb{margin:0 0 2em;border-radius:.5em;overflow:hidden}
/* ⚠️ 画像はブロックにする。インラインのままだと下に行の余白ができ、下の角丸が画像に掛からない */
.wa-thumb img{display:block;width:100%;height:auto;margin:0;border-radius:0}

/* サイドの目次（本文の目次 .waiat-toc と同じ見た目） */
.wa-toc{padding:2em 1.75em;background:#f7f7f7;max-height:calc(100vh - 7em);overflow-y:auto}
.wa-toc h4{display:flex;align-items:baseline;gap:.6em;margin:0 0 1.25em;padding:0;font-size:.9375em;font-weight:700;line-height:1;color:#6b7280;background:none;border:0}
.wa-toc h4::before{content:"INDEX";font-size:1.6em;font-weight:800;letter-spacing:-.01em;line-height:1;color:#1a1a1a}
.wa-toc ul{margin:0;padding:0;list-style:none}
.wa-toc li{margin:.75em 0 0;padding:0;font-size:.8125em;font-weight:700;line-height:1.5}
.wa-toc li::before{content:none}
.wa-toc li:first-child{margin-top:0}
.wa-toc li.sub{margin:.25em 0 0;padding-left:1.5em;font-size:.75em;line-height:1.6}
.wa-toc a{text-decoration:none;color:#1a1a1a}
.wa-toc li.sub a{color:#6b7280}
.wa-toc a:hover{color:var(--_a);text-decoration:underline}

/* 記事末の案内（CTA） */
.wa-cta{margin:3em 0 0;padding:2em 1.5em;text-align:center;background:var(--_t);border-radius:.5em}
.wa-cta__title{margin:0 0 .5em;font-size:1.125em;font-weight:700}
.wa-cta__note{margin:0 0 1.25em;font-size:.8125em;color:var(--_mu)}
.wa-btn{display:inline-block;padding:.75em 2em;font-size:.875em;font-weight:700;text-decoration:none;color:var(--_on);background:var(--_m);border-radius:2em;transition:.2s}
.wa-btn:hover{opacity:.8;color:var(--_on)}

/* あわせて読みたい */
/* ⚠️ 幅は記事の列と同じにする（広げると左端が揃わない） */
.wa-related{margin:1em auto 0;padding:0 0 var(--wa-bottom,3em);width:min(92%,71.25em)}
.wa-sec{margin:0 0 1em}
.wa-sec h2{display:inline-block;margin:0;padding:0;font-size:1.25em;font-weight:700;background:none;border:0}
.wa-sec h2::before,.wa-sec h2::after{content:none}
.wa-en{display:inline-block;margin:0 0 0 1em;font-size:.75em;letter-spacing:.05em;color:var(--_mu)}

/* 記事一覧の見出し */
.wa-pagehead{margin:0 0 2em}
.wa-pagehead .wa-en{display:block;margin:0 0 .5em}
.wa-pagehead h1{margin:0 0 .25em;padding:0;font-size:1.5em;font-weight:700;line-height:1.4;background:none;border:0}
.wa-pagehead h1::before,.wa-pagehead h1::after{content:none}
.wa-desc{margin:0;font-size:.875em;color:var(--_mu)}

/* カテゴリへの入口 */
.wa-cats{display:flex;flex-wrap:wrap;gap:.5em;margin:0 0 2em}
.wa-cats a{display:inline-block;padding:.4em 1em;font-size:.8125em;text-decoration:none;color:inherit;background:var(--_t);border-radius:2em;transition:.2s}
.wa-cats a:hover{color:var(--_on);background:var(--_m)}

/* 記事カード（一覧・あわせて読みたい共通）。16:9のサムネ＋2行までのタイトル＋日付 */
.wa-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75em .5em}
.wa-card{margin:0;padding:0}
.wa-card a{display:block;text-decoration:none;color:inherit}
.wa-card figure{position:relative;overflow:hidden;margin:0 0 .5em;aspect-ratio:16/9;border-radius:.5em;border:.125em solid #fff;background:var(--_t)}
.wa-card a:hover figure{border-color:var(--_a)}
.wa-card figure img{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:cover;border-radius:0;transition-duration:.5s}
.wa-card a:hover figure img{transform:scale(1.125)}
/* アイキャッチが無い記事は、写真の代わりにカテゴリ名を置く */
.wa-noimage{position:absolute;inset:0;display:grid;place-items:center;padding:0 .5em;font-size:.875em;text-align:center;color:var(--_m);opacity:.65}
.wa-card__title{overflow:hidden;margin:0;padding:0;max-height:2.8em;font-size:.875em;font-weight:700;line-height:1.4;background:none;border:0}
.wa-card__title::before,.wa-card__title::after{content:none}
.wa-card a:hover .wa-card__title{color:var(--_a)}
.wa-card__meta{margin:.125em 0 0;font-size:.6875em;color:var(--_mu)}
.wa-empty{margin:2em 0;padding:2.5em 1em;border:.0625em dashed var(--_l);border-radius:.5em;font-size:.875em;text-align:center;color:var(--_mu)}

/* ページ送り（Laravel の paginator を wa-pager の部分テンプレートで出す） */
.wa-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:.375em;margin:2.5em 0 0;padding:0;list-style:none;font-size:.875em}
.wa-pager li{margin:0;padding:0}
.wa-pager li::before{content:none}
.wa-pager a,.wa-pager span{display:grid;place-items:center;min-width:2.25em;height:2.25em;padding:0 .6em;text-decoration:none;color:inherit;border:.0625em solid var(--_l);border-radius:.25em}
.wa-pager a:hover{border-color:var(--_a);color:var(--_a)}
.wa-pager .is-current span{color:var(--_on);background:var(--_m);border-color:var(--_m)}
.wa-pager .is-disabled span{opacity:.4}

@media (max-width:769px){
  .wa-article,.wa-list{padding-top:var(--wa-top-sp,var(--wa-top,1.5em))}
  .wa-grid{flex-direction:column}
  .wa-main{width:100%}
  /* サイドの目次は本文の後ろへ。本文に目次（.waiat-toc）がある記事では2つ並ぶので出さない */
  .wa-side{position:static;width:100%;margin:2em 0 0}
  .wa-grid:has(.waiat-toc) .wa-side{display:none}
  .wa-head h1{font-size:1.375em}
  .wa-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1em .5em}
  .wa-card__title{font-size:.75em}
}

/* 本文の写真をタップで拡大（2026-10-17）。開く処理は各サイトの waiat/article.blade.php */
.wa-article .article-body .waiat-image img,.wa-article .article-body .waiat-imgcell--filled img,.content.editor-styles-wrapper .waiat-image img,.content.editor-styles-wrapper .waiat-imgcell--filled img{cursor:zoom-in}
.wa-lb{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(0,0,0,.88);padding:3em 1em;-webkit-tap-highlight-color:transparent}
.wa-lb.is-open{display:flex}
.wa-lb__img{max-width:100%;max-height:calc(100% - 3em);object-fit:contain;border-radius:.25em;touch-action:pan-y}
.wa-lb__cap{margin:.75em 0 0;color:#eee;font-size:.875em;line-height:1.5;text-align:center;max-width:40em}
.wa-lb__count{position:absolute;top:1em;left:1.25em;color:#bbb;font-size:.8125em}
.wa-lb__btn{position:absolute;display:flex;align-items:center;justify-content:center;width:2.75em;height:2.75em;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.25em;line-height:1;cursor:pointer}
.wa-lb__btn:hover{background:rgba(255,255,255,.26)}
.wa-lb__close{top:.6em;right:.6em}
.wa-lb__prev{left:.6em;top:50%;transform:translateY(-50%)}
.wa-lb__next{right:.6em;top:50%;transform:translateY(-50%)}
.wa-lb[data-single] .wa-lb__prev,.wa-lb[data-single] .wa-lb__next,.wa-lb[data-single] .wa-lb__count{display:none}
html.wa-lb-lock{overflow:hidden}

/*-----
カテゴリページ（ハブ＝柱の記事）のLP型（wa-lp・2026-10-19 共通化）
2026-09-25 に写真メディアで作った型（デザイン https://claude.ai/artifact/CPEPyidsQAYi6ddmkgqcnc）を正本へ移した。
マークアップは docs/article-layout/pillar.blade.php、組み直しは docs/article-layout/PillarPage.php（各サイトに同じものを置く）。
⚠️ 色は共通レイアウトと同じ変数（--wa-main・--wa-main-on・--wa-tint・--wa-accent）。文字色は --wa-ink、上余白は --wa-lp-top、見出しの書体は --wa-lp-display
⚠️ 章の系統は最大3つ（wa-lp-g0＝基調色・g1＝強調色・g2＝文字色）
-----*/
.wa-lp{--_m:var(--wa-main,var(--waiat-main,#1a1a1a));--_on:var(--wa-main-on,var(--waiat-main-on,#fff));--_t:var(--wa-tint,var(--waiat-tint,#f5f5f5));--_a:var(--wa-accent,var(--_m));--_ink:var(--wa-ink,#333);--_mu:#717171;--_l:#e8e8e8}
.wa-lp{margin-top:var(--wa-lp-top,0);overflow-x:clip;background:#fff}
.wa-lp-maru{font-family:var(--wa-lp-display,inherit)}
.wa-lp-in{margin:0 auto;width:min(92%,80em)}
.wa-lp-in--narrow{width:min(92%,65em)}
.wa-lp-pill{display:inline-block;padding:.35em .9em;border-radius:62.5em;background:var(--_m);color:var(--_on);font-size:.8125em;font-weight:700}
.wa-lp-g0{--g:var(--_m)}
.wa-lp-g1{--g:var(--wa-accent,var(--_m))}
.wa-lp-g2{--g:var(--_ink)}
.wa-lp-hero{padding:1.75em 0 5em;background:var(--_t)}
.wa-lp-hero .wa-crumbs{margin:0 0 2.25em}
.wa-lp-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 31.25em;gap:3.5em;align-items:center}
.wa-lp-hero__grid:not(:has(.wa-lp-hero__visual)){grid-template-columns:minmax(0,1fr)}
.wa-lp-hero__tags{margin:0 0 1.375em}
.wa-lp-hero h1{margin:0 0 .6em;font-size:3.25em;font-weight:800;line-height:1.35;letter-spacing:.01em}
.wa-lp-hero__sub{display:block;margin-top:.4em;font-size:.5em;color:var(--wa-accent,var(--_m))}
.wa-lp-hero__lead p{margin:0 0 1em;font-size:1.0625em;line-height:2.05}
.wa-lp-hero__lead p:first-child{font-weight:700}
.wa-lp-hero__meta{display:flex;flex-wrap:wrap;gap:1.25em;margin:1.5em 0 0;font-size:.8125em;color:var(--_mu)}
.wa-lp-hero__visual{position:relative;height:28.75em}
.wa-lp-hero__img{position:absolute;top:0;right:0;width:25em;height:25em;margin:0;overflow:hidden;border-radius:12.5em 12.5em 1.5em 1.5em;background:#fff}
.wa-lp-hero__img img{display:block;width:100%;height:100%;object-fit:cover}
.wa-lp-badge{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;width:12.5em;height:12.5em;border-radius:50%;background:var(--_m);color:var(--_on);text-align:center}
.wa-lp-badge__label{font-size:.8125em;font-weight:700;letter-spacing:.1em}
.wa-lp-badge__value{font-size:2.625em;font-weight:800;line-height:1.1}
.wa-lp-badge__note{padding:0 1.5em;font-size:.75em;line-height:1.5}
.wa-lp-conclusion{margin:3.5em 0 0;padding:2.5em 2.75em;border:.125em solid var(--_m);border-radius:1.75em;background:#fff}
.wa-lp-conclusion__head{display:flex;flex-wrap:wrap;align-items:center;gap:.875em;margin:0 0 1.375em}
.wa-lp-conclusion__head .wa-lp-pill{font-size:.9375em;font-weight:800}
.wa-lp-conclusion__head h2{margin:0;font-size:1.625em;font-weight:800;line-height:1.5}
.wa-lp-conclusion__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1em}
.wa-lp-conclusion__card{display:flex;flex-direction:column;gap:.625em;padding:1.5em 1.375em;border-radius:1.125em;background:var(--_t)}
.wa-lp-conclusion__card .q{font-size:.8125em;font-weight:700;color:var(--wa-accent,var(--_m))}
.wa-lp-conclusion__card .a{font-size:1.25em;font-weight:800;line-height:1.5}
.wa-lp-conclusion__card .note{font-size:.875em;line-height:1.7}
.wa-lp-learn{padding:5.5em 0 0}
.wa-lp-learn__box{display:flex;flex-direction:column;gap:1em;padding:2.25em 2.5em;border:.125em solid var(--_t);border-radius:1.5em}
.wa-lp-learn__ttl{margin:0;font-size:1.25em;font-weight:800;color:var(--wa-accent,var(--_m))}
.wa-lp-learn__box ul{display:flex;flex-direction:column;gap:.75em;margin:0;padding:0;list-style:none}
.wa-lp-learn__box li{display:flex;gap:.75em;font-size:1em;line-height:1.8}
.wa-lp-learn__box li svg{flex-shrink:0;width:1.375em;height:1.375em;margin-top:.25em;color:var(--_m)}
.wa-lp-index{padding:5.5em 0}
.wa-lp-index__ttl{display:flex;align-items:baseline;gap:1em;margin:0 0 2em}
.wa-lp-index__ttl .en{font-size:3em;font-weight:800;letter-spacing:.02em;line-height:1}
.wa-lp-index__ttl span:last-child{font-size:1.375em;font-weight:700}
.wa-lp-index__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75em 1.25em;margin:0;padding:0;list-style:none}
.wa-lp-index__list a{display:flex;align-items:center;gap:1.125em;height:100%;box-sizing:border-box;padding:1.125em 1.375em;border-radius:.875em;background:var(--_t);text-decoration:none;color:inherit;transition:.2s}
.wa-lp-index__list a:hover{box-shadow:0 .25em 1em rgb(0 0 0 / 8%)}
.wa-lp-index__list .num{flex-shrink:0;width:2em;font-size:1.375em;font-weight:800;color:var(--g,var(--_ink))}
.wa-lp-index__list .txt{display:flex;flex-direction:column;gap:.25em}
.wa-lp-index__list .tag{font-size:.75em;font-weight:700;color:var(--g,var(--_ink))}
.wa-lp-index__list .t{font-size:1em;font-weight:700;line-height:1.5}
.wa-lp-sec{padding:6.5em 0;scroll-margin-top:3.75em}
.wa-lp-sec--alt{background:var(--_t)}
.wa-lp-sec__head{display:flex;flex-direction:column;align-items:flex-start;gap:.5em;margin:0 0 2.25em}
.wa-lp-sec__num{font-size:6em;font-weight:800;line-height:1;color:var(--g,var(--_m))}
.wa-lp-sec__tag{padding:.3em .9em;border-radius:62.5em;border:.0625em solid var(--g);color:var(--g);font-size:.8125em;font-weight:700}
.wa-lp-sec__head h2{margin:0;padding:0;border:0;background:none;font-size:2.5em;font-weight:800;line-height:1.45;color:var(--_ink)}
.wa-lp-sec__head h2::before,.wa-lp-sec__head h2::after{content:none}
.wa-lp-sec__sub{display:block;margin-top:.3em;font-size:.65em;font-weight:700;color:var(--_mu)}
.wa-lp-sec__summary{margin:0 0 2.25em;padding:1.5em 1.75em;border-radius:1em;background:var(--_t);font-size:1.125em;font-weight:700;line-height:1.9}
.wa-lp-sec--alt .wa-lp-sec__summary{background:#fff}
.wa-lp-point{display:flex;flex-direction:column;gap:.625em;margin:2.5em 0 0;padding:2em 2.5em;border-radius:1.25em;background:var(--_m);color:var(--_on)}
.wa-lp-point__label{font-size:.8125em;font-weight:700;letter-spacing:.14em}
.wa-lp-point__text{font-size:1.625em;font-weight:800;line-height:1.6}
.wa-lp-more{margin:2.5em 0 0}
.wa-lp-more__label{margin:0 0 1em;font-size:.9375em;font-weight:700}
.wa-lp-more__label::before{content:"→";margin-right:.5em;color:var(--wa-accent,var(--_m))}
.wa-lp-more__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75em}
.wa-lp-more__card{display:block;overflow:hidden;border:.0625em solid var(--_l);border-radius:.75em;background:#fff;text-decoration:none;color:inherit;transition:.2s}
.wa-lp-more__card:hover{box-shadow:0 .25em 1em rgb(0 0 0 / 10%)}
.wa-lp-more__card figure{margin:0;aspect-ratio:16/9;background:var(--_l)}
.wa-lp-more__card figure img{display:block;width:100%;height:100%;object-fit:cover}
.wa-lp-more__card .title{display:-webkit-box;margin:.75em .9em .9em;font-size:.8125em;font-weight:700;line-height:1.6;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wa-lp-all{margin-top:5em}
.wa-lp-others{padding:5em 0;background:var(--_t)}
.wa-lp-others__ttl{display:flex;align-items:baseline;gap:1em;margin:0 0 1.75em}
.wa-lp-others__ttl .en{font-size:2em;font-weight:800}
.wa-lp-others__ttl span:last-child{font-size:1.125em;font-weight:700}
.wa-lp-others__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75em}
.wa-lp-others__list a{display:block;overflow:hidden;border-radius:.75em;background:#fff;text-decoration:none;color:inherit;transition:.2s}
.wa-lp-others__list a:hover{box-shadow:0 .25em 1em rgb(0 0 0 / 10%)}
.wa-lp-others__list figure{margin:0;aspect-ratio:16/9;background:var(--_l)}
.wa-lp-others__list figure img{display:block;width:100%;height:100%;object-fit:cover}
.wa-lp-others__list span{display:block;padding:.75em .9em;font-size:.8125em;font-weight:700}
.wa-lp-hero__grid>*,.wa-lp-sec .article-body{min-width:0}
.wa-lp-sec .article-body{overflow-wrap:anywhere}
@media (max-width:769px){
  .wa-lp-hero{padding:1.25em 0 3em}
  .wa-lp-hero .wa-crumbs{margin:0 0 1.25em}
  .wa-lp-hero__grid{grid-template-columns:minmax(0,1fr);gap:1.5em}
  .wa-lp-hero__visual{order:-1;height:20em}
  .wa-lp-hero__img{width:17.5em;height:17.5em}
  .wa-lp-badge{width:9.5em;height:9.5em}
  .wa-lp-badge__value{font-size:1.875em}
  .wa-lp-badge__note{padding:0 1em;font-size:.6875em}
  .wa-lp-hero h1{font-size:1.75em}
  .wa-lp-conclusion{margin:2.5em 0 0;padding:1.5em 1.25em;border-radius:1.25em}
  .wa-lp-conclusion__head h2{font-size:1.25em}
  .wa-lp-conclusion__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.625em}
  .wa-lp-conclusion__card{padding:1.125em 1em}
  .wa-lp-conclusion__card .a{font-size:1.0625em}
  .wa-lp-learn{padding:3.5em 0 0}
  .wa-lp-learn__box{padding:1.5em 1.25em}
  .wa-lp-index{padding:3.5em 0}
  .wa-lp-index__ttl .en{font-size:2.25em}
  .wa-lp-index__list{grid-template-columns:minmax(0,1fr)}
  .wa-lp-sec{padding:4em 0}
  .wa-lp-sec__num{font-size:4em}
  .wa-lp-sec__head h2{font-size:1.625em}
  .wa-lp-sec__summary{padding:1.25em;font-size:1em}
  .wa-lp-point{padding:1.5em 1.25em}
  .wa-lp-point__text{font-size:1.25em}
  .wa-lp-more__list{grid-template-columns:minmax(0,1fr)}
  .wa-lp-more__card{display:grid;grid-template-columns:7.5em minmax(0,1fr);align-items:center}
  .wa-lp-more__card .title{margin:.5em .9em}
  .wa-lp-others__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}