@charset "utf-8";

body {
    counter-reset: number 0;
}

/* Mainview
----------------------------------------- */
.mainView {
    position: relative;
    padding: min(2.667vw,13px) min(3.467vw,17px) min(3.2vw,15px);
    background-color: #fff9eb;
}
.mainView_txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: min(1vw,60px);
}
.mainViewTxt_sub {
    margin-bottom: min(.8vw,4px);
    font: 700 3rem/1.2 'YuGothic', 'Yu Gothic', YakuHanJP, 'Noto Sans JP', sans-serif;
    font-size: min(5.067vw,2.4rem);
    color: #16409e;
}
.mainViewTxt_main {
    margin-bottom: 3vw;
    font: 700 1.9rem/1.2 YakuHanMP, 'Noto Serif JP', serif;
    font-size: min(7vw,3.8rem);
    color: #d11717;
}
.mainView_movie {
    position: relative;
    margin: 0 auto;
    width: min(56vw,620px);
    height: min(31.467vw,349px);
    padding: 2.415vw 6.639vw;
    background: url(/wp/wp-content/themes/teacher/images/lp-teachers/backimage_pc.png) top center/contain no-repeat;
}
.mainView video {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #908D85;
    background-color: #908D85;
}
@media screen and (min-width: 834px){
    .mainView {
        width: 100%;
        min-width: 1350px;
        display: flex;
        justify-content: center;
        padding-top: min(3.5vw,35px);
        margin-bottom: 20px;
        height: 424px;
    }
    .mainView_txt {
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        margin-bottom: 50px;
        flex-shrink: 0;
        margin-left: auto;
    }
    .mainViewTxt_sub {
        margin-bottom: min(1.4vw,14px);
        font-size: min(2.9vw,2.9rem);
    }
    .mainViewTxt_main {
        font-size: min(5vw,5rem);
    }
    .mainView_movie {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-left: 0;
        width: 620px;
        height: 349px;
        padding: 56px 73px;
    }
}
@media screen and (max-width: 414px){
    .mainView_movie {
        width: min(82.126vw,620px);
        height: min(46.135vw,349px);
        padding: 3.415vw 9.339vw;
    }
}



/*----------------------------------------------------------------------
特徴
----------------------------------------------------------------------*/
#messageBox_wrapper .read_checkLists {
    margin: 0;
}
.read_checkLists li:not(#messageBox_wrapper .read_checkLists li)::before {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(1.4rem,3.733vw,1.8rem);
    content: counter(number);
    counter-increment: number 1;
    background-image: none;
    background-color: #e39859;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 50px;
    width: clamp(23px,6.133vw,28px);
    height: clamp(23px,6.133vw,28px);
}
@media screen and (min-width: 835px) {
    #messageBox_wrapper .read_checkLists {
        width: 100%;
    }
    #messageBox_wrapper .read_checkLists li {
        padding-left: 40px;
        font-size: 2.4rem;
    }
}

.read_checkLists {
    padding: 0 20px;
}
.read_checkLists li {
    font-size: 1.6rem;
}
.read_checkLists li::before {
    top: -7px;
}
@media not screen and (max-width: 834px){
    .read_checkLists {
        margin: 20px auto;
        padding: 0;
        max-width: 880px;
    }
    .mainView + .read_checkLists li {
        font-size: 2.3rem;
        margin-bottom: 10px;
    }
}


.teacher_area {
    margin-top: 0;
    padding: 0;
    background: none;
}
.teacher_reason_cont {
    padding: 0;
}
.detailBtn {
    margin-bottom: 13px;
    height: 55px;
}
.detailBtn>* {
    font-size: 1.6rem;
    justify-content: flex-start;
    padding-inline: 30px 0;
}
.detailBtn>*::after {
    right: 20px;
}
@media not screen and (max-width: 834px){
    .teacher_reason_cont {
        margin: 0 auto 20px;
        max-width: none;
    }
    .leadBtm {
        display: flex;
        margin-block: 0;
        padding: 0;
        gap: 20px;
    }
    .detailBtn {
        margin-bottom: 15px;
        height: 65px;
    }
}
@media screen and (min-width: 835px) {
    .teacher_area {
        margin-top: 10px;
        padding: 0 10px 1px;
    }
    .teacher_reason_cont {
        margin-bottom: 10px;
        padding-top: 15px;
    }
    .detailBtn {
        width: calc(100% - (28px));
    }
}


