/* ============================================================ とりあえず占い。共通スタイル toriaezu-uranai.com / common.css ============================================================ */ /* Google Fonts は各HTMLので読み込む @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Noto+Serif+JP:wght@300;400;500&display=swap'); */ /* ── CSS変数 ───────────────────────────── */ :root { --deep: #0a0612; --deep2: #110d1f; --gold: #c9a84c; --gold-l: #f0d080; --silver: #b8c5d6; --glow: rgba(201,168,76,0.3); --purple: rgba(45,27,105,0.3); --border: rgba(201,168,76,0.15); --border-h: rgba(201,168,76,0.4); --radius: 12px; --nav-h: 58px; } /* ── リセット ───────────────────────────── */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { background: var(--deep); color: var(--silver); font-family: 'Noto Serif JP', serif; min-height: 100vh; line-height: 1.7; } a { text-decoration:none; color:inherit; } img { max-width:100%; height:auto; display:block; } /* ── 背景グラデーション ─────────────────── */ body::before { content:''; position:fixed; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient(ellipse at 20% 20%, rgba(45,27,105,0.3) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(10,30,80,0.2) 0%, transparent 50%); pointer-events:none; z-index:0; } /* ── ナビゲーション ─────────────────────── */ nav { position:fixed; /* ドロップダウンメニューの基準 */ top:0; left:0; right:0; z-index:100; background: rgba(10,6,18,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 12px 24px; display:flex; align-items:center; justify-content:space-between; height: var(--nav-h); } .nav-logo { font-family: 'Cinzel Decorative', serif; font-size: 0.8rem; color: var(--gold-l); } .nav-links a { font-size: 0.75rem; color: var(--silver); opacity: 0.7; margin-left: 18px; transition: opacity 0.3s, color 0.3s; } .nav-links a:hover, .nav-links a.active { opacity:1; color:var(--gold); } /* ── コンテナ ───────────────────────────── */ .container { position:relative; z-index:1; max-width: 860px; margin: 0 auto; padding: 90px 24px 80px; } .container-wide { position:relative; z-index:1; max-width: 1080px; margin: 0 auto; padding: 90px 24px 80px; } /* ── ページヘッダー ─────────────────────── */ .page-header { text-align:center; padding: 40px 0 50px; } .page-header h1 { font-family: 'Cinzel Decorative', serif; font-size: 1.4rem; color: var(--gold-l); margin-bottom: 10px; } .page-header p { font-size:0.85rem; opacity:0.65; } /* ── セクションタイトル ─────────────────── */ .section-title { font-family: 'Cinzel Decorative', serif; font-size: 0.82rem; color: var(--gold); letter-spacing: 0.2em; margin: 40px 0 18px; display:flex; align-items:center; gap:14px; } .section-title::before, .section-title::after { content:''; flex:1; height:1px; background: linear-gradient(90deg, transparent, rgba(201,168,76,0.25), transparent); } /* ── カード共通 ─────────────────────────── */ .card { background: rgba(17,13,31,0.8); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.3s, background 0.3s, transform 0.3s; } .card:hover { border-color: var(--border-h); background: rgba(45,27,105,0.3); } /* ── ボタン ─────────────────────────────── */ .btn { display: inline-flex; align-items:center; justify-content:center; gap:8px; background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.05)); border: 1px solid var(--gold); color: var(--gold-l); padding: 12px 28px; border-radius: 30px; font-family: 'Noto Serif JP', serif; font-size: 0.9rem; cursor:pointer; transition: all 0.3s; text-decoration:none; } .btn:hover { background: linear-gradient(135deg, rgba(201,168,76,0.3), rgba(201,168,76,0.1)); box-shadow: 0 0 20px var(--glow); transform: translateY(-2px); } .btn-sm { padding:8px 18px; font-size:0.8rem; } /* ── 広告エリア共通 ─────────────────────── */ .ad-area { text-align:center; margin: 32px 0; padding: 8px 0; min-height: 100px; position:relative; } .ad-area::before { content: 'スポンサー'; position:absolute; top:-8px; left:50%; transform:translateX(-50%); font-size:0.6rem; color:var(--silver); opacity:0.4; background:var(--deep); padding:0 8px; } /* レスポンシブ広告ユニットのデフォルト */ .ad-area ins { display:block; } /* ── フッター ───────────────────────────── */ footer { position:relative; z-index:1; text-align:center; padding: 30px 24px; font-size: 0.75rem; opacity: 0.45; border-top: 1px solid rgba(201,168,76,0.1); } footer a { color:var(--silver); margin:0 10px; } footer a:hover { color:var(--gold); opacity:1; } /* ── ユーティリティ ─────────────────────── */ .text-gold { color:var(--gold); } .text-gold-l { color:var(--gold-l); } .text-center { text-align:center; } .mt-8 { margin-top:8px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; } .mt-40 { margin-top:40px; } .mb-8 { margin-bottom:8px; } .mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; } /* ── レスポンシブ ───────────────────────── */ @media (max-width:600px) { .page-header h1 { font-size:1.1rem; } nav { padding:10px 16px; } .container, .container-wide { padding:80px 16px 60px; } }