/* ===========================================================
   Timewitch / コンテンツページ共通スタイル
   tw-content.css

   このファイルだけを直せば全コンテンツページに反映されます。
   個別ページ側では原則 style 属性を書かないでください。
   =========================================================== */

/* --- 1. トークン ------------------------------------------- */
:root {
  /* 背景 */
  --tw-bg:            #080d1c;
  --tw-bg-deep:       #0b1330;
  --tw-bg-lift:       #12224a;
  --tw-panel:         linear-gradient(rgba(16, 30, 58, .50), rgba(10, 18, 40, .42));

  /* 文字 */
  --tw-ink:           #f6efdd;  /* 見出し */
  --tw-ink-body:      #d5deec;  /* 本文 */
  --tw-ink-sub:       #b7c4d8;  /* 補助本文 */
  --tw-ink-meta:      #9fb0c8;  /* メタ情報 */
  --tw-ink-dim:       #6f7f99;  /* 最も薄い */

  /* 金 */
  --tw-gold:          #e8c987;
  --tw-gold-hi:       #f6dd97;
  --tw-gold-grad:     linear-gradient(#f6dd97, #d3ab63);
  --tw-line:          rgba(233, 201, 135, .16);
  --tw-line-soft:     rgba(233, 201, 135, .12);
  --tw-line-strong:   rgba(233, 201, 135, .25);

  /* 書体 */
  --tw-serif:         "Shippori Mincho B1", serif;
  --tw-sans:          "Zen Kaku Gothic New", sans-serif;

  /* 寸法 */
  --tw-measure:       920px;
  --tw-gutter:        clamp(20px, 5vw, 72px);
  --tw-radius:        14px;
}

/* --- 2. ベース --------------------------------------------- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; overflow-x: hidden; }

body {
  background: var(--tw-bg);
  color: #eae3d2;
  font-family: var(--tw-sans);
  -webkit-font-smoothing: antialiased;
  caret-color: transparent;
}
input, textarea, select, [contenteditable="true"] { caret-color: auto; }

a { color: var(--tw-gold); text-decoration: none; }
a:hover { color: var(--tw-gold-hi); }

/* 本文中の外部リンクは下線でクリック可能と分かるようにする */
.tw-body a {
  color: var(--tw-gold);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.18em;
  word-break: break-all;
}
.tw-body a:hover {
  color: var(--tw-gold-hi);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--tw-gold-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

img { display: block; }

::-webkit-scrollbar { height: 0; width: 0; }

.tw-page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: radial-gradient(150% 90% at 50% -10%,
              var(--tw-bg-lift) 0%, var(--tw-bg-deep) 34%, var(--tw-bg) 74%);
}

/* --- 3. ヘッダー（固定） ----------------------------------- */
.tw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px var(--tw-gutter);
  backdrop-filter: blur(12px);
  background: linear-gradient(rgba(8, 13, 28, .97), rgba(8, 13, 28, .82));
  border-bottom: 1px solid var(--tw-line);
}
.tw-header__logo { display: flex; align-items: center; gap: 11px; }
.tw-header__logo img {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(233, 201, 135, .28));
}
.tw-header__back {
  margin-left: 12px;
  font: 600 12.5px/1 var(--tw-sans);
  color: #c9d4e6;
  letter-spacing: .04em;
}
.tw-collect-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  font: 700 12px/1 var(--tw-sans);
  letter-spacing: .04em;
  color: #0c1428;
  padding: 9px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6dd97, #d3ab63);
  cursor: pointer;
  white-space: nowrap;
}
.tw-collect-btn[hidden] { display: none !important; }
.tw-collect-btn.is-saved {
  color: #f0d089;
  background: rgba(12, 20, 40, .72);
  border: 1px solid rgba(233, 201, 135, .45);
}
@media (max-width: 560px) {
  .tw-collect-btn {
    padding: 8px 11px;
    font-size: 11px;
  }
}

