/* v4.2.105: 記事ページのアイキャッチ「ルパン三世風タイプライター」演出（ジャンル別デザイン） */
.single-post .tn-article__hero { position: relative; }

.tn-tw {
  --bg: #0b0b0d; --fg: #fff; --ac: #e60024; --sub: rgba(255,255,255,.6);
  --font: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --weight: 800; --shadow: none; --hit: tn-tw-hit-zoom;
  position: absolute; inset: 0; z-index: 5; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--fg);
  font-family: var(--font); font-weight: var(--weight); line-height: 1.25; text-align: center;
  -webkit-user-select: none; user-select: none;
  animation: tn-tw-failsafe .4s linear 7s forwards; /* JSが動かない時の保険 */
}
.tn-tw.is-running { animation: none; }
.tn-tw.is-fading { transition: opacity .6s ease, transform .6s ease; opacity: 0; transform: scale(1.04); pointer-events: none; }

/* 模様の層 */
.tn-tw__deco { position: absolute; inset: 0; pointer-events: none; }
.tn-tw__deco::before, .tn-tw__deco::after { content: ""; position: absolute; }

/* 上のラベルとタグ */
.tn-tw__top {
  position: absolute; left: 4.5%; top: 6%; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; font-weight: 700;
  opacity: 0; transform: translateY(-8px); transition: .4s ease .1s;
}
.tn-tw.is-on .tn-tw__top { opacity: 1; transform: none; }
.tn-tw__label { padding: .35em 1em; border-radius: 99px; background: var(--ac); color: var(--label-fg, #fff); font-size: clamp(11px, 1.6vw, 15px); letter-spacing: .06em; }
.tn-tw__tag { font-style: normal; color: var(--sub); font-size: clamp(10px, 1.4vw, 13px); }

/* 下のロゴ・スキップ表示 */
.tn-tw__brand, .tn-tw__skip {
  position: absolute; bottom: 6%; z-index: 2;
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; font-weight: 800;
  color: var(--sub); font-size: clamp(10px, 1.5vw, 14px); letter-spacing: .12em;
}
.tn-tw__brand { left: 4.5%; }
.tn-tw__brand em { font-style: normal; font-weight: 600; margin-left: .7em; letter-spacing: .04em; opacity: .8; }
.tn-tw__brand::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; border-radius: 50%; background: var(--ac); vertical-align: .05em; }
.tn-tw__skip { right: 4.5%; font-weight: 600; font-size: clamp(9px, 1.2vw, 12px); letter-spacing: .04em; opacity: .7; }

/* 文字 */
.tn-tw__stage { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.tn-tw__char { display: block; line-height: 1; text-shadow: var(--shadow); transform-origin: 50% 50%; }
.tn-tw__char.is-hit { animation: var(--hit) .14s ease-out; }
.tn-tw__full { display: block; padding: 0 6%; letter-spacing: .04em; text-shadow: var(--shadow); }
.tn-tw__row { display: block; white-space: nowrap; animation: tn-tw-row .35s ease-out both; }
.tn-tw.is-full .tn-tw__full::after { /* 全文表示時の下線 */
  content: ""; display: block; width: 3.2em; height: .12em; margin: .45em auto 0; background: var(--ac); border-radius: 2px;
  animation: tn-tw-line .45s ease-out .15s both;
}

/* ======= ジャンル別デザイン ======= */

/* エンタメ：ルパン風・赤のスポットライト */
.tn-tw--entertainment, .tn-tw--default {
  --bg: radial-gradient(ellipse at 50% 45%, #2a0b10 0%, #0b0b0d 62%);
}
.tn-tw--entertainment .tn-tw__deco::before, .tn-tw--default .tn-tw__deco::before {
  inset: 0; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.025) 46px 47px);
}

/* 芸能：ピンクのきらめき・上品な明朝 */
.tn-tw--entertainment-news {
  --bg: radial-gradient(circle at 75% 20%, #4a1838 0%, #1d1420 55%, #120c14 100%);
  --ac: #ff3d8b; --sub: #e5c6d8; --shadow: 0 0 18px rgba(255,61,139,.55);
  --hit: tn-tw-hit-blur;
}
.tn-tw--entertainment-news .tn-tw__deco::before {
  inset: 0;
  background:
    radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 0 0 / 90px 90px,
    radial-gradient(circle, rgba(255,61,139,.9) 0 1.5px, transparent 2.5px) 45px 45px / 90px 90px;
  opacity: .35; animation: tn-tw-twinkle 1.6s ease-in-out infinite alternate;
}

/* アニメ・漫画：トーン＋集中線・黄色の太字 */
.tn-tw--anime-manga {
  --bg: #251a45; --fg: #ffd23f; --ac: #ffd23f; --label-fg: #251a45; --sub: #cfc6ec;
  --font: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; --weight: 900;
  --shadow: 4px 4px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
  --hit: tn-tw-hit-pop;
}
.tn-tw--anime-manga .tn-tw__deco::before {
  inset: -50%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.07) 0 2deg, transparent 2deg 9deg);
}
.tn-tw--anime-manga .tn-tw__deco::after {
  right: 0; top: 0; width: 45%; height: 60%;
  background: radial-gradient(circle, rgba(255,210,63,.35) 0 3px, transparent 3.5px) 0 0 / 16px 16px;
  -webkit-mask: linear-gradient(225deg, #000, transparent 70%); mask: linear-gradient(225deg, #000, transparent 70%);
}

/* ゲーム：ネオン＋ドット＋グリッチ */
.tn-tw--game {
  --bg: linear-gradient(180deg, #0d1626, #050a14); --fg: #e9fbff; --ac: #00d1ff; --label-fg: #0d1626; --sub: #8fd9ee;
  --font: "BIZ UDGothic", "Osaka-Mono", "MS Gothic", ui-monospace, monospace; --weight: 700;
  --shadow: 0 0 10px rgba(0,209,255,.9), 3px 0 0 rgba(255,0,110,.7), -3px 0 0 rgba(0,209,255,.7);
  --hit: tn-tw-hit-glitch;
}
.tn-tw--game .tn-tw__deco::before {
  inset: 0; background:
    linear-gradient(rgba(0,209,255,.08) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(0,209,255,.08) 1px, transparent 1px) 0 0 / 24px 100%;
}
.tn-tw--game .tn-tw__deco::after { /* 走査線 */
  inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px);
}
.tn-tw--game .tn-tw__char::after { content: "_"; margin-left: .05em; color: var(--ac); animation: tn-tw-blink .5s steps(1) infinite; }

/* スポーツ：斜めのスピード線・斜体 */
.tn-tw--sports {
  --bg: linear-gradient(120deg, #0f3426 0%, #164532 60%, #0b2a1f 100%); --ac: #ff8a00; --sub: #b8d6c7;
  --font: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; --weight: 900;
  --shadow: 5px 5px 0 rgba(255,138,0,.85);
  --hit: tn-tw-hit-dash;
}
.tn-tw--sports .tn-tw__deco::before {
  inset: 0; background: repeating-linear-gradient(-60deg, transparent 0 38px, rgba(255,255,255,.05) 38px 46px);
}
.tn-tw--sports .tn-tw__deco::after {
  right: -10%; top: 0; width: 38%; height: 100%; background: var(--ac); opacity: .16; transform: skewX(-18deg);
}
.tn-tw--sports .tn-tw__char, .tn-tw--sports .tn-tw__full { font-style: italic; transform: skewX(-8deg); }

/* IT：回路グリッド・青い光 */
.tn-tw--it-technology {
  --bg: radial-gradient(ellipse at 30% 70%, #12305c 0%, #0a1c36 55%, #061226 100%); --ac: #2f8cff; --sub: #aac2e2;
  --font: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; --weight: 700;
  --shadow: 0 0 14px rgba(47,140,255,.8);
  --hit: tn-tw-hit-flicker;
}
.tn-tw--it-technology .tn-tw__deco::before {
  inset: 0; background:
    radial-gradient(circle, #2f8cff 0 3px, transparent 4px) 25px 25px / 150px 100px,
    linear-gradient(rgba(47,140,255,.1) 1px, transparent 1px) 0 0 / 50px 50px,
    linear-gradient(90deg, rgba(47,140,255,.1) 1px, transparent 1px) 0 0 / 50px 50px;
}

/* 生活：クリーム色・やわらかい丸 */
.tn-tw--life {
  --bg: #fff6ea; --fg: #2b2118; --ac: #ee7a1c; --sub: #8a7560;
  --font: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic", "Noto Sans JP", sans-serif; --weight: 800;
  --hit: tn-tw-hit-bounce;
}
.tn-tw--life .tn-tw__deco::before { right: -6%; top: -18%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: #ffe2bf; }
.tn-tw--life .tn-tw__deco::after { left: -5%; bottom: -22%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: #ffd9a8; opacity: .7; }

/* 社会：ニュース速報バー */
.tn-tw--society {
  --bg: linear-gradient(180deg, #152238 0%, #0e1828 100%); --ac: #e60024; --sub: #b3c0d4;
  --hit: tn-tw-hit-slam;
}
.tn-tw--society .tn-tw__deco::before {
  left: 0; right: 0; bottom: 18%; height: 3px; background: var(--ac); box-shadow: 0 8px 0 rgba(230,0,36,.35);
}
.tn-tw--society .tn-tw__deco::after {
  content: "NEWS  NEWS  NEWS  NEWS  NEWS  NEWS  NEWS  NEWS  NEWS  NEWS";
  left: 0; top: 18%; white-space: nowrap; font: 900 clamp(40px, 9vw, 110px)/1 "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: rgba(255,255,255,.04); letter-spacing: .1em; animation: tn-tw-ticker 8s linear infinite;
}

/* 経済：金色・上昇チャート */
.tn-tw--economy {
  --bg: linear-gradient(160deg, #153a36 0%, #0e2b28 60%, #08201d 100%); --fg: #f6e7b8; --ac: #d9a521; --label-fg: #0e2b28; --sub: #b5d0cb;
  --shadow: 0 2px 12px rgba(217,165,33,.35);
  --hit: tn-tw-hit-rise;
}
.tn-tw--economy .tn-tw__deco::before {
  left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(to top right, transparent 49.3%, rgba(217,165,33,.45) 49.6% 50.4%, transparent 50.7%);
}
.tn-tw--economy .tn-tw__deco::after {
  inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 80px 100%;
}

/* 話題：黒×黄色の注意テープ */
.tn-tw--topic {
  --bg: #121212; --fg: #fff; --ac: #ffcf00; --label-fg: #1a1a1a; --sub: #c8c8c8;
  --font: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; --weight: 900;
  --shadow: 0 0 0 transparent; --hit: tn-tw-hit-stamp;
}
.tn-tw--topic .tn-tw__deco::before, .tn-tw--topic .tn-tw__deco::after {
  left: -5%; right: -5%; height: 22px;
  background: repeating-linear-gradient(-45deg, #ffcf00 0 18px, #121212 18px 36px);
}
.tn-tw--topic .tn-tw__deco::before { top: 0; }
.tn-tw--topic .tn-tw__deco::after { bottom: 0; }
.tn-tw--topic .tn-tw__top { top: calc(6% + 14px); }
.tn-tw--topic .tn-tw__brand, .tn-tw--topic .tn-tw__skip { bottom: calc(6% + 14px); }
.tn-tw--topic .tn-tw__char { color: var(--ac); }

/* ======= 文字の出方 ======= */
@keyframes tn-tw-hit-zoom    { from { transform: scale(1.14); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes tn-tw-hit-blur    { from { filter: blur(8px); transform: scale(1.1); opacity: .3; } to { filter: none; transform: none; opacity: 1; } }
@keyframes tn-tw-hit-pop     { 0% { transform: scale(1.5) rotate(-10deg); } 70% { transform: scale(.94) rotate(2deg); } 100% { transform: none; } }
@keyframes tn-tw-hit-glitch  { 0% { transform: translate(6px,-3px); clip-path: inset(0 0 55% 0); } 50% { transform: translate(-5px,2px); clip-path: inset(40% 0 0 0); } 100% { transform: none; clip-path: none; } }
@keyframes tn-tw-hit-dash    { from { transform: translateX(40%) skewX(-20deg); opacity: 0; } to { transform: skewX(-8deg); opacity: 1; } }
@keyframes tn-tw-hit-flicker { 0% { opacity: 0; } 30% { opacity: 1; } 50% { opacity: .3; } 100% { opacity: 1; } }
@keyframes tn-tw-hit-bounce  { 0% { transform: translateY(-30%); } 65% { transform: translateY(6%); } 100% { transform: none; } }
@keyframes tn-tw-hit-slam    { from { transform: scale(1.35); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tn-tw-hit-rise    { from { transform: translateY(35%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tn-tw-hit-stamp   { 0% { transform: scale(1.6) rotate(6deg); opacity: 0; } 60% { transform: scale(.95) rotate(-2deg); opacity: 1; } 100% { transform: none; } }

@keyframes tn-tw-row     { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tn-tw-line    { from { width: 0; } }
@keyframes tn-tw-twinkle { to { opacity: .7; } }
@keyframes tn-tw-blink   { 50% { opacity: 0; } }
@keyframes tn-tw-ticker  { to { transform: translateX(-50%); } }
@keyframes tn-tw-failsafe { to { opacity: 0; visibility: hidden; } }

/* スポーツの斜体は全文表示でも保つ */
.tn-tw--sports .tn-tw__row { animation-name: tn-tw-row; }

@media (max-width: 600px) {
  .tn-tw__skip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tn-tw { display: none !important; } }