/*-------------------------------- font -------------------------------- */
.shuei {
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.shueibold {
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-weight: 600;
    font-style: normal;
}

/*===============================================================================
common
===============================================================================*/
p {
    color: #333;
    font-size: 16px;
    line-height: 28.8px;
    letter-spacing: 1.39px;
}

.red {
    color: #e91f2f;
}

a:hover {
    opacity: .8;
    transition: .2s;
}
section{
    font-weight: 700;
    font-size: 1.2vw;
}
section p{
    font-size: 1.2vw;
    line-height: 2.0vw;
}
section h3{
    font-size: 1.8vw;
    margin: 3%;
    text-align: center;
}
img {
    z-index: 10;
}
/*===============================================================================
modal
===============================================================================*/
.common-modal .on {
    display: none;
}

.common-modal.open .on {
    display: block;
}

.common-modal.open .off {
    display: none;
}

/*===============================================================================
header
===============================================================================*/
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
}
.inner {
    width: 1000px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}
.header-logo01 {
    width: 200px;
}

.header-txt {
   font-size: 18px;
   font-weight: bold;
   letter-spacing: .009em;
}

/*===============================================================================
fv
===============================================================================*/
.fv{
    text-align: center;
}
.fv_bg{
    background-color: #FEA26F;
    padding: 0 0 3%;
}
.fv_bg .fv img{
    width: 100%;
}
a.apply_btn{
    margin: 3% auto 0;
    width: 50%;
    display: flex;
    justify-content: center;
}

/*===============================================================================
overview
===============================================================================*/

.overview{
    padding: 3% 0;
    text-align: center;
}
.overview h3{
    color: #ff403f;
    font-size: 2.0vw;
}
.overview p{
    margin: 2%;
    text-align: center;
}
.overview img{
    width: 70%;
}

/*===============================================================================
about
===============================================================================*/

.about{
    margin: -10% 0 0;
}
.about_arch{
    width: 100%;
    position: relative;
}
.about_inner{
    background-color: #fffce3;
    text-align: center;
}
.about_sttl{
    width: 70%;
    margin: auto;
}

/* common */
.about_wrapp{
    width: 100%;
    padding: 0 2% 0;
}

.about_sub1 img,.about_sub2 img{
    padding: 0 3%;
}
.about_txt{
    display: flex;
    flex-direction:column;
    text-align: left;
}
.about_txt h5{
    color: #ff6600;
    font-size: 1.2vw;
}
.about_txt h5 span{
    font-size: 1.1vw;
}
.about_sub1{
    display: flex;
    flex-direction: row;
    margin: 0 0 5%;
}
.about_sub2{
    display: flex;
    flex-direction:row-reverse;
    margin: 0 0 5%;
}
/* 図形 概念 */
.about_zukei,.about_gainen{
    display: flex;
    flex-direction: row;
    width: 85%;
    margin: 0 auto 5%;
}
/* 記号 */
.about_kigou{
    display: flex;
    flex-direction:row-reverse;
    width: 85%;
    margin: auto;
    margin: 0 auto 5%;
}
 
.about_note{
    background-color: #ffca50;
    color: #fff;
    padding: 3%;
    width: 96%;
    text-align: center;
    border-radius: 20px;
}
.about_btm{
    background-color: #ff6d2f;
    margin: 7% auto 0;
    position: relative;
    width: 70%;
    padding: 3%;
    border-radius: 20px;
}
.about_btm p{
    color: #fff;
    text-align: center;
    font-size: 1.5vw;
}
.about_btm img{
    position: absolute;
    top: -45px;
    left: -54px;
    width: 8%;
}

/*===============================================================================
now
===============================================================================*/

.now_sttl{
    width: 70%;
    margin: 5% auto 0;
    display: flex;
    justify-content: center;
}
.now_detail{
    background: url(../img/bg01.webp) no-repeat;
    background-size: 20%;
    background-position-x: right;
    background-position-y: center;
}
.now_inner{
    display: flex;
    flex-direction: row;
    width: 80%;
    margin: 0 auto 5%;
}
.now_wrapp{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 0 0 4%;
}
.now_note{
    background-color: #ff6d2f;
    margin: 4% 0;
    width: 90%;
    padding: 4% 0;
    border-radius: 20px;
    text-align: center;
    position: relative;
}
.now_note p{
    color: #fff;
    text-align: center;
}
.now_note img{
    position: absolute;
    top: -38%;
    right: -8%;
    width: 10%;
}

