@charset "UTF-8";
/* =========================================================
   content.css — 旧サイトの本文クラスを新デザインに橋渡しする

   app/content/*.html には WordPress / SWELL のクラスが残っている。
   本文 HTML は export が作る生成物なので書き換えず、見た目はここで決める
   （プレイブック 3-5）。

   1. WordPress 標準ブロック
   2. SWELL のインライン装飾（マーカー・文字サイズ）
   3. SWELL のリストスタイル
   4. 商品ボックス（旧ポチップ相当）
   5. 埋め込み・ブログパーツ・フォーム
   6. 広告枠
   ========================================================= */

/* =========================================================
   1. WordPress 標準ブロック
   ========================================================= */
.entry-content .wp-block-image {
  margin-top: 1.6em;
}

.entry-content .wp-block-image img {
  width: 100%;
  height: auto;
}

.entry-content .wp-block-image.aligncenter {
  text-align: center;
}

.entry-content .wp-block-image.aligncenter img {
  margin-inline: auto;
}

.entry-content .wp-block-image.alignleft  { text-align: left; }
.entry-content .wp-block-image.alignright { text-align: right; }

.entry-content .is-resized img {
  width: auto;
  max-width: 100%;
}

.entry-content .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 0;
}

.entry-content .wp-block-gallery figure {
  margin: 0;
}

.entry-content .wp-block-gallery li::before {
  content: none;
}

.entry-content .wp-block-group > * + * {
  margin-top: 1.6em;
}

.entry-content .has-fixed-layout {
  table-layout: fixed;
}

/* 色指定は白黒基調に寄せる。文字色だけは可読性のため無効化しない */
.entry-content .has-inline-color {
  color: inherit;
  font-weight: 700;
}

.entry-content .swl-deep-01,
.entry-content .swl-deep-02,
.entry-content .swl-deep-03,
.entry-content .swl-deep-04 {
  color: inherit;
}

/* =========================================================
   2. SWELL のインライン装飾
   ---------------------------------------------------------
   旧サイトはマーカーを4色（緑・青・黄・橙）で使い分けていたが、
   新サイトはマーカーを使わず太字だけで強調する。
   本文 HTML には mark_green などのクラスが残っているので、
   ここで打ち消す。
   ========================================================= */
.entry-content .swl-marker,
.entry-content .swl-marker.mark_green,
.entry-content .swl-marker.mark_blue,
.entry-content .swl-marker.mark_yellow,
.entry-content .swl-marker.mark_orange {
  background: none;
  font-weight: 700;
}

.entry-content .swl-fz { font-size: 1em; }
.entry-content .swl-fz.u-fz-xs  { font-size: .8em; }
.entry-content .swl-fz.u-fz-s   { font-size: .9em; }
.entry-content .swl-fz.u-fz-l   { font-size: 1.15em; }
.entry-content .swl-fz.u-fz-xl  { font-size: 1.3em; }

.entry-content .swl-cell-bg { background: var(--c-bg-sub); }
.entry-content .swl-cell-text-centered { text-align: center; }

/* =========================================================
   3. SWELL のリストスタイル
   ========================================================= */
.entry-content ul.is-style-check_list > li::before,
.entry-content ul.is-style-good_list > li::before,
.entry-content ul.is-style-big_icon_check > li::before {
  content: "✓";
  background: none;
  width: auto;
  height: auto;
  top: 0;
  left: -1.35em;
  font-size: .95em;
  line-height: inherit;
  font-weight: 700;
}

.entry-content ul.is-style-triangle_list > li::before {
  content: "▶";
  background: none;
  width: auto;
  height: auto;
  top: 0;
  left: -1.3em;
  font-size: .7em;
  line-height: 2.6;
}

.entry-content ul.is-style-icon_good > li::before,
.entry-content ul.is-style-icon_bad > li::before,
.entry-content ul.is-style-big_icon_point > li::before,
.entry-content ul.is-style-big_icon_caution > li::before {
  background: none;
  width: auto;
  height: auto;
  top: 0;
  left: -1.5em;
  font-size: .9em;
  line-height: inherit;
  font-weight: 700;
}

.entry-content ul.is-style-icon_good > li::before        { content: "◎"; }
.entry-content ul.is-style-icon_bad > li::before         { content: "×"; }
.entry-content ul.is-style-big_icon_point > li::before   { content: "!"; }
.entry-content ul.is-style-big_icon_caution > li::before { content: "!"; }

