html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/*固定幅のボタン*/
.btn-fixed-width80 {
    width: 80px;
    text-align: center;
}
.btn-fixed-width120 {
    width: 120px;
    text-align: center;
}
.btn-fixed-width160 {
    width: 160px;
    text-align: center;
}
.btn-fixed-width200 {
    width: 200px;
    text-align: center;
}
.btn-fixed-width240 {
    width: 240px;
    text-align: center;
}

/* 必須項目を示すためのカスタムプロパティ */
:root {
    --required-symbol: '*'; /* 表示記号 */
    --required-color: #ff0000; /* 赤色 */
    --required-font-size: 1.2em; /* サイズを少し大きく */
    --required-margin-left: 0.3em; /* ラベルとの間隔 */
}

/* 必須項目用のクラス */
.required-label::before {
    content: var(--required-symbol);
    color: var(--required-color);
    font-size: var(--required-font-size);
    font-weight: bold;
    margin-right: var(--required-margin-left);
    vertical-align: top;
}

/* スピナー（ぐるぐる）のスタイルとアニメーション */
.spinner {
    border: 8px solid #f3f3f3; /* 輪郭の薄いグレー */
    border-top: 8px solid #3498db; /* 上部だけ青色 */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite; /* 1秒で1回転 */
}

/* アニメーションの定義 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}