/* =====================================================================
   お知らせ・メールマガジン・記事・個人情報の取り扱い
   1. 年の絞り込み  2. 年ごとの一覧(左に年)  3. お知らせの行  4. メールマガジン
   5. 記事(見出し帯と記事の情報の札・右の列の目次と窓口・本文の文字組み・メール本文の小見出し/項目の一覧/箇条書き/リンクの一覧・
      紹介している製品・同じ種類の記事・図の拡大・動画・前後の記事)  6. 関連リンク  7. 個人情報の取り扱い
   8. 一覧の見出し帯の装飾(メルマガの最新号の画像・サポートの受付状況・お知らせのタイムライン)
   色はトークンだけを使う(赤は --signal = REC の印と、--signal-strong = 「重要」の印の2色だけ)
   ===================================================================== */

/* 1. 年の絞り込み ---------------------------------------------------- */
/* 年・種類・件数はそれぞれ1行を占める(Webフォントの読み込みで年のボタンの幅が変わっても、件数が次の行へ落ちて下が動かないように) */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.filterbar > .yearnav { flex-basis: 100%; }
.yearnav__list { display: flex; flex-wrap: wrap; gap: 8px; }
.yearnav__link { font-family: var(--font-head); font-feature-settings: "palt";   display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px 8px 18px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink); letter-spacing: var(--track-head);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.yearnav__y { display: inline-flex; align-items: baseline; gap: 1px; }
.yearnav__link .num-font { font-size: 1rem; font-weight: 700; letter-spacing: var(--track-body); }
.yearnav__link:hover { border-color: var(--navy); }
.yearnav__link[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }
.yearnav__link[aria-current] .count { background: rgba(255, 255, 255, .16); color: #fff; }
/* 種類を選んでいる時に、その種類のお知らせが無い年(種類のリンクの0件と同じく薄く。押すと全期間のその種類へ) */
.yearnav__link.is-empty:not([aria-current]) { border-style: dashed; color: var(--muted); font-weight: 400; font-family: var(--font-ja); }
.yearnav__link.is-empty:not([aria-current]) .num-font { font-weight: 600; }
.yearnav__link.is-empty:not([aria-current]) .count { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); }
@media (max-width: 599px) {
  .yearnav, .yearnav__list { width: 100%; }
  .yearnav__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .yearnav__link { width: 100%; justify-content: space-between; gap: 6px; padding: 8px 8px 8px 12px; }
}
/* 種類の絞り込み(下線のタブ。年の絞り込みのボタンと役割が違うので形を変える) */
.typenav { flex-basis: 100%; order: 3; }
.typenav__list { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--line); }
.typenav__link {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px;
  font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); letter-spacing: var(--track-head);
}
.typenav__link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .typenav__link:hover { color: var(--ink); } }
.typenav__link[aria-current] { color: var(--blue); }
.typenav__link[aria-current]::after { transform: scaleX(1); }
/* 種類ごとの件数(選んでいる年)。この年に無い種類は薄く(押すと全期間のその種類へ) */
.typenav__link .count { min-width: 22px; height: 20px; padding: 0 6px; }
.typenav__link[aria-current] .count { background: var(--blue); color: #fff; }
.typenav__link.is-empty:not([aria-current]) { color: var(--muted); font-weight: 400; font-family: var(--font-ja); }
.typenav__link.is-empty:not([aria-current]) .count { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); }
@media (max-width: 599px) { .typenav__link { gap: 6px; padding-inline: 10px; font-size: .875rem; } }
/* 年×種類で0件の時の次の行き先 */
.news-empty { display: grid; gap: 16px; justify-items: start; }
.news-empty > p { color: var(--ink-2); }
.news-empty__links { display: flex; flex-wrap: wrap; gap: 8px 32px; }

