@charset "UTF-8";

#wrapper {
    font-family: "Noto Sans JP", sans-serif;
    color: #222;
}

section {
    padding: clamp(1.25rem, 0.889rem + 1.81vw, 3.125rem)
        /*20-50*/
        0;
}

#wrapper dd {
    margin-left: 0;
}

.headPC .tagline {
    max-width: calc(100% - 48em);
}

.hdrTop .hdrBtn a.btnBl {
    background: #1B52C6;
}

.title_01 {
    font-size: clamp(1.375rem, 1.038rem + 1.69vw, 3.125rem)
        /*22-50*/
    ;
    padding: 0.25em;
    text-align: center;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 50px;
    color: #1e3264;
    letter-spacing: 0.03em;
}

.title_02 {}

.f_blue {
    color: #538ce4;

}

.f_big {
    font-size: 160%;
}

.bokasu {
    color: transparent;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

p.sub_comment {
    font-size: clamp(1rem, 0.952rem + 0.24vw, 1.25rem)
        /*16-20px*/
    ;
    text-align: center;
    padding: 0 1em 2em;
    letter-spacing: 0.03em;
}

/*****↓mainvisual****************************************/
.mainvisual {
    padding: clamp(.5em, 3vw, 2em);
    background: url(../images/topvisual.jpg) no-repeat center center;
    background-size: cover;
    min-height: 400px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    font-family: "Noto Sans JP", sans-serif;
    height: 84vh;
}

.mainvisual h1,
.mainvisual h2 {
    width: 100%;
}

.mainvisual::after {
    display: none;
}

.mainvisual h1 {
    font-size: 4rem;
    color: #111;
    text-shadow: none;
    white-space: nowrap;
    line-height: 1;
    font-weight: 600;
}

.mainvisual h1 .sub {
    color: inherit;
    text-shadow: inherit;
    font-size: 40%;
}

.mainvisual h2 {
    font-size: 1.7rem;
    font-weight: 600;
    color: #565656;
}

.mainvisual .btn {
    max-width: 600px;
    width: auto;
    margin: 4px 1em;
}

.mainvisual .btn a {
    padding: 1em;
    color: #1B52C6;
    border: 1px #1B52C6 solid;
    display: block;
    font-size: clamp(0.938rem, 0.805rem + 0.66vw, 1.625rem)
        /*15-26*/
    ;
    line-height: 1;
    position: relative;
    background-color: #fff;
    border-radius: 3em;
}

.mainvisual .btn a:after {
    content: "\f35a";
    font-family: FontAwesome;
    font-weight: 900;
    margin-left: 1em;
    margin-left: 1em;
}

.mainvisual .btn a:hover {
    background: #1B52C6;
    color: #fff;
}

@media(max-width: 1099px) {
    .mainvisual h1 {
        white-space: normal;
        font-size: 5vw;
    }
}

@media(max-width: 999px) {}

@media(max-width: 699px) {
    .mainvisual {
        font-size: 3.25vw;
    }

    .mainvisual h1 {
        font-size: 7.5vw;
        line-height: 1.3;
    }
}

@media(max-width: 599px) {
    .mainvisual .advantage_list li:before {
        min-width: unset !important;
        vertical-align: unset !important;
    }

    .mainvisual .advantage_list li span {
        display: inline !important;
    }
}

@media(max-width: 499px) {
    .mainvisual {
        font-size: 3vw;
    }

    .mainvisual .eyecatch {
        left: 5vw;
        top: 36vw;
        font-size: 100%;
    }

    .mainvisual .eyecatch>span {
        background: rgba(255, 255, 255, .8);
    }

    .mainvisual .advantage_list {
        font-size: 120%;
    }

    .mainvisual h2 {
        margin: 0 0 2em 0;
        font-size: 4.5vw;
    }

    .mainvisual .btn a {}

    .mainvisual {
        min-height: 300px;
        height: 60vh;
        padding: 10vh 0;
    }
}

/****↥mainvisual******************************************/
#sec01 {
    background: #fff;
}

