body{
margin: 0;
}
h1{
padding-top: 70px;
text-align: center;
}
.container{
width: 95%;
margin: 0 auto;
}
.input-container {
position: relative;
}
input[required] {
width: 100%;
padding: 10px;
border: none;
border-bottom: 2px solid #ff4500;
outline: none;
font-size: 16px;
box-sizing: border-box;
transition: border-bottom 0.3s;
}
input, input[required]:not(:placeholder-shown) {
width: 100%;
padding: 10px;
border: none;
border-bottom: 2px solid #3498db;
outline: none;
font-size: 16px;
box-sizing: border-box;
transition: border-bottom 0.3s;
}
.input-container label {
position: absolute;
top: 10px;
left: 10px;
color: #7f8c8d;
font-size: 14px;
pointer-events: none;
transition: top 0.3s, font-size 0.3s;
}
input:focus + label, input:not(:placeholder-shown) + label {
top: -20px;
font-size: 10px;
color: #3498db;
}
input[required]:placeholder-shown + label::after{
content: "※入力必須項目";
font-size: 12px;
color: #ff4500;
}
#regist_btn {
width:100%;
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-align: center;
text-decoration: none;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
#regist_btn:hover {
background-color: #2980b9;
}
#regist_btn:disabled{
background-color: #C9C9C9;
cursor:not-allowed;
}
@media screen and (max-width:959px){
label {
font-size: 12px;
}
input:focus + label, input:not(:placeholder-shown) + label {
font-size: 10px;
}
input[required]:placeholder-shown + label::after{
font-size: 10px;
}
}
@media screen and (max-width:780px){
.input-container label {
font-size: 10px;
}
input:focus + label, input:not(:placeholder-shown) + label {
font-size: 8px;
}
input[required]:placeholder-shown + label::after{
font-size: 8px;
}
}
[id$='_error']{
display: block;
font-size:10px;
margin-bottom: 35px;
}
.error_text{
color: #ff4500;
font-size:14px;
}
.success_text{
color: #000000;
font-size:10px;
}
.error_line{
border-bottom: 2px solid #ff4500 !important;
}
.success_line{
border-bottom: 2px solid #3498db !important;
}
.password_toggle{
position: absolute;
top: 8px;
left: 385px;
width: 40px;
border: none;
cursor: pointer;
}
.password_toggle:hover{
opacity: 0.7;
}
input:focus ~ .password_toggle, input:not(:placeholder-shown) ~ .password_toggle {
top: -24px;
left: 305px;
}
.confirm_toggle{
position: absolute;
top: 8px;
left: 735px;
width: 40px;
border: none;
cursor: pointer;
}
.confirm_toggle:hover{
opacity: 0.7;
}
input:focus ~ .confirm_toggle, input:not(:placeholder-shown) ~ .confirm_toggle {
top: -24px;
left: 550px;
}