/* 重要なお知らせ(一覧の先頭に固定)。淡いグレーの面+左の線(--line-strong)。赤は「重要」の印だけ(--signal-strong) */
.pinned { margin-bottom: clamp(36px, 4vw, 56px); padding: 20px clamp(16px, 2.4vw, 28px) 4px; border-radius: var(--radius-lg); background: var(--surface-2); }
.pinned__title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink); letter-spacing: var(--track-head); }
.pinned__title .icon { width: 18px; height: 18px; color: var(--signal-strong); }
.nlist--pin { border-top: 0; }
.nlist--pin .nitem { border-bottom: 0; }
.nitem--pin .nitem__md { font-size: 1rem; }
/* 「重要」の印(--signal-strong の地に白い文字。5.2:1) */
.nitem__important, .art-head__important { padding: 1px 8px; border-radius: var(--radius); background: var(--signal-strong); color: #fff; font-family: var(--font-head); font-feature-settings: "palt"; font-size: .75rem; font-weight: 700; line-height: 1.6; letter-spacing: var(--track-head); }
.nitem__ended { padding: 1px 8px; border-radius: var(--radius); background: var(--surface-3); color: var(--ink-2); font-family: var(--font-head); font-feature-settings: "palt"; font-size: .75rem; font-weight: 700; line-height: 1.6; letter-spacing: var(--track-head); }
.filterbar__count { order: 4; flex-basis: 100%; margin-top: -4px; font-size: var(--fs-sm); color: var(--muted); letter-spacing: var(--track-head); }
.filterbar__count .num-font { color: var(--ink); font-weight: 700; }

/* 2. 年ごとの一覧(広い画面では年を左に固定) -------------------------- */
.yrail { display: grid; }
.yrail + .yrail { margin-top: clamp(48px, 5vw, 80px); }
.yrail__label {
  display: flex; align-items: baseline; gap: 6px; padding-bottom: 14px; border-bottom: 2px solid var(--navy);
  color: var(--navy); line-height: 1; letter-spacing: 0;
}
.yrail__num { font-family: var(--font-en); font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.yrail__unit { font-size: var(--fs-sm); }
.yrail__count { margin-left: auto; font-family: var(--font-ja); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); letter-spacing: var(--track-head); }
@media (min-width: 1024px) {
  .yrail { grid-template-columns: 208px minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .yrail__label {
    position: sticky; top: calc(var(--header-h) + 32px); flex-wrap: wrap; row-gap: 14px;
    padding: 22px 0 0; border-bottom: 0; border-top: 2px solid var(--navy);
  }
  .yrail__count { flex-basis: 100%; margin-left: 0; }
  .admin-bar .yrail__label { top: calc(var(--header-h) + 32px + var(--wp-admin--admin-bar--height, 32px)); }
  .route-magazine .yrail__label { top: calc(var(--header-h) + 56px + 32px); }
  .admin-bar.route-magazine .yrail__label { top: calc(var(--header-h) + 56px + 32px + var(--wp-admin--admin-bar--height, 32px)); }
}

/* 3. お知らせの行(行全体がリンク。リンクの名前は件名だけ) -------------- */
.nlist, .mlist { border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .yrail .nlist, .yrail .mlist { border-top-color: var(--line-2); } }
.nitem, .mitem {
  position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr) 24px; column-gap: 24px; align-items: start;
  padding: 26px 12px 26px 8px; border-bottom: 1px solid var(--line); transition: background-color var(--dur-1) var(--ease);
}
.nitem__date, .mitem__date { display: grid; gap: 4px; padding-top: 3px; font-family: var(--font-en); font-variant-numeric: tabular-nums; }
.nitem__md, .mitem__md { font-size: 1.25rem; font-weight: 600; line-height: 1.1; letter-spacing: var(--track-body); color: var(--navy); }
.nitem__wd, .mitem__wd { font-size: .75rem; font-weight: 700; letter-spacing: var(--track-label); color: var(--muted); }
.nitem__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.nitem__cat { font-family: var(--font-head); font-feature-settings: "palt"; padding: 1px 8px; border: 1px solid currentColor; border-radius: var(--radius); font-size: .75rem; font-weight: 700; line-height: 1.6; letter-spacing: var(--track-head); color: var(--blue); }
.nitem__new { padding: 1px 7px; border-radius: var(--radius); background: var(--blue); color: #fff; font-family: var(--font-en); font-size: .75rem; font-weight: 800; line-height: 1.6; letter-spacing: var(--track-label); }
.nitem__title, .mitem__title { font-size: var(--fs-md); line-height: 1.7; letter-spacing: var(--track-head); transition: color var(--dur-1) var(--ease); }
.nitem__link::after, .mitem__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.nitem__link:focus-visible, .mitem__link:focus-visible { outline: none; }
.nitem:has(:focus-visible), .mitem:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.nitem__excerpt {
  margin-top: 8px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nitem__arrow, .mitem__arrow { align-self: center; color: var(--blue); transition: transform var(--dur-2) var(--ease-out); }
.nitem__arrow .icon, .mitem__arrow .icon { width: 20px; height: 20px; }
.nitem .vf--card, .mitem .vf--card { inset: 8px; --vf-s: 12px; }
.nitem:hover, .mitem:hover { background: var(--surface-2); }
.nitem:hover :is(.nitem__title), .mitem:hover .mitem__title { color: var(--blue); }
.nitem:hover .nitem__arrow, .mitem:hover .mitem__arrow { transform: translateX(4px); }
.nitem:is(:hover, :focus-within) .vf--card { opacity: 1; }
.nitem:is(:hover, :focus-within) .vf--card i { transform: none; }
@media (min-width: 1024px) { .nitem__excerpt { -webkit-line-clamp: 1; } }
@media (max-width: 599px) {
  .nitem, .mitem { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding: 22px 4px; }
  .nitem__arrow, .mitem__arrow { display: none; }
  .nitem__md, .mitem__md { font-size: 1.0625rem; }
}

/* 4. メールマガジン ---------------------------------------------------- */
.route-magazine .subnav__link { gap: 2px; }
.subnav__year { font-family: var(--font-en); font-size: 1rem; font-weight: 700; letter-spacing: var(--track-body); color: inherit; }
.route-magazine .subnav__num {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: var(--radius);
  background: var(--surface-3); color: var(--ink-2); font-size: .75rem; letter-spacing: 0;
}
.route-magazine .subnav__link[aria-current] .subnav__num { background: var(--blue); color: #fff; }
/* 狭い画面: 「2026年」を1行に、件数は右肩の小さなバッジにして、目次の高さを抑える(約52px) */
@media (max-width: 599px) {
  .route-magazine.has-subnav { --subnav-h: 53px; }
  .route-magazine .subnav__link { flex-direction: row; align-items: center; min-height: 52px; padding: 0 2px; white-space: nowrap; font-size: .875rem; }
  .route-magazine .subnav__num { min-width: 18px; height: 18px; margin-left: 3px; padding: 0 4px; transform: translateY(-7px); }
}

.mag-top { display: grid; gap: 16px; margin-bottom: clamp(56px, 6vw, 96px); }
@media (min-width: 1024px) { .mag-top { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; } }
.mag-latest {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; gap: 12px; min-height: 320px;
  padding: clamp(28px, 4vw, 52px); padding-top: 88px; border-radius: var(--radius-lg); color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #123f73 0%, #0a2647 45%, var(--navy-deep) 82%);
}
.mag-latest::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(124, 200, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 200, 255, .07) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 90% 90% at 80% 20%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 90% 90% at 80% 20%, #000 15%, transparent 75%);
}
.mag-latest .vf { inset: 16px; }
.mag-latest__rec { position: absolute; top: 32px; left: clamp(28px, 4vw, 52px); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--on-dark-2); }
.mag-latest__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
/* 点滅は3回で止める(止める操作が無いページで動き続けないように) */
@media (prefers-reduced-motion: no-preference) { .mag-latest__rec i { animation: blink 1.6s steps(1) 3; } }
.mag-latest__date { font-family: var(--font-en); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--track-label); color: var(--sky); font-variant-numeric: tabular-nums; }
.mag-latest__title { max-width: 24em; word-break: auto-phrase; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-h3); font-weight: 700; line-height: 1.55; letter-spacing: var(--track-head); text-wrap: balance; }
.mag-latest__excerpt { max-width: 40em; font-size: var(--fs-sm); line-height: 1.9; color: var(--on-dark-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag-latest__more { font-family: var(--font-head); font-feature-settings: "palt"; display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); }
.mag-latest__more .icon { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.mag-latest:hover .mag-latest__more .icon { transform: translateX(4px); }
.mag-latest:focus-visible { outline-color: var(--blue); outline-offset: 4px; }

.mag-side { display: grid; gap: 20px; align-content: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--surface-2); }
.mag-search__label { font-family: var(--font-head); font-feature-settings: "palt"; display: block; margin-bottom: 10px; font-size: var(--fs-sm); font-weight: 700; }
.mag-search__field { position: relative; }
.mag-search__field .icon { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
/* 入力欄の枠は入力欄の共通の色(--line-strong。白地・淡いグレーの面に 3:1 以上)。キーボードのフォーカスはサイト共通の 2px の枠 */
.mag-search input {
  width: 100%; min-height: 52px; padding: 12px 16px 12px 44px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.6;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.mag-search input::placeholder { color: var(--muted); opacity: 1; }
.mag-search input:focus { border-color: var(--blue); }
.mag-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mag-search__count { margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.mag-side__about { display: flex; gap: 10px; font-size: var(--fs-sm); line-height: 1.85; color: var(--ink-2); }
.mag-search:not([hidden]) + .mag-side__about { padding-top: 20px; border-top: 1px solid var(--line); }
.mag-side__about .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--blue); }
.mitem { padding-block: 20px; }
.mag-empty { padding: 40px 0; color: var(--muted); text-align: center; }
.mitem__title { font-weight: 700; }

/* 年ごとの「配信した月」(録画機の再生画面の録画カレンダーの見立て。templates/magazine.php)。
   配信のあった月を灯し(1号 = 淡い青、2号以上 = 青)、最新号の月に REC の赤い点。灯った月はその月の最初の号の行へのリンク(高さ 44px)。
   配信の無い月は押せない文字だけ(枠も塗りも無し)。号の行にマウス・フォーカスを置くと、その月を枠で示す。
   1024px以上は左の年の欄に 6列×2段で置き、年の見出しと一緒に固定する。600〜1023px は年の見出しの下に 12列×1段、599px以下は 6列×2段 */
.yrail__side { display: grid; align-content: start; min-width: 0; }
.mag-cal { position: relative; display: grid; gap: 8px; margin: 14px 0 18px; padding: 12px; }
.mag-cal .vf { inset: 0; --vf-c: rgba(0, 104, 196, .5); --vf-s: 10px; }
.js .mag-cal[data-reveal="focus"]:not(.is-in) .vf i:nth-child(1) { transform: translate(-8px, -8px); }
.js .mag-cal[data-reveal="focus"]:not(.is-in) .vf i:nth-child(2) { transform: translate(8px, -8px); }
.js .mag-cal[data-reveal="focus"]:not(.is-in) .vf i:nth-child(3) { transform: translate(-8px, 8px); }
.js .mag-cal[data-reveal="focus"]:not(.is-in) .vf i:nth-child(4) { transform: translate(8px, 8px); }
.mag-cal__cap { font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); letter-spacing: var(--track-body); }
.mag-cal__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.mag-cal__m {
  position: relative; display: grid; place-items: center; height: 44px; border-radius: var(--radius);
  font-family: var(--font-en); font-size: .75rem; font-weight: 600; letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums;
  transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease);
}
a.mag-cal__m { font-size: .875rem; font-weight: 700; }
.mag-cal__m.is-n1 { background: var(--blue-tint); color: var(--navy); }
.mag-cal__m.is-n2 { background: var(--blue); color: #fff; }
.mag-cal__m.is-latest::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 1.5px #fff; }
a.mag-cal__m:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { a.mag-cal__m:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); } }
a.mag-cal__m:active { transform: scale(.96); }
@media (min-width: 600px) and (max-width: 1023px) {
  .mag-cal { max-width: 640px; }
  .mag-cal__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mag-year { grid-template-columns: clamp(248px, 21.4vw, 308px) minmax(0, 1fr); }
  .mag-cal { margin: 22px 0 0; }
  /* 年の見出しと「配信した月」・見本をまとめて固定する(年の見出しだけを固定する一覧の決まりは、お知らせ一覧のまま) */
  .mag-year .yrail__side { position: sticky; top: calc(var(--header-h) + 56px + 32px); }
  .admin-bar .mag-year .yrail__side { top: calc(var(--header-h) + 56px + 32px + var(--wp-admin--admin-bar--height, 32px)); }
  .mag-year .yrail__label { position: static; }
}
/* 号の行 ↔ 月: マウスを乗せた行・フォーカスのある行の月を枠で示す */
.mag-year:has(.mitem[data-m="01"]:is(:hover, :focus-within)) .mag-cal__m[data-m="01"],
.mag-year:has(.mitem[data-m="02"]:is(:hover, :focus-within)) .mag-cal__m[data-m="02"],
.mag-year:has(.mitem[data-m="03"]:is(:hover, :focus-within)) .mag-cal__m[data-m="03"],
.mag-year:has(.mitem[data-m="04"]:is(:hover, :focus-within)) .mag-cal__m[data-m="04"],
.mag-year:has(.mitem[data-m="05"]:is(:hover, :focus-within)) .mag-cal__m[data-m="05"],
.mag-year:has(.mitem[data-m="06"]:is(:hover, :focus-within)) .mag-cal__m[data-m="06"],
.mag-year:has(.mitem[data-m="07"]:is(:hover, :focus-within)) .mag-cal__m[data-m="07"],
.mag-year:has(.mitem[data-m="08"]:is(:hover, :focus-within)) .mag-cal__m[data-m="08"],
.mag-year:has(.mitem[data-m="09"]:is(:hover, :focus-within)) .mag-cal__m[data-m="09"],
.mag-year:has(.mitem[data-m="10"]:is(:hover, :focus-within)) .mag-cal__m[data-m="10"],
.mag-year:has(.mitem[data-m="11"]:is(:hover, :focus-within)) .mag-cal__m[data-m="11"],
.mag-year:has(.mitem[data-m="12"]:is(:hover, :focus-within)) .mag-cal__m[data-m="12"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); transform: scale(1.08); z-index: 1; }
/* 件名で探している間は、見つかった号の無い月を灯さない(リンクも外す。articles.js) */
.mag-year:not(:has(.mitem[data-m="01"]:not([hidden]))) .mag-cal__m[data-m="01"],
.mag-year:not(:has(.mitem[data-m="02"]:not([hidden]))) .mag-cal__m[data-m="02"],
.mag-year:not(:has(.mitem[data-m="03"]:not([hidden]))) .mag-cal__m[data-m="03"],
.mag-year:not(:has(.mitem[data-m="04"]:not([hidden]))) .mag-cal__m[data-m="04"],
.mag-year:not(:has(.mitem[data-m="05"]:not([hidden]))) .mag-cal__m[data-m="05"],
.mag-year:not(:has(.mitem[data-m="06"]:not([hidden]))) .mag-cal__m[data-m="06"],
.mag-year:not(:has(.mitem[data-m="07"]:not([hidden]))) .mag-cal__m[data-m="07"],
.mag-year:not(:has(.mitem[data-m="08"]:not([hidden]))) .mag-cal__m[data-m="08"],
.mag-year:not(:has(.mitem[data-m="09"]:not([hidden]))) .mag-cal__m[data-m="09"],
.mag-year:not(:has(.mitem[data-m="10"]:not([hidden]))) .mag-cal__m[data-m="10"],
.mag-year:not(:has(.mitem[data-m="11"]:not([hidden]))) .mag-cal__m[data-m="11"],
.mag-year:not(:has(.mitem[data-m="12"]:not([hidden]))) .mag-cal__m[data-m="12"] { background: transparent; box-shadow: none; color: var(--muted); font-size: .75rem; font-weight: 600; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .mag-cal__m { transition: none; } }
/* 月のリンクで移った号の行は、少しの間だけ淡い青の面で示す */
.mitem:target { background: var(--blue-tint); }
@media (prefers-reduced-motion: no-preference) { .mitem:target { animation: mitem-target 2.4s var(--ease) both; } }
@keyframes mitem-target { 0%, 40% { background-color: var(--blue-tint); } 100% { background-color: transparent; } }