/* --- 4. ヒーロー（固定） ----------------------------------- */
.tw-hero {
  position: relative;
  min-height: clamp(360px, 54vh, 520px);
  display: flex;
  align-items: flex-end;
  padding: clamp(48px, 9vh, 96px) var(--tw-gutter) clamp(30px, 5vh, 52px);
  overflow: hidden;
}
.tw-hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: .5;
}
.tw-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--tw-bg) 4%, rgba(8, 13, 28, .45) 55%, rgba(8, 13, 28, .2)),
    linear-gradient(90deg, var(--tw-bg) 2%, transparent 60%);
}
.tw-hero__inner {
  position: relative;
  max-width: var(--tw-measure);
  width: 100%;
  margin: 0 auto;
}
.tw-crumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 12px/1 var(--tw-sans);
  color: var(--tw-ink-meta);
  margin-bottom: 18px;
}
.tw-crumb span { font-size: 15px; }
.tw-hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.tw-pill {
  font: 700 10px/1 var(--tw-sans);
  letter-spacing: .2em;
  color: #0c1428;
  background: var(--tw-gold-grad);
  padding: 6px 12px;
  border-radius: 999px;
}
.tw-cat  { font: 700 11px/1 var(--tw-sans); letter-spacing: .08em; color: var(--tw-gold); }
.tw-date { font: 500 11px/1 var(--tw-sans); color: var(--tw-ink-meta); }

.tw-hero h1,
.tw-member-intro h1 {
  margin: 0;
  font: 800 clamp(28px, 4.4vw, 52px)/1.28 var(--tw-serif);
  letter-spacing: .01em;
  color: var(--tw-ink);
  text-wrap: balance;
}

/* キャストページ：ヒーロー画像なしの見出し */
.tw-member-intro {
  padding: clamp(20px, 4vh, 36px) 0 10px;
}
.tw-member-intro__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* --- 5. 本文コンテナ -------------------------------------- */
.tw-body {
  position: relative;
  z-index: 2;
  max-width: var(--tw-measure);
  margin: 0 auto;
  padding: 8px var(--tw-gutter) 72px;
}

/* 共通の見出しラベル（eyebrow） */
.tw-eyebrow {
  font: 700 11px/1 var(--tw-sans);
  letter-spacing: .18em;
  color: var(--tw-gold);
  margin: 0 0 14px;
}

/* ブロック間の余白は一括管理。個別に margin を書かないこと */
.tw-body > * + * { margin-top: 34px; }
.tw-body > .tw-rule + *,
.tw-body > * + .tw-rule { margin-top: 48px; }


/* ===========================================================
   6. ブロックライブラリ
   ボディはここから選んで組み合わせる
   =========================================================== */

/* B01 stat — 大きな数字ひとつ ------------------------------- */
.tw-stat {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 24px 0 8px;
  border-bottom: 1px solid var(--tw-line);
}
.tw-stat__num {
  font: 800 clamp(38px, 6vw, 64px)/1 var(--tw-serif);
  color: var(--tw-gold-hi);
  text-shadow: 0 0 30px rgba(246, 221, 151, .3);
}
.tw-stat__label { font: 600 13px/1.5 var(--tw-sans); color: var(--tw-ink-meta); }

/* B02 lead — リード文 --------------------------------------- */
.tw-lead {
  font: 400 clamp(15px, 1.5vw, 17px)/2.1 var(--tw-sans);
  color: var(--tw-ink-body);
  text-wrap: pretty;
}

/* B03 meta — 期間・使った魔法 -------------------------------- */
.tw-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 24px 0;
  border-top: 1px solid var(--tw-line-soft);
  border-bottom: 1px solid var(--tw-line-soft);
}
.tw-meta__item { min-width: 130px; }
.tw-meta__item--wide { flex: 1 1 0; min-width: 200px; }
.tw-meta__key {
  font: 700 10px/1 var(--tw-sans);
  letter-spacing: .14em;
  color: var(--tw-gold);
  margin-bottom: 8px;
}
.tw-meta__val { font: 600 14px/1.5 var(--tw-sans); color: #e7edf6; }
.tw-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tw-tag {
  font: 600 11.5px/1 var(--tw-sans);
  color: #c3cfe2;
  background: rgba(233, 201, 135, .1);
  border: 1px solid var(--tw-line-strong);
  padding: 6px 11px;
  border-radius: 999px;
}

/* B04 sec — 小見出し＋本文 ---------------------------------- */
.tw-sec > p:not(.tw-eyebrow) {
  margin: 0;
  font: 500 clamp(15px, 1.5vw, 17px)/2 var(--tw-serif);
  color: #f3ecdb;
  text-wrap: pretty;
}
.tw-sec > p:not(.tw-eyebrow) + p { margin-top: 1.2em; }
.tw-sec--sans > p:not(.tw-eyebrow) {
  font-family: var(--tw-sans);
  font-weight: 400;
  color: var(--tw-ink-body);
}

/* B05 quote — 引用 ----------------------------------------- */
.tw-quote {
  margin: 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--tw-gold);
}
.tw-quote p {
  margin: 0;
  font: 500 clamp(17px, 2vw, 22px)/1.7 var(--tw-serif);
  color: var(--tw-ink);
  text-wrap: balance;
}
.tw-quote cite {
  display: block;
  margin-top: 10px;
  font: 500 12px/1 var(--tw-sans);
  color: var(--tw-ink-meta);
  font-style: normal;
}

