:root {
  --bg-color: #ffffff;
  --text-color-1: #000000;
  --highlight-color-1: #fbfffb;
  --highlight-color-2: #eeffee;
  --border-color: #ddd;

  --default-font: "Bananaslip";

  --login-box-size: 600px;
}

@font-face {
  font-family: "Anzumoji";
  src: url("../assets/font/AP.ttf");
}

@font-face {
  font-family: "Bananaslip";
  src: url("../font/YDWbananaslipplus.otf");
}

body {
  width: calc(100% - 1px);
  background-color: var(--bg-color);
  color: var(--text-color-1);
  font-family: var(--default-font);
  text-align: center;
}

div {
  font-family: inherit;
}

h1 {
  margin: 0;
}

input {
  font-family: inherit;
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

header > img {
  height: 100px;
}

main {
  position: fixed;
  left: calc((100% - var(--login-box-size)) / 2);
  width: var(--login-box-size);
  max-width: var(--login-box-size);
  margin-top: 20px;
  padding: 20px;
  text-align: left;
  border: 1px solid var(--border-color);
  border-radius: 20px;
}

.btn {
  max-width: fit-content;
  margin-top: 5px;
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

#btn-google-login {
  display: flex;
  line-height: 30px;
  background-color: var(--highlight-color-1);
}

#btn-google-login > img {
  width: 30px;
  padding-right: 10px;
}

#password {
  font-family: serif;
}

.messages {
  width: fit-content;
  padding: 0 10px;
  background-color: var(--highlight-color-2);
  border-radius: 10px;
}

.hidden {
  display: none;
}

/* =========================================
   スマートフォン用レスポンシブ設定 (768px以下)
   ========================================= */
@media screen and (max-width: 768px) {
  :root {
    /* スマホ画面に合わせてログインボックスの基準サイズを変更 */
    --login-box-size: 90%;
  }

  body {
    /* 横スクロール（横揺れ）を防ぐ */
    width: 100%;
    overflow-x: hidden;
  }

  main {
    /* fixedによる画面端での見切れを防ぐため、通常の配置に戻して中央寄せ */
    position: relative;
    left: auto;
    margin: 20px auto;
    width: 90%;
    max-width: 100%;
    box-sizing: border-box; /* paddingを含めて幅を計算 */
  }

  header > img {
    /* スマホではロゴ画像を少し縮小し、画面幅を超えないようにする */
    height: auto;
    max-height: 80px;
    max-width: 90%;
  }

  input {
    /* 入力しやすさを向上させるため、入力欄を横幅いっぱいに */
    width: 100%;
    box-sizing: border-box;
    padding: 10px; /* タップしやすいように余白を少し増やす */
  }

  .btn {
    /* ボタンのタップ領域を広げる */
    padding: 10px 15px;
  }

  #btn-google-login {
    /* ログインボタンを中央揃えにして押しやすくする */
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}