.listWrap {
    margin-bottom: min(var(--sp-50px),70px);
}
.listWrap dl {
    position: relative;
    display: grid;
    grid-gap: min(var(--sp-15px),20px);
    margin-bottom: calc( var(--arr-height) + min(var(--sp-5px),10px) );
    padding: 31px 6.25%;
    background-color: #f9f4e8;
    --arr-height: min(var(--sp-27px),31px);
}
.listWrap dl::after {
    content: '';
    position: absolute;
    transform: translateX(-50%);
    top: 100%;
    left: 50%;
    width: min(var(--sp-60px),68px);
    height: var(--arr-height);
    background-color: #f9f4e8;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.listWrap dt {
    margin-block-end: 5px;
    font-size: min(var(--sp-23px),3rem);
    line-height: 1.2;
}
.listWrap dd {
    display: flex;
    gap: min(var(--sp-5px),10px);
    font-size: min(var(--sp-18px),1.9rem);
    font-weight: 700;
    line-height: 1.3;
}
.listWrap dd::before {
    content: '';
    flex-shrink: 0;
    margin-top: -5px;
    width: 27px;
    height: 28px;
    background: url(/wp/wp-content/themes/teacher/images/common/icon_check.svg) 0 0/contain no-repeat;
}
.listWrap p {
    text-align: center;
    color: #ce0303;
    font: 700 min(var(--sp-26px),38px)/1 var(--fontFamily-serif-noto);
}
.listWrap p ruby > rt {
    font-size: 70%;
}
@media not screen and (max-width: 834px){
    .listWrap dl {
        justify-content: center;
        grid-template-columns: 880px;
    }
    .listWrap dd {
        margin-inline: 38px;
    }
}



@media screen and (max-width: 768px) {
    .closing_cta.middle_position {
        width: 100%;
        margin: 0;
    }
}




/* meritWrap */
.meritWrap {
    padding: min(var(--sp-30px),50px) 0;
    border-top: 3px solid #dd7829;
}
.meritConts {
    margin: auto;
    width: 100%;
    max-width: 880px;
}

.ttlTopH2 {
    position: relative;
    margin-bottom: min(var(--sp-20px),40px);
    color: #000;
    text-align: center;
    font-weight: 700;
    -webkit-font-feature-settings: "halt";
            font-feature-settings: "halt";
    line-height: 1;
}
.ttlTopH2_main,
.ttlTopH2_sub {
    display: block;
}
.ttlTopH2_main {
    font: 900 min(var(--sp-30px),5rem)/1.5 var(--fontFamily-serif-yakuhan)
}
.ttlTopH2_sub {
    margin-bottom: 5px;
    font: 700 min(var(--sp-17px),2.8rem)/1.3 var(--fontFamily-sans-yakuhan)
}

/* txt */
.meritConts_txt {
    margin-bottom: 40px;
}

