@charset "utf-8";

/* section */
.section{
    padding-top:40px;
    padding-bottom: 144px;
}

.section__wrap{
    max-width: 840px;
    margin: auto;
}

/* form-intro */
.form-intro__title{
    font-size: 32px;
    text-align: center;
    margin-bottom: 32px;
}


.message{
    width:800px;
    padding:20px;
    margin: auto;
}

.vertical-center{
    display: flex;
    justify-content: center;
    align-items: center;
    height:calc(80vh - 92px);
}

.glade-box{
    margin-top: 16px;
    background-color:cornsilk;
    padding: 16px;
}

@media (max-width:599px) {
    h2[class = mail-attention]{
        margin-top:20px;
    }
}

/*************************************
手順リスト
*************************************/
.form-step{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    counter-reset: counter-name;
    margin-bottom:24px;
    padding:16px;
}

.form-step__text::before{
    content: counter(counter-name)'';
    counter-increment: counter-name;
    border-radius:100%;
    background:silver;
    display: block;
    text-align: center;
    height:25px;
    width: 25px;
    margin: auto;
    padding:15px;
}

.form-step__text#current::before{
    background: rgb(18, 194, 218);
    color: white;
}

.form-step__line{
    position: relative;
    content:"";
    border-top:2px dashed silver;
    padding-bottom:20px;
    flex-grow: 1;
}

.form-step__line--end{
    border-top:2px dashed rgb(18, 194, 218);
}

.form-step__line--false{
    border-top:2px dashed #df1014;
}

i{
    font-size:2rem;
    margin-right:10px;
}

.form-step__line i{
    content:"";
    color:silver;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 0;
    left: 50%;
    background:white;
    font-size:3rem;
    z-index:2;
}

.form-step__line--false i{
    color:#df1014;
}
.form-step__line--end i{
    color: rgb(18, 194, 218);
}

.form-step__text{
    width:100px;
    font-size:1rem;
    word-break: break-word;
    text-align: center;
    margin:0px auto;
}

@media (max-width:599px) {
    .form-step__text::before{
        height:15px;
        width: 15px;
    }
    .form-step__line i{
        font-size:32px;
    }
    .form-step{
        padding: 16px 0;
    }
}

/*************************************
申し込みフォーム説明
*************************************/
.form-explanation{
    background:cornsilk;
    border-radius:5px;
    border: none;
    padding:40px 24px;
    margin:0 auto 40px;
}

.form-explanation__title{
    text-align: center;
    font-size:24px;
    margin-bottom:24px;
    text-align: center;
    font-weight: bold;
}

.form-explanation__text{
    line-height: 1.4em;
    text-align: center;
}

@media screen and (max-width:820px) {
    .form-explanation{
        width:calc(100% - 40px);
    }
}
@media screen and (max-width:599px) {
    .form-explanation__text{
        font-size: 16px;
        text-align: left;
    }
}

/*
.form-explanation-error 
-------------- */
.form-explanation-error{
    background:#fae6e7;
    border-radius:5px;
    border:2px solid #df1014;
    color: #df1014;
    line-height:1.2em;
    padding: 24px;
    margin-bottom: 24px;
}

.form-explanation-error a,
.mail-attention-box a{
    color:#337ab7;
    text-decoration: underline;
}

.date{
    width:calc(100% - 40px);
    padding:20px 10px;
    margin:20px auto;
    border-radius:10px;
    font-size:1.2rem;
    text-align: center;
    background-color:#df1014;
    color: white;
    line-height:25px;
}

.colorRed {
	color: #df1014;
}

/*************************************
自動送信メール注意書き
*************************************/
.mail-attention__title{
    color: #ff0000;
    font-weight: bold;
    font-size:24px;
    margin: 0 auto 8px;
    text-align: center;
}

.mail-attention__item{
    padding:24px;
    border:dashed 2px #ff0000;
    margin: auto;
}

.mail-attention__lists{
    width:calc(100% - 20px);
    counter-reset: my-counter;
    list-style-position:outside;
    font-size:16px;
    padding:0;
    color: #ff0000;
}

.num-circle-list{
    margin-bottom: 8px;
}

.num-circle-list a{
    display: inline-block;
    color:#337ab7;
    text-decoration: underline;
}

@media screen and (max-width:820px) {
    .mail-attention__item{
        width:calc(100% - 40px);
    }
    .mail-attention__title{
        width:calc(100% - 40px);
    }
}

@media (max-width:599px) {
    .mail-attention__item{
        padding:16px;
    }
    .mail-attention__title{
        font-size: 20px;
    }
}

