@charset "UTF-8";

/* etc-common */
.visual{ height: 320px;
    background-image: url(/asset/img/visual-sub05.png);
    background-position: center bottom;
}
.visual .visual-header {top: 150px;}

/* join-S */

.join-step{display: flex; 
    justify-content: center;
    margin-bottom: 50px;
}
.join-step li{text-align: center;}
.join-step li + li {margin-left: 100px;}
.join-step li em{display: block;
    width: 80px; height: 80px; margin:0 auto 10px auto;
    font-size: 1.2rem;  line-height: 78px;
    border: 1px solid #34568b; border-radius: 100%;
    position: relative;
}
.join-step li.on em { color: #fff; background-color: #34568b;}
.join-step li + li em::before{content: "";
    width: 10px; height: 3px; margin: auto;    
    background-color: #34568b;
    position: absolute; left: -65px; top: 0; bottom: 0;    
}
.join-step li + li em::after{content: "";
    width: 10px; height: 3px; margin: auto;    
    background-color: #34568b;
    position: absolute; left: -45px; top: 0; bottom: 0;    
}
.join div {width: 90%; margin: 0 auto 30px auto;}
.join p {margin-bottom: 20px; color: #999;}

.join .join-box1 {overflow: auto;
    height: 350px; padding: 10px 30px 30px  10px ;
    background-color: #f7f7f7;
}

.join dl{margin-bottom: 20px;}
.join dt{margin-bottom: 10px;color: #34568b;}
.join dd{
    margin-bottom: 10px; padding: 0 20px;
    font-size: 1.4rem; color: #999;
}
.join dd em { display: block;
    margin-bottom: 5px;
    color: #34568b;
}
.join dd ul{padding: 0 20px;}
.join dd ul li {margin-bottom: 5px;}
.join dd ul ul {font-size: 1.2rem;}

.join-btn {display: flex; justify-content: center;}
.join-btn a{
    width: 35%; height: 40px;
    text-align: center; line-height: 40px;
    box-shadow: 0 5px 5px rgba(0,0,0,.1);
}
.join-btn a:first-child{
    margin-right: 5%;
    border: 1px solid #ccc;
    background-color: #eee;
}
.join-btn a:last-child{
    color: #fff;
    background-color: #34568b;
}
/* join-E */

/* join-list - S */
.join-list .form_area li{ display: flex; margin-bottom: 20px;}
.join-list .form_area label{width: 22%;}
.join-list .form_area label::after {content: "*";color: #f00;}
.join-list .form_area input{
    width: 60%; height: 40px; margin-right: auto;
    border: 1px solid #ddd;
}
.join-list .form_area input::placeholder {font-size: 1.4rem; color: #bbb;}
.join-list .form_area button{
    width: 15%;
    color: #fff;
    background-color: #34568b;
}
.join-tail p{font-size: 1.4rem;}
.join-list-btn {display: flex;
    justify-content: center;
}
.join-list-btn button{
    width: 30%; height: 40px;
    text-align: center; line-height: 40px;
    box-shadow: 0 5px 5px rgba(0,0,0,.1);
}
.join-list-btn button:first-child{
    margin-right: 5%;
    border: 1px solid #ccc;
    background-color: #eee;
}
.join-list-btn button:last-child{
    color: #fff;
    background-color: #34568b;
}
/* join-list - E */

/* join-compl - S */
.join-compl p{ 
    width: 100%; height: 200px; margin-bottom: 50px;
    border: 1px solid #aaa;
    font-size: 3rem; line-height: 200px; text-align: center;
    background-color: #f7f7f7;
}
.join-compl p em{color: #34568b;}
/* join-compl - E */

/* login - S */
.login {display: flex;
    width: 70%; margin: 50px auto ;
    position: relative;
}
.login::after {content: "";
    width: 1px;height: 100%; margin: auto;
    background-color: #ddd;
    position: absolute; left: 0; right: 0;  top: 0;
}

.login-form { flex: 1;margin-right: 10%;}
.login-form input {
    width: 100%; height: 50px; margin-bottom: 20px; padding: 10px;
    border: 1px solid #aaa;
}
.login-form input::placeholder {font-size: 1.4rem; color: #aaa;}
.login-form button {
    width: 100%; height: 50px;
    color: #fff; line-height: 50px; text-align: center;
    background-color: #34568b;
}

.login-sch { flex: 1}
.login-sch li img {width: 100%;}
.login-sch li {margin-bottom: 20px; color: #aaa;}
.login-sch li a {color: #34568b;}
/* login - E */





@media only screen and (max-width:1240px){
    .visual{height: 150px;}
    .visual .visual-header {top: 50px;}
    
    /* join-S */
    .join-step{margin-bottom: 20px;}
    .join-step li {font-size: 1.2rem;}
    .join-step li + li {margin-left: 20px;}
    .join-step li em{ width: 50px; height: 50px; line-height: 48px;}
    .join-step li + li em::before{display: none;}
    .join-step li + li em::after{display: none;}
    .join div {width: 100%;}
    .join p {font-size: 1.3rem;}

    .join .join-box1 {height: 250px; padding: 10px }
    .join dd{padding: 0;font-size: 1.3rem;}
    .join dd ul{padding: 0 }
    .join dd ul ul {font-size: 1.3rem;}

    .join .join-box2 {font-size: 1.3rem}
    .join .join-btn a{font-size: 1.3rem}
    /* join-E */

    /* join-list - S */
    .join-list .form_area li{
        flex-wrap: wrap; 
        margin-bottom: 10px;
    }
    .join-list .form_area label{width: 30%; font-size: 1.3rem}
    .join-list .form_area input{width: 70%; height: 30px;}
    .join-list .form_area input::placeholder {font-size: 1.2rem}
    .join-list .form_area button{width: 70%; height: 30px; margin-left: 30%;}
    .join-tail p{font-size: 1.2rem}

    .join-list-btn button{font-size: 1.3rem}
    /* join-list - E */

    /* login - S */
    .login {
        flex-direction: column;
        width: 100%; margin: 0px auto ;
    }
    .login::after {display: none}
    .login-form { margin-right: 0;}
    .login-form input {margin-bottom: 10px;}
    .login-sch li {margin-bottom: 10px; font-size: 14px;}
    /* login - E */

}