/* ============================================================
   メディア（WordPressテンプレート専用）
   前半はお知らせ（totop-news/news.css）と同じ本文スタイル。後半がメディア固有
   子テーマの header.css・subpage.css の後に読み込む前提（メディアのページでだけ読み込む）
   ============================================================ */

/* subpage.css に無いトークンだけ補う */
body.totop-media-page { --en: "Inter", "Helvetica Neue", sans-serif; }

/* Lightning（origin2）が見出しタグ全体に付ける罫線を、メディアの中だけ外す。:where で詳細度を上げず、下のメディア側の指定を優先させる */
:where(.totop-media) :is(h2, h3, h4, h5, h6) { border-top: 0; border-bottom: 0; padding-top: 0; padding-bottom: 0; }
:where(.totop-media) h3::after { content: none; }

/* 詳細ページヒーロー内の日付・タグ */
.news-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 14px;
}
.news-meta time {
  font-family: "Jost", sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.news-hero h1 { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.5; }

/* 記事本文 */
.news-body {
  max-width: 760px;
  font-size: 15.5px;
  line-height: 2;
}
.news-body p { margin: 0 0 1.6em; }
.news-body h2 {
  position: relative;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  margin: 2.4em 0 1em;
  padding-left: 22px;
}
.news-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--teal);
}
.news-body h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 2em 0 0.8em;
}
.news-body ul,
.news-body ol {
  margin: 0 0 1.6em;
  padding-left: 1.5em;
}
.news-body ul { list-style: disc; }
.news-body ol { list-style: decimal; }
.news-body li { margin-bottom: 0.4em; }
.news-body a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.news-body a:hover { opacity: 0.75; }
.news-body img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
  margin: 0.4em 0 1.6em;
}
.news-body blockquote {
  margin: 0 0 1.6em;
  padding: 0.2em 0 0.2em 1.2em;
  border: 0;
  border-left: 2px solid var(--teal-light);
  background: none;
  color: var(--ink-soft);
}
.news-body blockquote::before,
.news-body blockquote::after { content: none !important; }
.news-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  font-size: 14.5px;
}
.news-body th,
.news-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.news-body th { font-weight: 700; color: var(--ink-soft); }

/* 一覧ページャー・戻る導線 */
.news-pager {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 760px;
  margin-top: 36px;
}
.news-pager a { color: var(--teal-ink); font-size: 14px; }
.news-pager a:hover { opacity: 0.75; }
.news-back { margin-top: 56px; }
.news-empty { color: var(--ink-soft); }

@media (max-width: 767px) {
  .news-body { font-size: 15px; }
  .news-body h2 { font-size: 19px; }
}

/* ============================================================
   メディア固有
   ============================================================ */
.media-hero { padding-bottom: 40px; }
/* 子テーマの .page-hero は固定ヘッダーの下にさらに72px空ける（大見出しの帯向け）。記事ではパンくずから始まるので空きを詰める */
.page-hero.media-hero { padding-top: calc(var(--header-h, 72px) + 20px); }
.page-hero.media-hero .breadcrumb { margin-top: 0; }
@media (max-width: 767px) { .page-hero.media-hero { padding-top: calc(var(--header-h, 72px) + 16px); } }
.media-kicker { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.media-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--teal-ink);
  padding: 3px 10px;
  border: 1px solid var(--teal-light);
  border-radius: 3px;
}
.media-tag.sub { color: var(--ink-soft); border-color: var(--line); }
.media-title {
  font-size: clamp(24px, 3.2vw, 34px) !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 18px !important;
}
.media-title::before { content: none !important; }
.media-dates { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--gray); }
.media-dates time { font-family: var(--en); letter-spacing: 0.02em; }

.media-layout { max-width: 820px; }
.media-article > * + * { margin-top: 40px; }