.entry-content ul.is-style-check_list,
.entry-content ul.is-style-good_list,
.entry-content ul.is-style-icon_good,
.entry-content ul.is-style-icon_bad,
.entry-content ul.is-style-big_icon_check,
.entry-content ul.is-style-big_icon_point,
.entry-content ul.is-style-big_icon_caution,
.entry-content ul.is-style-triangle_list {
  padding-left: 1.7em;
}

.entry-content ul.-list-under-dashed > li {
  border-bottom: 1px dashed var(--c-line);
  padding-bottom: .5em;
}

.entry-content .is-style-border {
  border: 1px solid var(--c-line);
  padding: 1em 1.2em;
}

/* =========================================================
   4. 商品ボックス（旧ポチップ相当）
   ---------------------------------------------------------
   旧サイトは display_price=off で価格を出していないので、
   ここでも価格は扱わない。
   ========================================================= */
.p-box {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  grid-template-areas:
    "image body"
    "btns  btns";
  gap: 20px 24px;
  padding: 24px;
  border: 1px solid var(--c-line-str);
  margin: 2em 0;
}

.p-box__image {
  grid-area: image;
  display: grid;
  place-items: center;
}

.p-box__image img {
  width: auto;
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

:root[data-theme="dark"] .p-box__image img { mix-blend-mode: normal; }
.p-box__body { grid-area: body; }

.p-box__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.p-box__title a {
  text-decoration: none !important;
  color: var(--c-text);
}

.p-box__info {
  font-size: 12px;
  color: var(--c-text-sub);
  margin: 0 0 8px;
}

.p-box__review a {
  font-size: 12px;
  color: var(--c-text-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.p-box__btns {
  grid-area: btns;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.p-box__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none !important;
  border: 1px solid var(--c-line-str);
  color: var(--c-text) !important;
  background: transparent;
  transition: background .25s var(--ease), color .25s var(--ease);
}

.p-box__btn:hover {
  opacity: 1;
  background: var(--c-bg-inv);
  color: var(--c-text-inv) !important;
}

/* 1つ目（Amazon）だけ塗って主導線にする */
.p-box__btn.-amazon {
  background: var(--c-bg-inv);
  color: var(--c-text-inv) !important;
}

.p-box__btn.-amazon:hover {
  background: transparent;
  color: var(--c-text) !important;
}

.p-inline-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1px solid var(--c-line-str);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}

.p-inline-btn::after { content: " →"; }

.p-image img { margin-inline: auto; }

@media (max-width: 600px) {
  .p-box {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "image" "body" "btns";
    padding: 20px;
    gap: 16px;
  }
  .p-box__image img { max-height: 140px; }
  .p-box__btns { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   5. 埋め込み・ブログパーツ・フォーム
   ========================================================= */
.n-embed {
  margin: 2em 0;
}

.n-embed--youtube {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.n-embed--youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.entry-thumb.n-embed--youtube {
  margin-bottom: 40px;
}

.n-embed--link a {
  display: block;
  padding: 16px;
  border: 1px solid var(--c-line);
  font-size: 13px;
  word-break: break-all;
}

.blog-part {
  margin: 2em 0;
  padding: 24px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-sub);
}

.blog-part > *:first-child { margin-top: 0; }

.n-blogcard--external .n-blogcard__label::after {
  content: " ↗";
}

/* --- お問い合わせフォーム --- */
.c-form__row {
  display: block;
  margin-bottom: 20px;
}

.c-form__row label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.c-form__row label span {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .1em;
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
}

.c-form__row input,
.c-form__row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  font-size: 15px;
}

.c-form__row input:focus,
.c-form__row textarea:focus {
  outline: none;
  border-color: var(--c-line-str);
}

/* 入力させない隠し欄（スパム対策） */
.c-form__hp {
  position: absolute !important;
  left: -9999px;
}

/* =========================================================
   6. 広告枠
   ---------------------------------------------------------
   本番以外では実物を読み込まず、同じ位置に同じ高さの枠だけ描く
   （プレイブック 7-22）。
   ========================================================= */
.ad {
  margin: 2em 0;
  text-align: center;
}

.ad--sidebar { margin: 0; }

.ad--placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--c-line);
  background: var(--c-bg-sub);
  color: var(--c-text-sub);
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.8;
}

/* =========================================================
   ドロワーの子メニュー
   ========================================================= */
.drawer__sublist {
  padding-left: 14px;
  border-left: 1px solid var(--c-line);
  margin: 0 0 8px;
}

.drawer__sublist a {
  padding: 10px 0;
  font-size: 13px;
  color: var(--c-text-sub);
  border-bottom: none;
}

.drawer__sublist a::after { content: none; }

/* --- プロフィールの SNS リンク --- */
.profile-widget__sns,
.author-box__sns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.profile-widget__sns { justify-content: center; }

.profile-widget__sns a,
.author-box__sns a {
  display: block;
  padding: 4px 12px;
  border: 1px solid var(--c-line);
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--c-text-sub);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.profile-widget__sns a:hover,
.author-box__sns a:hover {
  opacity: 1;
  border-color: var(--c-line-str);
  color: var(--c-text);
}

/* =========================================================
   7. 本文の中に入るパーツの打ち消し
   ---------------------------------------------------------
   目次は「リード文のあと」に置くため .entry-content の中にある。
   そのままだと本文用のリスト装飾（数字・黒い四角）とリンクの下線を
   二重に受けてしまうので、ここで打ち消す。
   ========================================================= */
.entry-content .toc ol,
.entry-content .toc ul {
  list-style: none;
  padding-left: 0;
}

.entry-content .toc ul {
  margin: 8px 0 0 26px;
}

.entry-content .toc li::before {
  content: none;
}

.entry-content .toc li + li {
  margin-top: 0;
}

.entry-content .toc__body > li + li {
  margin-top: 12px;
}

.entry-content .toc__body ul li + li {
  margin-top: 6px;
}

.entry-content .toc a {
  text-decoration: none;
}

.entry-content .toc a:hover {
  opacity: 0.6;
}

/* 目次下パーツも本文の装飾を受けないようにする */
.entry-content .blog-part ul,
.entry-content .blog-part ol {
  list-style: none;
  padding-left: 0;
}

.entry-content .blog-part li::before {
  content: none;
}

/* =========================================================
   8. グローバルナビ（旧サイトに合わせて第1階層を全件出す）
   ---------------------------------------------------------
   旧サイトのヘッダーは 11 項目を並べ、子カテゴリーはドロップダウンで
   見せていた。項目数が多いので字間と間隔を詰め、収まらない幅では
   ドロワーに切り替える。
   ========================================================= */
.global-nav__list {
  gap: 24px;
}

.global-nav__list > li {
  position: relative;
}

.global-nav__list > li > a {
  font-size: 13px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding: 22px 0;   /* ヘッダーいっぱいに当たり判定を広げ、ドロップダウンを繋ぐ */
}

/* 下線アニメーションは第1階層だけに効かせる */
.global-nav__list a::after {
  content: none;
}

.global-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.global-nav__list > li > a:hover::after,
.global-nav__list > li.is-current > a::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* 子カテゴリーが多いので矢印を添えて開くことを示す */
.global-nav__list > li.has-sub > a::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .5;
}

