/* ============================================================= ZUNDAMOCH SITE THEME — 下層ページ統一オーバーライド層 2026-08-01: トップLP（index.html）の「スプラトゥーン風ゴージャス」 トーンを下層ページへ展開する。各ページのインラインCSSの後に 読み込まれる前提（末尾で link）。文言・構造は変更しない。 index.html はこのファイルを読み込まない。 ============================================================= */ /* ---------- 1. デザイントークン（LPと同一） ---------- */ :root { --zunda-green: #2AC48A; --zunda-green-light: #3DDC84; --zunda-yellow: #E8D44D; --ink-pink: #E8327C; --ink-orange: #F08030; --ink-cyan: #30C8C8; --ink-purple: #8840C0; --anko-color: #8B3A62; --bg: #FFFFFF; --bg-off: #F8F8FA; --text: #222222; --text-sub: #555555; --font: 'Zen Kaku Gothic New', sans-serif; --font-pixel: 'DotGothic16', sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); --bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ダークセクション（LPのRESULT/PLANSと同じ地色） */ --dark-navy: #0F1B2D; --dark-plum: #141026; } ::selection { background: var(--ink-pink); color: #fff; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-off); } ::-webkit-scrollbar-thumb { background: var(--zunda-green); border-radius: 3px; } /* ---------- 2. ヘッダー／ナビ：LPのインクグラデ帯に統一 ---------- */ body > header { background: linear-gradient(90deg, var(--zunda-green) 0%, rgba(42,196,138,0.85) 20%, rgba(232,50,124,0.85) 50%, rgba(136,64,192,0.9) 80%, var(--ink-purple) 100%); border-bottom: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 30px rgba(0,0,0,0.18); } /* ナビのシマー（LPと同じ質感） */ body > header { position: sticky; overflow: hidden; } body > header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 55%, transparent 60%); background-size: 200% 100%; animation: zmNavShimmer 8s ease-in-out infinite; pointer-events: none; } @keyframes zmNavShimmer { 0%, 100% { background-position: 200% 0; } 50% { background-position: -200% 0; } } body > header .header-content, body > header .header-inner { position: relative; z-index: 1; } body > header .logo { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.25); } body > header .logo:hover { opacity: 1; } body > header .logo img { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2)) brightness(1.1); transition: transform 0.3s var(--bounce); } body > header .logo:hover img { transform: scale(1.08) rotate(-3deg); } body > header nav a { color: rgba(255,255,255,0.92); border-bottom: none; border-radius: 8px; padding: 0.4rem 0.85rem; text-shadow: 0 1px 2px rgba(0,0,0,0.15); letter-spacing: 0.02em; transition: all 0.3s ease; } body > header nav a:hover, body > header nav a.active { color: #fff; border-bottom: none; border-bottom-color: transparent; background: rgba(255,255,255,0.18); text-shadow: 0 1px 4px rgba(0,0,0,0.2); } body > header nav a.active { background: rgba(255,255,255,0.24); } /* 「コーチング」＝LPのnav-ctaと同じ白ピル */ body > header nav a[href$="#apply"] { background: rgba(255,255,255,0.95); color: var(--ink-purple); border-radius: 50px; font-weight: 700; box-shadow: 0 2px 12px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.3) inset; text-shadow: none; animation: zmNavCtaPulse 3s ease-in-out infinite; } body > header nav a[href$="#apply"]:hover { background: #fff; color: var(--ink-purple); transform: scale(1.05) translateY(-1px); } @keyframes zmNavCtaPulse { 0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.3) inset; } 50% { box-shadow: 0 2px 20px rgba(255,255,255,0.5), 0 0 0 1px rgba(255,255,255,0.3) inset; } } /* articles/index.html のモバイル全画面メニュー：ダーク×ネオンに */ @media (max-width: 768px) { body > header nav.on { background: radial-gradient(600px 400px at 80% 0%, rgba(136,64,192,0.35), transparent 65%), radial-gradient(500px 380px at 10% 100%, rgba(42,196,138,0.28), transparent 65%), var(--dark-plum); } body > header nav.on a { color: rgba(255,255,255,0.92); } body > header nav.on a:hover { background: rgba(255,255,255,0.12); color: #fff; } body > header nav.on a.active { background: rgba(255,255,255,0.18); } body > header nav.on a[href$="#apply"] { background: rgba(255,255,255,0.95); color: var(--ink-purple); } body > header nav.on .mobile-menu-close { color: #fff; background: rgba(255,255,255,0.12); } } /* ---------- 3. ヒーローのバッジ：ステッカー風（LPと同じ） ---------- */ .hero-badges .hero-badge { border: 2px solid rgba(255,255,255,0.4); box-shadow: 0 3px 0 rgba(0,0,0,0.15), 0 8px 22px rgba(0,0,0,0.28); rotate: -1.5deg; } .hero-badges .hero-badge:nth-child(2) { rotate: 1.2deg; } .hero-badges .hero-badge:nth-child(3) { rotate: -0.8deg; } /* ---------- 4. 見出し：インク下線アクセント ---------- */ /* 記事h2の下線を「テーマ色→透明」のインクグラデに（色はページのテーマ色を継承） */ .article-section h2 { border-bottom: 3px solid; border-image: linear-gradient(90deg, var(--theme, var(--zunda-green)) 0%, var(--theme, var(--zunda-green)) 55%, transparent 100%) 1; } /* ---------- 5. カード類：LPの厚み・角丸・ホバー浮遊に統一 ---------- */ .toc-card, .related-card, .level-card, .article-card, .practice-card, .problem-card, .skill-card, .quiz-container, .radar-container { border-radius: 18px; box-shadow: 0 12px 36px rgba(20,30,60,0.1), 0 2px 6px rgba(0,0,0,0.05); transition: box-shadow 0.5s var(--ease), translate 0.4s var(--bounce), transform 0.3s ease; } .related-card:hover, .level-card:hover, .article-card:hover, .practice-card:hover, .problem-card:hover, .skill-card:hover { transform: none; translate: 0 -6px; box-shadow: 0 18px 44px rgba(20,30,60,0.16), 0 4px 12px rgba(0,0,0,0.06); } /* ---------- 6. CTAボタン：LPのneon-ctaに統一（文言不変・見た目のみ） ---------- */ .cta-button, .coaching-button, .btn-primary, .cta-section .cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1rem 2.4rem; background: linear-gradient(135deg, var(--zunda-green), #17A06B); color: #fff; font-weight: 900; font-size: 1.05rem; border-radius: 60px; border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 0 0 4px rgba(42,196,138,0.35), 0 10px 30px rgba(42,196,138,0.5), inset 0 -3px 0 rgba(0,0,0,0.15); text-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: translate 0.35s var(--bounce), box-shadow 0.35s ease, filter 0.35s ease; } .cta-button:hover, .coaching-button:hover, .btn-primary:hover { background: linear-gradient(135deg, var(--zunda-green), #17A06B); color: #fff; transform: none; translate: 0 -4px; filter: brightness(1.08); box-shadow: 0 0 0 6px rgba(42,196,138,0.3), 0 16px 40px rgba(42,196,138,0.6), inset 0 -3px 0 rgba(0,0,0,0.15); } .btn-secondary { border-radius: 60px; border: 2px solid rgba(0,0,0,0.15); } .btn-secondary:hover { background: var(--bg-off); color: var(--ink-pink); border-color: var(--ink-pink); } @media (max-width: 640px) { .cta-button, .coaching-button, .btn-primary { font-size: 0.95rem; padding: 0.9rem 1.8rem; } } /* ---------- 7. CTAパネル：LPのPLANS（ダーク×ネオン）トーンに ---------- */ /* 記事・ハブの記事下CTA（.content内）とロードマップLvページのコーチング枠のみ。 diagnosis のボタン列 .cta-section やロードマップ目次の白背景CTAは対象外。 */ .content .cta-section, .coaching-section { background: radial-gradient(560px 300px at 82% 0%, rgba(136,64,192,0.3), transparent 65%), radial-gradient(480px 280px at 8% 100%, rgba(232,50,124,0.22), transparent 65%), radial-gradient(420px 240px at 50% 45%, rgba(42,196,138,0.12), transparent 70%), var(--dark-plum); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; box-shadow: 0 14px 40px rgba(0,0,0,0.35); } .content .cta-section h3, .coaching-section h3 { color: #fff; text-shadow: 0 0 18px rgba(61,220,132,0.4); } .content .cta-section p, .coaching-section p { color: rgba(255,255,255,0.85); } /* ---------- 8. フッター：LPダークトーン＋インクグラデ帯 ---------- */ body > footer { position: relative; background: radial-gradient(620px 300px at 85% 100%, rgba(136,64,192,0.16), transparent 65%), radial-gradient(520px 280px at 10% 0%, rgba(42,196,138,0.12), transparent 65%), var(--dark-navy) !important; border-top: none; } body > footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--zunda-green), var(--ink-pink), var(--ink-purple)); } body > footer a { transition: color 0.3s ease, opacity 0.3s ease; } body > footer a:hover { color: #fff !important; opacity: 1; } /* ---------- 9. 診断ページの微調整 ---------- */ /* ダークヘッダー上のテキストロゴを白に（.header-inner版） */ .header-inner .logo { color: #fff; } /* プログレスバーをLPのインクバー風グラデに */ .progress-fill { background: linear-gradient(90deg, var(--zunda-green), var(--zunda-green-light)); box-shadow: 0 0 12px rgba(42,196,138,0.5); }