/* merit */
.meritConts_meritCont{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.meritConts_merit {
    width: calc(50% - 10px);
    margin-bottom: 20px;
    counter-increment: meritNum;
    font-weight: bold;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "YuGothic", "Yu Gothic", sans-serif;
    -webkit-font-feature-settings: "halt";
            font-feature-settings: "halt";
    border: solid 2px #e0762b;
}
.meritContsMerit_txt,
.meritContsMerit_img {
    width: 100%;
}
.meritContsMerit_txt {
    margin-right: 40px;
}
.meritContsMeritTxt_num {
    padding: 5px 0;
    font-size: 2rem;
    line-height: 1.3;
    text-align: center;
    color: #fff;
    background: #dd7829;
}
.meritContsMeritTxt_num::after {
    content: counter(meritNum);
}
.meritContsMeritTxt_sub,
.meritContsMeritTxt_main{
    padding: 0 20px;
}
.meritContsMeritTxt_sub {
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: 1.7rem;
    line-height: 1;
}
.meritContsMeritTxt_main {
    margin-bottom: 12px;
    color: #aa0b0b;
    font-size: 1.9rem;
    line-height: 1.3;
}
@media screen and (max-width: 835px){
    .meritWrap {
        padding-inline: clamp(20px,var(--sp-20px),40px);
        background-size: 100% auto;
    }
    .ttlTopH2_sub.top {
        margin-bottom: 1vw;
    }
    .meritConts_merit {
        display: block;
        width: 100%;
    }
    .meritConts_txt {
        margin-bottom: 50px;
    }
    .meritContsMerit_txt {
        margin-right: 0;
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 480px){
    .meritContsMeritTxt_num {
        margin-bottom: 12px;
        padding-bottom: 7px;
        font-size: 1.7rem;
    }
    .meritContsMeritTxt_sub {
        font-size: 1.7rem;
        line-height: 1.3;
    }
    .meritContsMeritTxt_main {
        font-size: 2rem;
    }
    .meritWrap .detailBtn {
        width: 100%;
    }
}


.teacherVoice {
    margin-bottom: 0;
    padding-block: min(calc(0.267vw * 20),55px) min(calc(0.267vw * 20),40px);
    background-color: #f9f9f3;
}

.cont02 {
    margin-bottom: min(calc(.627vw * 40),60px);
}
.btnWrap {
    display: grid;
    justify-content: center;
    grid-template-columns: calc(100% - (28px * 2));
    grid-gap: 20px 10px;
}
.btnWrap .detailBtn {
    margin: 0;
}
.btnWrap h3 {
    display: flex;
    align-items: center;
    gap: min(var(--sp-20px),40px);
    padding: 0;
    margin-bottom: 0;
    font-size: 2.3rem;
}
.btnWrap h3::before,
.btnWrap h3::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: #a6a6a6;
}
.btnWrap .detailBtn {
    width: 100%;
}
@media not screen and (max-width: 835px){
    .btnWrap {
        grid-template-rows: repeat(2,auto);
        grid-template-columns: repeat(4,1fr);
    }
    .btnWrap h3 {
        grid-column: 1 / -1;
    }
    .btnWrap .detailBtn > * {
        justify-content: start;
        padding-inline: 20px;
        font-size: 1.8rem;
    }
    .btnWrap .detailBtn > *::after {
        right: 13px;
    }
}



.flowWrap {
    display: grid;
    justify-content: center;
    margin-block: 100px 50px;
    padding-inline: 20px;
    border-block: var(--border-size) solid;
    border-block-start-color: #5e977f;
    border-block-end-color: #73a8c8;
    background-color: #f4f8fe;
    --border-size: min(var(--sp-5px),8px);
    padding-bottom: 30px;
}
.flowWrap h2 {
    position: relative;
    display: grid;
    place-content: center;
    place-items: center;
    grid-gap: 5px;
    transform: translateY(-50%);
    padding: min(var(--sp-18px),20px);
    color: #d65900;
    font: 700 clamp(24px,var(--sp-26px),38px)/1 var(--fontFamily-serif-noto);
    border: var(--border-size) solid #ea7d2f;
    border-radius: 1000px;
    background-color: #fffbf0;
    --border-color: #ea7d2f;
    --background-color: #fffbf0;
}
.flowWrap h2::before,
.flowWrap h2::after {
    content: '';
    position: absolute;
    transform: translateX(-50%);
    top: 100%;
    left: 50%;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.flowWrap h2::before {
    width: min(var(--sp-40px),62px);
    height: min(var(--sp-23px),35px);
    background-color: var(--border-color);
}
.flowWrap h2::after {
    margin-top: calc(min(var(--sp-5px),5px) * -1);
    width: min(var(--sp-36px),50px);
    height: min(calc(var(--sp-1px) * 21),29px);
    background-color: var(--background-color);
}
.flowWrap h2 .sub {
    font-size: 73.6%;
}
.flowWrap ul {
    display: grid;
    grid-gap: min(var(--sp-30px),40px);
    margin-block: -20px 30px;
}
.flowWrap li {
    position: relative;
    display: grid;
    place-content: center start;
    grid-auto-flow: column;
    grid-gap: min(var(--sp-14px),19px);
    padding: min(var(--sp-7px),10px) var(--sp-17px);
    min-height: 80px;
    font: 700 clamp(1.8rem,var(--sp-20px),2.4rem)/1.2 var(--fontFamily-sans-yakuhan);
    border: 2px solid #223a70;
    background-color: #fff;
    border-radius: min(var(--sp-10px),10px);
    counter-increment: num;
}
.flowWrap li::before {
    content: counter(num, decimal-leading-zero);
}
.flowWrap li:not(:last-of-type)::after {
    content: '';
    position: absolute;
    transform: translateX(-50%);
    top: 100%;
    left: 50%;
    width: min(var(--sp-45px),45px);
    height: min(var(--sp-28px),34px);
    background-color: #223a70;
    clip-path: polygon(
        var(--clip-size) 0,
        calc(100% - var(--clip-size)) 0,
        calc(100% - var(--clip-size)) var(--clip-size-height),
        100% var(--clip-size-height),
        50% 100%,
        0 var(--clip-size-height),
        var(--clip-size) var(--clip-size-height)
    );
    --clip-size: min(calc(var(--sp-1px) * 7.5),7.5px);
    --clip-size-height: min(var(--sp-8px),14px);
}
.flowWrap li:last-of-type {
    color: #c00a0a;
    border-color: #d8002e;
}
.flowWrap .detailBtn a {
    font-size: 2rem;
    justify-content: center;
    padding-left: 0;
}
@media not screen and (max-width: 834px){
    .flowWrap {
        grid-template-columns: 800px;
    }
    .flowWrap li {
        padding-inline: 70px;
    }
}

@media screen and (max-width: 600px){
    .flowWrap .detailBtn a {
        font-size: 1.8rem;
        line-height: 1.2;
    }
}