.global-nav__sub {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 10;
  min-width: 240px;
  padding: 18px 20px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}

/* 第3階層まである項目は列組みにする */
.global-nav__sub--wide {
  display: flex;
  gap: 36px;
}

.global-nav__list > li:hover > .global-nav__sub,
.global-nav__list > li:focus-within > .global-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.global-nav__group + .global-nav__group {
  margin-top: 18px;
}

.global-nav__sub--wide .global-nav__group + .global-nav__group {
  margin-top: 0;
}

.global-nav__grouphead {
  display: block;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.global-nav__group ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.global-nav__group li a {
  display: block;
  padding: 5px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text-sub);
  white-space: nowrap;
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}

.global-nav__group li a:hover {
  opacity: 1;
  color: var(--c-text);
  padding-left: 5px;
}

/* カテゴリーはヘッダーに置かないので、全 34 項目のメニューへは
   ハンバーガーからしか辿れない。PC でも常に出す。 */
.menu-btn {
  display: grid;
}

/* 横並びは 3 項目だけなので、狭くなるまで残しておける */
@media (max-width: 768px) {
  .global-nav { display: none; }
  .header-tools { margin-left: auto; }
}

/* ドロワーの3階層目 */
.drawer__sublist .drawer__sublist {
  padding-left: 12px;
  border-left-style: dotted;
}