/* B06 chapters — 章立てカード ------------------------------- */
.tw-chapters { display: flex; flex-direction: column; gap: 20px; }
.tw-chapter {
  padding: 22px 24px;
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-radius);
  background: var(--tw-panel);
}
.tw-chapter h3 {
  margin: 0 0 9px;
  font: 700 15.5px/1.5 var(--tw-serif);
  color: #f3ecdb;
}
.tw-chapter p {
  margin: 0;
  font: 400 13.5px/1.95 var(--tw-sans);
  color: var(--tw-ink-sub);
  text-wrap: pretty;
}

/* B07 stats — 数値を並べる --------------------------------- */
.tw-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--tw-line-soft);
  border: 1px solid var(--tw-line-soft);
  border-radius: var(--tw-radius);
  overflow: hidden;
}
.tw-stats > div {
  background: var(--tw-panel);
  padding: 22px 20px;
}
.tw-stats strong {
  display: block;
  font: 800 clamp(24px, 3.4vw, 34px)/1.1 var(--tw-serif);
  color: var(--tw-gold-hi);
}
.tw-stats span {
  display: block;
  margin-top: 8px;
  font: 500 11.5px/1.5 var(--tw-sans);
  color: var(--tw-ink-meta);
}

/* B08 ba — 前と後の対比 ------------------------------------ */
.tw-ba {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 16px;
}
.tw-ba__col {
  padding: 20px 22px;
  border: 1px solid var(--tw-line-soft);
  border-radius: var(--tw-radius);
  background: var(--tw-panel);
}
.tw-ba__col--after { border-color: var(--tw-line-strong); }
.tw-ba__key {
  font: 700 10px/1 var(--tw-sans);
  letter-spacing: .16em;
  color: var(--tw-ink-dim);
  margin-bottom: 10px;
}
.tw-ba__col--after .tw-ba__key { color: var(--tw-gold); }
.tw-ba__col p {
  margin: 0;
  font: 400 13.5px/1.9 var(--tw-sans);
  color: var(--tw-ink-sub);
}
.tw-ba__col--after p { color: #f3ecdb; }
.tw-ba__arrow {
  align-self: center;
  font: 400 20px/1 var(--tw-sans);
  color: var(--tw-gold);
}
@media (max-width: 640px) {
  .tw-ba { grid-template-columns: 1fr; }
  .tw-ba__arrow { transform: rotate(90deg); justify-self: center; }
}

/* B09 timeline — 時系列 ------------------------------------ */
.tw-timeline { position: relative; padding-left: 26px; }
.tw-timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--tw-line-strong);
}
.tw-timeline > li {
  position: relative;
  list-style: none;
  padding-bottom: 26px;
}
.tw-timeline > li:last-child { padding-bottom: 0; }
.tw-timeline > li::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tw-gold);
  box-shadow: 0 0 10px rgba(233, 201, 135, .55);
}
.tw-timeline { margin: 0; }
.tw-timeline__when {
  font: 700 10.5px/1 var(--tw-sans);
  letter-spacing: .12em;
  color: var(--tw-gold);
}
.tw-timeline__what {
  margin: 7px 0 0;
  font: 400 13.5px/1.9 var(--tw-sans);
  color: var(--tw-ink-sub);
}