.bg_grd_01 {
    background: transparent linear-gradient(73deg, #83a6ff 0%, #e0cdff 13%, #ffcaf4 28%, #bbfffe 51%, #dee0f5 70%, #ffd3dc 84%, #fffe92 100%) 0% 0% no-repeat padding-box;
}

#sec01 .inner,
#sec02 .inner {
    max-width: 1300px;
}

.alterList,
.utilizeList,
.qualification,
.skillBox .icoBox {
    justify-content: space-between;
}

.alterList li {
    width: 19%;
    background: #fff;
    padding: 3em 1em;
    border-radius: 10px;
    border: solid 1px #ccc;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.alterList li .imgArea {
    margin: 0 auto;
    width: 60%;
    min-width: 100px;
    text-align: center;
}

.alterList li .imgArea .main_icon {
    height: 100px;
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: contain;
}

.alterList li dt {
    font-size: clamp(1.125rem, 1.101rem + 0.12vw, 1.25rem)
        /*18-20*/
    ;
    text-align: center;
    font-weight: 600;
}

.utilizeList {}

.utilizeList li {
    width: 31%;
    border-radius: 10px;
    background: #fff;
}

.utilizeList h3 {
    text-align: center;
    color: #fff;
    padding: 0.15em;
    font-size: 150%;
}

.utilizeList dl {
    padding: 1.5em;
}

.utilizeList dt {
    font-size: 130%;
    font-weight: 600;
}

.utilizeList dd:not(:last-of-type) {
    margin-bottom: 0.5em;
    border-bottom: 1px #ccc dotted;
    padding-bottom: 0.5em;
}

.utilizeList dd {}

.utilizeList li.list01 {
    border: 2px #18b3bd solid;
}

.utilizeList li.list02 {
    border: 2px #e99a55 solid;
}

.utilizeList li.list03 {
    border: 2px #ef8686 solid;
}

.utilizeList li.list01 h3 {
    background: #18b3bd;
}

.utilizeList li.list02 h3 {
    background: #e99a55;
}

.utilizeList li.list03 h3 {
    background: #ef8686;
}

.utilizeList li.list01 dt {
    color: #18b3bd;
}

.utilizeList li.list02 dt {
    color: #e99a55;
}

.utilizeList li.list03 dt {
    color: #ef8686;
}

.utilizeList li.list01 dd:not(:last-of-type) {
    border-bottom: 1px #18b3bd dotted;
}

.utilizeList li.list02 dd:not(:last-of-type) {
    border-bottom: 1px #e99a55 dotted;
}

.utilizeList li.list03 dd:not(:last-of-type) {
    border-bottom: 1px #ef8686 dotted;
}

#sec03 h3 {
    font-size: clamp(0.875rem, 0.803rem + 0.36vw, 1.25rem)
        /*14-20*/
    ;
    text-align: center;
    font-weight: bold;
    margin-bottom: 1.5em;

}

#sec03 .box {
    background: #fff;
    border-radius: 15px;
    padding: 5em 2em;
    position: relative;
    margin: 4rem 0 0;
}

#sec03 .box h4 {
    background: #538ce4;
    color: #fff;
    text-align: center;
    font-size: clamp(1rem, 0.88rem + 0.6vw, 1.625rem)
        /*16-26*/
    ;
    border-radius: 3rem;
    width: 50%;
    margin: 0 auto;
    position: absolute;
    top: -2em;
    left: 0;
    right: 0;
    padding: 1em 0;
}

#sec03 .box h5 {
    font-size: 2.25rem;
    margin-bottom: 0.5em;
    color: #656565;
    font-weight: 600;
}

.exampleSet {
    justify-content: space-around;
}

.exampleSet>li {
    width: 45%;
    border-radius: 20px;
    border: solid 1px #eee;
}

.exampleSet>li:first-of-type {
    margin-bottom: 25px;
}

.exampleSet dl {}

.exampleSet dt {
    font-size: 1.3rem;
    text-align: left;
    padding: 1em;
    font-weight: bold;
}

.exampleSet dt.bef:before {
    content: "Before";
    background-color: #ccc;
    border-radius: 5px;
    padding: 0 1em;
    color: #fff;
    margin: 0 1em 0 0;
}

