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;
    color: #646464;
    background-color: #E3E9E8;
}

footer {
    text-align: center;
}

.navbar {
    --bs-navbar-brand-color: #646464;
    --bs-navbar-brand-hover-color: #646464;
    --bs-navbar-color: #646464;
    --bs-navbar-hover-color: #646464;
}

.main-container {
    display:grid;
    width:100%;
    max-width:640px;
    margin: 0 auto;
}

.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;
}

.form-control {
    border-radius: 10px;
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-group {
    margin-bottom: 10px;
}

/* フォーカス時 */
.form-control:focus {
    border-color: #6366F1; /* indigo */
    box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

/* Validation エラー */
.form-control.input-validation-error {
    border-color: #DC3545;
    box-shadow: 0 0 0 3px rgba(220,53,69,0.15);
}

/* disabled */
.form-control:disabled,
.form-control[readonly] {
    background-color: #F8F9FA;
    opacity: 1;
}
button {
    width:80px;
}
input.form-control::placeholder {
    color: rgba(60, 60, 60, 0.35);
}

/* 日曜 */
.datepicker table tr td:first-child {
    color: #E57373;
}

/* 土曜 */
.datepicker table tr td:last-child {
    color: #64B5F6;
}

/* password form */
.password-field {
    position: relative;
}

.password-field input {
    padding-right: 24px;
}

.toggle-password {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    display: grid;
    place-items: center;
    width: 24px;
}

.toggle-password:focus-visible {
    outline: 2px solid #4C9FFE;
    outline-offset: 2px;
    border-radius: 6px;
}

.icon-hide {
    display: none;
}

.additional-note {
    margin-top: 8px;
}