/* ============================================================ インラインSVGアイコンシステム ネットワーク不要でTablerアイコン(MIT)を代替実装。 使い方: 色は親要素のcolorをstrokeとして継承する(SVGのcurrentColor)。 サイズはfont-sizeで制御できる。 ============================================================ */ .ti { display: inline-block; width: 1em; height: 1em; vertical-align: middle; flex-shrink: 0; } /* SVGをContent経由で表示。CSSの疑似要素でインラインSVGを埋め込む */ .ti::before { display: none; } /* 各アイコンはSVGをbackground-imageで設定しcurrentColorをfilterで近似する。 ただしfilterは「黒→任意色」の変換なので、まずSVGを黒(stroke="black")で定義し、 使用箇所でfilterを上書きする方式を採用する。 */ /* --- 黒SVGのbase定義 --- */ .ti { background-repeat: no-repeat; background-position: center; background-size: contain; } .ti-home { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012l-2%200l9-9l9%209l-2%200%22%2F%3E%3Cpath%20d%3D%22M5%2012v7a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-7%22%2F%3E%3Cpath%20d%3D%22M9%2021v-6a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v6%22%2F%3E%3C%2Fsvg%3E"); } .ti-gift { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M12%208v13%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2212%22%20width%3D%2214%22%20height%3D%229%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M8%208a4%204%200%200%201%204-4%22%2F%3E%3Cpath%20d%3D%22M16%208a4%204%200%200%200-4-4%22%2F%3E%3C%2Fsvg%3E"); } .ti-checklist { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%224%22%20height%3D%224%22%20rx%3D%220.5%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%224%22%20height%3D%224%22%20rx%3D%220.5%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20rx%3D%220.5%22%2F%3E%3Cline%20x1%3D%2211%22%20y1%3D%226%22%20x2%3D%2220%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%2211%22%20y1%3D%2212%22%20x2%3D%2220%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2211%22%20y1%3D%2218%22%20x2%3D%2220%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E"); } .ti-history { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%208v4l2%202%22%2F%3E%3Cpath%20d%3D%22M3.05%2011a9%209%200%201%201%20.5%204m-.5%205v-5h5%22%2F%3E%3C%2Fsvg%3E"); } .ti-target-arrow { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M14%2012l7-7m-1%204V5h-4%22%2F%3E%3C%2Fsvg%3E"); } .ti-sun { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M3%2012h1m8-9v1m8%208h1m-9%208v1M5.6%205.6l.7.7m12.1-.7-.7.7m.7%2011.4-.7-.7m-12.1.7.7-.7%22%2F%3E%3C%2Fsvg%3E"); } .ti-coin { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M14.8%209A2%202%200%200%200%2013%208h-2a2%202%200%200%200%200%204h2a2%202%200%200%201%200%204h-2a2%202%200%200%201-1.8-1M12%207v10%22%2F%3E%3C%2Fsvg%3E"); } .ti-star { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2017.75l-6.172%203.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086%206.253l6.9%201l-5%204.867l1.179%206.873z%22%2F%3E%3C%2Fsvg%3E"); } .ti-wallet { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%208v-3a1%201%200%200%200-1-1h-10a2%202%200%200%200%200%204h12a1%201%200%200%201%201%201v3m0%204v3a1%201%200%200%201-1%201h-12a2%202%200%200%201-2-2v-12%22%2F%3E%3Cpath%20d%3D%22M20%2012v4h-4a2%202%200%200%201%200-4h4%22%2F%3E%3C%2Fsvg%3E"); } .ti-plus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14m-7-7h14%22%2F%3E%3C%2Fsvg%3E"); } .ti-arrows-sort { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209l4-4l4%204%22%2F%3E%3Cpath%20d%3D%22M7%205v14%22%2F%3E%3Cpath%20d%3D%22M21%2015l-4%204l-4-4%22%2F%3E%3Cpath%20d%3D%22M17%2019v-14%22%2F%3E%3C%2Fsvg%3E"); } .ti-player-pause { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); } .ti-player-play { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204v16l13-8z%22%2F%3E%3C%2Fsvg%3E"); } .ti-hourglass { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%204h12M6%2020h12M8%204c0%205%208%205%208%208s-8%203-8%208M16%204c0%205-8%205-8%208s8%203%208%208%22%2F%3E%3C%2Fsvg%3E"); } .ti-x { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206l-12%2012m0-12l12%2012%22%2F%3E%3C%2Fsvg%3E"); } .ti-check { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012l5%205l10-10%22%2F%3E%3C%2Fsvg%3E"); } .ti-edit { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h-1a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h9a2%202%200%200%200%202-2v-1%22%2F%3E%3Cpath%20d%3D%22M20.385%206.585a2.1%202.1%200%200%200-2.97-2.97l-8.415%208.385v3h3l8.385-8.415z%22%2F%3E%3Cpath%20d%3D%22M16%205l3%203%22%2F%3E%3C%2Fsvg%3E"); } .ti-search { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M21%2021l-6-6%22%2F%3E%3C%2Fsvg%3E"); } .ti-arrow-left { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14m-7-7l-7%207l7%207%22%2F%3E%3C%2Fsvg%3E"); } .ti-chevron-right { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206l-6%206%22%2F%3E%3C%2Fsvg%3E"); } .ti-chevron-down { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206l6-6%22%2F%3E%3C%2Fsvg%3E"); } .ti-folder { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h4l3%203h7a1%201%200%200%201%201%201v8a1%201%200%200%201-1%201h-14a1%201%200%200%201-1-1v-11a1%201%200%200%201%201-1%22%2F%3E%3C%2Fsvg%3E"); } .ti-trash { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16m-10%204v6m4-6v6M5%207l1%2012a2%202%200%200%200%202%202h8a2%202%200%200%200%202-2l1-12M9%207V4a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v3%22%2F%3E%3C%2Fsvg%3E"); } .ti-circle-minus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M9%2012h6%22%2F%3E%3C%2Fsvg%3E"); } .ti-grip-vertical { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%225%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2219%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%225%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2219%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"); } .ti-trophy { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021h8m-4-4v4M7%204h10%22%2F%3E%3Cpath%20d%3D%22M17%204v8a5%205%200%200%201-10%200V4%22%2F%3E%3Cpath%20d%3D%22M5%209H3a2%202%200%200%200%200%204h2m14-4h2a2%202%200%200%201%200%204h-2%22%2F%3E%3C%2Fsvg%3E"); } .ti-list-check { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%205.5l1.5%201.5l2.5-2.5m-4%207l1.5%201.5l2.5-2.5m-4%207l1.5%201.5l2.5-2.5%22%2F%3E%3Cline%20x1%3D%2211%22%20y1%3D%226%22%20x2%3D%2220%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%2211%22%20y1%3D%2212%22%20x2%3D%2220%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2211%22%20y1%3D%2218%22%20x2%3D%2220%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E"); } .ti-chart-bar { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%228%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%228%22%20width%3D%224%22%20height%3D%2212%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); } .ti-barbell { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012h1m18%200h1M6%2012h12%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%224%22%20height%3D%228%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%228%22%20width%3D%224%22%20height%3D%228%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); } .ti-book-2 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%204v16H7a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h12z%22%2F%3E%3Cpath%20d%3D%22M19%2016H7a2%202%200%200%200-2%202%22%2F%3E%3Cpath%20d%3D%22M9%208h6%22%2F%3E%3C%2Fsvg%3E"); } .ti-pencil { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h4l10.5-10.5a2.828%202.828%200%201%200-4-4L4%2016v4%22%2F%3E%3Cpath%20d%3D%22M13.5%206.5l4%204%22%2F%3E%3C%2Fsvg%3E"); } .ti-bath { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012h16a1%201%200%200%201%201%201v3a4%204%200%200%201-4%204H7a4%204%200%200%201-4-4v-3a1%201%200%200%201%201-1z%22%2F%3E%3Cpath%20d%3D%22M6%2012V5a2%202%200%200%201%202-2h3v2.25%22%2F%3E%3Cpath%20d%3D%22M4%2021l1-1.5m15%201.5l-1-1.5%22%2F%3E%3C%2Fsvg%3E"); } .ti-glass-full { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021h8m-4-6v6M5%203l2%2012h10l2-12z%22%2F%3E%3Cpath%20d%3D%22M5%209h14%22%2F%3E%3C%2Fsvg%3E"); } .ti-moon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c.132%200%20.263%200%20.393%200a7.5%207.5%200%200%200%207.92%2012.446a9%209%200%201%201-8.313-12.454z%22%2F%3E%3C%2Fsvg%3E"); } .ti-coffee { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2014c.83.642%202.077%201.017%203.5%201%201.423.017%202.67-.358%203.5-1%20.83-.642%202.077-1.017%203.5-1%201.423-.017%202.67.358%203.5%201%22%2F%3E%3Cpath%20d%3D%22M8%203a2.4%202.4%200%200%200-1%202%202.4%202.4%200%200%200%201%202m4-4a2.4%202.4%200%200%200-1%202%202.4%202.4%200%200%200%201%202%22%2F%3E%3Cpath%20d%3D%22M3%2010h14v5a6%206%200%200%201-6%206H9a6%206%200%200%201-6-6v-5z%22%2F%3E%3Cpath%20d%3D%22M16.746%2016.726a3%203%200%201%200%20.252-5.555%22%2F%3E%3C%2Fsvg%3E"); } .ti-candy { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M12%205v-2m0%2016v-2m-7-7H3m16%200h-2%22%2F%3E%3C%2Fsvg%3E"); } .ti-device-gamepad-2 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215%22%20r%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2220%22%20height%3D%2212%22%20rx%3D%226%22%2F%3E%3C%2Fsvg%3E"); } .ti-movie { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M2%208h20M2%2016h20M8%204v4m0%208v4M16%204v4m0%208v4%22%2F%3E%3C%2Fsvg%3E"); } .ti-broom { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2021l12-12m0%200l-3-3M3%2018l4-4M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M3%2014c3.32-.8%206-2.3%208-4.5%202.32-2.5%202.73-5.4%203-7.5%22%2F%3E%3C%2Fsvg%3E"); } .ti-repeat { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012v-3a3%203%200%200%201%203-3h13m-3-3l3%203l-3%203%22%2F%3E%3Cpath%20d%3D%22M20%2012v3a3%203%200%200%201-3%203H4m3%203l-3-3l3-3%22%2F%3E%3C%2Fsvg%3E"); } .ti-checkbox { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2012l2%202l4-4%22%2F%3E%3C%2Fsvg%3E"); } .ti-calendar-event { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%203v4m-8-4v4M4%2011h16%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2215%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E"); } .ti-run { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%224%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M4%2017l5-5l2.5%202.5L15%2010l5%205%22%2F%3E%3Cpath%20d%3D%22M10%2012l-2%205h8l-2-5%22%2F%3E%3C%2Fsvg%3E"); } .ti-flame { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c1%204%205%206%205%2011a5%205%200%200%201%20-10%200c0%20-3%202%20-4%202.5%20-6c.5%202%201.5%203%201.5%204c0%20-3%20.5%20-7%201%20-9z%22%2F%3E%3C%2Fsvg%3E"); } .ti-heart { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19.5%2012.572l-7.5%207.428l-7.5-7.428a5%205%200%201%201%207.5-6.566a5%205%200%201%201%207.5%206.572%22%2F%3E%3C%2Fsvg%3E"); } .ti-music { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017a3%203%200%201%200%206%200a3%203%200%200%200-6%200%22%2F%3E%3Cpath%20d%3D%22M13%2017a3%203%200%201%200%206%200a3%203%200%200%200-6%200%22%2F%3E%3Cpath%20d%3D%22M9%2017V4l10-2v13%22%2F%3E%3C%2Fsvg%3E"); } .ti-bike { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2215%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2215%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2015l5-8h5l4%208%22%2F%3E%3Cpath%20d%3D%22M12%207l1.5-3h3%22%2F%3E%3C%2Fsvg%3E"); } .ti-plant { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2015h10M12%209V5M8%205c0%202%201.5%203%204%204%202.5-1%204-2%204-4a4%204%200%200%200-8%200z%22%2F%3E%3C%2Fsvg%3E"); } .ti-droplet { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c0%200-6%205.686-6%2010a6%206%200%200%200%2012%200c0-4.314-6-10-6-10z%22%2F%3E%3C%2Fsvg%3E"); } .ti-bolt { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%203l-7%2010h6l-1%208l7-10h-6l1-8%22%2F%3E%3C%2Fsvg%3E"); } .ti-brain { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.5%2013a3.5%203.5%200%200%200-3.5-3.5v0a3.5%203.5%200%200%200-3.5%203.5%22%2F%3E%3Cpath%20d%3D%22M8%2013.5a4%204%200%200%200%208%200%22%2F%3E%3Cpath%20d%3D%22M12%203C9.8%203%208%204.6%208%206.5c0%20.34.06.67.16%201H8a4%204%200%200%200%200%208h.5%22%2F%3E%3Cpath%20d%3D%22M12%203c2.2%200%204%201.6%204%203.5%200%20.34-.06.67-.16%201h.16a4%204%200%200%201%200%208h-.5%22%2F%3E%3C%2Fsvg%3E"); } .ti-clock { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%203%22%2F%3E%3C%2Fsvg%3E"); } .ti-bike-2 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2216%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2216%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M8%2016h8M12%2016V9l-4%203%22%2F%3E%3C%2Fsvg%3E"); } .ti-eye { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M22%2012c-2.667%204.667-6%207-10%207s-7.333-2.333-10-7c2.667-4.667%206-7%2010-7s7.333%202.333%2010%207%22%2F%3E%3C%2Fsvg%3E"); } .ti-eye-off { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.585%2010.587a2%202%200%200%200%202.829%202.828%22%2F%3E%3Cpath%20d%3D%22M16.681%2016.673a8.717%208.717%200%200%201-4.681%201.327c-3.6%200-6.6-2-9-6%201.272-2.12%202.712-3.678%204.32-4.674m2.86-1.146a9.055%209.055%200%200%201%201.82-.18c3.6%200%206.6%202%209%206-.666%201.11-1.379%202.067-2.138%202.87%22%2F%3E%3Cpath%20d%3D%22M3%203l18%2018%22%2F%3E%3C%2Fsvg%3E"); } /* ============================================================ 色制御: filterで黒SVGを各コンテキストの色に変換 計算式: 任意のHEX色 → CSSfilter値 #2F7FB8 (メイン青): invert(39%) sepia(73%) saturate(500%) hue-rotate(175deg) brightness(100%) #FFFFFF (白) : brightness(0) invert(1) #D9685F (赤) : invert(30%) sepia(80%) saturate(600%) hue-rotate(320deg) brightness(100%) #1D9E75 (緑) : invert(50%) sepia(70%) saturate(500%) hue-rotate(120deg) brightness(95%) #E0A800 (金) : invert(65%) sepia(80%) saturate(700%) hue-rotate(10deg) brightness(100%) #5A8AA8 (グレー青): invert(55%) sepia(20%) saturate(400%) hue-rotate(175deg) brightness(95%) ============================================================ */ /* ボトムナビ: 非アクティブ=半透明白、アクティブ=青 */ .round-btn-nav i { filter: brightness(0) invert(1); opacity: 0.75; } .round-btn-nav.active i { filter: invert(39%) sepia(73%) saturate(500%) hue-rotate(175deg); opacity: 1; } /* タスクアイコン系: 青 */ .task-icon-circle i, .fav-icon-circle i, .goal-icon i, .daily-icon i, .item-icon-circle i, .wish-icon-circle i { filter: invert(39%) sepia(73%) saturate(500%) hue-rotate(175deg); } /* 達成済みお気に入り: 白 */ .fav-icon-circle.fav-icon-done i { filter: brightness(0) invert(1); } /* 一般ボタン/アイコン: 青 */ .icon-btn i, .add-btn i { filter: invert(39%) sepia(73%) saturate(500%) hue-rotate(175deg); } /* 検索/設定など補助アイコン: グレー青 */ .search-box > i, .task-grip, .grip, .chevron { filter: invert(55%) sepia(20%) saturate(400%) hue-rotate(175deg); } /* セクションタイトル内アイコン: グレー青 */ .section-title i, .sub-label i, .link-btn i { filter: invert(55%) sepia(20%) saturate(400%) hue-rotate(175deg); } /* 削除系: 赤 */ .remove-btn i, .task-delete-btn i, .modal-remove-btn i { filter: invert(30%) sepia(80%) saturate(600%) hue-rotate(320deg); } .link-btn-danger i { filter: invert(30%) sepia(80%) saturate(600%) hue-rotate(320deg); } /* 達成ボタン: 白 */ .btn-achieve { color: white; } .btn-achieve i { filter: brightness(0) invert(1); } /* 戻るボタン: グレー青 */ .edit-header .icon-btn i { filter: invert(55%) sepia(20%) saturate(400%) hue-rotate(175deg); } /* 目標チェック達成後: 白 */ .goal-check.checked::after { filter: none; } /* 達成演出アイコン: テーマ色(白ベースで輝かせる) */ .celebration-icon { filter: brightness(0) invert(1); } .ti-arrow-back-up { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2014l-4-4l4-4%22%2F%3E%3Cpath%20d%3D%22M5%2010h11a4%204%200%201%201%200%208h-1%22%2F%3E%3C%2Fsvg%3E"); } /* ===== チュートリアル用に追加 ===== */ .ti-bulb { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6%22%2F%3E%3Cpath%20d%3D%22M10%2021h4%22%2F%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%201%203.5%2010.9c-.6.5-1%201.2-1.2%202.1H9.7c-.2-.9-.6-1.6-1.2-2.1A6%206%200%200%201%2012%203z%22%2F%3E%3C%2Fsvg%3E"); } .ti-alert-triangle { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M10.4%203.9%201.7%2018.4a1.9%201.9%200%200%200%201.6%202.9h17.4a1.9%201.9%200%200%200%201.6-2.9L13.6%203.9a1.9%201.9%200%200%200-3.2%200z%22%2F%3E%3Cpath%20d%3D%22M12%2016h.01%22%2F%3E%3C%2Fsvg%3E"); } .ti-info-circle { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3Cpath%20d%3D%22M11%2012h1v4h1%22%2F%3E%3C%2Fsvg%3E"); } .ti-file { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203v4a1%201%200%200%200%201%201h4%22%2F%3E%3Cpath%20d%3D%22M5%204a2%202%200%200%201%202-2h6l5%205v11a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V4z%22%2F%3E%3C%2Fsvg%3E"); } .ti-photo { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%229.5%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M4%2016l4.5-4.5a2%202%200%200%201%202.8%200L16%2016%22%2F%3E%3Cpath%20d%3D%22M14%2014l1.5-1.5a2%202%200%200%201%202.8%200L20%2014%22%2F%3E%3C%2Fsvg%3E"); } .ti-device-mobile-plus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%2217%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9.5%2017h1%22%2F%3E%3Cpath%20d%3D%22M19%2015v6%22%2F%3E%3Cpath%20d%3D%22M16%2018h6%22%2F%3E%3C%2Fsvg%3E"); } .ti-sparkles { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.4%204.2L18%209l-4.6%201.8L12%2015l-1.4-4.2L6%209l4.6-1.8z%22%2F%3E%3Cpath%20d%3D%22M18.5%2016.5l.6%201.8%201.9.6-1.9.6-.6%201.9-.6-1.9-1.9-.6%201.9-.6z%22%2F%3E%3C%2Fsvg%3E"); } .ti-bell-off { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203l18%2018%22%2F%3E%3Cpath%20d%3D%22M8.7%204.7A6%206%200%200%201%2018%209.5c0%202.4.4%203.9.9%204.9%22%2F%3E%3Cpath%20d%3D%22M6.3%208.5A6%206%200%200%200%206%209.5c0%203-1%204.5-2%205.5h11%22%2F%3E%3Cpath%20d%3D%22M10%2019a2%202%200%200%200%204%200%22%2F%3E%3C%2Fsvg%3E"); }