/* ======================================== リセットとベーススタイル ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* カラーパレット（既存サイトに合わせた色） */ --primary-color: #6366f1; --primary-hover: #4f46e5; --secondary-color: #10b981; --text-primary: #1f2937; --text-secondary: #6b7280; --background: #ffffff; --background-alt: #f9fafb; --border-color: #e5e7eb; --accent-orange: #f59e0b; --accent-blue: #3b82f6; /* スペーシング */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4rem; --spacing-3xl: 6rem; /* フォント */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif; /* ボーダー半径 */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; /* シャドウ */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } body { font-family: var(--font-sans); color: var(--text-primary); background-color: var(--background); line-height: 1.6; font-size: 16px; } /* ======================================== コンテナ ======================================== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); } /* ======================================== メインコンテンツ ======================================== */ .main-content { padding: var(--spacing-3xl) 0; min-height: 100vh; } /* プライバシーヘッダー */ .privacy-header { text-align: center; margin-bottom: var(--spacing-3xl); padding-bottom: var(--spacing-xl); border-bottom: 2px solid var(--border-color); } .privacy-header h1 { font-size: 2.5rem; color: var(--text-primary); margin-bottom: var(--spacing-sm); font-weight: 700; } .update-date { color: var(--text-secondary); font-size: 0.95rem; } /* プライバシーコンテンツ */ .privacy-content { max-width: 900px; margin: 0 auto; } .policy-section { margin-bottom: var(--spacing-3xl); background-color: var(--background); padding: var(--spacing-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); } .policy-section h2 { font-size: 1.75rem; color: var(--text-primary); margin-bottom: var(--spacing-lg); font-weight: 600; line-height: 1.3; } .policy-section h3 { font-size: 1.25rem; color: var(--text-primary); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md); font-weight: 600; } .policy-section p { margin-bottom: var(--spacing-md); line-height: 1.8; color: var(--text-secondary); } .policy-section ul { margin-left: var(--spacing-lg); margin-bottom: var(--spacing-md); } .policy-section li { margin-bottom: var(--spacing-sm); line-height: 1.8; color: var(--text-secondary); } .policy-section li strong { color: var(--text-primary); font-weight: 600; } /* サブセクション */ .subsection { margin-top: var(--spacing-xl); padding: var(--spacing-lg); background-color: var(--background-alt); border-radius: var(--radius-lg); border: 1px solid var(--border-color); } .subsection:first-child { margin-top: var(--spacing-lg); } /* 注記ボックス */ .note { background-color: #fef3c7; padding: var(--spacing-md); margin-top: var(--spacing-md); border-radius: var(--radius-md); } .note p { color: #92400e; margin: 0; font-size: 0.95rem; } /* お問い合わせセクション */ .contact-section { margin-top: var(--spacing-3xl); padding: var(--spacing-xl); background: linear-gradient(135deg, var(--primary-color), var(--accent-blue)); border-radius: var(--radius-xl); color: white; text-align: center; box-shadow: var(--shadow-lg); } .contact-section h3 { font-size: 1.5rem; margin-bottom: var(--spacing-md); font-weight: 600; } .contact-section p { color: rgba(255, 255, 255, 0.95); font-size: 1.05rem; margin: 0; } /* ======================================== レスポンシブデザイン ======================================== */ /* タブレット (768px以下) */ @media (max-width: 768px) { .privacy-header h1 { font-size: 2rem; } .policy-section { padding: var(--spacing-lg); } .policy-section h2 { font-size: 1.5rem; } .main-content { padding: var(--spacing-xl) 0; } } /* モバイル (480px以下) */ @media (max-width: 480px) { :root { --spacing-xl: 2rem; --spacing-2xl: 2.5rem; --spacing-3xl: 3rem; } .container { padding: 0 var(--spacing-sm); } .privacy-header h1 { font-size: 1.75rem; } .policy-section { padding: var(--spacing-md); border-radius: var(--radius-lg); } .policy-section h2 { font-size: 1.35rem; } .policy-section h3 { font-size: 1.1rem; } .subsection { padding: var(--spacing-md); } .policy-section ul { margin-left: var(--spacing-md); } .contact-section { padding: var(--spacing-lg); } .contact-section h3 { font-size: 1.25rem; } } /* 大画面 (1200px以上) */ @media (min-width: 1200px) { .privacy-header h1 { font-size: 3rem; } .policy-section h2 { font-size: 2rem; } } /* ======================================== アニメーション ======================================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .policy-section { animation: fadeIn 0.6s ease-out; } .policy-section:nth-child(1) { animation-delay: 0.1s; } .policy-section:nth-child(2) { animation-delay: 0.2s; } .policy-section:nth-child(3) { animation-delay: 0.3s; } .policy-section:nth-child(4) { animation-delay: 0.4s; } .policy-section:nth-child(5) { animation-delay: 0.5s; } .policy-section:nth-child(6) { animation-delay: 0.6s; } /* ======================================== 印刷スタイル ======================================== */ @media print { .policy-section { box-shadow: none; border: 1px solid var(--border-color); page-break-inside: avoid; } body { font-size: 12pt; } }