.drawer__sublist .drawer__sublist a {
  font-size: 12px;
  padding: 8px 0;
}

/* =========================================================
   9. フッターのカテゴリー一覧
   ---------------------------------------------------------
   ヘッダーからカテゴリーを外したので、ここで全件（31 件）出す。
   1 列だと縦に伸びすぎるため多段組みにする。
   ========================================================= */
.site-footer__top {
  grid-template-columns: 1.6fr 1fr;
}

.site-footer__cats {
  padding: 40px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-text-inv) 20%, transparent);
}

.footer-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px 32px;
}

.footer-cats a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  opacity: .85;
}

.footer-cats a span {
  font-family: var(--f-en);
  font-size: 11px;
  opacity: .5;
}

@media (max-width: 900px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-cats {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0 20px;
  }
}

/* =========================================================
   10. サイドバーの追従目次
   ---------------------------------------------------------
   追従するのはこの目次だけ。ほかのウィジェットは通常どおり流れる。
   旧サイトも fix_sidebar（追従サイドバー）に目次を置いていた。
   ========================================================= */

/* サイドバー自体の追従はやめ、列だけ本文と同じ高さに伸ばす。
   こうすると最後に置いた目次が記事の終わりまで追従できる。 */
.l-side {
  position: static;
  align-self: stretch;
}

.widget--toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 48px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.toc--side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  border-top: 1px solid var(--c-line-str);
}

.toc--side .toc__title {
  flex: none;
  padding: 14px 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
}

.toc--side .toc__body {
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

/* 追従目次は文字を落として本文の邪魔をしない。
   padding-left は下の枠線ぶんを必ず確保する（ショートハンドで
   打ち消すと文字が枠外に出て切れる）。 */
.toc--side .toc__body > li > a {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  padding: 5px 0 5px 12px;
}

.toc--side .toc__body > li + li {
  margin-top: 2px;
}

.toc--side .toc__body ul {
  margin: 2px 0 0 14px;
}

.toc--side .toc__body ul a {
  font-size: 12px;
  padding: 4px 0 4px 12px;
}

.toc--side .toc__body ul li + li {
  margin-top: 0;
}

/* 現在読んでいる章 */
.toc--side .toc__body a {
  display: block;
  border-left: 2px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.toc--side .toc__body a.is-active {
  opacity: 1;
  color: var(--c-text);
  font-weight: 700;
  border-left-color: var(--c-line-str);
  text-decoration: none;
}

/* スクロールバーを細く */
.toc--side .toc__body::-webkit-scrollbar {
  width: 3px;
}

.toc--side .toc__body::-webkit-scrollbar-thumb {
  background: var(--c-line);
}

/* 1 カラムになる幅では追従させない */
@media (max-width: 1024px) {
  .l-side { align-self: auto; }
  .widget--toc {
    position: static;
    max-height: none;
  }
  .toc--side .toc__body { overflow-y: visible; }
}

/* =========================================================
   11. 筆者紹介カード
   ---------------------------------------------------------
   目次の下と記事末に置く。旧サイトは SNS をアイコンフォントで
   出していて引き継げないので、文字リンクにしている。
   ========================================================= */
.author-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 24px;
  padding: 28px 32px;
  margin: 2.5em 0;
  border: 1px solid var(--c-line);
}

.author-card__avatar img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.author-card__role {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--c-text-sub);
  margin: 0;
}

.author-card__name {
  font-size: 17px;
  font-weight: 700;
  margin: 4px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}

.author-card__text {
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-text-sub);
  margin: 0;
}

.author-card__sns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.author-card__sns li::before { content: none; }