/* B10 steps — 手順 ---------------------------------------- */
.tw-steps { margin: 0; padding: 0; counter-reset: tw-step; }
.tw-steps > li {
  list-style: none;
  counter-increment: tw-step;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--tw-line-soft);
}
.tw-steps > li:last-child { border-bottom: 1px solid var(--tw-line-soft); }
.tw-steps > li::before {
  content: counter(tw-step, decimal-leading-zero);
  font: 700 15px/1.3 var(--tw-serif);
  color: var(--tw-gold);
  letter-spacing: .04em;
}
.tw-steps h4 {
  margin: 0 0 6px;
  font: 700 14.5px/1.5 var(--tw-serif);
  color: #f3ecdb;
}
.tw-steps p {
  margin: 0;
  font: 400 13px/1.9 var(--tw-sans);
  color: var(--tw-ink-sub);
}

/* B11 checks — チェックリスト ------------------------------ */
.tw-checks { margin: 0; padding: 0; display: grid; gap: 12px; }
.tw-checks > li {
  list-style: none;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  font: 400 14px/1.85 var(--tw-sans);
  color: var(--tw-ink-body);
}
.tw-checks > li::before {
  content: "✧";
  color: var(--tw-gold);
  font-size: 13px;
  line-height: 1.85;
}

/* B12 pull — 一文の抜き出し ------------------------------- */
.tw-pull {
  margin: 0;
  padding: 30px 0;
  border-top: 1px solid var(--tw-line-soft);
  border-bottom: 1px solid var(--tw-line-soft);
  font: 700 clamp(19px, 2.6vw, 28px)/1.65 var(--tw-serif);
  color: var(--tw-ink);
  text-align: center;
  text-wrap: balance;
}

/* B13 figure — 図版 --------------------------------------- */
.tw-figure { margin: 0; }
.tw-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--tw-radius);
  border: 1px solid var(--tw-line);
}
.tw-figure figcaption {
  margin-top: 11px;
  font: 500 11.5px/1.7 var(--tw-sans);
  color: var(--tw-ink-meta);
}

/* B14 voices — 複数の声 ----------------------------------- */
.tw-voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.tw-voice {
  padding: 20px 22px;
  border: 1px solid var(--tw-line-soft);
  border-radius: var(--tw-radius);
  background: var(--tw-panel);
}
.tw-voice p {
  margin: 0;
  font: 500 14px/1.85 var(--tw-serif);
  color: #f3ecdb;
}
.tw-voice cite {
  display: block;
  margin-top: 12px;
  font: 500 11px/1 var(--tw-sans);
  color: var(--tw-ink-meta);
  font-style: normal;
}

/* B15 table — 比較表 -------------------------------------- */
.tw-table-wrap { overflow-x: auto; }
.tw-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 13.5px/1.7 var(--tw-sans);
}
.tw-table th,
.tw-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--tw-line-soft);
}
.tw-table th {
  font: 700 10.5px/1.4 var(--tw-sans);
  letter-spacing: .12em;
  color: var(--tw-gold);
  white-space: nowrap;
}
.tw-table td { color: var(--tw-ink-sub); }
.tw-table tbody tr:first-child td { color: var(--tw-ink-body); }

/* B16 note — 補足 ----------------------------------------- */
.tw-note {
  padding: 18px 22px;
  border-left: 2px solid var(--tw-line-strong);
  background: rgba(233, 201, 135, .05);
  border-radius: 0 var(--tw-radius) var(--tw-radius) 0;
  font: 400 13px/1.9 var(--tw-sans);
  color: var(--tw-ink-sub);
}
.tw-note strong { color: var(--tw-gold); font-weight: 700; }

/* 区切り線 ------------------------------------------------- */
.tw-rule {
  height: 1px;
  border: 0;
  background: var(--tw-line-soft);
}


/* ===========================================================
   7. メンバー紹介ページ専用ブロック（固定型）
   =========================================================== */

/* 名前の下に添える二つ名 */
/* CxOのみ：h1 内でフルネームに続けて出すニックネーム
   例）山田 花子 ／ PECO
   非CxOでは使わない（h1はニックネーム単体） */
.tw-name-nick {
  display: inline-block;
  font: 700 clamp(17px, 2.4vw, 28px)/1.3 var(--tw-sans);
  letter-spacing: .1em;
  color: var(--tw-gold);
  vertical-align: baseline;
}
.tw-name-nick::before {
  content: "／";
  margin: 0 .35em 0 .5em;
  color: var(--tw-ink-dim);
  font-weight: 500;
}
@media (max-width: 560px) {
  .tw-name-nick { display: block; margin-top: 6px; }
  .tw-name-nick::before { margin-left: 0; }
}

