/* ============================================ Legal Pages - Refined Corporate Elegance アメリア・テクノロジー株式会社 ============================================ */ /* CSS Variables - Design Tokens */ /* Note: Google Fontsは各HTMLファイルの内で読み込み（パフォーマンス最適化） */ :root { /* Typography */ --font-display: 'Cormorant Garamond', 'Noto Serif JP', serif; --font-body: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif; /* Colors - Refined Navy & Warm Neutrals */ --color-ink: #1a1a2e; --color-ink-light: #3d3d5c; --color-ink-muted: #6b6b8a; --color-accent: #2d4a6f; --color-accent-light: #4a6d94; --color-surface: #ffffff; --color-surface-elevated: #fafbfc; --color-surface-table-alt-th: #f5f7fa; --color-surface-table-alt-td: #fcfcfd; --color-border: #e8eaed; --color-border-subtle: #f0f2f5; /* Gradients */ --gradient-bg: linear-gradient(165deg, #f8f9fb 0%, #f0f2f7 50%, #e8ecf3 100%); --gradient-header: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%); /* Shadows */ --shadow-sm: 0 1px 3px rgba(26, 26, 46, 0.04); --shadow-md: 0 4px 20px rgba(26, 26, 46, 0.06); --shadow-lg: 0 8px 40px rgba(26, 26, 46, 0.08); /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Transitions */ --transition-fast: 0.15s ease; --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Reset & Base */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 400; line-height: 1.9; color: var(--color-ink); background: var(--gradient-bg); min-height: 100vh; } /* Container - Card Style */ .container { max-width: 820px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); background-color: var(--color-surface); min-height: 100vh; box-shadow: var(--shadow-lg); position: relative; } @media (min-width: 900px) { .container { margin: var(--space-lg) auto; min-height: calc(100vh - var(--space-xl) * 2); border-radius: var(--radius-lg); } } /* Header */ header { margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); position: relative; } header::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 3px; background: var(--gradient-header); border-radius: 2px; } /* Typography */ h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--color-ink); letter-spacing: 0.02em; margin-top: var(--space-md); } h2 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; color: var(--color-ink); margin-top: var(--space-xl); margin-bottom: var(--space-sm); padding-left: var(--space-sm); border-left: 3px solid var(--color-accent); line-height: 1.5; } h3 { font-size: 1rem; font-weight: 500; color: var(--color-ink-light); margin-top: var(--space-md); margin-bottom: var(--space-xs); } p { margin-bottom: var(--space-sm); color: var(--color-ink-light); } /* Links */ a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent-light); } main a { border-bottom: 1px solid transparent; } main a:hover { border-bottom-color: var(--color-accent-light); } /* Lists */ ul, ol { margin-bottom: var(--space-sm); padding-left: var(--space-md); color: var(--color-ink-light); } li { margin-bottom: var(--space-xs); padding-left: var(--space-xs); } li::marker { color: var(--color-accent); } /* Nested Lists */ li ul, li ol { margin-top: var(--space-xs); margin-bottom: 0; } /* Table - Modern Card Style */ table { width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--space-lg) 0; background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); } th, td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--color-border-subtle); } tr:last-child th, tr:last-child td { border-bottom: none; } th { background-color: var(--color-surface-elevated); font-weight: 500; color: var(--color-ink); width: 28%; vertical-align: top; } td { color: var(--color-ink-light); background-color: var(--color-surface); } td small { display: block; margin-top: var(--space-xs); color: var(--color-ink-muted); font-size: 0.8125rem; } /* Alternating Row Background */ tr:nth-child(even) th { background-color: var(--color-surface-table-alt-th); } tr:nth-child(even) td { background-color: var(--color-surface-table-alt-td); } /* Footer */ footer { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); text-align: center; } footer p { color: var(--color-ink-muted); font-size: 0.8125rem; font-weight: 300; letter-spacing: 0.02em; } footer nav { margin-top: var(--space-sm); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-xs); } footer a { color: var(--color-ink-muted); font-size: 0.8125rem; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); transition: all var(--transition-smooth); } footer a:hover { color: var(--color-accent); background-color: var(--color-surface-elevated); } /* Update Date Badge */ .update-date { display: inline-block; color: var(--color-ink-muted); font-size: 0.8125rem; font-weight: 400; margin-top: var(--space-xs); padding: var(--space-xs) 0; letter-spacing: 0.01em; } /* Company Name Subtitle (for index page) */ header p.update-date { font-family: var(--font-body); font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; } /* Index Page - Link List */ main > ul { list-style: none; padding-left: 0; margin-top: var(--space-md); } main > ul > li { padding: 0; margin-bottom: 0; } main > ul > li > a { display: block; padding: var(--space-sm) var(--space-md); margin: var(--space-xs) 0; background-color: var(--color-surface-elevated); border-radius: var(--radius-md); border: 1px solid var(--color-border); transition: all var(--transition-smooth); color: var(--color-ink); font-weight: 400; } main > ul > li > a:hover { background-color: var(--color-surface); border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-1px); } main > ul > li > a::after { content: ' \2192'; color: var(--color-accent); opacity: 0; transition: opacity var(--transition-fast); } main > ul > li > a:hover::after { opacity: 1; } /* Responsive Design */ @media (max-width: 600px) { :root { --space-lg: 2rem; --space-xl: 2.5rem; } .container { padding: var(--space-lg) var(--space-sm); border-radius: 0; margin: 0; box-shadow: none; } h1 { font-size: 1.625rem; } h2 { font-size: 1rem; margin-top: var(--space-lg); } /* Table - Stack on Mobile */ table, thead, tbody, th, td, tr { display: block; } table { border: none; box-shadow: none; } tr { margin-bottom: var(--space-sm); background: var(--color-surface); border-radius: var(--radius-md); border: 1px solid var(--color-border); overflow: hidden; box-shadow: var(--shadow-sm); } th { width: 100%; border-bottom: 1px solid var(--color-border-subtle); font-size: 0.8125rem; padding: var(--space-xs) var(--space-sm); } td { width: 100%; padding: var(--space-sm); font-size: 0.875rem; } tr:nth-child(even) th, tr:nth-child(even) td { background-color: inherit; } footer nav { flex-direction: column; gap: var(--space-xs); } footer a { display: block; width: 100%; text-align: center; } } /* Print Styles */ @media print { body { background: white; } .container { box-shadow: none; padding: 2cm; } header::before { display: none; } a { color: var(--color-ink); } footer nav { display: none; } } /* Selection */ ::selection { background-color: var(--color-accent); color: white; } /* ============================================ Page Load Animation（共通） ============================================ */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeSlideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; opacity: 0; } /* ============================================ Accessibility ============================================ */ /* スクリーンリーダー専用（視覚的に非表示） */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ============================================ Contact Info Block（privacy.html用） ============================================ */ .contact-info { background-color: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); margin-top: var(--space-sm); } .contact-info p { margin-bottom: 0; line-height: 1.8; } .contact-info a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transition-fast); } .contact-info a:hover { border-bottom-color: var(--color-accent-light); } /* ============================================ Nested List Styling（terms.html用） ============================================ */ ol > li > ul { margin-top: var(--space-xs); list-style-type: disc; } ol > li > ul > li { margin-bottom: 0.25rem; }