/* 号ごとの絵(templates/magazine.php。本文の最初の画像の WebP の版)。装飾なので読み上げない。
   1024px以上: 年の欄の「配信した月」の下に、録画の再生画面に見立てた 16:9 の見本(列の幅いっぱい。上の帯に IPS MAIL の札と配信日。画像の文字と重ねない)。
   号の行にマウス・フォーカスを置くと、その号の絵に替わる(articles.js。読み込んでいる間は前の絵のまま)。
   1023px以下: 号の行の左に 96×54 の絵。画像の無い号は濃紺の面に IPS MAIL の札。横長のバナー・縦長の画像は切り抜かずに濃紺の面に収める(is-contain) */
.mag-shot, .mitem__thumb { display: none; }
.mag-shot { position: relative; margin-top: 16px; overflow: hidden; border-radius: var(--radius); background: var(--navy-deep); }
.mag-shot__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 6px 12px; border-bottom: 1px solid var(--line-dark); }
.mag-shot__tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-en); font-size: .75rem; font-weight: 700; line-height: 1.4; letter-spacing: var(--track-label); color: #fff; }
.mag-shot__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
.mag-shot__time { font-family: var(--font-en); font-size: .75rem; font-weight: 600; line-height: 1.4; letter-spacing: var(--track-body); color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.mag-shot__frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-deep); }
.mag-shot__frame picture, .mitem__thumb picture { display: contents; }
.mag-shot__img, .mitem__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mag-shot.is-contain .mag-shot__img, .mitem__thumb.is-contain .mitem__img { object-fit: contain; }
.mag-shot.is-contain .mag-shot__img { padding: 8px; }
.mag-shot.is-blank .mag-shot__img { visibility: hidden; }
/* 画像の無い号: 濃紺の面の格子 */
.mag-shot.is-blank .mag-shot__frame::after, .mitem__thumb.is-blank::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(124, 200, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 200, 255, .08) 1px, transparent 1px); background-size: 16px 16px;
}
.mag-shot .vf { inset: 6px; z-index: 1; --vf-c: rgba(124, 200, 255, .75); --vf-s: 10px; }
.mag-shot.is-blank .mag-shot__frame::before { content: "IPS MAIL"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-en); font-size: .75rem; font-weight: 700; letter-spacing: var(--track-label); color: var(--on-dark-2); }
@media (min-width: 1024px) {
  .mag-shot { display: block; }
}
@media (max-width: 1023px) {
  .mitem__thumb { position: relative; display: block; grid-area: thumb; align-self: start; width: 96px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--navy-deep); }
  .mitem__thumb.is-blank { display: grid; place-items: center; }
  .mitem__mail { position: relative; z-index: 1; font-family: var(--font-en); font-size: .75rem; font-weight: 700; line-height: 1; letter-spacing: .08em; color: #fff; }
  .mitem { grid-template-columns: 96px 74px minmax(0, 1fr) 24px; grid-template-areas: "thumb date title arrow"; column-gap: 20px; }
  .mitem__date { grid-area: date; }
  .mitem__title { grid-area: title; }
  .mitem__arrow { grid-area: arrow; }
}
/* スマホ: 絵の右に、配信日(1行)と件名を縦に並べる */
@media (max-width: 599px) {
  .mitem { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "thumb date" "thumb title"; column-gap: 14px; row-gap: 4px; padding: 18px 4px; }
  .mitem__date { display: flex; align-items: baseline; gap: 8px; padding-top: 0; }
  .mitem__md { font-size: 1rem; }
  .mitem__title { line-height: 1.6; }
}
/* 360px未満: 件名の列を広く残すため、絵を 72×40 に */
@media (max-width: 359px) {
  .mitem { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; }
  .mitem__thumb { width: 72px; }
  .mitem__mail { font-size: .75rem; letter-spacing: 0; }
}

/* 5. 記事 -------------------------------------------------------------- */
/* 1199px以下: 見出し帯と本文を中央の1列(17px × 約40字 ≒ 700px)にそろえる */
.art__wrap { width: min(700px, 100% - var(--gutter) * 2); margin-inline: auto; }
.art-head { padding-bottom: clamp(48px, 5vw, 84px); }
.art-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: clamp(28px, 3.6vw, 52px); }
/* 札(重要・種類・終了)はまとめて1つの組。599px以下は日付の下の行に札だけを並べる(札が1つだけ次の行に落ちないように) */
.art-head__chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
@media (max-width: 599px) { .art-head__meta { display: grid; justify-items: start; row-gap: 12px; } }
.art-head__stamp { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--track-label); color: #fff; font-variant-numeric: tabular-nums; }
.art-head__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.art-head__wd { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--on-dark-3); }
.art-head__cat, .art-head__ended { font-family: var(--font-head); font-feature-settings: "palt"; padding: 2px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-head); color: var(--on-dark-2); }
.art-head__ended { border-color: transparent; background: rgba(255, 255, 255, .12); color: #fff; }
/* 4行以内の見出しは行の長さをそろえる(1字だけの行を作らない)。
   大きさは 1200px以上で 36px(段の値)、狭い画面ほど小さく、599px以下は 26px(段の値)。「（Power over Coaxial）」のような長い英語のまとまりも1行に収まる */
.art-head .masthead__title--article { margin-top: 18px; font-size: clamp(1.625rem, 1rem + 1.8vw, 2.25rem); line-height: 1.5; text-wrap: balance; word-break: auto-phrase; }
@media (max-width: 599px) { .art-head .masthead__title--article { font-size: 1.625rem; } }
/* 359px以下(320px など): 11字の文節(「東京展示会ご来場御礼！」)も1行に収まる大きさに */
@media (max-width: 359px) { .art-head .masthead__title--article { font-size: 1.5rem; } }

/* 記事の情報の札(見出し帯の右。1200px以上)。サポートの受付状況の札と同じ面・ファインダーの枠。
   1199px以下は見出しの下に1段の帯(種類のアイコンと英字・読み終えるまで・図版などの数)にする(高さ約60〜90px) */
.art-rail { display: none; }
.art-card {
  position: relative; display: grid; align-content: start; gap: 18px; padding: 26px 28px 24px;
  border-radius: var(--radius-lg); background: rgba(6, 21, 39, .5); box-shadow: inset 0 0 0 1px rgba(124, 200, 255, .2); color: #fff;
}
.art-card .vf { inset: 10px; --vf-c: rgba(124, 200, 255, .55); --vf-s: 14px; }
.art-card__head { display: flex; align-items: center; gap: 16px; }
.art-card__icon { flex-shrink: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(124, 200, 255, .12); color: var(--sky); }
.art-card__icon .icon { width: 28px; height: 28px; }
.art-card__kind { display: grid; gap: 2px; min-width: 0; }
.art-card__en { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--sky); }
.art-card__ja { font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--track-head); color: #fff; }
.art-card__facts { display: grid; border-top: 1px solid var(--line-dark); }
.art-card__facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-dark); }
.art-card__facts dt { font-size: var(--fs-sm); color: var(--on-dark-2); }
.art-card__facts dd { font-size: var(--fs-sm); color: var(--on-dark-2); white-space: nowrap; }
.art-card__facts .num-font { margin-inline: 2px; font-size: 1.25rem; font-weight: 600; color: #fff; }
@media (max-width: 1199px) {
  .art-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 24px; padding: 10px 16px 10px 10px; }
  .art-card .vf { display: none; }
  /* 種類の和名は英字と同じ意味なので見た目では省き、読み上げには残す */
  .art-card__ja { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .art-card__head { gap: 10px; }
  .art-card__icon { width: 36px; height: 36px; }
  .art-card__icon .icon { width: 18px; height: 18px; }
  .art-card__facts { display: flex; flex-wrap: wrap; gap: 2px 16px; border: 0; }
  .art-card__facts div { justify-content: flex-start; gap: 6px; padding: 0; border: 0; }
  .art-card__facts dt, .art-card__facts dd { font-size: var(--fs-xs); }
  .art-card__facts .num-font { font-size: var(--fs-md); }
  /* 事実が3項目以下の札: アイコンを外して「EVENT　読み終えるまで 約3分　図版 1点」の1行に(高さを抑える) */
  .art-card--compact { gap: 4px 14px; padding: 10px 16px; }
  .art-card--compact .art-card__icon { display: none; }
  .art-card--compact .art-card__facts { column-gap: 14px; }
}

.art__main { padding-block: clamp(48px, 5.5vw, 88px) clamp(64px, 7vw, 112px); }

/* 1200px以上: ほかのページと同じ .wrap の左端に、見出し帯と本文の左の列をそろえる(右の列は記事の情報・目次・窓口) */
@media (min-width: 1200px) {
  .art__wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); }
  .art-head__inner, .art__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: clamp(64px, 7vw, 120px); }
  .art-head__inner > .crumbs { grid-column: 1 / -1; }
  .art-head__main { grid-column: 1; align-self: end; max-width: 820px; }
  .art-card { display: grid; grid-column: 2; align-self: end; }
  .art__col { grid-column: 1; min-width: 0; max-width: 720px; }
  .art-rail {
    display: grid; align-content: start; gap: 16px; grid-column: 2; align-self: start;
    position: sticky; top: calc(var(--header-h) + 32px); max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto; overscroll-behavior: contain;
  }
  .admin-bar .art-rail { top: calc(var(--header-h) + 32px + var(--wp-admin--admin-bar--height, 32px)); }
  .art-mtoc { display: none; }
}

