/* 年式の7つの時代（_design/ab/eras/ の themes.json・comps・motion.md）。
   1) テーマの変数（body[data-theme]）… 結果の画面全体（下半分を含む）の色・書体・線・影
   2) 1画面目の組み方（.ef--showa など）… nenshiki-first.js の時代ごとの組み方
   どの時代でも本文16px以上・14px未満なし・次の一歩のピンクはボタン専用。動きは prefers-reduced-motion で止める（base.css）。 */

/* ── 1) テーマの変数 */
body[data-theme="nenshiki-E1"] { --n-bg: #ECEAE4; --n-ink: #151515; --n-sub: #4A4A4A; --n-card: #F7F6F2; --n-line: #151515; --n-shc: #151515; --n-accent: #151515; --n-red: #151515; --n-red-t: #151515; --n-blue: #151515; --n-chip: #A8A6A0; --n-tint: #E2E0DA; --n-display: "Zen Antique", serif; --n-dw: 400; --n-hand: "Zen Old Mincho", serif; --pattern: radial-gradient(rgba(0, 0, 0, .09) .8px, transparent 1px); --pattern-size: 4px 4px; --acc: #E2E0DA; --opt-hover: #E2E0DA; --fact-bg: #E2E0DA; }
body[data-theme="nenshiki-E2"] { --n-bg: #C9D7FF; --n-ink: #000; --n-sub: #333; --n-card: #fff; --n-line: #000; --n-shc: transparent; --n-accent: #FF0066; --n-red: #FF0000; --n-red-t: #CC0000; --n-blue: #000080; --n-chip: #FFFF66; --n-tint: #FFFFCC; --n-display: "DotGothic16", sans-serif; --n-dw: 400; --n-hand: "BIZ UDGothic", sans-serif; --pattern: linear-gradient(45deg, #B6C8FF 25%, transparent 25%, transparent 75%, #B6C8FF 75%), linear-gradient(45deg, #B6C8FF 25%, transparent 25%, transparent 75%, #B6C8FF 75%); --pattern-size: 20px 20px; --acc: #FFFF66; --opt-hover: #FFFFCC; --fact-bg: #FFFFCC; }
body[data-theme="nenshiki-E2"] .app::before { background-position: 0 0, 10px 10px; }
body[data-theme="nenshiki-E3"] { --n-bg: #FFD400; --n-ink: #111; --n-sub: #333; --n-card: #fff; --n-line: #111; --n-shc: #111; --n-accent: #E0251B; --n-red: #E0251B; --n-red-t: #D9261C; --n-blue: #1A5FE6; --n-chip: #FFD400; --n-tint: #FFF3B0; --n-display: "Dela Gothic One", sans-serif; --n-dw: 400; --n-hand: "Yusei Magic", sans-serif; --n-dot: rgba(255, 59, 47, .14); --acc: #FFD400; --opt-hover: #FFF3B0; --fact-bg: #FFF3B0; }
body[data-theme="nenshiki-E4"] { --n-bg: #ECF0F1; --n-ink: #2C3E50; --n-sub: #56656B; --n-card: #fff; --n-line: transparent; --n-shc: transparent; --n-accent: #E74C3C; --n-red: #E74C3C; --n-red-t: #C0392B; --n-blue: #12806A; --n-chip: #F1C40F; --n-tint: #E8F8F5; --n-display: "M PLUS 1p", sans-serif; --n-dw: 800; --n-hand: "M PLUS 1p", sans-serif; --acc: #D5F5EE; --opt-hover: #E8F8F5; --fact-bg: #E8F8F5; }
body[data-theme="nenshiki-E5"] { --n-bg: #FFF6E6; --n-ink: #1F2333; --n-sub: #4E5468; --n-card: #fff; --n-line: #1F2333; --n-shc: #1F2333; --n-accent: #FF6B57; --n-red: #FF6B57; --n-red-t: #C23A27; --n-blue: #1F2333; --n-chip: #FFC93C; --n-tint: #FFEBC7; --n-display: "Zen Maru Gothic", sans-serif; --n-dw: 900; --n-hand: "Zen Maru Gothic", sans-serif; --acc: #FFE3B0; --opt-hover: #FFF0D6; --fact-bg: #FFF0D6; }
body[data-theme="nenshiki-E6"] { --n-bg: #EEF0F4; --n-ink: #0B1E3F; --n-sub: #4B5A75; --n-card: #fff; --n-line: #C9D0DC; --n-shc: transparent; --n-accent: #C6F432; --n-red: #0B1E3F; --n-red-t: #0B1E3F; --n-blue: #0B1E3F; --n-chip: #C6F432; --n-tint: #F4FBDD; --n-display: "Murecho", "Noto Sans JP", sans-serif; --n-dw: 900; --n-hand: "Noto Sans JP", sans-serif; --acc: #E9FBB0; --opt-hover: #F4FBDD; --fact-bg: #F4FBDD; }
body[data-theme="nenshiki-E7"] { --n-bg: #05080D; --n-ink: #E9F6F8; --n-sub: #CFE7EA; --n-card: #0A141C; --n-line: #3BF0FF; --n-shc: transparent; --n-accent: #3BF0FF; --n-red: #FFB020; --n-red-t: #FFB020; --n-blue: #0A141C; --n-chip: #3BF0FF; --n-tint: #0F2230; --n-display: "Azeret Mono", "M PLUS 1", monospace; --n-dw: 500; --n-hand: "M PLUS 1", sans-serif; --pattern: linear-gradient(rgba(59, 240, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 240, 255, .05) 1px, transparent 1px); --pattern-size: 24px 24px; --acc: #0F2230; --opt-hover: #0F2230; --fact-bg: #0F2230; --sans: "M PLUS 1", "Noto Sans JP", sans-serif; }
/* 角の決まり（時代の作法）: 昭和・平成初期・2029年は角を立てる */
body:is([data-theme="nenshiki-E1"], [data-theme="nenshiki-E2"], [data-theme="nenshiki-E7"]) .n-res :is(.n-inst, .n-pop, .n-mech__bubble, .n-verdict__c, .n-switch, .n-switch__knob, .n-fut__panel, .n-fut__pic, .n-work__c, .n-step, .n-vsec .video, .video__th, .n-next, .n-tags li, .n-step__when, .n-inst__item, .peek, .share__text, .btn-line, .idx__item, .idx__cells a, .go),
body:is([data-theme="nenshiki-E1"], [data-theme="nenshiki-E2"], [data-theme="nenshiki-E7"]) :is(.next__in, .btn-line, .btn-next, .facts li, .n-res .go) { border-radius: 0; }
/* 白黒にするのは自社の絵だけ。動画のサムネイル（中に他社のロゴや人の顔がある）と YouTube の印は色を変えない */
body[data-theme="nenshiki-E1"] .n-res .n-fut__img { filter: grayscale(1); }
body[data-theme="nenshiki-E1"] .n-verdict__band::before, body[data-theme="nenshiki-E1"] .n-verdict__band::after { background: repeating-linear-gradient(90deg, #151515 0 2px, transparent 2px 6px); }
body:is([data-theme="nenshiki-E4"], [data-theme="nenshiki-E5"], [data-theme="nenshiki-E6"]) .n-verdict__band::before, body:is([data-theme="nenshiki-E4"], [data-theme="nenshiki-E5"], [data-theme="nenshiki-E6"]) .n-verdict__band::after { display: none; }
body[data-theme="nenshiki-E5"] .n-verdict__band { background: #DCD3FF; color: var(--n-ink); border-radius: 24px 24px 24px 6px; margin: 0; }
body[data-theme="nenshiki-E6"] .n-verdict__band { color: #C6F432; }
body[data-theme="nenshiki-E7"] .n-verdict__band { background: transparent; color: var(--n-ink); border-top: 1.5px solid var(--n-ink); border-bottom: 1.5px solid var(--n-ink); }
body[data-theme="nenshiki-E7"] .n-verdict__band::before, body[data-theme="nenshiki-E7"] .n-verdict__band::after { display: none; }
body[data-theme="nenshiki-E2"] .n-verdict__band { background: #000080; color: #FFFF66; }
body:is([data-theme="nenshiki-E4"]) .n-res :is(.n-inst, .n-pop, .n-mech__bubble, .n-verdict__c, .n-fut__panel, .n-work__c, .n-step, .n-vsec .video) { border-radius: 4px; }
body[data-theme="nenshiki-E4"] .n-pop { box-shadow: 10px 10px 0 rgba(0, 0, 0, .1); }
body[data-theme="nenshiki-E5"] .n-res :is(.n-inst, .n-pop, .n-mech__bubble, .n-verdict__c, .n-fut__panel, .n-work__c, .n-step, .n-vsec .video) { border-radius: 20px; }
body[data-theme="nenshiki-E5"] .n-pop { box-shadow: 0 2px 0 rgba(31, 35, 51, .07); }
body[data-theme="nenshiki-E6"] .n-res :is(.n-inst, .n-pop, .n-mech__bubble, .n-verdict__c, .n-fut__panel, .n-work__c, .n-step, .n-vsec .video) { border-radius: 18px; border-width: 1px; }
body[data-theme="nenshiki-E6"] .n-pop { box-shadow: none; }
body[data-theme="nenshiki-E7"] .n-res :is(.n-inst, .n-pop, .n-mech__bubble, .n-verdict__c, .n-fut__panel, .n-work__c, .n-step, .n-vsec .video, .n-switch) { border-width: 1.5px; }
body[data-theme="nenshiki-E7"] .n-pop { box-shadow: none; }
body:is([data-theme="nenshiki-E4"], [data-theme="nenshiki-E5"], [data-theme="nenshiki-E6"], [data-theme="nenshiki-E7"]) .n-rcpt { transform: none; }
body:is([data-theme="nenshiki-E4"], [data-theme="nenshiki-E5"], [data-theme="nenshiki-E6"], [data-theme="nenshiki-E7"]) :is(.n-next, .n-rcpt__name, .n-pop__tag, .n-fut__era) { transform: none; }
body:not([data-theme="nenshiki-E3"]) .n-rcpt__h { letter-spacing: .1em; }

/* 見出しの札（ページの上） */
body[data-theme="nenshiki-E1"] .hdr { border-bottom: 3px double #151515; margin: 0 12px; padding: 0 4px; }
body[data-theme="nenshiki-E1"] .hdr__fuda { font-family: "Zen Antique", serif; font-weight: 400; font-size: 18px; letter-spacing: .2em; }
body[data-theme="nenshiki-E2"] .hdr__fuda { font-family: "DotGothic16", sans-serif; font-weight: 400; color: #000080; background: #fff; border: 2px outset #D4D0C8; padding: 4px 8px; }
body[data-theme="nenshiki-E2"] .hdr__home { background: #fff; padding: 0 6px; }
body[data-theme="nenshiki-E3"] .hdr__fuda { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 15px; padding: 9px 12px; background: #111; color: #FFD400; transform: rotate(-2deg); box-shadow: 3px 3px 0 #E0251B; }
body[data-theme="nenshiki-E4"] .hdr { background: #1ABC9C; }
body[data-theme="nenshiki-E4"] .hdr__home { background: #fff; border-radius: 4px; padding: 0 8px; }
body[data-theme="nenshiki-E4"] .hdr__fuda { color: #0B3B32; font-family: "M PLUS 1p", sans-serif; font-weight: 800; }
body[data-theme="nenshiki-E5"] .hdr { background: #fff; border-bottom: 2px solid #1F2333; }
body[data-theme="nenshiki-E5"] .hdr__fuda { display: flex; align-items: center; gap: 8px; font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 15px; line-height: 1.2; }
.hdr__av { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #1F2333; background: #FF6B57 center 58% / 150% auto no-repeat; }
.hdr__nm small { display: block; font-size: 14px; font-weight: 700; color: #0E7F57; }
.hdr__nm small::before { content: "●"; margin-right: 3px; }
body[data-theme="nenshiki-E6"] .hdr__fuda { border: 1px solid #C9D0DC; border-radius: 999px; padding: 8px 12px; background: rgba(255, 255, 255, .8); }
body[data-theme="nenshiki-E7"] .hdr__fuda { font-family: "Azeret Mono", monospace; font-weight: 500; font-size: 16px; color: #3BF0FF; letter-spacing: .08em; }
/* デイトラのロゴは色を変えない（白抜きにしない）。暗い地では白い札に載せる */
body[data-theme="nenshiki-E7"] .hdr__logo { background: #fff; padding: 4px 8px; border-radius: 6px; box-sizing: content-box; }

/* ── 2) 1画面目の組み方（共通の骨） */
.ef { container-type: inline-size; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.ef__open { font-weight: 400; }
.ef__k, .ef__n, .ef__t { display: block; }
.ef__n { line-height: 1; white-space: nowrap; }
.ef__n b { font-weight: inherit; }
.ef__up { position: relative; }
.ef__ut { font-weight: 800; }
.ef__go::after { display: none; }
.ef__care .ef__ch { font-weight: 800; }
.n-first { margin-bottom: 8px; }

/* 時代×タイプの名前と読み物（2026-11-05。時代の言い切りのすぐ後に、チェックの印＋名前だけを大きく1行、その下に読み物を3段落。寄り添いの前）。色・書体は時代ごと。
   チェックの印（.ef__ck）は絵文字にならないよう、字ではなく形で描く（字の色に合う） */
.ef__pn { margin-top: 12px; font-size: 22px; font-weight: 800; line-height: 1.5; }
.ef__pn b { font-weight: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ef__ck { display: inline-block; width: .95em; height: .95em; margin-right: .22em; vertical-align: -.1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 13.2 6 9.6l3.7 3.5L18.4 3l3.4 3L10 21z'/%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'%3E%3Cpath d='M2.5 13.2 6 9.6l3.7 3.5L18.4 3l3.4 3L10 21z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ef__pb { margin-top: 18px; }
.ef__pb p { font-size: 16px; line-height: 1.85; }
.ef__pb p + p { margin-top: 12px; }
.ef--showa .ef__pn { margin: 12px 4px 0; font-family: "Zen Antique", serif; font-weight: 400; font-size: 23px; }
.ef--showa .ef__pb { margin: 18px 4px 0; font-family: "Zen Old Mincho", serif; font-weight: 700; }
.ef--showa .ef__pb p { line-height: 1.9; }
.ef--heisei .ef__pn { margin-top: 4px; font-size: 20px; color: #CC0066; }
.ef--heisei .ef__pb { margin: 8px 0 12px; }
.ef--heisei .ef__pb p { line-height: 1.75; }
.ef--pop .pc__pn { grid-area: tl; margin: 0; padding: 10px 14px 13px 16px; border-top: 2.5px dashed #111; font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 19px; }
/* 結果の画面の値札は縦に1列: 言い切り → 絵（大きく中央）→ タイプの名前（中央）→ 4つの力のメーター（同じ囲みの中。点線で仕切る）。2026-11-05 */
.ef--page.ef--pop .pc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "o" "pic" "tl" "mt"; }
.ef--page.ef--pop .pc__pic { justify-self: center; width: 64%; margin: 16px 0 18px; }
.ef--page.ef--pop .pc__pn { padding: 4px 12px 18px; border-top: 0; text-align: center; font-size: min(27px, 7.4cqw); line-height: 1.6; }
.ef--page.ef--pop .pc__mt { grid-area: mt; margin: 0; padding: 16px 16px 18px; background: none; border: 0; border-top: 2.5px dashed #111; border-radius: 0; }
.ef--pop .pc__pn b { padding: 0 2px; background: linear-gradient(transparent 58%, #FFE14D 58%); }
.ef--pop .pc__pn .ef__ck { color: #D9261C; }
.ef--pop .ef__pb { margin-top: 30px; }
.ef--pop .ef__pb p { font-weight: 500; }
.ef--pop .ef__pb + .ef__care { margin-top: 18px; }
.ef--flat .ef__pn { margin-top: 10px; font-family: "M PLUS 1p", sans-serif; font-size: 21px; color: #2475B0; }
.ef--flat .ef__pb { margin-top: 16px; font-family: "M PLUS 1p", sans-serif; }
.ef--flat .ef__pb p { font-weight: 500; }
.ef--chat .ef__pn { margin-top: 0; font-size: 19px; font-weight: 900; color: #C2410C; }
.ef--chat .ef__pb { margin-top: 0; }
.ef--chat .ef__pb p { font-weight: 500; line-height: 1.75; }
.ef--web3d .ef__pn { margin-top: 14px; }
.ef--web3d .ef__pn b { padding: 0 3px 0 1px; background: linear-gradient(transparent 62%, #C6F432 62%); }
.ef--hud .ef__pn { font-size: 21px; color: #3BF0FF; }
.ef--hud .ef__pb { color: #E6F6F8; }
.ef--hud .ef__pb p { line-height: 1.8; }

/* 4つの力の5段階のメーター（2026-11-05。時代の言い切り・タイプの名前のすぐ下、読み物の前。見出しは付けない）。名前・5つのます・「3/5」を1行に。
   色・書体は時代ごと（--mf: 塗ったますの色、--ml: 空のますの枠の色）。強い／伸びしろのある力で色は変えない */
.ef__mt { margin-top: 18px; --mf: currentColor; --ml: currentColor; }
.ef__mtl { display: grid; gap: 9px; }
.ef__m { display: grid; grid-template-columns: 4.6em 1fr auto; align-items: center; gap: 10px; }
.ef__mn { font-size: 16px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.ef__mb { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 4px; height: 14px; }
.ef__mb i { border: 2px solid var(--ml); border-radius: 3px; }
.ef__mb i.f { background: var(--mf); border-color: var(--mf); }
.ef__mv { font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ef__mv b { font-size: 20px; font-weight: 800; }
.ef--showa .ef__mt { margin: 18px 4px 0; padding: 14px 0; border-top: 4px double #151515; border-bottom: 4px double #151515; --mf: #151515; --ml: #151515; font-family: "Zen Old Mincho", serif; }
.ef--showa .ef__mb i { border-radius: 0; }
.ef--heisei .ef__mt { margin: 10px 0 4px; padding: 10px; background: #fff; border: 2px solid #000080; --mf: #CC0066; --ml: #000080; }
.ef--heisei .ef__mb i { border-radius: 0; }
.ef--pop .ef__mt { margin-top: 30px; padding: 14px; background: #fff; border: 3px solid #111; border-radius: 12px; --mf: #D9261C; --ml: #111; }
.ef--pop .ef__mt + .ef__pb { margin-top: 18px; }
.ef--flat .ef__mt { margin-top: 16px; padding: 14px; background: #fff; border-radius: 4px; font-family: "M PLUS 1p", sans-serif; --mf: #2475B0; --ml: #C5D3DA; }
.ef--flat .ef__mb i { border-radius: 2px; }
.ef--chat .ef__mt { margin-top: 0; --mf: #FF6B57; --ml: #1F2333; }
.ef--chat .ef__m { grid-template-columns: 4.6em 150px auto; } /* 吹き出しは中身の幅に縮むので、ますの幅を決めておく */
.ef--chat .ef__mb i { border-radius: 999px; }
.ef--web3d .ef__mt { margin-top: 20px; padding: 16px; background: #fff; border: 1px solid #C9D0DC; border-radius: 18px; --mf: #0B1E3F; --ml: #C9D0DC; }
.ef--web3d .ef__mb i { border-width: 1.5px; border-radius: 999px; }
.ef--hud .ef__mt { margin-top: 18px; padding: 14px; border: 1px solid rgba(59, 240, 255, .6); background: #0A141C; color: #E6F6F8; --mf: #3BF0FF; --ml: rgba(59, 240, 255, .5); }
.ef--hud .ef__mb i { border-width: 1.5px; border-radius: 0; }
.ef--hud .ef__mv b { color: #3BF0FF; }

/* 共通の動き（motion.md）: 1画面目は少しずつ出る。ボタンは最初の1秒以内に見える */
.ef.is-anim .ef__vis { opacity: 0; transform: translateY(16px); }
.ef.is-anim.is-go .ef__vis { opacity: 1; transform: none; transition: opacity .4s, transform .4s var(--ease); }

/* ── E1 昭和: 白黒の紙面 */
.ef--showa .ef__photo { border: 1px solid #151515; padding: 4px; background: #F7F6F2; margin-top: 8px; }
.ef--showa .ef__photo img { width: 100%; aspect-ratio: 16 / 9.4; object-fit: cover; object-position: 50% 55%; filter: grayscale(1) contrast(1.06); }
.ef--showa .ef__open { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: end; margin-top: 10px; padding: 0 4px 8px; border-bottom: 1px solid #151515; }
.ef--showa .ef__k { grid-column: 1 / -1; font-family: "Zen Old Mincho", serif; font-weight: 700; font-size: 18px; line-height: 1.5; }
.ef--showa .ef__n { position: relative; font-family: "Zen Antique", serif; font-size: min(118px, calc((100cqw - 140px) / var(--ew, 2))); letter-spacing: .04em; padding: 6px 12px 0 4px; }
.ef--showa .ef__n::after { content: ""; position: absolute; left: -8px; right: -10px; top: 4px; bottom: -6px; border: 3px solid #151515; border-radius: 50% 46% 52% 44% / 52% 48% 54% 46%; transform: rotate(-4deg); }
.ef--showa .ef__u { font-size: .42em; }
.ef--showa .ef__t { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 24px; padding: 0 0 4px 16px; justify-self: start; }
.ef--showa .ef__sub { margin: 10px 4px 0; font-family: "Zen Old Mincho", serif; font-size: 16px; font-weight: 700; line-height: 1.6; }
.ef--showa .ef__tl { display: flex; margin: 12px 0 0; border: 1.5px solid #151515; }
.ef--showa .ef__tl li { flex: 1 1 auto; text-align: center; font-family: "Zen Antique", serif; font-size: 15px; line-height: 1; padding: 9px 2px; border-right: 1.5px solid #151515; white-space: nowrap; background: #F7F6F2; }
.ef--showa .ef__tl li:last-child { border-right: 0; }
.ef--showa .ef__tl li.on { background: #151515; color: #F7F6F2; }
.ef--showa .ef__care { margin: 18px 0 0; padding-left: 14px; border-left: 5px solid #151515; }
.ef--showa .ef__ch { font-family: "Zen Antique", serif; font-weight: 400; font-size: 26px; line-height: 1.4; }
.ef--showa .ef__cs { font-family: "Zen Old Mincho", serif; font-weight: 700; font-size: 17px; line-height: 1.6; }
.ef--showa .ef__up { margin-top: 22px; background: #F7F6F2; border: 4px double #151515; padding: 12px 16px 16px; }
.ef--showa .ef__ul { display: flex; justify-content: space-between; align-items: center; font-family: "Zen Antique", serif; font-size: 18px; }
.ef--showa .ef__ul i { font-style: normal; border: 1.5px solid #151515; padding: 2px 8px; font-size: 15px; }
.ef--showa .ef__ut { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 20px; line-height: 1.5; margin-top: 6px; }
.ef--showa .ef__go { margin-top: 12px; border-radius: 0; background: #FFC400; color: #151515; border: 2px solid #151515; box-shadow: 4px 4px 0 #151515; font-family: "Zen Antique", serif; font-weight: 400; font-size: 21px; min-height: 58px; }
.ef--showa.is-anim .ef__go { background: #F7F6F2; }
.ef--showa.is-anim.is-go .ef__go { background: #FFC400; transition: background-color .6s .9s; }
.ef--showa.is-anim .ef__n::after { clip-path: inset(0 100% 0 0); }
.ef--showa.is-anim.is-go .ef__n::after { clip-path: inset(0 0 0 0); transition: clip-path .5s ease-out .5s; }
.ef--showa.is-anim.is-go .ef__photo img { animation: flicker 2s 1; }
@keyframes flicker { 20% { opacity: .97; } 40% { opacity: 1; } 60% { opacity: .98; } }

/* ── E2 平成初期: 個人ホームページ */
.ef--heisei { margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
.ef--heisei .ef__mq { margin: 0 calc(var(--gut) * -1); overflow: hidden; background: #FFFF66; border-top: 2px solid #000; border-bottom: 2px solid #000; color: #CC0000; font-family: "DotGothic16", sans-serif; font-size: 17px; line-height: 32px; white-space: nowrap; }
.ef--heisei .ef__mqin { display: flex; width: max-content; animation: mq 24s linear infinite; }
.ef--heisei .ef__mqin span { padding-right: 40px; }
@keyframes mq { to { transform: translateX(-50%); } }
.ef--heisei .ef__box { margin-top: 10px; background: #fff; border: 3px outset #D4D0C8; padding: 10px 12px 14px; font-family: "BIZ UDGothic", sans-serif; }
.ef--heisei .ef__k { font-size: 16px; font-weight: 700; color: #000080; }
.ef--heisei .ef__open { display: block; }
.ef--heisei .ef__n, .ef--heisei .ef__t { display: inline; }
.ef--heisei .ef__n { font-family: "DotGothic16", sans-serif; font-size: min(62px, calc((100cqw - 76px) / (var(--ew, 4) + .5))); line-height: 1.15; color: #FF0066; text-shadow: 3px 3px 0 #FFFF00, 4px 4px 0 #000080; letter-spacing: .02em; }
.ef--heisei .ef__t { font-family: "DotGothic16", sans-serif; font-size: 22px; color: #000080; }
.ef--heisei .ef__rb { height: 6px; margin: 10px 0; background: linear-gradient(90deg, #FF0000, #FF9900, #FFFF00, #00CC00, #0066FF, #9900CC); }
.ef--heisei .ef__row { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 12px; align-items: center; }
.ef--heisei .ef__art { border: 2px inset #D4D0C8; background: #2E8EFD; }
.ef--heisei .ef__art img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ef--heisei .ef__sub { font-size: 16px; line-height: 1.6; }
.ef--heisei .ef__ctr { display: inline-flex; gap: 2px; margin-top: 8px; background: #000; padding: 3px; }
.ef--heisei .ef__ctr i { font-style: normal; font-family: "DotGothic16", sans-serif; font-size: 17px; color: #33FF66; background: #111; width: 17px; text-align: center; line-height: 24px; }
.ef--heisei .ef__ctrl { font-size: 14px; margin-top: 4px; }
.ef--heisei .ef__tl { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 16px; }
.ef--heisei .ef__tl li { color: #222; line-height: 1.9; } /* 下線つきの青はリンクに見えるので使わない（押しても何も起きないため。R3 P2-3） */
.ef--heisei .ef__tl li.on { color: #551A8B; font-weight: 700; }
.ef--heisei .ef__tl li.on::before { content: "▶"; color: #FF0000; font-size: 14px; text-decoration: none; display: inline-block; margin-right: 2px; }
.ef--heisei .ef__care p { font-size: 16px; line-height: 1.7; }
.ef--heisei .ef__care b { color: #CC0000; font-size: 19px; }
/* 平成のホームページの「工事中」は時代の印として文だけ残し、黄と黒の斜め縞（工事現場の警告に見える）はやめた */
.ef--heisei .ef__koji { display: flex; align-items: center; margin-top: 10px; padding: 6px 8px; background: #FFFF66; border: 2px solid #000; }
.ef--heisei .ef__koji span { font-family: "DotGothic16", sans-serif; font-size: 17px; padding: 1px 2px; }
.ef--heisei .ef__up { margin-top: 10px; background: #fff; border: 3px outset #D4D0C8; padding: 12px 12px 14px; }
.ef--heisei .ef__ut { font-family: "BIZ UDGothic", sans-serif; font-size: 19px; font-weight: 700; line-height: 1.55; }
.ef--heisei .ef__new { display: inline-block; background: #C00000; color: #FFFF66; font-family: "DotGothic16", sans-serif; font-size: 15px; padding: 0 5px; margin-right: 6px; animation: newc 2s steps(1) infinite; }
@keyframes newc { 50% { background: #FFFF66; color: #C00000; } }
.ef--heisei .ef__go { margin-top: 10px; border-radius: 0; background: #D4D0C8; color: #000080; border: 3px outset #fff; box-shadow: inset -2px -2px 0 #808080; font-family: "BIZ UDGothic", sans-serif; font-weight: 700; font-size: 19px; min-height: 56px; }
.ef--heisei .ef__go:active { border-style: inset; box-shadow: none; translate: none; }

/* ── E3 2000年代: 店頭POPの値札 */
/* 2000年代は地が濃い黄色なので、本文（太さを決めていない字）を少し太めにする（400 → 500。2026-11-05）。500 の書体は eras.js の E3 の fonts で読む */
body[data-theme="nenshiki-E3"] { font-weight: 500; }
.ef--pop .pc { container-type: inline-size; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44%; grid-template-areas: "o o" "ln pic" "tl tl"; background: #fff; border: 3px solid #111; border-radius: 8px; box-shadow: 0 7px 0 #111; transform: rotate(-1deg); margin: 22px 2px 0; }
.ef--pop .ef__open { grid-area: o; display: flex; flex-wrap: wrap; align-items: baseline; }
.ef--pop .ef__k { flex: 1 0 100%; padding: 9px 112px 9px 16px; background: #E0251B; color: #fff; border-bottom: 3px solid #111; border-radius: 5px 5px 0 0; font-family: "Dela Gothic One", sans-serif; font-size: 19px; line-height: 1.35; }
.ef--pop .ef__n { display: flex; align-items: baseline; padding: 14px 0 2px 16px; font-family: "Dela Gothic One", sans-serif; }
.ef--pop .ef__n b { font-size: min(100px, calc((100cqw - 90px) / var(--ew, 3))); letter-spacing: -.02em; }
.ef--pop .ef__u { font-size: min(42px, calc((100cqw - 90px) / var(--ew, 3) * .42)); }
.ef--pop .ef__t { padding: 0 0 0 4px; font-family: "Yusei Magic", sans-serif; font-size: 22px; line-height: 1.3; }
.ef--pop .pc__ln { grid-area: ln; align-self: start; padding: 8px 8px 12px 18px; font-family: "Yusei Magic", sans-serif; font-size: 19px; line-height: 1.55; color: #D9261C; word-break: keep-all; }
.ef--pop .pc__pic { grid-area: pic; position: relative; align-self: center; margin: 4px 12px 12px 0; overflow: hidden; border-radius: 6px; container-type: inline-size; }
.ef--pop .pc__img { width: 100%; aspect-ratio: 1059 / 1000; object-fit: contain; }
/* 値札の「アップデート対応」などの札: 絵の角に斜めに掛けたたすきは、字が絵の枠の外へ出て切れた（代表指摘 2026-10-20）。
   絵の中に収まる、少し傾けた店頭POPの札にする。字の大きさは絵の幅に合わせる（14px より小さくしない。1行のまま） */
@media (max-width: 339px) { .ef--pop .pc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "o" "ln" "pic" "tl"; } .ef--pop .pc__pic { justify-self: center; width: 70%; margin: 0 0 12px; } } /* とても狭い幅（320）では一言と絵を縦に並べる（札「アップデート対応」を1行で絵の中に、一言を文節の途中で折らずに） */
.ef--pop .pc__band { position: absolute; left: 4px; top: 16px; max-width: calc(100% - 6px); padding: 3px 4px 4px; letter-spacing: -.05em; transform: rotate(-6deg); transform-origin: 0 0; text-align: center; background: #D9261C; color: #fff; font-family: "Dela Gothic One", sans-serif; font-size: max(14px, min(15px, calc((100cqw - 36px) / 8.4))); line-height: 1.2; border: 2px solid #111; border-radius: 3px; box-shadow: 2px 2px 0 #111; white-space: nowrap; }
.ef--pop .pc__burst { position: absolute; right: -2px; top: -32px; width: 116px; height: 116px; transform: rotate(9deg); z-index: 2; }
.ef--pop .pc__burst > span { font-size: 15px; padding: 0 17%; }
.ef--pop .pc__chips { grid-area: tl; display: flex; gap: 4px; padding: 12px 10px 14px; border-top: 2.5px dashed #111; }
.ef--pop .pc__chips li { flex: 1 1 auto; min-width: max-content; text-align: center; font-family: "Dela Gothic One", sans-serif; font-size: 14px; line-height: 1; padding: 8px 3px; border: 2px solid #111; border-radius: 4px; background: #fff; white-space: nowrap; letter-spacing: -.04em; }
.ef--pop .pc__chips li.on { flex: none; background: #D9261C; color: #fff; transform: rotate(-3deg); box-shadow: 2px 2px 0 #111; position: relative; z-index: 1; }
.ef--pop .ef__care { margin-top: 30px; }
.ef--pop .ef__ch { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 20px; line-height: 1.45; }
.ef--pop .ef__cs { font-size: 18px; font-weight: 800; line-height: 1.55; }
.ef--pop .n-upd { margin-top: 14px; background: #fff; border: 3px solid #111; border-radius: 12px; box-shadow: 0 6px 0 #111; overflow: hidden; }
.ef--pop .n-upd__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; background: #1A5FE6; color: #fff; border-bottom: 3px solid #111; }
.ef--pop .n-upd__hd b { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.3; }
.ef--pop .n-upd__chip { font-family: "Dela Gothic One", sans-serif; font-size: 15px; line-height: 1; padding: 6px 9px; border-radius: 4px; background: #FFD400; color: #111; }
.ef--pop .ef__ut { padding: 12px 14px 0; font-size: 20px; line-height: 1.5; }
.ef--pop .ef__go { width: calc(100% - 28px); margin: 14px 14px 16px; border-radius: 28px; border: 2px solid #111; background: linear-gradient(#FAFAFA, #E4E7EB 48%, #C3C9D1 52%, #E8EBEF); color: #111; box-shadow: inset 0 1px 0 #fff, 0 4px 0 #111; }
.ef--pop .ef__go:active { background: linear-gradient(#C3C9D1, #E4E7EB 48%, #FAFAFA 52%, #E8EBEF); }
.ef--pop.is-anim .pc { transform-origin: 50% 0; transform: perspective(1000px) rotateX(-30deg); opacity: 0; }
.ef--pop.is-anim.is-go .pc { transform: rotate(-1deg); opacity: 1; transition: transform .4s var(--ease), opacity .2s; }
.ef--pop.is-anim .pc__burst { transform: rotate(9deg) scale(.8); opacity: 0; }
.ef--pop.is-anim.is-go .pc__burst { transform: rotate(9deg) scale(1); opacity: 1; transition: transform .25s ease-out .45s, opacity .1s .45s; }
.ef--pop.is-anim .ef__vis { opacity: 1; transform: none; }

/* ── E4 2014年: フラット */
.ef--flat .ef__art { margin: 0 calc(var(--gut) * -1); background: #F1C40F; }
.ef--flat .ef__art img { width: 100%; height: 230px; object-fit: cover; object-position: 50% 22%; }
.ef--flat .ef__ttl { display: flex; gap: 14px; align-items: center; margin-top: 16px; }
.ef--flat .ef__ic { position: relative; flex: none; width: 74px; height: 74px; border-radius: 17px; background: #E74C3C; color: #fff; font-family: "M PLUS 1p", sans-serif; font-weight: 800; font-size: 27px; display: grid; place-items: center; overflow: hidden; }
.ef--flat .ef__ic::after { content: ""; position: absolute; left: 40px; top: 40px; width: 120px; height: 120px; background: rgba(0, 0, 0, .14); transform: rotate(45deg); transform-origin: 0 0; }
.ef--flat .ef__ic span { position: relative; z-index: 1; }
.ef--flat .ef__open { font-family: "M PLUS 1p", sans-serif; min-width: 0; }
.ef--flat .ef__k { font-size: 16px; font-weight: 500; color: #56656B; }
.ef--flat .ef__n { display: inline; font-weight: 300; font-size: min(52px, calc((100cqw - 150px) / (var(--ew, 3) + .4))); letter-spacing: -.01em; }
.ef--flat .ef__t { display: inline; font-size: 19px; font-weight: 500; }
.ef--flat .ef__sub { margin-top: 10px; font-family: "M PLUS 1p", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.6; }
.ef--flat .ef__tl { display: flex; margin-top: 12px; border-radius: 4px; overflow: hidden; }
.ef--flat .ef__tl li { flex: 1 1 auto; text-align: center; font-family: "M PLUS 1p", sans-serif; font-size: 14px; font-weight: 500; line-height: 1; padding: 11px 1px; background: #fff; color: #56656B; border-right: 1px solid #ECF0F1; white-space: nowrap; transition: background-color .2s; }
.ef--flat .ef__tl li.on { background: #2475B0; color: #fff; font-weight: 800; }
.ef--flat .ef__care { margin-top: 16px; font-family: "M PLUS 1p", sans-serif; }
.ef--flat .ef__ch { font-size: 20px; font-weight: 800; }
.ef--flat .ef__cs { font-size: 16px; font-weight: 500; line-height: 1.6; }
.ef--flat .ef__up { margin-top: 20px; background: #fff; border-radius: 4px; padding: 14px 16px 16px; font-family: "M PLUS 1p", sans-serif; }
.ef--flat .ef__ul { font-size: 15px; font-weight: 800; color: #12806A; }
.ef--flat .ef__ut { font-size: 19px; line-height: 1.5; margin-top: 2px; }
.ef--flat .ef__go { margin-top: 12px; border-radius: 4px; background: #12806A; box-shadow: 0 4px 0 #0B5E4E; font-family: "M PLUS 1p", sans-serif; }
.ef--flat.is-anim .ef__head, .ef--flat.is-anim .ef__mt, .ef--flat.is-anim .ef__pb, .ef--flat.is-anim .ef__care, .ef--flat.is-anim .ef__up { opacity: 0; transform: translateX(16px); }
.ef--flat.is-anim.is-go .ef__head, .ef--flat.is-anim.is-go .ef__mt, .ef--flat.is-anim.is-go .ef__pb, .ef--flat.is-anim.is-go .ef__care, .ef--flat.is-anim.is-go .ef__up { opacity: 1; transform: none; transition: opacity .3s, transform .3s var(--ease); }
.ef--flat.is-anim .ef__vis { opacity: 1; transform: none; }

/* ── E5 2023年: チャットで結果が届く（作り直し版・_design/ab/eras/comps/E5_result） */
.ef--chat { font-family: "Zen Maru Gothic", sans-serif; }
.ef--chat .ef__chat { display: grid; gap: 10px; margin-top: 12px; }
.ef--chat .ef__me { justify-self: end; max-width: 80%; padding: 9px 16px; border-radius: 20px 20px 6px 20px; background: #FF6B57; color: #1F2333; border: 2px solid #1F2333; font-size: 17px; font-weight: 900; line-height: 1.5; }
.ef--chat .ef__bb { position: relative; justify-self: start; max-width: 94%; background: #fff; border: 2px solid #1F2333; border-radius: 20px 20px 20px 6px; padding: 12px 16px; box-shadow: 3px 3px 0 #1F2333; }
.ef--chat .ef__k { font-size: 16px; font-weight: 700; }
.ef--chat .ef__n { display: inline; font-weight: 900; font-size: min(56px, calc((100cqw - 90px) / (var(--ew, 3) + .4))); letter-spacing: -.02em; }
.ef--chat .ef__t { display: inline; font-size: 20px; font-weight: 700; }
.ef--chat .ef__vid { width: 94%; padding: 0; overflow: hidden; }
.ef__scr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #F3D9B8; }
.ef__scr img, .ef__scr video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
/* 本物の動画（2026-10-20）: 再生中は三角を出さず、止めると三角。ボタンは動画全体（押すと止める／また再生する） */
.ef__play { position: absolute; inset: 0; width: 100%; border: 0; background: none; cursor: pointer; }
.ef__play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -18px 0 0 -11px; border: 18px solid transparent; border-left: 28px solid rgba(255, 255, 255, .95); border-right: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.ef__vid.is-playing .ef__play::after { opacity: 0; }
.ef__vid.is-playing .ef__pl { width: 10px; height: 12px; border: 0; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.ef__bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #1F2333; color: #fff; font-size: 14px; font-weight: 700; }
.ef__pl { width: 0; height: 0; border: 7px solid transparent; border-left: 11px solid #fff; border-right: 0; }
.ef__bar i { flex: 1; height: 4px; background: #5B6075; position: relative; }
.ef__bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: #FF6B57; }
.ef__vid:has(.ef__mov) .ef__bar b { width: 0; } /* 本物の動画では、再生した所まで（timeupdate で伸ばす） */
.ef__cap { padding: 10px 14px 12px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.ef--chat .ef__sub { font-size: 16px; font-weight: 700; line-height: 1.6; }
.ef--chat .ef__tl { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ef--chat .ef__tl li { font-size: 15px; font-weight: 700; line-height: 1; padding: 7px 10px; border-radius: 14px; background: #FFF6E6; border: 1.5px solid #1F2333; }
.ef--chat .ef__tl li.on { background: #FF6B57; color: #1F2333; font-weight: 900; }
.ef--chat .ef__bb.is-mint { background: #5ED6A8; }
.ef--chat .ef__ch { font-size: 20px; font-weight: 900; line-height: 1.45; }
.ef--chat .ef__cs { font-size: 16px; font-weight: 700; line-height: 1.6; }
.ef--chat .ef__ty { display: none; gap: 5px; padding: 12px 16px; background: #fff; border: 2px solid #1F2333; border-radius: 20px 20px 20px 6px; width: max-content; }
.ef--chat .ef__ty i { width: 8px; height: 8px; border-radius: 50%; background: #1F2333; opacity: .3; animation: ty 1s infinite; }
.ef--chat .ef__ty i:nth-child(2) { animation-delay: .2s; } .ef--chat .ef__ty i:nth-child(3) { animation-delay: .4s; }
@keyframes ty { 40% { opacity: 1; } }
.ef--chat .ef__up { margin-top: 16px; background: #fff; border: 2px solid #1F2333; border-radius: 24px; padding: 14px 14px 14px 18px; box-shadow: 3px 3px 0 #1F2333; }
.ef--chat .ef__ul { font-size: 15px; font-weight: 900; color: #C23A27; }
.ef--chat .ef__ut { font-size: 18px; font-weight: 700; line-height: 1.5; }
.ef--chat .ef__go { margin-top: 10px; background: #1F2333; font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; }
.ef--chat .ef__send { width: 26px; height: 26px; border-radius: 50%; background: #fff; position: relative; flex: none; }
.ef--chat .ef__send::before { content: ""; position: absolute; left: 50%; top: 7px; width: 8px; height: 8px; margin-left: -4px; border-left: 2.5px solid #1F2333; border-top: 2.5px solid #1F2333; transform: rotate(45deg); }
.ef--chat .ef__send::after { content: ""; position: absolute; left: 50%; top: 8px; width: 2.5px; height: 11px; margin-left: -1.2px; background: #1F2333; }
/* 届く順番（motion.md）: 自分の吹き出し → 入力中の点 → 結果 → 動画 → 時代 → 寄り添い。ボタンは最初から見えている */
.ef--chat.is-anim .ef__chat > :not(.ef__ty) { opacity: 0; transform: translateY(8px) scale(.97); }
.ef--chat.is-anim .ef__ty.is-first { display: flex; opacity: 0; }
.ef--chat.is-anim.is-go .ef__ty.is-first { animation: tyshow 1s .2s both; }
@keyframes tyshow { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; } }
.ef--chat.is-anim.is-go .ef__chat > :not(.ef__ty) { opacity: 1; transform: none; transition: opacity .2s, transform .25s var(--ease); }
.ef--chat.is-anim.is-go .ef__me { transition-delay: 0s !important; }
.ef--chat.is-anim.is-go .ef__chat > :nth-child(3) { transition-delay: 1.2s; }
.ef--chat.is-anim.is-go .ef__chat > :nth-child(4) { transition-delay: 1.45s; }
.ef--chat.is-anim.is-go .ef__chat > :nth-child(5) { transition-delay: 1.7s; }
.ef--chat.is-anim.is-go .ef__chat > :nth-child(6) { transition-delay: 1.95s; }
.ef--chat.is-anim.is-go .ef__chat > :nth-child(7) { transition-delay: 2.2s; }
.ef--chat.is-anim.is-go .ef__chat > :nth-child(8) { transition-delay: 2.45s; }
.ef--chat.is-anim .ef__chat.ef__vis { opacity: 1; transform: none; }

/* ── E5 2023年（結果の画面。2026-11-05 から）: AIの回答の画面。吹き出しに分けず、1本の文章で読ませる（nenshiki-first.js の reply）。
   並び: 言い切り → パスタのAI動画 → タイプの名前 → 4つの力 → 読み物 → 寄り添い → 今日入れるアップデート。色は時代の絵と同じクリーム・コーラル・ミント。
   前のチャット風（.ef--chat）はシェア画像で使う。結果の画面も eras.js の pageTpl を外すと戻る */
.ef--reply { font-family: "Noto Sans JP", system-ui, sans-serif; }
.ef--reply .ef__head { margin-top: 18px; }
.ef--reply .ef__k { font-size: 16px; font-weight: 700; line-height: 1.5; }
.ef--reply .ef__n { display: inline; font-weight: 900; font-size: min(68px, 17.4vw); line-height: 1.15; letter-spacing: -.03em; text-autospace: no-autospace; }
.ef--reply .ef__t { display: inline; margin-left: 4px; font-size: 22px; font-weight: 700; }
.ef--reply .ef__vid { margin-top: 18px; overflow: hidden; background: #fff; border: 2px solid #1F2333; border-radius: 20px; box-shadow: 3px 3px 0 #1F2333; }
.ef--reply .ef__pn { margin-top: 26px; font-size: 22px; font-weight: 900; line-height: 1.5; }
.ef--reply .ef__pn b { padding: 0 3px 0 1px; background: linear-gradient(transparent 60%, #BDEFD9 60%); }
.ef--reply .ef__ck { color: #F26B55; }
.ef--reply .ef__mt { margin-top: 28px; padding: 18px; background: #fff; border: 1px solid #E8DCC6; border-radius: 18px; --mf: #F26B55; --ml: #F1E7D6; }
.ef--reply .ef__mtl { gap: 11px; }
.ef--reply .ef__mb { gap: 5px; }
.ef--reply .ef__mb i { border-radius: 999px; }
.ef--reply .ef__mb i:not(.f) { background: #F1E7D6; }
.ef--reply .ef__mv b { font-weight: 900; }
.ef--reply .ef__pb { margin-top: 32px; }
.ef--reply .ef__pb p { font-weight: 500; line-height: 1.9; }
.ef--reply .ef__care { margin-top: 36px; padding: 16px 18px 18px; border-radius: 18px; background: #D8F5E8; }
.ef--reply .ef__ch { font-size: 19px; font-weight: 900; line-height: 1.5; }
.ef--reply .ef__cs { margin-top: 4px; font-size: 15px; font-weight: 700; line-height: 1.6; }
.ef--reply .ef__up { background: #fff; border: 2px solid #1F2333; border-radius: 26px; padding: 16px 16px 16px 20px; }
.ef--reply .ef__ul { font-size: 14px; font-weight: 700; line-height: 1.5; color: #C2410C; }
.ef--reply .ef__ut { margin-top: 2px; font-size: 18px; font-weight: 900; line-height: 1.5; }
.ef--reply .ef__go { margin-top: 14px; background: #1F2333; font-weight: 800; }
.ef--reply .ef__send { width: 26px; height: 26px; border-radius: 50%; background: #fff; position: relative; flex: none; }
.ef--reply .ef__send::before { content: ""; position: absolute; left: 50%; top: 7px; width: 8px; height: 8px; margin-left: -4px; border-left: 2.5px solid #1F2333; border-top: 2.5px solid #1F2333; transform: rotate(45deg); }
.ef--reply .ef__send::after { content: ""; position: absolute; left: 50%; top: 8px; width: 2.5px; height: 11px; margin-left: -1.2px; background: #1F2333; }
/* 出るとき: 言い切り → 動画 → 名前 → 4つの力 の順に、下から少しずつ */
.ef--reply.is-anim :is(.ef__vid, .ef__pn, .ef__mt) { opacity: 0; transform: translateY(12px); }
.ef--reply.is-anim.is-go :is(.ef__vid, .ef__pn, .ef__mt) { opacity: 1; transform: none; transition: opacity .35s, transform .4s var(--ease); }
.ef--reply.is-anim.is-go .ef__vid { transition-delay: .25s; }
.ef--reply.is-anim.is-go .ef__pn { transition-delay: .5s; }
.ef--reply.is-anim.is-go .ef__mt { transition-delay: .7s; }
/* ページの上: チャットの相手の名前（丸い絵＋オンライン）をやめ、ほかの時代と同じ札に */
body[data-theme="nenshiki-E5"]:has(.ef--reply) .hdr { background: none; border-bottom: 0; }
body[data-theme="nenshiki-E5"]:has(.ef--reply) .hdr__fuda { display: block; padding: 8px 14px; border: 1px solid #E8DCC6; border-radius: 999px; background: #fff; font-family: "Noto Sans JP", system-ui, sans-serif; font-weight: 800; font-size: 14px; line-height: 1; }

/* ── E6 2026年: いま最新のWeb（3D） */
.ef--web3d .ef__scene { position: relative; margin: -8px calc(var(--gut) * -1) 0; height: 330px; overflow: hidden; }
.ef--web3d .ef__still { position: absolute; inset: 0; display: grid; place-items: center; }
.ef--web3d .ef__still img { width: 112%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 42%; }
.ef--web3d .ef__fx { position: absolute; inset: 0; }
.ef--web3d .ef__fx canvas { display: block; width: 100% !important; height: 100% !important; touch-action: pan-y; }
.ef--web3d .ef__fx.is-live ~ .ef__pin { display: none; }
.ef--web3d.is-3d .ef__still { opacity: 0; transition: opacity .4s; }
.ef__pin { position: absolute; z-index: 2; font-size: 15px; font-weight: 700; line-height: 1; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid #C9D0DC; color: #0B1E3F; white-space: nowrap; }
.ef__pin::before { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #C6F432; border: 2px solid #0B1E3F; left: -18px; top: 50%; margin-top: -7px; }
.ef--web3d .ef__pin.is-a { left: 46px; top: 110px; }
.ef--web3d .ef__pin.is-b { right: 30px; top: 262px; }
.ef--web3d .ef__head { position: relative; z-index: 2; margin-top: 6px; }
.ef--web3d .ef__k { font-size: 16px; font-weight: 700; }
.ef--web3d .ef__n { display: inline; font-family: "Murecho", sans-serif; font-weight: 900; font-size: min(88px, calc((100cqw - 90px) / (var(--ew, 3) + .2))); line-height: .95; letter-spacing: -.05em; }
.ef--web3d .ef__t { display: inline; font-size: 21px; font-weight: 800; margin-left: 2px; }
.ef--web3d .ef__sub { margin-top: 10px; font-size: 16px; line-height: 1.6; }
.ef__dots { position: relative; height: 40px; margin: 16px 8px 0; }
.ef__dots::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: #C9D0DC; }
.ef__dots i { position: absolute; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 2px solid #C9D0DC; }
.ef__dots i.on { width: 20px; height: 20px; top: -3px; margin-left: -10px; background: #C6F432; border-color: #0B1E3F; }
.ef__dots em { position: absolute; top: 20px; font-style: normal; font-size: 15px; font-weight: 800; transform: translateX(-50%); white-space: nowrap; }
.ef__chk { display: flex; gap: 12px; margin-top: 16px; }
.ef__chk > i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #0B1E3F; position: relative; }
.ef__chk > i::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border-right: 2.5px solid #C6F432; border-bottom: 2.5px solid #C6F432; transform: rotate(45deg); }
.ef--web3d .ef__ch { font-size: 18px; font-weight: 800; }
.ef--web3d .ef__cs { font-size: 16px; line-height: 1.6; }
.ef--web3d .ef__up { margin-top: 22px; background: #fff; border: 1px solid #C9D0DC; border-radius: 18px; padding: 14px 14px 14px 18px; }
.ef--web3d .ef__ul { font-size: 15px; font-weight: 700; color: #4B5A75; }
.ef--web3d .ef__ut { font-size: 19px; line-height: 1.5; }
.ef--web3d .ef__go { justify-content: space-between; margin-top: 12px; padding: 0 7px 0 24px; min-height: 56px; background: #0B1E3F; border-radius: 999px; box-shadow: none; }
.ef__arr { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #C6F432; position: relative; }
.ef__arr::before { content: ""; position: absolute; left: 12px; top: 20px; width: 17px; height: 2.5px; background: #0B1E3F; }
.ef__arr::after { content: ""; position: absolute; left: 20px; top: 16px; width: 8px; height: 8px; border-right: 2.5px solid #0B1E3F; border-top: 2.5px solid #0B1E3F; transform: rotate(45deg); }

/* ── E7 2029年: 暗い地のHUD（作り直し版・_design/ab/eras/comps/E7_result）。発光は意味のある線（走査・目盛り・自分の段）だけ */
.ef--hud { color: #E9F6F8; font-family: "M PLUS 1", sans-serif; }
.ef__hud { position: relative; margin-top: 4px; border: 1px solid rgba(59, 240, 255, .35); }
.ef__hud::before, .ef__hud::after { content: ""; position: absolute; z-index: 2; width: 20px; height: 20px; border: 2.5px solid #3BF0FF; }
.ef__hud::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.ef__hud::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.ef__hudin { position: relative; aspect-ratio: 1 / .86; overflow: hidden; background: #05080D; container-type: inline-size; }
.ef__hudin .ef__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.ef__scan { position: absolute; left: 0; right: 0; top: 58%; height: 2px; background: #3BF0FF; box-shadow: 0 0 12px 2px rgba(59, 240, 255, .7); }
.ef__scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 56px; background: linear-gradient(transparent, rgba(59, 240, 255, .14)); }
.ef__tag { position: absolute; left: 12px; font-family: "Azeret Mono", "M PLUS 1", monospace; font-weight: 500; font-size: 15px; line-height: 1.3; color: #3BF0FF; background: rgba(5, 8, 13, .82); padding: 4px 8px; border: 1px solid rgba(59, 240, 255, .5); max-width: calc(100% - 24px); }
.ef__tag b { color: #FFB020; font-weight: 500; }
.ef__tag.is-top { top: 12px; }
.ef__tag.is-bottom { bottom: 12px; font-family: "M PLUS 1", sans-serif; }
.ef--hud .ef__head { margin-top: 8px; }
.ef__ticks { display: block; height: 12px; background: repeating-linear-gradient(90deg, rgba(59, 240, 255, .6) 0 1.5px, transparent 1.5px 10px); }
.ef--hud .ef__k { margin-top: 8px; font-family: "M PLUS 1", sans-serif; font-size: 16px; color: #3BF0FF; }
.ef--hud .ef__k::before { content: "▍"; color: #FFB020; margin-right: 6px; }
.ef--hud .ef__n { display: inline; font-family: "Azeret Mono", monospace; font-weight: 500; font-size: min(84px, calc((100cqw - 100px) / (var(--ew, 3) * .95))); letter-spacing: -.04em; color: #fff; text-shadow: 0 0 18px rgba(59, 240, 255, .55); }
.ef--hud .ef__u { margin-left: 2px; }
.ef--hud .ef__u, .ef--hud .ef__t { font-family: "M PLUS 1", sans-serif; font-size: 21px; letter-spacing: 0; text-shadow: none; }
.ef--hud .ef__t { display: inline; margin-left: 2px; }
.ef--hud .ef__sub { margin-top: 8px; font-size: 16px; line-height: 1.55; color: #CFE7EA; }
.ef__bars { display: flex; gap: 4px; margin-top: 12px; }
.ef__bars i { flex: 1; height: 7px; background: rgba(59, 240, 255, .2); }
.ef__bars i.on { background: #3BF0FF; box-shadow: 0 0 8px #3BF0FF; }
.ef__say { margin-top: 16px; border-left: 2.5px solid #FFB020; padding-left: 12px; }
.ef--hud .ef__ch { color: #FFB020; font-size: 18px; font-weight: 800; line-height: 1.5; }
.ef--hud .ef__cs { font-size: 16px; line-height: 1.6; }
.ef--hud .ef__up { margin-top: 22px; border: 1px solid #3BF0FF; background: #0A141C; padding: 12px 14px 16px; }
.ef--hud .ef__ul { display: flex; justify-content: space-between; font-family: "M PLUS 1", sans-serif; font-weight: 800; font-size: 16px; color: #3BF0FF; }
.ef--hud .ef__ul i { font-style: normal; color: #FFB020; font-family: "Azeret Mono", monospace; }
.ef--hud .ef__ut { font-size: 19px; line-height: 1.5; color: #fff; margin-top: 2px; }
.ef--hud .ef__go { justify-content: space-between; margin-top: 12px; padding: 0 18px; border-radius: 0; background: #3BF0FF; color: #05080D; box-shadow: none; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.ef--hud .ef__arr { width: 24px; height: 24px; background: none; }
.ef--hud .ef__arr::before { background: #05080D; left: 2px; top: 11px; width: 20px; }
.ef--hud .ef__arr::after { border-color: #05080D; left: 12px; top: 7px; }
/* 相棒の目と胸の灯り（絵の上に重ねる。位置は絵の切り抜き＝aspect 1/.86・object-position 50% 52% から計算） */
.ef__hudin { --ey: 28.6%; --ey2: 27.4%; --cy: 41.5%; }
.ef__eye { position: absolute; z-index: 1; width: 4.6%; aspect-ratio: 1; margin: -2.3% 0 0 -2.3%; border-radius: 50%; background: radial-gradient(#E9FFFF 0 30%, #3BF0FF 55%, rgba(59, 240, 255, 0) 72%); box-shadow: 0 0 14px 4px rgba(59, 240, 255, .55); translate: var(--lx, 0) var(--ly, 0); transition: translate .25s var(--ease); animation: blink 6s 3s infinite; }
.ef__eye.is-l { left: 34.4%; top: var(--ey); }
.ef__eye.is-r { left: 42.9%; top: var(--ey2); }
@keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(.15); } }
.ef__core { position: absolute; z-index: 1; left: 38.3%; top: var(--cy); width: 3.2%; aspect-ratio: 1; margin: -1.6% 0 0 -1.6%; border-radius: 50%; background: radial-gradient(#FFF1D0 0 30%, #FFB020 60%, rgba(255, 176, 32, 0) 75%); box-shadow: 0 0 12px 3px rgba(255, 176, 32, .5); }
/* 照準: 相棒の顔に寄って止まる */
.ef__reti { position: absolute; z-index: 1; left: 38.6%; top: 28%; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; border: 1.5px solid rgba(59, 240, 255, .8); border-radius: 50%; }
.ef__reti::before, .ef__reti::after { content: ""; position: absolute; background: rgba(59, 240, 255, .8); }
.ef__reti::before { left: 50%; top: -12%; bottom: -12%; width: 1.5px; margin-left: -.75px; -webkit-mask: linear-gradient(#000 0 18%, transparent 18% 82%, #000 82%); mask: linear-gradient(#000 0 18%, transparent 18% 82%, #000 82%); }
.ef__reti::after { top: 50%; left: -12%; right: -12%; height: 1.5px; margin-top: -.75px; -webkit-mask: linear-gradient(90deg, #000 0 18%, transparent 18% 82%, #000 82%); mask: linear-gradient(90deg, #000 0 18%, transparent 18% 82%, #000 82%); }
.ef--share .ef__hudin { --ey: 26.4%; --ey2: 25%; --cy: 40.5%; }
.ef--share .ef__reti { top: 25.6%; }
.ef--hud.is-anim .ef__eye, .ef--hud.is-anim .ef__core { opacity: 0; box-shadow: none; }
.ef--hud.is-anim.is-go .ef__eye, .ef--hud.is-anim.is-go .ef__core { opacity: 1; box-shadow: 0 0 14px 4px rgba(59, 240, 255, .55); transition: opacity .15s 1.5s, box-shadow .5s 1.5s; }
.ef--hud.is-anim.is-go .ef__core { box-shadow: 0 0 12px 3px rgba(255, 176, 32, .5); transition-delay: 1.7s; }
.ef--hud.is-anim .ef__reti { opacity: 0; transform: scale(2.6) rotate(-45deg); }
.ef--hud.is-anim.is-go .ef__reti { opacity: 1; transform: none; transition: transform .6s var(--ease) 1.1s, opacity .2s 1.1s; }

/* 解析（1回）: 四隅が寄る → 走査線が1往復、通った所から絵が現れる → 自分の段が光る */
.ef--hud.is-anim .ef__hud::before { transform: translate(-14px, -14px); opacity: 0; }
.ef--hud.is-anim .ef__hud::after { transform: translate(14px, 14px); opacity: 0; }
.ef--hud.is-anim.is-go .ef__hud::before, .ef--hud.is-anim.is-go .ef__hud::after { transform: none; opacity: 1; transition: transform .3s var(--ease) .2s, opacity .2s .2s; }
.ef--hud.is-anim .ef__hudin .ef__img { clip-path: inset(0 0 100% 0); }
.ef--hud.is-anim.is-go .ef__hudin .ef__img { clip-path: inset(0 0 0 0); transition: clip-path .8s linear .5s; }
.ef--hud.is-anim.is-go .ef__scan { animation: scan 1.2s linear .5s both; }
@keyframes scan { 0% { translate: 0 -49.88cqw; } 66% { translate: 0 36.12cqw; } 100% { translate: 0 0; } } /* top でなく translate で動かす（位置のずれ＝CLS を出さない。R3 再確認 N-6）。.ef__hudin の高さ＝幅×0.86 なので、高さの -58%／+42% を cqw で書く */
.ef--hud.is-anim .ef__bars i.on { background: rgba(59, 240, 255, .2); box-shadow: none; }
.ef--hud.is-anim.is-go .ef__bars i.on { background: #3BF0FF; box-shadow: 0 0 8px #3BF0FF; transition: background-color .3s 1.6s, box-shadow .3s 1.6s; }
.ef--hud.is-anim .ef__say p { clip-path: inset(0 100% 0 0); }
.ef--hud.is-anim.is-go .ef__say p { clip-path: inset(0 0 0 0); transition: clip-path 1s steps(20) 1.8s; }
.ef--hud.is-anim .ef__vis { opacity: 1; transform: none; }

/* 2029年の下半分（暗い地）: 白い面・紺の面を、暗い面とシアンの線に置き換える */
body[data-theme="nenshiki-E7"] :is(.btn-line, .next__in, .share__text, .idx__item, .idx__cells a, .peek, .n-pop__tag) { background: #0A141C; color: #E9F6F8; border-color: #3BF0FF; box-shadow: none; }
body[data-theme="nenshiki-E7"] .go { background: #3BF0FF; color: #05080D; box-shadow: none; }
body[data-theme="nenshiki-E7"] .btn-next { border-color: #fff; box-shadow: none; }
body[data-theme="nenshiki-E7"] :is(.n-next, .n-step__when, .n-log__i::before, .video__k, .n-switch__knob) { background: #3BF0FF; color: #05080D; }
body[data-theme="nenshiki-E7"] .n-switch__b.is-on { color: #05080D; }
body[data-theme="nenshiki-E7"] .n-switch[data-on="move"] .n-switch__knob { background: #FFB020; }
body[data-theme="nenshiki-E7"] .is-not { background: #0A141C; }
body[data-theme="nenshiki-E7"] .n-work__mk { color: #05080D; }
body[data-theme="nenshiki-E7"] .is-not .n-work__mk { background: #0A141C; color: #E9F6F8; }
body[data-theme="nenshiki-E7"] .n-mech__face { background-color: #0A141C; border-color: #3BF0FF; }
body[data-theme="nenshiki-E7"] .n-mech__bubble::before { background: #0A141C; }
body[data-theme="nenshiki-E7"] .n-inst__item { background: #0F2230; }
body[data-theme="nenshiki-E7"] .n-clock { background: #0A141C; border-color: #E9F6F8; }
body[data-theme="nenshiki-E7"] .n-clock::before, body[data-theme="nenshiki-E7"] .n-clock::after { background: #E9F6F8; }
body[data-theme="nenshiki-E7"] .n-step.is-same { background: #0F2230; }
body[data-theme="nenshiki-E7"] .n-fut__era { color: #05080D; border-color: #05080D; }
body[data-theme="nenshiki-E7"] .n-switch[data-on="move"] ~ .n-fut__panel .n-fut__era { background: #3BF0FF; }
body[data-theme="nenshiki-E7"] .n-rcpt__name { color: #05080D; }
body[data-theme="nenshiki-E7"] .facts li { color: #E9F6F8; border-color: #3BF0FF; }
body[data-theme="nenshiki-E7"] .n-step__pb i.f { background: #3BF0FF; }
body[data-theme="nenshiki-E7"] .n-fut__pic, body[data-theme="nenshiki-E7"] .n-idx__art { background: #05080D; }
body[data-theme="nenshiki-E7"] .foot img { background: #fff; padding: 4px 8px; border-radius: 6px; box-sizing: content-box; }
body[data-theme="nenshiki-E7"] .n-h__mk { background: linear-gradient(transparent 62%, rgba(59, 240, 255, .35) 62%, rgba(59, 240, 255, .35) 92%, transparent 92%); }
body[data-theme="nenshiki-E7"] .n-verdict__v { color: #fff; }
body[data-theme="nenshiki-E7"] .n-verdict__band { border-color: #3BF0FF; }
body[data-theme="nenshiki-E7"] .n-inst__t, body[data-theme="nenshiki-E7"] .n-work__c.is-can .n-work__mk { color: #05080D; }

/* ── 幅の決めごと（768: 1列のまま幅を決める／1024以上: 左に絵、右に言葉とボタン） */


@media (prefers-reduced-motion: reduce) {
  .ef__mqin, .ef__new, .ef__ty i, .ef__scan, .ef__scr img, .ef__eye { animation: none !important; }
}

/* ── 時代の札（入口・質問の画面・入口の OG）。それぞれの時代の字と色 */
.era-chip { background: #fff; color: #1E2B3C; border: 2px solid #1E2B3C; font-weight: 800; }
.era-chip--E1 { background: #151515; color: #F7F6F2; border-color: #151515; font-family: "Zen Antique", serif; font-weight: 400; }
.era-chip--E2 { background: #D4D0C8; color: #000080; border: 2px outset #fff; font-family: "DotGothic16", sans-serif; font-weight: 400; }
.era-chip--E3 { background: #FFD400; color: #111; border: 2px solid #111; font-family: "Dela Gothic One", sans-serif; font-weight: 400; }
.era-chip--E4 { background: #12806A; color: #fff; border-color: #12806A; font-family: "M PLUS 1p", sans-serif; font-weight: 500; }
.era-chip--E5 { background: #FF6B57; color: #1F2333; border: 2px solid #1F2333; border-radius: 12px 12px 12px 3px; font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; }
.era-chip--E6 { background: #0B1E3F; color: #C6F432; border-color: #0B1E3F; border-radius: 999px; font-family: "Murecho", sans-serif; font-weight: 900; }
.era-chip--E7 { background: #05080D; color: #3BF0FF; border: 1px solid #3BF0FF; box-shadow: 0 0 6px rgba(59, 240, 255, .6); font-family: "Azeret Mono", monospace; font-weight: 500; }

/* シェア画像（幅390・高さ693で組む）では、絵を少し詰める */
.ef--share.ef--web3d .ef__scene { height: 330px; }
.ef--share.ef--hud .ef__hudin { aspect-ratio: 1 / .78; }
.ef--share.ef--chat .ef__scr { aspect-ratio: 16 / 6; }
.ef--share.ef--chat .ef__chat { gap: 7px; margin-top: 8px; }
.ef--share.ef--chat .ef__cap { padding: 6px 14px 8px; }
.ef--share.ef--chat .ef__bb { padding: 9px 14px; }
.ef--share.ef--chat .ef__tl { margin-top: 5px; }
.ef--share.ef--chat .ef__tl li { padding: 5px 8px; }

/* ── うるささを一段下げる（代表指示 2026-10-16・_eval/ui-notes.md の F に一覧）。
   主役（キャッチ・時代の言い切り・メーター・今日の1つのボタン）以外の縁・影・傾き・飾りを減らす */
body[data-world="nenshiki"] .n-qcard { border-width: 2px; box-shadow: 0 3px 0 var(--n-ink); }
body[data-world="nenshiki"] .opt { border-width: 2px; box-shadow: 0 3px 0 var(--ink); }
body[data-world="nenshiki"] .opt.is-on { box-shadow: inset 0 3px 0 rgba(0, 0, 0, .14), 0 3px 0 var(--ink); }
body[data-world="nenshiki"] .n-res :is(.n-pop, .n-step, .n-vsec .video, .n-fut__panel, .n-mech__bubble, .n-verdict__c, .n-work__t, .n-switch) { border-width: 2px; box-shadow: none; }
body[data-world="nenshiki"] .n-res .n-step.is-today { border-width: 2.5px; box-shadow: 0 3px 0 var(--n-shc); }
body[data-world="nenshiki"] :is(.n-pop__tag, .n-next, .n-rcpt, .n-rcpt__name, .n-fut__era, .share__img) { transform: none !important; rotate: none; }
body[data-world="nenshiki"] .n-pop__tag { box-shadow: none; border-width: 2px; }
body[data-world="nenshiki"] .n-verdict__band::before, body[data-world="nenshiki"] .n-verdict__band::after { display: none; }
body[data-world="nenshiki"] .n-h__mk { background: none; padding: 0; }
body[data-world="nenshiki"] .n-step__pb { display: none; }
body[data-world="nenshiki"] .next__in { border-width: 2px; box-shadow: 0 4px 0 var(--n-shc); }
body[data-world="nenshiki"] .next__in::before { display: none; }
body[data-world="nenshiki"] :is(.idx__item, .peek, .share__text) { border-width: 2px; box-shadow: none; }
body[data-world="nenshiki"] .btn-line { border-width: 2px; box-shadow: 0 2px 0 var(--ink); }
body[data-world="nenshiki"] .btn-line.is-main { box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
body[data-world="nenshiki"] .n-tags li { border-width: 1.5px; }
body[data-world="nenshiki"] .video__th { border-width: 2px; box-shadow: none !important; }
body[data-world="nenshiki"] .n-inst__item { background: transparent; padding: 0; }
body[data-world="nenshiki"][data-theme="nenshiki-E3"] .hdr__fuda { transform: none; box-shadow: none; }
body[data-world="nenshiki"] .ef--pop .pc { box-shadow: 0 5px 0 #111; }
body[data-world="nenshiki"] .ef--pop .n-upd { box-shadow: 0 4px 0 #111; }
body[data-world="nenshiki"] .ef--chat .ef__bb { box-shadow: 2px 2px 0 #1F2333; }

/* ── 間隔をそろえる（くっついている所をなくす。--sp の段で） */
body[data-world="nenshiki"] .sec { margin-top: 64px; }
body[data-world="nenshiki"] .next { margin-top: 72px; }
body[data-world="nenshiki"] .sec__h { margin-bottom: var(--sp-3); }
body[data-world="nenshiki"] .sec__lead { margin-bottom: var(--sp-4); }
body[data-world="nenshiki"] .n-steps__l, body[data-world="nenshiki"] .n-work__t, body[data-world="nenshiki"] .n-read, body[data-world="nenshiki"] .n-about { gap: var(--sp-3); }
body[data-world="nenshiki"] .n-parts__sum { margin-top: var(--sp-3); gap: var(--sp-2); }
body[data-world="nenshiki"] .more { margin-top: var(--sp-3); }
body[data-world="nenshiki"] .n-fut__panel { margin-top: var(--sp-3); }
body[data-world="nenshiki"] .ef .ef__up { margin-top: 32px; }
/* 結果の1画面目の上下の間隔を広げる（全時代。2026-11-05）: 言い切り → 名前 → 4つの力 → 読み物 → 寄り添い → 今日のアップデート。区切りごとに 24〜36px、読み物の段落の間は 18px。
   シェア画像（.ef--share）は変えない。下の欄の区切り（.sec）は上の行で 40px → 64px */
.ef--page:is(.ef--showa, .ef--flat, .ef--web3d, .ef--hud) .ef__head { margin-top: 18px; }
.ef--page:is(.ef--showa, .ef--flat, .ef--web3d, .ef--hud) .ef__pn { margin-top: 18px; }
.ef--page:is(.ef--showa, .ef--flat, .ef--web3d, .ef--hud) .ef__mt { margin-top: 28px; }
.ef--page:is(.ef--showa, .ef--flat, .ef--web3d, .ef--hud) .ef__pb { margin-top: 32px; }
.ef--page .ef__pb p + p { margin-top: 18px; }
.ef--page:is(.ef--showa, .ef--flat) .ef__care, .ef--page .ef__chk, .ef--page .ef__say { margin-top: 36px; }
.ef--page.ef--heisei .ef__rb { margin: 14px 0; }
.ef--page.ef--heisei .ef__pn { margin-top: 18px; }
.ef--page.ef--heisei .ef__mt { margin: 18px 0 4px; }
.ef--page.ef--heisei .ef__pb { margin: 24px 0 24px; }
.ef--page.ef--heisei .ef__koji { margin-top: 20px; }
.ef--page.ef--heisei .ef__box { padding-bottom: 18px; }
.ef--page.ef--pop .ef__pb { margin-top: 40px; }
.ef--page.ef--pop .ef__care, .ef--page.ef--pop .ef__pb + .ef__care { margin-top: 36px; }
.ef--page.ef--chat .ef__chat { gap: 18px; }
body[data-world="nenshiki"] .n-pop__tag { right: 12px; top: -14px; }

/* ── とても狭い幅（360未満・320など）: 箱の外へ出ない・語の途中で折れない大きさに（代表指摘 2026-10-17） */
.ef--pop .n-upd__chip { flex: none; white-space: nowrap; }
@media (max-width: 359px) {
  .ef--pop .pc__chips { flex-wrap: wrap; justify-content: center; }
  .ef--pop .pc__chips li { flex: 0 0 auto; padding: 8px 5px; }
  .ef--pop .pc__ln { font-size: 17px; padding-left: 14px; }
}

/* ── あなたに入れるアップデート（.n-one）と LINE の枠（.n-lo）の、時代ごとの直し（2026-11-06。形は nenshiki.css） */
body:is([data-theme="nenshiki-E1"], [data-theme="nenshiki-E2"], [data-theme="nenshiki-E7"]) :is(.n-one, .n-one__chip, .n-one__was i, .n-lo, .n-lo__gifts, .n-lo__g, .n-lo__gn, .n-lo__rb) { border-radius: 0; }
body:is([data-theme="nenshiki-E2"], [data-theme="nenshiki-E3"]) .n-lo__rb { rotate: -2deg; }
/* 昭和: 白黒の紙面。色が付くのは LINE のボタンだけ */
body[data-theme="nenshiki-E1"] .n-lo__hd { background: #151515; }
body[data-theme="nenshiki-E1"] .n-lo__k { color: #151515; }
body[data-theme="nenshiki-E1"] .n-lo__h { text-shadow: none; }
body[data-theme="nenshiki-E1"] .n-one__chip { background: #F7F6F2; }
/* 2000年代: 店頭POPの太い線と影（サンプルの見た目） */
body[data-theme="nenshiki-E3"] :is(.n-one, .n-lo) { border-width: 3px; }
body[data-theme="nenshiki-E3"] .n-one { box-shadow: 0 6px 0 #111; }
body[data-theme="nenshiki-E3"] .n-lo { box-shadow: 0 8px 0 #111; }
body[data-theme="nenshiki-E3"] :is(.n-one__hd, .n-lo__hd) { border-bottom-width: 3px; }
body[data-theme="nenshiki-E3"] :is(.n-lo__gifts, .n-lo__rb) { border-width: 3px; }
body[data-theme="nenshiki-E3"] .n-lo__rb { box-shadow: 0 4px 0 #111; }
/* 2014年: フラット（線なし・角は小さく） */
body[data-theme="nenshiki-E4"] :is(.n-one, .n-lo, .n-lo__gifts, .n-lo__g) { border-radius: 6px; }
body[data-theme="nenshiki-E4"] :is(.n-one, .n-lo) { box-shadow: 0 2px 0 rgba(0, 0, 0, .08); }
body[data-theme="nenshiki-E4"] .n-lo__h { text-shadow: none; }
/* 2023年: 丸い角 */
body[data-theme="nenshiki-E5"] :is(.n-one, .n-lo) { border-radius: 20px; }
/* 2026年: 細い線 */
body[data-theme="nenshiki-E6"] :is(.n-one, .n-lo, .n-lo__gifts, .n-lo__g) { border-width: 1px; }
body[data-theme="nenshiki-E6"] :is(.n-one__hd, .n-lo__hd) { border-bottom-width: 1px; }
body[data-theme="nenshiki-E6"] :is(.n-one, .n-lo) { border-radius: 18px; }
body[data-theme="nenshiki-E6"] .n-lo__h { text-shadow: none; }
/* 2029年: 暗い地。光らせるのは線と数字だけ（明るい面の上に明るい字を乗せない） */
body[data-theme="nenshiki-E7"] :is(.n-one, .n-lo, .n-lo__gifts, .n-lo__g) { border-width: 1.5px; }
body[data-theme="nenshiki-E7"] :is(.n-one__hd, .n-lo__hd) { border-bottom-width: 1.5px; }
body[data-theme="nenshiki-E7"] .n-one__hd { color: #3BF0FF; }
body[data-theme="nenshiki-E7"] .n-one__chip { color: #05080D; }
body[data-theme="nenshiki-E7"] .n-one__t span { background: linear-gradient(transparent 88%, #3BF0FF 88%, #3BF0FF 96%, transparent 96%); }
body[data-theme="nenshiki-E7"] .n-one__ft { border-top-color: rgba(59, 240, 255, .6); }
body[data-theme="nenshiki-E7"] .n-lo__gn { background: #3BF0FF; color: #05080D; }
body[data-theme="nenshiki-E7"] .n-lo__rb { background: #FFB020; color: #05080D; border-color: #FFB020; }
body[data-theme="nenshiki-E7"] .n-lo__rb b { color: #05080D; }
body[data-theme="nenshiki-E7"] .n-lo__h { text-shadow: none; }

