@charset "utf-8";

.bg_purple p,
.bg_purple dt,
.bg_purple li,
.sub_page .bg_purple h2.title_03 {
    color: #fff;
}


/******進路指導*****************************/
.page_guidance {}

.page_guidance .text {
    width: 95%;
    margin: 0 auto;
    max-width: 900px;
}

.page_guidance .sec_04 .img {
    width: 100%;
    max-width: 400px;
    margin: 3rem auto 0;
}

.page_guidance .flex_area {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.page_guidance .flex_area .text_area {
    width: 100%;
}

.page_guidance .flex_area .img_area {
    width: 100%;
}

.page_guidance .flex_area .img_area img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: 100%;
    object-fit: cover;
}

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

/*900px以上*/
@media (min-width: 900px) {
    .page_guidance .flex_area {
        gap: unset;
        align-items: flex-end;
        justify-content: space-between;
    }

    .page_guidance .flex_area .text_area {
        width: 60%;
    }

    .page_guidance .flex_area .img_area {
        width: calc(40% - 2rem);
    }
}

/***進路指導の流れ********************************/
.sec_05 h3 {
    font-size: clamp(1.125rem, 1.029rem + 0.48vw, 1.625rem)
        /*18-26px*/
    ;
    text-align: center;
    font-weight: bold;
    background-color: #944ea7;
    padding: 6px 0;
    margin: 1rem 0;
    color: #fff;
    border-radius: 2em;
}


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

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

/***進路指導年間予定********************************/
.sec_05 {}

.sec_05 .img {
    padding: 1rem 0;
    width: 100%;
}

.step_box {
    padding: 2rem 0;
}

.step_list {
    display: flex;
    flex-direction: column;
    gap: 2rem 1rem;
}

.step_list .num {
    font-size: 130%;
    text-align: center;
    background-color: #fff;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.step_list li {
    background-color: #dad2f7;
    padding: 1rem;
    position: relative;
}

.step_list dl {}

.step_list dt {
    font-size: clamp(1.125rem, 1.005rem + 0.6vw, 1.75rem)
        /*18-28px*/
    ;
    text-align: center;
    font-weight: bold;
    padding: 0.7em 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: #342667;
}

.step_list dd {
    padding: 1rem 0;

}

.step_list dd h4 {
    font-weight: bold;
    border-bottom: solid 1px;
    margin: 0 0 0.7em;
    font-size: 16px;
}