/* 右の列の目次・窓口 */
.art-rail__title { display: grid; gap: 2px; margin-bottom: 10px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); color: var(--ink); }
.art-rail__title [lang="en"] { font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: var(--track-label); color: var(--blue); }
.art-toc, .art-desk { padding: 20px 20px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.art-toc__list { display: grid; }
.art-toc__list a {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 8px 6px 8px 10px; min-height: 40px;
  border-radius: var(--radius); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.art-toc__list a::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: transparent; transition: background-color var(--dur-1) var(--ease); }
.art-toc__no { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-body); color: var(--blue); }
.art-toc__list a[aria-current] { color: var(--ink); background: var(--surface-2); font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; }
.art-toc__list a[aria-current]::before { background: var(--blue); }
@media (hover: hover) and (pointer: fine) { .art-toc__list a:hover { color: var(--blue); } }
.art-desk__tel { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-en); font-size: 1.625rem; font-weight: 700; letter-spacing: var(--track-body); color: var(--navy); }
.art-desk__tel:hover { color: var(--blue); }
.art-desk__hours, .art-desk__text { font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-2); }
.art-desk__link { margin-top: 12px; }
.art-kinds ul { display: grid; border-top: 1px solid var(--line); }
.art-kinds a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.art-kinds li:last-child a { border-bottom: 0; }
.art-kinds a .icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--blue); transition: transform var(--dur-2) var(--ease-out); }
.art-kinds a.is-current { color: var(--ink); font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .art-kinds a:hover { color: var(--blue); } .art-kinds a:hover .icon { transform: translateX(3px); } }

/* 1199px以下: 本文の前の開閉する目次 */
.art-mtoc { margin-bottom: 36px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.art-mtoc__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 18px; cursor: pointer; list-style: none; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); }
.art-mtoc__summary::-webkit-details-marker { display: none; }
.art-mtoc__summary > span { display: inline-flex; align-items: center; gap: 10px; }
.art-mtoc__summary .icon { width: 20px; height: 20px; color: var(--blue); transition: transform var(--dur-2) var(--ease-out); }
.art-mtoc[open] .art-mtoc__summary > .icon { transform: rotate(180deg); }
.art-toc--m { padding: 4px 12px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.art-toc--m .art-toc__list a { min-height: 44px; }

/* 本文の文字組み: 17px・行間2・段落の間は1.1行。見出しの上は広く、見出しのすぐ後は詰める(どこからが新しい話かを見て分かるように) */
.art__body { font-size: 1.0625rem; line-height: 2; }
.art__body > :first-child { margin-top: 0; }
.art__body > * + * { margin-top: 1.1em; }
.art__body > h2 { margin-top: 2.6em; }
.art__body > h3, .art__body > .rich-kicker { margin-top: 2.2em; }
.art__body > :is(h2, h3, h4) + * { margin-top: .8em; }
/* 本文の後半をまとめた要素(inc/articles.php の ips_site_cv_split)。画面に近づくまで配置の計算をしない。
   推定の高さは見積もり(--cv-s / --cv-l)で、一度描画した後は実際の高さを使う(auto)。
   中の要素の間隔は、本文の直下にある時と同じにする(まとめた要素そのものは上の余白なし。中の最初の要素が前の要素との間隔を持つ) */
.art-cv { content-visibility: auto; contain-intrinsic-size: auto var(--cv-s, 1600px); overflow-clip-margin: 8px; }
@media (min-width: 600px) { .art-cv { contain-intrinsic-size: auto var(--cv-l, 1200px); } }
.art__body > .art-cv { margin-top: 0; }
/* 本文の下の、紹介している製品・同じ種類の記事と、前後の記事+問い合わせ導線(.art-after)も、画面に近づくまで配置の計算をしない(ページ内リンクの移り先が無い部分) */
.art-prods { content-visibility: auto; contain-intrinsic-size: auto 560px; overflow-clip-margin: 8px; }
.art-related { content-visibility: auto; contain-intrinsic-size: auto 400px; overflow-clip-margin: 8px; }
.art-after { content-visibility: auto; contain-intrinsic-size: auto 1200px; overflow-clip-margin: 8px; }
@media (min-width: 900px) { .art-prods { contain-intrinsic-size: auto 480px; } .art-related { contain-intrinsic-size: auto 340px; } .art-after { contain-intrinsic-size: auto 1000px; } }
.art-cv > * { margin-top: 1.1em; }
.art-cv > h2 { margin-top: 2.6em; }
.art-cv > h3, .art-cv > .rich-kicker { margin-top: 2.2em; }
.art-cv > :is(h2, h3, h4) + * { margin-top: .8em; }
.art__body h2 { line-height: 1.55; }
.art__body :is(h2, h3, h4) { text-wrap: balance; }
.art__body :is(h2, h3, h4) { scroll-margin-top: calc(var(--header-h) + 24px); }
.art__note { display: flex; gap: 10px; margin-top: 56px; padding: 16px 20px; border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.85; color: var(--ink-2); }
.art__note .icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; color: var(--blue); }

/* メール本文の「【…】」「■…」だけの段落から作った小見出し(青い四角の印) */
.rich .rich-label { display: flex; align-items: baseline; gap: 10px; margin-top: 2em; padding: 0; border: 0; font-size: var(--fs-md); line-height: 1.7; letter-spacing: var(--track-head); color: var(--ink); }
.rich .rich-label::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; background: var(--blue); transform: translateY(-.15em); }
/* 本文の見出しの先頭の飾り・番号・ラベル(inc/articles.php の ips_site_heading_marks):
   「■ 見出し」の h2 は小見出しと同じ青い四角、「1. 見出し」は番号を目次の番号と同じ英字の数字(青)に、先頭の【ラベル】は小さな札に */
.rich h2.rich-h-mark { display: flex; align-items: baseline; gap: 12px; }
.rich h2.rich-h-mark::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; background: var(--blue); transform: translateY(-.2em); }
.rich :is(h2, h3, h4).has-num { display: flex; align-items: baseline; gap: .6em; }
.rich-h-num { flex-shrink: 0; font-family: var(--font-en); font-size: .7em; font-weight: 700; letter-spacing: var(--track-body); color: var(--blue); font-variant-numeric: tabular-nums; }
.rich-h-text { min-width: 0; }
.rich-h-tag {
  display: inline-block; margin-right: .5em; padding: 0 8px; border: 1px solid var(--blue); border-radius: var(--radius); background: #fff;
  font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; line-height: 1.7; letter-spacing: var(--track-head); color: var(--blue);
  vertical-align: .2em; white-space: nowrap;
}
/* 箇条書きの中の【…】だけの項目(「アクセス」の後に行き方が並ぶ)は、印の無い項目の見出し */
.rich .rich-li-label { list-style: none; font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; letter-spacing: var(--track-head); color: var(--ink); }
.rich li + .rich-li-label { margin-top: .8em; }
.art__body > .rich-label + *, .art-cv > .rich-label + * { margin-top: .6em; }
/* 「■項目名」と内容の一覧(休業期間・最終出荷日・仕様など) */
.rich .rich-dl { border-top: 1px solid var(--line-2); }
.rich .rich-dl > div { display: grid; gap: 2px 24px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.rich .rich-dl dt { font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; letter-spacing: var(--track-head); color: var(--ink); line-height: 1.8; }
.rich .rich-dl dd { color: var(--ink-2); line-height: 1.9; }
@media (min-width: 600px) { .rich .rich-dl > div { grid-template-columns: minmax(0, 11em) minmax(0, 1fr); } }
/* 「・」の箇条書き(折り返した行を印の後ろにそろえる) */
.rich .rich-dots { padding-left: 0; list-style: none; }
.rich .rich-dots li { position: relative; padding-left: 1.2em; }
.rich .rich-dots li::before { content: ""; position: absolute; left: .2em; top: .9em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
/* 「【1】…【2】…」の行から作った番号付きの箇条書き(番号は目次と同じ英字の数字) */
.rich .rich-num { padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rich .rich-num li { position: relative; margin: 0; padding: 10px 4px 10px 2.6em; border-bottom: 1px solid var(--line); line-height: 1.8; }
.rich .rich-num li::before { content: counter(list-item, decimal-leading-zero); position: absolute; left: 4px; top: 10px; font-family: var(--font-en); font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-body); color: var(--blue); line-height: calc(1.0625rem * 1.8); }
.rich .rich-num li + li { margin-top: 0; }
/* 「✔ …」の行から作ったチェックの箇条書き(印は線のチェックのアイコン) */
.rich .rich-checks { padding: 0; list-style: none; }
.rich .rich-checks li { display: flex; align-items: flex-start; gap: 10px; }
.rich .rich-checks li + li { margin-top: .3em; }
.rich .rich-checks .icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: .45em; color: var(--blue); }
/* 旧メールの固定の改行: 文の途中の改行(br.br-wide)は 899px以下では外す。残した改行で区切った行のまとまりは、最後の行が短くならないように組む */
.art__body .rich-line { display: block; text-wrap: pretty; }
/* まとまりの末尾の数文字は折り返さない(「ます。」だけの行を作らない。inc/articles.php の ips_site_glue_end) */
/* 段落・短い本文の末尾の数文字(ips_site_glue_end・ips_site_tech_glue)は途中で折り返さない */
.nb-end { white-space: nowrap; }
.art__body .rich-line--gap { height: 2em; }
.art__body :is(p, li) { text-wrap: pretty; }
@media (max-width: 899px) { .art__body br.br-wide { display: none; } }

/* 旧メールの末尾の定型(配信当時の発行元・連絡先)。閉じた状態の折りたたみで、開いた中身は 14px の控えめな組み方 */
.art__body .art-legacy { margin-top: 3em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.art-legacy__summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 56px; padding: 10px 4px;
  cursor: pointer; list-style: none; color: var(--ink-2);
}
.art-legacy__summary::-webkit-details-marker { display: none; }
.art-legacy__label { font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); line-height: 1.6; }
.art-legacy__desc { grid-row: 2; font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); }
.art-legacy__icon { grid-row: 1 / span 2; grid-column: 2; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--blue); }
.art-legacy__icon .icon { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.art-legacy[open] .art-legacy__icon .icon { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .art-legacy__summary:hover { color: var(--ink); } .art-legacy__summary:hover .art-legacy__icon { border-color: var(--blue); } }
.art-legacy__body { display: grid; gap: 12px; padding: 4px 4px 24px; font-size: var(--fs-sm); line-height: 1.85; color: var(--muted); }
.art-legacy__body > * { margin: 0; }
.art-legacy__note { padding: 10px 14px; border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); }
.art-legacy__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.art-legacy__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.art-legacy__link .icon { width: 14px; height: 14px; }
.rich .art-legacy__table { display: table; width: 100%; overflow: visible; border-collapse: collapse; font-size: var(--fs-sm); }
.rich .art-legacy__table caption { padding-bottom: 6px; text-align: left; font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; letter-spacing: var(--track-head); color: var(--ink-2); }
.rich .art-legacy__table th, .rich .art-legacy__table td { padding: 8px 0; border: 0; border-top: 1px solid var(--line); vertical-align: top; text-align: left; line-height: 1.75; background: none; }
.rich .art-legacy__table th { width: 9.5em; padding-right: 12px; font-weight: 700; color: var(--ink-2); white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.rich .art-legacy__table td { color: var(--muted); }
.art-legacy__tel { display: block; font-family: var(--font-en); font-weight: 600; letter-spacing: var(--track-body); color: var(--ink-2); white-space: nowrap; }
.art-legacy__addr { display: block; }
/* 所在地・社名などの値(inc/articles.php の ips_site_addr_chunks・ips_site_value_chunks): 「〒番号」「都道府県・市区町村」「町名と番地」の塊の間だけで折り返し、
   郵便番号・番地・電話番号(.nowrap。site.css)は途中で割らない。区切りの文字を入れないので、選んでコピーした文字は元のまま */
.addr-c { display: inline-block; max-width: 100%; }
@media (max-width: 599px) { .rich .art-legacy__table th { width: 6.5em; } }
/* リンクだけの段落から作ったリンクの一覧(行全体が押せる・高さ56px) */
.rich .rich-links { padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.rich .rich-links li + li { margin-top: 0; }
.rich .rich-links a.rich-link {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 8px 12px 12px; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; line-height: 1.6; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.rich-link__label { flex: 1; min-width: 0; font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; font-size: var(--fs-md); letter-spacing: var(--track-head); overflow-wrap: anywhere; }
.rich-link__type { flex-shrink: 0; padding: 0 6px; border: 1px solid currentColor; border-radius: var(--radius); font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-body); line-height: 1.7; color: var(--ink-2); }
.rich-link__icon { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--blue); transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.rich-link__icon .icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .rich .rich-links a.rich-link:hover { background: var(--surface-2); color: var(--blue); }
  .rich .rich-links a.rich-link:hover .rich-link__icon { background: var(--blue); border-color: var(--blue); color: #fff; }
}
.rich .rich-links a.rich-link:active { background: var(--surface-2); }
/* 会員ログインが必要なリンクの印 */
.rich-login__tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-xs); font-weight: 700; line-height: 1.8; letter-spacing: var(--track-head); color: var(--ink-2); text-decoration: none; vertical-align: .1em; white-space: nowrap; }
.rich-login__tag .icon { width: 14px; height: 14px; }
.rich-link__label .rich-login__tag { display: flex; width: fit-content; margin: 4px 0 0; }
.rich .wp-block-button__link .rich-login__tag { order: 1; border-color: rgba(255, 255, 255, .5); background: transparent; color: #fff; }

/* 本文の下: 紹介している製品・同じ種類の記事 */
.art-sub__title { display: grid; gap: 4px; margin-bottom: 18px; font-size: var(--fs-h4); line-height: 1.5; letter-spacing: var(--track-head); }
.art-sub__en { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--blue); }
.art-prods { margin-top: clamp(56px, 6vw, 80px); padding-top: clamp(36px, 4vw, 48px); border-top: 1px solid var(--line); }
.art-prods__list { display: grid; gap: 12px; }
/* 製品のカード(1列の横長。本文の列は約720pxなので、2列にすると型番が「IPS-HCDM2202-」「2POC」と割れる):
   左の大きなリンクは WEBオーダーの商品ページ(詳細・価格。新しいタブ)、右(599px以下は下)の小さいリンクは製品ラインナップ。型番は1行に収める */
