/* ========================================
   Sorastagram Login
======================================== */

* {
  box-sizing: border-box;
}


html,
body {
  width: 100%;
  min-height: 100%;

  margin: 0;
}


body {
  min-height: 100dvh;

  font-family:
    "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    #fff9fb;

  color:
    #222;
}


/* ========================================
   ページ全体
======================================== */

.login-page {
  position: relative;

  width: 100%;
  max-width: 390px;

  min-height: 100dvh;

  margin:
    0 auto;

  padding:
    calc(
      72px +
      env(safe-area-inset-top)
    )
    23px
    calc(
      32px +
      env(safe-area-inset-bottom)
    );

  overflow-x: hidden;

  background:
    #fff9fb;
}


/* ========================================
   Kawaii背景
======================================== */

.login-page::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 10% 18%,
      rgba(255, 157, 188, 0.24) 0 3px,
      transparent 4px
    ),

    radial-gradient(
      circle at 87% 14%,
      rgba(255, 143, 178, 0.22) 0 4px,
      transparent 5px
    ),

    radial-gradient(
      circle at 17% 48%,
      rgba(255, 190, 211, 0.22) 0 3px,
      transparent 4px
    ),

    radial-gradient(
      circle at 91% 55%,
      rgba(255, 164, 195, 0.20) 0 3px,
      transparent 4px
    ),

    radial-gradient(
      circle at 8% 78%,
      rgba(255, 177, 204, 0.20) 0 4px,
      transparent 5px
    ),

    radial-gradient(
      circle at 85% 84%,
      rgba(255, 143, 178, 0.20) 0 3px,
      transparent 4px
    );
}


/* 淡いGlow */

.login-page::after {
  content: "";

  position: absolute;

  width: 230px;
  height: 230px;

  left: 50%;
  top: 100px;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle,
      rgba(
        255,
        157,
        188,
        0.16
      ),
      rgba(
        255,
        157,
        188,
        0
      )
      68%
    );
}


/* ========================================
   ブランド
======================================== */

.brand {
  position: relative;

  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
}


.brand-logo {
  display: block;

  width: 190px;
  height: auto;

  margin: 0;
}

/* ========================================
   ロゴマーク
======================================== */

.brand-mark {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 66px;
  height: 66px;

  margin-top:
    46px;

  border-radius:
    20px;

  filter:
    drop-shadow(
      0 0 14px
      rgba(
        255,
        111,
        156,
        0.28
      )
    );
}


.brand-mark::before {
  content: "";

  position: absolute;

  width: 112px;
  height: 112px;

  left: 50%;
  top: 50%;

  transform:
    translate(
      -50%,
      -50%
    );

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(
        255,
        143,
        178,
        0.22
      ),
      transparent
      67%
    );

  pointer-events:
    none;
}

.brand-icon {
  position: relative;

  z-index: 1;

  display: block;

  width: 66px;
  height: 66px;

  border-radius: 20px;

  object-fit: cover;

  box-shadow:
    0 5px 18px
    rgba(
      255,
      95,
      145,
      0.30
    );
}

/* ========================================
   ログインカード
======================================== */

.login-card {
  position: relative;

  z-index: 1;

  width: 100%;

  margin-top:
    45px;

  padding:
    17px
    27px
    25px;

  border:
    1px solid
    #ececec;

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  box-shadow:
    0 7px 22px
    rgba(
      0,
      0,
      0,
      0.035
    );
}


/* Figmaでは表示しない */

.login-card-header,
.login-divider,
.support-link,
.login-note {
  display: none;
}


/* ========================================
   フォーム
======================================== */

.login-form {
  margin: 0;
}


.form-field {
  margin: 0;
}


.form-field + .form-field {
  margin-top:
    24px;
}


.form-field > label {
  display: block;

  margin-bottom:
    11px;

  color:
    #222;

  font-size:
    14px;

  font-weight:
    500;
}


/* ========================================
   入力欄
======================================== */

.input-wrap {
  position: relative;

  width: 100%;
}


.input-icon {
  display: none;
}


