/*
Theme Name: ZION Wire（METANOIA）
Description: METANOIA（旧 ZION_WEB）の見た目。1.0.0 から、ロゴ・粒子のシナプスを基準にした紺黒の配色。機能はプラグイン「ZION WEB Core」が持つため、このテーマは入れ替えてよい。フォルダ名（zion-wire）は、追加CSSなどの設定を引き継ぐため変えない。
Version: 1.2.1
Author: ZION
Text Domain: zion-wire
*/

:root {
  /* 1.0.0：METANOIA の配色。ロゴの白と赤い輪、背景の粒子の青。変数の名前は、プラグインが使っているので変えない（--gold は、いまは青の差し色） */
  --bg: #05070c;
  --panel: #0a0f1a;
  --line: #1a2232;
  --text: #e8ecf3;
  --sub: #a7b0c2;
  --dim: #7e8799;
  --gold: #9dbcf2;
  --red: #e5322b;
  --glow: rgba(120, 165, 255, .35);
  --mono: Menlo, Consolas, monospace;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.75;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

.zw-shell { max-width: 1080px; margin: 0 auto; }

/* ヘッダー（記事・カテゴリーなど。トップは .mt-hero） */
.zw-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  max-width: 1080px; margin: 0 auto;
  padding: 12px 16px 10px;
}
.zw-logo { display: block; line-height: 0; }
.zw-logo img { width: auto; height: 22px; }
.zw-clock { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.zw-live {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); margin-right: 7px; animation: zw-blink 1.4s infinite;
}
@keyframes zw-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .zw-live { animation: none; } }