.art-prod {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; transition: border-color var(--dur-1) var(--ease);
}
.art-prod__main {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 20px; padding: 12px 20px 12px 12px;
  color: var(--ink); transition: background-color var(--dur-1) var(--ease);
}
.art-prod__img { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); }
.art-prod__img img { width: 100%; height: 100%; object-fit: contain; }
.art-prod__body { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.art-prod__cat { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-body); color: var(--muted); }
.art-prod__model { font-family: var(--font-en); font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--track-body); color: var(--ink); white-space: nowrap; }
.art-prod__name { font-size: var(--fs-xs); line-height: 1.7; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-prod__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-head); color: var(--blue); }
.art-prod__cta .icon { flex-shrink: 0; width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease-out); }
.art-prod__body .rich-login__tag { margin: 4px 0 0; }
.art-prod__sub {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; padding: 6px 16px; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.art-prod__sub .icon { flex-shrink: 0; width: 14px; height: 14px; color: var(--blue); }
@media (min-width: 600px) {
  .art-prod { grid-template-columns: minmax(0, 1fr) auto; }
  .art-prod__sub { justify-content: center; padding: 8px 20px; border-top: 0; border-left: 1px solid var(--line); }
}
.art-prod a:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .art-prod:has(.art-prod__main:hover) { border-color: var(--navy); }
  .art-prod__main:hover { background: var(--surface-2); }
  .art-prod__main:hover .art-prod__cta .icon { transform: translateX(3px); }
  .art-prod__main[target="_blank"]:hover .art-prod__cta .icon { transform: translate(2px, -2px); }
  .art-prod__sub:hover { color: var(--blue); background: var(--surface-2); }
}
.art-prod__main:active, .art-prod__sub:active { background: var(--surface-2); }
.art-related { margin-top: clamp(56px, 6vw, 80px); padding-top: clamp(36px, 4vw, 48px); border-top: 1px solid var(--line); }
.art-related__list { border-top: 1px solid var(--line-2); }
.art-rel { display: grid; grid-template-columns: 92px minmax(0, 1fr) 20px; gap: 16px; align-items: baseline; min-height: 56px; padding: 14px 8px; border-bottom: 1px solid var(--line); transition: background-color var(--dur-1) var(--ease); }
.art-rel__date { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.art-rel__title { font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-md); font-weight: 700; line-height: 1.7; letter-spacing: var(--track-head); transition: color var(--dur-1) var(--ease); }
.art-rel__arrow { align-self: center; color: var(--blue); }
.art-rel__arrow .icon { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .art-rel:hover { background: var(--surface-2); } .art-rel:hover .art-rel__title { color: var(--blue); } .art-rel:hover .art-rel__arrow .icon { transform: translateX(4px); } }
.art-rel:active { background: var(--surface-2); }
.art-related__more { margin-top: 20px; }
@media (max-width: 599px) {
  .art-rel { grid-template-columns: minmax(0, 1fr) 20px; gap: 4px 12px; }
  .art-rel__date { grid-column: 1; }
  .art-rel__title { grid-column: 1; }
  .art-rel__arrow { grid-column: 2; grid-row: 1 / span 2; }
  .art-prod__main { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding-right: 14px; }
}
/* 359px以下: 画像を小さくして型番の幅を確保する(列に収まらない長い型番だけ、ハイフンの後で折り返す) */
@media (max-width: 359px) {
  .art-prod__main { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .art-prod__model { white-space: normal; }
}

/* 旧エディタの本文(ブロックの見た目は新サイトの文字組みに合わせる) */
.rich .wp-block-image, .rich .wp-block-embed, .rich .wp-block-table { margin-block: 2em; }
/* 図は中央に。列の幅より小さい画像は、淡いグレーの面の中に置いて面の幅を列にそろえる(右側に空きを作らない) */
.rich .wp-block-image { text-align: center; }
.rich .wp-block-image img { margin-inline: auto; }
.rich picture { display: contents; }
.rich .rich-fig--small { padding: clamp(16px, 2.6vw, 28px); border-radius: var(--radius-lg); background: var(--surface-2); }
.rich td .rich-fig--small { padding: 0; background: none; }
@media (max-width: 599px) { .rich .rich-fig--small { padding: 0; background: none; } }
/* 図のキャプション(本文の「｜…｜」の行から作ったものも) */
.art__body figure figcaption, .rich .rich-cap { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.75; color: var(--muted); text-align: center; word-break: auto-phrase; }
/* 図の拡大(assets/js/articles.js が、表示幅より十分大きい図にボタンを付ける) */
.rich-zoom { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.rich-zoom.is-zoomable img { cursor: zoom-in; }
.rich-zoom__btn {
  position: absolute; right: 8px; bottom: 8px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(6, 21, 39, .78); border: 1px solid rgba(255, 255, 255, .55); color: #fff; transition: background-color var(--dur-1) var(--ease);
}
.rich-zoom__btn .icon { width: 20px; height: 20px; }
.rich-zoom__btn[hidden] { display: none; }
.rich-zoom__btn:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .rich-zoom__btn:hover { background: var(--blue); } }
.rich-zoom__btn:active { background: var(--blue); }
/* 拡大表示(全画面のダイアログ。ピンチで拡大でき、図を押すと元の大きさと画面に合わせた大きさを切り替える) */
.zoom { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--navy-deep); color: #fff; overflow: hidden; }
.zoom::backdrop { background: var(--scrim, rgba(6, 21, 39, .55)); -webkit-backdrop-filter: blur(var(--scrim-blur, 4px)); backdrop-filter: blur(var(--scrim-blur, 4px)); }
.zoom[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.zoom__bar { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line-dark); }
.zoom__title { flex: 1; min-width: 0; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); color: var(--on-dark-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoom__fit { flex-shrink: 0; min-height: 44px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius); font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); color: #fff; }
.zoom__close { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; }
.zoom__close .icon { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .zoom__fit:hover, .zoom__close:hover { background: rgba(255, 255, 255, .12); } }
.zoom :focus-visible { outline-color: var(--sky); }
.zoom__stage { display: grid; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.zoom__stage img { margin: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); width: auto; height: auto; background: #fff; border-radius: var(--radius); cursor: zoom-in; }
.zoom.is-actual .zoom__stage img { max-width: none; max-height: none; cursor: zoom-out; }
.is-zoom-open { overflow: hidden; }
.rich .wp-block-image.is-resized img, .rich img[style*="width"] { max-width: 100% !important; height: auto !important; }
/* 背景色付きの段落・グループは、色の指定によらずサイトの淡いグレーの面にそろえる */
.rich .has-background:not(.wp-block-button__link) { padding: 18px 22px; border-radius: var(--radius-lg); background: var(--surface-2) !important; color: var(--ink) !important; }
.rich .has-background:not(.wp-block-button__link) a { color: var(--blue); }
/* メール本文の小見出し(「*◆━…‥工場の活用例‥…━◆」の記号を外して h2 / h3 にしたもの)。見た目は本文の h3 と同じ */
.rich .rich-kicker { position: relative; margin-top: 2em; padding: 0 0 0 18px; border: 0; font-size: var(--fs-h4); line-height: 1.6; letter-spacing: var(--track-head); }
.rich .rich-kicker::before { content: ""; position: absolute; left: 0; top: calc(.8em - 4px); width: 8px; height: 8px; background: var(--blue); }
.rich > .rich-kicker:first-child { margin-top: 0; }
/* 小見出しの中の小さな見出し(「◆製品への異物混入対策◆」など) */
.rich .rich-kicker--sub { margin-top: 1.6em; padding-left: 16px; font-size: var(--fs-md); }
.rich .rich-kicker--sub::before { top: calc(.8em - 3px); width: 6px; height: 6px; }
/* 表のセルの中の小見出し(強調だけの段落)は、本文の h3 と同じ見た目に */
.rich td > p:first-child > strong:only-child, .rich td > strong:first-child:only-child { display: block; font-size: var(--fs-h4); line-height: 1.6; }
.rich td p + p { margin-top: .6em; }
/* 終了したイベントの申込みリンク */
.rich .entry-closed { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); }
.rich .entry-closed__label { text-decoration: line-through; text-decoration-color: rgba(86, 103, 122, .5); }
.rich .entry-closed__tag { display: inline-block; padding: 1px 8px; border-radius: var(--radius); background: var(--surface-3); color: var(--ink-2); font-family: var(--font-head); font-feature-settings: "palt"; font-size: .75rem; font-weight: 700; text-decoration: none; }
.rich .wp-block-button .entry-closed { min-height: 52px; padding: 12px 20px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
/* リンクの一覧の行(.rich-links)だった申込みのリンクは、行の形のまま押せない行に(右端に「受付終了」) */
.rich .rich-links li > .entry-closed { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 12px 8px 12px 12px; border-bottom: 1px solid var(--line); line-height: 1.6; }
.rich .rich-links li > .entry-closed .entry-closed__label { min-width: 0; font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; letter-spacing: var(--track-head); overflow-wrap: anywhere; }
.rich .rich-links li > .entry-closed .entry-closed__tag { flex-shrink: 0; }
.rich .has-text-align-center { text-align: center; }
.rich .has-text-align-right { text-align: right; }
.rich .has-text-align-left { text-align: left; }
.rich .wp-block-columns, .rich .wp-block-group { display: block; }
.rich .wp-block-columns > .wp-block-column + .wp-block-column { margin-top: 1.2em; }
.rich .wp-block-group > * + *, .rich .wp-block-column > * + * { margin-top: 1.2em; }
.rich .wp-block-spacer { height: 16px !important; }
.rich .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 1.8em; }
/* 旧記事のボタンは、サイトのボタン(.btn: 角丸4px・右に矢印)と同じ見た目に */
.rich .wp-block-button__link { font-family: var(--font-head); font-feature-settings: "palt";   display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; padding: 12px 20px 12px 24px; border: 0; border-radius: var(--radius) !important;
  background: var(--blue) !important; color: #fff !important; font-size: .9375rem; font-weight: 700; line-height: 1.5; letter-spacing: var(--track-head); text-decoration: none !important; text-align: left;
  transition: background-color var(--dur-1) var(--ease);
}
.rich .wp-block-button__link::after {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease-out);
}
.rich .wp-block-button__link:hover { background: var(--blue-hover) !important; }
.rich .wp-block-button__link:hover::after { transform: translateX(4px); }
.rich .wp-block-table { overflow-x: auto; }
.rich .wp-block-table table { display: table; overflow: visible; }
.rich .wp-block-table td { line-height: 1.9; }
.rich-rule { display: block; height: 1px; margin-block: .6em; background: var(--line-2); }

