/* =========================================================
   やさしい終活ノート — 共通スタイル
   スマホ優先。ビルドツール不要の素のCSSです。
   ========================================================= */
:root{
  --sage:#7A9A82; --sage-d:#4B6B55; --sage-l:#E7EFE8;
  --fuji:#9A88C2; --fuji-d:#6B5A96; --fuji-l:#F0ECF7;
  --navy:#22385A; --navy-l:#E5EAF2;
  --beige:#F6EFE3; --beige-d:#E8DCC7; --cream:#FCFAF5;
  --text:#2A2F36; --muted:#5B6168; --line:#DDD3C2;
  --pr:#B4553E; --warn:#C08A2E;
  --radius:14px; --shadow:0 2px 10px rgba(34,56,90,.08);
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Noto Sans CJK JP","BIZ UDPGothic","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:112.5%;-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* 18px */
@media (min-width:768px){html{font-size:118.75%}} /* 19px */
body{margin:0;font-family:var(--font);color:var(--text);background:var(--cream);line-height:1.9;letter-spacing:.02em;overflow-wrap:anywhere}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px}
a:hover{color:var(--fuji-d)}
a:focus-visible,button:focus-visible{outline:3px solid var(--fuji);outline-offset:2px}
.container{width:100%;max-width:760px;margin:0 auto;padding:0 18px}
.container--wide{max-width:1080px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:10}

/* ---------- ヘッダー / PRバー ---------- */
.site-header{background:#fff;border-bottom:4px solid var(--sage)}
.site-header__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:10px 18px;max-width:1080px;margin:0 auto}
.site-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font-weight:700;font-size:1.05rem;line-height:1.4}
.site-logo img{width:44px;height:44px;border-radius:50%;background:var(--beige)}
.site-logo small{display:block;font-size:.72rem;font-weight:400;color:var(--muted)}
.site-nav{width:100%}@media (min-width:768px){.site-nav{width:auto}}
.site-nav ul{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:2px 4px;list-style:none;margin:0;padding:0;-webkit-overflow-scrolling:touch}
.site-nav li{flex:0 0 auto}
.site-nav a{display:block;padding:4px 10px;border-radius:8px;text-decoration:none;font-size:.82rem;color:var(--navy);white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current="page"]{background:var(--sage-l)}
.pr-bar{background:var(--beige);border-bottom:1px solid var(--beige-d);font-size:.85rem;color:var(--text)}
.pr-bar p{margin:0;padding:6px 18px;max-width:1080px;margin:0 auto}
.pr-bar a{color:var(--navy)}

/* ---------- パンくず ---------- */
.breadcrumb{font-size:.8rem;color:var(--muted);margin:14px 0 4px}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px}
.breadcrumb li+li::before{content:"›";margin:0 6px 0 2px;color:var(--sage)}