/* 一覧 */
.zw-wrap { display: grid; grid-template-columns: 1.5fr 1fr; border-bottom: 1px solid var(--line); }
.zw-wrap.is-plain { grid-template-columns: 1fr; }
.zw-top { padding: 30px 22px 34px; border-right: 1px solid var(--line); }
.zw-tag { font-family: var(--mono); font-size: 11px; color: var(--gold); letter-spacing: .08em; }
.zw-top h2 { font-size: 28px; line-height: 1.4; margin: 12px 0 14px; font-weight: 700; text-wrap: balance; }
.zw-top p { font-size: 15px; color: var(--sub); max-width: 46ch; margin: 0; }
.zw-list { list-style: none; margin: 0; padding: 0; }
.zw-list li { border-bottom: 1px solid var(--line); }
.zw-list li:last-child { border-bottom: 0; }
.zw-list a { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 14px 20px; font-size: 15px; line-height: 1.55; }
.zw-list time { font-family: var(--mono); font-size: 12px; color: var(--dim); padding-top: 3px; }
.zw-list b { display: block; font-family: var(--mono); font-size: 10px; color: var(--gold); font-weight: 400; letter-spacing: .08em; }
.zw-empty { padding: 60px 22px; color: var(--sub); }
.zw-pager { display: flex; justify-content: space-between; padding: 18px 20px; font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* カード一覧（サムネイルは文字だけで描く。A案：身近な一言 × 遠い事実） */
.zw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.zw-card { background: var(--bg); }
.zw-card.is-lead { grid-column: span 3; }
.zw-card a { display: block; height: 100%; }
.zw-card.is-lead a { display: grid; grid-template-columns: 1.25fr 1fr; align-items: stretch; }
.zw-card-meta { padding: 16px 20px 22px; }
.zw-card h2 { font-size: 17px; line-height: 1.55; margin: 8px 0 0; font-weight: 700; text-wrap: balance; }
.zw-card.is-lead .zw-card-meta { padding: 30px 26px; align-self: center; }
.zw-card.is-lead h2 { font-size: 27px; line-height: 1.45; margin-top: 12px; }
.zw-card a:hover h2 { color: var(--gold); }

.zw-thumb {
  aspect-ratio: 16 / 9; background: #eef1f6; color: #0d1220;
  display: flex; flex-direction: column; justify-content: center; padding: 8% 9%;
  container-type: inline-size; overflow: hidden;
}
.zw-thumb-q {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(18px, 8.2cqw, 46px); line-height: 1.35; font-weight: 600; margin: 0;
}
.zw-thumb-by { font-size: clamp(11px, 3.2cqw, 15px); color: #5d6678; margin: .9em 0 0; letter-spacing: .1em; }
.zw-thumb.is-plain { background: radial-gradient(120% 90% at 50% 50%, #101a2e, #070b14); color: var(--gold); }
.zw-thumb.is-plain .zw-thumb-q { font-family: var(--mono); font-size: clamp(13px, 5cqw, 24px); letter-spacing: .14em; font-weight: 400; }
.zw-thumb.is-plain .zw-thumb-q::before, .zw-thumb.is-plain .zw-thumb-q::after { content: none; }
.zw-thumb.has-photo { background-size: cover; background-position: center; color: #fff; justify-content: flex-end; }
.zw-thumb.has-photo .zw-thumb-q { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.zw-thumb.has-photo .zw-thumb-by { color: #ece8de; }
.zw-thumb-credit { font-size: 11px; color: var(--dim); margin: -16px 0 22px; }
.zw-article .zw-thumb { margin: 0 0 22px; }
.zw-fig { margin: 2em 0; }
.zw-fig img { width: 100%; display: block; }
.zw-fig figcaption { font-size: 12px; color: var(--dim); margin-top: 6px; }
.zw-fig figcaption a, .zw-thumb-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.zw-body iframe, .zw-body blockquote.tiktok-embed, .zw-body .twitter-tweet { max-width: 100%; margin-left: auto !important; margin-right: auto !important; }

/* 記事 */
.zw-article { max-width: 720px; margin: 0 auto; padding: 40px 22px 60px; }
.zw-article h1 { font-size: 30px; line-height: 1.4; margin: 12px 0 28px; text-wrap: balance; }
.zw-body { font-size: 17px; line-height: 1.95; }
.zw-body p { margin: 0 0 1.4em; }
.zw-body h2 { font-size: 21px; margin: 2.2em 0 .8em; padding-left: 12px; border-left: 3px solid var(--gold); }
.zw-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.zw-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--line); color: var(--sub); }
.zw-minority { margin: 40px 0 0; padding: 20px 22px; border: 1px solid var(--gold); }
.zw-minority strong { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--gold); font-weight: 400; }
.zw-minority p { margin: 8px 0 0; font-size: 17px; }
.zw-sources { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--sub); }
.zw-sources strong { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--dim); font-weight: 400; }
.zw-sources ul { margin: 10px 0 0; padding-left: 1.2em; }
.zw-sources li { margin-bottom: 6px; overflow-wrap: anywhere; }
.zw-sources a { text-decoration: underline; text-underline-offset: 3px; }
.zw-back { display: inline-block; margin-top: 44px; font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* 注釈（本文の語を押すと、説明が小さな窓で出る。本文の行は動かさない） */
.zw-note { border-bottom: 1px dotted var(--gold); cursor: help; }
.zw-note:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.zw-note.is-on { background: rgba(179, 157, 93, .2); }
.zw-pop { position: absolute; z-index: 50; width: max-content; max-width: min(320px, calc(100vw - 32px)); background: #eef1f6; color: #0d1220; font-size: 14px; line-height: 1.7; padding: 12px 14px; border-radius: 6px; box-shadow: 0 8px 28px rgba(0, 0, 0, .55); }
.zw-pop b { display: block; font-size: 12px; color: #5d6678; margin-bottom: 2px; }
.zw-pop a { display: inline-block; margin-top: 8px; color: #0d1220; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.zw-pop a:hover { color: #0d1220; }

/* 記事の下：ほかの記事への入口 */
.zw-more { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line); }
.zw-more h2 { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--gold); font-weight: 400; margin: 0 0 14px; }
.zw-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-bottom: 34px; }
.zw-more-grid a { display: block; }
.zw-more-grid .zw-thumb { margin: 0 0 8px; }
.zw-more-grid h3 { font-size: 14px; line-height: 1.55; margin: 0; font-weight: 700; }
.zw-more-grid a:hover h3 { color: var(--gold); }
@media (max-width: 520px) { .zw-more-grid { grid-template-columns: 1fr; } }

/* フッター */
.zw-foot { padding: 26px 20px 40px; font-family: var(--mono); font-size: 11px; color: var(--dim); display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 900px) { .zw-cards { grid-template-columns: repeat(2, 1fr); } .zw-card.is-lead { grid-column: span 2; } }
@media (max-width: 760px) {
  .zw-cards { grid-template-columns: 1fr; }
  .zw-card.is-lead { grid-column: span 1; }
  .zw-card.is-lead a { display: block; }
  .zw-card.is-lead .zw-card-meta { padding: 16px 20px 22px; }
  .zw-card.is-lead h2 { font-size: 21px; }
  .zw-wrap { grid-template-columns: 1fr; }
  .zw-top { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 18px 26px; }
  .zw-top h2 { font-size: 23px; }
  .zw-article { padding: 28px 18px 48px; }
  .zw-article h1 { font-size: 24px; }
  .zw-body { font-size: 16px; }
}

.zw-cats { display: flex; gap: 6px; overflow-x: auto; padding: 10px 20px 12px; border-bottom: 1px solid var(--line); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.zw-cats::-webkit-scrollbar { display: none; }
.zw-cats a { flex: 0 0 auto; padding: 5px 13px; border: 1px solid var(--line); border-radius: 99px; font-size: 13px; color: var(--text); text-decoration: none; white-space: nowrap; }
.zw-cats a.is-on { background: var(--gold); border-color: var(--gold); color: var(--bg); font-weight: 700; }
/* 二択の設問「どっち」への入口（金色の枠と、朱色の小さな点で、カテゴリーと見分ける） */
.zw-cats a.zw-cats-docchi { border-color: var(--gold); }
.zw-cats a.zw-cats-docchi::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-right: 6px; vertical-align: 2px; }
.zw-archive { font-size: 20px; letter-spacing: .08em; margin: 18px 20px 4px; }
.zw-reco[hidden] { display: none; }
.zw-reco + .zw-more { margin-top: 0; padding-top: 0; border-top: 0; }
.zw-related + .zw-reco, .zw-related + .zw-more { margin-top: 0; padding-top: 0; border-top: 0; }
.zw-more h2 small { color: var(--dim); letter-spacing: 0; }
.zw-reco .zw-more-grid { margin-bottom: 34px; }

.zw-rank { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--line); }
.zw-rank li { border-bottom: 1px solid var(--line); }
.zw-rank a { display: grid; grid-template-columns: 44px 190px 1fr; gap: 14px; align-items: center; padding: 14px 4px; }
.zw-rank-n { font-family: var(--mono); font-size: 26px; color: var(--gold); text-align: center; line-height: 1; }
.zw-rank li:nth-child(-n+3) .zw-rank-n { font-size: 34px; font-weight: 700; }
.zw-rank .zw-thumb { margin: 0; }
.zw-rank .zw-thumb-q { min-height: 0; }
.zw-rank .zw-thumb-by { display: none; }
.zw-rank .zw-thumb.is-plain .zw-thumb-q { font-size: clamp(10px, 5cqw, 14px); }
.zw-rank-t { display: block; min-width: 0; }
.zw-rank-t .zw-tag { display: block; margin-bottom: 4px; }
.zw-rank-t strong { display: block; font-size: 17px; line-height: 1.55; font-weight: 700; }
.zw-rank a:hover strong { color: var(--gold); }
.zw-rank-note { font-size: 12px; color: var(--dim); margin: 0 0 30px; }
@media (max-width: 560px) {
  .zw-rank a { grid-template-columns: 30px 120px 1fr; gap: 10px; padding: 12px 0; }
  .zw-rank-n { font-size: 20px; }
  .zw-rank li:nth-child(-n+3) .zw-rank-n { font-size: 26px; }
  .zw-rank-t strong { font-size: 15px; }
}

/* 0.9.7：記者の名前（記者紹介ページへのリンク） */
.zw-tag a.zw-by, .zw-minority-by a.zw-by { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.zw-minority-by { display: block; font-size: 12px; color: var(--dim, #8d877b); margin: 2px 0 6px; }

/* ===================================================================
   1.0.0：METANOIA
   =================================================================== */
body { background: var(--bg); }
[hidden] { display: none !important; }
html.mt-lock { overflow: hidden; }

/* カテゴリーの並び：画面の上に貼り付ける（どの記事からでも、別のジャンルへ移れるように） */
.zw-cats { position: sticky; top: 0; z-index: 20; background: rgba(5, 7, 12, .94); padding: 9px 16px 10px; border-bottom: 1px solid var(--line); }
.zw-cats a { border-color: #222b3d; color: var(--sub); font-size: 13px; }
.zw-cats a:hover { color: #fff; border-color: #3a4660; }
.zw-cats a.is-on { background: #eef1f6; border-color: #eef1f6; color: #05070c; }
.zw-cats a.zw-cats-docchi { border-color: rgba(229, 50, 43, .7); color: var(--text); }
/* 1.2.1：まんがの一覧への入口（桃色の枠。漫画のページの差し色と同じ） */
.zw-cats a.zw-cats-manga { border-color: rgba(240, 139, 182, .7); color: var(--text); }
.zw-cats a.zw-cats-manga.is-on { background: #eef1f6; border-color: #eef1f6; color: #05070c; }

/* トップの最上部：ロゴとキャッチコピー、背景にシナプス */
.mt-hero {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(164px, 40vw, 280px);
  background: radial-gradient(70% 80% at 50% 50%, #0b1424 0%, #060a14 55%, #03050a 100%);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.mt-syn { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.6s ease; }
.mt-syn.is-on { opacity: 1; }
.mt-hero::after { /* 文字の後ろだけ少し暗くして、読みやすくする */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(36% 34% at 50% 52%, rgba(3, 5, 10, .55), rgba(3, 5, 10, 0) 100%);
}
.mt-hero-in { padding: 0 20px; width: min(760px, 100%); }
.mt-copy {
  margin: 0 0 clamp(6px, 1.6vw, 12px); font-family: var(--mincho); font-weight: 600; color: #f1f3f8;
  font-size: clamp(13px, 3.4vw, 24px); letter-spacing: .16em; text-shadow: 0 0 18px rgba(120, 165, 255, .35);
}
.mt-copy::after { content: ""; display: block; width: min(68%, 420px); height: 1px; margin: clamp(5px, 1.4vw, 10px) auto 0;
  background: linear-gradient(90deg, transparent, rgba(160, 195, 255, .75), transparent); }
.mt-mark { margin: 0; line-height: 0; }
.mt-mark img { width: min(66vw, 440px); height: auto; filter: drop-shadow(0 0 14px rgba(140, 180, 255, .28)); }

/* ホーム画面に追加のボタン */
.mt-a2hs {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 12px; line-height: 1;
  color: var(--text); background: rgba(10, 15, 26, .7); border: 1px solid #2a3550; border-radius: 99px; padding: 8px 12px; white-space: nowrap;
}
.mt-a2hs:hover { border-color: #5a6c94; color: #fff; }
.mt-a2hs:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mt-a2hs.is-hero { position: absolute; top: 12px; right: 12px; }
.mt-a2hs.is-wide { font-size: 14px; padding: 13px 20px; margin-top: 18px; border-color: rgba(229, 50, 43, .6); }
.mt-a2hs.is-card { flex: 1 0 auto; justify-content: center; padding: 10px 14px; font-size: 13px; border-color: rgba(229, 50, 43, .6); }

/* 区画の見出し */
.mt-sec { padding: 26px 16px 8px; }
.mt-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 14px; font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.mt-h span { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .16em; color: var(--red); text-transform: uppercase; }
.mt-h em { font-style: normal; }
.mt-h time { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--dim); letter-spacing: 0; }
.mt-h time .zw-live { width: 6px; height: 6px; margin-right: 6px; }
.mt-more { display: inline-block; margin: 6px 0 4px; font-size: 13px; color: var(--gold); }
.mt-more:hover { color: #fff; }

/* カード（トップ・一覧） */
.zw-card h3 { font-size: 16px; line-height: 1.55; margin: 6px 0 0; font-weight: 700; text-wrap: balance; }
.zw-card a:hover h3 { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.zw-card .zw-card-meta { padding: 12px 14px 16px; }
.zw-card .zw-tag { color: var(--dim); letter-spacing: .04em; }
.zw-cards { gap: 1px; background: var(--line); border: 1px solid var(--line); }

/* 注目と「どっち」 */
.mt-pick-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
.mt-pick .zw-card.is-lead { grid-column: auto; background: var(--panel); border: 1px solid var(--line); }
.mt-pick .zw-card.is-lead a { display: block; }
.mt-pick .zw-card.is-lead h3 { font-size: 22px; line-height: 1.45; }
.mt-pick .zw-card.is-lead .zw-card-meta { padding: 16px 18px 20px; }
.mt-pick-side { display: grid; gap: 10px; align-content: start; }
.mt-pick .zw-card.is-side { background: var(--panel); border: 1px solid var(--line); }
.mt-docchi { display: grid; grid-template-columns: 42% 1fr; gap: 12px; align-items: center; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--red); }
.mt-docchi.no-img { grid-template-columns: 1fr; padding: 12px 14px; }
.mt-docchi img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.mt-docchi-t { display: block; min-width: 0; }
.mt-docchi-t small { display: block; font-size: 11px; color: var(--red); letter-spacing: .12em; }
.mt-docchi-t b { display: block; font-size: 15px; line-height: 1.5; margin-top: 2px; }
.mt-docchi-t em { display: block; font-style: normal; font-size: 12px; color: var(--sub); margin-top: 4px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt-docchi:hover b { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }

/* ジャンル別：スマートフォンでは横に送る */
.mt-genre { margin: 0 0 22px; }
.mt-genre-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; }
.mt-genre-h h3 { margin: 0; font-size: 15px; padding-left: 10px; border-left: 2px solid var(--red); line-height: 1.3; }
.mt-genre-h a { font-size: 12px; color: var(--gold); }
.mt-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mt-rail .zw-card { background: var(--panel); border: 1px solid var(--line); }
.mt-rail .zw-card h3 { font-size: 14px; }

/* ランキング（トップ・記事の下） */
.mt-rank { list-style: none; margin: 0 0 6px; padding: 0; counter-reset: none; border-top: 1px solid var(--line); }
.mt-rank li { border-bottom: 1px solid var(--line); }
.mt-rank a { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 12px 2px; }
.mt-rank-n { font-family: var(--mincho); font-size: 24px; line-height: 1; text-align: center; color: var(--sub); }
.mt-rank li:nth-child(-n+3) .mt-rank-n { color: var(--red); font-size: 28px; }
.mt-rank-t small { display: block; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.mt-rank-t b { display: block; font-size: 15px; line-height: 1.55; }
.mt-rank a:hover b { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.mt-next .mt-rank { margin-bottom: 30px; }

/* おすすめ */
.mt-reco-grid { grid-template-columns: repeat(4, 1fr); }
.mt-reco .zw-more-grid h3 { font-size: 14px; }

/* メディア紹介 */
.mt-about { margin: 30px 16px 10px; padding: 30px 20px 30px; text-align: center; border: 1px solid var(--line);
  background: radial-gradient(80% 120% at 50% 0%, #0d1628, var(--bg) 70%); }
.mt-about img { width: 180px; height: auto; }
.mt-about h2 { font-family: var(--mincho); font-size: 18px; letter-spacing: .14em; margin: 14px 0 10px; }
.mt-about p { max-width: 36em; margin: 0 auto; font-size: 14px; color: var(--sub); }
.mt-about-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 13px; }
.mt-about-links a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* 記事の下の「ホーム画面に」の案内 */
.mt-card-a2hs { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0 0; padding: 14px 40px 14px 14px;
  background: var(--panel); border: 1px solid #26314a; border-radius: 10px; }
.mt-card-a2hs img { border-radius: 12px; flex: 0 0 auto; }
.mt-card-a2hs div { flex: 1 1 160px; min-width: 0; }
.mt-card-a2hs b { display: block; font-size: 14px; }
.mt-card-a2hs p { margin: 2px 0 0; font-size: 12px; color: var(--sub); line-height: 1.5; }
.mt-card-x { position: absolute; top: 4px; right: 6px; width: 32px; height: 32px; border: 0; background: none; color: var(--dim); font-size: 18px; cursor: pointer; }

/* 追加の手順（画面の下から出る板） */
.mt-sheet { position: fixed; inset: 0; z-index: 100; background: rgba(2, 3, 6, .66); display: flex; align-items: flex-end; justify-content: center; }
.mt-sheet-in { position: relative; width: min(520px, 100%); max-height: 86vh; overflow: auto; background: #0c1220; border: 1px solid #26314a; border-bottom: 0;
  border-radius: 16px 16px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); color: var(--text); }
.mt-sheet-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: none; color: var(--sub); font-size: 22px; cursor: pointer; }
.mt-sheet-top { display: flex; gap: 12px; align-items: center; padding-right: 30px; }
.mt-sheet-top img { border-radius: 14px; }
.mt-sheet-top b { font-size: 16px; }
.mt-sheet-top p { margin: 2px 0 0; font-size: 13px; color: var(--sub); line-height: 1.5; }
.mt-sheet ol { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; }
.mt-sheet li { counter-increment: s; position: relative; padding: 0 0 14px 38px; font-size: 15px; line-height: 1.65; }
.mt-sheet li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.mt-sheet li b { color: #fff; }
.mt-sheet-copy { width: 100%; padding: 12px; font: inherit; font-size: 14px; color: var(--text); background: #141c2e; border: 1px solid #2a3550; border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; }
.mt-sheet-note { margin: 10px 0 0; font-size: 11px; color: var(--dim); line-height: 1.6; }
@media (min-width: 761px) { .mt-sheet { align-items: center; } .mt-sheet-in { border-radius: 16px; border-bottom: 1px solid #26314a; } }

/* フッター */
.zw-foot { max-width: 1080px; margin: 30px auto 0; padding: 26px 16px calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 14px; font-family: inherit; }
.mt-foot-brand img { width: 150px; height: auto; display: block; }
.mt-foot-brand p { margin: 6px 0 0; font-size: 12px; color: var(--sub); letter-spacing: .12em; font-family: var(--mincho); }
.mt-foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--sub); }
.mt-foot-copy { font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* 記事の画面 */
.zw-article .zw-tag { color: var(--dim); }
.zw-body h2 { border-left-color: var(--red); }
.zw-minority { border-color: #2c3a5a; background: var(--panel); }
.zw-minority strong { color: var(--gold); }
.zw-more h2 { color: var(--text); font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.zw-more h2::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-right: 8px; vertical-align: 2px; }

@media (max-width: 900px) {
  .mt-rail { grid-template-columns: repeat(4, 62%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; }
  .mt-rail::-webkit-scrollbar { display: none; }
  .mt-rail .zw-card { scroll-snap-align: start; }
  .mt-reco-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .mt-pick-grid { grid-template-columns: 1fr; }
  .mt-pick .zw-card.is-lead h3 { font-size: 20px; }
  .mt-rail { grid-template-columns: repeat(4, 45%); gap: 10px; }
  .mt-rail .zw-card .zw-card-meta { padding: 8px 10px 12px; }
  .mt-rail .zw-card .zw-tag { display: none; }
  .mt-rail .zw-card h3 { font-size: 13px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .mt-rail .zw-thumb-by { display: none; }
  .mt-genre { margin-bottom: 18px; }
  .zw-cards { grid-template-columns: 1fr 1fr; }
  .zw-cards .zw-card h3 { font-size: 14px; }
  .mt-a2hs.is-hero { top: 8px; right: 8px; padding: 6px 9px; font-size: 11px; }
  .mt-hero-in { padding-top: 18px; }
}
@media (max-width: 420px) {
  .zw-cards { grid-template-columns: 1fr; }
  .zw-cards .zw-card a { display: grid; grid-template-columns: 40% 1fr; align-items: center; }
  .zw-cards .zw-card .zw-card-meta { padding: 8px 12px; }
  .zw-cards .zw-thumb .zw-thumb-by { display: none; }
}

/* 1.0.1：記事ページの回遊（2026-10-19）。別の視点・あなたは？・次の視点 */
.zw-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--gold); margin: 0 0 8px; }
.zw-other { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: -14px 0 26px; }
.zw-other .zw-label { width: 100%; margin: 0; }
.zw-other a { font-size: 13px; line-height: 1.4; padding: 5px 12px; border: 1px solid #2c3a5a; background: var(--panel); border-radius: 99px; color: var(--gold); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zw-other a:hover { border-color: var(--gold); color: #fff; }
.zw-side { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.zw-side-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zw-side-btns[hidden] { display: none; }
.zw-side button { font: inherit; font-size: 14px; color: var(--text); background: transparent; border: 1px solid #2c3a5a; border-radius: 6px; padding: 10px 4px; cursor: pointer; }
.zw-side button:hover { border-color: var(--gold); }
.zw-side button:disabled { opacity: .5; }
.zw-side-r { margin: 0; font-size: 14px; color: var(--sub); }
.zw-next { margin-top: 40px; }
.zw-next-card { display: block; border: 1px solid #2c3a5a; background: var(--panel); border-radius: 8px; overflow: hidden; color: var(--text); }
.zw-next-card + .zw-next-card { display: none; }
.zw-next-card.is-pick { display: block; }
.zw-next-card .zw-thumb { margin: 0; }
.zw-next-why { display: block; padding: 12px 16px 0; font-size: 12px; color: var(--gold); }
.zw-next-card strong { display: block; padding: 4px 16px 16px; font-size: 18px; line-height: 1.55; }
.zw-next-card:hover { border-color: var(--gold); }
.zw-next-card:hover strong { color: #fff; }
.zw-next + .zw-sources { margin-top: 32px; }

/* ---------- 1.1.0：トップの並び（今日のどっち → 新着 → 続きから・いま読まれている・よそ見）と、スマホの下の帯 ---------- */
/* スマホ：1列。左右の列の箱は消して（display: contents）、欄を order で並べ替える。PC：左に今日のどっちと新着、右の列に続きから・ランキング・よそ見 */
.mt-top { display: flex; flex-direction: column; }
.mt-col-main, .mt-col-rail { display: contents; }
.mt-today { order: 1; } .mt-cont { order: 2; } .mt-new { order: 3; } .mt-yoso { order: 4; } .mt-top .mt-ranking { order: 5; } .mt-add { order: 6; }
.mt-top [hidden] { display: none !important; }

.mt-dq { background: var(--panel); border: 1px solid #26314a; border-radius: 14px; padding: 16px; }
.mt-dq-q { font-family: var(--mincho); font-size: 21px; font-weight: 600; line-height: 1.45; margin: 0 0 6px; text-wrap: balance; }
.mt-dq-s { font-size: 13px; color: var(--sub); margin: 0 0 14px; line-height: 1.6; }
.mt-dq-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.mt-dq-vs a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 10px 8px; border-radius: 10px; font-size: 15px; font-weight: 700; line-height: 1.4; border: 1px solid #3f5a92; background: rgba(80, 120, 220, .08); }
.mt-dq-vs a.r { border-color: rgba(229, 50, 43, .6); background: rgba(229, 50, 43, .07); }
.mt-dq-vs a:hover { color: #fff; border-color: #fff; }
.mt-dq-vs i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.mt-dq-done { margin: 4px 0 0; font-size: 14px; }
.mt-dq-done a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.mt-dq-how { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #26314a; font-size: 12px; color: var(--sub); line-height: 1.7; }
.mt-dq-how p { margin: 0; }
.mt-dq-chg { margin-top: 6px !important; }
.mt-dq-chg b { color: #fff; font-size: 15px; padding: 0 2px; border-bottom: 2px solid var(--red); }
.mt-dq-more { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; }
.mt-dq-more::-webkit-scrollbar { display: none; }
.mt-dq-more a { flex: 0 0 auto; max-width: 78%; font-size: 13px; line-height: 1.45; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-dq-more a small { display: block; font-size: 10px; color: var(--dim); }
.mt-dq-more a.all { color: var(--gold); display: flex; align-items: center; }

.mt-gtabs { display: flex; gap: 18px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: -4px 0 4px; scrollbar-width: none; }
.mt-gtabs::-webkit-scrollbar { display: none; }
.mt-gtabs a { flex: 0 0 auto; padding: 8px 0; font-size: 13px; color: var(--sub); white-space: nowrap; border-bottom: 2px solid transparent; }
.mt-gtabs a.is-on { color: var(--text); font-weight: 700; border-bottom-color: var(--red); }

.zw-cards.mt-list { display: grid; grid-template-columns: 1fr; gap: 0; background: none; border: 0; }
.mt-list .zw-card { background: none; border-bottom: 1px solid var(--line); }
.mt-list .zw-card a { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; }
.mt-list .zw-thumb { border-radius: 6px; padding: 6% 7%; }
.mt-list .zw-thumb-q { font-size: clamp(10px, 9cqw, 20px) !important; }
.mt-list .zw-thumb-by { display: none; }
.mt-list .zw-card-meta { padding: 0 !important; }
.mt-list .zw-card h3 { font-size: 14px; line-height: 1.55; margin-top: 4px; }
.mt-list .mt-more { grid-column: 1 / -1; margin-top: 12px; }

.mt-cont-list { display: grid; gap: 8px; }
.mt-cont-list a { display: block; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 14px; font-weight: 700; line-height: 1.5; }
.mt-cont-list a em { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: var(--gold); margin-bottom: 2px; }
.mt-cont-list a:hover { border-color: var(--gold); }
.mt-cont-empty { font-size: 13px; color: var(--sub); margin: 0; }

.mt-yoso-s { font-size: 12px; color: var(--dim); margin: -6px 0 8px; }
.mt-yoso-box a { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border: 1px dashed #3a4a6e; border-radius: 10px; }
.mt-yoso-box .zw-thumb { margin: 0; border-radius: 6px; padding: 6% 7%; }
.mt-yoso-box .zw-thumb-q { font-size: clamp(10px, 9cqw, 20px) !important; }
.mt-yoso-box .zw-thumb-by { display: none; }
.mt-yoso-box h3 { font-size: 14px; line-height: 1.55; margin: 0; }

.mt-top .mt-ranking .mt-rank li:nth-child(n+4) { display: none; }
.mt-add { padding-top: 6px; }
.mt-pc-bm { display: none; font-size: 12px; color: var(--dim); margin: 0; }

@media (min-width: 900px) {
  .mt-top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .mt-col-main { display: block; border-right: 1px solid var(--line); }
  .mt-col-rail { display: block; }
  .mt-col-rail .mt-sec { padding: 22px 18px 14px; border-bottom: 1px solid var(--line); }
  .mt-dq { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; padding: 22px; }
  .mt-dq-q { font-size: 26px; }
  .mt-dq-how { margin: 0; padding: 0 0 0 20px; border-top: 0; border-left: 1px dashed #26314a; font-size: 13px; align-self: center; }
  .zw-cards.mt-list { grid-template-columns: 1fr 1fr; column-gap: 22px; }
  .mt-list .zw-card a { grid-template-columns: 150px minmax(0, 1fr); }
  .mt-top .mt-ranking .mt-rank li:nth-child(n+4) { display: list-item; }
  .mt-col-rail .mt-rank-t b { font-size: 14px; }
  .mt-pc-bm { display: block; }
  .mt-add .mt-card-a2hs { display: none !important; }
}

/* スマホの下の帯。PCでは出さない */
.mt-bar { display: none; }
@media (max-width: 899px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .mt-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(7, 10, 17, .97); border-top: 1px solid #1f2940; padding-bottom: env(safe-area-inset-bottom); }
  .mt-bar a, .mt-bar button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 9px; font: inherit; font-size: 10px; color: var(--sub); background: none; border: 0; cursor: pointer; }
  .mt-bar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mt-bar .is-on { color: var(--text); }
  .mt-bar .is-on svg { stroke: var(--red); }
}
.mt-gsheet-h { display: block; font-size: 16px; margin: 4px 0 14px; }
.mt-gsheet-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-gsheet-list a { padding: 7px 14px; border: 1px solid #26314a; border-radius: 99px; font-size: 14px; color: var(--text); }
.mt-gsheet-list a.is-on { background: #eef1f6; color: #05070c; border-color: #eef1f6; }

/* 1.2.0：はてなブックマークに追加（記事の下、筆者の感想のあと） */
.mt-share { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mt-share-hb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid #26314a; border-radius: 99px; font-size: 14px; color: var(--text); text-decoration: none; }
.mt-share-hb b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: #00a4de; color: #fff; font: 700 12px/1 "Helvetica Neue", Arial, sans-serif; }
.mt-share-hb:hover { border-color: #00a4de; }