h2,h3,h4{
    margin: 0;
    line-height: 1.25;
}


h2{
    color: #0d60b9;
    font-size: 52px;
    font-weight: 400;
    margin: 8px 0;
}

h3{
    color: #012036;
    font-size: 22px;
    font-weight: 500;
}

h4{
    color: #012036;
    font-size: 18px;
    color: #707070;
}

p{
    margin: 24px 0;
    color: #707070;
}


.top_farstview{
    width: 100%;
    position: relative;
}

.top_farstview__img{
    width: 100%;
}

.top_farstview__title{
    position: absolute;
    top: 60%;
    left: 15%;
    color: #F5F5F5;
    text-shadow: 0px 3px 10px #1A1F22;
    font-weight: 300;
}

.top_farstview__title h1{
    font-size: 2.5vw;
    line-height: 1.25;
    margin: 0;
    font-family: "zen-kurenaido", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.top_farstview__title p {
    font-size: 1.2vw;
    color: #F5F5F5;
    font-weight: 100;
}

.top_farstmessage{
    width: 70%;
    margin: 120px auto 8px;
    text-align: center;
}

.top_farstmessage h2{
    color: #707070;
    font-size: 2vw;
}

.top_farstmessage__img {
    width: 4%;
    margin: 0 auto 3%;
}

.top_about{
    width: 80%;
    margin: 0 auto;
    padding: 7% 0;
    display: flex;
    justify-content: space-between;
    background-image: url(../img/top_suisai_001.png);
    background-size: 85%;
    background-position: 213% 98%;
    background-repeat: no-repeat;
}

.top_about__img{
    width: 50%;
}

.top_about__img img{
    border-radius: 20px 0 20px 0;
}

.top_interview{
    width: 80%;
    margin: 0 auto;
    padding: 5% 0;
    background-image: url(../img/top_suisai_002.png);
    background-size: 30%;
    background-position: -1% 10%;
    background-repeat: no-repeat;
}

.top_interview__menu{
    display: flex;
    justify-content: space-between;
}

.top_interview__menu_element{
    width: 30%;
}


.top_interview__menu_element_img img{
    border-radius: 20px 0 20px 0;

}

.top_interview__menu_element h4{
    text-decoration: underline;
    margin-top: 5%;
    font-size: 16px;
}


.top_training{
    width: 80%;
    margin: 0 auto;
    padding: 3% 0;
    background-image: url(../img/top_suisai_007.png);
    background-size: 30%;
    background-position: 82% 10%;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.top_training__img_1{
    width: 55%;
}

.top_training__img_1 img{
    border-radius: 0 0 20px 0;
}

.top_training__text{
    width: 35%;
    text-align: center;
}


.top_training__text .more_button{
    margin: auto;
}

.top_training__img_2{
    width: 100%;
    margin-top: 7%;
    z-index: 999;
}

.top_training__img_2_wrap{
    width: 30%;
    margin: 0 auto;
}

.top_training__img_2_wrap img{
    border-radius: 20px 0 20px 0;
}




.top_data{
    width: 100%;
    margin: -8% auto;
    padding: 160px 0;
    display: flex;
    justify-content: space-between;
    background-image: url(../img/top_suisai_005.png);
    background-size: 65%;
    background-position: 33% 0%;
    background-repeat: no-repeat;
}


.pagetop__arrow{
    width: 4%;
    position: fixed;
    bottom: 3%;
    right: 2%;
    z-index: 999;
}

@charset "utf-8";
button{
    cursor: pointer;
    transition: 0.2s;
}

button:not([disabled]):hover{
    opacity: 0.7;
}


.entryform{
    margin-left: auto;
    margin-right: auto;
}

.red{
    color: #E32525;
}

.es_steps{
    display: flex;
    justify-content: center;
}

.step{
    background-color: #ECECEC;
    color: #707070;
    width: 180px;
    padding:8px;
    margin:16px;
    text-align: center;
}

.step.current{
    background-color: #0B456B;
    color: #FFFFFF;
}

.es_step1,
.es_step2{
    width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.es_step1{
    color: #707070;
}
    .es_step1 input,
    .es_step1 select{
        padding: 0.5em 1em 0.5em 0.5em;
    }
.es_step2{
    color: #091F2D;
    transition: opacity visibility;
    transition-duration: 0.4s;
    opacity: 0;
    visibility: hidden;
}

.input_area,
.confirmation{
    display:grid;
    width: 720px;
    grid-template-columns: 2fr 7fr;
    grid-template-rows: 4em repeat(6, 3em);
    margin-left: auto;
    margin-right: auto;
    row-gap: 2em;
}

.input_area__column{
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    padding:2px;
    border-radius: 2px;
}

.input_area__column:has(.caution) input{
    background-color: #FFCFCF;
}

.rule{
    grid-column: span 2;
}

.caution{
    grid-column: 2 / 3;
    padding-left: 1em;
    color:red;
}

.label{
    padding-right: 2em;
    border: transparent 1px solid;
}

.field{
    padding-left: 8px;
}

.must{
    position: relative;
}

/*.must::after{
    color: #E32525;
    content:"＊";
    position:absolute;
    right: 1em;
    top: 1em;
}*/

.mail{
    width: 80%;
}

.es_step1_check{
    margin: 24px auto;
    width: 720px;
}

.es_step1_check__consent{
    background-color: #E8E8E8;
    text-align: center;
    cursor: pointer;
}

button.entry_btn{
    width: 216px;
    height: 48px;
    background-color: #319FE8;
    color: #ffffff;
    border-radius: 25px;
    border:none;
    display: block;
}

.next{
    margin: 40px auto;
}

button.entry_btn:disabled{
    background-color: #707070;
    position:relative;
}
button.next:disabled:hover::after{
    content:"入力内容を確認してください。";
    font-size: 16px;
    position:absolute;
    display: block;
    color:#ff5555;
    top: 60px;
    padding:8px;
    border-radius: 6px;
    width: max-content;
    opacity: 1.0;
}



.confirmation{
    display: grid;
}

.es_step2_check__btn{
    display: flex;
    justify-content: center;
    column-gap: 16px;
}

button.back{
    background-color: transparent;
    color: #319FE8;
    border: #319FE8 solid 1px;
}

button.to_top{
    color: #319FE8;
    border: #319FE8 solid 1px;
    background-color: #FFFFFF;
}

.step_container{
    position:relative;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
/*     overflow-x: hidden; */
}

.step_item{
    width: 100%;
    min-width: 100%;
    transition: 0.4s;
    margin-left: 0;
}

.passed{
    transition: margin-left opacity visibility;
    transition-duration: 0.4s;
    margin-left: -100%;
    opacity: 0;
    visibility: hidden;
}

.passed + .es_step2{
    opacity: 1;
    visibility: visible;
}

.current{
    animation-name: slide-in;
    animation-fill-mode: forwards;
    animation-duration: 0.7s;
    animation-timing-function: ease-in;
}

.es_step1_check .wpcf7-submit,.es_step1_check .wpcf7-previous{
    padding: 12px;
    margin: 3% auto;
    background-color: #319FE8;
    border: none;
    color: #FFF;
    font-weight: 600;
    border-radius: 50px;
    display: inline-block;
    width: 60%;
}

.entry-thanks{
    max-width: 720px;
    margin: 5% auto;
    width: 100%;
}

@keyframes slide-in{
    0%{
        opacity:0.1;
    }
    100%{
        opacity: 1;
    }
}

.es_step3{
    width: 600px;
    min-width: max-content;
}
.step3_container{
    justify-content: center;
}
.es_step3__to_top_btn{
    display: flex;
    justify-content: center;
    margin-top: 32px;
}


.subpage_farstview{
    position: relative;
    margin-bottom: 170px;
}

.subpage_farstview__title{
    position: absolute;
    padding: 40px;
    width: 34%;
    background-color: #F7F7F7;
    top: 80%;
    border-radius: 0 32px 32px 0;
}

.subpage_farstview__title h1{
    color: #0D60B9;
    font-family: Kiwi Maru;
    font-weight: 600;
    font-size: 40px;
}

.subpage_farstview__title p{
    color: #012036;
    margin: 12px 0;
}

.subpage_farstview img{
        width: 100%;
}

/*確認画面と完了画面を非表示*/
    .confirm_area,
    .thanks_area {
        display: none;
    }

    /*デフォルトのサンクスメッセージを非表示*/
    .wpcf7-response-output{
        display: none;
    }

    .wpcf7-not-valid-tip {
    display: inline-block;
    padding-left: 8px;
}

@media screen and (max-width: 1024px){
    .input_area, .confirmation,
    .es_step1_check{
        width: 96%;
        margin-inline: auto;
    }
    .input_area{
        /* width: 720px; */
        grid-template-columns: 7em auto;
        grid-template-rows: repeat(7, 1fr);
        row-gap: 0.2em;
    }
}

@media screen and (max-width: 680px){
    .input_area,
    .confirmation{
        display: block;
    }
    .caution{
        grid-column: unset;
    }
    .confirmation > .label{
        width: max-content;
        border-left: gray 2px solid;
        padding-left: .5em;
    }
    .confirmation .field + .label{
        margin-top: 16px;
    }
    .confirmation > .field{
        padding-left: 1em;
        font-size: 1.2em;
    }
    .must::after{
        left:-1.6em;
    }
}