/* =================================================================== TOMORROWGATE — 簡易パスワード保護（社内営業資料用） HTML / CSS / JS のみで実装。サーバー設定・Cloudflare Access は使用しない。 全ページ（TOP / 診断 / works配下 / budget配下）で共通読み込み。 =================================================================== */ /* 認証前は本文を非表示（FOUC防止のため 内インラインscriptで document.documentElement に .tg-locked を即時付与してから本CSSが効く） */ html.tg-locked body { visibility: hidden; } .tg-auth-screen { /* body が visibility:hidden でも子要素で visibility:visible を 明示すれば再表示される（CSS仕様） */ visibility: visible; display: none; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 999999; align-items: center; justify-content: center; padding: 24px; background-color: #0b0b0b; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; -webkit-font-smoothing: antialiased; } html.tg-locked .tg-auth-screen { display: flex; } .tg-auth-box { width: 100%; max-width: 380px; box-sizing: border-box; padding: 2.4rem 2rem 2.2rem; background-color: #141414; border: 1px solid rgba(255, 255, 255, 0.08); text-align: center; } .tg-auth-eyebrow { margin: 0 0 0.9rem; font-family: "Barlow Condensed", "Futura", "Century Gothic", Arial, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.24em; color: #c9a35a; } .tg-auth-title { margin: 0 0 0.6rem; font-size: 1.28rem; font-weight: 700; letter-spacing: 0.02em; color: #f0eeea; line-height: 1.5; } .tg-auth-desc { margin: 0 0 1.6rem; font-size: 0.84rem; letter-spacing: 0.04em; color: rgba(240, 238, 234, 0.52); } .tg-auth-input { display: block; width: 100%; box-sizing: border-box; padding: 0.85rem 1rem; margin: 0 0 0.9rem; background-color: #0b0b0b; border: 1px solid rgba(255, 255, 255, 0.16); color: #f0eeea; font-size: 0.92rem; letter-spacing: 0.06em; text-align: center; outline: none; transition: border-color 0.3s ease; } .tg-auth-input::placeholder { color: rgba(240, 238, 234, 0.3); } .tg-auth-input:focus { border-color: #c9a35a; } .tg-auth-btn { display: block; width: 100%; box-sizing: border-box; padding: 0.85rem 1rem; background-color: #c9a35a; border: none; color: #1d1d1d; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.14em; cursor: pointer; transition: opacity 0.3s ease; } .tg-auth-btn:hover { opacity: 0.86; } .tg-auth-error { margin: 0.9rem 0 0; font-size: 0.78rem; letter-spacing: 0.04em; color: #e2715a; visibility: hidden; } .tg-auth-box.tg-auth-shake { animation: tg-auth-shake 0.32s ease; } @keyframes tg-auth-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } @media (max-width: 480px) { .tg-auth-box { padding: 2rem 1.4rem 1.8rem; } .tg-auth-title { font-size: 1.12rem; } }