/* Logo Style*/
html,
body{
margin: 0;
height: 100%;
}

*{
font-family: "SourceHanSansJP",Helvetica, Verdana, 
"HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ ProN W3", 
"Hiragino Kaku Gothic Pro", "Noto Sans Japanese", "メイリオ", 
Meiryo, "ＭＳ Ｐゴシック", sans-serif;
color: #333333;
margin: 0;
padding: 0;
font-size: 16px;
}

body{
background: #f1f1f2;
}

.log-content{
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}

.container {
max-width: 400px;
margin: 0 auto;
padding: 0 10px;
flex: 1 1 auto;
}
h2{
text-align: center;
font-weight: normal;
}

.img img{
width: 40%;
display: block;
margin: 0 auto;
margin-top: 30px;
}
.form-group{
margin-bottom: 20px;
}

input[type="text"],
input[type="password"] {
width: calc(100% - 20px);
padding: 10.8px 10px;
border: 2px solid #ccc;
border-radius: 10px;
background-color: #FFFDDA;
}

input[type="text"]:focus,
input[type="password"]:focus {
outline: none;
border: 2px solid #0BA35C;
}

.formBtn{
text-align: center;
display: flex;
justify-content: space-around;
gap: 50px;
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 5px;
}

.formBtn button {
color: #ffffff;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
text-decoration: none;
border: none;
width: 100%;
font-size: 14px;
font-weight: 600;
height: 40px;
}

button[type="submit"],
button[type="button"]{
background-color: #f39800;
transition: 0.5s;
}

.form-group.check{
margin: 30px 0 25px 0;
}

.form-group.check label{
display: block;
position: relative;
padding-left: 20px;
margin-bottom: 0;
}

.form-group.check input{
position: absolute;
top: 4px;
left: 0;
margin: auto;
transform: scale(1.1);
}

/* forget pass btn */
.form-forgetPass {
 text-align: center;
}

.form-forgetPass a{
text-decoration: none;
color: #f0718e;
font-size: 14px;
transition: 0.5s;
border-bottom: solid 1px #ed5276;
}

form{
margin: 25px 10px 30px 10px;
}

.new_account{
text-align: center;
}

.account_log{
display: flex;
justify-content: space-evenly;
margin-top: 10px;
}

.first_log a{
background: #61C2A3 url(/joyca-cs/img/img.new/icon_entry.png);
}

.second_log a{
background: #B4B4B4 url(/joyca-cs/img/img.new/icon_entry.png);
}

.account_log a{
display: block;
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
width: 45px;
height: 45px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 5px;
}

footer{
text-align: center;
margin-bottom: 30px;
height: 65px;
}

.footer_title,
.footer_content a{
font-weight: bold;
}

.footer_content{
margin-bottom: 0;
}

.footer_content a{
color: #0ba35c;
border: none;
width: max-content;
margin: 5px auto;
display: block;
font-size: 20px;
position: relative;
text-decoration: none;
padding-left: 18px;
}

.footer_content a:before{
content: "";
display: block;
background: #0BA35C url(/joyca-cs/img/img.new/phone_icon.svg);
position: absolute;
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
width: 24px;
height: 24px;
left: -12px;
top: -2px;
border-radius: 20%;
}
footer span{
font-size: 12px;
margin-left: 10px;
}


/* new style 2025 */
input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #FFFDDA inset !important;
    -webkit-text-fill-color: black !important; 
}

@media screen and (min-width: 600px) {
    .footer_phone {
        pointer-events: none;
    }
}