.media-box-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--teal-ink);
  margin-bottom: 10px;
}
.media-summary {
  background: var(--teal-pale);
  border-radius: 3px;
  padding: 24px 28px;
}
.media-summary ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.media-summary li { font-size: 15.5px; line-height: 1.9; font-weight: 500; }
.media-summary li + li { margin-top: 6px; }

.media-toc { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 20px 0; }
.media-toc ol { margin: 0; padding-left: 1.4em; list-style: decimal; }
.media-toc li { font-size: 14.5px; line-height: 1.8; }
.media-toc a { color: var(--ink); }
.media-toc a:hover { color: var(--teal-ink); }

.media-body { max-width: none; }
.media-body h2 { scroll-margin-top: calc(var(--header-h) + 16px); }

.media-sec-title { font-size: 21px; font-weight: 700; margin-bottom: 20px; }

.media-sources, .media-byline {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 20px 24px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.media-sources ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.media-byline dl { display: grid; grid-template-columns: 4em 1fr; gap: 6px 12px; margin: 0; }
.media-byline dt { font-weight: 700; color: var(--ink); }
.media-byline dd { margin: 0; }
.media-byline a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }

.media-cta { border-top: 2px solid var(--teal); padding-top: 28px; }
.media-cta-title { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.media-cta-text { font-size: 14.5px; color: var(--ink-soft); line-height: 1.9; margin-bottom: 18px; }
.media-cta-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

.media-filter { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 28px; font-size: 14px; }
.media-filter a { color: var(--ink-soft); padding-bottom: 4px; border-bottom: 2px solid transparent; }
.media-filter a.is-current, .media-filter a:hover { color: var(--teal-ink); border-bottom-color: var(--teal); }

.media-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); max-width: 860px; }
.media-list li { border-bottom: 1px solid #E3DFD7; }
.media-list a { display: grid; gap: 6px; padding: 20px 0; color: var(--ink); transition: color 0.2s ease; }
.media-list a:hover { color: var(--teal-ink); }
.media-list .media-tag { justify-self: start; }
.media-list-title { font-size: 16.5px; font-weight: 700; line-height: 1.6; }
.media-list-lead { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }
.media-list time { font-size: 12px; color: var(--gray); font-family: var(--en); }

@media (max-width: 767px) {
  .media-summary { padding: 18px 18px; }
  .media-sources, .media-byline { padding: 16px 16px; }
  .media-byline dl { grid-template-columns: 1fr; gap: 2px; }
  .media-byline dd { margin-bottom: 8px; }
}

/* メディアトップの柱（テーマの親で説明文があるもの） */
.media-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.media-pillars li { border-bottom: 1px solid #E3DFD7; }
.media-pillars a { display: grid; gap: 8px; padding: 24px 24px 24px 0; color: var(--ink); }
.media-pillars a:hover .media-pillar-name { color: var(--teal-ink); }
.media-pillar-name { font-size: 19px; font-weight: 700; }
.media-pillar-desc { font-size: 14px; line-height: 1.9; color: var(--ink-soft); }
.media-pillar-count { font-size: 12px; color: var(--gray); }
.media-about { margin-top: 48px; max-width: 860px; }
.media-about-page { max-width: 860px; }
.media-about-page h2 { font-size: 21px; font-weight: 700; margin: 48px 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--teal-light); }
.media-about-page h2:first-child { margin-top: 0; }
.media-about-page p, .media-about-page li { font-size: 15.5px; line-height: 2; }
.media-about-page ul, .media-about-page ol { padding-left: 1.4em; margin: 0 0 16px; }
.media-about-page a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.media-about-profile dt { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.media-about-profile dd { margin: 0; }


/* 記事と対のチェックリスト */
.media-checklist { border: 1px solid var(--teal-light); border-radius: 3px; padding: 22px 26px; }
.media-checklist-title { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.media-checklist ul { list-style: none; margin: 0 0 16px; padding: 0; }
.media-checklist li { border-bottom: 1px solid var(--line); }
.media-checklist label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; font-size: 14.5px; line-height: 1.8; cursor: pointer; }
.media-checklist input { flex: none; width: 17px; height: 17px; margin-top: 4px; accent-color: var(--teal); }
.media-checklist input:checked + span { color: var(--gray); text-decoration: line-through; }
.media-checklist-btns { display: flex; flex-wrap: wrap; gap: 12px 28px; }
@media (max-width: 767px) { .media-checklist { padding: 16px 16px; } }


/* ============================================================
   2026-09-25 デザイン改修：2カラム・強い見出し・図解部品・相談カード
   ============================================================ */

/* ---- レイアウト：本文＋右の追従カラム（1100px以上） ---- */
.media-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 8px; padding-bottom: 72px; }
.media-article { min-width: 0; }
.media-article > * + * { margin-top: 36px; }
.media-side { display: none; }
@media (min-width: 1100px) {
  .media-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; max-width: 1180px; }
  .media-side { display: block; }
  .media-side-sticky { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
  .media-article > .media-toc { display: none; }  /* PCは右カラムの目次を使う */
}
.media-side-toc { border-top: 2px solid var(--ink); padding-top: 14px; }
.media-side-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.media-side-toc li { counter-increment: t; border-bottom: 1px solid var(--line); }
.media-side-toc a { display: grid; grid-template-columns: 26px 1fr; padding: 9px 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.media-side-toc a::before { content: counter(t, decimal-leading-zero); font-family: var(--en); font-size: 11px; color: var(--teal-ink); padding-top: 2px; }
.media-side-toc a:hover { color: var(--teal-ink); }

/* ---- アイキャッチ ---- */
.media-eyecatch { margin: 0; }
.media-eyecatch img { display: block; width: 100%; height: auto; border-radius: 6px; }
.media-eyecatch-fallback { display: flex; align-items: flex-end; aspect-ratio: 1200 / 630; border-radius: 6px; padding: 14px 16px;
  background: linear-gradient(135deg, var(--teal-pale) 0%, #DDEFEF 100%); color: var(--teal-ink); font-size: 12px; font-weight: 700; letter-spacing: .08em; position: relative; overflow: hidden; }
.media-eyecatch-fallback::after { content: ""; position: absolute; right: -18px; top: -18px; width: 96px; height: 96px; border-radius: 22px; background: var(--teal); opacity: .14; }
.media-eyecatch-fallback.is-ai { background: linear-gradient(135deg, #EEF1F6 0%, #DFE6F0 100%); color: #3B5A86; }
.media-eyecatch-fallback.is-ai::after { background: #3B5A86; }

/* ---- 目次（スマホ・タブレット） ---- */
.media-toc summary { cursor: pointer; list-style: none; }
.media-toc summary::-webkit-details-marker { display: none; }
.media-toc summary::after { content: "＋"; float: right; color: var(--teal-ink); }
.media-toc[open] summary::after { content: "－"; }

/* ---- 見出し：番号＋太い帯（AIに引用される冒頭文を目立たせる） ---- */
.media-body { counter-reset: h2; }
.media-body h2 { counter-increment: h2; position: relative; margin: 2.8em 0 1.1em; padding: 18px 20px 18px 64px; font-size: 21px; line-height: 1.55;
  background: var(--teal-pale); border-left: 5px solid var(--teal); border-radius: 0 6px 6px 0; }
.media-body h2::before { content: counter(h2, decimal-leading-zero); position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: auto; height: auto; background: none; border-radius: 0; font-family: var(--en); font-size: 22px; font-weight: 600; color: var(--teal-ink); }
.media-body h2 + p { font-weight: 500; }                  /* h2直後の結論文を少し強く */
.media-body h3 { font-size: 17.5px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.media-body strong { background: linear-gradient(transparent 62%, #CFEDEC 62%); font-weight: 700; }

/* ---- 表：見出し行を色つき・縞・スマホは横スクロール ---- */
.media-body .tm-table, .media-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.media-body table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; line-height: 1.7; width: 100%; }
.media-body thead th, .media-body table tr:first-child th { background: var(--teal); color: #fff; font-weight: 700; white-space: nowrap; }
.media-body th, .media-body td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 7em; }
.media-body tbody tr:nth-child(even) td { background: #F9FBFB; }
.media-body td:first-child { font-weight: 700; color: var(--ink); }

/* ---- 図解の部品（執筆AIが class で使う） ---- */
/* ポイント・注意 */
.media-body .tm-point, .media-body .tm-caution { position: relative; margin: 1.8em 0; padding: 20px 22px 18px 58px; border-radius: 6px; line-height: 1.9; }
.media-body .tm-point { background: #FFF9EC; border: 1px solid #F1DFB0; }
.media-body .tm-caution { background: #FDF1F0; border: 1px solid #F0CFCB; }
.media-body .tm-point::before, .media-body .tm-caution::before { position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff; }
.media-body .tm-point::before { content: "!"; background: #D9A52E; }
.media-body .tm-caution::before { content: "×"; background: #C8574B; }
.media-body .tm-point > :first-child, .media-body .tm-caution > :first-child { margin-top: 0; }
.media-body .tm-point > :last-child, .media-body .tm-caution > :last-child { margin-bottom: 0; }
.media-body .tm-box-title { display: block; font-weight: 700; margin-bottom: 4px; }

/* ステップ（縦の番号つき流れ） */
.media-body ol.tm-steps { list-style: none; padding: 0; margin: 1.8em 0; counter-reset: s; }
.media-body ol.tm-steps > li { counter-increment: s; position: relative; padding: 0 0 22px 60px; margin: 0; }
.media-body ol.tm-steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal); color: #fff; display: grid; place-items: center; font-family: var(--en); font-weight: 600; font-size: 17px; }
.media-body ol.tm-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--teal-light); }
.media-body ol.tm-steps > li > strong:first-child { display: block; background: none; font-size: 16px; margin-bottom: 4px; padding-top: 7px; }

/* 流れ図（横に矢印でつなぐ・スマホは縦） */
.media-body ol.tm-flow { list-style: none; padding: 0; margin: 1.8em 0; display: flex; flex-wrap: wrap; gap: 28px 34px; }
.media-body ol.tm-flow > li { position: relative; flex: 1 1 140px; margin: 0; padding: 16px 14px; border: 2px solid var(--teal); border-radius: 8px; background: #fff;
  text-align: center; font-size: 14px; line-height: 1.6; }
.media-body ol.tm-flow > li > strong:first-child { display: block; background: none; color: var(--teal-ink); font-size: 15px; margin-bottom: 4px; }
.media-body ol.tm-flow > li:not(:last-child)::after { content: ""; position: absolute; right: -26px; top: 50%; transform: translateY(-50%);
  border: 9px solid transparent; border-left: 13px solid var(--teal); }
@media (max-width: 767px) {
  .media-body ol.tm-flow { flex-direction: column; gap: 30px; }
  .media-body ol.tm-flow > li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -26px; transform: translateX(-50%);
    border: 9px solid transparent; border-top: 13px solid var(--teal); }
}

/* 比較（2〜3列のカード） */
.media-body .tm-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 1.8em 0; }
.media-body .tm-compare > div { border: 1px solid var(--line); border-radius: 8px; padding: 18px 18px 12px; background: #fff; }
.media-body .tm-compare > div > strong:first-child { display: block; background: none; font-size: 15.5px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--teal); }
.media-body .tm-compare > div.is-good > strong:first-child { border-color: var(--teal); color: var(--teal-ink); }
.media-body .tm-compare > div.is-bad > strong:first-child { border-color: #C8574B; color: #A3463C; }
.media-body .tm-compare ul { margin: 0; padding-left: 1.2em; font-size: 14px; }

/* 要点の数字・キーワード（大きく1つ見せる） */
.media-body .tm-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 1.8em 0; }
.media-body .tm-key > div { background: var(--teal-pale); border-radius: 8px; padding: 16px; text-align: center; font-size: 13.5px; line-height: 1.6; }
.media-body .tm-key > div > strong:first-child { display: block; background: none; font-size: 17px; line-height: 1.5; color: var(--teal-ink); margin-bottom: 6px; word-break: auto-phrase; text-wrap: balance; }

/* ---- ボタン ---- */
.media-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border-radius: 6px;
  background: #E8871E; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .04em; box-shadow: 0 3px 0 #B9660F; transition: transform .15s ease, box-shadow .15s ease; }
.media-btn::after { content: "→"; font-family: var(--en); }
.media-btn:hover { transform: translateY(1px); box-shadow: 0 2px 0 #B9660F; color: #fff; }
.media-btn.large { min-height: 58px; padding: 16px 40px; font-size: 17px; }
.media-btn.block { display: flex; width: 100%; }
.media-btn.outline { background: #fff; color: var(--teal-ink); border: 2px solid var(--teal); box-shadow: none; }
.media-btn.outline::after { content: none; }
.media-btn.ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.7); box-shadow: none; }

/* ---- 相談カード：導入直後・本文の途中 ---- */
.media-inline-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px 28px; margin: 2.4em 0; padding: 22px 26px;
  border: 2px solid var(--teal); border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(23,129,127,.08); }
.media-inline-cta p { margin: 0; }
.media-inline-cta-label { font-size: 12px; font-weight: 700; color: var(--teal-ink); letter-spacing: .06em; }
.media-inline-cta-offer { font-size: 18px; font-weight: 700; line-height: 1.5; margin: 2px 0 4px !important; }
.media-inline-cta-lead { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }
.media-inline-cta-btns { display: grid; gap: 8px; justify-items: center; }
.media-inline-cta-sub { font-size: 12.5px; color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .media-inline-cta { grid-template-columns: 1fr; padding: 18px; } .media-inline-cta-btns .media-btn { width: 100%; } }

/* ---- 相談カード：記事末（濃い帯） ---- */
.media-end-cta { background: #223D39; color: #fff; border-radius: 12px; padding: 36px 36px 30px; position: relative; overflow: hidden; }
.media-end-cta::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 40px; background: var(--teal); opacity: .18; }
.media-end-cta p { margin: 0; }
.media-end-cta-label { font-size: 12.5px; letter-spacing: .08em; color: #A6D9D8; }
.media-end-cta-offer { font-size: 24px; font-weight: 700; line-height: 1.5; margin: 6px 0 10px !important; }
.media-end-cta-lead { font-size: 14.5px; line-height: 1.9; color: rgba(255,255,255,.88); }
.media-end-cta ul { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 8px; }
.media-end-cta li { position: relative; padding-left: 26px; font-size: 14.5px; }
.media-end-cta li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); }
.media-end-cta-btns { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; position: relative; z-index: 1; }
.media-end-cta-note { margin-top: 14px !important; font-size: 12px; color: rgba(255,255,255,.7); }
.media-end-banner img { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 22px; }
@media (max-width: 767px) { .media-end-cta { padding: 26px 20px 22px; } .media-end-cta-offer { font-size: 20px; } .media-end-cta-btns .media-btn { width: 100%; } }

/* ---- 相談カード：右カラム ---- */
.media-side-cta { background: #223D39; color: #fff; border-radius: 10px; padding: 22px 20px 18px; }
.media-side-cta p { margin: 0; }
.media-side-cta-label { font-size: 11.5px; letter-spacing: .1em; color: #A6D9D8; }
.media-side-cta-offer { font-size: 17px; font-weight: 700; line-height: 1.55; margin: 4px 0 10px !important; }
.media-side-cta ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.88); }
.media-side-cta li { padding-left: 16px; position: relative; }
.media-side-cta li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 2px; background: var(--teal); }
.media-side-cta-sub { display: block; text-align: center; margin-top: 10px; font-size: 12px; color: #A6D9D8; text-decoration: underline; text-underline-offset: 3px; }
.media-side-banner img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* ---- スマホの画面下に追従する相談バー ---- */
.media-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(34,61,57,.97); color: #fff; font-size: 13px; font-weight: 700;
  transform: translateY(110%); transition: transform .3s ease; }
.media-sticky-cta.is-on { transform: none; }
.media-sticky-cta .media-btn { min-height: 42px; padding: 8px 18px; font-size: 14px; flex: none; }
@media (min-width: 1100px) { .media-sticky-cta { display: none; } }

/* ---- チェックリストを「配れる1枚」らしく ---- */
.media-checklist { border: 2px solid var(--teal); border-radius: 10px; padding: 0; overflow: hidden; background: #fff; }
.media-checklist-head { background: var(--teal-pale); padding: 18px 24px 14px; }
.media-checklist-head p { margin: 0; }
.media-checklist-title { font-size: 18px; margin: 2px 0 4px !important; }
.media-checklist-note { font-size: 12.5px; color: var(--ink-soft); }
.media-checklist ul { padding: 6px 24px 0; margin: 0; }
.media-checklist-btns { padding: 16px 24px 22px; gap: 12px; }

/* ---- 関連記事カード ---- */
.media-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.media-cards a { display: grid; gap: 10px; color: var(--ink); }
.media-cards a:hover .media-card-title { color: var(--teal-ink); }
.media-cards .media-tag { justify-self: start; }
.media-card-title { font-size: 15px; font-weight: 700; line-height: 1.6; }

/* 本文リンクの装飾がボタンに乗らないように（.news-body a より強く） */
.news-body a.media-btn, .news-body a.media-btn:hover { color: #fff; text-decoration: none; opacity: 1; }
.news-body a.media-btn.outline { color: var(--teal-ink); }
.news-body .media-inline-cta-sub { color: var(--teal-ink); }
/* 枠の中の段落は詰める */
.media-body .tm-point p, .media-body .tm-caution p { margin: 0; }
.media-body .tm-box-title { margin-bottom: 2px; }
/* 右カラムのボタンは文言が長いので小さめに */
.media-side-cta .media-btn { font-size: 13.5px; padding: 12px 14px; letter-spacing: .02em; }
.media-side-cta .media-btn::after { content: none; }
/* ステップの本文に「：」から始まる説明が続く場合の余白 */
.media-body ol.tm-steps > li > strong:first-child + * { margin-top: 0; }
/* アイキャッチの地がページと同じ色なので、細い罫で輪郭を出す */
.media-eyecatch img { border: 1px solid #E3DFD7; }

/* 一覧：左にサムネイル、右に文字 */
.media-list a.has-thumb { grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.media-list-thumb .media-eyecatch, .media-list-thumb .media-eyecatch-fallback { display: block; }
.media-list-thumb img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid #E3DFD7; }
.media-list-body { display: grid; gap: 6px; }
.media-list-body .media-tag { justify-self: start; }
.media-list { max-width: 960px; }
@media (max-width: 767px) { .media-list a.has-thumb { grid-template-columns: 120px 1fr; gap: 14px; } .media-list-body .media-list-lead { display: none; } }

/* 記事末：バナーがあるときはバナーだけ */
.media-end-cta.has-banner { background: none; padding: 0; border-radius: 0; }
.media-end-cta.has-banner::after { content: none; }
.media-end-cta.has-banner .media-end-banner img { display: block; width: 100%; height: auto; border-radius: 12px; margin: 0; transition: transform .2s ease, box-shadow .2s ease; }
.media-end-cta.has-banner .media-end-banner:hover img { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.media-end-banner-sub { margin: 10px 0 0 !important; text-align: right; font-size: 13px; }
.media-end-banner-sub a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ガイドブックへの入口（相談の前の軽い入口） */
.media-guide-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 14px 0 0 !important; padding: 14px 18px; border: 1px dashed var(--teal-light); border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.7; }
.media-guide-link span { font-size: 12px; font-weight: 700; color: var(--teal-ink); letter-spacing: .06em; }
.media-guide-link a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.media-guide-link a::before { content: "PDF"; display: inline-block; margin-right: 8px; padding: 1px 6px; border-radius: 3px; background: #C8574B; color: #fff; font-size: 11px; font-family: var(--en); letter-spacing: .04em; text-decoration: none; }

/* ---------- ページ末のCTA帯（本番のお知らせ news-page.css と同じ指定。お知らせ専用CSSはメディアでは読まれないため写している） ---------- */
body.totop-media-page .totop-media .cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	background:
		var(--totop-noise-cta),
		linear-gradient(160deg, #27433e 0%, #1d3531 100%);
	color: #fff;
	padding: 104px 0;
}

body.totop-media-page .totop-media .cta-copy {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(28px, 4.2vw, 44px);
	letter-spacing: 0.05em;
	line-height: 1.5;
	margin: 0 0 20px;
	color: #fff;
	font-feature-settings: "palt";
	word-break: auto-phrase;
}

body.totop-media-page .totop-media .cta-text {
	margin: 0 0 36px;
	font-size: 14.5px;
	line-height: 1.9;
	opacity: 0.78;
	color: #fff;
}

body.totop-media-page .totop-media .btn-primary {
	display: inline-block;
	background: var(--teal);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
	padding: 15px 40px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
	border: 0;
}

body.totop-media-page .totop-media .btn-primary.large {
	padding: 18px 56px;
	font-size: 16px;
}

body.totop-media-page .totop-media .btn-primary:hover {
	background: #35c6c5;
	color: #fff;
}

@media (max-width: 767px) {
	body.totop-media-page .totop-media .cta {
		padding: 64px 0;
	}
}

/* 見出し・要点・図解はことばの切れ目で、行の長さをそろえて折り返す（文字数が変わっても1〜2文字だけ次の行に落ちない） */
.media-title, .media-body h2, .media-body h3,
.media-body ol.tm-flow > li > strong:first-child, .media-body ol.tm-steps > li > strong:first-child,
.media-body .tm-compare strong { word-break: auto-phrase; text-wrap: balance; }
/* 列の少ない表も本文の幅いっぱいに（スマホは横スクロールのまま） */
@media (min-width: 768px) { .media-body table { display: table; } }
.media-btn, .media-cta-title { word-break: auto-phrase; text-wrap: balance; }
/* 本文中の相談カードは文章・ボタン・リンクの縦並び（横並びだと長い文言のボタンが折れて左に寄り、リンクがはみ出した） */
.media-inline-cta { grid-template-columns: 1fr; gap: 16px; }
.media-inline-cta-btns { justify-items: start; gap: 12px; }
.media-btn { text-align: center; }
@media (max-width: 767px) { .media-inline-cta-btns { justify-items: stretch; } .media-inline-cta-sub { justify-self: center; } }
/* 右カラムの相談カードは薄い緑の地に */
.media-side-cta { background: var(--teal-pale); color: var(--ink); border: 2px solid var(--teal); }
.media-side-cta-label { color: var(--teal-ink); font-weight: 700; }
.media-side-cta ul { color: var(--ink-soft); }
.media-side-cta-sub { color: var(--teal-ink); }
/* PCの右カラムはカードだけ追従（目次が長いと全体の追従が効かないため） */
@media (min-width: 1100px) {
  .media-side { display: flex; flex-direction: column; }
  .media-side-sticky { position: static; display: flex; flex-direction: column; gap: 20px; flex: 1; }
  .media-side-cta, .media-side-banner { position: sticky; top: calc(var(--header-h, 72px) + 24px); }
}
/* 子テーマの body { overflow-x: hidden } があると追従（sticky）が止まるため、メディアでは clip にする */
body.totop-media-page { overflow-x: clip; }