@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(min-width:960px){

/* common */
.sp {
display:none;
}

img {
width:100%;
}

.title {
font-size:180%;
font-weight:bold;
text-align:center;
padding-bottom:10px;
}

.copy {
text-align:center;
font-size:100%;
padding-bottom:40px;
}

.copy .line {
border-top:#464646 1px solid;
padding-top:7px;
}

.container {
width:900px;
margin:auto;
background:#fff;
box-shadow:0 0 10px #ccc;
border-radius:6px;
padding:50px 100px 30px;
}

i {
padding-right:5px;
}


/* header*/
header {
width:210px;
margin:auto;
padding:30px 0;
}


/* login */
.forget {
font-size:90%;
text-align:center;
padding-top:30px;
}



/* form */
form {
text-align:center;
padding-bottom:30px;
}

.formstyle {
width:100%;
font-size:120%;
background:#f5f5f5;
margin-bottom:15px;
border-radius:10px;
padding:15px 20px;
appearance:none;
outline:0;
}

.submitstyle {
width:30%;
margin:auto;
padding:15px 15px;
font-size:100%;
font-weight:bold;
background:#0096d2;
color:#fff;
border-radius:10px;
text-align:center;
appearance:none;
border:none;
outline:0;
}

input[type="text"] {
border:1px solid #e1e1e1;
}

input[type="text"]:focus {
border:1px solid #0096d2;
background:#f5f8f8;
}

input[type="password"] {
border:1px solid #e1e1e1;
}

input[type="password"]:focus {
border:1px solid #0096d2;
background:#f5f8f8;
}

button:hover {
opacity:0.7;
}


/* mypage */
.mypage_copy {
padding-bottom:0;
}

.mail {
color:#969696;
font-size:90%;
text-align:center;
}

.number {
color:#969696;
font-size:90%;
text-align:center;
padding-bottom:50px;
}

.title_area {
display:flex;
padding-bottom:5px;
}

.members_title {
width:50%;
color:#0096d2;
font-weight:bold;
font-size:110%;
}

.members_time {
width:50%;
text-align:right;
font-size:90%;
color:#969696;
}

.members {
border:#0096d2 2px solid;
border-radius:10px;
padding:25px 30px;
font-size:90%;
margin-bottom:50px;
}

.members_end {
margin-bottom:0;
}

.information_title {
width:50%;
color:#c84632;
font-weight:bold;
font-size:110%;
}

.information_time {
width:50%;
text-align:right;
font-size:90%;
color:#969696;
}

.information {
border:#c84632 2px solid;
border-radius:10px;
padding:25px 30px;
font-size:90%;
margin-bottom:50px;
}

.data {
text-align:center;
}

.data .foot_logo {
width:20%;
margin:auto;
padding-bottom:15px;
}

.data .contact {
font-size:80%;
}

.data .tel {
font-size:130%;
color:#c84632;
font-weight:bold;
}

.data .time {
font-size:80%;
padding-bottom:5px;
}

.data .contact_mail {
font-size:80%;
width:200px;
margin:auto;
color:#fff;
}

.data .contact_mail a {
display:block;
padding:10px;
color:#fff;
background:#0096d2;
border-radius:6px;
}

.data .contact_mail a:hover {
opacity:0.7;
}

.change {
font-size:80%;
width:200px;
margin:auto;
color:#fff;
padding-top:10px;
text-align:center;
}

.change a {
display:block;
padding:10px;
color:#fff;
background:#9ebc52;
border-radius:6px;
}

.change a:hover {
opacity:0.7;
}


/*confirmation*/
.confirmation .result {
width:80%;
margin:0 auto 15px;
padding:15px 20px;
background:#f5f5f5;
display:flex;
border:1px solid #e1e1e1;
border-radius:10px;
}

.confirmation .result_title {
width:30%;
text-align:right;
padding-right:20px;
color:#969696;
}

.confirmation .result_detail {
width:70%;
text-align:left;
}

.error {
color:#c84632;
padding-bottom:10px;
font-size:90%;
font-weight:bold;
}


/*logout*/
.logout {
text-align:center;
}

.logoutstyle {
position:fixed;
z-index:1;
right:10px;
top:10px;
margin:auto;
padding:7px 12px;
font-size:70%;
font-weight:bold;
background:#fff;
color:#ccc;
border:#ccc 1px solid;
border-radius:10px;
text-align:center;
appearance:none;
outline:0;
cursor:pointer;
}


/*finish*/
.finish_message {
text-align:center;
font-size:100%;
padding:20px 0 70px;
}

.finish_back{
text-align:center;
}

.backstyle {
margin:auto;
padding:10px 15px;
font-size:80%;
background:#fff;
color:#ccc;
border:#ccc 1px solid;
border-radius:10px;
text-align:center;
appearance:none;
outline:0;
cursor:pointer;
}


/* footer */
footer {
padding:20px 0;
text-align:center;
font-size:70%;
color:#969696;
}


}