/* 作風 (style) の意匠 (#857)。body[data-style] が 2 つの作風 — washi (和紙と季節) と hana (花と小物) — * を切り替える。#1043 以降、作風は利用者が選ぶものではなく**節気の季節から自動に決まる** * (Sekki#style_key: 春夏 = hana / 秋冬 = washi)。利用者が選ぶのは明暗 (data-theme) だけ。 * * 作風が受け持つのは次の 7 軸。「配色だけ違う 2 枚」にしないため、どれも装飾密度・雰囲気の差として出す: * 1. 配色と光 washi = 冷たい墨と紙・細い光 / hana = 温かい・にじむ光 (bloom) * 2. 見出しと区切り washi = Noto Serif JP + 菱の留め / hana = Zen Maru Gothic + 花と続き点 * 3. 枠装飾 washi = 二重ヘアライン + 角の留め / hana = 丸い縁 + 角のリボン * 4. 背景の質感 washi = 和紙の繊維 (不揃いな横筋) / hana = 花と点の散らし * 5. 周辺の小物 washi = 上下の霞 / hana = 左右の花とリボン * 6. カードを置く場 washi = 暗い織りのクロス / hana = 明るいレースの台紙 * 7. reveal の余韻 washi = 墨のにじむ輪 / hana = 花びらの bloom * * ---- この 3 つは要件で、崩すと別の場所が壊れる ---- * * (a) **brand トークン (--color-brand-* / --mikujian-day-*) を上書きしない。** * あれらは実測した WCAG AA と節気の色相回転そのもので (brand.css)、作風が塗り替えると * 昼夜 24 節気ぶんのコントラストを作風の数だけ測り直すことになる。装飾の色はすべて * color-mix(in oklab, var(--color-brand-*) N%, transparent) の形で**トークンから作る** — * こうすると明暗 2 × 節気 24 のどの組み合わせでも、作風側には 1 行も分岐が要らない。 * 上書きしてよいのは意匠の摘み (--font-heading / --radius-*) だけ (下の各作風ブロック)。 * * (b) 設定画面の作風プレビュー ([data-style-preview]) は #1043 で退役した。季節の装いの見比べは * 本番以外の ?sekki_on=YYYY-MM-DD で実画面そのものを描いて行う (docs/design/style-themes.md)。 * * (c) **装飾は本文・操作部・フォーカスリングを覆わない。** 装飾は position: fixed の 1 枚 * (.style-ornaments) に畳んであり、pointer-events: none / aria-hidden / z-index 0。 * chrome (header / main / footer / flash) を z-index 1 へ持ち上げて必ず上に置く。header は * 中のメニューが本文より手前に出るよう 2 に置く (#1374)。 * 360px 幅で横スクロールが出ないよう、装飾層は overflow: clip で、幅は viewport を越えない。 * * 切り替えでレイアウトを揺らさない: 作風で変えるのは枠線・角丸・背景・影・擬似要素の装飾・ * 見出し書体だけで、本文の font-size / line-height / margin / padding には触らない * (読み幅と行組みが作風で動くと、切り替えが「別のページに飛んだ」体験になる)。 * * JS は使わない。色も形も CSS variable の差し替えだけで決まるので、切り替えに素材の読み込み待ちが要らない。 * * 4 (背景の質感) と 5 (周辺の小物) は **節気でも変わる** (#858 / #1043)。作風が季節の素材を * 宣言し、24 節気それぞれの [data-sekki] ブロックが素材・柄・配置を選ぶ (下の「節気ごとの装い」)。 * 節気が足すのは形と配置だけで、色 (1) と動き (7) には触らない。 */ /* ============================================================================ * 作風 1: washi — 和紙と季節 * ==========================================================================*/ [data-style='washi'] { /* 意匠の摘み。書体は brand.css の既定と同値だが、hana 側と対称に**明示**する — * 片方だけが宣言していると、hana → washi の切り替えで hana の値が残る経路ができる。 */ --font-heading: 'Noto Serif JP', ui-serif, Georgia, serif; --radius-box: 0.4rem; --radius-field: 0.2rem; --radius-selector: 0.2rem; /* 装飾色 — すべて brand トークンからの混色。墨 (text) 寄りで冷たく、光は細い。 */ --style-deco: color-mix(in oklab, var(--color-brand-accent-2) 40%, transparent); --style-deco-soft: color-mix(in oklab, var(--color-brand-accent-2) 14%, transparent); --style-glow: color-mix(in oklab, var(--color-brand-text) 26%, transparent); /* 上下の見切りに敷く色。washi では霞 (墨の薄まり)、hana では花の滲み — 役割が同じなので * 名前も 1 つに揃える (片方だけの名前を作ると、対称性を測るテストの網から外れる)。 */ --style-edge-tint: color-mix(in oklab, var(--color-brand-text) 7%, transparent); --style-chrome-tint: color-mix(in oklab, var(--color-brand-text) 4%, transparent); /* 枠 — 二重ヘアライン + 角の留め (菱) */ --style-frame-ink: color-mix(in oklab, var(--color-brand-border-strong) 52%, transparent); --style-frame-inner: color-mix(in oklab, var(--color-brand-accent-2) 26%, transparent); --style-frame-inner-width: 1px; --style-frame-inner-style: solid; --style-frame-inset: 4px; --style-card-shadow: 0 1px 0 color-mix(in oklab, var(--color-brand-text) 6%, transparent); --style-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 1.4 L12.6 7 L7 12.6 L1.4 7 Z' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Ccircle cx='7' cy='7' r='1.5' fill='%23fff'/%3E%3C/svg%3E"); --style-corner-size: 13px 13px; /* 地の質感 — 和紙の繊維。色は持たせず alpha だけの mask にして、塗りはこの ink から来る。 */ --style-texture-ink: color-mix(in oklab, var(--color-brand-text) 11%, transparent); /* 季節ごとの和紙の繊維 (#858)。feTurbulence の baseFrequency / numOctaves / seed / alpha 行を * 変えると繊維の粗さそのものが変わる — 秋は斑の粒立ち、冬は細く密で静か。washi が着るのは * 秋冬だけ (#1043) なので 2 つ。節気ブロックは色を持たず、どちらを --style-texture に挿すかだけを選ぶ。 */ --style-texture-autumn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f' x='0' y='0' width='360' height='360'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.1 0.14' numOctaves='2' seed='47'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -0.86'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23f)'/%3E%3C/svg%3E"); --style-texture-winter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f' x='0' y='0' width='360' height='360'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 1.7' numOctaves='1' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.05 0 0 0 -0.64'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23f)'/%3E%3C/svg%3E"); /* 上下の見切り — 霞。やわらかい帯 2 枚 + 細い横線 2 本。 */ --style-edge-height: 9rem; --style-edge-top: radial-gradient(128% 86% at 22% -34%, var(--style-edge-tint) 0%, transparent 62%), radial-gradient(96% 78% at 76% -26%, var(--style-edge-tint) 0%, transparent 58%), linear-gradient(90deg, transparent 6%, var(--style-deco-soft) 34%, transparent 68%) 0 2.6rem / 100% 1px no-repeat, linear-gradient(90deg, transparent 32%, var(--style-deco-soft) 58%, transparent 88%) 0 4.2rem / 100% 1px no-repeat; --style-edge-bottom: radial-gradient(128% 86% at 74% 134%, var(--style-edge-tint) 0%, transparent 62%), radial-gradient(96% 78% at 26% 126%, var(--style-edge-tint) 0%, transparent 58%), linear-gradient(90deg, transparent 8%, var(--style-deco-soft) 40%, transparent 72%) 0 calc(100% - 2.6rem) / 100% 1px no-repeat, linear-gradient(90deg, transparent 30%, var(--style-deco-soft) 62%, transparent 90%) 0 calc(100% - 4.2rem) / 100% 1px no-repeat; --style-edge-motion: style-washi-mist 34s ease-in-out infinite; /* 左右の小物 (柄・寸法・配置) は節気ブロックが持つ。作風が決めるのは動きだけ。 */ --style-motif-motion: none; /* 見出しの区切り飾り — 細い罫の中央に小さな菱 */ --style-rule-line: linear-gradient(90deg, var(--style-frame-ink), var(--style-frame-ink)); --style-rule-height: 1px; --style-rule-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 1.6 L16.4 9 L9 16.4 L1.6 9 Z' fill='none' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M9 5.6 L12.4 9 L9 12.4 L5.6 9 Z' fill='%23fff' fill-opacity='0.8'/%3E%3C/svg%3E"); --style-rule-mark-w: 17px; --style-rule-mark-h: 17px; /* カードを置く場 — 暗い織りのクロス。地 (brand-bg) を黒へ寄せて作るので、昼は紙より沈んだ * 布、夜はさらに深い布になり、**どちらでも「ページより暗い」**。位置ラベル (場の上に直に乗る * 唯一の文字) は brand-text のままで、昼 5.0:1 / 夜 大差の AA を保つ (だから黒への寄せは 74% で止める)。 */ --style-mat: repeating-linear-gradient(90deg, color-mix(in oklab, var(--color-brand-accent-2) 6%, transparent) 0 2px, transparent 2px 4px), repeating-linear-gradient(0deg, color-mix(in oklab, white 4%, transparent) 0 2px, transparent 2px 4px), radial-gradient(130% 100% at 50% 0%, color-mix(in oklab, var(--color-brand-accent) 12%, color-mix(in oklab, var(--color-brand-bg) 74%, black)) 0%, color-mix(in oklab, var(--color-brand-bg) 66%, black) 100%); --style-mat-radius: 0.4rem; --style-mat-trim: linear-gradient(90deg, var(--style-deco-soft), var(--style-deco-soft)) 0 5px / 100% 1px no-repeat, linear-gradient(90deg, var(--style-deco-soft), var(--style-deco-soft)) 0 calc(100% - 5px) / 100% 1px no-repeat; /* reveal の余韻 — 墨がにじむ輪 (輪は box-shadow が描くので塗りは持たない) */ --style-afterglow-name: style-washi-ink-bleed; --style-afterglow-paint: none; } /* 霞はごくゆっくり左右に流れる。要素は viewport より左右へ 5% はみ出させてあるので (下の * .style-ornaments__edge)、端に隙間ができない。はみ出しは overflow: clip の内側なので横スクロールにならない。 */ @keyframes style-washi-mist { from, to { transform: translateX(-1.6%); } 50% { transform: translateX(1.6%); } } @keyframes style-washi-ink-bleed { from { opacity: 0.8; box-shadow: 0 0 0 0 var(--style-glow); } to { opacity: 0; box-shadow: 0 0 1.3rem 0.5rem var(--style-glow); } } /* ============================================================================ * 作風 2: hana — 花と小物 * ==========================================================================*/ [data-style='hana'] { /* 書体は layout の Google Fonts リンクに同梱済み (作風の切り替えでスタイルシートの * 出し入れが起きないようにするため)。本文は共通の Noto Sans JP のままで、変えるのは見出しだけ。 */ --font-heading: 'Zen Maru Gothic', var(--font-body); --radius-box: 1.5rem; --radius-field: 0.95rem; --radius-selector: 0.95rem; /* 装飾色 — 金 (accent-2) 寄りで温かく、光はにじむ (bloom) */ --style-deco: color-mix(in oklab, var(--color-brand-accent-2) 52%, transparent); --style-deco-soft: color-mix(in oklab, var(--color-brand-accent-2) 22%, transparent); --style-glow: color-mix(in oklab, var(--color-brand-accent-2) 62%, transparent); --style-edge-tint: color-mix(in oklab, var(--color-brand-accent-2) 17%, transparent); --style-chrome-tint: color-mix(in oklab, var(--color-brand-accent-2) 9%, transparent); /* 枠 — まるい縁に沿った点 (レース) の内枠 + 角のリボン */ --style-frame-ink: color-mix(in oklab, var(--color-brand-accent-2) 34%, transparent); --style-frame-inner: color-mix(in oklab, var(--color-brand-accent-2) 40%, transparent); --style-frame-inner-width: 2px; --style-frame-inner-style: dotted; --style-frame-inset: 6px; --style-card-shadow: 0 8px 20px -10px color-mix(in oklab, var(--color-brand-accent) 30%, transparent), 0 0 0 5px color-mix(in oklab, var(--color-brand-accent-2) 9%, transparent); --style-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16'%3E%3Cg fill='%23fff'%3E%3Cpath d='M11 8 L2.2 3 Q0.2 2.3 0.9 4.6 L2.2 8 L0.9 11.4 Q0.2 13.7 2.2 13 Z'/%3E%3Cpath d='M11 8 L19.8 3 Q21.8 2.3 21.1 4.6 L19.8 8 L21.1 11.4 Q21.8 13.7 19.8 13 Z'/%3E%3Ccircle cx='11' cy='8' r='2.2'/%3E%3C/g%3E%3C/svg%3E"); --style-corner-size: 20px 15px; /* 地の質感 — 花と点の散らし。塗りはこの ink から来る。 */ --style-texture-ink: color-mix(in oklab, var(--color-brand-accent-2) 18%, transparent); /* 季節ごとの散らし (#858)。defs + use で 1 つの形を散らし、散らす「もの」を季節で替える — * 春は小さな蕾、夏は花と葉。hana が着るのは春夏だけ (#1043) なので 2 つ。 */ --style-texture-spring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cdefs%3E%3Cg id='b'%3E%3Cellipse rx='2.6' ry='3.6' fill='%23fff'/%3E%3Cpath d='M0 3.6 L0 9.4' fill='none' stroke='%23fff' stroke-width='0.9' stroke-opacity='0.7'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23b' transform='translate(30 28)'/%3E%3Cuse href='%23b' transform='translate(118 22) scale(0.8)'/%3E%3Cuse href='%23b' transform='translate(84 96) rotate(18)'/%3E%3Cuse href='%23b' transform='translate(148 132) scale(0.75)'/%3E%3Cuse href='%23b' transform='translate(22 140) scale(0.9)'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='60' cy='62' r='1.5' fill-opacity='0.6'/%3E%3Ccircle cx='140' cy='70' r='1.2' fill-opacity='0.5'/%3E%3Ccircle cx='100' cy='150' r='1.3' fill-opacity='0.55'/%3E%3Ccircle cx='10' cy='96' r='1.1' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"); --style-texture-summer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cdefs%3E%3Cg id='p' fill='%23fff'%3E%3Ccircle cx='0' cy='-5' r='3.4'/%3E%3Ccircle cx='5' cy='0' r='3.4'/%3E%3Ccircle cx='0' cy='5' r='3.4'/%3E%3Ccircle cx='-5' cy='0' r='3.4'/%3E%3Ccircle r='2.6' fill-opacity='0.5'/%3E%3C/g%3E%3Cpath id='l' d='M0 0 Q-5 5 0 10 Q5 5 0 0 Z' fill='%23fff' fill-opacity='0.6'/%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(26 30)'/%3E%3Cuse href='%23p' transform='translate(104 18) scale(0.85)'/%3E%3Cuse href='%23p' transform='translate(70 82) scale(1.1)'/%3E%3Cuse href='%23p' transform='translate(132 108) scale(0.9)'/%3E%3Cuse href='%23p' transform='translate(22 122)'/%3E%3Cuse href='%23l' transform='translate(48 46) rotate(30)'/%3E%3Cuse href='%23l' transform='translate(120 56) rotate(-24)'/%3E%3Cuse href='%23l' transform='translate(88 118) rotate(12)'/%3E%3Cuse href='%23l' transform='translate(10 66) rotate(-40)'/%3E%3C/svg%3E"); /* 上下の見切り — やわらかい bloom (帯ではなく光のにじみ) */ --style-edge-height: 8rem; --style-edge-top: radial-gradient(112% 100% at 50% -34%, var(--style-edge-tint) 0%, transparent 64%), radial-gradient(42% 72% at 13% -8%, var(--style-edge-tint) 0%, transparent 72%), radial-gradient(38% 66% at 87% -4%, var(--style-edge-tint) 0%, transparent 72%); --style-edge-bottom: radial-gradient(112% 100% at 50% 134%, var(--style-edge-tint) 0%, transparent 64%), radial-gradient(42% 72% at 87% 108%, var(--style-edge-tint) 0%, transparent 72%), radial-gradient(38% 66% at 13% 104%, var(--style-edge-tint) 0%, transparent 72%); --style-edge-motion: style-hana-bloom 20s ease-in-out infinite; /* 左右の小物 (柄・寸法・配置) は節気ブロックが持つ。作風が決めるのは動きだけ。 */ --style-motif-motion: style-hana-drift 16s ease-in-out infinite; /* 見出しの区切り飾り — 点線の罫の中央に小花と続き点 */ --style-rule-line: repeating-linear-gradient(90deg, var(--style-deco) 0 3px, transparent 3px 9px); --style-rule-height: 3px; --style-rule-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='16'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='29' cy='4.4' r='3.1'/%3E%3Ccircle cx='33.6' cy='8' r='3.1'/%3E%3Ccircle cx='29' cy='11.6' r='3.1'/%3E%3Ccircle cx='24.4' cy='8' r='3.1'/%3E%3Ccircle cx='29' cy='8' r='2.2' fill-opacity='0.55'/%3E%3Ccircle cx='41' cy='8' r='1.8' fill-opacity='0.85'/%3E%3Ccircle cx='47.4' cy='8' r='1.4' fill-opacity='0.7'/%3E%3Ccircle cx='52.6' cy='8' r='1' fill-opacity='0.55'/%3E%3Ccircle cx='17' cy='8' r='1.8' fill-opacity='0.85'/%3E%3Ccircle cx='10.6' cy='8' r='1.4' fill-opacity='0.7'/%3E%3Ccircle cx='5.4' cy='8' r='1' fill-opacity='0.55'/%3E%3C/g%3E%3C/svg%3E"); --style-rule-mark-w: 56px; --style-rule-mark-h: 15px; /* カードを置く場 — 明るいレースの台紙。面 (surface-2) を白へ寄せて作るので、昼は紙より白い * トレイ、夜はページより浮いた明るい台紙になり、**どちらでも「ページより明るい」**。 * 位置ラベルは brand-text のまま夜 5.0:1 (下の .spread-board__label で opacity を外す)。 * 縁飾りは四辺に並ぶ点 (レース / 帆立の縁) で、--style-mat-trim が 4 辺ぶんの帯を持つ。 */ --style-mat: radial-gradient(140% 110% at 50% 0%, color-mix(in oklab, var(--color-brand-accent-2) 8%, color-mix(in oklab, var(--color-brand-surface-2) 88%, white)) 0%, color-mix(in oklab, var(--color-brand-surface-2) 92%, white) 100%); --style-mat-radius: 1.2rem; --style-mat-trim: radial-gradient(circle 3px at 6px 6px, var(--style-deco-soft) 96%, transparent) repeat-x left top / 12px 12px, radial-gradient(circle 3px at 6px 6px, var(--style-deco-soft) 96%, transparent) repeat-x left bottom / 12px 12px, radial-gradient(circle 3px at 6px 6px, var(--style-deco-soft) 96%, transparent) repeat-y left top / 12px 12px, radial-gradient(circle 3px at 6px 6px, var(--style-deco-soft) 96%, transparent) repeat-y right top / 12px 12px; /* reveal の余韻 — 花びらの bloom (輪 + 周囲に散る光の粒) */ --style-afterglow-name: style-hana-petal-bloom; --style-afterglow-paint: radial-gradient(circle 0.26rem at 50% -2%, var(--style-glow) 60%, transparent), radial-gradient(circle 0.2rem at 12% 16%, var(--style-glow) 60%, transparent), radial-gradient(circle 0.22rem at 88% 22%, var(--style-glow) 60%, transparent), radial-gradient(circle 0.18rem at 8% 78%, var(--style-glow) 60%, transparent), radial-gradient(circle 0.2rem at 92% 82%, var(--style-glow) 60%, transparent), radial-gradient(circle 0.22rem at 50% 102%, var(--style-glow) 60%, transparent), radial-gradient(120% 120% at 50% 50%, transparent 56%, var(--style-glow) 74%, transparent 94%); } @keyframes style-hana-bloom { from, to { opacity: 0.68; } 50% { opacity: 1; } } @keyframes style-hana-drift { from, to { transform: translateY(-0.45rem); } 50% { transform: translateY(0.45rem); } } @keyframes style-hana-petal-bloom { from { opacity: 0; transform: scale(0.78); } 35% { opacity: 1; } to { opacity: 0; transform: scale(1.28); } } /* ============================================================================ * 節気ごとの装い (#858 / #1043) * * 作風は節気の季節から自動に決まる (Sekki#style_key: 春夏 = hana / 秋冬 = washi) ので、24 節気 * それぞれが [data-sekki] の 1 ブロックで **素材・柄・配置** を持つ。前の節気を継承する節気は無い * (旧 #858 は 6 状態 + 継承だった)。明暗 (data-theme) と節気の色相 (data-sekki) は brand.css が * 持つので、24 節気 × 明暗 2 の 48 状態は、ここが色を持たないことで組み合わせとして成立する。 * * ---- この 4 つは要件 ---- * * (a) **色を持たない。** ここにあるのは mask の形と寸法だけで、塗りは --style-texture-ink / * --style-deco (= brand トークンからの混色) が持つ。SVG が %23fff なのは mask の不透明度を * 書いているだけで、画面に出る色ではない。 * (b) **動きを足さない。** 動く装飾 (--style-*-motion) は作風が決めるもので、節気が増やすと * reduced motion の縮退を節気の数だけ確かめ直すことになる。 * (c) **本文のレイアウトに触らない。** 変えるのは装飾層の 7 つの摘みだけで、読み幅も行組みも * カードの位置も動かない。 * (d) **作風の人格が先に立つ。** washi は霞 / 穂 / 露 / 霜 / 雪 / 細枝、hana は蕾 / 葉 / 花 / * 花びら / リボン / 点の語彙から出ない。 * * 隣り合う節気は柄と配置 (inset = 上下の空き / width = 柱の幅 / offset = 画面端からの離れ) と * 素材の密度 (texture-size) が少しずつ動き、季節の入りでは素材が、立春と立秋では作風ごと変わる。 * 狭幅では左右の小物を畳むので、隣接節気の差は素材の密度が伝える。 * ==========================================================================*/ /* 立春 — まだ閉じた蕾と細い葉だけ。数も少なく、柱は細く縁に沿う (大寒の和紙から hana へ替わり、素材も春へ)。 */ [data-sekki='risshun'] { --style-texture: var(--style-texture-spring); --style-texture-size: 170px 170px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='175'%3E%3Cdefs%3E%3Cg id='b'%3E%3Cellipse rx='3.2' ry='4.4' fill='%23fff'/%3E%3Cpath d='M0 4.4 L0 12' fill='none' stroke='%23fff' stroke-width='1' stroke-opacity='0.7'/%3E%3C/g%3E%3Cpath id='l' d='M0 0 Q-5 5 0 10 Q5 5 0 0 Z' fill='%23fff' fill-opacity='0.6'/%3E%3C/defs%3E%3Cuse href='%23b' transform='translate(30 28)'/%3E%3Cuse href='%23l' transform='translate(30 50) rotate(14)'/%3E%3Cuse href='%23b' transform='translate(18 96) scale(0.82)'/%3E%3Cuse href='%23l' transform='translate(20 120) rotate(-20)'/%3E%3Cuse href='%23b' transform='translate(42 146) scale(0.9)'/%3E%3Ccircle cx='30' cy='168' r='1.2' fill='%23fff' fill-opacity='0.5'/%3E%3C/svg%3E"); --style-motif-size: 64px 175px; --style-motif-inset: 14vh; --style-motif-width: 2.6rem; --style-motif-offset: 0rem; } /* 雨水 — 蕾がわずかにふくらみ、葉が 1 枚増える。雨の粒のような小さな点が混じり、柱が縁から少し離れる。 */ [data-sekki='usui'] { --style-texture: var(--style-texture-spring); --style-texture-size: 160px 160px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='175'%3E%3Cdefs%3E%3Cg id='b'%3E%3Cellipse rx='3.4' ry='4.7' fill='%23fff'/%3E%3Cpath d='M0 4.7 L0 12.4' fill='none' stroke='%23fff' stroke-width='1' stroke-opacity='0.7'/%3E%3C/g%3E%3Cpath id='l' d='M0 0 Q-5 5 0 10 Q5 5 0 0 Z' fill='%23fff' fill-opacity='0.6'/%3E%3C/defs%3E%3Cuse href='%23b' transform='translate(30 28)'/%3E%3Cuse href='%23l' transform='translate(30 50) rotate(14)'/%3E%3Cuse href='%23b' transform='translate(18 96) scale(0.86)'/%3E%3Cuse href='%23l' transform='translate(20 120) rotate(-20)'/%3E%3Cuse href='%23l' transform='translate(28 124) rotate(24) scale(0.8)'/%3E%3Cuse href='%23b' transform='translate(42 146) scale(0.92)'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='44' cy='40' r='1.1' fill-opacity='0.5'/%3E%3Ccircle cx='12' cy='66' r='1.2' fill-opacity='0.55'/%3E%3Ccircle cx='36' cy='112' r='1' fill-opacity='0.5'/%3E%3Ccircle cx='30' cy='168' r='1.2' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 175px; --style-motif-inset: 14vh; --style-motif-width: 2.6rem; --style-motif-offset: 0.2rem; } /* 啓蟄 — 蕾がほころび (先が 2 つに割れる)、葉が増える。雨の点は退き、柱が少し太る。 */ [data-sekki='keichitsu'] { --style-texture: var(--style-texture-spring); --style-texture-size: 175px 175px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='175'%3E%3Cdefs%3E%3Cg id='b'%3E%3Ccircle cx='-3.2' cy='-2.4' r='2.9' fill='%23fff' fill-opacity='0.85'/%3E%3Ccircle cx='3.2' cy='-2.4' r='2.9' fill='%23fff' fill-opacity='0.85'/%3E%3Cellipse cy='2.4' rx='3' ry='4' fill='%23fff'/%3E%3Cpath d='M0 6.4 L0 14' fill='none' stroke='%23fff' stroke-width='1' stroke-opacity='0.7'/%3E%3C/g%3E%3Cpath id='l' d='M0 0 Q-5 5 0 10 Q5 5 0 0 Z' fill='%23fff' fill-opacity='0.62'/%3E%3C/defs%3E%3Cuse href='%23b' transform='translate(30 26)'/%3E%3Cuse href='%23l' transform='translate(20 44) rotate(-24)'/%3E%3Cuse href='%23l' transform='translate(40 48) rotate(20)'/%3E%3Cuse href='%23b' transform='translate(18 88) scale(0.85)'/%3E%3Cuse href='%23l' transform='translate(30 106) rotate(10)'/%3E%3Cuse href='%23b' transform='translate(42 136) scale(0.95)'/%3E%3Cuse href='%23l' transform='translate(26 156) rotate(-16)'/%3E%3Ccircle cx='48' cy='70' r='1.4' fill='%23fff' fill-opacity='0.55'/%3E%3C/svg%3E"); --style-motif-size: 64px 175px; --style-motif-inset: 13vh; --style-motif-width: 2.7rem; --style-motif-offset: 0.1rem; } /* 春分 — 開花 (4 弁) + リボン。蕾がすべて開き、作風の既定の顔がそのまま春分の意匠になる。 */ [data-sekki='shunbun'] { --style-texture: var(--style-texture-spring); --style-texture-size: 185px 185px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='180'%3E%3Cdefs%3E%3Cg id='p' fill='%23fff'%3E%3Ccircle cx='0' cy='-6' r='3.9'/%3E%3Ccircle cx='6' cy='0' r='3.9'/%3E%3Ccircle cx='0' cy='6' r='3.9'/%3E%3Ccircle cx='-6' cy='0' r='3.9'/%3E%3Ccircle r='3' fill-opacity='0.55'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23fff'%3E%3Cuse href='%23p' transform='translate(30 26)'/%3E%3Cuse href='%23p' transform='translate(16 74) scale(0.72)'/%3E%3Cuse href='%23p' transform='translate(38 142) scale(0.86) rotate(24)'/%3E%3Cpath d='M32 104 L21 98 Q18.6 97 19.4 99.8 L21 104 L19.4 108.2 Q18.6 111 21 110.2 Z' fill-opacity='0.85'/%3E%3Cpath d='M32 104 L43 98 Q45.4 97 44.6 99.8 L43 104 L44.6 108.2 Q45.4 111 43 110.2 Z' fill-opacity='0.85'/%3E%3Ccircle cx='32' cy='104' r='2.4'/%3E%3Ccircle cx='46' cy='56' r='1.7' fill-opacity='0.7'/%3E%3Ccircle cx='12' cy='124' r='1.5' fill-opacity='0.6'/%3E%3Ccircle cx='24' cy='166' r='1.4' fill-opacity='0.6'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 180px; --style-motif-inset: 12vh; --style-motif-width: 2.8rem; --style-motif-offset: 0.2rem; } /* 清明 — 満開。リボンを外して花を 5 つに増やし、葉は脇に添えるだけ。春分より柱を詰める。 */ [data-sekki='seimei'] { --style-texture: var(--style-texture-spring); --style-texture-size: 180px 180px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='180'%3E%3Cdefs%3E%3Cg id='p' fill='%23fff'%3E%3Ccircle cx='0' cy='-6' r='3.9'/%3E%3Ccircle cx='6' cy='0' r='3.9'/%3E%3Ccircle cx='0' cy='6' r='3.9'/%3E%3Ccircle cx='-6' cy='0' r='3.9'/%3E%3Ccircle r='3' fill-opacity='0.55'/%3E%3C/g%3E%3Cpath id='l' d='M0 0 Q-5 5 0 10 Q5 5 0 0 Z' fill='%23fff' fill-opacity='0.62'/%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(30 24)'/%3E%3Cuse href='%23p' transform='translate(16 64) scale(0.8)'/%3E%3Cuse href='%23p' transform='translate(44 94) scale(0.76) rotate(20)'/%3E%3Cuse href='%23p' transform='translate(22 128) scale(0.9)'/%3E%3Cuse href='%23p' transform='translate(42 162) scale(0.7) rotate(12)'/%3E%3Cuse href='%23l' transform='translate(44 40) rotate(28)'/%3E%3Cuse href='%23l' transform='translate(34 110) rotate(-14)'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='10' cy='40' r='1.4' fill-opacity='0.6'/%3E%3Ccircle cx='52' cy='130' r='1.3' fill-opacity='0.55'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 180px; --style-motif-inset: 11vh; --style-motif-width: 2.9rem; --style-motif-offset: 0.3rem; } /* 穀雨 — 花はひとつに減り、散る花びらと若葉が主になる。柱を内へ寄せ、夏の密度へ近づく。 */ [data-sekki='kokuu'] { --style-texture: var(--style-texture-spring); --style-texture-size: 165px 165px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='185'%3E%3Cdefs%3E%3Cg id='p' fill='%23fff'%3E%3Ccircle cx='0' cy='-6' r='3.9'/%3E%3Ccircle cx='6' cy='0' r='3.9'/%3E%3Ccircle cx='0' cy='6' r='3.9'/%3E%3Ccircle cx='-6' cy='0' r='3.9'/%3E%3Ccircle r='3' fill-opacity='0.55'/%3E%3C/g%3E%3Cpath id='l' d='M0 0 Q-5 5 0 10 Q5 5 0 0 Z' fill='%23fff' fill-opacity='0.62'/%3E%3Cellipse id='e' rx='1.6' ry='2.6' fill='%23fff' fill-opacity='0.7'/%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(30 24) scale(0.85)'/%3E%3Cuse href='%23l' transform='translate(16 42) rotate(-30)'/%3E%3Cuse href='%23l' transform='translate(44 48) rotate(26)'/%3E%3Cuse href='%23e' transform='translate(22 74) rotate(30)'/%3E%3Cuse href='%23e' transform='translate(40 88) rotate(-20) scale(0.9)'/%3E%3Cuse href='%23e' transform='translate(28 102) rotate(50) scale(0.8)'/%3E%3Cuse href='%23l' transform='translate(18 118) rotate(-18)'/%3E%3Cuse href='%23l' transform='translate(42 126) rotate(22)'/%3E%3Cuse href='%23e' transform='translate(34 152) rotate(10)'/%3E%3Cuse href='%23e' transform='translate(20 170) rotate(-40) scale(0.8)'/%3E%3Cuse href='%23e' transform='translate(50 176) rotate(24) scale(0.7)'/%3E%3C/svg%3E"); --style-motif-size: 64px 185px; --style-motif-inset: 11vh; --style-motif-width: 2.8rem; --style-motif-offset: 0.4rem; } /* 立夏 — 素材が夏へ変わる。花が大きく開き、葉も多い。花びらの散らしは消え、柱の間隔が一段詰まる。 */ [data-sekki='rikka'] { --style-texture: var(--style-texture-summer); --style-texture-size: 150px 150px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='140'%3E%3Cdefs%3E%3Cg id='p' fill='%23fff'%3E%3Ccircle cx='0' cy='-6.6' r='4.3'/%3E%3Ccircle cx='6.6' cy='0' r='4.3'/%3E%3Ccircle cx='0' cy='6.6' r='4.3'/%3E%3Ccircle cx='-6.6' cy='0' r='4.3'/%3E%3Ccircle r='3.2' fill-opacity='0.55'/%3E%3C/g%3E%3Cpath id='l' d='M0 0 Q-5.5 5.5 0 11 Q5.5 5.5 0 0 Z' fill='%23fff' fill-opacity='0.65'/%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(30 20)'/%3E%3Cuse href='%23l' transform='translate(14 26) rotate(-18)'/%3E%3Cuse href='%23l' transform='translate(46 32) rotate(24)'/%3E%3Cuse href='%23p' transform='translate(16 58) scale(0.85)'/%3E%3Cuse href='%23p' transform='translate(42 76) scale(0.95)'/%3E%3Cuse href='%23l' transform='translate(16 88) rotate(-28)'/%3E%3Cuse href='%23l' transform='translate(46 100) rotate(16)'/%3E%3Cuse href='%23p' transform='translate(28 116)'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='52' cy='54' r='1.6' fill-opacity='0.6'/%3E%3Ccircle cx='8' cy='132' r='1.4' fill-opacity='0.55'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 140px; --style-motif-inset: 9vh; --style-motif-width: 2.9rem; --style-motif-offset: 0.2rem; } /* 小満 — 立夏の花と葉に、若葉と小さな花がもう一つずつ満ちる。柱が少し太る。 */ [data-sekki='shouman'] { --style-texture: var(--style-texture-summer); --style-texture-size: 145px 145px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='140'%3E%3Cdefs%3E%3Cg id='p' fill='%23fff'%3E%3Ccircle cx='0' cy='-6.6' r='4.3'/%3E%3Ccircle cx='6.6' cy='0' r='4.3'/%3E%3Ccircle cx='0' cy='6.6' r='4.3'/%3E%3Ccircle cx='-6.6' cy='0' r='4.3'/%3E%3Ccircle r='3.2' fill-opacity='0.55'/%3E%3C/g%3E%3Cpath id='l' d='M0 0 Q-5.5 5.5 0 11 Q5.5 5.5 0 0 Z' fill='%23fff' fill-opacity='0.65'/%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(30 20)'/%3E%3Cuse href='%23l' transform='translate(14 26) rotate(-18)'/%3E%3Cuse href='%23l' transform='translate(46 32) rotate(24)'/%3E%3Cuse href='%23p' transform='translate(16 56) scale(0.85)'/%3E%3Cuse href='%23l' transform='translate(34 46) rotate(8) scale(0.8)'/%3E%3Cuse href='%23p' transform='translate(44 74) scale(0.95)'/%3E%3Cuse href='%23l' transform='translate(16 86) rotate(-28)'/%3E%3Cuse href='%23l' transform='translate(46 98) rotate(16)'/%3E%3Cuse href='%23l' transform='translate(26 100) rotate(-6) scale(0.85)'/%3E%3Cuse href='%23p' transform='translate(28 118)'/%3E%3Cuse href='%23p' transform='translate(52 126) scale(0.55)'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='52' cy='54' r='1.6' fill-opacity='0.6'/%3E%3Ccircle cx='8' cy='132' r='1.4' fill-opacity='0.55'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 140px; --style-motif-inset: 9vh; --style-motif-width: 3rem; --style-motif-offset: 0.2rem; } /* 芒種 — 葉が稲の苗のような細い三本立ちに変わり、その間に中ぶりの花が咲く。柱は細く、内へ寄る。 */ [data-sekki='boushu'] { --style-texture: var(--style-texture-summer); --style-texture-size: 140px 140px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='150'%3E%3Cdefs%3E%3Cg id='p' fill='%23fff'%3E%3Ccircle cx='0' cy='-6.3' r='4.1'/%3E%3Ccircle cx='6.3' cy='0' r='4.1'/%3E%3Ccircle cx='0' cy='6.3' r='4.1'/%3E%3Ccircle cx='-6.3' cy='0' r='4.1'/%3E%3Ccircle r='3.1' fill-opacity='0.55'/%3E%3C/g%3E%3Cpath id='s' d='M0 0 Q-1.8 -10 0 -20 Q1.8 -10 0 0 Z' fill='%23fff' fill-opacity='0.62'/%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(40 22) scale(0.8)'/%3E%3Cuse href='%23s' transform='translate(18 64) rotate(-16)'/%3E%3Cuse href='%23s' transform='translate(18 64) rotate(-2)'/%3E%3Cuse href='%23s' transform='translate(18 64) rotate(12)'/%3E%3Cuse href='%23p' transform='translate(46 84) scale(0.7)'/%3E%3Cuse href='%23p' transform='translate(16 106) scale(0.75)'/%3E%3Cuse href='%23s' transform='translate(38 138) rotate(-12)'/%3E%3Cuse href='%23s' transform='translate(38 138) rotate(2)'/%3E%3Cuse href='%23s' transform='translate(38 138) rotate(16)'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='10' cy='30' r='1.3' fill-opacity='0.55'/%3E%3Ccircle cx='54' cy='118' r='1.2' fill-opacity='0.5'/%3E%3Ccircle cx='28' cy='86' r='1.1' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 150px; --style-motif-inset: 9vh; --style-motif-width: 2.8rem; --style-motif-offset: 0.4rem; } /* 夏至 — いちばん大きな花がいちばん密に並ぶ。苗は丸い葉に戻り、繰り返しを短く、柱も最も詰める。 */ [data-sekki='geshi'] { --style-texture: var(--style-texture-summer); --style-texture-size: 155px 155px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='130'%3E%3Cdefs%3E%3Cg id='p' fill='%23fff'%3E%3Ccircle cx='0' cy='-6.6' r='4.3'/%3E%3Ccircle cx='6.6' cy='0' r='4.3'/%3E%3Ccircle cx='0' cy='6.6' r='4.3'/%3E%3Ccircle cx='-6.6' cy='0' r='4.3'/%3E%3Ccircle r='3.2' fill-opacity='0.55'/%3E%3C/g%3E%3Cpath id='l' d='M0 0 Q-5.5 5.5 0 11 Q5.5 5.5 0 0 Z' fill='%23fff' fill-opacity='0.66'/%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(30 18) scale(1.1)'/%3E%3Cuse href='%23l' transform='translate(12 26) rotate(-24)'/%3E%3Cuse href='%23l' transform='translate(48 28) rotate(26)'/%3E%3Cuse href='%23p' transform='translate(16 52) scale(0.95)'/%3E%3Cuse href='%23p' transform='translate(46 60) scale(0.9)'/%3E%3Cuse href='%23l' transform='translate(30 68) rotate(6)'/%3E%3Cuse href='%23p' transform='translate(28 94) scale(1.05)'/%3E%3Cuse href='%23l' transform='translate(10 102) rotate(-30)'/%3E%3Cuse href='%23l' transform='translate(50 104) rotate(22)'/%3E%3Cuse href='%23p' transform='translate(48 122) scale(0.55)'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='8' cy='74' r='1.5' fill-opacity='0.6'/%3E%3Ccircle cx='54' cy='84' r='1.3' fill-opacity='0.55'/%3E%3Ccircle cx='12' cy='124' r='1.2' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 130px; --style-motif-inset: 8vh; --style-motif-width: 3.1rem; --style-motif-offset: 0.2rem; } /* 小暑 — 花は三つに減り、蛍や露のような点が間を埋める。柱は縁から離れて浮く。 */ [data-sekki='shousho'] { --style-texture: var(--style-texture-summer); --style-texture-size: 160px 160px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='145'%3E%3Cdefs%3E%3Cg id='p' fill='%23fff'%3E%3Ccircle cx='0' cy='-6.6' r='4.3'/%3E%3Ccircle cx='6.6' cy='0' r='4.3'/%3E%3Ccircle cx='0' cy='6.6' r='4.3'/%3E%3Ccircle cx='-6.6' cy='0' r='4.3'/%3E%3Ccircle r='3.2' fill-opacity='0.55'/%3E%3C/g%3E%3Cpath id='l' d='M0 0 Q-5.5 5.5 0 11 Q5.5 5.5 0 0 Z' fill='%23fff' fill-opacity='0.62'/%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(30 22)'/%3E%3Cuse href='%23l' transform='translate(44 36) rotate(24)'/%3E%3Cuse href='%23p' transform='translate(18 70) scale(0.8)'/%3E%3Cuse href='%23p' transform='translate(42 112) scale(0.9)'/%3E%3Cuse href='%23l' transform='translate(18 122) rotate(-22)'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='40' r='1.6' fill-opacity='0.7'/%3E%3Ccircle cx='50' cy='58' r='1.3' fill-opacity='0.6'/%3E%3Ccircle cx='34' cy='50' r='1' fill-opacity='0.5'/%3E%3Ccircle cx='30' cy='88' r='1.5' fill-opacity='0.7'/%3E%3Ccircle cx='54' cy='84' r='1' fill-opacity='0.45'/%3E%3Ccircle cx='10' cy='98' r='1.2' fill-opacity='0.55'/%3E%3Ccircle cx='26' cy='138' r='1.4' fill-opacity='0.6'/%3E%3Ccircle cx='54' cy='136' r='1.1' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 145px; --style-motif-inset: 9vh; --style-motif-width: 2.9rem; --style-motif-offset: 0.5rem; } /* 大暑 — 大きな葉が重なって茂り、花はひとつだけ。点は消え、柱は最も太いが間隔は秋へ向けて少し開く。 */ [data-sekki='taisho'] { --style-texture: var(--style-texture-summer); --style-texture-size: 148px 148px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='145'%3E%3Cdefs%3E%3Cg id='p' fill='%23fff'%3E%3Ccircle cx='0' cy='-6.3' r='4.1'/%3E%3Ccircle cx='6.3' cy='0' r='4.1'/%3E%3Ccircle cx='0' cy='6.3' r='4.1'/%3E%3Ccircle cx='-6.3' cy='0' r='4.1'/%3E%3Ccircle r='3.1' fill-opacity='0.55'/%3E%3C/g%3E%3Cpath id='l' d='M0 0 Q-7.5 7.5 0 15 Q7.5 7.5 0 0 Z' fill='%23fff' fill-opacity='0.66'/%3E%3C/defs%3E%3Cuse href='%23l' transform='translate(16 10) rotate(-24)'/%3E%3Cuse href='%23l' transform='translate(46 14) rotate(24)'/%3E%3Cuse href='%23l' transform='translate(28 32) rotate(6)'/%3E%3Cuse href='%23l' transform='translate(12 62) rotate(-30)'/%3E%3Cuse href='%23l' transform='translate(50 70) rotate(26)'/%3E%3Cuse href='%23l' transform='translate(18 102) rotate(-18)'/%3E%3Cuse href='%23l' transform='translate(44 108) rotate(20)'/%3E%3Cuse href='%23l' transform='translate(30 124) rotate(-4) scale(0.9)'/%3E%3Cuse href='%23p' transform='translate(30 86) scale(0.9)'/%3E%3Ccircle cx='54' cy='48' r='1.4' fill='%23fff' fill-opacity='0.55'/%3E%3C/svg%3E"); --style-motif-size: 64px 145px; --style-motif-inset: 10vh; --style-motif-width: 3.2rem; --style-motif-offset: 0.3rem; } /* 立秋 — 作風が和紙へ、素材が秋へ替わり、繊維が斑に粒立つ。柄は穂 (すすき) の斜線と実の粒になる。 */ [data-sekki='risshuu'] { --style-texture: var(--style-texture-autumn); --style-texture-size: 260px 260px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='160'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='4' y='20' width='52' height='1.8' rx='0.9'/%3E%3Crect x='10' y='100' width='46' height='1.6' rx='0.8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='1' stroke-opacity='0.6'%3E%3Cpath d='M12 78 L34 38'/%3E%3Cpath d='M18 80 L38 46'/%3E%3Cpath d='M24 82 L42 54'/%3E%3Cpath d='M28 150 L48 116'/%3E%3Cpath d='M34 152 L52 124'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='34' cy='38' r='1.6' fill-opacity='0.75'/%3E%3Ccircle cx='38' cy='46' r='1.4' fill-opacity='0.7'/%3E%3Ccircle cx='42' cy='54' r='1.2' fill-opacity='0.65'/%3E%3Ccircle cx='48' cy='116' r='1.5' fill-opacity='0.7'/%3E%3Ccircle cx='52' cy='124' r='1.3' fill-opacity='0.65'/%3E%3Ccircle cx='16' cy='126' r='1.1' fill-opacity='0.5'/%3E%3Ccircle cx='24' cy='136' r='1.3' fill-opacity='0.55'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 160px; --style-motif-inset: 12vh; --style-motif-width: 2.6rem; --style-motif-offset: 0rem; } /* 処暑 — 穂の先が実の重みでしなり、斜線が弧になる。霞は一本に減る。 */ [data-sekki='shosho'] { --style-texture: var(--style-texture-autumn); --style-texture-size: 250px 250px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='160'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='8' y='22' width='48' height='1.6' rx='0.8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='1' stroke-opacity='0.6'%3E%3Cpath d='M12 80 Q24 52 40 40'/%3E%3Cpath d='M18 82 Q30 58 44 50'/%3E%3Cpath d='M24 84 Q34 66 46 62'/%3E%3Cpath d='M28 150 Q38 128 52 118'/%3E%3Cpath d='M34 152 Q44 134 54 128'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='41' cy='42' r='1.6' fill-opacity='0.75'/%3E%3Ccircle cx='45' cy='52' r='1.4' fill-opacity='0.7'/%3E%3Ccircle cx='47' cy='64' r='1.2' fill-opacity='0.65'/%3E%3Ccircle cx='52' cy='120' r='1.5' fill-opacity='0.7'/%3E%3Ccircle cx='54' cy='130' r='1.3' fill-opacity='0.65'/%3E%3Ccircle cx='18' cy='128' r='1.1' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 160px; --style-motif-inset: 13vh; --style-motif-width: 2.6rem; --style-motif-offset: 0.2rem; } /* 白露 — 細い霞の線に露の粒が乗る。穂は二本に退き、柱が細くなる。 */ [data-sekki='hakuro'] { --style-texture: var(--style-texture-autumn); --style-texture-size: 240px 240px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='170'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='4' y='30' width='52' height='1.4' rx='0.7'/%3E%3Crect x='10' y='96' width='46' height='1.3' rx='0.65'/%3E%3Crect x='6' y='150' width='48' height='1.2' rx='0.6'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='0.9' stroke-opacity='0.55'%3E%3Cpath d='M14 80 L32 50'/%3E%3Cpath d='M40 140 L54 116'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='18' cy='27.6' r='1.8' fill-opacity='0.8'/%3E%3Ccircle cx='34' cy='28' r='1.3' fill-opacity='0.65'/%3E%3Ccircle cx='46' cy='27.8' r='1.5' fill-opacity='0.7'/%3E%3Ccircle cx='24' cy='93.8' r='1.7' fill-opacity='0.8'/%3E%3Ccircle cx='42' cy='94' r='1.2' fill-opacity='0.6'/%3E%3Ccircle cx='30' cy='147.8' r='1.6' fill-opacity='0.75'/%3E%3Ccircle cx='32' cy='50' r='1.4' fill-opacity='0.7'/%3E%3Ccircle cx='54' cy='116' r='1.3' fill-opacity='0.65'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 170px; --style-motif-inset: 13vh; --style-motif-width: 2.5rem; --style-motif-offset: 0.1rem; } /* 秋分 — 二段の霞と二組の穂が釣り合う。露は穂の実に戻り、昼夜の等しい日の均衡を描く。 */ [data-sekki='shuubun'] { --style-texture: var(--style-texture-autumn); --style-texture-size: 270px 270px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='164'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='2' y='16' width='54' height='1.8' rx='0.9'/%3E%3Crect x='14' y='28' width='42' height='1.2' rx='0.6'/%3E%3Crect x='4' y='96' width='52' height='1.8' rx='0.9'/%3E%3Crect x='16' y='108' width='40' height='1.2' rx='0.6'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='1' stroke-opacity='0.6'%3E%3Cpath d='M12 80 L32 44'/%3E%3Cpath d='M20 82 L38 52'/%3E%3Cpath d='M28 158 L46 124'/%3E%3Cpath d='M36 160 L52 132'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='32' cy='44' r='1.6' fill-opacity='0.75'/%3E%3Ccircle cx='38' cy='52' r='1.4' fill-opacity='0.7'/%3E%3Ccircle cx='46' cy='124' r='1.5' fill-opacity='0.7'/%3E%3Ccircle cx='52' cy='132' r='1.3' fill-opacity='0.65'/%3E%3Ccircle cx='50' cy='70' r='1.1' fill-opacity='0.5'/%3E%3Ccircle cx='14' cy='136' r='1.1' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 164px; --style-motif-inset: 14vh; --style-motif-width: 2.6rem; --style-motif-offset: 0rem; } /* 寒露 — 線がすべて細く淡くなり、露の粒も小さく冷たい。繰り返しを伸ばして間を空ける。 */ [data-sekki='kanro'] { --style-texture: var(--style-texture-autumn); --style-texture-size: 280px 280px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='180'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='8' y='26' width='46' height='1.2' rx='0.6'/%3E%3Crect x='14' y='120' width='40' height='1.1' rx='0.55'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='0.8' stroke-opacity='0.5'%3E%3Cpath d='M14 90 L30 58'/%3E%3Cpath d='M22 92 L36 66'/%3E%3Cpath d='M34 168 L50 138'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='30' cy='58' r='1.1' fill-opacity='0.65'/%3E%3Ccircle cx='36' cy='66' r='1' fill-opacity='0.6'/%3E%3Ccircle cx='50' cy='138' r='1.1' fill-opacity='0.6'/%3E%3Ccircle cx='22' cy='30' r='1' fill-opacity='0.6'/%3E%3Ccircle cx='40' cy='124' r='1' fill-opacity='0.55'/%3E%3Ccircle cx='18' cy='150' r='0.9' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 180px; --style-motif-inset: 15vh; --style-motif-width: 2.4rem; --style-motif-offset: 0.2rem; } /* 霜降 — 細い穂の下に、初めての六角の霜がひとつ現れる。冬の間隔へ近づく。 */ [data-sekki='soukou'] { --style-texture: var(--style-texture-autumn); --style-texture-size: 265px 265px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='190'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='h' fill='none' stroke='%23fff' stroke-width='0.9' stroke-opacity='0.75'%3E%3Cpath d='M5 0 L2.5 4.33 L-2.5 4.33 L-5 0 L-2.5 -4.33 L2.5 -4.33 Z'/%3E%3Cpath d='M0 -4.33 L0 4.33'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='6' y='24' width='48' height='1.3' rx='0.65'/%3E%3Crect x='12' y='126' width='42' height='1.2' rx='0.6'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='0.8' stroke-opacity='0.5'%3E%3Cpath d='M14 96 L30 64'/%3E%3Cpath d='M22 98 L36 72'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='30' cy='64' r='1.1' fill-opacity='0.6'/%3E%3Ccircle cx='36' cy='72' r='1' fill-opacity='0.55'/%3E%3Ccircle cx='20' cy='172' r='1' fill-opacity='0.45'/%3E%3Ccircle cx='48' cy='40' r='1' fill-opacity='0.45'/%3E%3C/g%3E%3Cuse href='%23h' transform='translate(42 150) scale(0.7)'/%3E%3C/svg%3E"); --style-motif-size: 64px 190px; --style-motif-inset: 16vh; --style-motif-width: 2.4rem; --style-motif-offset: 0.3rem; } /* 立冬 — 素材が冬へ変わり、繊維は細く密で静か。穂は消え、六角の霜の粒がまばらに。間隔を広く取る。 */ [data-sekki='rittou'] { --style-texture: var(--style-texture-winter); --style-texture-size: 400px 400px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='210'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='h' fill='none' stroke='%23fff' stroke-width='0.9' stroke-opacity='0.75'%3E%3Cpath d='M5 0 L2.5 4.33 L-2.5 4.33 L-5 0 L-2.5 -4.33 L2.5 -4.33 Z'/%3E%3Cpath d='M0 -4.33 L0 4.33'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='6' y='28' width='48' height='1.5' rx='0.75'/%3E%3Crect x='12' y='134' width='42' height='1.3' rx='0.65'/%3E%3C/g%3E%3Cuse href='%23h' transform='translate(30 74)'/%3E%3Cuse href='%23h' transform='translate(44 112) scale(0.62)'/%3E%3Cuse href='%23h' transform='translate(20 170) scale(0.78)'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='46' cy='194' r='1.1' fill-opacity='0.5'/%3E%3Ccircle cx='14' cy='54' r='1' fill-opacity='0.45'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 210px; --style-motif-inset: 18vh; --style-motif-width: 2.4rem; --style-motif-offset: 0.2rem; } /* 小雪 — 霜は二つに減り、代わりに雪の粒がいくつか舞い始める。柱は縁から少し離れる。 */ [data-sekki='shousetsu'] { --style-texture: var(--style-texture-winter); --style-texture-size: 390px 390px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='210'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='h' fill='none' stroke='%23fff' stroke-width='0.9' stroke-opacity='0.75'%3E%3Cpath d='M5 0 L2.5 4.33 L-2.5 4.33 L-5 0 L-2.5 -4.33 L2.5 -4.33 Z'/%3E%3Cpath d='M0 -4.33 L0 4.33'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='6' y='30' width='48' height='1.4' rx='0.7'/%3E%3Crect x='12' y='138' width='42' height='1.2' rx='0.6'/%3E%3C/g%3E%3Cuse href='%23h' transform='translate(32 78)'/%3E%3Cuse href='%23h' transform='translate(20 168) scale(0.7)'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='46' cy='110' r='1.4' fill-opacity='0.65'/%3E%3Ccircle cx='14' cy='56' r='1.2' fill-opacity='0.55'/%3E%3Ccircle cx='40' cy='190' r='1.3' fill-opacity='0.6'/%3E%3Ccircle cx='24' cy='124' r='1.1' fill-opacity='0.5'/%3E%3Ccircle cx='50' cy='150' r='1' fill-opacity='0.45'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 210px; --style-motif-inset: 18vh; --style-motif-width: 2.4rem; --style-motif-offset: 0.4rem; } /* 大雪 — 雪の粒が増え、霜も三つに戻る。霞は一本に退き、冬の中ではいちばん賑やか。 */ [data-sekki='taisetsu'] { --style-texture: var(--style-texture-winter); --style-texture-size: 380px 380px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='h' fill='none' stroke='%23fff' stroke-width='0.9' stroke-opacity='0.75'%3E%3Cpath d='M5 0 L2.5 4.33 L-2.5 4.33 L-5 0 L-2.5 -4.33 L2.5 -4.33 Z'/%3E%3Cpath d='M0 -4.33 L0 4.33'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='4' y='24' width='50' height='1.4' rx='0.7'/%3E%3C/g%3E%3Cuse href='%23h' transform='translate(28 60)'/%3E%3Cuse href='%23h' transform='translate(46 120) scale(0.7)'/%3E%3Cuse href='%23h' transform='translate(22 168) scale(0.82)'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='14' cy='36' r='1.5' fill-opacity='0.7'/%3E%3Ccircle cx='48' cy='44' r='1.3' fill-opacity='0.6'/%3E%3Ccircle cx='40' cy='84' r='1.6' fill-opacity='0.7'/%3E%3Ccircle cx='12' cy='100' r='1.2' fill-opacity='0.55'/%3E%3Ccircle cx='26' cy='96' r='1' fill-opacity='0.5'/%3E%3Ccircle cx='30' cy='132' r='1.4' fill-opacity='0.65'/%3E%3Ccircle cx='54' cy='150' r='1.1' fill-opacity='0.5'/%3E%3Ccircle cx='44' cy='186' r='1.5' fill-opacity='0.65'/%3E%3Ccircle cx='10' cy='190' r='1.1' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 200px; --style-motif-inset: 17vh; --style-motif-width: 2.6rem; --style-motif-offset: 0.3rem; } /* 冬至 — 霞一本、霜一つ、雪一粒。最も静かで、柱は最も細く、間隔は最も広い。 */ [data-sekki='touji'] { --style-texture: var(--style-texture-winter); --style-texture-size: 420px 420px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='220'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='h' fill='none' stroke='%23fff' stroke-width='0.9' stroke-opacity='0.75'%3E%3Cpath d='M5 0 L2.5 4.33 L-2.5 4.33 L-5 0 L-2.5 -4.33 L2.5 -4.33 Z'/%3E%3Cpath d='M0 -4.33 L0 4.33'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='10' y='40' width='44' height='1.2' rx='0.6'/%3E%3C/g%3E%3Cuse href='%23h' transform='translate(32 130) scale(0.7)'/%3E%3Ccircle cx='22' cy='190' r='1' fill='%23fff' fill-opacity='0.45'/%3E%3C/svg%3E"); --style-motif-size: 64px 220px; --style-motif-inset: 20vh; --style-motif-width: 2.2rem; --style-motif-offset: 0.6rem; } /* 小寒 — 冬至の静けさに、裸の細枝と霜が戻る。寒の入りで、柱が少し縁へ戻る。 */ [data-sekki='shoukan'] { --style-texture: var(--style-texture-winter); --style-texture-size: 410px 410px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='210'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='h' fill='none' stroke='%23fff' stroke-width='0.9' stroke-opacity='0.75'%3E%3Cpath d='M5 0 L2.5 4.33 L-2.5 4.33 L-5 0 L-2.5 -4.33 L2.5 -4.33 Z'/%3E%3Cpath d='M0 -4.33 L0 4.33'/%3E%3C/g%3E%3Cg id='t' fill='none' stroke='%23fff' stroke-width='0.8' stroke-opacity='0.55'%3E%3Cpath d='M0 0 L0 24'/%3E%3Cpath d='M0 7 L-7 1'/%3E%3Cpath d='M0 15 L7 8'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='8' y='26' width='46' height='1.3' rx='0.65'/%3E%3C/g%3E%3Cuse href='%23t' transform='translate(22 60)'/%3E%3Cuse href='%23t' transform='translate(42 150) scale(0.85)'/%3E%3Cuse href='%23h' transform='translate(44 96) scale(0.75)'/%3E%3Cuse href='%23h' transform='translate(18 186) scale(0.6)'/%3E%3Ccircle cx='48' cy='40' r='1' fill='%23fff' fill-opacity='0.45'/%3E%3C/svg%3E"); --style-motif-size: 64px 210px; --style-motif-inset: 18vh; --style-motif-width: 2.4rem; --style-motif-offset: 0.5rem; } /* 大寒 — 細枝は消え、霜がいちばん密に降り、冷たい霞が三段に掛かる。次の立春 (hana の蕾) へ向けて柱が詰まり始める。 */ [data-sekki='daikan'] { --style-texture: var(--style-texture-winter); --style-texture-size: 395px 395px; --style-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='h' fill='none' stroke='%23fff' stroke-width='0.9' stroke-opacity='0.75'%3E%3Cpath d='M5 0 L2.5 4.33 L-2.5 4.33 L-5 0 L-2.5 -4.33 L2.5 -4.33 Z'/%3E%3Cpath d='M0 -4.33 L0 4.33'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='2' y='20' width='54' height='1.6' rx='0.8'/%3E%3Crect x='12' y='88' width='44' height='1.3' rx='0.65'/%3E%3Crect x='6' y='156' width='50' height='1.5' rx='0.75'/%3E%3C/g%3E%3Cuse href='%23h' transform='translate(30 48)'/%3E%3Cuse href='%23h' transform='translate(48 70) scale(0.6)'/%3E%3Cuse href='%23h' transform='translate(18 118) scale(0.8)'/%3E%3Cuse href='%23h' transform='translate(42 134) scale(0.7)'/%3E%3Cuse href='%23h' transform='translate(28 184) scale(0.9)'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='66' r='1' fill-opacity='0.5'/%3E%3Ccircle cx='52' cy='104' r='1.1' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"); --style-motif-size: 64px 200px; --style-motif-inset: 16vh; --style-motif-width: 2.6rem; --style-motif-offset: 0.2rem; } /* ============================================================================ * ここから下は作風に依らない構造。上のトークンを読むだけで、色も形も書かない * (作風を足すのはトークンブロックを 1 つ増やすこと、という形を保つため)。 * ==========================================================================*/ /* ---- 装飾層 ---- * 1 枚の fixed 要素に畳んである。文書の高さにも段組みにも影響せず、スクロールでずれない。 * overflow: clip は 2 つ効いている: (1) 霞のはみ出し (左右 -5%) を横スクロールにしない、 * (2) 小物のアニメーションが viewport の外へ出ない。 */ .style-ornaments { position: fixed; inset: 0; z-index: 0; overflow: clip; pointer-events: none; } .style-ornaments > * { position: absolute; display: block; } .style-ornaments__texture { inset: 0; } .style-ornaments__edge { /* 左右へ少しはみ出させておく (霞が流れても端に隙間ができない)。clip の内側なので * viewport 幅は増えず、360px でも横スクロールにならない。 */ left: -5%; right: -5%; height: var(--style-edge-height); animation: var(--style-edge-motion); } .style-ornaments__edge--top { top: 0; background: var(--style-edge-top); } .style-ornaments__edge--bottom { bottom: 0; background: var(--style-edge-bottom); } /* 上下の余白・柱の幅・画面端からの離れは節気ブロックが動かす (#858 / #1043)。冬は広く空けて * まばらに、夏は詰めて密に — 配置の差を節気のトークンとして持たせるため、数値をここに直書きしない。 */ .style-ornaments__motif { top: var(--style-motif-inset); bottom: var(--style-motif-inset); width: var(--style-motif-width); animation: var(--style-motif-motion); } .style-ornaments__motif--left { left: var(--style-motif-offset); } /* 反転は transform ではなく個別プロパティ scale で掛ける — アニメーション側が transform を * 使うので、同じプロパティで取り合うと右の小物だけ反転が消える。 */ .style-ornaments__motif--right { right: var(--style-motif-offset); scale: -1 1; } /* mask に落とす装飾は @supports で囲う。mask が効かない環境では **塗りだけが残って本文を覆う** * ので、塗り (background) も含めてまとめてこの中に置く (= 効かない環境では何も描かれない)。 */ @supports (mask-image: linear-gradient(#000, #000)) { .style-ornaments__texture { background-color: var(--style-texture-ink); mask-image: var(--style-texture); mask-size: var(--style-texture-size); mask-repeat: repeat; } .style-ornaments__motif { background-color: var(--style-deco); mask-image: var(--style-motif); mask-size: var(--style-motif-size); mask-repeat: repeat-y; mask-position: center top; } } /* chrome を装飾の上へ。装飾層は z-index 0 なので、ここが無いと本文と装飾の前後が * 「先に書かれた方が下」になり、背景の質感が本文に掛かる。 * * #flash-messages を**入れていない**のは意図的: あれは既に fixed + z-50 で装飾層より上にあり、 * ここに足すと ID セレクタ (1,2,1) が Tailwind の .fixed (0,1,0) に勝って position: relative に * 戻り、トーストが右上から文書の流れの中へ落ちる。上に置く目的は既に達成されている。 */ body.style-scene > header, body.style-scene > main, body.style-scene > footer { position: relative; z-index: 1; } /* header はさらに一段上へ。main / footer と同じ 1 だと DOM で後ろの main が header ごと手前に * 描かれ、lg 未満で開くメニューのパネル (header 内の z-20 は header の積み文脈に閉じる) が * 本文の下に潜って押せなくなる (#1374)。 */ body.style-scene > header { z-index: 2; } /* chrome の地に作風の色味を薄く敷く (上下の見切りと繋げるため)。border 等はブランド側のまま。 */ body.style-scene > header { background-image: linear-gradient(180deg, var(--style-chrome-tint), transparent); } body.style-scene > footer { background-image: linear-gradient(0deg, var(--style-chrome-tint), transparent); } /* ---- 枠装飾 ---- * パネル (.card) の枠。角丸は DaisyUI の .card が --radius-box を読むので、ここでは指定しない * (作風が摘みを変えるだけで付いてくる)。 */ .style-stage .card { position: relative; border: 1px solid var(--style-frame-ink); box-shadow: var(--style-card-shadow); } /* 内側の枠。washi は二重ヘアライン、hana は丸い点線 (レース) になる。 */ .style-stage .card::before { content: ''; position: absolute; inset: var(--style-frame-inset); border: var(--style-frame-inner-width) var(--style-frame-inner-style) var(--style-frame-inner); border-radius: inherit; pointer-events: none; } @supports (mask-image: linear-gradient(#000, #000)) { /* 四隅の留め。1 枚の意匠を 4 つの mask レイヤーとして四隅へ置く (washi = 菱の留め / * hana = リボン)。mask-size / mask-repeat は 1 値でも 4 レイヤーへ繰り返される。 */ .style-stage .card::after { content: ''; position: absolute; inset: calc(var(--style-frame-inset) + 2px); background-color: var(--style-deco); mask-image: var(--style-corner), var(--style-corner), var(--style-corner), var(--style-corner); mask-size: var(--style-corner-size); mask-repeat: no-repeat; mask-position: left top, right top, left bottom, right bottom; pointer-events: none; } } /* ---- 見出しと区切り飾り ---- * 見出し書体は --font-heading の差し替えだけで全画面に効く (Tailwind の font-heading * ユーティリティも brand.css の .brand-heading も同じ変数を読む)。ここで字送り・字数は変えない。 */ .style-stage h1, .style-stage h2, .style-stage .card-title { font-family: var(--font-heading); } /* 節と節の間の区切り。::before が罫、::after が中央の飾り。どちらも絶対配置なので * 本文の行組みには触らない (position: relative の付与だけがレイアウトへの唯一の関与)。 */ .style-stage section + section { position: relative; } /* 罫と飾りを別の擬似要素に分けてあるのは、罫にだけ「中央を空ける」mask を掛けるため — * mask は要素の擬似要素子孫にも掛かるので、罫の中に飾りを入れると飾りごと消える。 */ .style-stage section + section::before { content: ''; position: absolute; top: 0; left: 50%; width: min(24rem, 66%); height: var(--style-rule-height); transform: translateX(-50%); background: var(--style-rule-line); /* 中央に飾りぶんの隙間を空ける。作風に依らないので共通側に置く。 */ mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 42%, transparent 46%, transparent 54%, #000 58%, #000 80%, transparent ); pointer-events: none; } .style-stage section + section::after { content: ''; position: absolute; top: 0; left: 50%; width: var(--style-rule-mark-w); height: var(--style-rule-mark-h); transform: translate(-50%, -50%); pointer-events: none; } @supports (mask-image: linear-gradient(#000, #000)) { .style-stage section + section::after { background-color: var(--style-deco); mask-image: var(--style-rule-mark); mask-size: contain; mask-repeat: no-repeat; mask-position: center; } } /* ---- カードを置く場 ---- * 扇 (.card-fan) と盤面 (.spread-board) の下に敷物を敷く。isolation: isolate で * z-index: -1 の敷物がページ背景まで落ちないようにし、札より確実に下へ置く。 * 扇は overflow: hidden + 絶対配置のアンカー (top: 15rem) を持つので padding を足せない — * 敷物は inset: 0 で箱いっぱいに敷く。盤面だけ padding で縁を作る (両作風とも同値なので、 * 切り替えで盤面の寸法は動かない)。 */ .style-stage .card-fan, .style-stage .spread-board { position: relative; isolation: isolate; } .style-stage .spread-board { padding: 0.7rem; } .style-stage .card-fan::before, .style-stage .spread-board::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--style-mat-radius); background: var(--style-mat); pointer-events: none; } .style-stage .card-fan::after, .style-stage .spread-board::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--style-mat-radius); background: var(--style-mat-trim); pointer-events: none; } /* 敷物の上に直に乗る唯一の文字。地の明るさが作風で変わるので、素の opacity 0.65 のままだと * 片方の作風でコントラストが落ちる。色は brand-text のまま (敷物は昼夜どちらでも * 「ページより暗い / 明るい」側へ寄せてあるので、文字色は動かさなくてよい)。 */ .style-stage .spread-board__label { opacity: 1; } /* ---- reveal の余韻 ---- * card_pick.css の大アルカナのグロー (.card-pick-card--just-revealed.card-pick-card--major) * とは別の要素 (::after) に載せる。同じ要素の animation を取り合うと、作風を足すたびに * 大アルカナの演出が消えるか二重になるため。delay はフリップ完了 (500ms + 開示順) に合わせる。 */ .style-stage .card-pick-card { position: relative; } .style-stage .card-pick-card--just-revealed::after { content: ''; position: absolute; inset: -0.3rem; border-radius: inherit; background: var(--style-afterglow-paint); animation: var(--style-afterglow-name) 1100ms ease-out calc(500ms + var(--reveal-order, 0) * 200ms) both; pointer-events: none; } /* ---- 干支 (#1047) ---- * その年の干支が 1 匹、本文の列の左右の余白 (lane) だけを歩く。巡回は CSS だけで動き * (フッタの印 body[data-footer-at-ground] を読むだけ)、JS が動きを持つのはマウスのポインターに * 気付いて寄っている間だけ (下の「ポインターに気付く」)。12 匹共通の規約 (コマの組・座標・速さ・ * 巡回の時間) の正本は docs/requirements/zodiac-ornament.md で、ここはその実装。 * * 列の幅は --eto-column の 1 つ。既定は 48rem (max-w-3xl)、列の広いページは body[data-eto-column] * で名前を宣言し、下で幅に引く。余白 = (100% - 列) / 2 で、100% は fixed の装飾層 = スクロール * バーを除いた viewport。lane は列の縁に接して置き、clip-path で切る — 列へ向かって歩くと縁で * 切れて、列の裏へ入ったように見える。余白が絵の幅より狭いと lane の幅は 0 (下の max(…* 1000) * の段差) で、何も見えない。改行点 (media query) は持たない。 * * 速さ (20px/s) と可変の余白: 所要時間を長さから CSS で割り出せないので、座標を lane の外縁から * 固定の px で決める。外縁から現れる (56px) → 眠る → 列へ 64px 歩いて休む → 列の裏まで歩く、の * 最後の区間だけが余白の幅に依存する。そこは lane の最大幅 (--eto-reach) まで歩く時間を固定で * 取り、狭い余白では早く縁に切れて、残りの時間は列の裏にいる (見えない)。速さは常に 20px/s。 * 代わりに余白が --eto-reach より広い画面 (48rem 列で 1792px 超) では、外縁が viewport の端では * なく余白の中の線になる。 * * 巡回 (188s = 左右 1 往復)。1 つの lane の半周期 94s: * 0–2.8 外縁から現れる (歩) / –5.8 立つ / –43.8 眠る (38s) / –47.8 立つ / –51 列へ歩く / * –66 休む (15s) / –69 立つ / –91 列の裏まで歩く / –94 見えない。 * 歩く時間は 2.8 + 3.2 + 22 = 28s で周期の 29.8%。もう片方の lane は同じ巡回を半周期ずらす * ので、片方で列の裏へ消えた 3 秒後に反対の外縁から現れる。乱数は使わず、どちらから始めるかだけを * 節気 (24) の偶奇で決める (--eto-phase)。 */ .style-ornaments__eto { --eto-column: 48rem; --eto-size: 48px; --eto-reach: 32rem; --eto-margin: calc((100% - var(--eto-column)) / 2); inset: 0; /* 地は本文の弱い墨。影はシンボル側の fill-opacity。明暗・節気のどれでもトークンから来る。 */ color: var(--color-brand-text-mute); } /* 列を宣言していないページには出さない (layouts/application の注記)。 */ body:not([data-eto-column]) .style-ornaments__eto { display: none; } body[data-eto-column='top'] .style-ornaments__eto { --eto-column: 1280px; } body[data-eto-column='catalog'] .style-ornaments__eto { --eto-column: 64rem; } /* 奇数番目の節気は右の余白から始める (偶数は左)。 */ body:is( [data-sekki='usui'], [data-sekki='shunbun'], [data-sekki='kokuu'], [data-sekki='shouman'], [data-sekki='geshi'], [data-sekki='taisho'], [data-sekki='shosho'], [data-sekki='shuubun'], [data-sekki='soukou'], [data-sekki='shousetsu'], [data-sekki='touji'], [data-sekki='daikan'] ) { --eto-phase: -94s; --eto-home-left: none; --eto-home-right: block; } .style-ornaments__eto-lane { --eto-delay: var(--eto-phase, 0s); position: absolute; /* 地面は下の見切りの帯の上 */ bottom: var(--style-edge-height, 8rem); height: var(--eto-size); width: min(var(--eto-reach), var(--eto-margin), max(0px, (var(--eto-margin) - var(--eto-size)) * 1000)); clip-path: inset(0); } .style-ornaments__eto-lane--left { right: calc(50% + var(--eto-column) / 2); } /* 右の lane は鏡に映す。lane の中の座標 (外縁 = 0、列 = 右) と向きが左と同じになる。 */ .style-ornaments__eto-lane--right { --eto-delay: calc(var(--eto-phase, 0s) - 94s); left: calc(50% + var(--eto-column) / 2); scale: -1 1; } /* フッタの上端が地面 (lane の下端) の高さまで来ている間は列の裏へ退く (lane の幅 + 絵 1 つ分だけ * 列の側へ)。フッタが画面の下に少し見えているだけでは退かない (#1402)。退くときは一瞬で、 * 戻るときだけ列の裏から滑り出る — 退く途中を見せると、フッタの文字の裏を横切るため。 * フッタの判定が一度も済んでいない間 (JS の読み込み前) も退いた側に置く: 短いページでは * 最初からフッタが見えていて、判定より先に描くと文字の裏に出る。 */ .style-ornaments__eto-track { position: absolute; inset: 0; transition: translate 1.2s ease-out; } body[data-footer-at-ground] .style-ornaments__eto-track, body:not([data-footer-observed]) .style-ornaments__eto-track { translate: calc(100% + var(--eto-size)) 0; transition: none; } /* 原本は左向き。lane の中では列 (右) へ向かって歩くので反転する (translate と取り合わない scale で)。 */ .style-ornaments__eto-walker { position: absolute; left: 0; bottom: 0; width: var(--eto-size); height: var(--eto-size); scale: -1 1; animation: eto-patrol 188s linear var(--eto-delay) infinite; } .style-ornaments__eto-frame { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; } /* 姿勢は visibility、歩きの 2 コマの交互は opacity — 別のプロパティなので同じ要素で重ねられる。 */ .style-ornaments__eto-frame--walk-1 { animation: eto-pose-walk 188s step-end var(--eto-delay) infinite, eto-stride 0.5s step-end infinite; } .style-ornaments__eto-frame--walk-2 { animation: eto-pose-walk 188s step-end var(--eto-delay) infinite, eto-stride 0.5s step-end -0.25s infinite; } .style-ornaments__eto-frame--idle { animation: eto-pose-idle 188s step-end var(--eto-delay) infinite; } .style-ornaments__eto-frame--rest { animation: eto-pose-rest 188s step-end var(--eto-delay) infinite; } .style-ornaments__eto-frame--sleep { animation: eto-pose-sleep 188s step-end var(--eto-delay) infinite; } /* 眠るの印 zzz (#1346)。眠るのコマの中にあるので、見える・見えないはコマの visibility に従う。 * 置き場所 (頭の上) は動物ごとの --eto-zzz-at (原画 = 左向きの 32 単位の座標で、印の左上)。 * 置き場所を宣言していない動物 (絵の無い年) では印も出さない — 空の lane に印だけ浮かせない。 * 絵は lane ごとに鏡に映る (左の lane は walker の 1 回、右は lane と walker の 2 回) ので、 * 1 回だけ映る左の lane では文字ごとに映し直して読める向きに戻す。並びと昇る向きは映したまま * (頭の側から背の側へ)。昇って消えるまで約 3 秒、次まで約 2 秒あける。昇る高さは 4 単位で、 * 印の上端が lane の枠 (32 単位) から出ない位置に置く。 */ .style-ornaments__eto[data-eto='uma'] { --eto-zzz-display: inline; --eto-zzz-at: 0 6px; --eto-alert-display: inline; --eto-alert-at: 5px 0; } .style-ornaments__eto[data-eto='hitsuji'] { --eto-zzz-display: inline; --eto-zzz-at: 0 5px; --eto-alert-display: inline; --eto-alert-at: 8px 6px; } .style-ornaments__eto[data-eto='saru'] { --eto-zzz-display: inline; --eto-zzz-at: 0 4px; --eto-alert-display: inline; --eto-alert-at: 6px 1px; } .style-ornaments__eto[data-eto='tori'] { --eto-zzz-display: inline; --eto-zzz-at: 0 4px; --eto-alert-display: inline; --eto-alert-at: 2px 1px; } .style-ornaments__eto[data-eto='inu'] { --eto-zzz-display: inline; --eto-zzz-at: 0 4px; --eto-alert-display: inline; --eto-alert-at: 1px 0; } .style-ornaments__eto[data-eto='i'] { --eto-zzz-display: inline; --eto-zzz-at: 0 4px; --eto-alert-display: inline; --eto-alert-at: 5px 5px; } .style-ornaments__eto[data-eto='ne'] { --eto-zzz-display: inline; --eto-zzz-at: 0 4px; --eto-alert-display: inline; --eto-alert-at: 9px 4px; } .style-ornaments__eto[data-eto='ushi'] { --eto-zzz-display: inline; --eto-zzz-at: 0 4px; --eto-alert-display: inline; --eto-alert-at: 7px 3px; } .style-ornaments__eto[data-eto='tora'] { --eto-zzz-display: inline; --eto-zzz-at: 12px 4px; --eto-alert-display: inline; --eto-alert-at: 6px 4px; } .style-ornaments__eto[data-eto='u'] { --eto-zzz-display: inline; --eto-zzz-at: 4px 4px; --eto-alert-display: inline; --eto-alert-at: 7px 2px; } .style-ornaments__eto[data-eto='tatsu'] { --eto-zzz-display: inline; --eto-zzz-at: 0 4px; --eto-alert-display: inline; --eto-alert-at: 2px 3px; } .style-ornaments__eto[data-eto='mi'] { --eto-zzz-display: inline; --eto-zzz-at: 0 4px; --eto-alert-display: inline; --eto-alert-at: 5px 2px; } .style-ornaments__eto-zzz { display: var(--eto-zzz-display, none); translate: var(--eto-zzz-at, 0 0); } .style-ornaments__eto-zzz-rise { animation: eto-zzz-rise 5s ease-out infinite; } .style-ornaments__eto-lane--left .style-ornaments__eto-zzz use { transform-box: fill-box; transform-origin: center; scale: -1 1; } @keyframes eto-zzz-rise { 0% { translate: 0 0; opacity: 0; } 10%, 50% { opacity: 1; } 65%, 100% { translate: 2px -4px; opacity: 0; } } /* 位置は lane の外縁から。-48px = 外縁の外 (見えない)、32rem = lane の最大幅 = 列の裏。 * 歩く区間は 20px/s: 56px / 2.8s、64px / 3.2s、440px / 22s。 */ @keyframes eto-patrol { 0% { translate: -48px 0; } 1.489%, 25.426% { translate: 8px 0; } 27.128%, 36.702% { translate: 72px 0; } 48.404%, 100% { translate: 32rem 0; } } @keyframes eto-pose-walk { 0% { visibility: visible; } 1.489% { visibility: hidden; } 25.426% { visibility: visible; } 27.128% { visibility: hidden; } 36.702%, 100% { visibility: visible; } } @keyframes eto-pose-idle { 0% { visibility: hidden; } 1.489% { visibility: visible; } 3.085% { visibility: hidden; } 23.298% { visibility: visible; } 25.426% { visibility: hidden; } 35.106% { visibility: visible; } 36.702%, 100% { visibility: hidden; } } @keyframes eto-pose-sleep { 0% { visibility: hidden; } 3.085% { visibility: visible; } 23.298%, 100% { visibility: hidden; } } @keyframes eto-pose-rest { 0% { visibility: hidden; } 27.128% { visibility: visible; } 35.106%, 100% { visibility: hidden; } } @keyframes eto-stride { 0% { opacity: 1; } 50% { opacity: 0; } } /* ポインターに気付く (#1347、eto_follow_controller)。気付いている間は巡回の時計ごと止め * (data-eto-follow)、寄っている walker のコマだけ JS が data-eto-pose で選ぶ。巡回のコマの * animation は外さずに !important で上から隠す — animation を外すと戻したときに頭から始まり、 * 止めた位置 (walker の translate) とコマがずれる。寄った距離は walker の left で、戻るときは * left = 0 まで歩いてから時計を動かすので、巡回の経路と時間は追従の間以外は変わらない。 * 「!」(気付くの印) は zzz と同じく置き場所を動物ごとに宣言し、宣言の無い動物では出さない。 */ .style-ornaments__eto[data-eto-follow] * { animation-play-state: paused; } .style-ornaments__eto-walker[data-eto-pose] .style-ornaments__eto-frame { visibility: hidden !important; opacity: 1 !important; } .style-ornaments__eto-walker[data-eto-pose='notice'] .style-ornaments__eto-frame--notice, .style-ornaments__eto-walker[data-eto-pose='idle'] .style-ornaments__eto-frame--idle, .style-ornaments__eto-walker[data-eto-pose='walk-1'] .style-ornaments__eto-frame--walk-1, .style-ornaments__eto-walker[data-eto-pose='walk-2'] .style-ornaments__eto-frame--walk-2 { visibility: visible !important; } .style-ornaments__eto-alert { display: none; translate: var(--eto-alert-at, 0 0); } .style-ornaments__eto-walker[data-eto-alert] .style-ornaments__eto-alert { display: var(--eto-alert-display, none); } /* 鑑定の画面 (body[data-eto-rest]) では歩かない。始まりの側の余白の外縁近くで休む / 眠るを繰り返す。 */ body[data-eto-rest] .style-ornaments__eto-lane--left { display: var(--eto-home-left, block); } body[data-eto-rest] .style-ornaments__eto-lane--right { display: var(--eto-home-right, none); } body[data-eto-rest] .style-ornaments__eto-walker { animation: none; translate: 8px 0; } body[data-eto-rest] .style-ornaments__eto-frame { animation: none; } body[data-eto-rest] .style-ornaments__eto-frame--rest { animation: eto-rest-awake 100s step-end infinite; } body[data-eto-rest] .style-ornaments__eto-frame--sleep { animation: eto-rest-sleep 100s step-end infinite; } @keyframes eto-rest-awake { 0% { visibility: visible; } 40%, 100% { visibility: hidden; } } @keyframes eto-rest-sleep { 0% { visibility: hidden; } 40%, 100% { visibility: visible; } } /* ---- 狭幅 (360px でも横スクロールさせない・操作部を塞がない) ---- * 左右の小物は本文の余白に入り込むので落とす。狭幅の季節差は、残る地の質感 (素材と節気ごとの * 密度 = --style-texture-size) と上下の見切りが伝える (#1043) — どちらも全面の下地か画面の端で、 * 操作部に重なる位置へ新しい装飾を足さない。 */ @media (max-width: 480px) { body.style-scene > .style-ornaments .style-ornaments__motif { display: none; } body.style-scene > .style-ornaments .style-ornaments__edge { height: calc(var(--style-edge-height) * 0.66); } .style-stage .spread-board { padding: 0.45rem; } } /* ---- 動きを減らす設定 ---- * 動く装飾はすべて止め、静的な装飾 (地の質感・枠・敷物・小物そのもの) は残す。 * 余韻は「見えない状態から立ち上がる」演出なので、止めるのではなく要素ごと落とす * (animation: none だと開始フレームが残って輪が出たままになる)。 */ @media (prefers-reduced-motion: reduce) { .style-ornaments__edge, .style-ornaments__motif { animation: none; } .style-stage .card-pick-card--just-revealed::after { display: none; } /* 干支は始まりの側の余白で休んだ 1 枚の静止画。フッタでは退かずに消える。 * body 付きなのは鑑定画面 (body[data-eto-rest]) の規則より後で確実に勝たせるため。 */ body .style-ornaments__eto .style-ornaments__eto-lane--left { display: var(--eto-home-left, block); } body .style-ornaments__eto .style-ornaments__eto-lane--right { display: var(--eto-home-right, none); } body .style-ornaments__eto .style-ornaments__eto-track { transition: none; } body .style-ornaments__eto .style-ornaments__eto-walker { animation: none; translate: 8px 0; } body .style-ornaments__eto .style-ornaments__eto-frame { animation: none; visibility: hidden; } body .style-ornaments__eto .style-ornaments__eto-frame--rest { visibility: visible; } /* 眠るの印は昇らせずに置いたまま (眠るのコマが見えている間は常に見える)。 */ .style-ornaments__eto-zzz-rise { animation: none; } }