/*************************************
申し込みフォーム 
*************************************/
.form{
    border-radius:5px;
    border:5px solid #efefef;
    padding-top: 0px;
    padding:24px;
    margin: auto;
    box-sizing: border-box;
}

.form__title{
    text-align: center;
    font-size:24px;
    padding:16px;
    border-radius:5px;
    background:dimgray;
    color:white;
}

.form__contents{
    display: flex;
    flex-direction: column;
    padding:32px 10px 32px 10px;
}

.form-input__text{
    margin-top: 8px;
    font-size:14px;
    color: #666666;
}

.form-input{
    display: flex;
    flex-wrap: wrap;
    padding:0;
}

.form-input__head{
    position: relative;
    width: 30%;
    font-weight: bold;
    padding:24px 16px;
    background: #f7f7f7;
}

.form-input__data{
    width: 70%;
    padding:24px 16px;
}

.form-input__head::after{
    position: absolute;
    content:"必須";
    font-weight: bold;
    background: #df1014;
    color: white;
    border-radius:8px;
    font-size:14px;
    padding:2px 8px;
    right:16px;
}


.account-submit{
    background:rgb(50, 151, 10);
    color: white;
    font-size:1.2rem;
    padding: 20px 40px;
    border: none;
    border-radius:2px;
    margin:10px auto;
    margin-top:20px;
    -webkit-appearance: none;
    cursor:pointer;
    display: block;
}

.account-submit::after{
    font-family: "Font Awesome 5 Free";
    content:"\f138";
    margin-left:10px;
    font-weight: 400;
    color:white;
}

.input-error{
    color: #df1014;
    display: block;
}

.form-input__input{
    width:400px;
    padding:10px 15px;
    font-size:1.2rem;
    -webkit-appearance: none;
}

select::-ms-expand{
    display:none;   
}

.form-input__input--year,
.form-input__input--day,
.form-input__input--month{
    width:100px;
}

.form-input__input--year{
    width: 128px;
}

.form-input__input--error{
    border: solid 1px #df1014;
    background: #fddfe0;
}

.form-input__input--error:focus,
.form-input__input:focus{
    background-color: white;
    border:solid 1px rgb(18, 194, 218);
}

.input-error::before{
    content: "※";
    color: #df1014;
}

.select-box{
    position: relative;
    display: inline-block;
}

.select-box--category{
    width: 400px;
}

.select-box--number{
    margin:0 8px;
}

.select-box--number:first-child{
    margin-left: 0;
}

.select-box::before{
    position:absolute;
    top: 20px;
    right: 15px;
    content:"";
    border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
    pointer-events: none;
}

@media (max-width:599px) {
    .form{
        padding:16px;
    }
    .form-input{
        display: block;
    }
    .form-input__head{
        width:100%;
    }
    .form-input__data{
        width: 100%;
        padding: 24px 0;
    }
    .form-input__input{
        width:100%;
        margin:0;
    }
    .form-input__input--year{
        width:128px;
    }
    .form-input__input--day,
    .form-input__input--month{
        width:60px;
    }
    .form__contents{
        padding:32px 0;
    }
    .select-box--category{
        width:100%;
    }
    .select-box--number{
        margin:0 4px;
    }
}

/*************************************
申し込みフォーム成功時
*************************************/
.form-success-images{
    background-image: url("../images/champion_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    margin-bottom:20px;
}
.form-success-images img{
    display: block;
    width:300px;
    margin:auto;
    object-fit: contain;
}

@media (max-width:820px) {
    .form-success-images{
        padding:0 20px;
    }
}

/*************************************
個人情報の同意
*************************************/
.consent-box {
    height: 200px;
    border: 1px solid #000;
    overflow-y: scroll;
    white-space: pre-line;
    font-size:1rem;
    line-height:1.4;
    padding: 16px;
    margin-bottom: 24px;
}

label[for = consent]{
    margin:10px auto;
    padding:10px;
    border:2px solid silver;
    font-weight: bold;
}

label[for = consent].clicked{
    background:cornsilk;
}

label[for = consent].error{
    background:#fae6e7;
}

@media (max-width:768px) {
    .consent-box {
        width:100%;
    }
}


/************************************** 
footer 
**************************************/
footer{
    position: absolute;
    background-color: #EEEEEE;
    width:100%;
    text-align: center;
    bottom:0px;
    padding:20px 0px;
}

.ftCopyright {
    padding: 0;
    font-size: 1.4rem;
    color: #999;
}
.ftCopyright small {
    letter-spacing: 0.05em;
}

/************************************
PC,SP
***********************************/
.pc { display: block !important;}
.sp { display: none !important; }

@media (max-width:599px) {
  .pc { display: none !important; }
  .sp { display: block !important; }
}