body { margin: 0; line-height: normal; } :root { /* Color */ --color-black: #000; --color-dimgray: #5f5f5f; --color-gray-100: #14283b; --color-gray-200: #0e1e2f; --color-khaki: #ffff74; --color-white: #fff; /* Gap */ --gap-3: 3px; --gap-4: 4px; --gap-8: 8px; --gap-10: 10px; --gap-11: 11px; --gap-15: 15px; --gap-18: 18px; --gap-20: 20px; --gap-22: 22px; --gap-24: 24px; --gap-28: 28px; /* Padding */ --padding-0: 0px; --padding-1: 1px; --padding-3: 3px; --padding-5: 5px; --padding-6: 6px; --padding-8: 8px; --padding-10: 10px; --padding-12: 12px; --padding-16: 16px; --padding-18: 18px; --padding-20: 20px; --padding-24: 24px; --padding-27: 27px; --padding-30: 30px; --padding-32: 32px; --padding-40: 40px; --padding-60: 60px; /* Font */ --font-inter: Inter; --font-noto-sans-jp: Noto Sans JP; --font-roboto-condensed: Roboto Condensed; /* FontSize */ --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-19: 19px; --fs-24: 24px; --fs-26: 26px; --fs-27: 27px; --fs-30: 30px; --fs-36: 36px; --fs-45: 45px; --fs-100: 100px; --height-40: 40px; --lh-19: 19px; --width-8: 8px; } /* ====== Global fonts ====== */ /* デフォルトは日本語フォント（全体） */ html { font-family: 'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; } /* 日本語（lang="ja"）や .jp クラスでは Noto Sans JP を優先（ベース） */ :lang(ja), *:lang(ja), .jp, .jp * { font-family: 'Noto Sans JP', sans-serif !important; } /* 英語（lang="en"）や .en クラスでは Roboto Condensed を優先（.en で上書き） */ :lang(en), *:lang(en), .en, .en * { font-family: 'Roboto Condensed', 'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif !important; } /* 見出しの太さ補助 */ h1, h2, h3 { font-weight: 700; } /* ロゴ（テキストのままでOK。画像にしたいなら に） */ .site-logo{ color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .02em; } /* ナビ（詳細は下部の最終版ヘッダーに準拠） */ /* 旧ヘッダーの暫定スタイルは削除（最終版のみ有効化） */ /* ====== Global header (final) ====== */ :root{ --header-h: 72px; --header-bg: #0E1E2F; /* 添付の濃紺 */ --header-pad-l: 28px; /* 左余白 */ --header-pad-r: 14px; /* 右余白を小さくしてやや右寄せに */ --header-max: 1760px; /* 最大幅を拡張（1920px画面時に右端へ近づける） */ } /* ブラウザ初期余白を除去 & ヘッダー分の余白（ヘッダーがあるページのみ） */ html, body { margin:0; } /* header.html のスクリプトが付与するクラス */ body.has-site-header { padding-top: var(--header-h); } /* 固定ヘッダー */ .site-header{ position: fixed; inset: 0 0 auto 0; height: var(--header-h); background: var(--header-bg); border-bottom: 1px solid rgba(255,255,255,.08); z-index: 9999; } .site-header .inner{ height:100%; margin:0 auto; padding-left: var(--header-pad-l); padding-right: var(--header-pad-r); max-width: min(96vw, var(--header-max)); display:flex; align-items:center; justify-content:space-between; gap:24px; } /* ブランドロゴ */ .site-brand{ display:inline-flex; align-items:center; text-decoration:none; } .site-logo-img{ display:block; width:223px; height:auto; } /* ナビゲーション */ .site-nav{ display:flex; align-items:center; gap:24px; } .site-nav a{ color:#E6E9EC; text-decoration:none; font-family:'Roboto Condensed','Noto Sans JP',sans-serif; font-weight:400; /* Regular */ font-size:16px; /* 既定をやや小さめに */ letter-spacing:0; /* 0% */ line-height:1; } .site-nav a:hover{ color:#FFFFFF; } /* Contact（ピル） */ .site-nav .cta{ background: var(--color-khaki); /* #FFFF74 */ color: #0E1E2F; font-weight:400; /* Regular（太字から戻す） */ padding: 5px 18px; /* 左右を少し拡大 */ min-height: 28px; border-radius: 9999px; /* ピル形状 */ display: inline-flex; align-items: center; justify-content: center; font-size:16px; /* ナビと高さ感を揃える */ } /* キーボードフォーカス可視化 */ .site-nav a:focus-visible, .site-brand:focus-visible{ outline: 2px solid #FFF35B; outline-offset: 2px; border-radius: 6px; } /* 狭幅時の最適化 */ @media (max-width: 1024px){ :root{ --header-h: 64px; } .site-logo-img{ width: 180px; } .site-nav{ gap: 20px; } .site-nav a{ font-size: 15px; } .site-nav .cta{ padding: 5px 16px; min-height: 28px; font-size:15px; } } @media (max-width: 640px){ /* ヘッダー自体に右パディングを付与して、右端に確実な余白を作る */ .site-header{ padding-right: max(28px, env(safe-area-inset-right)); box-sizing: border-box; } /* iOSの自動テキスト拡大を抑止（折返しの原因を軽減） */ html{ -webkit-text-size-adjust: 100%; } /* インナーを100%幅にして左右の余白をデバイス安全域込みで統一 */ .site-header .inner{ max-width: none; width: 100%; padding-left: max(12px, env(safe-area-inset-left)); /* 右端からさらに内側に寄せる（見本に合わせて余白を拡大） */ padding-right: max(28px, env(safe-area-inset-right)); justify-content: space-between; } .site-brand{ flex: 0 0 auto; } .site-logo-img{ width: 156px; height: auto; } /* CTA とハンバーガーの間隔を詰めて左寄せ感を出す */ .site-nav{ gap: 8px; flex: 1 1 auto; justify-content: flex-end; align-items:center; } /* モバイルではテキストナビ(Top/About/Teams)を非表示、CTAは残す */ .site-nav > a[href$="index.html"], .site-nav > a[href$="record.html"], .site-nav > a[href$="addnewpopup.html"]{ display: none; } .site-nav .cta{ padding: 4px 12px; min-height: 24px; font-size:13px; margin-right: 10px; } /* ハンバーガー */ .menu-toggle{ appearance:none; -webkit-appearance:none; background:transparent; border:0; margin:0; padding:8px; cursor:pointer; display:inline-flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; } .menu-toggle .menu-bar{ width:22px; height:2px; background:#E6E9EC; display:block; border-radius:2px; } /* デスクトップでは表示しないが、モバイルでは表示 */ .menu-toggle{ display:inline-flex; } /* モバイルメニュー（デフォルト非表示） */ .mobile-menu{ position: fixed; top: var(--header-h); left: 0; right: 0; background: var(--header-bg); border-bottom: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 0; padding: 8px max(28px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); z-index: 9998; } /* 初期状態（[hidden]）は必ず非表示にする */ .mobile-menu[hidden]{ display:none !important; } .mobile-menu a{ color:#E6E9EC; text-decoration:none; font-family:'Roboto Condensed','Noto Sans JP',sans-serif; font-size:16px; padding:10px 8px; border-radius:6px; } .mobile-menu a:active, .mobile-menu a:hover{ background: rgba(255,255,255,.06); color:#fff; } } /* タブレット以上ではハンバーガーとモバイルメニューは無効化 */ @media (min-width: 641px){ .menu-toggle{ display:none; } .mobile-menu{ display:none !important; } } /* ここで .top 背景を透明化すると全体が白くなるため撤回 */