@charset "utf-8";
/*共通設定*/
*,
::before,
::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}

a:hover {
    opacity: 0.8;
}

body {
    font-size: 16px;
    line-height: 1.5;
    color: #664129;
    font-family: "Noto Serif JP", serif;
    background-color: #FFFEF6;
    letter-spacing: 0.05em;
}

img {
    max-width: 100%;
}

h2 {
    text-align: center;
    font-size: 40px;
    color: #664129;
}

.wrap {
    overflow: hidden;
}

.tb-br,
.sp-br {
    display: none;
}

.pc-br {
    display: block;
}

.white-txt {
    position: absolute;
}

.img-area {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

.entry-btn {
    display: inline-block;
    max-width: 560px;
    width: 100%;
    transition: 0.2s;
}

.entry-btn:hover {
    opacity: 0.8;
}
/*終わり*/


/*<div class="fv">*/
.fv-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}
/*終わり*/


/*<div class="parallax-area">*/
.bgScale {
    position: relative;
    width: 100%;
    height: 100vh;
    clip-path: inset(0);
}

.bgScale::before {
    content: '';
    z-index: -1;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.bgScale-01::before {
    background-image: url(../img/parallax_01.png);
}

.bgScale-02::before {
    background-image: url(../img/parallax_02.png);
}

.bgScale-03::before {
    background-image: url(../img/parallax_03.png);
}

.bgScale-04::before {
    background-image: url(../img/parallax_04.png);
}

.bgScale-05::before {
    background-image: url(../img/parallax_05.png);
}

.bgScale-06::before {
    background-image: url(../img/parallax_06.png);
}

.bgScale-07::before {
    background-image: url(../img/parallax_07.png);
}

.bgScale-08::before {
    background-image: url(../img/parallax_08.png);
}

.bgScale-09::before {
    background-image: url(../img/parallax_09.png);
}

.bgScale-10::before {
    background-image: url(../img/parallax_10.png);
}

.bgScale-11::before {
    background-image: url(../img/parallax_11.png);
}

.bgScale-12::before {
    background-image: url(../img/parallax_12.png);
}

.bgScale-13::before {
    background-image: url(../img/parallax_13.png);
}

.bgScale-14::before {
    background-image: url(../img/parallax_14.png);
}

.bgScale-15::before {
    background-image: url(../img/parallax_15.png);
}

.bgScale-16::before {
    background-image: url(../img/parallax_16.png);
}

.bgScale-17::before {
    background-image: url(../img/parallax_17.png);
}

.bgScale-18::before {
    background-image: url(../img/parallax_18.png);
}

.bgScale-19::before {
    background-image: url(../img/parallax_19.png);
}

.bgScale-20::before {
    background-image: url(../img/parallax_20.png);
}

.bgScale-21::before {
    background-image: url(../img/parallax_21.png);
}

.white-txt-01,
.white-txt-02,
.white-txt-03,
.white-txt-05,
.white-txt-07,
.white-txt-11,
.white-txt-14,
.white-txt-16,
.white-txt-17,
.white-txt-20,
.white-txt-21 {
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.white-txt-04,
.white-txt-06,
.white-txt-08,
.white-txt-09,
.white-txt-10,
.white-txt-12,
.white-txt-13,
.white-txt-15,
.white-txt-18,
.white-txt-19 {
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.white-txt-08 {
    max-width: 400px;
    width: 100%;
}

.parallax-area .img-area-wrap {
    position: relative;
}
/*終わり*/


/*<div class="slider-area">*/
.slider-area {
    padding: 120px 0;
}

.slider {
    margin-top: 64px;
}

.item1 {
    width: 100%;
    height: 100%;
}

.slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*終わり*/


/*<div class="key-area">*/
.key-area {
    padding: 120px 5vw;
    background-image: url(../img/key_back.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
/*終わり*/


/*<div class="gain-area">*/
.gain-area {
    padding: 120px 5vw;
    background-image: url(../img/gain_back.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
/*終わり*/


/*<div class="benefit-area">*/
.benefit-area {
    padding: 0 5vw 120px 5vw;
    background-image: url(../img/benefit_back.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.benefit-title {
    max-width: 720px;
    width: 100%;
}

.benefit-0405,
.benefit-0607 {
    display: flex;
    align-items: flex-start;
}
/*終わり*/


/*<div class="img-1718">*/
.img-1718 {
    padding: 80px 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
/*終わり*/


/*<div class="student-area">*/
.student-area {
    padding: 80px 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px;
    background-color: #FFF8BF;
}

.student-area-wrap {
    padding: 40px 64px;
    text-align: center;
    margin: 0 auto;
    max-width: 720px;
    width: 100%;
    background-color: #fff;
    color: #664129;
    font-size: 18px;
    box-shadow: 0 10px 20px rgba(143,140,140,0.25);
}

.student-txt {
    text-align: left;
    margin-top: 24px;
}

.student-else {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 4px;
    text-align: right;
    margin-top: 24px;
}

.student-else:hover {
    cursor: pointer;
}

.student-else-wrap {
    display: none;
}

.student-else-txt {
    margin-top: 24px;
    text-align: left;
}
/*終わり*/


/*<div class="class-area">*/
.class-area {
    padding: 80px 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
/*終わり*/


/*<div class="flow-area">*/
.flow-area {
    padding: 120px 5vw;
    background-image: url(../img/flow_back.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.flow-txt {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: #664129;
    margin-top: 40px;
}

.flow-txt span {
    color: #AF626C;
}
/*終わり*/


/*<div class="btn-wrap btn-wrap-02">*/
.btn-wrap-02 {
    padding: 80px 5vw;
    text-align: center;
}
/*終わり*/


/*<div class="faq">*/
.faq {
    background-color: #F4F2E5;
    padding: 120px 5vw;
}

.faq-wrap {
    max-width: 720px;
    width: 100%;
    margin: 64px auto 0 auto;
}

.nav-open:hover {
    cursor: pointer;
}

.nav-open {
    position: relative;
    background-color: #fff;
    padding: 16px 40px 16px 40px;
    font-weight: 600;
    margin-top: 24px;
    font-size: 20px;
}

.nav-open::before {
    content: "Q";
    font-size: 18px;
    color: #A8C033;
    font-weight: 800;
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.nav-open:hover {
    cursor: pointer;
}

.nav-open::after {/* 閉じている時 */
	content: "＋";
    font-size: 20px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: #A9BE42;
}

.nav-open.active::after {/* 開いている時 */
	content: "－";
}

.faq-txt {
    background-color: #fff;
    position: relative;
    display: none;
    padding: 16px 40px 16px 40px;
    font-size: 18px;
}

.faq-txt::before {
    content: "A";
    font-size: 18px;
    color: #D6BB63;
    font-weight: 800;
    position: absolute;
    top: 16px;
    left: 16px;
}
/*終わり*/


/*<div class="cta">*/
.cta {
    padding: 120px 5vw;
    background-image: url(../img/cta_back.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.cta-txt {
    text-align: center;
    color: #fff;
    font-size: 32px;
}
/*終わり*/


/*<div class="profile">*/
.profile {
    padding: 120px 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}
/*終わり*/


/*<div class="company">*/
.company {
    padding: 120px 5vw;
    background-color: #F4F2E5;
}

.company-dl {
    margin: 64px auto 0 auto;
    max-width: 720px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 24px;
    color: #664129;
}

.company-dl dt {
    width: 30%;
    padding: 24px 0;
    border-bottom: solid 1px #664129;
}

.company-dl dd {
    width: 70%;
    padding: 24px 0;
    border-bottom: solid 1px #664129;
}

.company-dl .last-dt,
.company-dl .last-dd {
    border-bottom: none;
}
/*終わり*/


/*<footer class="footer">*/
.footer {
    background-color: #664129;
    color: #fff;
    padding: 40px 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
}
/*終わり*/


/*タブレット*/
@media (max-width: 1024px) {
/*共通設定*/
/*終わり*/


/*<header class="header">*/
/*終わり*/
}


/*スマホ*/
@media (max-width: 599px) {
/*共通設定*/
    .white-txt {
        width: 70%;
    }

    h2 {
        font-size: 24px;
    }
/*終わり*/


/*<div class="parallax-area">*/
    .bgScale-01::before {
        background-image: url(../img/parallax_01_sp.png);
    }

    .bgScale-02::before {
        background-image: url(../img/parallax_02_sp.png);
    }

    .bgScale-03::before {
        background-image: url(../img/parallax_03_sp.png);
    }

    .bgScale-04::before {
        background-image: url(../img/parallax_04_sp.png);
    }

    .bgScale-05::before {
        background-image: url(../img/parallax_05_sp.png);
    }

    .bgScale-06::before {
        background-image: url(../img/parallax_06_sp.png);
    }

    .bgScale-07::before {
        background-image: url(../img/parallax_07_sp.png);
    }

    .bgScale-08::before {
        background-image: url(../img/parallax_08_sp.png);
    }

    .bgScale-09::before {
        background-image: url(../img/parallax_09_sp.png);
    }

    .bgScale-10::before {
        background-image: url(../img/parallax_10_sp.png);
    }

    .bgScale-11::before {
        background-image: url(../img/parallax_11_sp.png);
    }

    .bgScale-12::before {
        background-image: url(../img/parallax_12_sp.png);
    }

    .bgScale-13::before {
        background-image: url(../img/parallax_13_sp.png);
    }

    .bgScale-14::before {
        background-image: url(../img/parallax_14_sp.png);
    }

    .bgScale-15::before {
        background-image: url(../img/parallax_15_sp.png);
    }

    .bgScale-16::before {
        background-image: url(../img/parallax_16_sp.png);
    }

    .bgScale-17::before {
        background-image: url(../img/parallax_17_sp.png);
    }

    .bgScale-18::before {
        background-image: url(../img/parallax_18_sp.png);
    }

    .bgScale-19::before {
        background-image: url(../img/parallax_19_sp.png);
    }

    .bgScale-20::before {
        background-image: url(../img/parallax_20_sp.png);
    }

    .bgScale-21::before {
        background-image: url(../img/parallax_21_sp.png);
    }

    .white-txt-01,
    .white-txt-02,
    .white-txt-03,
    .white-txt-05,
    .white-txt-07,
    .white-txt-11,
    .white-txt-14,
    .white-txt-16,
    .white-txt-17,
    .white-txt-20,
    .white-txt-21 {
        top: 30%;
        right: 5vw;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }

    .white-txt-04,
    .white-txt-06,
    .white-txt-08,
    .white-txt-09,
    .white-txt-10,
    .white-txt-12,
    .white-txt-13,
    .white-txt-15,
    .white-txt-18,
    .white-txt-19 {
        top: 30%;
        left: 5vw;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }

    .white-txt-08 {
        top: 50%;
        width: 80%;
    }

    .white-txt-10 {
        width: 90%;
    }

    .white-txt-11 {
        width: 90%;
    }

    .white-txt-16 {
        width: 80%;
    }

    .white-txt-17 {
        width: 80%;
    }

    .white-txt-20 {
        width: 80%;
    }

    .white-txt-21 {
        width: 80%;
    }
/*終わり*/


/*<div class="slider-area">*/
    .slider-area {
        padding: 80px 0;
    }
/*終わり*/


/*<div class="key-area">*/
    .key-area {
        padding: 80px 5vw;
        gap: 24px;
    }
/*終わり*/


/*<div class="gain-area">*/
    .gain-area {
        padding: 80px 5vw;
        gap: 24px;
    }
/*終わり*/


/*<div class="benefit-area">*/
    .benefit-area {
        padding: 0 5vw 80px 5vw;
        gap: 0px;
    }
/*終わり*/


/*<div class="student-area">*/
    .student-area {
        gap: 40px;
    }

    .student-h2 {
        font-size: 32px;
    }

    .student-area-wrap {
        padding: 24px;
        font-size: 14px;
    }
/*終わり*/


/*<div class="flow-area">*/
    .flow-area {
        padding: 80px 5vw;
    }

    .flow-txt {
        font-size: 18px;
    }
/*終わり*/


/*<div class="faq">*/
    .faq {
        padding: 80px 5vw;
    }

    .nav-open {
        font-size: 16px;
    }

    .nav-open::before {
        font-size: 16px;
    }

    .nav-open::after {/* 閉じている時 */
        font-size: 16px;
    }

    .faq-txt {
        font-size: 16px;
    }

    .faq-txt::before {
            font-size: 16px;
    }
/*終わり*/


/*<div class="cta">*/
    .cta {
        padding: 64px 5vw;
        background-image: url(../img/cta_back_sp.png);
    }

    .cta-txt {
        font-size: 20px;
    }
/*終わり*/


/*<div class="profile">*/
    .profile {
        padding: 80px 5vw;
    }
/*終わり*/


/*<div class="company">*/
    .company {
        padding: 80px 5vw;
    }

    .company-dl {
        flex-direction: column;
        align-items: flex-start;
        font-size: 18px;
    }

    .company-dl dt {
        width: 100%;
        padding: 24px 0 0 0;
        border-bottom: none;
        font-weight: 600;
    }

    .company-dl dd {
        width: 100%;
        padding: 16px 0 24px 0;
    }
/*終わり*/


/*<footer class="footer">*/
    .footer {
        font-size: 12px;
    }
/*終わり*/

}