.exampleSet dt.aft {
    color: #538ce4;
}

.exampleSet dt.aft:before {
    content: "After";
    background-color: #538ce4;
    border-radius: 5px;
    padding: 0 1em;
    color: #fff;
    margin: 0 1em 0 0;
}



.exampleSet li:last-of-type dt {}

.exampleSet dd {
    padding: 1.75em;
    border-radius: 0 0 10px 10px;
}

.exampleSet li:last-of-type dd {
    position: relative;
}

.exampleSet dd p {
    background: #eee;
    padding: 0.25em 0.75em;
    border-radius: 10px;
    width: fit-content;
    margin: 0 0 1em;
}

.bg_grd_02,
.exampleSet dd p.bg_grd_02 {
    background: transparent linear-gradient(259deg, #FFC6F0 0%, #A5BBF6 29%, #64D1F3 60%, #DCB9F1 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}

.promptList {
    background: #fff;
    padding: 1em;
    border-radius: 10px;
}

.avi {
    background: transparent linear-gradient(296deg, #C6F0FF 0%, #FBE8FB 100%) 0% 0% no-repeat padding-box;
}

.avi li {}

.promptList>li {
    padding-left: 1em;
    text-indent: -0.8em;
}

.promptList>li:not(:last-of-type) {
    margin-bottom: 0.75em;
}

.exampleList {
    padding-left: 1em;
    color: #1B52C6;
}

.fukidashi li {
    position: absolute;
    background: #ffa3a3;
    padding: 1em;
    text-indent: 0;
    border-radius: 15px;
    font-size: 115%;
    font-weight: 600;
    color: #fff;
}

.fukidashi li.f_right {
    right: -3%;
    top: 100px;
}

.fukidashi li.f_left {
    left: -3%;
    top: 320px;
}

.fukidashi li.f_right::after {
    content: "";
    position: absolute;
    top: 61%;
    left: 0;
    border-style: solid;
    border-width: 20px 35px 0 0;
    border-color: transparent #ffa3a3 transparent transparent;
    translate: -100% calc(-50% + 0.2px);
    transform: skew(0, 7deg);
    transform-origin: right;
}

.fukidashi li.f_left::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 56%;
    border-style: solid;
    border-width: 35px 0 0 25px;
    border-color: #ffa3a3 transparent transparent;
    translate: calc(-50% + 0.2px) 100%;
    transform: skew(7deg);
    transform-origin: top;
}

.deco_area {
    position: relative;
}

.deco_area .deco_img {
    position: absolute;
    width: 4rem;
}

.deco_area .deco_img.a {
    top: 0;
    right: 0;
}

.deco_area .deco_img.b {
    bottom: 0;
    left: 0;
}

h3.title_02 {
    font-size: clamp(1.25rem, 1.009rem + 1.2vw, 2.5rem)
        /*20-40*/
    ;
    margin-bottom: 0.5em;
    color: #1e3264;
    font-weight: 600;
    text-align: center;
}

.lineup,
.qualification {
    margin-bottom: 40px;
}

.lineup li {
    margin-bottom: 10px;
}

.lineup dl {}

.lineup dt {
    color: #fff;
    background: #F2B8A2;
    padding: 0.1em 1em;
    font-size: 2rem;
}

.lineup dd {
    background: rgba(242, 184, 162, .2);
    padding: 1em;
    font-size: 1.15rem;
}

.qualification {
    gap: 15px;
}

.qualification li {
    background: #F2AE72;
    color: #fff;
    width: calc(100% / 2 - 7.5px);
    font-size: 1.4rem;
    text-align: center;
    border-radius: 10px;
    padding: 0.5em;
}

.skillBox {
    margin: 40px auto;
    background: rgba(242, 48, 5, .1);
    padding: 2em;
}

.skillBox h2 {
    font-size: 3rem;
    margin-bottom: 0.5em;
    color: #F23005;
    font-weight: 600;
    text-align: center;
}

.skillBox .icoBox {
    max-width: 800px;
    margin: 0 auto 30px;
}

.skillBox .icoBox li {
    width: 19%;
}

.skillBox p {
    background: #F23005;
    color: #fff;
    padding: 0.5em;
    text-align: center;
    font-size: 1.5rem;
}




.course_detail {
    margin-bottom: 40px;
    padding: 2em;
}

#course01 {
    background: #fff3f8;
}

#course02 {
    background: #effaff;
}

