/* ===================================================================== TES の雰囲気（ロア解説の記事だけ。テーマの lib/nettoge/inc/tes-mood.php が読み込む） 「はじめに」の後の「雰囲気を合わせる」で、ページが燃えて A「ノルドの本」の見た目に変わる（html.is-tes-mood）。もう一度押すと元に戻る。 このタブでロア解説を読むあいだは続き、ほかのページを開くと解除（ の小さなスクリプト）。2026-09-30 ===================================================================== */ html.is-tes-mood { --m-desk: #d8cfbb; --m-page: #f1ead8; --m-page-2: #e8dfca; --m-page-3: #ddd2ba; --m-ink: #1f1b16; --m-ink-2: #463d31; --m-ink-3: #756a58; --m-rubric: #2b251d; /* 見出しの字（A は朱を使わずインク） */ --m-blue: #3b5572; /* リンクだけ落ち着いた青 */ --m-rule: #3c3428; --m-rule-soft: rgba(60, 52, 40, 0.3); --m-shadow: 0 2px 14px rgba(40, 25, 10, 0.18); /* 本文の和文。Noto Serif JP（ウェブフォント）は太字の型しか読み込まないので、ここに入れると游明朝もヒラギノも無い Android で本文が全部太字になる （09-30 依頼主「スマホだと全部太字」）。Android は端末の明朝（serif）で、太字だけ下の strong の決まりで Noto Serif JP を使う */ --m-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", serif; --m-caps: "Cinzel", "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif; --ntg2-bg: var(--m-page); --ntg2-surface: var(--m-page); --ntg2-paper: var(--m-page-2); --ntg2-paper-rgb: 239, 229, 205; --ntg2-paper-2: var(--m-page-3); --ntg2-text: var(--m-ink); --ntg2-sub: var(--m-ink-2); --ntg2-muted: var(--m-ink-3); --ntg2-accent: var(--m-rubric); --ntg2-link: var(--m-blue); --ntg2-link-visited: #5b3a6e; --ntg2-line: #dccdae; --ntg2-line-2: #c2b08c; --ntg2-radius: 0px; --ntg2-radius-sm: 0px; --color_bg: var(--m-page); --color_text: var(--m-ink); background: var(--m-desk); } html.is-tes-mood[data-nettoge-theme="dark"] { --m-desk: #0f0d0a; --m-page: #1d1a15; --m-page-2: #25211b; --m-page-3: #2e2922; --m-ink: #e6ddca; --m-ink-2: #c5b99f; --m-ink-3: #9f937c; --m-rubric: #eee4cf; --m-blue: #a3b9d6; --m-rule: #b3a584; --m-rule-soft: rgba(179, 165, 132, 0.32); --m-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); --ntg2-paper-rgb: 36, 30, 23; --ntg2-link-visited: #c8a2d6; --ntg2-line: #3a3126; --ntg2-line-2: #52452f; } /* サイトと SWELL の部品が使う色の変数を写本の色に（部品の多くは !important 付きで変数を読むので、上書きでなく値を差し替える） */ html.is-tes-mood, html.is-tes-mood body { --color_main: var(--m-rubric); --color_main_thin: color-mix(in srgb, var(--m-rubric) 10%, transparent); --color_main_dark: color-mix(in srgb, var(--m-rubric) 80%, #000); --color_htag: var(--m-rubric); --color_deep01: var(--m-rubric); --color_link: var(--m-blue); --color_content_bg: var(--m-page); --color_gray: var(--m-page-2); --color_border: var(--m-rule-soft); --nettoge-page-bg: var(--m-page); --nettoge-border-warm: var(--m-rule-soft); --color_icon_good: var(--m-rule); --color_icon_good_bg: var(--m-page-2); --color_icon_info: var(--m-rule); --color_icon_info_bg: var(--m-page-2); --color_icon_bad: var(--m-rule); --color_icon_bad_bg: var(--m-page-2); --color_icon_notice: var(--m-rule); --color_icon_notice_bg: var(--m-page-2); --color_icon_announce: var(--m-rule); --color_icon_announce_bg: var(--m-page-2); --color_icon_pen: var(--m-rule); --color_icon_pen_bg: var(--m-page-2); --color_icon_book: var(--m-rule); --color_icon_book_bg: var(--m-page-2); --surface-callout-box: var(--m-page-2); --text-callout-box: var(--m-ink); --surface-note-box: var(--m-page-2); --text-note-box: var(--m-ink-2); --border-note-box-dash: var(--m-rule-soft); --surface-crease-box: var(--m-page-2); --surface-dent-box: var(--m-page-3); --surface-faq-stripe: var(--m-page-2); --surface-accordion-title: var(--m-page-2); --surface-capbox-content: var(--m-page); --text-capbox-content: var(--m-ink); --border-capbox: var(--m-rule); --surface-blockquote: transparent; --border-blockquote: var(--m-rule); --text-blockquote: var(--m-ink-2); --surface-code-block: var(--m-page-2); --border-code-block: var(--m-rule-soft); --border-code-block-header: var(--m-rule-soft); --text-code-block-body: var(--m-ink); --text-code-block-muted: var(--m-ink-3); --surface-inline-code-article: var(--m-page-2); --surface-inline-code-bg: var(--m-page-2); --text-inline-code: var(--m-ink); --surface-alert-warning: var(--m-page-2); --text-alert-warning: var(--m-ink); --border-alert-stripe-dark: var(--m-ink); --border-alert-stripe-accent: var(--m-rubric); --shadow-alert-warning: none; --surface-focus-box: var(--m-page-2); --border-focus-box: var(--m-rule); --text-focus-box-title: var(--m-rubric); --text-focus-box-body: var(--m-ink); --surface-lead: var(--m-page-2); --text-lead: var(--m-ink); --border-lead-accent: var(--m-rubric); --surface-blogcard: var(--m-page-2); --surface-blogcard-soft: var(--m-page-2); --surface-blogcard-tint: var(--m-page-2); --surface-blogcard-caption: var(--m-page-2); --border-blogcard: var(--m-rule-soft); --border-blogcard-line: var(--m-rule-soft); --border-blogcard-line-soft: var(--m-rule-soft); --border-blogcard-accent: var(--m-ink); --border-blogcard-hover: var(--m-rubric); --text-blogcard-body: var(--m-ink); --text-blogcard-muted: var(--m-ink-3); --shadow-blogcard: none; --shadow-blogcard-hover: none; --shadow-card: none; --surface-widget: var(--m-page); --surface-widget-title: var(--m-page); --surface-header: var(--m-page); --surface-footer: var(--m-page-3); --surface-floating-header: var(--m-page); --surface-floating-glass: var(--m-page); --surface-fixed-header-glass: var(--m-page); --border-fixed-header-glass: var(--m-rule-soft); --surface-table-header: var(--m-page-2); --surface-table-row-odd: var(--m-page); --surface-table-row-even: var(--m-page-2); --border-table-row: var(--m-rule-soft); --border-table-header-divider: var(--m-rule); --surface-comment-panel: var(--m-page-2); --surface-comment-input: var(--m-page); --surface-comment-toolbar: var(--m-page-2); --surface-comment-popover: var(--m-page-2); --border-comment: var(--m-rule-soft); --text-comment-muted: var(--m-ink-3); --border-form-input: var(--m-rule-soft); --surface-more-btn: var(--m-page); --border-more-btn: var(--m-rule); --text-more-btn: var(--m-ink-2); --surface-toc-active: var(--m-page-3); --text-article-title: var(--m-ink); --text-accent-prose: var(--m-rubric); --text-deep-prose: var(--m-rubric); /* 差し色の青緑（箇条書き・目次の印、リンクの飾り線、アコーディオンの印、札など）も細線の色に */ --ntg2-teal: var(--m-rule); --ntg2-teal-bg: color-mix(in srgb, var(--m-rule) 10%, transparent); --ntg-teal: var(--m-rule); --color-tip: var(--m-rule); /* 物語パート（羊皮紙）: 紙と焼けはそのまま（09-30 依頼主「羊皮紙もきえたぞ」）。字体だけ本文と同じ明朝に */ --nettoge-parchment-body-font: var(--m-serif); --nettoge-parchment-heading-font: var(--m-serif); } /* ---- 書見台（ページの外）と写本の 1 枚（記事の列） ---- */ html.is-tes-mood body, html.is-tes-mood #body_wrap { color: var(--m-ink); font-family: var(--m-serif); background: var(--m-desk); } html.is-tes-mood #body_wrap :is(.post_content, #header, #sidebar, #footer, .p-toc, .c-postTitle__ttl, .p-breadcrumb, .p-articleMetas, .l-articleBottom, button, input) { font-family: var(--m-serif); } html.is-tes-mood #body_wrap .l-mainContent__inner { padding: 36px 42px 40px; background: var(--m-page); border: 1px solid var(--m-rule); outline: 1px solid var(--m-rule-soft); outline-offset: -7px; box-shadow: var(--m-shadow); } @media (max-width: 959px) { html.is-tes-mood #body_wrap .l-mainContent__inner { padding: 20px 16px 28px; outline-offset: -5px; } } /* 本文の列だけ写本の 1 枚の余白の外まで広げ、同じ分を内側の余白で戻す: 追従見出しと BGM のミニバーは本文の列の幅に合わせるので、 枠いっぱいに広がる（09-30 依頼主「ミニバー、幅いっぱいに」）。字の幅と、パンくず・著者・コメントなどほかの部品の位置は変わらない */ html.is-tes-mood #body_wrap .l-mainContent__inner > .post_content { max-width: none; /* 最大 100% のままだと右へ広がらない */ margin-left: -42px; margin-right: -42px; padding-left: 58px; /* 1 枚の余白 42px ＋ 本文の列の余白 16px */ padding-right: 58px; } @media (max-width: 959px) { html.is-tes-mood #body_wrap .l-mainContent__inner > .post_content { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } } /* ---- ヘッダー・フッター・パンくず ---- */ html.is-tes-mood #body_wrap #header { background: var(--m-page); border-bottom: 3px double var(--m-rule); box-shadow: none; } html.is-tes-mood #body_wrap #footer { color: var(--m-ink-2); background: var(--m-page-3); border-top: 3px double var(--m-rule); } html.is-tes-mood #body_wrap #footer a, html.is-tes-mood #body_wrap .p-breadcrumb, html.is-tes-mood #body_wrap .p-breadcrumb a { color: var(--m-ink-3); } /* ---- 題・タグ・絵 ---- */ html.is-tes-mood #body_wrap .c-postTitle__ttl { color: var(--m-ink); font-weight: 700; letter-spacing: 0.02em; } html.is-tes-mood #body_wrap .p-articleHead { padding-bottom: 12px; border-bottom: 1px solid var(--m-rule); } html.is-tes-mood #body_wrap :is(.c-categoryList__link, .c-tagList__link) { color: var(--m-ink-2); background: none; border: 1px solid var(--m-rule-soft); border-radius: 0; } html.is-tes-mood #body_wrap .p-articleThumb img, html.is-tes-mood #body_wrap .post_content figure img { padding: 5px; background: var(--m-page-2); border: 1px solid var(--m-rule); border-radius: 0; } /* ---- 本文 ---- */ html.is-tes-mood { --m-sep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='22' viewBox='0 0 360 22'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' x2='360' y1='0' y2='0'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='.3'/%3E%3Cstop offset='.7'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 10.5h152v1H0zM208 10.5h152v1H208z' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M180 3.5 187.5 11 180 18.5 172.5 11z'/%3E%3Cpath d='M160 7.5 163.5 11 160 14.5 156.5 11z'/%3E%3Cpath d='M200 7.5 203.5 11 200 14.5 196.5 11z'/%3E%3C/g%3E%3Cpath d='M180 7.5 183.5 11 180 14.5 176.5 11z'/%3E%3C/svg%3E"); --m-dia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5z'/%3E%3C/svg%3E"); --m-dia-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .9 9.1 5 5 9.1.9 5z' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); } html.is-tes-mood #body_wrap .post_content { color: var(--m-ink); } html.is-tes-mood #body_wrap .post_content a { color: var(--m-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; } html.is-tes-mood #body_wrap .ntg-h2-section { background: none; } /* 見出し: h2 は真ん中に、両側に細線と菱形（Skyrim の画面）。欧文は字間を空けた大文字（Cinzel） */ html.is-tes-mood #body_wrap .post_content h2 { display: flex; align-items: center; gap: 14px; padding: 0; color: var(--m-rubric); font-family: var(--m-caps); font-weight: 700; letter-spacing: 0.1em; text-align: center; background: none; border: 0; } html.is-tes-mood #body_wrap .post_content h2::before, html.is-tes-mood #body_wrap .post_content h2::after { content: ""; position: static; flex: 1 1 24px; min-width: 24px; height: 9px; background: var(--m-rule); border: 0; -webkit-mask: var(--m-dia) right center / 9px 9px no-repeat, linear-gradient(#000, #000) left center / calc(100% - 12px) 1px no-repeat; mask: var(--m-dia) right center / 9px 9px no-repeat, linear-gradient(#000, #000) left center / calc(100% - 12px) 1px no-repeat; } html.is-tes-mood #body_wrap .post_content h2::before { transform: scaleX(-1); } html.is-tes-mood #body_wrap .post_content h3 { padding: 0 0 4px; color: var(--m-rubric); font-family: var(--m-caps); font-weight: 700; letter-spacing: 0.06em; background: none; border: 0; border-bottom: 1px solid var(--m-rule-soft); } html.is-tes-mood #body_wrap .post_content h3::before { content: none; } html.is-tes-mood #body_wrap .post_content h4 { color: var(--m-ink-2); } /* 頭文字: 各章の最初の 1 字を大きく（インクのまま） */ html.is-tes-mood #body_wrap .ntg-h2-section > p:first-of-type::first-letter { float: left; margin: 0.08em 0.14em 0 0; color: var(--m-rubric); font-family: var(--m-caps); font-size: 3.1em; font-weight: 700; line-height: 0.9; } /* 箇条書き: 白抜きの菱形（飾りの無い普通の箇条書きだけ） */ html.is-tes-mood #body_wrap .post_content ul:where(:not([class*="is-style-"])) > li { position: relative; } html.is-tes-mood #body_wrap .post_content ul:where(:not([class*="is-style-"])) > li::marker { content: ""; } html.is-tes-mood #body_wrap .post_content ul:where(:not([class*="is-style-"])) > li::before { content: ""; display: block; position: absolute; left: -1.15em; top: 0.72em; width: 8px; height: 8px; background: var(--m-rule); -webkit-mask: var(--m-dia-o) center / contain no-repeat; mask: var(--m-dia-o) center / contain no-repeat; } html.is-tes-mood #body_wrap .post_content ol > li::marker { color: var(--m-ink-3); font-family: var(--m-caps); } /* ---- 囲み: 上下の細線だけ（Skyrim の画面の帯）。左右の枠は付けない ---- */ html.is-tes-mood #body_wrap :is(.p-toc, .post_content [class*="is-style-icon_"], .post_content .-border01, .post_content .-border05, .post_content .swell-block-accordion__item, .p-authorBox, #sidebar .c-widget) { color: var(--m-ink); background: color-mix(in srgb, var(--m-rule) 5%, transparent); border: 0; border-top: 1px solid var(--m-rule); border-bottom: 1px solid var(--m-rule); border-radius: 0; box-shadow: none; outline: 0; } html.is-tes-mood #body_wrap .post_content [class*="is-style-icon_"]::before { color: var(--m-rule); } html.is-tes-mood #body_wrap .post_content [class*="is-style-icon_"]::after { border-color: var(--m-rule-soft); } /* 著者の欄: ふだんは余白 0 の平らな並び。雰囲気では地と上下の線を付けるので、内側に余白を取る（09-30 依頼主「ギュッとなってる」） */ html.is-tes-mood #body_wrap .ntg2-foot__author .p-authorBox { gap: 4px 12px; padding: 20px 22px; } @media (max-width: 599px) { html.is-tes-mood #body_wrap .ntg2-foot__author .p-authorBox { padding: 16px 14px; } } /* 目次: 題は真ん中に字間を空けて、番号は薄いインク */ html.is-tes-mood #body_wrap .p-toc__ttl { justify-content: center; color: var(--m-rubric); font-family: var(--m-caps); letter-spacing: 0.2em; text-align: center; } html.is-tes-mood #body_wrap .p-toc__ttl::before { color: var(--m-rule); } html.is-tes-mood #body_wrap .p-toc a { color: var(--m-ink); } html.is-tes-mood #body_wrap .p-toc li::before, html.is-tes-mood #body_wrap .p-toc li::marker { color: var(--m-ink-3); } /* 吹き出し → 本の余白の書き込み（左に細線） */ html.is-tes-mood #body_wrap .post_content .is-style-7css-balloon { padding: 2px 0 2px 16px; color: var(--m-ink-2); background: none; border: 0; border-left: 1px solid var(--m-rule); border-radius: 0; box-shadow: none; } html.is-tes-mood #body_wrap .post_content .is-style-7css-balloon::before, html.is-tes-mood #body_wrap .post_content .is-style-7css-balloon::after { display: none; } /* 引用: ふだんの引用（左の線・淡い地・左寄せ・上下 31px）と同じ組みのまま、線を二重のインクに、 線の上下の端に菱形を付けて古い本の欄外の印のようにする（09-30 依頼主「もともとの引用にスタイル寄せて、雰囲気ぽく」） */ html.is-tes-mood #body_wrap .post_content .wp-block-quote { position: relative; padding: 31px 22px; color: var(--m-ink-2); text-align: left; background: color-mix(in srgb, var(--m-rule) 6%, transparent); border: 0; border-left: 4px double var(--m-rule); border-radius: 0; } html.is-tes-mood #body_wrap .post_content .wp-block-quote::before, html.is-tes-mood #body_wrap .post_content .wp-block-quote::after { content: ""; display: block; position: absolute; left: -6.5px; /* 二重線（4px）の真ん中に菱形（9px）の真ん中を合わせる */ width: 9px; height: 9px; background: var(--m-rule); -webkit-mask: var(--m-dia) center / contain no-repeat; mask: var(--m-dia) center / contain no-repeat; } html.is-tes-mood #body_wrap .post_content .wp-block-quote::before { top: -4.5px; } html.is-tes-mood #body_wrap .post_content .wp-block-quote::after { bottom: -4.5px; } html.is-tes-mood #body_wrap .post_content .wp-block-quote cite { color: var(--m-ink-3); } /* FAQ（アコーディオン） */ html.is-tes-mood #body_wrap .post_content .swell-block-accordion__title, html.is-tes-mood #body_wrap .post_content .swell-block-accordion__label { color: var(--m-rubric); background: none; } html.is-tes-mood #body_wrap .post_content .swell-block-accordion__body { background: none; border-top: 1px solid var(--m-rule-soft); } /* 表: 縦の線なし、頭は字間を空けて下に線 */ html.is-tes-mood #body_wrap .post_content table { border: 0; border-radius: 0; } html.is-tes-mood #body_wrap .post_content :is(th, td) { border-color: var(--m-rule-soft); } html.is-tes-mood #body_wrap .post_content th { color: var(--m-rubric); font-family: var(--m-caps); letter-spacing: 0.08em; background: color-mix(in srgb, var(--m-rule) 7%, transparent); border-bottom: 1px solid var(--m-rule); } /* 区切り線: 細線と菱形 3 つ */ html.is-tes-mood #body_wrap .post_content .wp-block-separator { width: min(360px, 90%); max-width: none; height: 22px; margin-left: auto; margin-right: auto; background: var(--m-rule); border: 0; opacity: 1; -webkit-mask: var(--m-sep) center / contain no-repeat; mask: var(--m-sep) center / contain no-repeat; } html.is-tes-mood #body_wrap .post_content .wp-block-separator::before, html.is-tes-mood #body_wrap .post_content .wp-block-separator::after { content: none; } html.is-tes-mood #body_wrap .post_content figcaption { color: var(--m-ink-3); } /* 物語パート（羊皮紙）は紙のまま、写本の枠の内側いっぱいに広げる（09-30 依頼主「羊皮紙は幅いっぱいに」）。 外へ出す幅 = 写本の 1 枚の余白（PC 42px・960px 未満 16px。上の .l-mainContent__inner）＋本文の列の余白（PC 16px） */ html.is-tes-mood #body_wrap .post_content .is-style-parchment { margin-left: -58px; margin-right: -58px; } @media (max-width: 959px) { html.is-tes-mood #body_wrap .post_content .is-style-parchment { margin-left: -16px; margin-right: -16px; } } /* 太字: 游明朝は太い型が無く細いので、Noto Serif JP の太字で（tes-mood.php が読み込む。09-30 依頼主「太字でも細い」） */ html.is-tes-mood #body_wrap :is(.post_content, .p-toc, #sidebar) :is(strong, b) { font-family: "Noto Serif JP", var(--m-serif); font-weight: 700; } /* 物語パートの見出しだけ欧文を字間を空けた Cinzel に */ html.is-tes-mood #body_wrap .post_content .is-style-parchment :is(h2, h3, h4, h5) { font-family: var(--m-caps); letter-spacing: 0.06em; } /* ハブの帯・サイドバー */ html.is-tes-mood #body_wrap .c-nettogeHubLink__anchor { border: 1px solid var(--m-rule); border-radius: 0; } html.is-tes-mood #body_wrap #sidebar .c-widget__title { margin: 0 0 8px; padding: 0 0 6px; color: var(--m-rubric); font-family: var(--m-caps); font-size: 14px; letter-spacing: 0.16em; text-align: center; background: none; border: 0; border-bottom: 1px solid var(--m-rule-soft); } html.is-tes-mood #body_wrap #sidebar .c-widget__title::before { display: none; } /* サイドバー: ウィジェットの枠は 1 つだけ（中の目次などに枠を重ねない） */ html.is-tes-mood #body_wrap #sidebar .c-widget { padding: 12px 14px; } html.is-tes-mood #body_wrap #sidebar .c-widget .p-toc { padding: 0; background: none; border: 0; outline: 0; } html.is-tes-mood #body_wrap #sidebar a { color: var(--m-ink); } /* ---- BGM ブロック: ノルドの本（上下の細線の帯・欧文は字間を空けた Cinzel・菱形のつまみと再生ボタン・曲の番号はローマ数字） ---- */ html.is-tes-mood #body_wrap .bgm-player-block { --bgm-surface: var(--m-page); --bgm-paper: color-mix(in srgb, var(--m-rule) 6%, transparent); --bgm-paper-2: color-mix(in srgb, var(--m-rule) 10%, transparent); --bgm-text: var(--m-ink); --bgm-sub: var(--m-ink-2); --bgm-muted: var(--m-ink-3); --bgm-line: var(--m-rule-soft); --bgm-line-2: var(--m-rule); --bgm-key: var(--m-rubric); --bgm-on-accent: var(--m-page); --bgm-teal: var(--m-rubric); --bgm-teal-bg: transparent; --bgm-radius: 0px; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__shell { background: color-mix(in srgb, var(--m-rule) 5%, transparent); border: 0; border-top: 1px solid var(--m-rule); border-bottom: 1px solid var(--m-rule); border-radius: 0; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__media { border-radius: 0; outline: 1px solid var(--m-rule-soft); outline-offset: 3px; } /* 「BGM」の札 → 字間を空けた小さな大文字を菱形で挟む */ html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__label-link { gap: 7px; padding: 0; color: var(--m-ink-3); font-family: var(--m-caps); font-size: 10.5px; letter-spacing: 0.3em; background: none; border: 0; border-radius: 0; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__label-link::before, html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__label-link::after { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 0; -webkit-mask: var(--m-dia) center / contain no-repeat; mask: var(--m-dia) center / contain no-repeat; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__label-link:is(:hover, :focus-visible) { color: var(--m-ink); background: none; } html.is-tes-mood #body_wrap .bgm-player-block p.bgm-player-block__current-track { color: var(--m-rubric); font-family: var(--m-caps); letter-spacing: 0.04em; } /* 再生位置: 細線に、進んだ所だけ濃いインク、つまみは菱形 */ html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__seek::before { top: calc(50% - 0.5px); height: 1px; background: var(--m-rule); border-radius: 0; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__seek-fill { top: calc(50% - 1px); height: 2px; background: var(--m-ink); border-radius: 0; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__seek-fill::after { right: -5px; width: 9px; height: 9px; background: var(--m-page); border: 1px solid var(--m-ink); border-radius: 0; box-shadow: none; transform: translateY(-50%) rotate(45deg); } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__time-meta { font-family: var(--m-caps); font-size: 11px; letter-spacing: 0.08em; } /* 操作: 絵はインク、再生は細線の菱形の中に */ html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__button { border-radius: 0; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__button:is(:hover, :focus-visible) { background: none; color: var(--m-ink); } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__button.is-primary { position: relative; margin: 0 6px; color: var(--m-ink); background: none; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__button.is-primary::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--m-rule); transform: rotate(45deg); transition: background-color 0.15s ease; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__button.is-primary:is(:hover, :focus-visible)::after { background: color-mix(in srgb, var(--m-rule) 10%, transparent); } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__button.is-primary::before { position: relative; z-index: 1; width: 15px; height: 15px; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__toggle-option { padding: 0 4px; font-family: var(--m-caps); letter-spacing: 0.1em; border: 0; border-radius: 0; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__toggle-option::before { width: 8px; height: 8px; -webkit-mask: var(--m-dia-o) center / contain no-repeat; mask: var(--m-dia-o) center / contain no-repeat; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__toggle-option.is-active { color: var(--m-ink); background: none; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__toggle-option.is-active::before { -webkit-mask-image: var(--m-dia); mask-image: var(--m-dia); } /* 曲の一覧: 番号はローマ数字、今の曲は菱形の印と太字 */ html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__tracks { border-color: var(--m-rule-soft); } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__track-button { border-radius: 0; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__track-number { font-size: 0; text-align: right; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__track-number::before { content: counter(list-item, upper-roman); color: var(--m-ink-3); font-family: var(--m-caps); font-size: 11.5px; font-weight: 600; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__track-button.is-active { background: color-mix(in srgb, var(--m-rule) 8%, transparent); box-shadow: inset 2px 0 0 var(--m-ink); } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__track-button.is-active .bgm-player-block__track-number::before { color: var(--m-ink); } /* 上に付くミニバー: 紙の帯に下の細線 */ html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__sticky-bar { background: var(--m-page); border: 0; border-bottom: 1px solid var(--m-rule); border-radius: 0; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.35); } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__sticky-bar .bgm-player-block__button.is-primary { margin: 0 3px; } html.is-tes-mood #body_wrap .bgm-player-block .bgm-player-block__sticky-bar .bgm-player-block__button.is-primary::after { inset: 6px; } /* ---------- 3. 「雰囲気を合わせる」ボタン（「はじめに」の後。押すたびに切り替え、雰囲気のあいだは「元に戻す」。A「ノルドの本」: 暗いインクの帯に細線と菱形） ---------- */ .tes-mood-cta { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 18px; } .tes-mood-cta__btn { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 22px; color: #efe6d2; font: 700 15px/1 "Cinzel", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; letter-spacing: 0.18em; background: #1f1b16; border: 1px solid #1f1b16; border-radius: 0; outline: 1px solid rgba(239, 230, 210, 0.35); outline-offset: -5px; cursor: pointer; transition: box-shadow 0.2s ease; } .tes-mood-cta__btn::before, .tes-mood-cta__btn::after { content: ""; width: 7px; height: 7px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5z'/%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 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; } .tes-mood-cta__btn:hover, .tes-mood-cta__btn:focus-visible { box-shadow: 0 0 0 1px #1f1b16, 0 0 14px rgba(255, 160, 70, 0.45); /* 火の気配 */ } html[data-nettoge-theme="dark"] .tes-mood-cta__btn { color: #1f1b16; background: #e9e0cb; border-color: #e9e0cb; outline-color: rgba(31, 27, 22, 0.35); } .tes-mood-cta__note { color: var(--ntg2-muted); font: 13px/1.6 "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif; letter-spacing: 0.06em; } /* ---------- 4. 燃える切り替え（View Transitions。形は JS が毎回作る） ---------- */ ::view-transition-group(tes-burn) { animation: none; } ::view-transition-old(tes-burn) { display: none; } ::view-transition-new(tes-burn) { animation: none; } .tes-burn-canvas { position: fixed; inset: 0; z-index: 2147483000; /* 大きさは JS が画面の大きさ（px）で付ける */ pointer-events: none; view-transition-name: tes-burn; }