/* * =============================================== * Theme for Kaneko Kenta (Deep Blue Gradient) * =============================================== */ :root { /* ★★★ アクセントカラー ★★★ */ --pink-accent: #0b73ff; --pink-accent-h: 215; --pink-accent-s: 100%; --pink-accent-l: 54%; /* ★★★ 背景と線の色 ★★★ */ --bg-base: #050b18; --bg-surface-primary: rgba(8, 28, 68, 0.75); --bg-surface-secondary: rgba(11, 115, 255, 0.12); --border-primary: 1px solid hsla(var(--pink-accent-h), var(--pink-accent-s), var(--pink-accent-l), 0.3); --border-secondary: 1px solid rgba(255, 255, 255, 0.2); /* ★★★ ステージごとの背景フィルターの色 ★★★ */ --overlay-section2: rgba(5, 11, 24, 0.75); --overlay-section4: rgba(16, 40, 88, 0.75); --overlay-section5: rgba(5, 11, 24, 0.75); --overlay-section6: rgba(0, 4, 12, 0.8); --overlay-section7: hsla(var(--pink-accent-h), var(--pink-accent-s), var(--pink-accent-l), 0.3); --gradient-section3: linear-gradient(45deg, #000611, #082853, #0b73ff); } /* お客様の声の見出しを特定して色を変更 */ .store-testimonial h3 { color: var(--pink-accent); } /* 所属団体リンクの色設定 */ body[data-player-name="kaneko-kenta"] .info-table .org-link { color: #5ea8f8; text-decoration-color: #5ea8f8; } body[data-player-name="kaneko-kenta"] .info-table .org-link:hover { color: #8ec3f9; text-decoration-color: #8ec3f9; } /* * =============================================== * 【PC専用】各種デザインのテーマカラー上書き * =============================================== */ @media (min-width: 1024px) { /* --- ① 左側メニューをテーマカラー（ブルー）に変更 --- */ body[data-player-name="kaneko-kenta"] #pc-nav nav li a { background-color: var(--bg-surface-primary); transition: all 0.4s ease; } body[data-player-name="kaneko-kenta"] #pc-nav nav li a.active, body[data-player-name="kaneko-kenta"] #pc-nav nav li a:hover { background: var(--pink-accent); transform: translateX(8px) scale(1.03); box-shadow: 0 5px 20px hsla(var(--pink-accent-h), var(--pink-accent-s), var(--pink-accent-l), 0.4); } /* --- ② 右上メニューのデザイン --- */ body[data-player-name="kaneko-kenta"] .site-menu-container { position: fixed; top: 25px; right: 40px; z-index: 1001; } body[data-player-name="kaneko-kenta"] .menu-toggle-btn { position: relative; width: 50px; height: 50px; background: var(--bg-surface-primary); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; cursor: pointer; backdrop-filter: blur(8px); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } body[data-player-name="kaneko-kenta"] .menu-toggle-btn:hover { transform: scale(1.1); } body[data-player-name="kaneko-kenta"] .menu-toggle-btn span { display: block; position: absolute; left: 14px; width: 22px; height: 2px; background-color: #fff; border-radius: 2px; transition: all 0.4s ease; } body[data-player-name="kaneko-kenta"] .menu-toggle-btn span:nth-of-type(1) { top: 16px; } body[data-player-name="kaneko-kenta"] .menu-toggle-btn span:nth-of-type(2) { top: 24px; } body[data-player-name="kaneko-kenta"] .menu-toggle-btn span:nth-of-type(3) { top: 32px; } body[data-player-name="kaneko-kenta"] .site-menu-container.active .menu-toggle-btn { background: var(--pink-accent); box-shadow: 0 0 15px var(--pink-accent); } body[data-player-name="kaneko-kenta"] .site-menu-container.active .menu-toggle-btn span:nth-of-type(1) { top: 24px; transform: rotate(45deg); } body[data-player-name="kaneko-kenta"] .site-menu-container.active .menu-toggle-btn span:nth-of-type(2) { opacity: 0; } body[data-player-name="kaneko-kenta"] .site-menu-container.active .menu-toggle-btn span:nth-of-type(3) { top: 24px; transform: rotate(-45deg); } body[data-player-name="kaneko-kenta"] .site-menu-nav { position: absolute; top: 65px; right: 0; width: 220px; background: rgba(5, 11, 24, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 10px; backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; } body[data-player-name="kaneko-kenta"] .site-menu-container.active .site-menu-nav { opacity: 1; visibility: visible; transform: translateY(0); } body[data-player-name="kaneko-kenta"] .site-menu-nav a { display: block; padding: 12px 20px; color: #F0F0F0; text-decoration: none; font-weight: bold; border-radius: 6px; transition: all 0.2s ease; } body[data-player-name="kaneko-kenta"] .site-menu-nav a:hover { background-color: var(--pink-accent); color: #fff; transform: translateX(5px); } /* --- ③ 左上のプレイヤー名をテーマカラーで光らせる --- */ body[data-player-name="kaneko-kenta"] #pc-nav .brand-logo a { font-size: 2.2rem; letter-spacing: 2px; text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9), 0 0 15px var(--pink-accent), 0 0 30px var(--pink-accent); } /* --- ④ PC用キャッチコピーの位置とデザインを調整 --- */ body[data-player-name="kaneko-kenta"] .hero-catchphrase { position: fixed; top: 84%; left: 30px; transform: translateY(-50%); width: auto; max-width: 800px; text-align: left; } body[data-player-name="kaneko-kenta"] .hero-catchphrase .main-line { font-size: 2.0rem; text-shadow: 0 0 10px var(--pink-accent), 0 0 20px var(--pink-accent); } body[data-player-name="kaneko-kenta"] .hero-catchphrase .sub-line { font-size: 1.3rem; } } /* * =============================================== * 【PC専用】中央コンテンツの背景画像構図調整【最終奥義版】 * =============================================== */ @media (min-width: 1024px) { /* * ここで、各セクションの背景写真の「横の位置」をパーセンテージで調整できるよ！ * 0% -> 写真の一番左を基準に表示 * 50% -> 写真の真ん中を基準に表示（これが基本のセンター） * 100% -> 写真の一番右を基準に表示 */ body[data-player-name="kaneko-kenta"] #wrapper #section1.full-screen { background-position-x: 50%; } body[data-player-name="kaneko-kenta"] #wrapper #section2.full-screen { background-position-x: 50%; } body[data-player-name="kaneko-kenta"] #wrapper #section4.full-screen { background-position-x: 50%; } body[data-player-name="kaneko-kenta"] #wrapper #section5.full-screen { background-position-x: 30%; } body[data-player-name="kaneko-kenta"] #wrapper #section6.full-screen { background-position-x: 50%; } } /* * =============================================== * 価格表示の強調スタイル * =============================================== */ .price-accent { color: #ff74d3; font-weight: bold; font-size: 1.2em; /* 文字を少し大きく */ display: inline-block; /* 余白調整のため */ margin-top: 5px; } .price-supplement { display: block; /* 価格の下に改行して表示 */ font-size: 0.8em; color: #eee; margin-top: 3px; }