#course03 {
    background: #fff5eb;
}

#course04 {
    background: rgba(160, 226, 241, .3);
}

.course_detail h3 {
    padding: 30px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 30px;
}

#course01 h3 {
    background: #f06ba0 url(/lp/excel/images/add210203/icon_course01.png) no-repeat center right 80% / 85px;
}

#course02 h3 {
    background: #38a5d2 url(/lp/excel/images/add210203/icon_course02.png) no-repeat center right 80% / 90px;
}

#course03 h3 {
    background: #f0942d url(/lp/excel/images/add210203/icon_course03.png) no-repeat center right 80% / 100px;
}

#course04 h3 {
    background: #a0e2f1 url(../images/icon_course04.png) no-repeat center right 80% / 90px;
}

.course_detail h3 span {
    font-size: 70%;
    display: block;
    text-align: center;
    font-weight: normal;
    margin-top: 10px;
}

.course_detail .offer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    background: #787878;
    padding: 2px;
    align-items: center;
    margin: 0 auto 20px;
}

.course_detail .offer dt {
    width: 200px;
    text-align: center;
    color: #fff;
    font-weight: bold;
}

#course01 .offer dt {
    color: #ffbcd7;
}

#course02 .offer dt {
    color: #7dd9ff;
}

#course03 .offer dt {
    color: #ffc482;
}

#course04 .offer dt {
    color: #a0e2f1;
}

.course_detail .offer dd {
    background: #fff;
    padding: 20px 30px;
    width: calc(100% - 200px);
    margin: auto;
    color: #565656;
}

.course_detail .offer dd li,
.study_style .checkList li {
    padding-left: 1.3em;
    text-indent: -1.3em;
    font-weight: bold;
}

.course_detail .offer dd li:before,
.study_style .checkList li:before {
    /*content: "\2611";*/
    margin-right: 0.3em;
    font-family: "Font Awesome 5 Free";
    content: '\f14a';
    font-weight: 400;
}

.course_detail .example1 {
    padding: 30px;
    margin: 10px auto 30px;
    border: 3px #fff solid;

}

#course01 .example1 {
    background: rgb(240 107 160 / 10%);
}

#course02 .example1 {
    background: rgb(56 165 210 / 10%);
}

#course03 .example1 {
    background: rgb(240 148 45 / 10%);
}

#course04 .example1 {
    background: rgba(160, 226, 241, .5);
}

.course_detail .example1 dt,
.course_detail .example1 dd {
    margin: 0;
}

.course_detail .example1 dt {
    font-weight: bold;
}

.course_detail .example1 dt:before {
    content: "＜";
}

.course_detail .example1 dt:after {
    content: "＞";
}

.course_detail .example2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.course_detail .example2>li {
    width: calc((100% - 80px) / 3);
}

.course_detail .example2 .img_area {
    background: #fff;
    width: 100%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.course_detail .example2 .img_area img {
    width: 100%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.course_detail .example2 .txt_area {
    margin: 0;
}

.course_detail .example2 .txt_area dt {
    font-weight: bold;
    font-size: 20px;
}

#course01 .example2 .txt_area dt {
    color: #f06ba0;
}

#course02 .example2 .txt_area dt {
    color: #38a5d2;
}

#course03 .example2 .txt_area dt {
    color: #f0942d;
}

#course04 .example2 .txt_area dt {
    color: #565656;
}

/*
.course_detail .example2 .txt_area dt:before { content: "＜";}
.course_detail .example2 .txt_area dt:after { content: "＞";}
*/
.course_detail .example2 .txt_area dd {
    margin: 0;
    line-height: 1.6;
}

.course_detail h4 {
    text-align: center;
    margin-bottom: 20px;
    color: #565656;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
}

