/*
 ログイン スタイル CSS
*/

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column; /* 上から下へ配置 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    color: #333333;
    background-color: #F7F4EA;
    font-family: 'Roboto', sans-serif; /* Google Fontsの例 */
}

/* Chrome, Safari, Edge, Opera */
.form-control::placeholder {
    color: #ccc;
}

/* Firefox */
.form-control::-moz-placeholder {
    color: #ccc;
}

/* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder {
    color: #ccc;
}

span {
    font-size: 14px;
    color: #61758A;
}

.tech-container {
    margin: 18px auto ;
    text-align: center;
    color: #3A7CA5;
    font-size: 24px;
    z-index: 1000;
}

.title {
    font-size: 24px;
    margin-bottom: 25px;
}

.login-form {
    width: 570px;
    padding: 0px 50px;
}

.login-container {
    padding: 30px;
    margin: 10px auto;
    border-radius: 8px;
    background-color: #cccccc;
}

.text-center {
  text-align: center; /* 横方向のみ中央揃え */
}

.sign-container {
    padding: 30px;
    margin: 15px auto;
    border-radius: 8px;
    background-color: #cccccc;
}

.signup-success-container {
    width: 100%;
    margin: 75px auto;
}

.sign-form {
    width: 550px;
    padding: 0px 30px;
}


.logout-container{
    margin: 15% auto;
    width: 100%;
}

.password-reset-container {
    padding: 30px 30px;
    margin: 15px auto;
    border-radius: 8px;
    background-color: #cccccc;
}

/* パスワード変更 */
.password-reset-form {
    width: 525px;
    padding: 40px;
}
.password-reset-success-container {
    width: 550px;
    padding: 20px;
    margin: 8% auto;
}

/* パスワード再設定 */
.password-setting-form {
    width: 525px;
    padding: 20px;
}
.password-setting-container {
    padding: 20px 30px;
    margin: 15px auto;
    border-radius: 8px;
    background-color: #cccccc;
}

.btn-custom {
    background-color: #F4A261;
    color: #FFF;
    border: none;
    border-radius: 7.5px;
    padding: 10px 20px;
    transition: background-color 0.2s ease;
}
.btn-custom:hover {
    background-color: #C58315;
    color: #FFF;
}

.btn-custom-signup {
    margin-top: 30px;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    color: #F4A261;
    transition: background-color 1.0s ease;
}
.btn-custom-signup:hover {
    color: #F4A261;
    border: none;
}
.btn-custom-signup:active {
    color: #F4A261;
}

.btn-custom-signup2 {
    border: none;
    padding: 8px 0px ;
    font-size: 14px;
    color: #61758A;
    transition: background-color 1.0s ease;
}
.btn-custom-signup2:hover {
    color: #AAAAAA;
    border: none;
}
.btn-custom-signup2:active {
    color: #AAAAAA;
}


/* スマホサイズ（576px以下）での上書き */
@media screen and (max-width: 576px) {

body {
    display: block;
}

.title{
    margin-top: 20px;
}


.login-container {
    padding: 5px;
    margin: 40px 2%;
}

.sign-container {
    padding: 5px;
    margin: 40px 2%;
}

.login-form {
    width: 100%;
    padding: 0px 10px;
}

.sign-form {
    width: 100%;
    padding: 0px 10px;
}

.password-reset-container {
    padding: 5px;
    margin: 40px 2%;
}
.password-reset-form {
    width: 100%;
    padding: 5px;
}

.password-reset-success-container {
    width: 95%;
    padding: 5px;
    margin: 40px 2%;
}

.password-setting-form {
    width: 100%;
    padding: 5px;
}
.password-setting-container {
    width: 95%;
    padding: 5px;
    margin: 15px auto;
    border-radius: 8px;
    background-color: #cccccc;
}

/*
  .menu {
    display: none; * 例: 大きなメニューは非表示
  }

  .sp-menu {
    display: block; * 例: ハンバーガーメニュー表示
  }
*/

}