/* YouTube(クリックで読み込む) */
.yt { margin-block: 2em; }
.yt__link {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--navy-deep); color: #fff !important; text-decoration: none !important;
}
.yt__thumb { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-out); }
.yt__play {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%;
  background: rgba(6, 21, 39, .72); border: 1px solid rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.yt__play .icon { width: 30px; height: 30px; margin-left: 4px; }
.yt__label { font-family: var(--font-head); font-feature-settings: "palt"; position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: var(--radius); background: rgba(6, 21, 39, .78); font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; letter-spacing: var(--track-head); }
.yt__link:hover .yt__thumb { opacity: 1; transform: scale(1.02); }
.yt__link:hover .yt__play { background: var(--blue); transform: scale(1.06); }
.yt iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); background: #000; }
.yt figcaption { margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); }

/* 前後の記事 */
.art-pager { border-top: 1px solid var(--line); background: #fff; }
.art-pager__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "prev next" "back back"; }
.art-pager__item { display: grid; align-content: start; gap: 6px; padding: 28px 16px 28px 0; min-height: 100%; }
.art-pager__item--prev { grid-area: prev; }
.art-pager__item--next { grid-area: next; padding: 28px 0 28px 16px; text-align: right; justify-items: end; border-left: 1px solid var(--line); }
.art-pager__dir { font-family: var(--font-head); font-feature-settings: "palt"; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--blue); }
.art-pager__dir .icon { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.art-pager__item--prev .art-pager__dir .icon { transform: rotate(180deg); }
.art-pager__date { font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: var(--track-label); color: var(--muted); font-variant-numeric: tabular-nums; }
/* 前後の記事の題は、h1・一覧の件名と同じく文節の区切りだけで折り返し(ips_site_wbr_title)、行の長さをそろえて2行まで */
.art-pager__title { font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; font-size: var(--fs-sm); line-height: 1.75; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--dur-1) var(--ease); }
.art-pager__item:hover .art-pager__title { color: var(--blue); }
.art-pager__item--prev:hover .art-pager__dir .icon { transform: rotate(180deg) translateX(4px); }
.art-pager__item--next:hover .art-pager__dir .icon { transform: translateX(4px); }
.art-pager__back { font-family: var(--font-head); font-feature-settings: "palt";   grid-area: back; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 16px;
  border-top: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); transition: color var(--dur-1) var(--ease);
}
.art-pager__back-icon { display: grid; grid-template-columns: repeat(2, 7px); gap: 3px; }
.art-pager__back-icon i { width: 7px; height: 7px; background: var(--navy); transition: background-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-out); }
.art-pager__back:hover { color: var(--blue); }
.art-pager__back:hover .art-pager__back-icon i { background: var(--blue); }
.art-pager__back:hover .art-pager__back-icon i:nth-child(1) { transform: translate(-1px, -1px); }
.art-pager__back:hover .art-pager__back-icon i:nth-child(2) { transform: translate(1px, -1px); }
.art-pager__back:hover .art-pager__back-icon i:nth-child(3) { transform: translate(-1px, 1px); }
.art-pager__back:hover .art-pager__back-icon i:nth-child(4) { transform: translate(1px, 1px); }
@media (min-width: 900px) {
  .art-pager__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "prev back next"; }
  .art-pager__item { padding: 40px 40px 40px 0; }
  .art-pager__item--next { padding: 40px 0 40px 40px; border-left: 0; }
  .art-pager__back { flex-direction: column; gap: 10px; min-width: 180px; padding: 24px 32px; border-top: 0; border-inline: 1px solid var(--line); }
  .art-pager__title { font-size: var(--fs-md); }
}
/* 3列の 900〜1199px は列が狭いので、題を一段小さく(長いカタカナの語も1行に収める) */
@media (min-width: 900px) and (max-width: 1199px) { .art-pager__title { font-size: var(--fs-sm); } }
/* 359px以下: 前後の記事を縦に並べる(2列では1列が約130pxになり、題が数文字ずつしか読めないため) */
@media (max-width: 359px) {
  .art-pager__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "prev" "next" "back"; }
  .art-pager__item { padding: 20px 0; }
  .art-pager__item--next { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); text-align: left; justify-items: start; }
  .art-pager__inner.no-prev .art-pager__item--next { border-top: 0; }
}
/* 前後の片側だけの時: 空の枠は出さず、一覧へのボタンを右端に寄せた2列にする */
.art-pager__inner.no-next { grid-template-columns: minmax(0, 1fr); grid-template-areas: "prev" "back"; }
.art-pager__inner.no-prev { grid-template-columns: minmax(0, 1fr); grid-template-areas: "next" "back"; }
.art-pager__inner.no-prev .art-pager__item--next { padding-left: 0; text-align: left; justify-items: start; border-left: 0; }
.art-pager__inner.no-prev.no-next { grid-template-areas: "back"; }
@media (min-width: 900px) {
  .art-pager__inner.no-next { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prev back"; }
  .art-pager__inner.no-prev { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "next back"; }
  .art-pager__inner.no-prev .art-pager__item--next { padding: 40px 40px 40px 0; }
  .art-pager__inner.no-prev .art-pager__back, .art-pager__inner.no-next .art-pager__back { border-right: 0; }
}

/* 記事冒頭の注記(終了したイベント・過去の号) */
/* 終了・注意の帯は、淡いグレーの面+左の線(--line-strong)にそろえる */
.art__notice { display: flex; gap: 12px; margin-bottom: 36px; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.85; color: var(--ink-2); }
.art__notice + .art__notice { margin-top: -24px; }
.art__notice .icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; color: var(--ink-2); }
.art__notice a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.art__notice strong { font-family: var(--font-head); font-feature-settings: "palt"; color: var(--ink); margin-right: .4em; }
.art__note a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* 6. 関連リンク -------------------------------------------------------- */
.xlink {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  margin-top: clamp(56px, 6vw, 96px); padding: 24px 24px 24px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.xlink__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); }
.xlink__eyebrow { display: block; font-family: var(--font-en); font-size: .75rem; font-weight: 700; letter-spacing: var(--track-label); color: var(--blue); }
.xlink__title { display: block; margin-top: 2px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-h4); font-weight: 700; letter-spacing: var(--track-head); }
.xlink__text { display: block; margin-top: 2px; font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-2); }
.xlink__arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; transition: background-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-out); }
.xlink__arrow .icon { width: 20px; height: 20px; }
.xlink:hover { border-color: var(--navy); box-shadow: var(--shadow-1); }
.xlink:hover .xlink__arrow { background: var(--blue); transform: translateX(4px); }
@media (max-width: 599px) {
  .xlink { grid-template-columns: minmax(0, 1fr) auto; padding: 20px; }
  .xlink__icon { display: none; }
}