#course01 h4 {
    background: rgb(240 107 160 / 60%);
}

#course02 h4 {
    background: rgb(56 165 210 / 60%);
}

#course03 h4 {
    background: rgb(240 148 45 / 60%);
}

#course04 h4 {
    background: #a0e2f1;
}

.course_detail .offer dd li:before,
.study_style .checkList li:before {
    font-family: FontAwesome;
}

@media (max-width: 1099px) {}

@media (max-width: 799px) {
    .course_detail {
        padding: 5vw;
    }

    .course_detail h3,
    .study_style h3 {}

    .course_detail .offer dt {
        width: 100%;
    }

    .course_detail .offer dd {
        width: 100%;
        padding: 20px;
    }

    .course_detail .example2>li {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .course_detail .example2>li:not(:last-of-type) {
        margin-bottom: 20px;
    }

    .course_detail .example2>li .img_area {
        width: 30vw;
        background: none;
    }

    .course_detail .example2>li .txt_area {
        width: calc(100% - 30vw - 30px);
    }

    .utilizeList h3 {
        font-size: 130%;
    }

    .utilizeList dt {
        font-size: 120%;
    }
}

@media (max-width: 699px) {

    .utilizeList li,
    .exampleSet>li {
        width: 100%;
        margin: 20px 15px;
    }

    #sec03 .box h5 {
        font-size: 4vw;
    }

    #sec03 .box h4 {
        width: 85%;
    }

    #sec03 h3 {}

    .fukidashi li.f_left {
        top: 200px;
    }

    .lineup dd,
    .qualification li {
        font-size: 100%;
    }

    .skillBox .icoBox {
        margin: 0 auto 3%;
        width: 85%;
    }

    .skillBox p {}

    .exampleSet dd {
        padding: 1em;
    }

    .exampleSet dt {}

    .mainvisual .btn a {}

    .alterList {
        max-width: 500px;
        margin: 5% auto 0;
        width: 94%;
    }

    .alterList li {
        width: 100%;
        margin-bottom: 1em;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        padding: 2em 1em;
    }

    .alterList li .imgArea {
        width: 15%;
        min-width: inherit;
        margin: 0 auto 0 0;
        padding: 0 8px 0 0;
    }

    .alterList li .txtArea {
        width: 84%;
        padding: 0 0 0 1em;
    }

    .alterList li dt {
        text-align: left;
    }

    .alterList,
    .utilizeList,
    .qualification,
    .skillBox .icoBox {
        width: 94%;
        margin: 5% auto;
    }

    .utilizeList dl,
    #sec03 .box {
        padding: 1em;
    }
}

@media (max-width: 499px) {

    #course01 h3,
    #course02 h3,
    #course03 h3,
    #course04 h3,
    .study_style li:first-child h3,
    .study_style li:nth-of-type(2) h3 {
        background-position: center center;
        padding: 10px;
    }

    .course_detail .example1 {
        padding: 15px;
    }

    .course_detail .example2 .img_area {
        height: auto;
        overflow: inherit;
    }

    .course_detail .example2 .img_area img {
        position: static;
        -webkit-transform: inherit;
        transform: inherit;
    }

    #course04 h3,
    .lineup dt {
        font-size: 5.5vw;
    }

    section>h2 {
        font-size: 6vw;
    }

    #sec03 h3 {}

    .alterList li dt {}

    .alterList li .imgArea .main_icon {
        height: 4rem;
        aspect-ratio: unset;
        width: 100%;
        object-fit: contain;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #sec03 .box h4 {}

    #sec03 .box h5 {
        font-size: 5vw;
    }

    .fukidashi li.f_right {}

    .fukidashi li.f_left {
        top: 320px;
    }

    #sec04 .inner>h3 {}

    .utilizeList li,
    .exampleSet>li {
        margin: 30px 0 0 0;
    }
}

