/* ============================================ Promot Works - 共通スタイル common.css ============================================ */ /* ----- Google Fonts はHTMLので読み込む ----- ------------------------------------------------- */ /* ===== CSS変数 ===== */ :root { /* カラー */ --navy: #1B2A4A; --blue: #1A6FE8; --blue-dk: #1559C4; --blue-lt: #EAF2FF; --blue-md: #BFDBFE; --teal: #0891B2; --teal-lt: #E0F7FA; --white: #FFFFFF; --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-400: #94A3B8; --gray-600: #475569; --gray-800: #1E293B; --red: #EF4444; --orange: #F59E0B; --green: #16A34A; /* サイズ・シャドウ */ --radius: 12px; --shadow: 0 2px 16px rgba(27,42,74,0.08); --shadow-lg: 0 8px 40px rgba(27,42,74,0.13); /* レイアウト */ --max-width: 1080px; --gutter: 5%; --nav-h: 64px; } /* ===== リセット ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans JP', sans-serif; color: var(--navy); background: #F4F6F9; line-height: 1.8; -webkit-font-smoothing: antialiased; } /* ===== NAV ===== */ .site-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-200); padding: 0 var(--gutter); height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; } .nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .nav-logo img { height: 28px; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: clamp(6px, 1.5vw, 28px); list-style: none; flex-wrap: nowrap; flex-shrink: 1; } .nav-links a { font-size: clamp(10px, 1.2vw, 13px); font-weight: 500; color: var(--gray-600); text-decoration: none; transition: color .2s; white-space: nowrap; } .nav-links a:hover, .nav-links a.active { color: var(--blue); } .nav-links a.active { font-weight: 700; } .nav-cta { background: var(--blue) !important; color: var(--white) !important; padding: 9px 22px; border-radius: 100px; font-weight: 700 !important; transition: background .2s !important; } .nav-cta:hover { background: var(--blue-dk) !important; } /* ===== パンくず ===== */ .breadcrumb { max-width: var(--max-width); margin: 0 auto; padding: 14px var(--gutter) 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-400); list-style: none; flex-wrap: wrap; } .breadcrumb a { color: var(--gray-400); text-decoration: none; transition: color .2s; } .breadcrumb a:hover { color: var(--blue); } .breadcrumb li + li::before { content: '›'; margin-right: 6px; } /* ===== FOOTER ===== */ .site-footer { background: #0A1628; padding: 40px var(--gutter) 28px; } .footer-inner { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-logo { font-size: 15px; font-weight: 900; color: var(--white); line-height: 1.3; } .footer-logo span { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.32); display: block; margin-top: 4px; } .footer-links { display: flex; gap: 20px; list-style: none; flex-wrap: wrap; } .footer-links a { font-size: 12px; color: rgba(255,255,255,0.42); text-decoration: none; transition: color .2s; } .footer-links a:hover { color: rgba(255,255,255,0.85); } .footer-copy { max-width: var(--max-width); margin: 20px auto 0; font-size: 11px; text-align: center; color: rgba(255,255,255,0.28); } /* ===== 共通ボタン ===== */ .btn-primary { display: inline-block; background: var(--blue); color: var(--white); padding: 13px 28px; border-radius: 100px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s, transform .2s; white-space: nowrap; } .btn-primary:hover { background: var(--blue-dk); transform: translateY(-2px); } .btn-ghost-w { display: inline-block; color: rgba(255,255,255,0.7); padding: 13px 22px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,0.22); border-radius: 100px; transition: color .2s, border-color .2s; white-space: nowrap; } .btn-ghost-w:hover { color: var(--white); border-color: rgba(255,255,255,0.55); } .btn-ghost { display: inline-block; color: var(--blue); padding: 11px 22px; font-size: 13px; font-weight: 700; text-decoration: none; border: 1.5px solid var(--blue); border-radius: 100px; transition: all .2s; } .btn-ghost:hover { background: var(--blue-lt); } /* ===== 共通セクション CTA ===== */ .section-cta { background: linear-gradient(135deg, #0F1E38 0%, #1B2A4A 100%); padding: 64px var(--gutter); text-align: center; } .section-cta h2 { font-size: clamp(19px, 2.8vw, 30px); font-weight: 900; color: var(--white); margin-bottom: 12px; letter-spacing: -0.02em; line-height: 1.35; } .section-cta p { font-size: 14px; color: rgba(255,255,255,0.58); margin-bottom: 32px; line-height: 1.85; } .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ===== レスポンシブ ===== */ @media (max-width: 1024px) { :root { --gutter: 4%; } } @media (max-width: 640px) { :root { --gutter: 4%; } } /* ===== ハンバーガーメニュー ===== */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; } .nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: all .3s; transform-origin: center; } /* ドロワー */ .nav-drawer { position: fixed; top: 0; right: -280px; width: 280px; height: 100vh; background: #fff; box-shadow: -4px 0 24px rgba(27,42,74,0.15); z-index: 200; transition: right .3s ease; padding: calc(var(--nav-h) + 24px) 0 40px; overflow-y: auto; } .nav-drawer.is-open { right: 0; } .nav-drawer ul { list-style: none; } .nav-drawer ul li { border-bottom: 1px solid var(--gray-100); } .nav-drawer ul li a { display: block; padding: 16px 28px; font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: background .2s; } .nav-drawer ul li a:hover { background: var(--blue-lt); color: var(--blue); } .nav-cta-drawer { display: block; margin: 24px 28px 0; background: var(--blue); color: #fff !important; text-align: center; padding: 14px !important; border-radius: 100px; font-weight: 700 !important; } /* オーバーレイ */ .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 199; } .nav-overlay.is-open { display: block; } /* ハンバーガー open状態 */ .nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.is-open span:nth-child(2) { opacity: 0; } .nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* 859px以下：ハンバーガー */ @media (max-width: 859px) { .nav-links { display: none; } .nav-hamburger { display: flex; } } /* ===== パンくずバー（ヒーロー下） ===== */ .breadcrumb-bar { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); padding: 10px var(--gutter); } .breadcrumb-bar-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-400); flex-wrap: wrap; } .breadcrumb-bar-inner a { color: var(--gray-500); text-decoration: none; transition: color .2s; } .breadcrumb-bar-inner a:hover { color: var(--blue); } .bc-sep { color: var(--gray-300); } /* ===== 一覧へ戻るボタン ===== */ .back-to-list { text-align: center; margin: 0 0 16px; } .btn-back { display: inline-block; font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; border: 1.5px solid var(--blue); padding: 10px 24px; border-radius: 100px; transition: all .2s; } .btn-back:hover { background: var(--blue); color: #fff; }