/*600px以上*/
@media (min-width: 600px) {
    .step_list dl {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .step_list dl .right {
        display: flex;
        flex-wrap: wrap;
    }

     .step_list dt {
        width: 50%;
        flex-direction: column;
    }

    .sec_05 .img {
        padding: 1rem 0;
        width: 50%;
        margin: 0;
    }
}

/*900px以上*/
@media (min-width: 900px) {
    .step_list {
        display: flex;
        flex-direction: unset;
        gap: 2rem 1rem;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .step_list li {
        background-color: #dad2f7;
        padding: 2rem 6%;
        width: 49%;
    }

    .step_list dl {
        justify-content: space-between;
    }

    .step_list .num {
        font-size: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: unset;
        color: #944ea7;
        width: unset;
        height: unset;
        padding: 0 1em;
    }

    .step_list dt {
        justify-content: flex-start;
        flex-direction: unset;
        align-items: center;
        text-align: left;
        gap: unset;
        padding: 0
    }

    .step_list li.years_03 {
        width: 100%;
    }

    .step_list li.years_03 dd {
    }

    .years_03 .right {
        width: 35%;
    }

    .sec_05 .years_03 .right .img {
        width: 90%;
    }

    .step_list .years_03 .right dt {
        width: 100%;
    }

    .years_03 .left {
        width: 62%;
    }


}

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

.year_list {
    max-width: 800px;
    margin: 0 auto;
}

.accordion-006 {
    margin-bottom: 7px;
    background-color: #f2f2f2;
    border-radius: 5px;
}

.accordion-006 summary {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    color: #1A1311;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    flex-wrap: wrap;
}

.accordion-006 summary::-webkit-details-marker {
    display: none;
}

.accordion-006 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin: 10px 0 0;
    border-bottom: 3px solid #A799DB;
    border-right: 3px solid #A799DB;
    content: '';
    transition: transform .3s;
    position: absolute;
    right: .75em;
}

.accordion-006 dd {
    border-top: dotted 2px #a799db;
}

.accordion-006[open] summary::after {
    transform: rotate(225deg);

}

.accordion-006 dd .month {
    background-color: #a799db;
    color: #fff;
    padding: 3px 0.5em;
    border-radius: 4px;
    width: 5rem;
    text-align: center;
}

.accordion-006 .schedule_list {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: #1A1311;
    transition: transform .5s, opacity .5s;
    padding: 1rem 5%;
}

.accordion-006[open] .schedule_list {
    transform: none;
    opacity: 1;
}

.schedule_list li {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    padding: 0.7em 0;
    border-bottom: dotted 1px #ccc;
}

.accordion-006[open] .schedule_list li p {
    color: #944ea7;
    width: calc(100% - 6em);
    padding: 0 0 0 1em
}

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

/*900px以上*/
@media (min-width: 900px) {
    .accordion-006 summary {
        justify-content: flex-start;
    }

    .accordion-006 summary::after {
        margin: 10px 0px 0 20px;
    }
}

/*****進学実績******************************/
.qa-7 {
    width: 100%;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgba(0 0 0 / 5%);
    background-color: #e3ddfb;
}

.qa-7 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 1.6em 1em 2em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa-7 summary::before,
.qa-7 .kotae::before {
    position: absolute;
    left: 0.4em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-7 summary::before {
    color: #75bbff;
    content: "Q";
}

.qa-7 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.qa-7[open] summary::after {
    transform: rotate(225deg);
}

.qa-7 .kotae {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 1em 1.5em 2em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-7[open] .kotae {
    transform: none;
    opacity: 1;
}

.qa-7 .kotae::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}

dl.shingaku {
    background-color: #fff;
    padding: 1rem;
    margin: 0.9rem auto;
    border-radius: 10px;
}

dl.shingaku dt {
    border-bottom: solid 1px #ccc;
    margin: 0 0 10px;
    padding: 0 0 10px;
}

.shingaku_list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 5px;
}

.shingaku_list li {}

.shingaku_list li:after {
    content: "❘";
    padding: 0 6px;
}

.result_block dl {
    background-color: #F1FBE5;
    margin: -1rem auto 2rem;
    padding: 2rem 5%;
}

.img_01 {
    width: fit-content;
    background-color: #fff;
    padding: 3%;
    border-radius: 10px;
    margin: 2rem auto;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.img_01 img {
    max-width: 350px;
    width: 100%;
}

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

/*900px以上*/
@media (min-width: 900px) {
    .qa-7 summary {
        padding: 2em 2.6em 2em 4em;
    }

    .qa-7 .kotae {
        padding: .3em 4em 1.5em 4em;
    }

    .qa-7 summary::before,
    .qa-7 .kotae::before {
        left: 1.4em;
        font-size: 1.6em;
    }
}

/*****主な指定校推薦校***page_designated***************************/
dl.shiteikou {
    background-color: #F1FBE5;
    margin: 2rem auto 2rem;
    padding: 2rem 5%;
}

.shiteikou dt {
    padding: 0 0 0.5em 0;
    letter-spacing: 1.05px;
    font-size: clamp(1.313rem, 1.276rem + 0.18vw, 1.5rem)
        /*21-24px*/
    ;
    font-weight: bold;
    color: #342667;
    text-align: center;
}

.suisen_list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    justify-content: center;
}

.suisen_list li {
    font-size: clamp(1rem, 0.976rem + 0.12vw, 1.125rem)
        /*16-18px*/
    ;
}

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

/*900px以上*/
@media (min-width: 900px) {
    .page_designated p {
        text-align: center;
    }
}

/***page_voice***卒業生の声*****************************/
.page_voice h2.title_03 {
    text-align: left;
}

.name_list {
    background-color: #ffecf5d6;
    padding: 1rem 5%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.page_voice .img_area img {
    height: 100%;
    object-fit: cover;
}

.name_list li {
    border-bottom: solid 1px #ffc5c5;
    padding: 0 0 5px 0;
    color: #1A1311;
}

.name_01 {
    background-color: #e9aa33;
    font-weight: bold;
    color: #fff;
    padding: 3px 0.5em;
    margin: 2px 2px;
    border-radius: 4px;
}

.name_02 {
    background-color: #e777e2;
    font-weight: bold;
    color: #fff;
    padding: 3px 0.5em;
    margin: 2px 2px;
    border-radius: 4px;
}

.name_03 {
    background-color: #466ec6;
    font-weight: bold;
    color: #fff;
    padding: 3px 0.5em;
    margin: 2px 2px;
    border-radius: 4px;
}

.name_04 {
    background-color: #5dd8e4;
    font-weight: bold;
    color: #fff;
    padding: 3px 0.5em;
    margin: 2px 2px;
    border-radius: 4px;
}

.page_voice .title_voice {
    background-color: #A799DB;
    padding: 0.3em 2em 0.3em 0.7em;
    clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%);
    font-size: clamp(1rem, 0.62rem + 1.01vw, 1.875rem)
        /*600~16-30*/
    ;
    position: unset;
    height: fit-content;
    width: fit-content;
    color: #fff;
}

.bg_purple .title_voice {
    background-color: #342667;
}

.page_voice .comment {
    padding: 1em 0;
}

.voice_box {
    padding: 2rem 0;
}

/*600px以上*/
@media (min-width: 600px) {
    .page_voice .name_area {
        position: relative;
    }

    .name_area .text {
        width: 60%;
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translateY(-50%);
    }

    .name_area .img {
        width: 100%;
        text-align: right;
    }

    .name_area .img img {
        width: 70%;
        max-width: 600px;
    }

    .voice_box {
        display: flex;
        flex-wrap: wrap;
    }

    .voice_box .img_area {
        width: 40%;
        text-align: center;
    }

    .voice_box .img_area img {
        max-width: 400px;
        height: 100%;
        object-fit: contain;
    }

    .voice_box .text_area {
        width: 60%;
    }

    .reverse {
        flex-direction: row-reverse;
    }
}

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

/******保護者の声*****************************/
.page_parents {}

.parents_box {
    background-color: #efebff;
    border-radius: 10px;
    margin: 0 0 2rem;
    padding: 4rem 8%;
}

.parents_box .text_area {}

.parents_box .text_area p {
    margin: 0 0 1em;
}

.parents_box .img_area {
    margin: 0 auto 1rem;
    text-align: center;
}

.parents_box .img_area img {
    /* width: 40%;
    max-width: 100px;*/
    width: clamp( 80px, 30%, 120px );
}

.parents_box .img_area p {
    color: #666;
}

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

/*900px以上*/
@media (min-width: 900px) {
    .parents_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .parents_box .img_area {
        margin: 0;
        text-align: center;
        width: 30%;
    }

    .parents_box .img_area img {
        width: clamp( 80px, 100%, 120px );
    }

    .parents_box .text_area {
        width: 70%;
    }
}

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

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