@media (max-width: 399px) {

    .course_detail .example2>li .img_area,
    .course_detail .example2>li .txt_area {
        width: 100%;
    }

    .course_detail h3,
    .study_style h3 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .course_detail {
        padding: 3vw;
    }

    #course01 h3 {
        background: #f06ba0 url(../images/add210203/icon_course01.png) no-repeat center right 80% / 55px;
    }

    #course02 h3 {
        background: #38a5d2 url(../images/add210203/icon_course02.png) no-repeat center right 80% / 70px;
    }

    #course03 h3 {
        background: #f0942d url(../images/add210203/icon_course03.png) no-repeat center right 80% / 70px;
    }

    #course04 h3 {
        background: #30bb54 url(../images/add210203/icon_course04.png) no-repeat center right 80% / 70px;
    }

}



@font-face {
    font-family: "FontAwesome";
    src: url("./fa-solid-900.woff") format("woff");
}

.course_list h3 {
    text-align: center;
    margin-bottom: 1em;
    font-size: 180%;
    font-weight: bold;
    border-bottom: 3px #e30070 solid;
}

.course_list li {
    background: #f5f5f5;
    margin-bottom: 10px;
}

.course_list .item_ttl {
    font-size: 125%;
    font-weight: bold;
    padding: 0.5em 1em;
    border-bottom: 1px #ccc solid;
}

.course_list .item_ttl .txt_s {
    font-weight: normal;
    font-size: 80%;
}

.course_list .box {
    padding: 30px;
}

.course_list .box,
.course_list .box .course_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.course_list .box .img_area {
    width: 150px;
}

.course_list .box .course_content {
    width: calc(100% - 150px - 30px);
    margin: 0;
}

.course_list .box .course_content dt {
    width: 7em;
    text-align: center;
    background: #565656;
    color: #fff;
    border-bottom: 1px #ccc dotted;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course_list .box .course_content dd {
    width: calc(100% - 7em);
    margin-left: 0;
    border-bottom: 1px #ccc dotted;
    background: #fff;
    padding: 0.75em 1em;
    line-height: 1.6;
}

.course_list .box.sub_wrap:not(:last-of-type) {
    border-bottom: 1px #ccc dotted;
}

.course_list .accbox .accshow p.course_ttl {
    padding-left: 1.3em;
    font-size: 1.125rem;
    font-weight: bold;
    position: relative;
    width: 100%;
}

.course_list .accbox .accshow p.course_ttl::before {
    content: "\025a0";
    position: absolute;
    left: 0;
    top: 0;
}

@media (max-width:699px) {
    .course_list .item_ttl {
        font-size: 110%;
    }

    .course_list .box .img_area {
        text-align: center;
        margin-bottom: 1em;
    }

    .course_list .box .img_area,
    .course_list .box .course_content,
    .qualification li {
        width: 100%;
    }

    .course_list .box {
        padding: 15px;
    }

    #course04 h3 {
        background: #a0e2f1 url(/lp/generative-ai/assets/images/icon_course04.png) no-repeat center right 95% / 50px;
    }

    #course04 .example1,
    .skillBox {
        padding: 1em;
        margin: 7% auto;
    }

    .course_detail .offer dd {
        padding: 10px;
    }


}

@media (max-width:399px) {
    .course_list li {
        margin-bottom: 5px;
    }

    .course_list .box .course_content dt {
        width: 6em;
    }

    .course_list .box .course_content dd {
        width: calc(100% - 6em);
        padding: 0.75em;
    }

    .course_list .box .img_area,
    .course_list .box .course_content {
        font-size: 0.9rem;
    }

    .course_list h3 {
        font-size: 150%;
        margin-bottom: 0.5em;
    }

}

/* -----アコーディオン----- */
/*ボックス全体*/
.course_list .accbox {
    max-width: 100%;
    /*最大幅*/
}

/*ラベル*/
.course_list .accbox label {
    display: block;
    /*margin: 1.5px 0;*/
    cursor: pointer;
    transition: all 0.5s;
    position: relative;
}

/*アイコンを表示*/
.course_list .accbox label:before {
    content: "\f13a";
    font-family: "FontAwesome";
    font-weight: 900;
    position: absolute;
    right: 1.5%;
    top: 0;
    bottom: 0;
    color: #e30070;
    font-size: 1.5em;
    height: 21px;
    margin: auto;
    line-height: 1;
}