/* 7. 個人情報の取り扱い ---------------------------------------------- */
/* 本文は約40字(17px × 680px)。章ごとに番号付きの見出し、最後の「お問い合わせ窓口」の章は窓口のカード */
.policy__grid { display: grid; gap: 32px; }
.policy__body { max-width: 680px; font-size: 1.0625rem; line-height: 2; }
.policy__body .policy__lead { padding-bottom: 1.8em; border-bottom: 1px solid var(--line); font-size: var(--fs-lg); line-height: 2; color: var(--ink); }
.policy__body > .policy__sec { margin-top: clamp(44px, 5vw, 68px); }
.policy__body .policy__sec h2 {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 14px; margin: 0; padding: 0 0 14px;
  border-bottom: 1px solid var(--line); font-size: var(--fs-h3); line-height: 1.5; scroll-margin-top: calc(var(--header-h) + 24px);
}
.policy__no { font-family: var(--font-en); font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--track-body); color: var(--blue); font-variant-numeric: tabular-nums; }
/* 章番号は四隅の印で囲み、章が画面に入るとピントが合うように寄る(data-reveal="focus"。動きを減らす設定では寄った状態) */
.policy__no { position: relative; display: inline-grid; place-items: center; min-width: 36px; height: 30px; padding: 0 6px; }
.policy__no .vf { inset: 0; --vf-c: var(--blue); --vf-s: 7px; }
.js .policy__sec[data-reveal="focus"]:not(.is-in) .policy__no .vf i:nth-child(1) { transform: translate(-6px, -6px); }
.js .policy__sec[data-reveal="focus"]:not(.is-in) .policy__no .vf i:nth-child(2) { transform: translate(6px, -6px); }
.js .policy__sec[data-reveal="focus"]:not(.is-in) .policy__no .vf i:nth-child(3) { transform: translate(-6px, 6px); }
.js .policy__sec[data-reveal="focus"]:not(.is-in) .policy__no .vf i:nth-child(4) { transform: translate(6px, 6px); }
/* 窓口のカードの四隅(企業情報の拠点の地図と同じ青の印) */
.policy__sec--desk { position: relative; }
.policy__desk-vf { inset: 12px; --vf-c: rgba(0, 104, 196, .45); --vf-s: 16px; }
.js .policy__sec--desk[data-reveal="focus"]:not(.is-in) .policy__desk-vf i:nth-child(1) { transform: translate(-12px, -12px); }
.js .policy__sec--desk[data-reveal="focus"]:not(.is-in) .policy__desk-vf i:nth-child(2) { transform: translate(12px, -12px); }
.js .policy__sec--desk[data-reveal="focus"]:not(.is-in) .policy__desk-vf i:nth-child(3) { transform: translate(-12px, 12px); }
.js .policy__sec--desk[data-reveal="focus"]:not(.is-in) .policy__desk-vf i:nth-child(4) { transform: translate(12px, 12px); }
.policy__text { margin-top: 20px; }
.policy__text > * + * { margin-top: 1.1em; }
.policy__text li { line-height: 1.9; }
.policy__body .policy__sec--desk { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--surface-2); }
.policy__body .policy__sec--desk h2 { border-bottom-color: var(--line-2); }
.policy__text > .policy__desk-link { margin-top: 24px; }
.policy__text :is(p, li) { text-wrap: pretty; }
/* 箇条書きの末尾の長いかっこ書きは1つの塊(収まらない時は次の行から始める) */
.policy__paren { display: inline-block; max-width: 100%; text-wrap: pretty; }
/* 窓口の項目名と内容(企業情報の会社概要の表と同じ罫線の組み方) */
.policy__dl { border-top: 1px solid var(--line-2); }
.policy__dl > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 4px 20px; padding: 12px 2px; border-bottom: 1px solid var(--line-2); }
.policy__dl dt { font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); line-height: 2; color: var(--ink-2); }
.policy__dl dd { margin: 0; line-height: 1.85; color: var(--ink); }
@media (max-width: 599px) { .policy__dl > div { grid-template-columns: 5.5em minmax(0, 1fr); column-gap: 12px; } }
/* 400px未満は項目名を上、値を下に(値の列が狭くて語の途中で折り返さないように) */
@media (max-width: 399px) { .policy__dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } .policy__dl dt { line-height: 1.8; } }
.policy__body .policy-date { margin-top: 2.4em; font-size: var(--fs-sm); color: var(--muted); text-align: right; }
/* 目次(1024px以上は右側に固定。項目だけにして、1280×720 の画面でも固定したまま全部が見える高さ) */
.policy__aside { display: grid; align-content: start; }
.policy__toc { padding: 18px 16px 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.policy__toc-title { display: grid; gap: 2px; margin: 0 4px 8px; font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; font-size: var(--fs-sm); letter-spacing: var(--track-head); }
.policy__toc-title [lang="en"] { font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: var(--track-label); color: var(--blue); }
.policy__toc ol { display: grid; }
.policy__toc a, .policy__mtoc-list a {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: baseline; min-height: 36px; padding: 6px 8px;
  border-radius: var(--radius); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.policy__toc a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: transparent; }
.policy__toc-no { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.policy__toc a[aria-current], .policy__mtoc-list a[aria-current] { background: var(--surface-2); color: var(--ink); font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; }
.policy__toc a[aria-current]::before { background: var(--blue); }
@media (hover: hover) and (pointer: fine) { .policy__toc a:hover { color: var(--blue); } }
@media (max-width: 1023px) { .policy__aside { display: none; } }
/* 1023px以下: 本文の前の開閉する目次 */
.policy__mtoc { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.policy__mtoc-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 18px; cursor: pointer; list-style: none; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; }
.policy__mtoc-summary::-webkit-details-marker { display: none; }
.policy__mtoc-summary > span { display: inline-flex; align-items: center; gap: 10px; }
.policy__mtoc-summary .icon { width: 20px; height: 20px; color: var(--blue); transition: transform var(--dur-2) var(--ease-out); }
.policy__mtoc[open] .policy__mtoc-summary > .icon { transform: rotate(180deg); }
.policy__mtoc-list { display: grid; padding: 4px 10px 10px; border-top: 1px solid var(--line); }
.policy__mtoc-list a { min-height: 44px; align-items: center; }
@media (min-width: 1024px) { .policy__mtoc { display: none; } }
@media (min-width: 1024px) {
  .policy__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 80px; align-items: start; }
  .policy__aside { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* 8. 一覧の見出し帯の装飾(ips_site_masthead の aside。1024px以上で表示) -------- */
/* お知らせ・メールマガジン: 最新の記事の画像をファインダーの枠で */
.mh-shot {
  position: relative; width: min(100%, 460px); margin-left: auto; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--navy-2); box-shadow: 0 0 0 1px rgba(124, 200, 255, .18), 0 24px 48px rgba(0, 0, 0, .28);
}
.mh-shot picture { display: contents; }
.mh-shot img { width: 100%; height: 100%; object-fit: cover; }
.mh-shot--contain { background: #fff; }
.mh-shot--contain img { object-fit: contain; }
.mh-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 21, 39, 0) 50%, rgba(6, 21, 39, .78) 100%); }
.mh-shot .vf { inset: 12px; filter: drop-shadow(0 0 1px rgba(6, 21, 39, .9)); }
.mh-shot__tag, .mh-shot__date { position: absolute; z-index: 3; bottom: 18px; font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: var(--track-label); font-variant-numeric: tabular-nums; }
.mh-shot__tag { left: 22px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; }
.mh-shot__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.mh-shot__date { right: 22px; font-weight: 600; color: var(--on-dark-2); }
/* サポート: ヘッドセットと受付状況(受付時間内は ON AIR) */
.mh-desk {
  position: relative; display: grid; justify-items: start; gap: 4px; width: min(100%, 380px); margin-left: auto; padding: 28px 32px 24px;
  border-radius: var(--radius-lg); background: rgba(6, 21, 39, .5); box-shadow: inset 0 0 0 1px rgba(124, 200, 255, .2); color: #fff;
}
.mh-desk .vf { inset: 10px; --vf-c: rgba(124, 200, 255, .55); --vf-s: 14px; }
.mh-desk__icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 12px; border-radius: 50%; background: rgba(124, 200, 255, .12); color: var(--sky); }
.mh-desk__icon .icon { width: 30px; height: 30px; }
.mh-desk__label { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--on-dark-3); }
.mh-desk__status { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-en); font-size: 1.625rem; font-weight: 700; line-height: 1.3; letter-spacing: .08em; color: var(--on-dark-3); }
.mh-desk__status i { width: 10px; height: 10px; border-radius: 50%; background: var(--on-dark-3); }
.mh-desk.is-on .mh-desk__status { color: #fff; }
.mh-desk.is-on .mh-desk__status i { background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) { .mh-desk.is-on .mh-desk__status i { animation: blink 1.6s steps(1) 3; } }
.mh-desk__text { font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); color: var(--on-dark-2); }
.mh-desk__hours { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; width: 100%; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: var(--fs-sm); color: var(--on-dark-2); }
.mh-desk__clock { margin-left: auto; font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: var(--track-label); color: var(--on-dark-3); font-variant-numeric: tabular-nums; }
/* サポート: 受付状況に合わせた行き先(受付中 = 電話、時間外 = 次の受付の日時とフォーム)。札の中のリンクは押せる(aside_label) */
.mh-desk__text { display: grid; gap: 2px; }
.mh-desk__next { color: #fff; }
.mh-desk__next b, .onair-mini b { font-family: var(--font-en); font-weight: 700; letter-spacing: var(--track-body); }
.mh-desk__act, .onair-mini__act {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px 8px 14px; border-radius: var(--radius);
  background: #fff; color: var(--navy); font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); line-height: 1.4;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.mh-desk__act { margin-top: 14px; }
.mh-desk__act .icon, .onair-mini__act .icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--blue); }
.mh-desk__act small, .onair-mini__act small { display: block; font-family: var(--font-ja); font-size: var(--fs-xs); font-weight: 400; color: var(--ink-2); letter-spacing: var(--track-body); }
.mh-desk__act .num-font, .onair-mini__act .num-font { letter-spacing: var(--track-body); }
/* 電話のボタン: 文言と番号はそれぞれ1つの塊(320px では番号だけが次の行へ) */
.mh-desk__act .nowrap, .onair-mini__act .nowrap { display: inline-block; }
@media (hover: hover) and (pointer: fine) { .mh-desk__act:hover, .onair-mini__act:hover { background: var(--sky); } }
.mh-desk__act:active, .onair-mini__act:active { background: var(--sky); }
.mh-desk :focus-visible, .onair-mini :focus-visible { outline-color: var(--sky); }
/* 1023px以下: 説明文の下の受付状況(高さ約110px) */
.onair-mini { display: grid; gap: 10px; width: 100%; padding: 12px 14px; border-radius: var(--radius-lg); background: rgba(6, 21, 39, .5); box-shadow: inset 0 0 0 1px rgba(124, 200, 255, .2); color: var(--on-dark-2); }
.onair-mini__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: var(--fs-sm); line-height: 1.7; }
.onair-mini__status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-en); font-size: var(--fs-md); font-weight: 700; letter-spacing: .08em; color: var(--on-dark-3); }
.onair-mini__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--on-dark-3); }
.onair-mini.is-on .onair-mini__status { color: #fff; }
.onair-mini.is-on .onair-mini__status i { background: var(--signal); }
.onair-mini__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.onair-mini__act { flex: 1 1 auto; }
@media (min-width: 1024px) { .masthead__actions:has(> .onair-mini), .masthead__actions:has(> .mh-tl--mini) { display: none; } }

/* お知らせ: 直近12か月のお知らせを、録画機の再生画面のタイムラインに見立てて種類ごとの段に並べる(右端の赤い点が最新) */
.mh-tl {
  --name-w: 116px;
  position: relative; display: grid; gap: 14px; width: min(100%, 460px); margin-left: auto; padding: 22px 26px 20px;
  border-radius: var(--radius-lg); background: rgba(6, 21, 39, .55); box-shadow: inset 0 0 0 1px rgba(124, 200, 255, .2); color: #fff;
}
.mh-tl .vf { inset: 10px; --vf-c: rgba(124, 200, 255, .55); --vf-s: 14px; }
.mh-tl__top { display: flex; align-items: baseline; gap: 14px; }
.mh-tl__tag { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--sky); }
.mh-tl__range { font-size: var(--fs-xs); letter-spacing: var(--track-body); color: var(--on-dark-3); }
.mh-tl__count { margin-left: auto; font-size: var(--fs-xs); color: var(--on-dark-2); }
.mh-tl__count .num-font { margin-right: 2px; font-size: var(--fs-md); font-weight: 700; color: #fff; }
.mh-tl__rows { position: relative; display: grid; }
.mh-tl__row { display: grid; grid-template-columns: var(--name-w) minmax(0, 1fr); align-items: center; min-height: 30px; }
.mh-tl__name { font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-head); color: var(--on-dark-2); white-space: nowrap; }
.mh-tl__track { position: relative; height: 22px; background: linear-gradient(rgba(124, 200, 255, .24), rgba(124, 200, 255, .24)) center / 100% 1px no-repeat; }
.mh-tl__mark { position: absolute; top: 50%; left: calc(var(--x) * 1%); width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: var(--sky); transform: translateY(-50%); }
.mh-tl__mark.is-latest { width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 24%, transparent); }
.mh-tl__head { position: absolute; top: -4px; bottom: -4px; left: calc(var(--name-w) + (100% - var(--name-w)) * var(--x) / 100); width: 1px; background: rgba(255, 255, 255, .5); pointer-events: none; }
.mh-tl__axis { position: relative; height: 18px; margin-left: var(--name-w); font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: var(--track-body); color: var(--on-dark-3); font-variant-numeric: tabular-nums; }
.mh-tl__axis span { position: absolute; top: 0; left: calc(var(--x) * 1%); padding-left: 4px; border-left: 1px solid rgba(124, 200, 255, .24); line-height: 1.5; }
.mh-tl__axis .is-year { color: var(--sky); font-weight: 700; border-left-color: var(--sky); } /* 1月(年の変わり目) */
.mh-tl__latest { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-dark); }
.mh-tl__lbl { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--sky); }
.mh-tl__date { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-body); color: #fff; font-variant-numeric: tabular-nums; }
.mh-tl__title { overflow: hidden; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); white-space: nowrap; text-overflow: ellipsis; }
/* 1023px以下: 説明文の下の1段だけの小さい版(高さ約110px) */
.mh-tl--mini { --name-w: 0px; width: 100%; margin: 0; padding: 12px 16px 10px; gap: 6px; }
.mh-tl--mini .mh-tl__row { grid-template-columns: minmax(0, 1fr); }
.mh-tl--mini .mh-tl__latest { padding-top: 8px; }
@media (max-width: 599px) { .mh-tl--mini .mh-tl__axis span:nth-child(even) { visibility: hidden; } }