.author-card__sns a {
  display: block;
  padding: 5px 14px;
  border: 1px solid var(--c-line-str);
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .1em;
  text-decoration: none !important;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.author-card__sns a::after { content: " ↗"; opacity: .5; }

.author-card__sns a:hover {
  opacity: 1;
  background: var(--c-bg-inv);
  color: var(--c-text-inv) !important;
}

/* 目次の下に置く小さい版 */
.author-card--compact {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 22px;
  margin: 0 0 2.5em;
  background: var(--c-bg-sub);
  border: none;
}

.author-card--compact .author-card__name {
  font-size: 15px;
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.author-card--compact .author-card__text {
  font-size: 12.5px;
}

.author-card--compact .author-card__sns {
  margin-top: 12px;
}

@media (max-width: 600px) {
  .author-card,
  .author-card--compact {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
    padding: 20px;
  }
}

/* =========================================================
   12. 外部サイトへの文字リンク
   ---------------------------------------------------------
   旧サイトは外部 URL を素の文字列で出していただけ（リンクですら
   なかった）。カードにせず、外部と分かる文字リンクにする。
   ========================================================= */
.n-extlink {
  margin: 1.6em 0;
}

.entry-content .n-extlink a {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--c-line);
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.entry-content .n-extlink a:hover {
  opacity: 1;
  border-color: var(--c-line-str);
  background: var(--c-bg-sub);
}

.n-extlink__label {
  flex: none;
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--c-text-sub);
  border: 1px solid var(--c-line);
  padding: 2px 8px;
}

.n-extlink__text {
  font-size: 14px;
  line-height: 1.7;
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.n-extlink__text::after {
  content: " ↗";
  text-decoration: none;
  color: var(--c-text-sub);
}

/* ページ内リンクは JS（initSmoothScroll）が動かすので、
   CSS 側の scroll-behavior は切って二重に動かないようにする。 */
html {
  scroll-behavior: auto;
}

/* =========================================================
   13. 本文の中に置くパーツの打ち消し（追加分）
   ---------------------------------------------------------
   筆者紹介カードは本文（.entry-content）の中にも入るので、
   本文用のリスト装飾（黒い四角・インデント・行間）を打ち消す。
   .entry-content ul > li::before のほうが詳細度が高いため、
   ここは .entry-content から書き起こす必要がある。
   ========================================================= */
.entry-content .author-card ul,
.entry-content .author-card ol {
  padding-left: 0;
  list-style: none;
}

.entry-content .author-card li {
  position: static;
  margin: 0;
}

.entry-content .author-card li::before,
.entry-content .author-card li + li::before {
  content: none;
}

.entry-content .author-card li + li {
  margin-top: 0;
}

.entry-content .author-card p {
  margin: 0;
}

.entry-content .author-card__name {
  margin: 4px 0 8px;
  padding-bottom: 8px;
}

.entry-content .author-card__sns {
  margin-top: 12px;
}

/* =========================================================
   14. 目次に戻る
   ---------------------------------------------------------
   2 つ目以降の h2 の直前に置く。旧サイトと同じ位置・文言。
   ========================================================= */
.back-toc {
  margin: 3.2em 0 -2.4em;
  text-align: right;
}

.entry-content .back-toc a {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--c-line);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--c-text-sub);
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.entry-content .back-toc a:hover {
  opacity: 1;
  border-color: var(--c-line-str);
  color: var(--c-text);
}

@media (max-width: 600px) {
  .back-toc {
    margin: 2.4em 0 -1.6em;
  }
}

/* =========================================================
   15. 広告表記（PR表記）
   ---------------------------------------------------------
   旧サイトはアイキャッチの手前に、斜線地の帯で出していた。
   同じ位置・同じ文言で作り直す。本文と近すぎないよう下に余白を取る。
   ========================================================= */
.pr-notation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 32px;
  padding: 12px 18px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--c-text-sub);
  border: 1px solid var(--c-line);
  background-color: var(--c-bg);
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--c-text) 5%, transparent) 0 1px,
    transparent 1px 7px
  );
}

.pr-notation__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--f-en);
  font-size: 11px;
  font-style: italic;
  line-height: 1;
}

@media (max-width: 600px) {
  .pr-notation {
    margin-bottom: 24px;
    padding: 10px 14px;
    font-size: 11.5px;
  }
}

/* 外部リンク：行き先のドメインを小さく添える */
.n-extlink__host {
  flex: none;
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--c-text-sub);
  text-decoration: none;
}

.n-extlink__host::before {
  content: "—";
  margin-right: 6px;
  opacity: .5;
}

/* 動画の下に出す出典表記（アイキャッチの figcaption と同じ体裁）*/
.entry-thumb__caption {
  margin: -28px 0 40px;
  font-size: 12px;
  color: var(--c-text-sub);
  text-align: center;
}