@charset "utf-8"; /* ＵＴＦ */ /* ========================-=-=====================================-=-======================== -------- caption setting */ /* caption constants */ :root { --my-name: "TateReader"; --hint-index: "🐾"; --hint-loading: "🍞読込中🍞"; --hint-loading-sub: "初回は時間かかります"; --hint-molding: "🍰整理中🍰"; --hint-waiting: "🍟待機中🍔"; --hint-waiting-sub: "画面スライド長押しで[操作卓]"; --hint-head: "🏯"; --hint-div: "🌏"; --hint-sec: "🗾"; --hint-chap: "🗼"; --hint-hline: "🍙"; --hint-hsub: "🍡"; --hint-title: "🐟題"; --hint-author: "🐈著"; --hint-size-0: "1行＝42字"; --hint-size-1: "1行＝38字"; --hint-size-2: "1行＝33字"; --hint-size-3: "1行＝28字"; --hint-size-4: "1行＝24字"; --hint-exfont: "拡張フォント"; --hint-mincho: "ゴシックか明朝"; --hint-vertical: "横組みか縦組みか"; --hint-break: "文ごとに改行"; --hint-enclose: "縦中横"; --hint-hint: "操作ヒント表示"; --hint-ruby: "ルビと傍点"; --hint-title-date: "更新🎂"; --hint-title-div: "🌏部"; --hint-title-sec: "🗾章"; --hint-title-chap: "🗼節"; --hint-title-hlin: "🍙項"; --hint-title-hsub: "🍡副"; --hint-default-magnifier: "100％"; --hint-default-volume: "70％"; --hint-default-speed: "100％"; --hint-default-pitch: "100％"; --hint-default-bgm: "12％"; --hname-before: "┏━━━━━━━━━━━━━━━\a　 "; --hname-after: "\a　――――――"; --separator-before: "　　　　　"; --separator-after: ""; --remark-before: "§ "; --remark-after: ""; --headline-before: "::…‥‐　‐ ‥…::::::…━─…‥　‐\a"; --headline-after: ""; --hexplain-before: ""; --hexplain-after: "\a‐　‥…─━…::::::…‥ ‐　‐‥…::"; --subhead-before: "◆━┓━―‐…‥‥・\a"; --subhead-alter: "┗ "; --subhead-after: "┗━━"; --cosubhead-before: "`・ .　 _　 __ _　_\a"; --cosubhead-alter: "　└ "; --cosubhead-after: " ──┐"; --quoteblock-top: "　　"; --quoteblock-head: "　　"; --quotebigblock-top: "　 "; --quotebigblock-head: "　 "; --quote-bigbracket: "┏━──"; --quote-bigbracket-addition1: "├　┃"; --quote-bigbracket-addition2: "├─┛"; --quote-bigbracket-after: "━──"; --quote-bigbracket-close: "──━┛"; --quote-bigbracket-quiet: "┌───"; --quote-bigbracket-quiet-addition1: "├　│"; --quote-bigbracket-quiet-addition2: "├─┘"; --quote-bigbracket-quiet-after: "───"; --quote-bigbracket-quiet-close: "───┘"; --hedding-open-caption: "📁クリックで開く"; --hedding-close-caption: "📂クリックで閉じる"; --warn-kind-hkn: "【半角カナ文字】"; --warn-kind-hch: "【半角文字】"; --warn-kind-srgt: "【サロゲートペア文字】"; --warn-kind-rgnm: "【人名用漢字】"; --warn-kind-dpnd: "【環境依存文字】"; --warn-kind-nkkym: "【カクヨム非対応文字】"; --warn-kind-ivs: "【異体字(IVS)】"; --warn-kind-diac: "【結合文字】"; --warn-kind-cmb: "【絵文字結合】"; --warn-kind-unex: "【常用外文字】"; --warn-kind-ill: "【不正な文字】"; --warn-kind-snr: "【義務教育外漢字】"; --warn-kind-cnfs: "★混同留意文字★"; --warn-kind-rby: "★ルビ推奨文字★"; --warn-kind-snld: "★単独リーダ文字★"; --warn-kind-mrb: "【複字ルビ】"; --warn-kind-s2eq: "★前文末と同じ結び★"; --warn-kind-b2eq: "【前節末と同じ結び】"; --warn-kind-s1eq: "★前文末と同じ文字★"; --warn-kind-b1eq: "【前節末と同じ文字】"; --warn-kind-nomch: "【括弧不一致】"; --warn-type-nonregister: "❌ヒント未登録"; --speech-button-select: "🏹開始文\aクリックで"; --speech-button-doing: "停止👿"; } /* ========================-=-=====================================-=-======================== -------- layout setting */ /* layout constants */ :root { --sw: 16px; --vw: 100vw; --vh: 100vh; --main-padding: 0.5em; --main-width: calc(var(--vw) - var(--sw)); --main-height: calc(var(--vh) - var(--sw)); --gadget-right: calc(100% - var(--vw) + var(--sw) + 0.1rem); --gadget-bottom: calc(100% - var(--vh) + var(--sw) + 0.1rem); --gadget-nonactive-opacity: 7.0%; --gadget-speech-opacity: 0.0%; --foreword-ratio: 0.777; --base-chars: 42; /* 書籍一般 */ --base-chars-1: 38; /* カクヨム 小 */ --base-chars-2: 33; /* カクヨム 中 */ --base-chars-3: 28; /* カクヨム 大 */ --base-chars-4: 24; /* カクヨム 特大 */ --p-chars: var(--base-chars); --indent-remark: 1.5em; --indent-qt: 2em; --empha--distance: 0.45em; --empha--size: 0.25em; --line-height: 1.82em; } @media screen and (prefers-color-scheme: dark) { :root { --gadget-nonactive-opacity: 2.6%; --gadget-speech-opacity: 0.0%; } } /* chars in a line of paragraph select */ #CSt-Siz1:checked ~ MAIN { --p-chars: var(--base-chars-1); } #CSt-Siz2:checked ~ MAIN { --p-chars: var(--base-chars-2); } #CSt-Siz3:checked ~ MAIN { --p-chars: var(--base-chars-3); } #CSt-Siz4:checked ~ MAIN { --p-chars: var(--base-chars-4); } /* ========================-=-=====================================-=-======================== -------- color setting */ /* color constants */ :root { --text-color: rgb( 16, 16, 16); --back-color: rgb( 248, 248, 248); --icon-back-color: rgba(255, 255, 255, 64%); --hint-back-color: rgb( 232, 232, 232); --shadow-color: rgb( 0, 0, 0); --shadow-back-color: rgba( 0, 0, 0, 12%); --decorate-color: rgb( 144, 144, 144); --week-color: rgb( 128, 128, 128); --word-color: rgb( 200, 20, 132); --sign-color: rgb( 255, 0, 0); --strong-color: rgb( 200, 0, 48); --strong-back-color: rgba(255, 160, 224); --hover-color: rgb( 160, 96, 12); --hover-back-color: rgba(255, 255, 184, 92%); --focus-color: rgb( 128, 4, 16); --focus-back-color: rgb( 240, 200, 200); --ex-back-color: rgba(208, 136, 255, 12%); --warn-color: rgb( 40, 0, 0); --warn-back-color: rgba(192, 192, 192, 90%); --button-color: var(--text-color); --button-back-color: rgb( 240, 240, 240); --button-blank-color: var(--back-color); --button-on-back-color: rgb( 232, 216, 216); --button-on-focus-color: rgb( 224, 240, 176); --button-edge-color: rgb( 144, 144, 144); --button-transition: 0.2s; --foreword-color: var(--button-back-color); --foreword-edge-color: var(--button-edge-color); --navi-color: var(--button-color); --navi-back-color: rgba(160, 160, 160, 12%); --navi-link-color: var(--back-color); --navi-hover-color: var(--focus-color); --navi-on-color: var(--strong-color); --navi-on-back-color: var(--back-color); --navi-label-color: var(--button-color); --navi-label-back-color: var(--button-back-color); --navi-edge-color: var(--foreword-edge-color); --navi-transition: var(--button-transition); --hinttable-color: rgb( 72, 72, 72); --hinttable-back-color: rgba(184, 184, 184, 72%); --hinttable-titleback-color: rgba(192, 192, 192, 90%); --hinttable-headback-color: rgba(216, 216, 216, 90%); --hinttable-detailback-color: rgba(240, 240, 240, 90%); --hedding-color: var(--text-color); --hedding-back-color: var(--button-back-color); --hedding-on-back-color: rgb( 208, 208, 208); --hedding-edge-color: var(--button-edge-color); --hedding-transition: var(--button-transition); --speech-select-text: var(--week-color); --speech-select-back: rgba(128, 128, 128, 18%); --speech-point-back: rgba(255, 64, 128, 36%); --speech-doing-text: var(--strong-color); --speech-doing-text-head: var(--focus-color); --speech-doing-text-headback: var(--focus-back-color); --speech-doing-back: rgba(255, 64, 128, 10%); --hinttable-text-shadows: none; --text-shadows: none; --box-shadows: 0.04em 0.02em 0.03em 0.05em var(--shadow-back-color); --loading-shadows: 0.1em 0.5em 1.1em 1.5em var(--shadow-back-color); } / @media screen and (prefers-color-scheme: light) { :root { --hinttable-text-shadows: 0 0 0.128em var(--shadow-color); } } @media print { #CSt-Mnch:not(:checked) ~ MAIN { --hinttable-text-shadows: 0 0 0.12em var(--shadow-color); } } /* color on dark-mode constants */ @media screen and (prefers-color-scheme: dark) { :root { color-scheme: dark; --text-color: rgb( 240, 240, 240); --back-color: rgb( 32, 32, 32); --icon-back-color: rgb( 132, 132, 132, 32%); --hint-back-color: rgb( 24, 24, 24); --shadow-color: rgb( 255, 255, 255); --shadow-back-color: rgba(255, 255, 255, 12%); --decorate-color: rgb( 112, 112, 112); --strong-color: rgb( 232, 216, 128); --strong-back-color: rgba(255, 64, 128, 32%); --quoted-color: rgb( 232, 128, 200); --button-back-color: rgb( 40, 40, 40); --button-on-back-color: rgb( 184, 72, 112); --button-on-focus-color: rgb( 136, 148, 132); --hinttable-color: rgb( 172, 172, 172); --hinttable-back-color: rgba( 72, 72, 72, 72%); --hinttable-titleback-color: rgba( 64, 64, 64, 90%); --hinttable-headback-color: rgba( 40, 40, 40, 90%); --hinttable-detailback-color: rgba( 32, 32, 32, 90%); --hedding-on-back-color: rgb( 80, 80, 80); --navi-color: var(--text-color); --navi-hover-color: var(--strong-color); } } @charset "utf-8"; /* ＵＴＦ */ /* ========================-=-=====================================-=-======================== -------- font setting */ /* ASCII プロポーショナルフォント */ @font-face { font-family: 'mGothicP'; src: local('ＭＳ Ｐゴシック'), local('MS PGothic' ); font-display: swap; unicode-range: U+21-23, U+3F, U+41-5A, U+61-7A; } @font-face { font-family: 'gGothicP'; src: local('BIZ UDPゴシック'), local('BIZ UDPGothic'), url('s/fggp.woff2') format('woff2'), url('s/fggp.woff') format('woff'), url('s/fggp.ttf') format('truetype'); font-display: swap; unicode-range: U+21-23, U+3F, U+41-5A, U+61-7A; } @font-face { font-family: 'mMinchoP'; src: local('ＭＳ Ｐ明朝' ), local('MS PMincho' ); font-display: swap; unicode-range: U+21-23, U+3F, U+41-5A, U+61-7A; } @font-face { font-family: 'gMinchoP'; src: local('BIZ UDP明朝' ), local('BIZ UDPMincho'), url('s/fgmp.woff2') format('woff2'), url('s/fgmp.woff') format('woff'), url('s/fgmp.ttf') format('truetype'); font-display: swap; unicode-range: U+21-23, U+3F, U+41-5A, U+61-7A; } /* モノスペースフォント */ @font-face { font-family: 'mGothicF'; src: local('ＭＳ ゴシック' ), local('MS Gothic' ); font-display: swap; unicode-range: U+20-5B, U+5D-200C, U+200E-1F2FF, U+1FB00-10FFFF; } @font-face { font-family: 'gGothicF'; src: local('BIZ UDゴシック' ), local('BIZ UDGothic' ), url('s/fggf.woff2') format('woff2'), url('s/fggf.woff') format('woff'), url('s/fggf.ttf') format('truetype'); font-display: swap; unicode-range: U+20-5B, U+5D-200C, U+200E-1F2FF, U+1FB00-10FFFF; } @font-face { font-family: 'mMinchoF'; src: local('ＭＳ 明朝' ), local('MS Mincho' ); font-display: swap; unicode-range: U+20-5B, U+5D-200C, U+200E-1F2FF, U+1FB00-10FFFF; } @font-face { font-family: 'gMinchoF'; src: local('BIZ UD明朝' ), local('BIZ UDMincho' ), url('s/fgmf.woff2') format('woff2'), url('s/fgmf.woff') format('woff'), url('s/fgmf.ttf') format('truetype'); font-display: swap; unicode-range: U+20-5B, U+5D-200C, U+200E-1F2FF, U+1FB00-10FFFF; } /* シンボルフォント */ @font-face { font-family: 'Emoji' ; src: local('Segoe UI Emoji' ) , url('s/femj.woff2') format('woff2'), url('s/femj.woff') format('woff'), url('s/femj.ttf') format('truetype'); font-display: swap; unicode-range: U+200D, U+1F300-1FAFF; } /* ムシャクシャしてやった。笑えるなら何でもよかった。今はヒャッホウしている。 */ @font-cafe { font-family: "Latte Sans"; font-feature-settings: arrange "creamy", art-lettering "FONT!"; src: "coffee://brazil/mocha" format("espresso"); comment: "it's a joke about '@font-face' but my wish."; } /* ========================-=-=====================================-=-======================== -------- meta setting */ /* font constants */ :root { --underline: wavy underline; --font-roll-chars: ""; --font-m-gothic: mGothicP, mGothicF, Emoji, sans-serif; --font-m-mincho: mMinchoP, mMinchoF, Emoji, serif ; --font-m-gothic-mono: mGothicF, Emoji, sans-serif; --font-m-mincho-mono: mMinchoF, Emoji, serif ; --font-m-gothic-ex: mGothicF, Emoji, sans-serif; --font-m-mincho-ex: mMinchoF, Emoji, serif ; --font-g-gothic: gGothicP, gGothicF, Emoji, sans-serif; --font-g-mincho: gMinchoP, gMinchoF, Emoji, serif ; --font-g-gothic-mono: gGothicF, Emoji, sans-serif; --font-g-mincho-mono: gMinchoF, Emoji, serif ; --font-g-gothic-ex: gGothicF, Emoji, sans-serif; --font-g-mincho-ex: gMinchoF, Emoji, serif ; --font-gothic: var(--font-m-gothic ); --font-mincho: var(--font-m-mincho ); --font-gothic-mono: var(--font-m-gothic-mono); --font-mincho-mono: var(--font-m-mincho-mono); --font-gothic-ex: var(--font-m-gothic-ex ); --font-mincho-ex: var(--font-m-mincho-ex ); --font-base: var(--font-gothic ); --font-rev: var(--font-mincho ); --font-mono: var(--font-gothic-mono ); --font-mono-rev: var(--font-mincho-mono ); --font-ex: var(--font-mincho-ex ); } /* font extent */ #CSt-XFnt:checked ~ MAIN { --font-gothic: var(--font-g-gothic ); --font-mincho: var(--font-g-mincho ); --font-gothic-mono: var(--font-g-gothic-mono); --font-mincho-mono: var(--font-g-mincho-mono); --font-gothic-ex: var(--font-g-gothic-ex ); --font-mincho-ex: var(--font-g-mincho-ex ); } /* font select */ #CSt-Mnch:checked ~ MAIN { --font-base: var(--font-mincho ); --font-rev: var(--font-gothic ); --font-mono: var(--font-mincho-mono ); --font-mono-rev: var(--font-gothic-mono ); --font-ex: var(--font-gothic-ex ); } @charset "utf-8"; /* ＵＴＦ */ /* ========================-=-=====================================-=-======================== -------- form setting */ /* general setting */ :is(BUTTON, INPUT, OPTGROUP, SELECT, TEXTAREA) { margin: 0; line-height: 1em; } /* button component */ BUTTON, INPUT:is([type="button"], [type="reset"], [type="submit"]) , LABEL:is(.tgl, .rad) { display: inline-block; -webkit-appearance: none; appearance: none; margin: 0; padding: 0 0.24em; box-shadow: var(--box-shadows); border: 0.1em outset var(--button-edge-color); border-radius: 0.2em; background-color: var(--button-back-color); color: var(--button-color); font-size: 1em; font-family: var(--font-gothic); letter-spacing: -0.05em; text-align: center; white-space: nowrap; line-height: 1.8em; transition: background-color var(--button-transition) ease-out; } /* slider component */ INPUT[type="range"] { box-shadow: var(--box-shadows); cursor: pointer; } /* action for button component */ BUTTON:is(:hover, :active, :focus), INPUT:is([type="button"], [type="reset"], [type="submit"]):is(:hover, :active, :focus), LABEL:is(.tgl, .rad):is(:hover, :active, :focus), BUTTON:is(:hover, :active, :focus)::before, INPUT:is([type="button"], [type="reset"], [type="submit"]):is(:hover, :active, :focus)::before, LABEL:is(.tgl, .rad):is(:hover, :active, :focus)::before, BUTTON:is(:hover, :active, :focus)::after, INPUT:is([type="button"], [type="reset"], [type="submit"]):is(:hover, :active, :focus)::after, LABEL:is(.tgl, .rad):is(:hover, :active, :focus)::after { background-color: var(--hover-back-color) !important; color: var(--hover-color) !important; text-decoration: var(--underline) !important; } /* flag */ INPUT:is(.chk, .rad, .prad) { display: inline-block; position: absolute; opacity: 0%; width: 1px; visibility: hidden; } LABEL:is(.tgl, .rad) { width: max-content; height: max-content; font-size: 1rem; } BUTTON.tip::after, LABEL:is(.tgl, .rad)::after { display: block; visibility: hidden; position: absolute; z-index: 12000; width: max-content; height: max-content; margin: 0; padding: 0.32em; border: outset 0.05em var(--text-color); border-radius: 0.5em; font-size: 0.8rem; text-align: start; text-decoration: none; text-orientation: upright; line-height: 1em; white-space: nowrap; writing-mode: vertical-rl; content: ""; cursor: default; } BUTTON.tip:is(:hover, :active, :focus)::after, LABEL:is(.tgl, .rad):is(:hover, :active, :focus)::after { background: var(--hint-back-color) !important; color: var(--text-color) !important; text-shadow: var(--hinttable-text-shadows) !important; text-decoration: none !important; } LABEL.rad + LABEL.rad { margin-left: -0.5em; } /* ========================-=-=====================================-=-======================== -------- gadget menu setting */ /* gadget base */ .gadget { display: block; pointer-events: none; align-items: top; opacity: var(--gadget-nonactive-opacity); position: fixed; z-index: 9999; margin: 0; padding: 0; font-size: 1.4em; text-align: start; line-height: normal; writing-mode: horizontal-tb; transition: opacity var(--navi-transition) ease-out; } .gadget:not(.nohover):is(:active, :focus, :hover) { opacity: 100%; } .gadget A, .gadget INPUT, .gadget BUTTON, .gadget .tgl { pointer-events: auto; } @media print { .gadget { display: none !important; } } /* ========================-=-=====================================-=-======================== -------- スライダー制御 */ /* スライダーグリッド */ .sldr { display: grid; position: relative; align-items: stretch; } /* スライダーグリッドセル */ .sldr > .slabl /* 値表示ラベル領域 */ { height: 1.0em; grid-row: 1 / 2; grid-column: 1 / 2; letter-spacing: -0.05em; } .sldr > .sctrl /* 値スライダー領域 */ { height: 1.2em; grid-row: 2 / 3; grid-column: 1 / 2; width : 15em ; } .sldr > .srset /* 初期化ボタン領域 */ { height: 1.0em; grid-row: 1 / 3; grid-column: 2 / 3; font-size : 0.72em ; } /* スライダー外観 */ .sldr > .slabl > .hint { display: inline-block; padding: 0.0em 0.2em 0.2em; } .sldr > .sctrl > .range { width: calc(100% - 1em); } .sldr > .srset > BUTTON { margin-top: 0.5em; } @charset "utf-8"; /* ＵＴＦ */ /* ========================-=-=====================================-=-======================== -------- 読込中表示ガジェット */ /* 読込中表示ガジェット */ #G-Ldng { display: block; z-index: -1; opacity: 0%; left: 1.8em; top: 1.8em; margin: 0; padding: 0.5em; box-shadow: var(--loading-shadows); border-radius: 0.6em; background-color: var(--back-color); color: var(--text-color); font-family: var(--font-gothic); text-align: center; white-space: nowrap; transition: font-size var(--button-transition) ease-out, opacity var(--button-transition) ease-out; } #CLd-Show:checked ~ #G-Ldng, #CLd-Wait:checked ~ #G-Ldng { opacity : 100% ; z-index: 30000 ; } #CC-Exec:checked ~ #G-Ldng { opacity : 0% !important; z-index: 30000 !important; } #CLd-Show:not(:checked) ~ #G-Ldng { font-size: 0.84em ; } #G-Ldng::before { display: block; font-size: 1.8em; content: var(--hint-loading); } #CLd-Show:checked ~ #CLd-Load:checked ~ #G-Ldng::before { content: var(--hint-molding ); } #CLd-Show:not(:checked) ~ #CLd-Mbil:checked ~ #G-Ldng::before { content: var(--hint-waiting ); } #G-Ldng::after { display: block; text-decoration: overline solid; content: none; } #CLd-Load:not(:checked) #G-Ldng::after { content: var(--hint-loading-sub); } #CLd-Show:not(:checked) ~ #CLd-Mbil:checked ~ #G-Ldng::after { content: var(--hint-waiting-sub); } /* ========================-=-=====================================-=-======================== -------- 状態操作ガジェット */ /* 状態操作ガジェットの田の字グリッド */ #G-Stts { display: grid; z-index: 11000; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, auto); right: calc(var(--gadget-right)); top: 0.2em; } :is(#CC-Slct, #CC-Exec):checked ~ #G-Stts { pointer-events: auto; } /* 状態操作ガジェットのグリッドセル */ #GSt-Tgls { grid-row: 1 / 2; grid-column: 1 / 2; pointer-events: auto; } #GSt-Ancs { grid-row: 1 / 2; grid-column: 2 / 3; } #GSt-Magn { grid-row: 2 / 3; grid-column: 1 / 3; } #GSt-Sldr { grid-row: 3 / 4; grid-column: 1 / 3; } /* スピーチ調整スライダー */ #CC-Stop:checked ~ #G-Stts #GSt-Sldr { display: none; } /* ---- スピーチ操作ボタン ---- */ #CC-Stop:checked ~ #G-Cnsl #GCC-Brek { display: none; } #GCC-SPly { display: unset; } /* スピーチ操作ボタン - スピーチ文節選択モード */ #CSt-Siz0:checked ~ #G-Stts #GStT-Siz0, #CSt-Siz1:checked ~ #G-Stts #GStT-Siz1, #CSt-Siz2:checked ~ #G-Stts #GStT-Siz2, #CSt-Siz3:checked ~ #G-Stts #GStT-Siz3, #CSt-Siz4:checked ~ #G-Stts #GStT-Siz4, #CSt-XFnt:checked ~ #G-Stts #GStT-XFnt, #CSt-Mnch:checked ~ #G-Stts #GStT-Mnch, #CSt-Vert:checked ~ #G-Stts #GStT-Vert, #CSt-Hint:checked ~ #G-Stts #GStT-Hint, #CSt-Brek:checked ~ #G-Stts #GStT-Brek, #CSt-Encl:checked ~ #G-Stts #GStT-Encl, #CSt-Ruby:checked ~ #G-Stts #GStT-Ruby { border-style: inset; background-color: var(--focus-back-color); color: var(--focus-color); } /* 状態スイッチ - ヒントバルーン設定 */ #GStT-Siz0::after { content: "・" var(--hint-size-0 ); } #GStT-Siz1::after { content: "・" var(--hint-size-1 ); } #GStT-Siz2::after { content: "・" var(--hint-size-2 ); } #GStT-Siz3::after { content: "・" var(--hint-size-3 ); } #GStT-Siz4::after { content: "・" var(--hint-size-4 ); } #GStT-XFnt::after { content: "・" var(--hint-exfont ); } #GStT-Mnch::after { content: "・" var(--hint-mincho ); } #GStT-Vert::after { content: "・" var(--hint-vertical ); } #GStT-Hint::after { content: "・" var(--hint-hint ); } #GStT-Brek::after { content: "・" var(--hint-break ); } #GStT-Encl::after { content: "・" var(--hint-enclose ); } #GStT-Ruby::after { content: "・" var(--hint-ruby ); } #GStSl-Butn::after { content: "・" var(--hint-default-magnifier); } #GStSV-Butn::after { content: "・" var(--hint-default-volume ); } #GStSS-Butn::after { content: "・" var(--hint-default-speed ); } #GStSP-Butn::after { content: "・" var(--hint-default-pitch ); } #GStSB-Butn::after { content: "・" var(--hint-default-bgm ); } :is(#GStSl-Butn, #GStSV-Butn, #GStSS-Butn, #GStSP-Butn, #GStSB-Butn)::after { --right: 1em; --top: -1em; font-size: 1.12em; writing-mode: unset; } :is(#GStT-Siz0 , #GStT-Siz1 , #GStT-Siz2 , #GStT-Siz3 , #GStT-Siz4 , #GStT-XFnt , #GStT-Mnch , #GStT-Vert , #GStT-Hint , #GStT-Brek , #GStT-Encl , #GStT-Ruby , #GStSl-Butn, #GStSV-Butn, #GStSS-Butn, #GStSP-Butn, #GStSB-Butn):is(:hover, :active, :focus)::after { visibility: visible; } /* インデックスアンカー */ #GStA-Indx { display: inline-block; margin: 0 0 0 0.2em; padding: 0.24em 0.1em 0.4em 0; border: 0.1em outset var(--button-edge-color); border-radius: 0.2em; background-color: var(--button-back-color); color: var(--button-color); font-size: 1.5em; text-align: center; text-decoration: none; line-height: 1em; white-space: nowrap; writing-mode: horizontal-tb !important; transition: background-color var(--button-transition) ease-out; } #GStA-Indx::before { content: var(--hint-index); } #GStA-Indx:is(:active, :focus, :hover) { background-color: var(--hover-back-color); color: var(--hover-color); text-decoration: var(--underline); } /* ========================-=-=====================================-=-======================== -------- 操作ボタンガジェット */ /* グリッドテンプレート */ #G-Cnsl { display: grid; z-index: 11000; grid-template-rows: repeat(3, auto); row-gap: 0.2em; right: calc(var(--gadget-right)); bottom: var(--gadget-bottom); } /* グリッドセル */ #GC-CBtn { grid-row: 1 / 2; } #GC-PBtn { grid-row: 2 / 3; } /* ++++ [上] - スピーチ操作ボタンセル +++++++++ */ /* グリッドテンプレート */ #GC-CBtn { display: grid; column-gap: 0.2em; justify-content: right; } /* グリッドセル */ #GCC-Brek { grid-column: 1 / 2; } #GCC-SPly { grid-column: 2 / 3; font-size: 1.12em; } /* ---- スピーチ操作ボタン ---- */ #CC-Stop:checked ~ #G-Cnsl #GCC-Brek { display: none; } #GCC-SPly { display: unset; } /* スピーチ操作ボタン - スピーチ文節選択モード */ #CC-Brek:checked ~ #G-Cnsl #GCC-Brek, #CC-Slct:checked ~ #G-Cnsl #GCC-SPly { border-style: inset !important; background-color: var(--focus-back-color) !important; color: var(--focus-color) !important; } /* スピーチ操作ボタン状態依存ラベル - スピーチ文節選択モード */ #CC-Slct:checked ~ #G-Cnsl #GCC-SPly::before { display: inline-block; color: var(--sign-color); font-size: 0.72em; line-height: 1em; white-space: pre; content: var(--speech-button-select); } /* スピーチ操作ボタン状態依存ラベル - スピーチモード */ #CC-Exec:checked ~ #G-Cnsl #GCC-SPly::after { display: inline-block; white-space: pre; content: var(--speech-button-doing ); } /* ++++ [下] - パート操作ボタンセル +++++++++ */ /* グリッドテンプレート */ #GC-PBtn { display: grid; column-gap: 0.05em; } #GCPt-Clse { grid-row: 1 / 2; grid-column: 1 / 2; margin-right: 0.15em; } #GCPt-Prev { grid-row: 1 / 2; grid-column: 2 / 3; } #GCPt-Next { grid-row: 1 / 2; grid-column: 3 / 4; } #CSt-Vert:checked ~ #G-Cnsl #GCPt-Next { grid-column: 2 / 3; } #CSt-Vert:checked ~ #G-Cnsl #GCPt-Prev { grid-column: 3 / 4; } /* ---- パート操作ボタン ---- */ #CC-Stop:not(:checked) ~ #G-Cnsl #GC-PBtn { display: none; } /* ========================-=-=====================================-=-======================== -------- パートタイトルガジェット */ /* グリッドテンプレート */ #G-Titl { display: grid; z-index: 11000; opacity: 100%; row-gap: 0.2em; left: 0.05em; bottom: var(--gadget-bottom); font-size: 0.9rem; justify-items: start; transition: opacity var(--navi-transition) ease-out, top var(--navi-transition) ease-out; } #G-Stts:is(:active, :focus, :hover) ~ #G-Titl { opacity: var(--gadget-nonactive-opacity); } /* グリッドセル */ #GT-Updt { grid-row: 6 / 7; } #GT-Divs { grid-row: 5 / 6; } #GT-Sect { grid-row: 4 / 5; } #GT-Chap { grid-row: 3 / 4; } #GT-HLin { grid-row: 2 / 3; } #GT-HSub { grid-row: 1 / 2; } :is(#GT-HLin, #GT-HSub) { font-family: var(--font-mincho); } #G-Titl > DIV, #G-Titl .hint { height: unset; } /* パートタイトルの表示調整 */ #G-Titl .hint { border: outset 0.05em var(--button-edge-color); background-color: var(--button-back-color); color: var(--button-color); line-height: 1em; letter-spacing; 0.85em; } /* パートタイトルのビュレット */ #G-Titl .hint::before { margin-right: 0.4em; box-shadow: var(--box-shadows); border: dotted 0.05em var(--button-edge-color); border-radius: 0.2em; background-color: var(--icon-back-color); font-size: 0.72em; } #GT-Updt > .hint::before { content: var(--hint-title-date); } #GT-Divs > .hint::before { content: var(--hint-title-div ); } #GT-Sect > .hint::before { content: var(--hint-title-sec ); } #GT-Chap > .hint::before { content: var(--hint-title-chap); } #GT-HLin > .hint::before { content: var(--hint-title-hlin); } #GT-HSub > .hint::before { content: var(--hint-title-hsub); } /* ========================-=-=====================================-=-======================== -------- 操作ヒント表示ガジェット */ /* 操作ヒント表示ガジェットの基盤テーブル */ #G-Hint { display: none; opacity: 0%; z-index: 12000; left: 0; bottom: var(--gadget-bottom); height: auto; background: none; color: var(--button-color); font-size: 0.72em; text-align: start; } #CLd-Mbil:checked ~ #G-Hinr { display: none !important; } #CSt-Hint:checked ~ #G-Hint { display: block; } #CSp-RBtn:checked ~ #G-Hint { opacity: 0% !important; } /* 操作ヒント表示ガジェットのテーブル */ #G-Hint TABLE { border-style: none; background-color: var(--hinttable-back-color); } /* 操作ヒント表示ガジェットのテーブルセル */ #G-Hint TABLE > :is(THEAD, TBODY) > TR > :is(TH, TD) { margin: 0; background: unset; color: var(--hinttable-color); text-shadow: var(--hinttable-text-shadows); text-align: start; } #G-Hint TABLE :is(TR, TH, TD) { padding: 0; } #G-Hint TABLE > THEAD > TR > TH { background-color: var(--hinttable-titleback-color ); font-weight: normal; transform : scaleY(0.8); } #G-Hint TABLE > TBODY > TR > TH { background-color: var(--hinttable-headback-color ); font-weight: normal; text-align: end; } #G-Hint TABLE > TBODY > TR > TD { background-color: var(--hinttable-detailback-color); } /* ========================-=-=====================================-=-======================== -------- 表示制御 */ #CLd-Mbil:checked ~ #CC-Exec:checked ~ #G-Stts :is(#GSt-Tgls, #GSt-Ancs, #GSt-Magn) { display: none !important; } /* ========================-=-=====================================-=-======================== -------- 透明度制御 */ #CC-Exec:checked ~ :is(#G-Cnsl, #G-Stts) { opacity: var(--gadget-speech-opacity ); } #CC-Exec:not(:checked) ~ #CSw-On:checked ~ #G-Titl { opacity: var(--gadget-nonactive-opacity); } #CC-Exec:checked ~ #CSw-On:not(:checked) ~ #G-Titl { opacity: 0%; } :is(#G-Cnsl, #G-Stts):is(:active, :focus, :hover) { opacity: 100% !important; } #CSw-On:checked ~ :is(#G-Cnsl, #G-Stts), #CC-Exec:not(:checked) ~ #CSw-On:not(:checked) ~ #G-Titl, #CC-Exec:checked ~ #CSw-On:checked ~ #G-Titl { opacity: 100%; } #CLd-Mbil:checked ~ #CLd-LTap:not(:checked) ~ #CC-Exec:not(:checked) ~ :is(#G-Cnsl, #G-Stts, #G-Titl) { opacity: 0% !important; } #CLd-Mbil:checked ~ #CLd-LTap:checked ~ #CC-Exec:not(:checked) ~ :is(#G-Cnsl, #G-Stts, #G-Titl), #CLd-Mbil:checked ~ #CC-Exec:checked ~ #CSw-On:checked ~ :is(#G-Cnsl, #G-Stts, #G-Titl) { opacity: 100% !important; } @charset "utf-8"; /* ＵＴＦ */ /* ========================-=-=====================================-=-======================== -------- attribute setting for block */ /* display */ .hide { display: none !important; } /* text align */ .left { text-align : left ; } .center { text-align : center; } .right { text-align : right ; } /* ========================-=-=====================================-=-======================== -------- Main frame setting */ BODY { margin: 0; padding: 0; background-color: var(--back-color); color: var(--text-color); font-family: var(--font-gothic); font-size: 1em; font-weight: normal; text-orientation: mixed; line-break: loose; vertical-align: middle; scroll-behavior: smooth; cursor: auto; transition: background-color 1.0s ease-out; } /* Main frame */ MAIN { display: block; box-sizing: border-box; margin: 0; padding: 0.5rem; overflow: hidden; font-family: var(--font-base); font-size: calc(var(--foreword-ratio) * 1em); text-shadow: var(--text-shadows); } @media print { MAIN { text-shadow: unset; } } /* 組み方向制御 */ @media screen { #CSt-Vert:not(:checked) ~ MAIN { width : var(--main-width ); writing-mode: horizontal-tb; } #CSt-Vert:checked ~ MAIN { height: var(--main-height); writing-mode: vertical-rl ; vertical-align: middle; } } /* カーソル */ #CSp-Slct:checked ~ MAIN, #CSp-RBtn:checked ~ MAIN { cursor: not-allowed; } /* ========================-=-=====================================-=-======================== -------- A-Head frame setting */ /* A-Head frame (H1) */ #A-Head { } /* ========================-=-=====================================-=-======================== -------- A-Fwrd frame setting */ /* A-Fwrd frame */ #A-Fwrd { display: block; padding: 1em; border: dotted 0.2em var(--foreword-edge-color); border-radius: 1em; background-color: var(--foreword-color); color: var(--text-color); font-size: calc(var(--base-chars) / var(--p-chars) * 1em * var(--foreword-ratio)); } #CSt-Brek:not(:checked) ~ MAIN P { --p-height-b: var(--p-height-0); } #CSt-Brek:checked ~ MAIN P { --p-height-b: var(--p-height-1); } /* マージン制御 */ @media screen { #CLd-Mbil:not(:checked) ~ MAIN #A-Fwrd { --forward-margin: max(calc((100% - (var(--p-chars) * 0.98em)) / 2 - var(--sw) - 1em), 0em); } #CLd-Mbil:checked ~ MAIN #A-Fwrd { --forward-margin: 0em; } #CSt-Vert:not(:checked) ~ MAIN #A-Fwrd { margin: 0 var(--forward-margin); } #CSt-Vert:checked ~ MAIN #A-Fwrd { margin: var(--forward-margin) 0; } } /* ========================-=-=====================================-=-======================== -------- A-Tail frame setting */ /* A-Tail frame */ @media screen { #CSt-Vert:not(:checked) ~ MAIN #A-Tail { padding: 80vh 0.32em 0 0.32em; } #CSt-Vert:checked ~ MAIN #A-Tail { padding: 0.32em 80vw 0.32em 0; } #A-Tail::after { display: block; content: "[" var(--my-name) "]"; } #CSt-Vert:not(:checked) ~ MAIN #A-Tail::after { text-align: left ; } #CSt-Vert:checked ~ MAIN #A-Tail::after { text-align: right; } } @media print { #A-Tail { display: none !important; } } @charset "utf-8"; /* ＵＴＦ */ /* ========================-=-=====================================-=-======================== -------- ナビゲートグリッド */ /* グリッドテンプレート */ #A-Navi { display: grid; justify-content: center; margin: 1em; } /* グリッドセル */ #AN-Capt { grid-row: 1 / 2 ; grid-column: 1 / 2 ; } #A-Navi > .nvo { grid-row: 1 / 2 !important; grid-column: 2 / 3 !important; margin: 1em !important; } #AN-Cntr { grid-row: 2 / 3 ; grid-column: 2 / 3 ; } @media print { #A-Navi { display: block !important; } } INPUT[id="0"]:not(:checked) ~ #A-Navi::before { display: inline-block; font-size: 1rem; content: var(--hedding-open-caption); } INPUT[id="0"]:not(:checked) ~ #A-Navi > OL { display : none; } INPUT[id="0"]:not(:checked) ~ #A-Navi > DIV { visibility: hidden; } /* ---- グリッドセルカプセル ---- */ .ncap { --ncap-before-border: 0.01em solid var(--navi-edge-color); --ncap-pre-border: 0.10em solid var(--navi-edge-color); display: inline-block; margin: 0.2em; padding: 0.2em; border-top: var(--ncap-before-border); border-left: var(--ncap-pre-border); border-bottom: unset; border-radius: 0.2em; background-color: var(--navi-back-color); color: var(--text-color); text-decoration: none; transition: background-color var(--navi-transition) ease-out; } /* 組み方向制御 */ @media screen { #CSt-Vert:checked ~ MAIN .ncap { border-left: var(--ncap-before-border); border-bottom: var(--ncap-pre-border); border-top: unset; } } /* ++++ グリッドセル詳細 +++++++++ */ /* ---- [左] キャプション ---- */ #AN-Capt { text-align: start; } #AN-Capt > .ncap:is(:focus, :active, :hover) { background-color: var(--focus-back-color); color: var(--focus-color); } /* 組み方向制御 */ @media screen { #AN-Capt { padding-top: 1em; border-right: solid 0.5pt var(--navi-edge-color); writing-mode: vertical-rl; vertical-align: middle; } #CSt-Vert:checked ~ MAIN #AN-Capt { padding-right: 1em; border-bottom: solid 0.5pt var(--navi-edge-color); writing-mode: horizontal-tb; text-align: right; vertical-align: middle; } } /* ---- [右] ネスト可能リスト ---- */ .nvo { padding: 0.3em; border-radius: 0.2em; background-color: var(--navi-back-color); list-style-type: none; } /* ---- [右末尾] - リストのカウンター ---- */ #AN-Cntr { color: var(--navi-edge-color); font-size: 64%; text-align: end; } /* 組み方向制御 */ @media screen { #CSt-Vert:not(:checked) ~ MAIN #AN-Cntr { padding-right : 1em; border-top : solid 0.5pt var(--navi-edge-color); } #CSt-Vert:checked ~ MAIN #AN-Cntr { padding-bottom: 1em; border-right: solid 0.5pt var(--navi-edge-color); } } /* ========================-=-=====================================-=-======================== -------- ネスト可能リストグリッド */ /* グリッドテンプレート */ .nvl { display: grid; grid-template-columns: auto min-content; align-items: center; } .nvl + .nvl { margin-top : 0.2em; } @media screen { #CSt-Vert:checked ~ MAIN .nvl { grid-template-columns: min-content auto; } #CSt-Vert:checked ~ MAIN .nvl + .nvl { margin-right: 0.2em; margin-top: unset; } } /* グリッドセル */ .nvn { grid-row: 1 / 3; grid-column: 2 / 3; } .nvc { grid-row: 1 / 2; grid-column: 1 / 2; } .nva { grid-row: 2 / 3; grid-column: 1 / 2; } .nvo { grid-row: 3 / 4; grid-column: 1 / 3; margin: 0.1em; } @media screen { #CSt-Vert:checked ~ MAIN .nvn { grid-row: 1 / 3; grid-column: 1 / 2; } #CSt-Vert:checked ~ MAIN .nvc { grid-row: 2 / 3; grid-column: 2 / 3; } #CSt-Vert:checked ~ MAIN .nva { grid-row: 1 / 2; grid-column: 2 / 3; } } /* ++++ グリッドセル詳細 +++++++++ */ /* ---- [右Num] リストセルの連番ラベル ---- */ /* 連番設定 */ .nvn { --nvn-before-border: 0.01em solid var(--navi-edge-color); --nvn-pre-border: 0.10em solid var(--navi-edge-color); justify-self: stretch; align-content: center; border-top: var(--nvn-before-border); border-left: var(--nvn-pre-border); border-bottom: unset; border-radius: 0.2em; background-color: var(--navi-label-back-color); color: var(--navi-label-color); text-indent: 0em; } /* 数字連番設定 */ .nvn:not(.s) { padding: 0 0.2em; font-family: var(--font-gothic); text-align: center; text-combine-upright: all; writing-mode: vertical-rl; vertical-align: middle; } /* 文字列連番設定 */ .nvn.s { width: max-content; height: 2em; padding: 0 0.3em; font-size: 0.64em; content: attr(data-str); } /* 組み方向制御 */ @media screen { #CSt-Vert:checked ~ MAIN .nvn { border-left: var(--nvn-before-border); border-bottom: var(--nvn-pre-border); border-top: unset; } #CSt-Vert:checked ~ MAIN .nvn:not(.s) { text-combine-upright: all; writing-mode: unset; } #CSt-Vert:checked ~ MAIN .nvn.s { width: 2em; height: max-content; padding: 0.3em 0; } } /* ---- [左上段] リストセルのカウンター ---- */ .nvc { align-self: end; justify-self: stretch; margin: 0.1em 0.2em; line-height: 0.64em; color: var(--navi-label-color); font-size: 0.64em; text-align: left; content: attr(data-count); } /* 組み方向制御 */ @media screen { #CSt-Vert:checked ~ MAIN .nvc { align-self: start; margin: 0.2em 0.1em; text-align: right; } } /* ---- [左下段] リストセルのアンカー ---- */ .nva { --nva-before-border: 0.08em solid var(--navi-edge-color); --nva-pre-border: 0.01em solid var(--navi-edge-color); align-self: start; margin: 0.2em; padding: 0.2em; border-top: var(--nva-before-border); border-left: var(--nva-pre-border); border-bottom: unset; border-radius: 0.2em; background-color: var(--navi-link-color); color: var(--navi-color); font-size: 0.8em; line-height: 1em; text-align: right; text-decoration: none !important; cursor: pointer; } /* 組み方向制御 */ @media screen { #CSt-Vert:checked ~ MAIN .nva { align-self: end; border-left: var(--nva-before-border); border-bottom: var(--nva-pre-border); border-top: unset; text-align: left; } } /* 操作に基づく色指定 */ .nva:is(:focus, :active, :hover), .nvc:is(:focus, :active, :hover) + .nva, .nvn:is(:focus, :active, :hover) + .nvc + .nva { background-color: var(--navi-on-back-color); text-decoration: var(--underline ) !important; } .nva:is(:focus, :active), .nvc:is(:focus, :active) + .nva, .nvn:is(:focus, :active) + .nvc + .nva { color: var(--navi-on-color); } .nva:hover, .nvc:hover + .nva, .nvn:hover + .nvc + .nva { color: var(--navi-hover-color); } @charset "utf-8"; /* ＵＴＦ */ /* ========================-=-=====================================-=-======================== -------- ヘディング設定 */ /* レギュラーヘディング */ #A-Head, .phead { --h-margin: 0.5rem; --h-padding: 1.0rem; display: block; opacity: 80%; box-sizing: border-box; margin: var(--h-margin) 10%; padding: var(--h-margin) var(--h-padding); border: 0.05rem outset var(--hedding-edge-color); border-radius: 1em; background-color: var(--hedding-back-color); color: var(--hedding-color); font-size: 2.00rem; font-weight: normal; text-align: left; line-height: 1em; word-break: break-all; transition: background-color var(--hedding-transition) ease-out; --h-margin-p: calc(var(--base-chars) / var(--p-chars) * var(--line-height)); } /* 微調整 */ #A-Head { padding: 1.2rem; } H3.phead { font-size: 1.68rem; } H4.phead { font-size: 1.50rem; } H5.phead, H6.phead { font-size: 1.32rem; border-radius: 0.180em; } H6.phead { border-style: inset; } /* マージン */ H2.phead { margin: var(--h-margin ) 8% var(--h-margin) 9%; } H3.phead { margin: var(--h-margin ) 7% var(--h-margin) 12%; } H4.phead { margin: var(--h-margin ) 6% var(--h-margin) 15%; } H5.phead { margin: var(--h-margin ) 5% var(--h-margin) 18%; } H6.phead { margin: var(--h-margin ) 4% var(--h-margin) 21%; } :is(P, .prad:checked + .phead + .ptext) + .prad + H2.phead { margin: var(--h-margin-p) 8% var(--h-margin) 9%; } :is(P, .prad:checked + .phead + .ptext) + .prad + H3.phead { margin: var(--h-margin-p) 7% var(--h-margin) 12%; } :is(P, .prad:checked + .phead + .ptext) + .prad + H4.phead { margin: var(--h-margin-p) 6% var(--h-margin) 15%; } :is(P, .prad:checked + .phead + .ptext) + .prad + H5.phead, :is(P, H5.phead + .ptext) + .prad + H5.phead { margin: var(--h-margin-p) 5% var(--h-margin) 18%; } :is(P, .prad:checked + .phead + .ptext) + .prad + H6.phead { margin: var(--h-margin-p) 4% var(--h-margin) 21%; } /* 組み方向制御 */ @media screen { #CSt-Vert:checked ~ MAIN #A-Head { margin : 10% var(--h-margin); } #CSt-Vert:checked ~ MAIN .phead { padding: var(--h-padding) var(--h-margin); } #CSt-Vert:checked ~ MAIN H2.phead { margin : 9% var(--h-margin ) 8%; } #CSt-Vert:checked ~ MAIN H3.phead { margin : 12% var(--h-margin ) 7%; } #CSt-Vert:checked ~ MAIN H4.phead { margin : 15% var(--h-margin ) 6%; } #CSt-Vert:checked ~ MAIN H5.phead { margin : 18% var(--h-margin ) 5%; } #CSt-Vert:checked ~ MAIN H6.phead { margin : 21% var(--h-margin ) 4%; } #CSt-Vert:checked ~ MAIN :is(P, .prad:checked + .phead + .ptext) + .prad + H2.phead { margin : 9% var(--h-margin-p) 8% var(--h-margin); } #CSt-Vert:checked ~ MAIN :is(P, .prad:checked + .phead + .ptext) + .prad + H3.phead { margin : 12% var(--h-margin-p) 7% var(--h-margin); } #CSt-Vert:checked ~ MAIN :is(P, .prad:checked + .phead + .ptext) + .prad + H4.phead { margin : 15% var(--h-margin-p) 6% var(--h-margin); } #CSt-Vert:checked ~ MAIN :is(P, .prad:checked + .phead + .ptext) + .prad + H5.phead, #CSt-Vert:checked ~ MAIN :is(P, H5.phead + .ptext) + .prad + H5.phead { margin : 18% var(--h-margin-p) 5% var(--h-margin); } #CSt-Vert:checked ~ MAIN :is(P, .prad:checked + .phead + .ptext) + .prad + H6.phead { margin : 21% var(--h-margin-p) 4% var(--h-margin); } } /* アイコン */ #A-Head::before, .phead::before { display: inline-block; padding: 0.1em; box-shadow: var(--box-shadows); border-radius: 0.2em; background: var(--icon-back-color); color: var(--text-color); font-size: 0.8em; } #A-Head::before { content: var(--hint-head ); } H2.phead::before { content: var(--hint-div ); } H3.phead::before { content: var(--hint-sec ); } H4.phead::before { content: var(--hint-chap ); } H5.phead::before { content: var(--hint-hline); } H6.phead::before { content: var(--hint-hsub ); } @media screen { #CSt-Vert:not(:checked) ~ MAIN .phead::before { margin-right : 0.5em; } #CSt-Vert:checked ~ MAIN .phead::before { margin-bottom: 0.5em; } } @media print { .phead::before { margin-right : 0.5em; } } /* ========================-=-=====================================-=-======================== -------- パートヘディング設定 */ /* ---- 案内キャプション ---- */ .phead::after { display: block; position: relative; top: 0em; bottom: unset; left: unset; right: 0em; float: right; box-shadow: var(--box-shadows); border-radius: 0.2em; background: var(--icon-back-color); text-align: end; font-family: var(--font-gothic); font-size: 0.8rem; line-height: 1.12em; content: var(--hedding-open-caption); } @media print { .phead::after { display: none !important; } } /* オープン時の案内キャプション */ .prad:checked + .phead::after { content: var(--hedding-close-caption); } /* キャプションの組み方向制御 */ @media screen { #CSt-Vert:checked ~ MAIN .phead::after { top: unset; bottom: 0em; left: 0em; right: unset; } } /* ---- 操作に基づく調整 ---- */ .phead:is(:focus, :active, :hover) { background-color: var(--hover-back-color); color: var(--hover-color); cursor: pointer; text-decoration: var(--hover); } /* オープン時の色 */ .prad:checked + .phead:not(:hover) { background-color: var(--hedding-on-back-color); } .prad:checked + .phead:not(:hover)::after { background-color: var(--back-color ); } /* ========================-=-=====================================-=-======================== -------- パートテキスト設定 */ /* パートテキストブロック */ .ptext { display: none; margin: 0; padding: 0; } /* ラジオボタン選択でオープン */ .prad:checked + .phead + .ptext { display: block; } @charset "utf-8"; /* ＵＴＦ */ /* ========================-=-=====================================-=-======================== -------- 段落制御 */ /* 段落 */ P { --p-height-0: calc(0 * var(--line-height)); --p-height-1: calc(1 * var(--line-height)); --p-height-2: calc(2 * var(--line-height)); --p-height-b: var(--p-height-0); --p-height-w: var(--p-height-1); --p-margin: max(calc((100% - (var(--p-chars) * 0.98em)) / 2 - var(--sw)), var(--main-padding)); --p-indent: 0em; --p-content: ""; margin: 0; padding: 0; line-break: strict; line-height: var(--line-height); color: var(--text-color); font-size: calc(var(--base-chars) / var(--p-chars) * 1em); font-weight: normal; text-indent: 0em; text-align: start; overflow-wrap: anywhere; transform: scale(1.0, 1.0); } #CSt-Brek:checked ~ MAIN P { --p-height-b: var(--p-height-1); --p-height-w: var(--p-height-2); } @media print { P { margin: 0 var(--p-margin); font-size: calc(var(--base-chars) / var(--p-chars) * 1rem); } } .ptext:has(.prad:checked) > P { --text-color: var(--week-color); } P::before, P::after { white-space: pre; } /* インデント設定 */ .qt[data-i="1" ] { --p-indent: 1em; } .qt[data-i="2" ] { --p-indent: 2em; } .qt[data-i="3" ] { --p-indent: 3em; } .qt[data-i="4" ] { --p-indent: 4em; } .qt[data-i="5" ] { --p-indent: 5em; } .qt[data-i="6" ] { --p-indent: 6em; } .qt[data-i="7" ] { --p-indent: 7em; } .qt[data-i="8" ] { --p-indent: 8em; } .qt[data-i="9" ] { --p-indent: 9em; } .qt[data-i="10"] { --p-indent: 10em; } .qt[data-i="11"] { --p-indent: 11em; } .qt[data-i="12"] { --p-indent: 12em; } .qt[data-i="13"] { --p-indent: 13em; } .qt[data-i="14"] { --p-indent: 14em; } .qt[data-i="15"] { --p-indent: 15em; } .qt[data-i="16"] { --p-indent: 16em; } .qt[data-s="1" ] { --p-content: "　" ; } .qt[data-s="2" ] { --p-content: "　　" ; } .qt[data-s="3" ] { --p-content: "　　　" ; } .qt[data-s="4" ] { --p-content: "　　　　" ; } .qt[data-s="5" ] { --p-content: "　　　　　" ; } .qt[data-s="6" ] { --p-content: "　　　　　　" ; } .qt[data-s="7" ] { --p-content: "　　　　　　　" ; } .qt[data-s="8" ] { --p-content: "　　　　　　　　" ; } .qt[data-s="9" ] { --p-content: "　　　　　　　　　" ; } .qt[data-s="10"] { --p-content: "　　　　　　　　　　" ; } .qt[data-s="11"] { --p-content: "　　　　　　　　　　　" ; } .qt[data-s="12"] { --p-content: "　　　　　　　　　　　　" ; } .qt[data-s="13"] { --p-content: "　　　　　　　　　　　　　" ; } .qt[data-s="14"] { --p-content: "　　　　　　　　　　　　　　" ; } .qt[data-s="15"] { --p-content: "　　　　　　　　　　　　　　　" ; } .qt[data-s="16"] { --p-content: "　　　　　　　　　　　　　　　　"; } /* インデント制御 */ .rem { text-indent: calc( var(--indent-remark) * -1); } .qt { text-indent: calc((var(--p-indent) + var(--indent-qt )) * -1); } @media screen { #CSt-Vert:not(:checked) ~ MAIN .rem { padding-left: var(--indent-remark) ; } #CSt-Vert:not(:checked) ~ MAIN .qt { padding-left: calc(var(--p-indent) + var(--indent-qt )); } #CSt-Vert:checked ~ MAIN .rem { padding-top : var(--indent-remark) ; } #CSt-Vert:checked ~ MAIN .qt { padding-top : calc(var(--p-indent) + var(--indent-qt )); } } @media print { .rem { padding-left: var(--indent-remark) ; } .qt { padding-left: calc(var(--p-indent) + var(--indent-qt )); } } /* マージン制御 */ @media screen { #CSt-Vert:not(:checked) ~ MAIN P { margin: 0 var(--p-margin); } #CSt-Vert:checked ~ MAIN P { margin: var(--p-margin) 0; } } /* 段落飾り */ .hname::before { content: var(--hname-before ) ; } .hname::after { content: var(--hname-after ) ; } H5.phead + .ptext > .hname::before { content: var(--headline-before ) ; } H5.phead + .ptext > .hname::after { content: var(--headline-after ) ; } .hexp:not(:has(+ .hexp))::before { content: var(--hexplain-before ) ; } .hexp:not(:has(+ .hexp))::after { content: var(--hexplain-after ) ; } H6.phead + .ptext > .hname::before { content: var(--subhead-before ) var(--subhead-alter ); } H6.phead + .ptext > .hname:has(+ .hcos)::before { content: var(--subhead-alter ); } H6.phead + .ptext > .hname::after { content: var(--subhead-after ) ; } .sep::before { content: var(--separator-before ) ; } .sep::after { content: var(--separator-after ) ; } .rem::before { content: var(--remark-before ) ; } .rem::after { content: var(--remark-after ) ; } .hcos::before { content: var(--cosubhead-before ) var(--cosubhead-alter); } H6.phead + .ptext > .hname:has(+ .hcos) ~ .hcos::before { content: var(--cosubhead-alter); } .hcos::after { content: var(--cosubhead-after ) ; } .qt:not(.bb)::before { content: var(--quoteblock-head ) var(--p-content ); } .qt.bb::before { content: var(--quotebigblock-head) var(--p-content ); } :not(.qt) + .qt:not(.bb)::before { content: var(--quoteblock-top ) var(--p-content ); } :not(.qt) + .qt.bb::before { content: var(--quotebigblock-top ) var(--p-content ); } #CSt-Brek:checked ~ MAIN .qt.bk + .qt:not(.bb).bk::before, #CSt-Brek:checked ~ MAIN .qt.bk + .qt.bb.bk::before { content: "\a"; } /* ========================-=-=====================================-=-======================== -------- 特徴的な段落制御 */ /* 空白段落 */ P:empty { width: var(--line-height); height: var(--line-height); } /* 前置き部 */ #A-Fwrd > P { font-size: unset !important; } @media screen { #CSt-Vert:not(:checked) ~ MAIN #A-Fwrd P { margin-left: 0 !important; margin-right : 0 !important; } #CSt-Vert:checked ~ MAIN #A-Fwrd P { margin-top : 0 !important; margin-bottom: 0 !important; } } @media print { #A-Fwrd P { margin-left: 0 !important; margin-right : 0 !important; } } /* 表題と著者 */ P:is(.title, .author) { margin: 0 !important; } P:is(.title, .author)::before { padding: 0.1em; box-shadow: var(--box-shadows ); border-radius: 0.2em; background: var(--icon-back-color); } P.title::before { content: var(--hint-title ); } P.author::before { content: var(--hint-author); } @media screen { #CSt-Vert:not(:checked) ~ MAIN P:is(.title, .author)::before { margin-right : 0.5em; } #CSt-Vert:checked ~ MAIN P:is(.title, .author)::before { margin-bottom: 0.5em; } } @media print { P:is(.title, .author)::before { margin-right : 0.5em; } } /* ========================-=-=====================================-=-======================== -------- 組み方向および改行モード制御 */ /* .nom : 改行モード時に前マージン無し .sep : セパレータ .rem : 冒頭説明 .hexp: 項説明 .hcos: 副々項目 .qt : 引用 H5.phead + .ptext > .hname: 節内見出し H6.phead + .ptext > .hname: 副項目 */ @media screen { /* デフォルト */ #CSt-Vert:not(:checked) ~ MAIN P + P:not(.nom) { margin-top : var(--p-height-b); } #CSt-Vert:checked ~ MAIN P + P:not(.nom) { margin-right: var(--p-height-b); } /* 無間隔 */ #CSt-Vert:not(:checked) ~ MAIN P.nom:not(.nb) + .nom.nb { margin-top : var(--p-height-b); } #CSt-Vert:not(:checked) ~ MAIN P + .nom { margin-top : var(--p-height-0); } #CSt-Vert:checked ~ MAIN P.nom:not(.nb) + .nom.nb { margin-right: var(--p-height-b); } #CSt-Vert:checked ~ MAIN P + .nom { margin-right: var(--p-height-0); } /* 冒頭説明 */, #CSt-Vert:not(:checked) ~ MAIN P:not(.rem) + .rem #CSt-Vert:not(:checked) ~ MAIN .rem + P:not(.rem) { margin-top : var(--p-height-1); } #CSt-Vert:not(:checked) ~ MAIN .rem + .rem { margin-top : var(--p-height-0); } #CSt-Vert:checked ~ MAIN P:not(.rem) + .rem, #CSt-Vert:checked ~ MAIN .rem + P:not(.rem) { margin-right: var(--p-height-1); } #CSt-Vert:checked ~ MAIN .rem + .rem { margin-right: var(--p-height-0); } /* 項説明 */ #CSt-Vert:not(:checked) ~ MAIN .hexp + P:not(.hexp) { margin-top : var(--p-height-1) !important; } #CSt-Vert:not(:checked) ~ MAIN :is(.hexp, .hcos) + .hexp { margin-top : var(--p-height-0) !important; } #CSt-Vert:checked ~ MAIN .hexp + P:not(.hexp) { margin-right: var(--p-height-1) !important; } #CSt-Vert:checked ~ MAIN :is(.hexp, .hcos) + .hexp { margin-right: var(--p-height-0) !important; } /* 副々項目 */ #CSt-Vert:not(:checked) ~ MAIN P:not(.hcos, .nom.nb) + .hcos { margin-top : var(--p-height-2) !important; } #CSt-Vert:not(:checked) ~ MAIN .nom.nb + .hcos { margin-top : var(--p-height-w) !important; } #CSt-Vert:not(:checked) ~ MAIN .hcos + P { margin-top : var(--p-height-1) !important; } #CSt-Vert:checked ~ MAIN P:not(.hcos, .nom.nb) + .hcos { margin-right: var(--p-height-2) !important; } #CSt-Vert:checked ~ MAIN .nom.nb + .hcos { margin-right: var(--p-height-w) !important; } #CSt-Vert:checked ~ MAIN .hcos + P { margin-right: var(--p-height-1) !important; } /* 引用と箇条 */ #CSt-Vert:not(:checked) ~ MAIN P:not(.rem, .qt) + .qt, #CSt-Vert:not(:checked) ~ MAIN .qt + P:not(.hcos, .qt) { margin-top : var(--p-height-1) !important; } #CSt-Vert:not(:checked) ~ MAIN :is(.rem, .qt) + .qt { margin-top : var(--p-height-0) !important; } #CSt-Vert:checked ~ MAIN P:not(.rem, .qt) + .qt, #CSt-Vert:checked ~ MAIN .qt + P:not(.hcos, .qt) { margin-right: var(--p-height-1) !important; } #CSt-Vert:checked ~ MAIN :is(.rem, .qt) + .qt { margin-right: var(--p-height-0) !important; } /* セパレータ */ #CSt-Vert:not(:checked) ~ MAIN .sep + P:not(.sep), #CSt-Vert:not(:checked) ~ MAIN :not(.sep) + .sep { margin-top : var(--p-height-2) !important; } #CSt-Vert:not(:checked) ~ MAIN .sep + .sep { margin-top : var(--p-height-1) !important; } #CSt-Vert:checked ~ MAIN .sep + P:not(.sep), #CSt-Vert:checked ~ MAIN :not(.sep) + .sep { margin-right: var(--p-height-2) !important; } #CSt-Vert:checked ~ MAIN .sep + .sep { margin-right: var(--p-height-1) !important; } /* 見出し */ #CSt-Vert:not(:checked) ~ MAIN :is(H5, H6).phead + .ptext > .hname { margin-top : var(--p-height-1) !important; } #CSt-Vert:not(:checked) ~ MAIN H5.phead + .ptext > .hname + P { margin-top : var(--p-height-0) !important; } #CSt-Vert:checked ~ MAIN :is(H5, H6).phead + .ptext > .hname { margin-right: var(--p-height-1) !important; } #CSt-Vert:checked ~ MAIN H5.phead + .ptext > .hname + P { margin-right: var(--p-height-0) !important; } } @media print { /* デフォルト */ MAIN P + P:not(.nom) { margin-top : var(--p-height-b); } /* 無間隔 */ MAIN P.nom:not(.nb) + .nom.nb { margin-top : var(--p-height-b); } MAIN P + .nom { margin-top : var(--p-height-0); } /* 冒頭説明 */, MAIN P:not(.rem) + .rem MAIN .rem + P:not(.rem) { margin-top : var(--p-height-1); } MAIN .rem + .rem { margin-top : var(--p-height-0); } /* 項説明 */ MAIN .hexp + P:not(.hexp) { margin-top : var(--p-height-1) !important; } MAIN :is(.hexp, .hcos) + .hexp { margin-top : var(--p-height-0) !important; } /* 副項目 */ MAIN P:not(.hcos, .nom.nb) + .hcos { margin-top : var(--p-height-2) !important; } MAIN .nom.nb + .hcos { margin-top : var(--p-height-w) !important; } MAIN .hcos + P { margin-top : var(--p-height-1) !important; } /* 引用と箇条 */ MAIN P:not(.rem, .qt) + .qt, MAIN .qt + P:not(.hcos, .qt) { margin-top : var(--p-height-1) !important; } MAIN :is(.rem, .qt) + .qt { margin-top : var(--p-height-0) !important; } /* セパレータ */ MAIN .sep + P:not(.sep), MAIN :not(.sep) + .sep { margin-top : var(--p-height-2) !important; } MAIN .sep + .sep { margin-top : var(--p-height-1) !important; } /* 見出し */ MAIN :is(H5, H6).phead + .ptext > .hname { margin-top : var(--p-height-1) !important; } MAIN H5.phead + .ptext > .hname + P { margin-top : var(--p-height-0) !important; } } /* ========================-=-=====================================-=-======================== -------- 改行ポイント */ /* ---- 改行ポイント ---- */ :is(.br, .eb)::before { white-space: pre; content: ""; } /* 改行ポイント制御 */ #CSt-Brek:checked ~ MAIN P:not(.nb, .qt:not(.bk)) .eb::before { content: "\a"; } #CSt-Brek:checked ~ MAIN P:not(.nb, .qt:not(.bk)) .br::before { content: "\a　"; } #CSt-Brek:checked ~ MAIN .rem :is(.br, .eb)::before { content: "\a"; } /* ---- カーニング抑止 ---- */ :is(.br, .eb)::after { display: inline-block; text-indent: 0em; white-space: pre; content: ""; } @charset "utf-8"; /* ＵＴＦ */ /* ========================-=-=====================================-=-======================== -------- 意味づけ指定 */ /* ---- 削除 ---- */ :is(DEL, .del, .weak) { opacity: 48%; filter: blur(0.056em); } /* ---- 強調 ---- */ :is(B, STRONG, .strong) { background-color: var(--strong-back-color); color: var(--strong-color); text-decoration: none; font-weight: bold; } /* 強調の抑止 */ :is(DEL, .del, .weak) :is(B, STRONG, .strong) { color: unset; background-color: unset; } /* ---- ルビ ---- */ RUBY { line-break: anywhere; } RT { line-break: anywhere; z-index: 999; -webkit-user-select: none; user-select: none; } #CSt-Ruby:not(:checked) ~ MAIN RT { visibility: hidden; } /* ---- 傍点 ---- */ /* 傍点定義 */ EM { --empha-color: var(--text-color); font-style: inherit; text-decoration: inherit; background-image: none; background-position: right top; } /* 色制御 */ :is(#CC-Slct, #CSp-RBtn):checked ~ MAIN EM { --empha-color: var(--speech-select-text); } .v[data-doing="true"] EM { --empha-color: var(--speech-doing-text ); } @media screen { /* 表示制御 */ #CSt-Ruby:checked ~ MAIN EM { background-image: radial-gradient(circle, var(--empha-color) 11%, transparent 22%); } /* 組み方向制御 */ #CSt-Vert:not(:checked) ~ MAIN EM { padding-top: var(--empha--distance); background-repeat: repeat-x; background-size: 1em var(--empha--size); } #CSt-Vert:checked ~ MAIN EM { padding-right: var(--empha--distance); background-repeat: repeat-y; background-size: var(--empha--size) 1em; } } @media print { #CSt-Ruby:checked ~ MAIN EM { text-emphasis: dot; } } /* ========================-=-=====================================-=-======================== -------- 文字回転 */ /* ---- 1 字回転 ---- */ @media screen { #CSt-Vert:not(:checked) ~ #CSt-Encl:checked ~ MAIN .hrt, /* 横組み時のみ、左回転（アルファベットの縦組み順応表現） */ #CSt-Vert:checked ~ #CSt-Encl:checked ~ MAIN .vlt, /* 縦組み時のみ、左回転（縦書き文字の強制縦組み順応） */ #CSt-Vert:checked ~ #CSt-Encl:checked ~ MAIN .vrt /* 縦組み時のみ、右回転（縦組み非対応文字の強制縦組み順応） */ { display: inline-block; line-height: 1em; text-indent: 0em; transform: rotate(-90deg); } #CSt-Vert:checked ~ #CSt-Encl:checked ~ MAIN .vrt { transform: rotate(90deg); } } @media print { MAIN .hrt /* 横組み時のみ、左回転（アルファベットの縦組み順応表現） */ { display: inline-block; line-height: 1em; text-indent: 0em; transform: rotate(-90deg); } } /* 縦組み時での、強制横書き */ MAIN .sw { text-orientation: sideways; word-break: break-all; } /* 非縦組み対応文字の、強制縦組み順応 */ @media screen { #CSt-Vert:checked ~ MAIN .vt { text-orientation: upright ; } } /* 縦横ミックス */ @media screen { #CSt-Vert:checked ~ MAIN .hz { text-orientation: mixed ; } } /* ---- 縦中横 ---- */ @media screen { .encl.e, #CSt-Encl:checked ~ MAIN .encl:not(.e) { line-height: 1em; text-indent: 0em; text-combine-upright: all; vertical-align: baseline; white-space: nowrap; writing-mode: vertical-rl; } } @media print { .encl { line-height: 1em; text-indent: 0em; text-combine-upright: all; vertical-align: baseline; white-space: nowrap; writing-mode: vertical-rl; } } /* ========================-=-=====================================-=-======================== -------- 表示指定 */ /* ---- フォントフェース ---- */ /* 等幅フォント */ .mono { font-family : var(--font-mono-rev); text-indent: 0em; } /* 拡張フォント */ .ex { font-family : var(--font-ex ); } .ex.miss:not(.vrt) { background-color: var(--ex-back-color); } .ex .ex.miss:not(.vrt) { background-color: unset; } /* ---- デコレーション ---- */ /* アンダーライン基本設定 */ @media screen { #CSt-Vert:checked ~ MAIN *, #CSt-Vert:checked ~ MAIN *::before, #CSt-Vert:checked ~ MAIN *::after { text-underline-position: left; } } /* ぼかし */ .blur { background: radial-gradient(ellipse at center, rgba(188, 232, 255, 35%) 0%, rgba(188, 232, 255, 55%), rgba(188, 232, 255, 8%) 100%); border-radius: 2pt; padding: 0; } /* ---- レタリング ---- */ /* フォントサイズ */ :is(SMALL, .small) { font-size: 64%; } :is(BIG , .big ) { font-size: 156.25%; } /* 全角スペース代替 */ .zs::before { display: inline-block; font-family; var(--font-mono); text-indent: 0em; content: "　"; white-space: pre; } /* カーニング抑止 */ .det, .odet::before, .cdet::after { display: inline-block; text-indent: 0em; content: ""; } /* ========================-=-=====================================-=-======================== -------- 特別インライン */ /* ---- 語録指定 ---- */ /* quoted for word list */ .wq { color: inherit; text-decoration: none; } #CSt-Wrn0:not(:checked) ~ MAIN .wq { color: var(--quoted-color); } /* ---- キャプション強調 ---- */ .hint { display: inline-block; margin: 0; padding: 0.2em; box-shadow: var(--box-shadows); border: 0.05em outset var(--button-edge-color); border-radius: 0.2em; background-color: var(--button-back-color); color: var(--button-color); text-align: start; line-height: 1em; white-space: nowrap; word-break: keep-all; word-wrap: break-word; -webkit-user-select: none; user-select: none; } /* ---- スピーチ単位 ---- */ .v { border: none; border-radius: 0.32em; } /* スピーチ文節選択モード */ :is(#CC-Slct, #CSp-RBtn):checked ~ MAIN P { color: var(--speech-select-text); } /* スピーチ文節選択モード - 有効部分*/ :is(#CC-Slct, #CSp-RBtn):checked ~ MAIN P:not(.sep, .nr) .v:not(.nr), #CSp-RBtn:checked ~ MAIN .phead .v:not(.nr) { background-color: var(--speech-select-back); } /* スピーチ文節選択モード - 有効部分ホバー*/ :is(#CC-Slct, #CSp-RBtn):checked ~ MAIN P:not(.sep, .nr) .v:not(.nr):hover, #CSp-RBtn:checked ~ MAIN .phead .v:not(.nr):hover { background-color: var(--speech-point-back ); color: var(--text-color); cursor: pointer; } /* スピーチ中の文節 */ .v[data-doing="true"] { background-color: var(--speech-doing-back); color: var(--speech-doing-text); } .phead .v[data-doing="true"] { background-color: var(--speech-doing-text-headback); color: var(--speech-doing-text-head); }