@charset "UTF-8"; /* ========================================================= SECONDNINE common.css (FINAL) - header (fixed) + hamburger - home header transparent -> scrolled black - layout padding (.page) - footer common - utilities - badge dot (NEWS) ========================================================= */ /* ===== base ===== */ :root{ --maxw: 1100px; --pad: 92vw; --header-h: 56px; --border: rgba(255,255,255,0.12); } *{ box-sizing: border-box; } body{ margin:0; background:#000; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue", "Hiragino Kaku Gothic ProN","Hiragino Sans", "Noto Sans JP",Arial,sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } a{ color:inherit; text-decoration:none; } /* ========================================================= HEADER (COMMON) ========================================================= */ .header{ position: fixed; top:0; left:0; width:100%; z-index:50; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .header__inner{ width: min(var(--maxw), var(--pad)); margin: 0 auto; height: var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:14px; } .header__brand{ display:flex; align-items:center; flex-shrink:0; } .header__brand img{ height:22px; display:block; } /* ===== PC nav ===== */ .header__nav{ display:flex; gap:18px; align-items:center; } .header__nav a{ font-size:13px; letter-spacing:0.10em; opacity:0.85; white-space:nowrap; } .header__nav a:hover{ opacity:1; } /* ========================================================= HAMBURGER + DRAWER ========================================================= */ .hamburger{ display:none; width:40px; height:40px; border:1px solid rgba(255,255,255,0.18); background:transparent; border-radius:12px; align-items:center; justify-content:center; padding:0; cursor:pointer; } .hamburger span{ width:18px; height:2px; background:#fff; position:relative; display:block; transition: background .15s ease; } .hamburger span::before, .hamburger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; transition: transform .18s ease, top .18s ease, opacity .18s ease; } .hamburger span::before{ top:-6px; } .hamburger span::after{ top: 6px; } .drawer{ display:none; background: rgba(0,0,0,0.92); border-bottom: 1px solid var(--border); } .drawer__inner{ width: min(var(--maxw), var(--pad)); margin:0 auto; padding:12px 0 16px; display:flex; flex-direction:column; gap:10px; } .drawer__inner a{ font-size:13px; letter-spacing:0.10em; opacity:0.88; padding:10px 0; } .drawer__inner a:hover{ opacity:1; } @media (max-width: 640px){ .header__nav{ display:none; } .hamburger{ display:flex; } .header.is-open .drawer{ display:block; } /* X */ .header.is-open .hamburger span{ background:transparent; } .header.is-open .hamburger span::before{ top:0; transform:rotate(45deg); } .header.is-open .hamburger span::after{ top:0; transform:rotate(-45deg); } } /* ========================================================= HOME: header transparent on hero -> scrolled black - index の前提 ========================================================= */ body.is-home .header{ background: rgba(0,0,0,0.0); backdrop-filter: none; border-bottom: 1px solid rgba(255,255,255,0.0); } body.is-home .header.is-scrolled{ background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } /* ========================================================= LAYOUT OFFSET for fixed header -

を使う ========================================================= */ .page{ padding-top: calc(var(--header-h) + 40px); } /* ========================================================= FOOTER (COMMON) ========================================================= */ .footer{ margin-top:64px; padding:32px 0 28px; text-align:center; color:#ccc; font-size:12px; letter-spacing:0.08em; } .footer__sns{ margin-bottom:12px; } .footer__sns a{ display:inline-block; } .footer__sns img{ width:26px; height:26px; opacity:0.75; transition: opacity .15s ease, transform .15s ease; } .footer__sns a:hover img{ opacity:1; transform: translateY(-2px); } /* ========================================================= UTILITIES ========================================================= */ .wrap{ width: min(var(--maxw), var(--pad)); margin: 0 auto; } .section{ padding:64px 0; } .section--light{ background:#fff; color:#111; } .h2{ margin:0 0 18px; font-size:22px; letter-spacing:0.12em; } .p{ margin:0; line-height:1.9; color:#333; } .link{ color:#111; } /* ========================================================= BADGE DOT (NEWS) - NEWS の赤丸用 ========================================================= */ .badge-dot{ display:inline-block; width:8px; height:8px; border-radius:999px; background:#e53935; margin-left:6px; vertical-align:middle; } /* JSで隠す */ .badge-dot.is-hidden{ display:none !important; }