/* M01 profile — 肖像＋プロフィール表 ------------------------ */
.tw-profile {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--tw-line);
}
.tw-profile__portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--tw-radius);
  overflow: hidden;
  border: 1px solid var(--tw-line-strong);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.tw-profile__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tw-profile__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 50% 6%, rgba(233, 201, 135, .12), transparent 58%);
  mix-blend-mode: screen;
}

/* プロフィール項目 */
.tw-facts { margin: 0; }
.tw-facts > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--tw-line-soft);
}
.tw-facts > div:first-child { padding-top: 0; }
.tw-facts dt {
  font: 700 10px/1.7 var(--tw-sans);
  letter-spacing: .14em;
  color: var(--tw-gold);
}
.tw-facts dd {
  margin: 0;
  font: 600 14px/1.75 var(--tw-sans);
  color: #e7edf6;
}
.tw-facts dd small {
  display: block;
  margin-top: 3px;
  font: 500 11.5px/1.6 var(--tw-sans);
  color: var(--tw-ink-meta);
  letter-spacing: .04em;
}

/* 所属：Union ＞ Group ＞ Unit の階層表示 -------------------- */
.tw-org { display: flex; flex-direction: column; gap: 11px; }

/* 第1階層：Union */
.tw-org__union {
  align-self: flex-start;
  font: 700 12px/1 var(--tw-sans);
  letter-spacing: .08em;
  color: var(--tw-gold-hi);
  background: rgba(233, 201, 135, .12);
  border: 1px solid var(--tw-line-strong);
  padding: 7px 13px;
  border-radius: 999px;
}

/* 第2階層：Group */
.tw-org__groups {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: none;
  border-left: 1px solid var(--tw-line-strong);
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.tw-org__groups > li { position: relative; }
.tw-org__groups > li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 9px;
  width: 11px;
  height: 1px;
  background: var(--tw-line-strong);
}
.tw-org__group {
  font: 600 13.5px/1.4 var(--tw-sans);
  color: #e7edf6;
}

/* 第3階層：Unit */
.tw-org__units {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tw-org__units > li {
  font: 500 11px/1 var(--tw-sans);
  letter-spacing: .02em;
  color: var(--tw-ink-meta);
  background: rgba(233, 201, 135, .06);
  border: 1px solid var(--tw-line-soft);
  padding: 5px 10px;
  border-radius: 999px;
}

/* 旧：フラットな所属表示（.tw-org に置き換え済み。既存ページ用に残置） */
.tw-belong { display: flex; flex-wrap: wrap; gap: 7px; }
.tw-belong span {
  font: 600 11.5px/1 var(--tw-sans);
  color: #c3cfe2;
  background: rgba(233, 201, 135, .1);
  border: 1px solid var(--tw-line-strong);
  padding: 6px 11px;
  border-radius: 999px;
}

/* エリア長の明示 */
.tw-area {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 12px/1 var(--tw-sans);
  letter-spacing: .06em;
  color: #0c1428;
  background: var(--tw-gold-grad);
  padding: 7px 13px;
  border-radius: 999px;
}
.tw-area--none {
  background: none;
  border: 1px solid var(--tw-line-soft);
  color: var(--tw-ink-dim);
  font-weight: 500;
}

@media (max-width: 720px) {
  .tw-profile {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .tw-profile__portrait {
    width: min(100%, 300px);
    max-width: 300px;
    margin-inline: auto;
    justify-self: center;
  }
  .tw-facts {
    width: 100%;
    justify-self: stretch;
  }
  .tw-facts > div { grid-template-columns: 1fr; gap: 5px; }
}

/* M02 bio — 経歴（テキストをそのまま流し込む） --------------
   改行はそのまま反映されます。<p> や <br> を書く必要はありません。
   原稿を <div class="tw-bio"> の中にペーストするだけでOK。 */
.tw-bio {
  white-space: pre-line;
  font: 400 clamp(14px, 1.45vw, 15.5px)/2.05 var(--tw-sans);
  color: var(--tw-ink-body);
  text-wrap: pretty;
}


/* ===========================================================
   8. 前後ナビ／関連コンテンツ／フッター（固定）
   =========================================================== */
.tw-cast-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--tw-line-soft);
}
.tw-cast-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--tw-line);
  border-radius: 12px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color .2s ease, background .2s ease;
}
.tw-cast-nav__link:hover {
  border-color: var(--tw-gold);
  background: rgba(232, 201, 135, 0.06);
}
.tw-cast-nav__link--prev { align-items: flex-start; text-align: left; }
.tw-cast-nav__link--next { align-items: flex-end; text-align: right; }
.tw-cast-nav__link--next .tw-cast-nav__dir,
.tw-cast-nav__link--next .tw-cast-nav__nick {
  align-self: flex-end;
  text-align: right;
  width: 100%;
}
.tw-cast-nav__dir {
  font: 600 11px/1.3 var(--tw-sans);
  letter-spacing: .08em;
  color: var(--tw-ink-dim);
}
.tw-cast-nav__nick {
  font: 700 18px/1.3 var(--tw-serif);
  color: #f3ecdb;
  letter-spacing: .04em;
}
@media (max-width: 560px) {
  .tw-cast-nav {
    grid-template-columns: 1fr;
  }
  .tw-cast-nav__link--next {
    align-items: flex-end;
    text-align: right;
  }
  .tw-cast-nav__link--next .tw-cast-nav__dir,
  .tw-cast-nav__link--next .tw-cast-nav__nick {
    align-self: flex-end;
    text-align: right;
    width: 100%;
  }
}