.now_box{
    width: 70%;
    background-color:rgba(255,109,47,0.2);
    border-radius: 20px;
    margin: 5% auto 0;
    padding: 3%;
    text-align: center;
    z-index: 10;
}
.now_wrapper{
    position: relative;
    padding: 0 0 60px;
}
.now_wrapper_before{
    position: absolute;
    top: 10%;
    left: 0;
    z-index: 5;
    width: 25%;
}
.now_wrapper_after{
    position: absolute;
    top: 2%;
    right: -10%;
    z-index: 5;
    width: 34%;
}
.now_hukidashi{
    width: 45%;
    margin: 5% auto 3%;
    display: flex;
    justify-content: center;
}
.now_material1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.now_material2{
    display: flex;
    flex-direction:row-reverse;
    justify-content: space-between;
}

/*===============================================================================
cta
===============================================================================*/
.cta{
    background-color: #ff402f;
    text-align: center;
    padding: 3% 0;
}
.cta_txt{
    width: 50%;
    margin: auto;
    display: flex;
    justify-content: center;
}
/*===============================================================================
process
===============================================================================*/

.process{
    background-color: #ffeb75;
    text-align: center;
    padding: 3%;
}
.process p{
    text-align: center;
}
.process img{
    margin: 5% 0;
}
.process_ttl{
    width:50%;
}
.process_table{
    width:70%;
}

/*===============================================================================
voice
===============================================================================*/

.voice_sttl{
    width: 70%;
    margin: 5% auto 0;
    display: flex;
    justify-content: center;
}
.voice_inner{
    position: relative;
}
.voice_box{
    width: 70%;
    background-color:rgba(255,109,47,0.2);
    border-radius: 20px;
    margin: 5% auto;
    padding: 3%;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 10;
}
.voice_box_last{
    width: 70%;
    background-color:rgba(255,109,47,0.2);
    border-radius: 20px;
    margin: 5% auto 8%;
    padding: 3%;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 10;
}
.voice_person{
    width: 15%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5%;
}
.voice_person img{
    width: 80%;
}
.voice_txt{
    text-align: left;
    width: 80%;
}
.voice_txt h4{
    color: #ff403f;
    font-size: 1.4vw;
    margin: 0 0 2%;
}



/*===============================================================================
course
===============================================================================*/

.course{
    z-index: 10;
    position: relative;
}
.course_inner{
    background-color: #fffce3;
    text-align: center;
    padding: 0 0 5%;
}
.course_sttl,.course_maru{
    width: 70%;
    margin: 2% auto 0;
}
.course_box{
    width: 70%;
    margin: 5% auto;
    background-color: #fff;
    border-radius: 20px;
    padding: 1% 3% 3%;
}
.course_box ul{
    display: flex;
    justify-content: space-between;
}
.course_box ul li{
    width: 30%;
    margin: 0 1%;
}
.course_box ul li img{
    margin: 1% 0;
}
.course_wrapp{
    display: flex;
    flex-direction: row;
}
.course_txt{
    display: flex;
    flex-direction: column;
    margin: 0 2% 0 0;
}
.course_kinds{
    display: flex;
    flex-direction: row;
    margin: 5% 0 0
}
.course_kindsbox1,.course_kindsbox2{
    border-radius: 10px;
    margin: 0 2% 0 0;
    text-align: center;
    width: 50%;
}
.course_kindsbox1{
    border: #ff83a9 solid 4px;
}
.course_kindsbox1 .course_kindsttl{
    background-color:#ff83a9;
    padding: 2% 0;
}
.course_kindsbox2{
    border: #6fc4d6 solid 4px;
}
.course_kindsbox2 .course_kindsttl{
    background-color:#6fc4d6;
    padding: 2% 0;
}
.course_kindsttl{
    color: #fff;
    border-radius: 2px 2px  0 0;
}
.course_kindsbox1 p{
    color:#ff83a9;
    padding: 10% 3%;
    text-align: center;
}
.course_kindsbox2 p{
    color:#6fc4d6;
    padding: 10% 3%;
    text-align: center;
}
.course_kinds_img{
    width: 100%;
}

/*===============================================================================
system
===============================================================================*/
.system-bg {
    background-color: #fffce3;
    padding: 80px 0;
}

.system-inner {
    background: url(../img/system-bg.webp) no-repeat;
    border: solid 6px #d4dce9;
    border-radius: 8px;
    width: 1000px;
    margin: 0 auto;
    background-size: cover;
    padding: 111px 63px 66px 63px;
    background-color: #fff;
}

.system-ttl01 {
    width: 1002px;
    margin: 0 auto;
    margin-bottom: -82px;
}

.system-txt01 {
    font-size: 24px;
    text-align: center;
    letter-spacing: .06em;
    font-weight: bold;
    line-height: 1.6;
}