.input-wrap input {
  display: block;

  width: 100%;
  height: 54px;

  padding:
    0 20px;

  border:
    1px solid
    #ececec;

  border-radius:
    12px;

  outline:
    none;

  background:
    #fff;

  color:
    #222;

  font-family:
    inherit;

  font-size:
    14px;

  -webkit-appearance:
    none;

  appearance:
    none;

  transition:
    border-color
    0.15s ease,
    box-shadow
    0.15s ease;
}


.input-wrap input::placeholder {
  color:
    #b7b7b7;
}


.input-wrap input:focus {
  border-color:
    #ff9dbc;

  box-shadow:
    0 0 0 3px
    rgba(
      255,
      143,
      178,
      0.10
    );
}


/* パスワード表示ボタンは
   機能を残したまま非表示 */

.password-toggle {
  display: none;
}


/* ========================================
   ログイン状態保持
======================================== */

.remember-row {
  display: flex;
  align-items: center;

  gap:
    10px;

  margin-top:
    28px;

  color:
    #222;

  font-size:
    14px;
}


.remember-row input {
  flex:
    0 0 auto;

  width:
    18px;

  height:
    18px;

  margin: 0;

  accent-color:
    #ff6f9c;

  cursor:
    pointer;
}


/* ========================================
   メッセージ
======================================== */

.login-message {
  margin:
    0;

  color:
    #e6537e;

  font-size:
    12px;

  line-height:
    1.5;
}


.login-message:empty {
  display: none;
}


.login-message:not(:empty) {
  margin-top:
    10px;
}


/* ========================================
   ログインボタン
======================================== */

.login-button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width:
    150px;

  max-width:
    100%;

  height:
    50px;

  margin:
    26px auto 0;

  padding: 0;

  border:
    none;

  border-radius:
    20px;

  background:
    #ff6f9c;

  color:
    #fff;

  font-family:
    inherit;

  font-size:
    18px;

  font-weight:
    500;

  cursor:
    pointer;

  box-shadow:
    0 6px 16px
    rgba(
      255,
      111,
      156,
      0.20
    );

  transition:
    transform
    0.12s ease,
    opacity
    0.12s ease;
}


.login-button:active {
  transform:
    scale(0.985);
}


.login-button:disabled {
  cursor:
    default;

  opacity:
    0.75;
}


/* ========================================
   ローディング
======================================== */

.button-spinner {
  display:
    none;

  width:
    19px;

  height:
    19px;

  margin-left:
    10px;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      0.45
    );

  border-top-color:
    #fff;

  border-radius:
    50%;

  animation:
    login-spin
    0.7s
    linear
    infinite;
}


.login-button.is-loading
.button-spinner {
  display:
    block;
}


@keyframes login-spin {

  to {
    transform:
      rotate(360deg);
  }

}


/* ========================================
   小さい画面
======================================== */

@media (
  max-height: 740px
) {

  .login-page {
    padding-top:
      calc(
        40px +
        env(safe-area-inset-top)
      );
  }


  .brand-mark {
    margin-top:
      26px;
  }


  .login-card {
    margin-top:
      30px;
  }

}

/* ========================================
   背景ハート
======================================== */

.login-hearts {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events:
    none;
}


.heart {
  position: absolute;

  color:
    rgba(
      255,
      111,
      156,
      0.18
    );

  font-family:
    sans-serif;

  line-height:
    1;

  user-select:
    none;
}


.heart-1 {
  top:
    3%;

  left:
    8%;

  font-size:
    30px;

  transform:
    rotate(-15deg);
}


.heart-2 {
  top:
    8%;

  right:
    5%;

  font-size:
    22px;

  transform:
    rotate(14deg);
}


.heart-3 {
  top:
    20%;

  left:
    18%;

  font-size:
    26px;

  transform:
    rotate(10deg);
}


.heart-4 {
  top:
    20%;

  right:
    12%;

  font-size:
    34px;

  transform:
    rotate(-12deg);
}

.heart-5 {
  top:
    90%;

  right:
    20%;

  font-size:
    26px;

  transform:
    rotate(17deg);
}

.heart-6 {
  top:
    85%;

  left:
    16%;

  font-size:
    34px;

  transform:
    rotate(-8deg);
}