/* 記事ページ。余白のある中央1カラムと、波線で区切った読み物の構成。 */
.article-page { background: #fff; }
.article-page .site-main { padding-bottom: 70px; }
.article-page .site-header { border-bottom-color: #eef0ee; }
.article-page .header-inner { padding-top: 18px; padding-bottom: 18px; }
.article-page .cat-nav a { padding-top: 12px; padding-bottom: 12px; }
.article-page .breadcrumbs { width: min(960px, calc(100% - 48px)); font-size: .875rem; padding-top: 24px; line-height: 1.8; }
.article-page .article-reading-wrap { width: min(720px, calc(100% - 48px)); margin: 0 auto; }
.article-page .article-editorial { min-width: 0; padding: 0; margin-top: 36px; border: 0; border-radius: 0; background: transparent; }
.article-page .eyecatch { margin: 0 0 32px; border-radius: 4px; overflow: hidden; }
.article-page .eyecatch img { width: 100%; height: auto; }
.article-page .article-heading { margin-bottom: 32px; }
.article-page .article-heading > .label { padding: 2px 10px; border-radius: 3px; }
.article-page .article-title { margin: 15px 0 20px; font-size: 2rem; font-family: var(--font); line-height: 1.6; letter-spacing: .015em; text-wrap: pretty; }
.article-page .article-meta { gap: 8px 18px; margin-bottom: 20px; line-height: 1.9; }
.article-page .pr-note { padding: 13px 16px; margin-bottom: 0; background: #f5f6f3; border-left: 3px solid #d4d9cf; border-radius: 0; font-size: .875rem; line-height: 1.9; }
.article-page .preview-note { background: #fff4c9; margin: 0 0 24px; }

/* 目次と本文。本文はWindowsのメイリオ等、画面表示向けの標準書体。 */
.article-page .toc { margin: 0 0 46px; padding: 26px 30px; border: 0; border-radius: 3px; background: #f0f5f6; font-family: var(--font-reading); font-size: 1rem; }
.article-page .toc-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; font-weight: 700; }
.article-page .toc-heading span { color: #65777a; font-size: .875rem; font-weight: 400; letter-spacing: .12em; }
.article-page .toc ol { padding-left: 1.5em; }
.article-page .toc li { padding: 4px 0 4px 3px; }
.article-page .toc a { color: #475d60; text-decoration-thickness: 1px; }
.article-page .toc a:hover { color: var(--accent); }
.article-page .article-body { font-size: 1.125rem; line-height: 1.95; }
.article-page .article-introduction { margin: 0 0 36px; }
.article-page .article-introduction > p { margin-bottom: 1.6em; }
.article-page .article-introduction > :last-child { margin-bottom: 0; }
.article-page .article-body > p { margin-bottom: 1.6em; }
.article-page .article-body > h2 { position: relative; margin: 64px 0 26px; padding: 72px 0 0; border: 0; border-radius: 0; background: transparent; font-size: 1.625rem; font-family: var(--font); font-weight: 700; line-height: 1.65; scroll-margin-top: 24px; }
.article-page .article-body > h2::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 40px; background: url('../images/article-divider.svg?v=2') center / 100% 40px no-repeat; }
.article-page .article-body > h3 { margin: 44px 0 22px; padding: 2px 0 2px 16px; border: 0; border-left: 3px solid #7b8b8a; font-size: 1.25rem; font-family: var(--font-reading); line-height: 1.8; scroll-margin-top: 30px; }
.article-page .article-body > p strong { background: linear-gradient(transparent 67%, #fff4af 67%); }
.article-page .article-body > ul, .article-page .article-body > ol { margin-bottom: 1.8em; }
.article-page .article-body > blockquote { margin: 28px 0; padding: 22px 26px; border-left: 3px solid #d6b950; background: #f3f6f6; border-radius: 3px; color: var(--ink); }
.article-page .article-body blockquote > :last-child { margin-bottom: 0; }
.article-page .article-body img:not(.pb-image):not(.cmp-image) { border-radius: 4px; margin-top: 30px; margin-bottom: 34px; }
.article-page .article-body a { text-underline-offset: 4px; }

/* 商品の内容・広告リンクは既存の構造を使い、余白と色を揃える。 */
.article-page .product-box { background: #fff; border: 1px solid #dce4e4; border-radius: 4px; padding: 24px; margin: 28px 0 42px; }
.article-page .product-box .pb-name { font-size: 1.125rem; }
.article-page .product-box .pb-fit { padding: 16px 18px; margin: 18px 0; background: #f0f5f6; border-left: 3px solid #f0d36c; border-radius: 2px; font-size: 1rem; }
.article-page .product-box .pb-fit::before { content: 'POINT'; display: block; margin-bottom: 8px; color: #576a6a; font-size: .875rem; font-weight: 700; letter-spacing: .08em; }
.article-page .product-box .pb-caution { padding: 14px 16px; background: #f6f6f2; }
.article-page .pb-rakuten { border-color: #e9dada; }
.article-page .compare-wrap { margin: 30px 0 40px; border-color: #dce4e4; border-radius: 4px; }
.article-page .compare thead th { background: #edf4f5; }
.article-page .compare tbody th { background: #f7f9f9; }
.article-page .writer-profile { margin: 54px 0 0; padding: 25px; background: #fff; border-width: 0; border-top: 1px solid var(--theme-line); border-bottom: 1px solid var(--theme-line); border-radius: 0; }
.article-page .writer-profile .writer-icon { width: 64px; height: 64px; border-width: 2px; }
.article-page .writer-profile .writer-name { font-size: 1.125rem; }
.article-page .writer-profile .writer-desc { font-size: 1rem; }
.article-page .tags { margin-top: 34px; }

/* 読了後の案内 */
.article-discovery { width: min(960px, calc(100% - 48px)); margin: 64px auto; }
.article-discovery > .section-kicker, .article-discovery > .section-heading { text-align: center; }
.article-discovery > .section-heading { font-size: 1.625rem; margin-bottom: 30px; font-family: var(--font); }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.related-card { display: flex; align-items: center; gap: 18px; padding: 18px 0; color: var(--ink); text-decoration: none; border-top: 1px solid #e5eaea; border-bottom: 1px solid #e5eaea; }
.related-thumb { width: 142px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--accent-soft); border-radius: 3px; color: var(--accent); flex: none; }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-category { font-size: .875rem; color: var(--accent); }
.related-card h3 { margin: 5px 0 0; font-size: 1rem; line-height: 1.8; }
.related-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.article-share { padding: 26px 22px; margin: 52px 0 64px; border: 1px solid #e1e7e7; border-radius: 3px; text-align: center; }
.article-share > p:first-child { margin: 0 0 16px; font-size: 1rem; font-weight: 700; }
.share-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.share-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border: 1px solid #cbd6d5; border-radius: 28px; background: #fff; color: #394c48; padding: 9px 18px; font: inherit; font-size: .875rem; cursor: pointer; }
.share-button svg { width: 21px; height: 21px; }
.share-button:hover { background: #f0f5f5; border-color: #839c96; }
.article-share [hidden] { display: none; }
.share-status { margin: 16px 0 0; font-size: .875rem; color: #475d53; }
.share-status:empty { display: none; }
.share-url { width: 100%; margin-top: 16px; padding: 10px; border: 1px solid #cbd6d5; border-radius: 3px; font: inherit; font-size: 1rem; }
.article-category-grid { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.article-category-grid li { min-width: 0; }
.article-category-grid a { display: flex; flex-direction: column; align-items: center; color: var(--ink); text-decoration: none; height: 100%; text-align: center; }
.article-category-art { width: 108px; height: 108px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 19px; transition: transform .15s; }
.article-category-art .category-icon { width: 55px; height: 55px; }
.article-category-grid strong { font-size: 1rem; margin-bottom: 10px; }
.article-category-desc { font-size: .875rem; line-height: 1.95; color: #586665; flex: 1; }
.category-read-more { display: flex; gap: 12px; align-items: center; font-size: .875rem; margin-top: 15px; color: var(--accent); }
.article-category-grid a:hover .article-category-art { transform: translateY(-4px); }

/* 波の縁と白いブランド紹介カード */
.article-page .site-footer { position: relative; background: #f0f5f5; border: 0; padding: 60px 0 30px; }
.article-page .site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: -13px; height: 15px; background: radial-gradient(ellipse at 50% 100%, #f0f5f5 68%, transparent 71%) 0 0 / 40px 15px repeat-x; }
.article-page .site-footer > .wrap { width: min(960px, calc(100% - 48px)); }
.article-footer-intro { display: flex; align-items: center; gap: 24px; padding: 28px 30px; margin-bottom: 36px; background: #fff; border-radius: 8px; }
.article-footer-intro .people { width: 112px; }
.article-footer-intro > div { flex: 1; min-width: 0; }
.article-footer-intro p { margin: 5px 0; font-size: .9375rem; line-height: 1.9; }
.article-footer-intro .footer-intro-name { font-family: var(--font); font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; }
.article-footer-intro > a { display: inline-flex; align-items: center; gap: 12px; font-size: .875rem; flex: none; }
.article-page .site-footer .footer-brand { display: none; }
.article-page .footer-top, .article-page .footer-nav { justify-content: center; }
.article-page .footer-note, .article-page .footer-credit, .article-page .copyright { text-align: center; }

@media (max-width: 760px) {
  .article-page .breadcrumbs, .article-page .article-reading-wrap, .article-discovery, .article-page .site-footer > .wrap { width: calc(100% - 36px); }
  .article-page .article-editorial { margin-top: 25px; }
  .article-page .eyecatch { margin-bottom: 26px; }
  .article-page .article-title { font-size: 1.625rem; line-height: 1.65; }
  .article-page .toc { padding: 22px; }
  .article-page .article-body > h2 { font-size: 1.5rem; margin-top: 48px; padding-top: 65px; }
  .article-page .article-body > h3 { font-size: 1.125rem; margin-top: 34px; }
  .article-page .product-box { padding: 20px 18px; }
  .article-page .writer-profile { padding: 24px 0; }
  .article-discovery { margin-top: 48px; margin-bottom: 48px; }
  .related-grid { grid-template-columns: 1fr; gap: 16px; }
  .related-thumb { width: 120px; }
  .article-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
  .article-category-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 220px; justify-self: center; }
  .article-category-art { width: 100px; height: 100px; }
  .article-footer-intro { flex-wrap: wrap; gap: 16px; padding: 24px 20px; }
  .article-footer-intro .people { width: 86px; }
  .article-footer-intro > a { margin-left: auto; }
}
@media (max-width: 390px) {
  .article-page .toc { padding: 20px 18px; }
  .article-page .article-body > h2 { font-size: 1.5rem; }
  .article-footer-intro { justify-content: center; text-align: center; }
  .article-footer-intro > div { flex-basis: 100%; }
  .article-footer-intro > a { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .article-category-art { transition: none; }
}

/* 本文の後の「同じ悩みの記事」と、読了後の悩み・目的の入口。記事の落ち着いた線に合わせる */
.article-needs { margin: 34px 0 0; padding: 20px 22px; background: var(--accent-soft); border-radius: 8px; }
.article-needs-title { margin: 0 0 12px; font-size: 1rem; font-weight: 700; color: var(--accent); }
.article-page .need-chips a { border: 1px solid var(--theme-line); }
.article-page .need-chips a:hover { background: #fff; border-color: var(--accent); color: var(--accent); }
.article-need-links .need-chips { justify-content: center; }
.article-need-links .need-chips a { background: #fff; }
.article-need-links .need-chips a:hover { background: var(--accent-soft); }

/* この記事のまとめ（悩みの問い・答え・要点）。導入の直後に置き、問いと答えを短く言い切る */
.answer-box { margin: 0 0 32px; padding: 22px 26px 20px; background: #fff; border: 2px solid var(--theme-line); border-radius: 10px; }
.answer-kicker { display: inline-block; margin: 0 0 10px; padding: 1px 12px; background: var(--accent); color: #fff; border-radius: 20px; font-size: .875rem; font-weight: 700; line-height: 1.8; }
.answer-question { margin: 0 0 10px; font-family: var(--font-reading); font-size: 1.25rem; line-height: 1.6; color: var(--ink); }
.answer-text { margin: 0; font-size: 1.0625rem; line-height: 1.9; }
.answer-points { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--theme-line); }
.answer-points li { position: relative; margin: 0 0 6px; padding-left: 1.7em; font-size: 1rem; line-height: 1.8; }
.answer-points li::before { content: ''; position: absolute; left: .25em; top: .6em; width: .75em; height: .4em; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
@media (max-width: 760px) {
  .answer-box { padding: 20px 18px 18px; }
  .answer-question { font-size: 1.125rem; }
}