/* ---------- PRラベル ---------- */
.pr-label{display:inline-block;background:var(--pr);color:#fff;font-weight:700;font-size:.75rem;line-height:1;padding:5px 8px;border-radius:4px;letter-spacing:.08em;vertical-align:middle}

/* ---------- 記事 ---------- */
.article-header{padding:6px 0 4px}
.article-header h1{font-size:1.5rem;line-height:1.5;color:var(--navy);margin:8px 0 12px}
@media (min-width:768px){.article-header h1{font-size:1.8rem}}
.pr-notice{border:2px solid var(--pr);background:#FFF7F3;border-radius:10px;padding:10px 14px;margin:0 0 12px;font-size:.88rem;line-height:1.7}
.pr-notice strong{color:var(--pr);font-size:1rem}
.pr-notice p{margin:4px 0 0}
.article-meta{font-size:.82rem;color:var(--muted);margin:0 0 16px}
.article-body h2{font-size:1.32rem;line-height:1.5;color:#fff;background:var(--sage-d);padding:12px 16px;border-radius:10px;margin:2.6em 0 1em}
.article-body h3{font-size:1.15rem;line-height:1.5;color:var(--navy);border-left:7px solid var(--fuji);padding:4px 0 4px 12px;margin:2.2em 0 .8em;background:linear-gradient(90deg,var(--fuji-l),transparent)}
.article-body h4{font-size:1.05rem;color:var(--sage-d);margin:1.8em 0 .6em;padding-bottom:4px;border-bottom:2px dotted var(--sage)}
.article-body p{margin:0 0 1.2em}
.article-body ul,.article-body ol{padding-left:1.4em;margin:0 0 1.3em}
.article-body li{margin:.35em 0}
.article-body strong{background:linear-gradient(transparent 62%,#F3E3B5 62%);font-weight:700}
.article-body hr{border:0;height:0;margin:2.4em 0;border-top:2px dashed var(--line)}
.ext::after{content:"↗";font-size:.8em;margin-left:2px}
.summary-box{background:#fff;border:2px solid var(--sage);border-radius:var(--radius);padding:14px 18px 6px;margin:1.4em 0}
.summary-box__title{font-weight:700;color:var(--sage-d);margin:0 0 .4em}
.fiction-note{font-size:.82rem;color:var(--muted);text-align:center;margin:.3em 0 1.6em}

/* 目次 */
.toc{background:var(--beige);border-radius:var(--radius);padding:14px 18px;margin:1.6em 0}
.toc__title{font-weight:700;color:var(--navy);margin:0 0 .4em}
.toc ol{margin:0;padding-left:1.4em;font-size:.92rem}
.toc a{text-decoration:none}.toc a:hover{text-decoration:underline}

/* 注意・メモ */
.note{background:#FFF9EC;border-left:6px solid var(--warn);border-radius:8px;padding:12px 16px;margin:1.4em 0;font-size:.95rem}
.note p:last-child{margin-bottom:0}
.info{background:var(--navy-l);border-left:6px solid var(--navy);border-radius:8px;padding:12px 16px;margin:1.4em 0;font-size:.95rem}
.info p:last-child{margin-bottom:0}

/* ---------- 表 ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2em 0 1.6em;border-radius:10px;border:1px solid var(--line);background:#fff}
.table-wrap table{border-collapse:collapse;width:100%;min-width:560px;font-size:.9rem;line-height:1.7}
.table-wrap th,.table-wrap td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.table-wrap thead th{background:var(--sage-l);color:var(--sage-d);white-space:nowrap}
.table-wrap tbody tr:nth-child(even){background:#FBF8F2}
.table-wrap tbody td:first-child{font-weight:700;color:var(--navy)}
.table-hint{font-size:.75rem;color:var(--muted);margin:-1.2em 0 1.4em}
@media (min-width:768px){.table-hint{display:none}}

/* ---------- 漫画 ---------- */
.manga{margin:1.8em 0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.manga__head{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:700;color:var(--navy)}
.manga__badge{flex:0 0 auto;white-space:nowrap;background:var(--fuji);color:#fff;font-size:.75rem;padding:3px 10px;border-radius:99px}
.manga img{margin:0 auto;border-radius:6px;width:100%;max-width:560px}
.manga figcaption{font-size:.8rem;color:var(--muted);text-align:center;margin-top:8px}
.manga details{margin-top:10px;font-size:.9rem;background:var(--fuji-l);border-radius:8px;padding:8px 12px}
.manga summary{cursor:pointer;font-weight:700;color:var(--fuji-d)}
.manga details ol{margin:.4em 0 .2em;padding-left:1.4em}

/* ---------- 準備中の漫画・図解 ---------- */
.ph{margin:1.4em 0;border:1px dashed var(--line);border-radius:var(--radius);background:#FAF8F4;padding:12px 14px}
.ph__title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:700;color:var(--navy);font-size:.95rem;line-height:1.6;margin:0}
.ph__type{white-space:nowrap;background:var(--fuji-d);color:#fff;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:99px}
.ph--zukai .ph__type{background:var(--sage-d)}
.ph__status{font-size:.78rem;color:var(--muted);margin:4px 0 0}

/* ---------- 吹き出し（ぽん助のひと言） ---------- */
.bubble{display:flex;gap:12px;align-items:flex-start;margin:1.6em 0}
.bubble__avatar{flex:0 0 64px;text-align:center;font-size:.72rem;color:var(--muted);line-height:1.3}
.bubble__avatar img{width:64px;height:64px;border-radius:50%;border:3px solid var(--sage);background:var(--beige);margin-bottom:4px}
.bubble__text{position:relative;flex:1;background:#fff;border:2px solid var(--sage);border-radius:16px;padding:12px 16px;font-size:.95rem}
.bubble__text::before{content:"";position:absolute;left:-12px;top:20px;border:10px solid transparent;border-right-color:var(--sage);border-left:0}
.bubble__text::after{content:"";position:absolute;left:-8px;top:22px;border:8px solid transparent;border-right-color:#fff;border-left:0}
.bubble__text p{margin:0}

/* ---------- 広告枠（未提携：リンクなし） ---------- */
.ad-box{margin:1.8em 0;border:2px solid var(--beige-d);background:#fff;border-radius:var(--radius);padding:14px 16px 12px;position:relative}
.ad-box__title{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);margin:0 0 10px;line-height:1.5}
.ad-list,.article-body .ad-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ad-item{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--cream)}
.ad-item__name{font-weight:700;color:var(--navy)}
.ad-item__desc{font-size:.88rem;margin:2px 0 8px;line-height:1.7}
.ad-btn{display:block;text-align:center;font-weight:700;border-radius:99px;padding:10px 14px;font-size:.92rem;text-decoration:none;background:var(--sage-d);color:#fff}
a.ad-btn:hover{background:var(--navy);color:#fff}
.ad-btn.is-pending{background:#E9E5DD;color:#6F6A61;border:1px dashed #B8AF9F;cursor:default}
.ad-box__note{font-size:.78rem;color:var(--muted);margin:10px 0 0;line-height:1.7}
.ad-inline{display:block;margin:1.2em 0;font-size:.9rem;line-height:1.8;background:var(--beige);border-radius:8px;padding:8px 12px}
.ad-inline .pr-label{margin-right:6px}
.ad-inline__item{font-weight:700;color:var(--navy);border-bottom:1px dashed var(--navy)}
.ad-inline__item.is-pending{color:var(--muted);border-bottom-color:var(--muted)}

/* ---------- ダウンロード ---------- */
.download{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;background:var(--sage-l);border:2px solid var(--sage);border-radius:var(--radius);padding:18px;margin:1.6em 0}
.download__icon{font-size:2rem;line-height:1}
.download__title{font-weight:700;color:var(--navy);margin:0}
.download__meta{font-size:.8rem;color:var(--muted);margin:0}
.btn{display:inline-block;background:var(--navy);color:#fff;font-weight:700;text-decoration:none;border-radius:99px;padding:12px 26px;font-size:1rem}
.btn:hover{background:var(--sage-d);color:#fff}
.btn--ghost{background:#fff;color:var(--navy);border:2px solid var(--navy)}

/* ---------- チェックリスト ---------- */
.checklist{list-style:none;padding:0!important;margin:.4em 0 1.4em!important}
.checklist li{position:relative;padding:8px 10px 8px 42px;margin:6px 0;background:#fff;border:1px solid var(--line);border-radius:8px;line-height:1.6}
.checklist li::before{content:"";position:absolute;left:12px;top:11px;width:20px;height:20px;border:2px solid var(--sage-d);border-radius:4px;background:#fff}
.checklist-group{font-weight:700;color:var(--sage-d);margin:1.4em 0 .3em!important}

/* ---------- FAQ ---------- */
.faq-q{position:relative;padding-left:2.2em!important}
.faq-q::before{content:"Q";position:absolute;left:12px;color:var(--fuji-d);font-weight:800}

/* ---------- 運営者ボックス ---------- */
.author-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:1.4em 0}

/* ---------- トップページ ---------- */
.hero{background:linear-gradient(180deg,var(--beige),var(--cream));padding:28px 0 18px;text-align:center}
.hero__eyebrow{display:inline-block;background:var(--sage-d);color:#fff;font-size:.8rem;border-radius:99px;padding:3px 14px;margin:0 0 10px}
.hero h1{font-size:clamp(1.3rem,6.2vw,2.2rem);line-height:1.45;color:var(--navy);margin:0 0 10px;word-break:keep-all}
@media (min-width:768px){.hero h1{font-size:2.2rem}}
.hero__lead{max-width:640px;margin:0 auto 18px;font-size:1rem;text-align:left}
.hero__img{width:100%;max-width:880px;margin:0 auto;border-radius:var(--radius)}
.section{padding:30px 0}
.section--beige{background:var(--beige)}
.section__title{font-size:1.35rem;color:var(--navy);text-align:center;margin:0 0 18px;line-height:1.5}
.section__title::after{content:"";display:block;width:56px;height:4px;background:var(--fuji);border-radius:4px;margin:8px auto 0}
.char-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:600px){.char-grid{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.char-grid{grid-template-columns:repeat(4,1fr)}}
.char-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.char-card__img{background:#FBF6EC;display:flex;justify-content:center;padding:10px 0 0}
.char-card__img img{height:220px;width:auto}
.char-card__body{padding:12px 16px 16px;font-size:.9rem;line-height:1.75}
.char-card__name{font-size:1.1rem;font-weight:700;color:var(--navy);margin:0}
.char-card__role{display:inline-block;font-size:.75rem;padding:1px 10px;border-radius:99px;color:#fff;margin:2px 0 6px}
.role-satomi{background:var(--sage-d)}.role-fumi{background:var(--fuji-d)}.role-takuya{background:var(--navy)}.role-ponsuke{background:#8A6440}
.char-card__quote{background:var(--beige);border-radius:8px;padding:6px 10px;margin:8px 0 0;font-weight:700;color:var(--navy)}
.post-list{display:grid;gap:14px}
.post-card{display:grid;grid-template-columns:1fr;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;color:inherit}
@media (min-width:600px){.post-card{grid-template-columns:240px 1fr}}
.post-card img{width:100%;height:200px;object-fit:cover;object-position:top}
@media (min-width:600px){.post-card img{height:100%}}
.post-card__body{padding:14px 16px}
.post-card__title{font-weight:700;color:var(--navy);line-height:1.6;margin:0 0 6px;font-size:1.05rem}
.post-card__desc{font-size:.88rem;color:var(--muted);margin:0;line-height:1.7}
a.post-card:hover .post-card__title{text-decoration:underline}
.soon-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
@media (min-width:768px){.soon-list{grid-template-columns:1fr 1fr}}
.soon-list li{background:#fff;border:1px dashed var(--line);border-radius:10px;padding:10px 14px;font-size:.9rem;line-height:1.6}
.soon-list .tag{display:inline-block;font-size:.7rem;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:0 8px;margin-right:6px;vertical-align:1px}

/* ---------- 固定ページ ---------- */
.page{padding-bottom:24px}
.page h1{font-size:1.5rem;color:var(--navy);margin:10px 0 18px;line-height:1.5}
.page h2{font-size:1.15rem;color:var(--navy);border-bottom:3px solid var(--sage-l);padding-bottom:6px;margin:2em 0 .8em}
.page p,.page li{font-size:.98rem}
.todo{background:#FFF1C9;color:#7A4B00;font-weight:700;padding:0 4px;border-radius:4px}
.def{margin:0 0 1.4em;border-top:1px solid var(--line)}
.def div{display:grid;grid-template-columns:1fr;padding:10px 0;border-bottom:1px solid var(--line)}
@media (min-width:600px){.def div{grid-template-columns:9em 1fr}}
.def dt{font-weight:700;color:var(--sage-d)}.def dd{margin:0}

/* ---------- フッター ---------- */
.site-footer{background:var(--navy);color:#E7ECF4;margin-top:40px;padding:26px 0 18px;font-size:.85rem}
.site-footer a{color:#fff}
.site-footer ul{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px 18px}
.site-footer__disclaimer{font-size:.78rem;line-height:1.8;color:#C9D2E0;margin:0 0 12px}
.site-footer__copy{font-size:.75rem;color:#AFBBD0;margin:0}

@media print{.site-header,.site-nav,.site-footer,.ad-box,.ad-inline,.toc{display:none}body{background:#fff}}