/* ============================================================ ページタイプ: index — サイトTOPページ用途: 各サイトのトップページ（ヒーロー・特集・最新情報）で適用 ============================================================ */ /* ── ヒーローセクション ─────────────────────────────────────── */ .hero { padding: 60px 0 50px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: var(--hero-gradient, radial-gradient(ellipse at 30% 50%, var(--accent-fade, rgba(59,130,246,0.12)) 0%, transparent 70%)); pointer-events: none; } .hero-inner { max-width: var(--max-width, 1080px); margin: 0 auto; padding: 0 var(--container-pad, 24px); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } .hero-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); background: var(--accent-light-bg, rgba(59,130,246,0.1)); padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; } .hero-title { font-family: var(--font-heading, 'Zen Maru Gothic', 'Noto Sans JP', sans-serif); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.3; margin-bottom: 16px; color: var(--text-primary); } .hero-title em { font-style: normal; color: var(--accent); } .hero-desc { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.9; margin-bottom: 28px; max-width: 480px; } .hero-cta-group { display: flex; gap: 12px; flex-wrap: wrap; } .hero-visual { min-width: 200px; max-width: 280px; } .hero-char-comment { background: var(--surface, rgba(255,255,255,0.06)); border: 1px solid var(--border-color, rgba(255,255,255,0.1)); border-radius: 16px 16px 16px 4px; padding: 16px 20px; font-size: 0.88rem; line-height: 1.7; position: relative; } .hero-char-name { font-size: 0.68rem; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; margin-bottom: 6px; display: block; } /* ── トラストバッジ ─────────────────────────────────────────── */ .trust-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 24px 0; border-top: 1px solid var(--border-color, rgba(255,255,255,0.06)); border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06)); margin: 32px 0; } .trust-badge { text-align: center; padding: 16px 8px; } .trust-badge-num { font-size: 1.6rem; font-weight: 700; color: var(--accent); display: block; line-height: 1; margin-bottom: 4px; } .trust-badge-label { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; } /* ── 特集カードグリッド ─────────────────────────────────────── */ .feature-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin: 32px 0; } .feature-main { background: var(--surface, rgba(255,255,255,0.04)); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: var(--radius, 14px); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } .feature-main:hover { transform: translateY(-4px); box-shadow: 0 12px 40px var(--shadow-lg, rgba(0,0,0,0.25)); } .feature-main-img { width: 100%; aspect-ratio: 16/7; object-fit: cover; } .feature-main-body { padding: 24px; } .feature-main-title { font-size: 1.15rem; font-weight: 700; line-height: 1.4; margin-bottom: 10px; } .feature-side { display: flex; flex-direction: column; gap: 12px; } .feature-side-card { background: var(--surface, rgba(255,255,255,0.04)); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: var(--radius, 12px); padding: 16px; flex: 1; transition: transform 0.2s; text-decoration: none; color: var(--text-primary); display: flex; flex-direction: column; gap: 6px; } .feature-side-card:hover { transform: translateX(4px); border-color: var(--accent); color: var(--text-primary); } /* ── セクション見出し ───────────────────────────────────────── */ .section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .section-heading-line { flex: 1; height: 1px; background: var(--border-color, rgba(255,255,255,0.08)); } .section-title { font-family: var(--font-heading, 'Noto Sans JP', sans-serif); font-size: 1.1rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; } .section-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; } /* ── モバイル ───────────────────────────────────────────────── */ @media (max-width: 768px) { .hero-inner { grid-template-columns: 1fr; gap: 24px; } .hero-visual { max-width: 100%; } .trust-badges { grid-template-columns: repeat(2, 1fr); } .feature-grid { grid-template-columns: 1fr; } .feature-main-img { aspect-ratio: 16/9; } }