.system-txt01 span {
    color: #e60012;
}

.system-img01 {
    width: 733px;
    margin: 22px auto 0 auto;
}

.system-img02 {
    width: 642px;
    margin: 32px auto 95px auto;
}

.system-item {
    margin-top: 30px;
}

.system-block {
    background-color: #fff;
    width: 875px;
    background-size: cover;
}

.system-question {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
    height: 93px;
    background: url(../img/system-btn.webp) no-repeat;
    cursor: pointer;
    background-size: 100%;
}

.system-question .txt {
    font-size: 1.6vw;
    letter-spacing: .06em;
    font-weight: bold;
    line-height: 1.65;
    color: #fff;
    margin-left: 32px;
    margin-top: -10px;
}

.system-flex {
    display: flex;
}

.system-flex img {
    width: 385px;
    margin-left: 25px;
    margin-top: -9px;
}

.system-question .btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 91px;
    padding: 10px 0 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    font-family: Zen Maru Gothic;
    letter-spacing: .06em;
}

.system-question .btn.open {
    font-size: 20px;
    letter-spacing: .06em;
}

.system-question .btn::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 27px;
    height: 27px;
    background: url(../img/system-arrow.webp) no-repeat 50% 0/contain;
    transform: rotate(180deg);
}

.system-question .btn.open::after {
    transform: rotate(0);
}

.system-answer {
    display: none;
    padding: 28px 45px 41px 36px;
    border: solid 6px #d4dce9;
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: -7px;
}

.system-item:nth-child(2) .system-answer{
    padding: 36px 45px 60px 36px;
}

.system-item:nth-child(3) .system-answer {
    padding: 38px 45px 19px 36px;
}

.system-item:last-child .system-answer {
    padding: 35px 45px 30px 36px;
}

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

.system-answer-ttl {
    font-family: Zen Maru Gothic;
    font-size: 20px;
    letter-spacing: .06em;
    line-height: 1.6;
    font-weight: bold;
}

.system-item:last-child .system-answer-ttl {
    width: 317px;
}

.system-answer-img {
    width: 400px;
}

.system-item:last-child .system-answer-img {
    margin-top: 8px;
}

.system-answer-txt {
    font-size: 16px;
    letter-spacing: .06em;
    line-height: 1.75;
    margin: 15px 0;
    width: 365px;
}

.system-answer-txt:nth-child(2) {
    margin: 17px 0;
}

.system-answer-txt span {
    font-weight: bold;
}
/*===============================================================================
faq
===============================================================================*/

.faq{
    width: 100%;
}
.faq_sttl{
    width: 16%;
    margin: 5% auto;
    display: flex;
    justify-content: center;
}

.faq dl{
    width: 70%;
    margin: 0 auto;
}

.faq dl div{
    margin-bottom: 28px;
}

.faq dl div dt{
    background: #fff;
    padding: 2vw 8vw 2vw 8vw;
    position: relative;
    cursor: pointer;
    text-align: left;
    border: 2px solid #FE402E;
    border-radius: 10px;
    z-index: 7;
}

.faq dl div dt::before{
    content: "";
    background: url("../img/faq_q.webp") no-repeat;
    background-size: 100% auto;
    width: 3vw;
    height: 3vw;
    position: absolute;
    top: 50%;
    left: 2vw;
    transform: translateY(-50%);
}
.faq dl div dt::after{
    content: "";
    background: url("../img/faq_open.webp") no-repeat;
    background-size: 40%;
    width: 6vw;
    height: 6vw;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: #FE402E;
    display: flex;
    border-radius: 0px 8px 8px 0px;
    background-position-x: 2vw;
    background-position-y: 1vw;
}

.faq dl div dt.active::after {
    background-image: url("../img/faq_close.webp");
    background-size: 57%;
    background-position-x: 1.5vw;
    background-position-y: 1.5vw;
}

.faq dl div dd{
    background: #fbedf6;
    border-radius: 10px;
    padding: 4vw 8vw 2vw 8vw;
    position: relative;
    display: none;
    margin: -2vw 0 0;
    text-align: left;
    z-index: 6;
}

.faq dl div dd::before{
    content: "";
    background: url("../img/faq_a.webp") no-repeat;
    background-size: 100% auto;
    width: 3vw;
    height: 3vw;
    position: absolute;
    top: 50%;
    left: 2vw;
}

/*===============================================================================
footer
===============================================================================*/
.footer-bg {
    background-color: #ffa16e;
    padding: 52px 0;
}

.footer-txt {
    color: #ffffff;
    text-align: center;
    line-height: 1;
    font-size: 14px;
    letter-spacing: .04em;
}