/*チェックは隠す*/
.course_list .accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.course_list .accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.course_list .cssacc:checked+label+.accshow {
    height: auto;
    padding: 0;
    opacity: 1;
}

.course_list .accbox .accshow p {
    margin: 5px 10px;
    text-align: justify;
    text-justify: inter-ideograph;
}

/*アイコンを入れ替える*/
.course_list .cssacc:checked+label:before {
    content: "\f139";
}


@media (max-width:599px) {
    .course_list .item_ttl {
        padding: 10px 38px 10px 10px;
        font-size: 16px;
        line-height: 1.4;
    }

    .course_list .accbox label:before {
        font-size: 110%;
    }
}


@media (max-width:399px) {
    .course_list .item_ttl {
        font-size: 15px;
        padding-right: 25px;
    }

    .course_list .item_ttl span {
        font-size: 90%;
    }

    .course_list .accbox label:before {
        font-size: 1.2em;
    }
}


.contactArea {
    margin: 50px auto;
}

.contactArea p {}


.contac_btn_list {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.contac_btn_list li {
    margin: 0 1em;
}

.contac_btn_list li a {
    color: #538ce4;
    padding: 0.3em 2em;
    border: solid 2px;
    display: inline-block;
    border-radius: 3em;
    font-size: clamp(1rem, 0.904rem + 0.48vw, 1.5rem)
        /*16-24px*/
    ;
    font-weight: bold;
}

.contac_btn_list li a.bg_grd_02 {
    color: #fff;
}

.contac_btn_list li .online {
    font-size: 15px;
    text-align: center;
}

.call {
    text-align: center;
    margin: 10px;
}

.call dt {
    font-weight: bold;
    font-size: 20px;
}

.call dd {
    margin: 0;
}

.call dd a {
    display: inline-block;
    font-weight: bold;
    font-size: 36px;
    color: #0E6EB8;
    position: relative;
    line-height: 1;
}

.hover_big {
    transition-duration: .4s;
}

.hover_big:hover {
    transform: scale(1.1);
}

/*600px以上*/
@media (min-width: 600px) {}

/*900px以上*/
@media (min-width: 900px) {}

/******************/

.arrow_01 {
    position: relative;
}

.arrow_01:before {
    position: absolute;
    content: '';
    display: block;
    width: 4rem;
    height: 4rem;
    background-image: url(../images/icon_arrow_01.svg);
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    left: calc(100% - 1rem);
    z-index: 10;
    transform: translateY(-50%);
}

/*ブレイクポイント 以下*/
@media (max-width: 699px) {
    .arrow_01:before {
        top: unset;
        left: 50%;
        z-index: 10;
        transform: translateX(-50%) rotate(90deg);
        bottom: -4em;
    }
}

/************/
.manabu_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.manabu_list li {
    background: #fff;
    padding: 1em 1em;
    border-radius: 10px;
    border: solid 1px #ccc;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    aspect-ratio: 1 / 1;
    width: 80%;
    margin: 10px;
    max-width: 300px;
}

.manabu_list dl {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.manabu_list dt {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

.manabu_list dt img {
    aspect-ratio: 1 / 1;
    width: 40%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.manabu_list dd {
    text-align: center;
}

/*600px以上*/
@media (min-width: 600px) {
    .manabu_list li {
        width: 37%;
        margin: 20px;
    }
}

/*900px以上*/
@media (min-width: 900px) {}

/*********************/
.shikaku_list {
    display: flex;
    flex-direction: column;
    gap: 1.3em;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.shikaku_list li a {
    padding: 1em 2em 1em 1em;
    color: #0E6EB8;
    border: 1px solid #ccc;
    display: block;
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.313rem)
        /*16-21px*/
    ;
    line-height: 1.5;
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    width: 100%;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    font-weight: bold;
}

.shikaku_list li:nth-child(even) a {
    color: #1c2566;
}

.shikaku_list li a:after {
    content: "\f35a";
    font-family: FontAwesome;
    font-weight: 900;
    margin-left: 1em;
    margin-left: 1em;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
}