.tw-related {
  padding-top: 32px;
  border-top: 1px solid var(--tw-line-soft);
}
.tw-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.tw-mini { display: block; }
.tw-mini__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--tw-line);
}
.tw-mini__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .75, .25, 1);
}
.tw-mini:hover .tw-mini__frame img { transform: scale(1.04); }
.tw-mini__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 44%, rgba(8, 13, 28, .92));
}
.tw-mini__cap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
}
.tw-mini__cat {
  font: 700 9px/1 var(--tw-sans);
  letter-spacing: .1em;
  color: var(--tw-gold);
}
.tw-mini__title {
  margin-top: 5px;
  font: 700 12.5px/1.45 var(--tw-serif);
  color: #f3ecdb;
}

.tw-footer {
  padding: 28px var(--tw-gutter) 40px;
  border-top: 1px solid var(--tw-line-soft);
  text-align: center;
  font: 500 11px/1.6 var(--tw-sans);
  color: var(--tw-ink-dim);
  letter-spacing: .04em;
}

/* --- 8b. note から移した長文記事（.tw-article） ------------ */
.tw-article {
  font: 400 clamp(15px, 1.45vw, 16.5px)/2 var(--tw-sans);
  color: var(--tw-ink-body);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.tw-article > * { margin: 0; }
.tw-article > * + * { margin-top: 1.3em; }
.tw-article h2 {
  margin-top: 2.4em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tw-line);
  font: 800 clamp(19px, 2.1vw, 23px)/1.55 var(--tw-serif);
  color: var(--tw-ink);
}
.tw-article h3 {
  margin-top: 2em;
  font: 700 clamp(16px, 1.7vw, 18.5px)/1.6 var(--tw-serif);
  color: var(--tw-ink);
}
.tw-article h2 + *, .tw-article h3 + * { margin-top: .9em; }
.tw-article strong { color: var(--tw-ink); font-weight: 700; }
.tw-article ul, .tw-article ol { padding-left: 1.4em; }
.tw-article li + li { margin-top: .35em; }
.tw-article blockquote {
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--tw-gold);
  color: var(--tw-ink-sub);
}
.tw-article blockquote > * + * { margin-top: .8em; }
.tw-article figure { margin-top: 1.8em; margin-bottom: .5em; }
.tw-article > .tw-article__cover { margin: 0 0 2em; }
.tw-article img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tw-radius);
  border: 1px solid var(--tw-line);
  background: rgba(255, 255, 255, .03);
}
.tw-article figcaption {
  margin-top: 10px;
  font: 500 12px/1.7 var(--tw-sans);
  color: var(--tw-ink-meta);
  text-align: center;
}
.tw-article hr { border: none; border-top: 1px solid var(--tw-line); margin: 2.4em 0; }
.tw-article pre {
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  overflow-x: auto;
  font: 400 13px/1.7 ui-monospace, monospace;
}
.tw-article .tw-embed a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--tw-line-strong);
  border-radius: 999px;
  font: 700 13px/1 var(--tw-sans);
}

/* --- 9. モーション配慮 ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001s !important;
    transition-duration: .001s !important;
  }
}