/* ========================================================= 💎 OOPARTS ジュエル見出し（パライバトルマリン） test0601.paraiba ========================================================= */ /* ========================================================================== 💎 OOPARTS Jewel Box : Paraiba Brilliant Cut (ラウンドブリリアント)0603 テスト開発 [File] paraiba-jewel-box.css [Color] #00E3FF (Neon Blue Green) ========================================================================== */ /* -------------------------------------------------------------------------- 🛡️ 【形パーツ】 .shape-brilliant（丸い多面体）、.shape-rhombus（ひし形） -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 🛡️ 【色パーツ】 .color-paraiba（青緑）、.color-ruby（深紅） -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 🛡️ 【常時発光パーツ】 .glow-twinkle（チカチカ脈動する） -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 🛡️ 【閃光パーツ】 .shine-sweep（シュパッと光の帯が走る） -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 🛡️ 1. Cocoonスキン干渉打破 ＆ 見出しベース要塞化 Taskつー ブリリアントカットをモジュール化してみる ここから -------------------------------------------------------------------------- */ /* ========================================================================== 💎 OOPARTS Jewel Box : モジュール化ベースシステム [File] ooparts-jewel-box.css

========================================================================== */ /* -------------------------------------------------------------------------- 🛡️ 0. ベース・モジュール（Cocoon干渉打破 ＆ 共通の器） -------------------------------------------------------------------------- */ /* ========================================================================= * H2：大見出し用の絶対防衛（Cocoonデフォルト完全破壊 ＋ 宝石エフェクト解放） * ========================================================================= */ /* ========================================================================= * H2：大見出し用の絶対防衛（Cocoonグレー背景の完全破壊 ＋ 宝石エフェクト解放） * ========================================================================= */ /* ========================================================================= * H2：大見出し用の絶対防衛（宝石エフェクト完全復活版） * ========================================================================= */ /* ========================================================================= * H2：大見出し用の絶対防衛（Cocoon完全無効化 ＋ 宝石エフェクト解放） * ========================================================================= */ /* ========================================================================= * Cocoon H2の呪縛を完全破壊する超強力セレクタ * ========================================================================= */ /* ========================================================================= * H2：大見出し用の絶対防衛（Cocoonデフォルト完全破壊 ＋ 宝石エフェクト完全解放） * ========================================================================= */ .entry-content h2.ooparts-jewel-h2, .entry-content .ooparts-jewel-h2 { /* 1. Cocoonデフォルト装飾の強制無効化（グレー背景・不要な線を完全消去） */ background: transparent !important; background-color: transparent !important; border-top: none !important; border-left: none !important; border-right: none !important; box-shadow: none !important; border-radius: 0 !important; /* 2. 宝石アイコン用のスペース死守 ＋ Cocoonの不要な余白を強制リセット */ position: relative !important; padding: 5px 0 5px 60px !important; /* 上5px、右0、下5px、左60px(宝石領域) */ margin: 30px 0 15px 0 !important; /* 3. 宝石の光を切り捨てるブラックホールの解除（光のハミ出しを許可） */ overflow: hidden !important; /* 4. エフェクト制御と透明グラデーションのアンダーライン（H3と完全同期） */ color: #4a3b32 !important; display: inline-block !important; border-bottom: 2px solid transparent !important; border-image: linear-gradient(to right, transparent, #c8a97e, transparent) 1 !important; clear: both !important; } /* H3：大見出し用の絶対防衛 */ .entry-content .ooparts-jewel-h3 { position: relative !important; padding-left: 60px !important; padding-bottom: 5px !important; color: #4a3b32 !important; overflow: hidden !important; border-bottom: 2px solid transparent !important; border-image: linear-gradient(to right, transparent, #c8a97e, transparent) 1 !important; display: inline-block !important; margin-bottom: 15px !important; } /* H4：小見出し用の絶対防衛 */ .entry-content .ooparts-jewel-h4 { position: relative !important; padding-left: 50px !important; padding-bottom: 2px !important; color: #4a3b32 !important; overflow: hidden !important; display: inline-block !important; margin-top: 20px !important; margin-bottom: 10px !important; font-size: 1.1em !important; } /* 💎 宝石本体の共通初期設定（中央に配置する絶対ルール） */ .entry-content .ooparts-jewel-h2::before, .entry-content .ooparts-jewel-h3::before, .entry-content .ooparts-jewel-h4::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); } /* ========================================================================== 🛡️ 0.5 汎用アイコン・ベースモジュール（文字の横に置く極小の器） 単体配置テスト ========================================================================== */ .ooparts-jewel-icon { position: relative !important; display: inline-block !important; width: 16px !important; /* アイコンが占有する幅 */ height: 16px !important; /* アイコンが占有する高さ */ vertical-align: middle !important; /* テキストの真ん中の高さに揃える */ margin-left: 6px !important; /* 左の文字（オープン）とのすき間 */ margin-top: -3px !important; /* 文字のベースラインに合わせる微調整 */ overflow: hidden !important; /* 閃光エフェクトのはみ出しを防止 */ border-radius: 2px !important; } /* 🔻 インバーテッド（逆三角形）をアイコンとして使う際の専用中央寄せロック */ .ooparts-jewel-icon.shape-triangle-inverted::before { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; /* ど真ん中に強制配置 */ width: 12px !important; height: 10px !important; } /* -------------------------------------------------------------------------- 🛡️ 0. ベース・モジュール（Cocoon干渉打破 ＆ 共通の器） ここまで -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 🧱 1. フォルム・モジュール（形だけを決める） -------------------------------------------------------------------------- */ /* 🔴 ラウンドブリリアント（真円） */ .shape-brilliant::before { border-radius: 50%; } /* サイズ指定（ブリリアント専用） */ .entry-content .ooparts-jewel-h2.shape-brilliant::before { width: 16px; height: 16px; left: 10px; } .entry-content .ooparts-jewel-h3.shape-brilliant::before { width: 16px; height: 16px; left: 10px; } .entry-content .ooparts-jewel-h4.shape-brilliant::before { width: 13px; height: 13px; left: 8px; } /* ========================================================================== 🧱 1. フォルム・モジュール（形だけを決める）に追加 ========================================================================== */ /* 🔹 1. ひし形 (Rhombus) - シャープで王道なダイヤ型 */ .shape-rhombus::before { /* 共通設定の translateY(-50%) を維持しつつ 45度回転 */ transform: translateY(-50%) rotate(45deg); border-radius: 2px; /* 少しだけ角を落として宝石特有の丸みを出す */ } .entry-content .ooparts-jewel-h2.shape-rhombus::before { width: 13px; height: 13px; left: 10px; } .entry-content .ooparts-jewel-h3.shape-rhombus::before { width: 13px; height: 13px; left: 10px; } .entry-content .ooparts-jewel-h4.shape-rhombus::before { width: 10px; height: 10px; left: 8px; } /* 💧 2. しずく型 (Drop / Pear) - 妖艶な涙型

*/ .shape-drop::before { /* 3つの角を丸め、1つの角（右上）を残して斜めに配置することでしずくを形成 */ border-radius: 50% 0 50% 50%; transform: translateY(-50%) rotate(-45deg); /* 上を尖らせる */ } .entry-content .ooparts-jewel-h2.shape-drop::before { width: 15px; height: 15px; left: 10px; } .entry-content .ooparts-jewel-h3.shape-drop::before { width: 15px; height: 15px; left: 10px; } .entry-content .ooparts-jewel-h4.shape-drop::before { width: 12px; height: 12px; left: 8px; } /* 💖 3. ハート型 (Heart) - 絶対的ヒロインカット

*/ .shape-heart::before { /* 複雑なポリゴンレーザーでハートの輪郭を精緻に型抜き */ clip-path: polygon(50% 15%, 65% 0%, 85% 0%, 100% 20%, 100% 40%, 50% 100%, 0% 40%, 0% 20%, 15% 0%, 35% 0%); border-radius: 0; } .entry-content .ooparts-jewel-h2.shape-heart::before { width: 18px; height: 16px; left: 8px; top: 52%; } .entry-content .ooparts-jewel-h3.shape-heart::before { width: 18px; height: 16px; left: 8px; top: 52%; } .entry-content .ooparts-jewel-h4.shape-heart::before { width: 14px; height: 12px; left: 7px; top: 52%; } /* 🌙 4. 三日月型 (Crescent) - 神秘と魔法のクレセントカット

*/ .shape-crescent::before { /* 右側が太い、シャープな三日月のシルエットに切り抜き */ clip-path: polygon(50% 0%, 75% 15%, 95% 45%, 90% 75%, 65% 95%, 45% 100%, 65% 85%, 75% 65%, 75% 45%, 65% 25%, 45% 10%, 25% 0%); } .entry-content .ooparts-jewel-h2.shape-crescent::before { width: 17px; height: 17px; left: 8px; } .entry-content .ooparts-jewel-h3.shape-crescent::before { width: 17px; height: 17px; left: 8px; } .entry-content .ooparts-jewel-h4.shape-crescent::before { width: 13px; height: 13px; left: 7px; } /* 🌟 5. 星型 (Star) - 超魔導・ステラカット */ .shape-star::before { /* 完璧な比率の五芒星（スター）の座標レーザーロック */ clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .entry-content .ooparts-jewel-h2.shape-star::before { width: 19px; height: 19px; left: 8px; top: 48%; } .entry-content .ooparts-jewel-h3.shape-star::before { width: 19px; height: 19px; left: 8px; top: 48%; } .entry-content .ooparts-jewel-h4.shape-star::before { width: 15px; height: 15px; left: 7px; top: 48%; } /* 🔺 6. 正三角形 (Triangle) - サイバー＆シャープ・トリリアント */ .shape-triangle::before { /* 上向きの正三角形をソリッドに切り出し */ clip-path: polygon(50% 0%, 100% 85%, 0% 85%); } .entry-content .ooparts-jewel-h2.shape-triangle::before { width: 17px; height: 15px; left: 9px; top: 52%; } .entry-content .ooparts-jewel-h3.shape-triangle::before { width: 17px; height: 15px; left: 9px; top: 52%; } .entry-content .ooparts-jewel-h4.shape-triangle::before { width: 13px; height: 11px; left: 8px; top: 52%; } /* 🛡️ 7. 盾型 (Shield) - 鉄壁のインペリアル・シールド

*/ .shape-shield::before { /* ディフェンス考察エリアに相応しい重厚な盾の紋章 */ clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%); } .entry-content .ooparts-jewel-h2.shape-shield::before { width: 15px; height: 17px; left: 10px; } .entry-content .ooparts-jewel-h3.shape-shield::before { width: 15px; height: 17px; left: 10px; } .entry-content .ooparts-jewel-h4.shape-shield::before { width: 11px; height: 13px; left: 8px; } /* 🔻 8. 逆三角形 (Inverted Triangle) - 集中とサイバーの魔力

*/ .shape-triangle-inverted::before { /* フラットな上部から、下部の頂点に向かって鋭く切り落とすレーザーロック */ clip-path: polygon(0% 15%, 100% 15%, 50% 100%); } /* 視覚的な重心が上寄りになるため、topの値を少し調整して中央配置を最適化 */ .entry-content .ooparts-jewel-h2.shape-triangle-inverted::before { width: 17px; height: 15px; left: 9px; top: 48%; } .entry-content .ooparts-jewel-h3.shape-triangle-inverted::before { width: 17px; height: 15px; left: 9px; top: 48%; } .entry-content .ooparts-jewel-h4.shape-triangle-inverted::before { width: 13px; height: 11px; left: 8px; top: 48%; } /* ========================================================================== 🧱 1. フォルム・モジュール（形だけを決める）に追加 ここまで ========================================================================== */ /* -------------------------------------------------------------------------- 🎨 2. カラー・モジュール（色と陰影だけを決める） -------------------------------------------------------------------------- */ /* 💎 パライバトルマリン (#00E3FF) */ .color-paraiba::before { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #008B99 0deg 20deg, #00E3FF 20deg 60deg, #E6FFFF 60deg 80deg, #00B5CC 80deg 110deg, #00E3FF 110deg 150deg, #008B99 150deg 200deg, #E6FFFF 200deg 240deg, #00E3FF 240deg 300deg, #00B5CC 300deg 330deg, #008B99 330deg 360deg ); border: 1px solid rgba(255, 255, 255, 0.6); } /* -------------------------------------------------------------------------- 🎨 2. カラー・モジュール（色と陰影だけを決める）に追加 /* 例：タンザナイトのラウンドブリリアント（脈動＋閃光）を呼び出す場合

-------------------------------------------------------------------------- */ /* 🔮 タンザナイト (#372B8C) */ .color-tanzanite::before { background: /* 頂部のテーブル面：紫がかったアイスハイライト */ radial-gradient(circle at 40% 40%, rgba(217, 210, 255, 0.6) 10%, rgba(255, 255, 255, 0) 40%), /* 多面体カット面：深淵の紫からアイスパープルへの円錐グラデーション */ conic-gradient( from 0deg, #180D40 0deg 20deg, /* ディープシャドウ（漆黒紫） */ #372B8C 20deg 60deg, /* タンザナイトコア */ #D9D2FF 60deg 80deg, /* アイスハイライト（強反射） */ #2A1E6B 80deg 110deg, /* ミドルシャドウ */ #372B8C 110deg 150deg, #180D40 150deg 200deg, #B5A5FF 200deg 240deg,/* アイスハイライト2 */ #372B8C 240deg 300deg, #2A1E6B 300deg 330deg, #180D40 330deg 360deg ); border: 1px solid rgba(181, 165, 255, 0.5); /* 紫の縁取り */ } /* 🔮 新生タンザナイト2 (#5C4EB3) - ライト＆ブルーフレア仕様

*/ .color-tanzanite-2::before { background: /* 頂部のテーブル面：透明感を引き出すアイスブルーのハイライト */ radial-gradient(circle at 40% 40%, rgba(180, 220, 255, 0.7) 10%, rgba(255, 255, 255, 0) 40%), /* 多面体カット面：明紫のコアから青の閃光が走る円錐グラデーション */ conic-gradient( from 0deg, #2B1F7A 0deg 20deg, /* ディープシャドウ（インディゴブルー） */ #5C4EB3 20deg 60deg, /* タンザナイトコア（透明感のある明紫） */ #78C0FF 60deg 80deg, /* ブルーハイライト（青の閃光） */ #463899 80deg 110deg, /* ミドルシャドウ */ #5C4EB3 110deg 150deg, #2B1F7A 150deg 200deg, #A3D1FF 200deg 240deg,/* ブルーハイライト2（強反射） */ #5C4EB3 240deg 300deg, #463899 300deg 330deg, #2B1F7A 330deg 360deg ); border: 1px solid rgba(120, 192, 255, 0.6); /* オーロラブルーの縁取り */ } /* ========================================================================== 🎨 2. カラー・モジュール（色と陰影だけを決める）に追加 ========================================================================== */ /* 👑 1. インペリアルトパーズ (#FFA000系・皇帝の黄金)

*/ .color-imperial-topaz::before { background: radial-gradient(circle at 40% 40%, rgba(255, 224, 178, 0.7) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #B32400 0deg 20deg, /* ディープシャドウ（焦げ茶・赤み） */ #FFA000 20deg 60deg, /* ゴールドコア */ #FFE0B2 60deg 80deg, /* ウォームハイライト */ #D66D00 80deg 110deg, /* ミドルシャドウ */ #FFA000 110deg 150deg, #B32400 150deg 200deg, #FFCC80 200deg 240deg, #FFA000 240deg 300deg, #D66D00 300deg 330deg, #B32400 330deg 360deg ); border: 1px solid rgba(255, 204, 128, 0.6); } /* ☀️ 2. サニー・シトリン (#FFCA28系・太陽の滴)

*/ .color-sunny-citrine::before { background: radial-gradient(circle at 40% 40%, rgba(255, 248, 225, 0.8) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #E65100 0deg 20deg, /* ディープシャドウ（濃いオレンジ） */ #FFCA28 20deg 60deg, /* シトリンコア（明るいハニーイエロー） */ #FFF8E1 60deg 80deg, /* クリアハイライト */ #FF8F00 80deg 110deg, /* ミドルシャドウ */ #FFCA28 110deg 150deg, #E65100 150deg 200deg, #FFE082 200deg 240deg, #FFCA28 240deg 300deg, #FF8F00 300deg 330deg, #E65100 330deg 360deg ); border: 1px solid rgba(255, 224, 130, 0.6); } /* ⚡ 3. カナリー・イエローダイヤ (#FFEA00系・稲妻の結晶)

*/ .color-canary-diamond::before { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #9E9D24 0deg 20deg, /* ディープシャドウ（オリーブ系で引き締め） */ #FFEA00 20deg 60deg, /* ネオンイエローコア */ #FFFFE0 60deg 80deg, /* アイスハイライト（白強め） */ #C0CA33 80deg 110deg, /* ミドルシャドウ */ #FFEA00 110deg 150deg, #9E9D24 150deg 200deg, #F0F4C3 200deg 240deg, #FFEA00 240deg 300deg, #C0CA33 300deg 330deg, #9E9D24 330deg 360deg ); border: 1px solid rgba(255, 255, 255, 0.7); } /* ========================================================================== 🎨 2. カラー・モジュール（色と陰影だけを決める）に追加 ========================================================================== */ /* 💎 1. ファンシー・ピンクダイヤ (#FF66B2系・奇跡の桜結晶)

*/ .color-pink-diamond::before { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #C70066 0deg 20deg, /* ディープシャドウ（濃いラズベリー） */ #FF66B2 20deg 60deg, /* ピンクダイヤコア */ #FFFFFF 60deg 80deg, /* アイスハイライト（純白強め） */ #FF3399 80deg 110deg, /* ミドルシャドウ */ #FF66B2 110deg 150deg, #C70066 150deg 200deg, #FFCCE6 200deg 240deg, #FF66B2 240deg 300deg, #FF3399 300deg 330deg, #C70066 330deg 360deg ); border: 1px solid rgba(255, 204, 230, 0.8); } /* 🍑 2. ピーチ・モルガナイト (#FFA399系・清らかな愛のしずく)

*/ .color-morganite::before { background: radial-gradient(circle at 40% 40%, rgba(255, 240, 235, 0.8) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #C75244 0deg 20deg, /* ディープシャドウ（ウォームブラウン） */ #FFA399 20deg 60deg, /* ピーチピンクコア */ #FFEBE6 60deg 80deg, /* ソフトハイライト */ #FF7C6B 80deg 110deg, /* ミドルシャドウ */ #FFA399 110deg 150deg, #C75244 150deg 200deg, #FFD1CC 200deg 240deg, #FFA399 240deg 300deg, #FF7C6B 300deg 330deg, #C75244 330deg 360deg ); border: 1px solid rgba(255, 209, 204, 0.6); } /* 🌺 3. ルベライト・ピンクトルマリン (#E62E8A系・情熱の深紅紅梅)

*/ .color-pink-tourmaline::before { background: radial-gradient(circle at 40% 40%, rgba(255, 180, 220, 0.7) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #800040 0deg 20deg, /* ディープシャドウ（ダークプラム紫） */ #E62E8A 20deg 60deg, /* ルベライトコア（濃マゼンタ） */ #FFCCE6 60deg 80deg, /* フロストハイライト */ #B30059 80deg 110deg, /* ミドルシャドウ */ #E62E8A 110deg 150deg, #800040 150deg 200deg, #FF99CC 200deg 240deg, #E62E8A 240deg 300deg, #B30059 300deg 330deg, #800040 330deg 360deg ); border: 1px solid rgba(255, 153, 204, 0.5); } /* ========================================================================== 🎨 2. カラー・モジュール（色と陰影だけを決める）に追加 ========================================================================== */ /* 🪸 1. 深海・赤珊瑚 (#FF4F33系・なめらかな血赤)

*/ .color-red-coral::before { background: /* 珊瑚特有のマットで柔らかなツヤ */ radial-gradient(circle at 40% 40%, rgba(255, 153, 128, 0.5) 10%, rgba(255, 255, 255, 0) 50%), conic-gradient( from 0deg, #8B2500 0deg 20deg, /* ディープシャドウ（濃いレンガ色） */ #FF4F33 20deg 60deg, /* コーラルコア（朱赤） */ #FFB399 60deg 80deg, /* ソフトハイライト（淡いピーチ） */ #CC3300 80deg 110deg, /* ミドルシャドウ */ #FF4F33 110deg 150deg, #8B2500 150deg 200deg, #FF8C66 200deg 240deg, #FF4F33 240deg 300deg, #CC3300 300deg 330deg, #8B2500 330deg 360deg ); border: 1px solid rgba(255, 128, 102, 0.4); } /* 🍷 2. 柘榴石・ガーネット (#800020系・重厚なダークワイン)

*/ .color-garnet::before { background: radial-gradient(circle at 40% 40%, rgba(255, 153, 153, 0.4) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #330000 0deg 20deg, /* ディープシャドウ（漆黒に近い赤） */ #800020 20deg 60deg, /* ガーネットコア（バーガンディ） */ #D96680 60deg 80deg, /* くすんだローズハイライト */ #4D0013 80deg 110deg, /* ミドルシャドウ */ #800020 110deg 150deg, #330000 150deg 200deg, #B33959 200deg 240deg, #800020 240deg 300deg, #4D0013 300deg 330deg, #330000 330deg 360deg ); border: 1px solid rgba(179, 77, 102, 0.3); } /* 👑 3. ピジョンブラッド・ルビー (#FF003F系・燃え盛る女王のネオン)

*/ .color-ruby::before { background: radial-gradient(circle at 40% 40%, rgba(255, 204, 217, 0.8) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #66001A 0deg 20deg, /* ディープシャドウ（ダークマゼンタレッド） */ #FF003F 20deg 60deg, /* ルビーコア（鮮烈な真紅） */ #FF99B3 60deg 80deg, /* アイスハイライト（白強め） */ #B3002D 80deg 110deg, /* ミドルシャドウ */ #FF003F 110deg 150deg, #66001A 150deg 200deg, #FF4D79 200deg 240deg, #FF003F 240deg 300deg, #B3002D 300deg 330deg, #66001A 330deg 360deg ); border: 1px solid rgba(255, 102, 140, 0.6); } /* ========================================================================== 🎨 2. カラー・モジュール（色と陰影だけを決める）に追加 ========================================================================== */ /* 🍵 1. 東洋の神秘・翡翠 (#00A36C系・とろみのある深緑)

*/ .color-jade::before { background: /* 翡翠特有のまろやかなツヤ感（白飛びさせない） */ radial-gradient(circle at 40% 40%, rgba(179, 229, 204, 0.6) 10%, rgba(255, 255, 255, 0) 50%), conic-gradient( from 0deg, #005933 0deg 20deg, /* ディープシャドウ（濃い深緑） */ #00A36C 20deg 60deg, /* ジェイドコア */ #66C299 60deg 80deg, /* ソフトハイライト（ミルキーグリーン） */ #008055 80deg 110deg, /* ミドルシャドウ */ #00A36C 110deg 150deg, #005933 150deg 200deg, #8FBC8F 200deg 240deg, /* 淡いモスグリーン系ハイライト */ #00A36C 240deg 300deg, #008055 300deg 330deg, #005933 330deg 360deg ); border: 1px solid rgba(102, 194, 153, 0.5); } /* 👑 2. 翠緑の王・エメラルド (#009846系・高貴な透明感) */ .color-emerald::before { background: /* エメラルドカットのような鋭いガラス光沢

*/ radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #00401A 0deg 20deg, /* ディープシャドウ（漆黒に近い緑） */ #009846 20deg 60deg, /* エメラルドコア（鮮烈な緑） */ #CCFFDF 60deg 80deg, /* アイスハイライト（純白強め） */ #006B31 80deg 110deg, /* ミドルシャドウ */ #009846 110deg 150deg, #00401A 150deg 200deg, #99FFC2 200deg 240deg, #009846 240deg 300deg, #006B31 300deg 330deg, #00401A 330deg 360deg ); border: 1px solid rgba(153, 255, 194, 0.7); } /* ☀️ 3. 太陽の雫・ペリドット (#9ACD32系・鮮やかなオリーブイエローグリーン)

*/ .color-peridot::before { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 224, 0.8) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #556B2F 0deg 20deg, /* ディープシャドウ（落ち着いたオリーブドラブ） */ #9ACD32 20deg 60deg, /* ペリドットコア（イエローグリーン） */ #FFFFE0 60deg 80deg, /* クリアハイライト（ペールイエロー） */ #6B8E23 80deg 110deg, /* ミドルシャドウ */ #9ACD32 110deg 150deg, #556B2F 150deg 200deg, #C0FF3E 200deg 240deg, #9ACD32 240deg 300deg, #6B8E23 300deg 330deg, #556B2F 330deg 360deg ); border: 1px solid rgba(204, 255, 153, 0.6); }/* ========================================================================== 🎨 2. カラー・モジュール（色と陰影だけを決める）に追加 ========================================================================== */ /* 🔮 1. 高貴なる紫の封印・アメジスト (#9933CC系・ロイヤルパープル)

*/ .color-amethyst::before { background: radial-gradient(circle at 40% 40%, rgba(230, 204, 255, 0.7) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #330066 0deg 20deg, /* ディープシャドウ（暗黒紫） */ #9933CC 20deg 60deg, /* アメジストコア（クリアな赤紫） */ #E6CCFF 60deg 80deg, /* アイスハイライト */ #660099 80deg 110deg, /* ミドルシャドウ */ #9933CC 110deg 150deg, #330066 150deg 200deg, #D9B3FF 200deg 240deg, #9933CC 240deg 300deg, #660099 300deg 330deg, #330066 330deg 360deg ); border: 1px solid rgba(204, 153, 255, 0.6); } /* 🧭 2. ヴァイキングの羅針盤・アイオライト (#5C5C8A系・スモーキーブルーバイオレット)

*/ .color-iolite::before { background: radial-gradient(circle at 40% 40%, rgba(209, 209, 224, 0.7) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #1F1F2E 0deg 20deg, /* ディープシャドウ（ダークスレートグレー） */ #5C5C8A 20deg 60deg, /* アイオライトコア（くすんだ群青紫） */ #D1D1E0 60deg 80deg, /* フロストハイライト */ #3D3D5C 80deg 110deg, /* ミドルシャドウ */ #5C5C8A 110deg 150deg, #1F1F2E 150deg 200deg, #B8B8CC 200deg 240deg, #5C5C8A 240deg 300deg, #3D3D5C 300deg 330deg, #1F1F2E 330deg 360deg ); border: 1px solid rgba(163, 163, 194, 0.5); } /* ========================================================================== 🎨 2. カラー・モジュール（色と陰影だけを決める）の修正 ========================================================================== */ /* 🎭 3. 昼と夜の双面神・アレキサンドライト (薄いブルーグレー × アクセントグリーン)

*/ .color-alexandrite::before { background: /* 表面の透明感：ブルーグレーになじむクールな白 */ radial-gradient(circle at 40% 40%, rgba(229, 237, 245, 0.8) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #2A3B4C 0deg 20deg, /* ディープシャドウ（濃く暗いブルーグレー） */ #8D9EAE 20deg 60deg, /* メインコア（薄いブルーグレー） */ #E5EDF5 60deg 80deg, /* アイスハイライト（白に近いクールグレー） */ #4B6B62 80deg 110deg, /* ミドルシャドウ（影に潜むダークグリーン） */ #70998B 110deg 150deg, /* アクセントコア（神秘的なミントグリーン） */ #2A3B4C 150deg 200deg, #B8D1C9 200deg 240deg, /* グリーン寄りのフロストハイライト */ #8D9EAE 240deg 300deg, /* 再びメインのブルーグレーへ */ #5C738A 300deg 330deg, /* 中間色の影 */ #2A3B4C 330deg 360deg ); border: 1px solid rgba(162, 181, 198, 0.7); } /* 🎭 3. 昼と夜の双面神・アレキサンドライト (ピーコックグリーン×ラズベリーレッドの多色性)

*/ .color-alexandrite-2::before { background: radial-gradient(circle at 40% 40%, rgba(204, 255, 235, 0.6) 10%, rgba(255, 255, 255, 0) 40%), conic-gradient( from 0deg, #003329 0deg 20deg, /* ディープシャドウ（暗緑色） */ #006B54 20deg 60deg, /* コア1：ピーコックグリーン（昼の顔） */ #CCFFEB 60deg 80deg, /* アイスハイライト（緑系） */ #4D0026 80deg 110deg, /* ミドルシャドウ（暗赤紫） */ #99004D 110deg 150deg, /* コア2：ラズベリーレッド（夜の顔） */ #003329 150deg 200deg, #FF99CC 200deg 240deg, /* アイスハイライト（赤紫系） */ #006B54 240deg 300deg, #99004D 300deg 330deg, #003329 330deg 360deg ); border: 1px solid rgba(153, 255, 204, 0.5); } /* 🌑 4. 漆黒の絶対領域・ブラックダイアモンド (#262626系・チャコールブラック)

*/ .color-black-diamond::before { background: /* 黒は白飛びしやすいため、ハイライトを極限まで鋭く設定 */ radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0) 30%), conic-gradient( from 0deg, #000000 0deg 20deg, /* ディープシャドウ（純黒） */ #262626 20deg 60deg, /* ブラックダイヤコア（チャコール） */ #FFFFFF 60deg 75deg, /* ソリッドハイライト（鋭利な純白） */ #0D0D0D 75deg 110deg, /* ミドルシャドウ */ #262626 110deg 150deg, #000000 150deg 200deg, #E6E6E6 200deg 230deg, /* シルバーハイライト */ #262626 230deg 300deg, #0D0D0D 300deg 330deg, #000000 330deg 360deg ); border: 1px solid rgba(128, 128, 128, 0.4); } /* 💎 5. 究極の純白・クリアーダイアモンド (無色透明の極みとプリズム)

*/ .color-clear-diamond::before { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 50%), conic-gradient( from 0deg, #99B3FF 0deg 20deg, /* ディープシャドウ（プリズムのアイスブルー） */ #FFFFFF 20deg 60deg, /* クリアダイヤコア（純白） */ #FFFFFF 60deg 80deg, /* ブリリアントハイライト（眩い白） */ #CCD9FF 80deg 110deg, /* ミドルシャドウ（淡いシルバーブルー） */ #F2F2F2 110deg 150deg, #99B3FF 150deg 200deg, #FFFFFF 200deg 240deg, #FFFFFF 240deg 300deg, #E6E6E6 300deg 330deg, #99B3FF 330deg 360deg ); border: 1px solid rgba(255, 255, 255, 1); } /* -------------------------------------------------------------------------- ✨ 3. エミッション・モジュール（アニメーションだけを決める） -------------------------------------------------------------------------- */ /* 🌟 脈動（Twinkle）: 常にチカチカする効果（※色はパライバに依存） */ .glow-twinkle.color-paraiba::before { animation: jewel-twinkle-paraiba 1.5s infinite alternate ease-in-out; } @keyframes jewel-twinkle-paraiba { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.4), 0 0 5px rgba(0, 227, 255, 0.4); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 0 16px rgba(0, 227, 255, 0.95); filter: brightness(1.25); } } /* -------------------------------------------------------------------------- ✨ 3. エミッション・モジュール（アニメーション）に追加 -------------------------------------------------------------------------- */ /* 🌟 脈動（Twinkle）: タンザナイト専用発光（ミスティックオーラ） */ .glow-twinkle.color-tanzanite::before { animation: jewel-twinkle-tanzanite 1.5s infinite alternate ease-in-out; } @keyframes jewel-twinkle-tanzanite { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.6), 0 0 5px rgba(104, 66, 255, 0.3); filter: brightness(0.9); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 0 16px rgba(104, 66, 255, 0.95); /* ビビッドな紫オーラ最大化 */ filter: brightness(1.3); } } /* 🌟 脈動（Twinkle）: 新生タンザナイト2専用発光（ミスティック・ブルーオーラ） */ .glow-twinkle.color-tanzanite-2::before { animation: jewel-twinkle-tanzanite-2 1.5s infinite alternate ease-in-out; } @keyframes jewel-twinkle-tanzanite-2 { 0% { /* 収縮時：淡い明紫（ライトパープル）の静かなオーラ */ box-shadow: inset -2px -2px 5px rgba(0,0,0,0.4), 0 0 5px rgba(92, 78, 179, 0.4); filter: brightness(0.95); } 100% { /* 膨張時：明紫のベースオーラを突き破り、鮮烈なシアン・アイスブルーの閃光が吹き出す */ box-shadow: inset -2px -2px 5px rgba(0,0,0,0.1), 0 0 12px rgba(120, 192, 255, 0.9), /* 鋭く光る青の閃光（シアン） */ 0 0 22px rgba(92, 78, 179, 0.8); /* ふんわり広がる明紫のオーラ */ filter: brightness(1.35); } } /* ========================================================================== ✨ 3. エミッション・モジュール（アニメーション）に追加 ========================================================================== */ /* 👑 インペリアルトパーズの脈動（重厚な黄金のオーラ） */ .glow-twinkle.color-imperial-topaz::before { animation: jewel-twinkle-imperial 1.5s infinite alternate ease-in-out; } @keyframes jewel-twinkle-imperial { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.5), 0 0 5px rgba(255, 160, 0, 0.4); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 0 16px rgba(255, 143, 0, 0.9); filter: brightness(1.2); } } /* ☀️ サニー・シトリンの脈動（弾ける太陽のオーラ） */ .glow-twinkle.color-sunny-citrine::before { animation: jewel-twinkle-citrine 1.5s infinite alternate ease-in-out; } @keyframes jewel-twinkle-citrine { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.4), 0 0 5px rgba(255, 202, 40, 0.4); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 0 16px rgba(255, 193, 7, 0.9); filter: brightness(1.25); } } /* ⚡ カナリー・イエローダイヤの脈動（鋭い稲妻のオーラ） */ .glow-twinkle.color-canary-diamond::before { /* ダイヤ特有のパチパチ感を出すため、少しだけテンポを早く（1.2s）設定！ */ animation: jewel-twinkle-canary 1.2s infinite alternate ease-in-out; } @keyframes jewel-twinkle-canary { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.3), 0 0 5px rgba(255, 234, 0, 0.5); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.1), 0 0 18px rgba(255, 234, 0, 1); filter: brightness(1.3); } } /* ========================================================================== ✨ 3. エミッション・モジュール（アニメーション）に追加 ========================================================================== */ /* 💎 ピンクダイヤの脈動（イエローダイヤ同様、鋭く少し早い1.2s） */ .glow-twinkle.color-pink-diamond::before { animation: jewel-twinkle-pink-diamond 1.2s infinite alternate ease-in-out; } @keyframes jewel-twinkle-pink-diamond { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.3), 0 0 5px rgba(255, 102, 178, 0.5); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.1), 0 0 16px rgba(255, 102, 178, 1); filter: brightness(1.25); } } /* 🍑 モルガナイトの脈動（優しくふんわりしたオーラ） */ .glow-twinkle.color-morganite::before { animation: jewel-twinkle-morganite 1.5s infinite alternate ease-in-out; } @keyframes jewel-twinkle-morganite { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.4), 0 0 5px rgba(255, 163, 153, 0.4); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 0 15px rgba(255, 163, 153, 0.9); filter: brightness(1.2); } } /* 🌺 ピンクトルマリンの脈動（妖艶で深く重いオーラ） */ .glow-twinkle.color-pink-tourmaline::before { animation: jewel-twinkle-pink-tourmaline 1.5s infinite alternate ease-in-out; } @keyframes jewel-twinkle-pink-tourmaline { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.5), 0 0 5px rgba(230, 46, 138, 0.4); filter: brightness(0.9); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 0 16px rgba(230, 46, 138, 0.95); filter: brightness(1.25); } } /* ========================================================================== ✨ 3. エミッション・モジュール（アニメーション）に追加 ========================================================================== */ /* 🪸 赤珊瑚の脈動（優しく温かい命のオーラ） */ .glow-twinkle.color-red-coral::before { animation: jewel-twinkle-coral 1.8s infinite alternate ease-in-out; /* 少しゆったりと呼吸するように */ } @keyframes jewel-twinkle-coral { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.4), 0 0 5px rgba(255, 79, 51, 0.3); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.1), 0 0 14px rgba(255, 79, 51, 0.8); filter: brightness(1.15); } } /* 🍷 ガーネットの脈動（深く静かなアンティークオーラ） */ .glow-twinkle.color-garnet::before { animation: jewel-twinkle-garnet 2.0s infinite alternate ease-in-out; /* さらに重厚にゆったりと */ } @keyframes jewel-twinkle-garnet { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.6), 0 0 4px rgba(128, 0, 32, 0.4); filter: brightness(0.9); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 0 12px rgba(179, 0, 45, 0.8); filter: brightness(1.2); } } /* 👑 ルビーの脈動（燃え盛る情熱のネオンオーラ） */ .glow-twinkle.color-ruby::before { animation: jewel-twinkle-ruby 1.2s infinite alternate ease-in-out; /* ダイヤに負けない激しい瞬き */ } @keyframes jewel-twinkle-ruby { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.4), 0 0 6px rgba(255, 0, 63, 0.5); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.1), 0 0 18px rgba(255, 0, 63, 1); filter: brightness(1.3); } } /* ========================================================================== ✨ 3. エミッション・モジュール（アニメーション）に追加 ========================================================================== */ /* 🍵 翡翠の脈動（神秘的でゆったりとしたオーラ） */ .glow-twinkle.color-jade::before { animation: jewel-twinkle-jade 2.2s infinite alternate ease-in-out; /* 珊瑚よりもさらにゆったり */ } @keyframes jewel-twinkle-jade { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.5), 0 0 4px rgba(0, 163, 108, 0.3); filter: brightness(0.9); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.1), 0 0 12px rgba(0, 163, 108, 0.75); filter: brightness(1.15); } } /* 👑 エメラルドの脈動（王の高貴で鋭いオーラ） */ .glow-twinkle.color-emerald::before { animation: jewel-twinkle-emerald 1.4s infinite alternate ease-in-out; } @keyframes jewel-twinkle-emerald { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.4), 0 0 6px rgba(0, 152, 70, 0.4); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 0 16px rgba(0, 152, 70, 0.95); filter: brightness(1.25); } } /* ☀️ ペリドットの脈動（明るく快活なオリーブグリーンの瞬き） */ .glow-twinkle.color-peridot::before { animation: jewel-twinkle-peridot 1.3s infinite alternate ease-in-out; /* ポップに少し早め */ } @keyframes jewel-twinkle-peridot { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.3), 0 0 5px rgba(154, 205, 50, 0.5); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.1), 0 0 16px rgba(154, 205, 50, 1); filter: brightness(1.25); } } /* ========================================================================== ✨ 3. エミッション・モジュール（アニメーション）に追加 ========================================================================== */ /* 🔮 アメジストの脈動（高貴で神秘的なクリアオーラ） */ .glow-twinkle.color-amethyst::before { animation: jewel-twinkle-amethyst 1.6s infinite alternate ease-in-out; } @keyframes jewel-twinkle-amethyst { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.5), 0 0 5px rgba(153, 51, 204, 0.4); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 0 15px rgba(153, 51, 204, 0.9); filter: brightness(1.2); } } /* 🧭 アイオライトの脈動（深海と夜空の静かな瞬き） */ .glow-twinkle.color-iolite::before { animation: jewel-twinkle-iolite 1.7s infinite alternate ease-in-out; } @keyframes jewel-twinkle-iolite { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.6), 0 0 4px rgba(92, 92, 138, 0.3); filter: brightness(0.9); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 0 12px rgba(133, 133, 173, 0.8); filter: brightness(1.15); } } /* ========================================================================== ✨ 3. エミッション・モジュール（アニメーション）の修正 ========================================================================== */ /* 🎭 アレキサンドライトの脈動（ブルーグレーから緑のオーラへの揺らめき） */ .glow-twinkle.color-alexandrite::before { animation: jewel-twinkle-alexandrite 1.5s infinite alternate ease-in-out; } @keyframes jewel-twinkle-alexandrite { 0% { /* 待機時は静かなブルーグレーのオーラ */ box-shadow: inset -2px -2px 5px rgba(0,0,0,0.4), 0 0 4px rgba(141, 158, 174, 0.4); filter: brightness(0.95); } 100% { /* 発光時にアクセントのグリーンオーラがふわっと浮き出るイリュージョン！ */ box-shadow: inset -2px -2px 5px rgba(0,0,0,0.1), 0 0 14px rgba(112, 153, 139, 0.85); filter: brightness(1.25); } } /* 🎭 アレキサンドライトの脈動（緑から赤紫への妖艶な揺らめき） */ .glow-twinkle-2.color-alexandrite-2::before { animation: jewel-twinkle-alexandrite 1.5s infinite alternate ease-in-out; } @keyframes jewel-twinkle-alexandrite { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.5), 0 0 5px rgba(0, 107, 84, 0.4); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 0 16px rgba(153, 0, 77, 0.9); filter: brightness(1.25); } /* 光る時は赤紫のオーラを放つ！ */ } /* 🌑 ブラックダイアモンドの脈動（漆黒のカリスマと鋭利な光） */ .glow-twinkle.color-black-diamond::before { animation: jewel-twinkle-black-diamond 1.2s infinite alternate ease-in-out; } @keyframes jewel-twinkle-black-diamond { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.8), 0 0 3px rgba(255, 255, 255, 0.2); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.4), 0 0 14px rgba(255, 255, 255, 0.7); filter: brightness(1.3); } /* 黒い石から白いオーラが鋭く放たれる */ } /* 💎 クリアーダイアモンドの脈動（宝石の王、まばゆい絶対発光） */ .glow-twinkle.color-clear-diamond::before { animation: jewel-twinkle-clear-diamond 1.1s infinite alternate ease-in-out; /* 最速のパチパチ感 */ } @keyframes jewel-twinkle-clear-diamond { 0% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 0 8px rgba(255, 255, 255, 0.6); filter: brightness(0.95); } 100% { box-shadow: inset -2px -2px 5px rgba(0,0,0,0.05), 0 0 20px rgba(255, 255, 255, 1); filter: brightness(1.4); } /* 画面上で最も強く眩しく輝く！ */ } /* 💫 閃光（Sweep）: 定期的に走る光の帯（※白光なので全宝石で共通で使える！） */ .shine-sweep::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); animation: sweep-shine 6s infinite; } .shine-sweep:hover::after { animation: sweep-shine-hover 0.8s ease-out; } @keyframes sweep-shine { 0% { left: -100%; } 15% { left: 200%; } 100% { left: 200%; } } @keyframes sweep-shine-hover { 0% { left: -100%; } 100% { left: 200%; } } /* -------------------------------------------------------------------------- 🛡️ 1. Cocoonスキン干渉打破 ＆ 見出しベース要塞化 Taskつー ブリリアントカットをモジュール化してみる ここまで -------------------------------------------------------------------------- */