/* 読みもの系ページ(記事・一覧・紹介ページ)の共通の土台。Cocoonを参考にした文字・余白・テーマ画像。
   対象: /parents/ と /articles/ の下のHTML全部。build.mjs が自動で読み込ませる。
   記事ページだけの飾り(見出しの帯・目次・ボックスなど)は article.css。 */
:root{
  --a:var(--pop,var(--pink,var(--gold,var(--accent,#d92c66))));
  --a-deep:var(--pop-deep,var(--pink-deep,var(--gold,var(--accent,#a81f4c))));
  --a-ink:#fff;
  --a-text:var(--page-text,#333);
  --a-link:var(--page-link,#1a5fb4);
  --a-soft:color-mix(in srgb,var(--a) 11%,var(--paper,#fff));
  --a-line:color-mix(in srgb,var(--a) 35%,var(--paper,#fff));
  --a-mark:color-mix(in srgb,var(--a) 22%,transparent);
}
html{scroll-behavior:smooth}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif!important;font-weight:400!important;font-size:16px!important;line-height:1.8!important;color:var(--a-text)!important;word-break:normal!important;line-break:normal;overflow-wrap:break-word;letter-spacing:0;-webkit-font-smoothing:antialiased}
/* 行末に余白ができる折り返し(balance/pretty)は使わない */
h1,h2,h3,p,li,dd,dt{text-wrap:wrap!important;word-break:normal!important}
/* 見出し(Cocoonふう): h2は色つきの帯、h3は左の太線+下線。読みもの系ページのh2・h3は、どれもこの装飾になる(装飾漏れ防止) */
main h2{font-size:clamp(18px,4.8vw,21px)!important;line-height:1.5;font-weight:700!important;margin:2.8em 0 0!important;padding:.65em .85em!important;border:0!important;border-radius:3px!important;background:var(--a-deep)!important;color:var(--a-ink)!important}
main h2 a{color:inherit}
main h2 .eyebrow{display:block!important;margin:0 0 2px;color:inherit!important;opacity:.88;font-family:inherit!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.08em}
main h3{font-size:clamp(17px,4.4vw,18.5px)!important;line-height:1.55;font-weight:700!important;margin:2.2em 0 0!important;padding:.5em .75em!important;border:0!important;border-left:6px solid var(--a)!important;border-bottom:1px solid var(--line,#ddd)!important;border-radius:0!important;background:none!important;color:var(--a-text)!important}
main h3+p{margin-top:1em}
section>h2,.cta h2,.more h2{margin-top:0!important}
/* 左右の余白を狭めて、文字の横幅を広く取る(スマホ) */
@media(max-width:600px){
  body{padding-inline:6px!important}
  main>article{padding:18px 13px 22px;border-radius:10px}
  .pr,.crumb,footer{padding-inline:6px}
  .more,.cta{margin-inline:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* h1の直後の、横長のテーマ画像(HTMLで作った飾り。絵文字と見出しタグ。build.mjs が data/article-heroes.json から入れる) */
.theme-hero{position:relative;margin:16px 0 0;aspect-ratio:2/1;border-radius:12px;overflow:hidden;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--a-deep),var(--a))}
.theme-hero::before,.theme-hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.16)}
.theme-hero::before{width:62%;aspect-ratio:1;left:-14%;top:-48%}
.theme-hero::after{width:48%;aspect-ratio:1;right:-10%;bottom:-52%}
.hero-emoji{position:relative;z-index:1;display:flex;gap:.18em;align-items:center;justify-content:center;font-size:clamp(46px,16vw,88px);line-height:1;filter:drop-shadow(0 4px 0 rgba(0,0,0,.16))}
.hero-emoji i{font-style:normal;font-weight:800;color:#fff}
.hero-emoji i:nth-child(2){font-size:1.18em;transform:translateY(-.04em)}
.hero-label{position:absolute;z-index:1;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:#222;font-size:12.5px;font-weight:700;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
article>h1+.theme-hero{margin-top:14px}
article>.theme-hero+.meta{margin-top:14px}
.table-wrap th{white-space:nowrap}