/* ============================================================
   RESET — ブラウザ既定の余白だけを共通で打ち消す
============================================================ */
* { box-sizing: border-box; }
html, body, p, h1 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
button, input { font: inherit; }
button { cursor: pointer; }

/* ============================================================
   PC
============================================================ */
@media (min-width: 768px) {

  /* 背景は装飾テクスチャ。コンテンツ画像の暗幕は重ねず、フォームの可読性を保つ。 */
  .page { color: #30343c; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.8; background: #f4f0ec url("./backdrop.webp") center / cover fixed no-repeat; }
  .section-login { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 24px 16px 24px 16px; margin: 0px 0px 0px 0px; position: relative; isolation: isolate; }
  .section-login__orbs { position: absolute; inset: 0px; overflow: hidden; pointer-events: none; z-index: -1; }
  /* 円は通常の角丸とは別の装飾図形（50%）。無限アニメーションは使用しない。 */
  .section-login__orb { position: absolute; border-radius: 50%; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,.5); box-shadow: 0px 16px 48px rgba(29,59,74,.08); }
  /* 4つの円は大小を対角に振り、カードを囲む構図にする。淡い色味を円ごとに変えて背景の色面と呼応させる。 */
  .section-login__orb:nth-child(1) { top: 8%; left: 8%; width: 208px; height: 208px; background: rgba(255,236,224,.35); }
  .section-login__orb:nth-child(2) { bottom: 12%; left: 20%; width: 72px; height: 72px; background: rgba(224,244,236,.4); }
  .section-login__orb:nth-child(3) { top: 16%; right: 16%; width: 88px; height: 88px; background: rgba(228,236,252,.4); }
  .section-login__orb:nth-child(4) { bottom: 8%; right: 8%; width: 160px; height: 160px; background: rgba(240,232,252,.35); }
  /* PC/SPそれぞれで完結させ、共通寸法への上書きを避ける。 */
  .login-card { width: 432px; max-width: 100%; min-width: 0px; padding: 32px 32px 32px 32px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; background: rgba(255,255,255,.4); backdrop-filter: blur(40px) saturate(250%); -webkit-backdrop-filter: blur(40px) saturate(250%); box-shadow: 0px 24px 64px rgba(0,0,0,.12), inset 0px 2px 0px rgba(255,255,255,.6); }
  .login-card__header { text-align: left; margin: 0px 0px 32px 0px; }
  .login-card__title { font-size: 40px; line-height: 1.4; font-weight: 700; letter-spacing: 0px; margin: 0px 0px 8px 0px; }
  .login-card__lead { font-size: 16px; line-height: 1.8; margin: 0px 0px 0px 0px; }
  .login-form { margin: 0px 0px 24px 0px; }
  .login-form__field { min-width: 0px; margin: 0px 0px 16px 0px; }
  .login-form__label { display: block; font-size: 16px; line-height: 1.8; margin: 0px 0px 8px 0px; }
  .login-form__input { display: block; width: 100%; min-width: 0px; height: 48px; border: 1px solid rgba(255,255,255,.6); border-radius: 8px; background: rgba(255,255,255,.3); color: #30343c; padding: 8px 16px 8px 16px; font-size: 16px; line-height: 1.8; transition: background-color .2s, box-shadow .2s; }
  .login-form__input::placeholder { color: #505361; opacity: 1; }
  .login-form__input:focus-visible { outline: 2px solid #1d3b4a; outline-offset: 2px; background-color: rgba(255,255,255,.5); }
  /* 自動入力による半透明背景の塗り替えを待機させ、文字色を通常時と揃える。 */
  .login-form__input:autofill, .login-form__input:-webkit-autofill, .login-form__input:-webkit-autofill:hover, .login-form__input:-webkit-autofill:focus { -webkit-text-fill-color: #30343c; caret-color: #30343c; transition: background-color 0s 600000s, background-image 0s 600000s allow-discrete; }
  .login-form__input[aria-invalid="true"] { border-color: #861633; }
  .login-form__error { color: #861633; font-size: 12px; line-height: 1.6; margin: 0px 0px 0px 0px; }
  .login-form__error:empty { display: none; }
  .login-form__submit { display: block; width: 100%; min-height: 48px; padding: 8px 16px 8px 16px; margin: 0px 0px 0px 0px; border: 0px; border-radius: 8px; background: #1d3b4a; color: #ffffff; font-size: 16px; font-weight: 700; line-height: 1.8; transition: transform .2s, box-shadow .2s; }
  .login-form__submit:disabled { cursor: wait; }
  .login-card__divider { text-align: left; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; line-height: 1.6; margin: 0px 0px 24px 0px; }
  .social-login { margin: 0px 0px 24px 0px; }
  .social-login__item { margin: 0px 0px 8px 0px; }
  .social-login__item:last-child { margin: 0px 0px 0px 0px; }
  .social-login__button { display: flex; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; min-height: 48px; padding: 8px 16px 8px 16px; margin: 0px 0px 0px 0px; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; color: #30343c; background: rgba(255,255,255,.3); box-shadow: 0px 8px 32px rgba(0,0,0,.04), inset 0px 1px 0px rgba(255,255,255,.4); font-size: 16px; line-height: 1.8; transition: transform .2s, background-color .2s; }
  .social-login__icon { width: 24px; height: 24px; flex: none; }
  .social-login__label { min-width: 0px; }
  .login-card__footer { display: flex; justify-content: flex-start; }
  .login-card__forgot { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; min-height: 48px; background: transparent; border: 0px; color: #30343c; font-size: 16px; line-height: 1.8; }
  .login-card__notice { font-size: 12px; line-height: 1.6; text-align: center; }
  .login-form__submit:focus-visible, .social-login__button:focus-visible, .login-card__forgot:focus-visible { outline: 2px solid #1d3b4a; outline-offset: 4px; }
  .login-notice { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 16px 24px 16px 24px; border: 1px solid #ffffff; border-radius: 8px; background: #fffef5; color: #30343c; box-shadow: 0px 8px 32px rgba(29,59,74,.12); font-size: 16px; line-height: 1.8; text-align: center; overflow-wrap: anywhere; z-index: 2; }
  .login-notice:empty { display: none; }
}

/* ============================================================
   SP
============================================================ */
@media (max-width: 767px) {

  /* 背景は装飾テクスチャ。コンテンツ画像の暗幕は重ねず、フォームの可読性を保つ。 */
  .page { color: #30343c; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.8; background: #f4f0ec url("./backdrop.webp") center / cover fixed no-repeat; }
  .section-login { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 24px 16px 24px 16px; margin: 0px 0px 0px 0px; position: relative; isolation: isolate; }
  .section-login__orbs { position: absolute; inset: 0px; overflow: hidden; pointer-events: none; z-index: -1; }
  /* 円は通常の角丸とは別の装飾図形（50%）。無限アニメーションは使用しない。 */
  .section-login__orb { position: absolute; border-radius: 50%; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,.5); box-shadow: 0px 16px 48px rgba(29,59,74,.08); }
  /* SP はカードが画面幅を占めるので、円は上下の余白側へ寄せて小さくする。 */
  .section-login__orb:nth-child(1) { top: 16px; left: -40px; width: 136px; height: 136px; background: rgba(255,236,224,.35); }
  .section-login__orb:nth-child(2) { bottom: 32px; left: 24px; width: 48px; height: 48px; background: rgba(224,244,236,.4); }
  .section-login__orb:nth-child(3) { top: 40px; right: 24px; width: 56px; height: 56px; background: rgba(228,236,252,.4); }
  .section-login__orb:nth-child(4) { bottom: -32px; right: -32px; width: 128px; height: 128px; background: rgba(240,232,252,.35); }
  /* PC/SPそれぞれで完結させ、共通寸法への上書きを避ける。 */
  .login-card { width: 400px; max-width: 100%; min-width: 0px; padding: 24px 24px 24px 24px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; background: rgba(255,255,255,.4); backdrop-filter: blur(40px) saturate(250%); -webkit-backdrop-filter: blur(40px) saturate(250%); box-shadow: 0px 24px 64px rgba(0,0,0,.12), inset 0px 2px 0px rgba(255,255,255,.6); }
  .login-card__header { text-align: left; margin: 0px 0px 32px 0px; }
  .login-card__title { font-size: 28px; line-height: 1.4; font-weight: 700; letter-spacing: 0px; margin: 0px 0px 8px 0px; }
  .login-card__lead { font-size: 16px; line-height: 1.8; margin: 0px 0px 0px 0px; }
  .login-form { margin: 0px 0px 24px 0px; }
  .login-form__field { min-width: 0px; margin: 0px 0px 16px 0px; }
  .login-form__label { display: block; font-size: 16px; line-height: 1.8; margin: 0px 0px 8px 0px; }
  .login-form__input { display: block; width: 100%; min-width: 0px; height: 48px; border: 1px solid rgba(255,255,255,.6); border-radius: 8px; background: rgba(255,255,255,.3); color: #30343c; padding: 8px 16px 8px 16px; font-size: 16px; line-height: 1.8; transition: background-color .2s, box-shadow .2s; }
  .login-form__input::placeholder { color: #505361; opacity: 1; }
  .login-form__input:focus-visible { outline: 2px solid #1d3b4a; outline-offset: 2px; background-color: rgba(255,255,255,.5); }
  /* 自動入力による半透明背景の塗り替えを待機させ、文字色を通常時と揃える。 */
  .login-form__input:autofill, .login-form__input:-webkit-autofill, .login-form__input:-webkit-autofill:hover, .login-form__input:-webkit-autofill:focus { -webkit-text-fill-color: #30343c; caret-color: #30343c; transition: background-color 0s 600000s, background-image 0s 600000s allow-discrete; }
  .login-form__input[aria-invalid="true"] { border-color: #861633; }
  .login-form__error { color: #861633; font-size: 12px; line-height: 1.6; margin: 0px 0px 0px 0px; }
  .login-form__error:empty { display: none; }
  .login-form__submit { display: block; width: 100%; min-height: 48px; padding: 8px 16px 8px 16px; margin: 0px 0px 0px 0px; border: 0px; border-radius: 8px; background: #1d3b4a; color: #ffffff; font-size: 16px; font-weight: 700; line-height: 1.8; transition: transform .2s, box-shadow .2s; }
  .login-form__submit:disabled { cursor: wait; }
  .login-card__divider { text-align: left; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; line-height: 1.6; margin: 0px 0px 24px 0px; }
  .social-login { margin: 0px 0px 24px 0px; }
  .social-login__item { margin: 0px 0px 8px 0px; }
  .social-login__item:last-child { margin: 0px 0px 0px 0px; }
  .social-login__button { display: flex; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; min-height: 48px; padding: 8px 16px 8px 16px; margin: 0px 0px 0px 0px; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; color: #30343c; background: rgba(255,255,255,.3); box-shadow: 0px 8px 32px rgba(0,0,0,.04), inset 0px 1px 0px rgba(255,255,255,.4); font-size: 16px; line-height: 1.8; transition: transform .2s, background-color .2s; }
  .social-login__icon { width: 24px; height: 24px; flex: none; }
  .social-login__label { min-width: 0px; }
  .login-card__footer { display: flex; justify-content: flex-start; }
  .login-card__forgot { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; min-height: 48px; background: transparent; border: 0px; color: #30343c; font-size: 16px; line-height: 1.8; }
  .login-card__notice { font-size: 12px; line-height: 1.6; text-align: center; }
  .login-form__submit:focus-visible, .social-login__button:focus-visible, .login-card__forgot:focus-visible { outline: 2px solid #1d3b4a; outline-offset: 4px; }
  .login-notice { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 16px 24px 16px 24px; border: 1px solid #ffffff; border-radius: 8px; background: #fffef5; color: #30343c; box-shadow: 0px 8px 32px rgba(29,59,74,.12); font-size: 16px; line-height: 1.8; text-align: center; overflow-wrap: anywhere; z-index: 2; }
  .login-notice:empty { display: none; }
}

/* ============================================================
   INTERACTION — 入力中と動きを減らす設定では操作性を優先する
============================================================ */
@media (hover: hover) {
  .login-form__submit:hover, .social-login__button:hover { transform: translateY(-2px); box-shadow: 0px 8px 24px rgba(0,0,0,.12); }
  .social-login__button:hover { background-color: rgba(255,255,255,.5); }
  .login-card__forgot:hover { text-decoration: underline; }
}
.js-reveal .fade-in { opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .5s; }
.js-reveal .fade-in--visible { opacity: 1; transform: translateY(0px); }
.js-reveal .social-login__item { opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .4s; }
.js-reveal .fade-in--visible .social-login__item { opacity: 1; transform: translateY(0px); }
.js-reveal .social-login__item:nth-child(2) { transition-delay: .08s; }
.js-reveal .social-login__item:nth-child(3) { transition-delay: .16s; }
.js-reveal .fade-in:focus-within, .js-reveal .social-login__item:focus-within { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .fade-in, .js-reveal .social-login__item { opacity: 1; transform: none; transition: none; }
  .login-form__submit, .social-login__button { transition: none; transform: none; }
}