/* メールマガジン: 1023px以下は、最新号のカードに最新号の画像(見出し帯の右の画像は1024px以上だけ) */
.mag-latest__shot { display: none; }
@media (max-width: 1023px) {
  .mag-latest.has-shot { padding-top: 76px; }
  .mag-latest.has-shot .mag-latest__shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 6px; border-radius: var(--radius); background: var(--navy-2); box-shadow: 0 0 0 1px rgba(124, 200, 255, .18); }
  .mag-latest__shot picture { display: contents; }
  .mag-latest__shot img { width: 100%; height: 100%; object-fit: cover; }
  .mag-latest__shot.is-contain { background: #fff; }
  .mag-latest__shot.is-contain img { object-fit: contain; }
}

/* タッチ操作の画面では、本文の中のリンク(電話番号など)の押せる範囲を上下に広げる(行の高さは変えない) */
@media (pointer: coarse) { .art__body :is(p, li, dd, td) a:not(.rich-link) { padding-block: 8px; } }

/* 1つの列だけの表(旧エディタで囲みの代わりに使われたもの)は、枠線の箱ではなく淡いグレーの面(背景色付きの段落と同じ)にそろえる */
.art__body .wp-block-table:not(:has(td + td, th + th)) table { border-collapse: separate; border-spacing: 0 8px; margin-block: -8px; }
.art__body .wp-block-table:not(:has(td + td, th + th)) td { padding: 16px 20px; border: 0; border-radius: var(--radius-lg); background: var(--surface-2); }
/* 会員ログインの印が付いたボタンは、印を2行目に回す(ボタンの文字が途中で折り返さないように) */
.rich .wp-block-button__link:has(.rich-login__tag) { flex-wrap: wrap; row-gap: 6px; }
.rich .wp-block-button__link .rich-login__tag { flex-basis: auto; margin: 0; }
.rich .wp-block-button__link:has(.rich-login__tag)::after { order: 0; }
/* 目次の項目は2行まで(長い問いの見出しでも右の列が伸びすぎないように。全文は本文の見出しで読める) */
.art-toc__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 599px以下: ボタン・図を並べるために使われた表(レイアウト用の表)は、セルを縦に積む(列が細くなって1字ずつ折り返さないように) */
@media (max-width: 599px) {
  .art__body .wp-block-table:has(td .wp-block-button, td figure, td img) :is(table, tbody, tr, td) { display: block; width: auto; }
  .art__body .wp-block-table:has(td .wp-block-button, td figure, td img) td + td { border-top: 0; }
  .art__body .wp-block-table:has(td .wp-block-button, td figure, td img) td.has-text-align-right { text-align: left; }
}
/* 受付状況の1行(1023px以下): 時間外は「OFF AIR 次の受付 …」だけを見せて1行に収める(「受付時間外です」は読み上げ用に残す) */
.onair-mini__text { display: inline-flex; flex-wrap: wrap; gap: 0 10px; }
.onair-mini__text b { white-space: nowrap; }
.onair-mini:not(.is-on) .onair-mini__text [data-onair-text] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 目次の見出しの下の再生位置の線(記事・個人情報の右の目次): 本文をどこまで読んだかを、録画機の再生バーのように左から伸ばして示す。
   本文の view-timeline(--read)を目次から使う(timeline-scope)。transform だけを動かす CSS のスクロール連動で、JS は使わない。
   対応していないブラウザでは出さない(目次の現在地の表示はそのまま) */
.toc-play { display: none; }
@supports (timeline-scope: --read) and (animation-timeline: view()) {
  .policy__grid, .art__layout { timeline-scope: --read; }
  .policy__body, .art__body { view-timeline: --read block; }
  .toc-play { position: relative; display: block; height: 2px; margin: 2px 0 12px; overflow: hidden; border-radius: 2px; background: var(--line); }
  .policy__toc .toc-play { margin-inline: 4px; }
  .toc-play i { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left center; animation: toc-play linear both; animation-timeline: --read; animation-range: contain 0% contain 100%; }
}
@keyframes toc-play { to { transform: scaleX(1); } }
/* タッチ操作の画面(タブレットの横向きなど)では、目次の項目の押せる高さを 44px 以上に(マウスの画面は今の詰めた組み方のまま。個人情報の目次の 36px の指定より後に置く) */
@media (pointer: coarse) { .art-toc__list a, .policy__toc a { min-height: 44px; align-content: center; } }