/* Google Fonts are now loaded via in each page's instead of @import here, so the browser's preload scanner can fetch them in parallel with header.css rather than discovering them only after header.css finishes parsing. */ /* ===== CSS変数（サイト全体共通） ===== */ :root { --primary: #2fb344; --primary-dark: #239a36; --primary-light: #e8f5ec; --accent: #f59e0b; --bg: #f5f7fa; --card-bg: #ffffff; --text: #1a202c; --text-muted: #718096; --border: #e2e8f0; --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 4px 20px rgba(0,0,0,0.12); --radius: 12px; --radius-sm: 8px; } /* ===== リセット ===== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { line-height: 1.5; letter-spacing: 0.01em; } /* ===== ヘッダー ===== */ #header { min-height: 108px; } .header { background: white; color: var(--text); padding: 0 28px; height: 60px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.1); } .logo { display: block; flex-shrink: 0; width: 190px; height: 54px; text-decoration: none; overflow: hidden; border-radius: 6px; } .logo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 48%; } .header-right { display: flex; align-items: center; gap: 12px; } .lang-btn { background: #f5f7fa; color: #1a202c; border: 1.5px solid #e2e8f0; border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; letter-spacing: 0.5px; transition: background 0.15s; } .lang-btn:hover { background: #e8f5ec; border-color: #2fb344; } .signup { background: white; color: var(--primary-dark); padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: box-shadow 0.15s; } .signup:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.15); } /* ===== ナビ ===== */ .nav { display: flex; gap: 4px; padding: 0 20px; background: white; border-bottom: 1px solid var(--border); overflow-x: auto; } .nav a { text-decoration: none; color: var(--text-muted); font-size: 13px; font-weight: 500; padding: 14px 12px; position: relative; white-space: nowrap; transition: color 0.15s; } .nav a:hover { color: var(--primary); } .nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--primary); border-radius: 2px 2px 0 0; transform: scaleX(0); transition: transform 0.2s; } .nav a:hover::after, .nav a.active::after { transform: scaleX(1); } .nav a.active { color: var(--primary); font-weight: 700; } /* ===== 検索バー ===== */ .search { padding: 14px 24px; background: white; border-bottom: 1px solid var(--border); } .search-inner { max-width: 480px; position: relative; } .search-inner input { width: 100%; padding: 10px 16px 10px 40px; border-radius: 24px; border: 1.5px solid var(--border); font-size: 14px; font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; background: var(--bg); transition: border-color 0.15s, box-shadow 0.15s; } .search-inner input:focus { outline: none; border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(47,179,68,0.12); } .search-inner::before { content: "🔍"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; } /* ===== モバイル対応 ===== */ @media (max-width: 480px) { .header { padding: 0 14px; } .logo { width: 140px; height: 40px; } .nav { padding: 0 10px; } .nav a { padding: 12px 9px; font-size: 12.5px; } .search { padding: 12px 14px; } }