/* ============================================================================ * auth.css ― ログイン前トップ／ログイン／新規登録の3画面 * ---------------------------------------------------------------------------- * このファイルは何をしているか * landing.html / login.html / register.html の見た目だけを持つ。 * 色・角丸・影・書体は board.css の :root で定義済みのものをそのまま使う。 * そのため必ず board.css を先に読み込む（3画面とも でその順序）。 * * board.css が既に持っているので、ここでは定義しないもの * .btn / .btn-primary / .btn-link / .notice / .notice-ok / .notice-error * * ここで追加している変数 * --lp-ease ほとんどの動きで使うイージング。少し跳ねる * --tap 押したときの沈み込み量 * ========================================================================== */ :root { --lp-ease: cubic-bezier(.34, 1.4, .64, 1); --tap: translateY(2px) scale(.97); } /* =========================================================================== * 共通の下地 * ======================================================================== */ /* 認証系の画面は board.css の body 余白を使わず、画面全体を使う */ body.auth-body { margin: 0; padding: 0; min-height: 100vh; /* 左上に水色、右上に黄色の光を置く。1色塗りより空気感が出る */ background: radial-gradient(1100px 620px at 12% -8%, #d5f2ff 0%, transparent 62%), radial-gradient(900px 520px at 92% 2%, #fff3c9 0%, transparent 58%), linear-gradient(180deg, #f4fcff 0%, #fffdf4 100%); background-attachment: fixed; } /* ログイン／新規登録は中央に1枚だけ置く */ body.auth-centered { display: flex; align-items: center; justify-content: center; padding: 40px 20px; } /* =========================================================================== * ボタンの追加バリエーション（.btn は board.css 側） * ======================================================================== */ /* 枠だけのボタン。ヘッダーの「ログイン」など主張を弱めたいところ */ .btn-ghost { background: rgba(255, 255, 255, .72); border: 2px solid var(--c-doing); color: #1f8fb8; box-shadow: none; } .btn-ghost:hover { background: #fff; border-color: var(--c-doing); box-shadow: var(--shadow-sm); } /* 大きいボタン。ヒーローと最終誘導で使う */ .btn-lg { padding: 15px 32px; font-size: 1.06rem; border-radius: 999px; } /* 幅いっぱい。フォームの送信ボタン */ .btn-block { width: 100%; padding: 15px; font-size: 1.04rem; border-radius: 14px; margin-top: 4px; } /* 押せることを分かりやすくする。primary の上を光が一度通る */ .btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); transition: left .5s ease; } .btn-primary:hover::after { left: 115%; } /* 送信中はボタンを触れない見た目にする */ .btn:disabled, .btn[disabled] { opacity: .55; cursor: progress; transform: none !important; box-shadow: none; } /* =========================================================================== * ログイン／新規登録カード * ======================================================================== */ .auth-box { width: 100%; max-width: 430px; background: var(--card); border: 1px solid var(--border); border-radius: 26px; padding: 38px 34px 30px; box-shadow: var(--shadow-lg); /* 上辺に水色→黄色の帯。3画面で共通の「アプリの顔」になる */ border-top: 5px solid transparent; background-image: linear-gradient(var(--card), var(--card)), linear-gradient(90deg, var(--c-doing), var(--c-accent)); background-origin: border-box; background-clip: padding-box, border-box; animation: auth-in .45s var(--lp-ease) both; } @keyframes auth-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } /* カード上部のロゴ。クリックでトップへ戻れる */ .auth-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; margin-bottom: 20px; } .auth-logo:hover .lp-logo-mark { transform: rotate(-12deg) scale(1.08); } .auth-title { margin: 0 0 6px; font-size: 1.5rem; letter-spacing: .02em; color: var(--text); } .auth-sub { margin: 0 0 22px; font-size: .9rem; line-height: 1.7; color: var(--sub); } .auth-form { display: flex; flex-direction: column; gap: 17px; } /* 入力1組（ラベル＋枠＋補足） */ .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: .86rem; font-weight: 700; color: #4a6274; } /* 入力欄。触りたくなるかどうかはここで決まる */ .auth-form input[type="text"], .auth-form input[type="password"] { width: 100%; padding: 13px 15px; font: inherit; color: var(--text); background: #f8fdff; border: 2px solid var(--border); border-radius: 13px; transition: border-color .18s, background .18s, box-shadow .18s, transform .18s var(--lp-ease); } .auth-form input::placeholder { color: #b6c6d4; } .auth-form input[type="text"]:hover, .auth-form input[type="password"]:hover { border-color: #c9e6f4; } /* 選択中は水色に光らせ、わずかに持ち上げる */ .auth-form input[type="text"]:focus, .auth-form input[type="password"]:focus { outline: none; background: #fff; border-color: var(--c-doing); box-shadow: 0 0 0 4px rgba(56, 182, 224, .16); transform: translateY(-1px); } /* パスワード欄＋目のボタン */ .pw-wrap { position: relative; display: flex; } .pw-wrap input { padding-right: 48px !important; } .pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; font-size: 1.05rem; line-height: 1; background: transparent; border: 0; border-radius: 50%; cursor: pointer; opacity: .6; transition: opacity .15s, background .15s, transform .15s; } .pw-toggle:hover { opacity: 1; background: var(--c-doing-bg); } .pw-toggle:active { transform: translateY(-50%) scale(.9); } /* 補足文。状態で色が変わる */ .hint { font-size: .78rem; line-height: 1.6; color: var(--sub); } .hint-ok { color: #1d8f6c; font-weight: 700; } .hint-error { color: #d0453a; font-weight: 700; } /* パスワード強度バー */ .pw-meter { height: 7px; background: #eef4f8; border-radius: 999px; overflow: hidden; } .pw-meter > span { display: block; width: 0; height: 100%; border-radius: 999px; transition: width .3s var(--lp-ease), background .3s; } .pw-level-0 { background: transparent; } .pw-level-1 { background: var(--c-over); } .pw-level-2 { background: var(--c-accent-dk); } .pw-level-3 { background: var(--c-doing); } .pw-level-4 { background: var(--c-done); } /* 画面下の行き先切り替え */ .auth-switch { margin: 22px 0 0; text-align: center; font-size: .87rem; color: var(--sub); } .auth-switch a { color: #1f8fb8; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--c-accent); padding-bottom: 1px; } .auth-switch a:hover { color: #14708f; border-bottom-color: var(--c-accent-dk); } /* メッセージ欄はカードの中で少し離す */ .auth-box .notice { margin-bottom: 16px; } /* =========================================================================== * ログイン前トップ（landing.html） * ======================================================================== */ .lp-header { max-width: 1060px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .lp-logo { display: inline-flex; align-items: center; gap: 9px; } /* ロゴの丸。水色の玉に白いチェック */ .lp-logo-mark { width: 34px; height: 34px; display: grid; place-items: center; font-size: 1rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--c-doing), #6fd0ee); border-radius: 11px; box-shadow: var(--shadow-sm); transition: transform .25s var(--lp-ease); } .lp-logo-text { font-size: 1.16rem; font-weight: 700; letter-spacing: .01em; color: var(--text); } .lp-nav { display: flex; gap: 10px; } /* --- ヒーロー --- */ .lp-hero { max-width: 780px; margin: 0 auto; padding: 46px 24px 54px; text-align: center; } .lp-eyebrow { display: inline-block; margin: 0 0 18px; padding: 7px 16px; font-size: .8rem; font-weight: 700; color: #a07500; background: var(--c-accent-bg); border: 1px solid #ffe9a8; border-radius: 999px; } .lp-title { margin: 0 0 20px; font-size: clamp(1.9rem, 5.4vw, 3rem); line-height: 1.34; letter-spacing: .01em; color: var(--text); } /* 強調する語の下にマーカーを引く。太さは文字サイズに追従させる */ .lp-hl, .lp-hl-y { position: relative; white-space: nowrap; } .lp-hl::after, .lp-hl-y::after { content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .06em; height: .34em; border-radius: 999px; z-index: -1; } .lp-hl::after { background: #bfe9f9; } .lp-hl-y::after { background: var(--c-accent); } .lp-lead { margin: 0 auto 30px; max-width: 560px; font-size: 1rem; line-height: 1.95; color: #5c7387; } .lp-cta { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; } /* --- 機能カード3枚 --- */ .lp-features { max-width: 1000px; margin: 0 auto; padding: 8px 24px 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; } .lp-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); transition: transform .25s var(--lp-ease), box-shadow .25s; } /* 触れると持ち上がる。並び替えカードと同じ手触りに揃えている */ .lp-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .lp-icon { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.5rem; border-radius: 16px; margin-bottom: 15px; } .lp-icon-blue { background: var(--c-doing-bg); } .lp-icon-yellow { background: var(--c-accent-bg); } .lp-icon-mint { background: var(--c-done-bg); } .lp-card-title { margin: 0 0 9px; font-size: 1.07rem; color: var(--text); } .lp-card-text { margin: 0; font-size: .89rem; line-height: 1.85; color: var(--sub); } /* --- 使い方3ステップ --- */ .lp-steps-wrap { max-width: 780px; margin: 0 auto; padding: 8px 24px 64px; } .lp-section-title { margin: 0 0 28px; text-align: center; font-size: 1.42rem; color: var(--text); } .lp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .lp-step { display: flex; align-items: flex-start; gap: 17px; background: rgba(255, 255, 255, .8); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; transition: transform .2s var(--lp-ease), border-color .2s; } .lp-step:hover { transform: translateX(4px); border-color: #c9e6f4; } .lp-step-num { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; font-weight: 700; color: #8a6500; background: var(--c-accent); border-radius: 50%; box-shadow: var(--shadow-sm); } .lp-step b { display: block; margin-bottom: 5px; font-size: .99rem; color: var(--text); } .lp-step p { margin: 0; font-size: .87rem; line-height: 1.8; color: var(--sub); } /* --- 最終誘導 --- */ .lp-final { max-width: 700px; margin: 0 auto 64px; padding: 44px 28px; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow-md); } .lp-final-title { margin: 0 0 22px; font-size: 1.32rem; color: var(--text); } .lp-final-sub { margin: 18px 0 0; font-size: .85rem; color: var(--sub); } .lp-final-sub a { color: #1f8fb8; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--c-accent); } .lp-footer { padding: 26px 24px 40px; text-align: center; font-size: .8rem; color: #9fb2c2; } /* =========================================================================== * 画面幅が狭いとき * ======================================================================== */ @media (max-width: 560px) { .lp-header { flex-direction: column; align-items: stretch; text-align: center; } .lp-nav { justify-content: center; } .lp-cta .btn { width: 100%; } .auth-box { padding: 30px 22px 26px; border-radius: 22px; } } /* 動きを減らす設定の人にはアニメーションを出さない */ @media (prefers-reduced-motion: reduce) { .auth-box, .lp-card, .lp-step, .btn-primary::after { animation: none !important; transition: none !important; } .lp-card:hover, .lp-step:hover { transform: none; } }