@charset "utf-8";
/*---------------------
　共通　
-----------------------*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
html {
    scroll-behavior: smooth;
}
body{
    margin: 0 auto;
    font-family: "Roboto", "dnp-shuei-gothic-kin-std","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    color: #4a4a4a;
    font-weight: 400;
    line-height: 1.5;
    font-style: normal;
    font-size: 18px;
    font-feature-settings: "palt";
    letter-spacing:2px;
}
@font-face {
    font-family: intro;
    src: url(../css/fonts/Intro.otf) ;
    font-weight: 400;
    font-style: normal
}

img{
    display: block;
    width: 100%;
}
ul {
    padding-inline-start: 0px;
}
a {
    text-decoration: none;
}
a:hover{
    opacity: 0.5;
    transition: opacity .3s;
}
.pc {
    display: block;
}
.sp {
    display: none;
}

h2{

    color: #EA3842;
    font-size: 72px;
    text-align: center;
}
h3{
    font-size: 36px;
    text-align: center;
    font-weight: 600;
}
.exp {
    margin: -1% 5% 1%;
    font-size: 1.9vw;
    text-align: center;
    color: #EA3842;
    font-weight: bold;
}
@media screen and (max-width: 1280px) {
    body{
        font-size: 1.5vw;
    }
    h2{
        font-size: 5vw;
    }
    h3{
        font-size: 2.6vw;
    }
}
@media (max-width: 767px) {
    body{
        margin: 0 auto;
        width: 100%;
        font-size: 0.95rem;
    }
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    h2{
        font-size: 10.2vw;
    }
    h3{
        font-size: 5.2vw;
    }
    .exp {
        font-size: 3.6vw;
    }
}

/*---------------------
　header　
-----------------------*/
header{
    position: fixed;
    z-index: 999;
    padding: 0.7rem 0;
    width: 100%;
    background-color: #414457;
}

.header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}
.head_btn a,.cta_btn a,.cta_download a{
    position: relative;
}
.btn_green,.btn_red{
    color: #FFFFFF;
    font-size: 24px;
    padding:12px 50px;
    border-radius: 2px;
    font-weight: bold;
}
.btn_green{
    background-color: #679090;
}
.btn_red{
    background: #EA3842;
    margin-right: 20px;
}
.c-arrow03__wrap {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    background: #EA3842;
    border-radius: 9999px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 6px;
    justify-content: center;
    position: absolute;
    right: 28px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: .25s;
    transition: .25s;
    width: 6px;
}
.white {
    background: #fff;
}
.red {
    color: #ea3842;
}
.head_logo {
    width: 13rem;
}
.text-bold {
    font-weight: bold;
}
@media screen and (max-width:760px){
    .header{
        padding: 5% 0;
    }
    .header_inner{
        padding: 0 0 0 0.6rem;
    }
    .btn_green,.btn_red{
        font-size: 3vw;
        padding: 11px 15px 11px 10px;
        letter-spacing: 1px;
    }
    .btn_red{
        margin-right:2vw;
    }
    .head_logo{
        width: 35%;
    }
    .head_btn .c-arrow03__wrap{
        width: 4px;
        height: 4px;
        right: 8px;
    }
}

/*---------------------
　kv
-----------------------*/
.kv_area{
    position: relative;
    padding-top: 58px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #414457;
}
.kv_txt_inner {
    position: relative;
    width: 100%;
    z-index: 2;
    background: #414457;
}
.kv_txt_inner .po_r{
    position: relative;
}
.kv_txt_inner .po_a{
    position: absolute;
    z-index: 3;
    bottom: 10%;
    right: 9%;
    width: 52%;
}
.kv_circle_inner{
    position: absolute;
    top: auto;
    width: 170px;
    left: 12%;
    bottom: -13rem;
}
.kv_course_inner{
    position: absolute;
    top: auto;
    width: 590px;
    left: 10%;
    bottom: -25rem;
}

/*---------
.sub_copy{
    font-size: 1.5vw;
    margin-bottom: 10%;
}
h1{
    font-size: 2.8vw;
    margin-bottom: 10%;
    font-weight: 600;
}
.kv_point{
    display: flex;
    max-width: 480px;
}
.point_inner{
    border-right: #fff 1px solid;
    padding: 2% 4%;
    text-align: center;
    letter-spacing: 1px;
    font-size: 0.9vw;
}
.point_inner:nth-of-type(3){
    border-right:none;
}
.point_inner img{
    padding: 10px 0;
    width: 64px;
    max-width:90%;
    margin: 0 auto;
}
--------*/
.kv_bg{
    max-width: 1180px;
    width: 100%;
    z-index: 1;
}
@media screen and (max-width: 1280px) {
    h1{
        font-size: 3.8vw;
    }
    .point_inner img{
        width: 45px;
    }
}
@media (max-width: 767px) {
    .kv_area{
        padding-top: 45px;
    }
    .kv_bg{
        width: 100%;
    }
    .kv_txt_inner{
        bottom: -55%;
        top: inherit;
        text-align: center;
    }
    .kv_circle_inner {
        bottom: 36rem;
        width: 29%;
    }
    .kv_course_inner{
        bottom: 30rem;
        width: 70%;
        left: 1rem;
        }
    .sub_copy{
        font-size: 4.5vw;
        margin-bottom: 5%;
    }
    h1 {
        font-size: 8.5vw;
    }
    .point_inner{
        padding:2% 3%;
        font-size: 2.9vw;
    }
    .kv_txt_inner .po_a{
        bottom: 3%;
        right: 9%;
        width: 85%;
    }
}
/*---------------------
　campaign
-----------------------*/
#campaign {
    background: #414457;
    padding-bottom: 5.5rem;
}

/*---------------------
　intro
-----------------------*/
.intro{
    display: flex;
    width: 1200px;
    max-width: 85%;
    justify-content:space-between;
    margin: 5% auto;
    align-items: center;
}
.intro img{
    width: 45%;
    padding-right: 8%;
}
.intro_txt_head{
    font-size: 42px;
    color:#EA3842;
    margin-bottom: 10%;
    font-weight: 600;
}
.intro_txt_body{
    font-size: 20px;
    line-height: 2.0;
}
@media screen and (max-width: 1280px) {
    .intro_txt_head{
        font-size: 3vw;
    }
    .intro_txt_body{
        font-size: 2vw;
    }
}
@media screen and (max-width:760px){
    .intro{
        display: block;
        margin:100% auto 16%;
        max-width: 89%;
    }
    .intro img{
        width: 100%;
        padding: 0 0 10%;
    }
    .intro_txt_head {
        font-size: 7vw;
        margin-bottom: 4%;
    }
    .intro_txt_body {
        font-size: 4vw;
        letter-spacing: 1px;
    }
}

/*---------------------
　campaign
-----------------------*/
.campaign{
    background-color: #f6f6f6;

}
.camp_inner{
    width: 1200px;
    max-width: 63rem;
    background-color: #fff;
    margin: 0 auto;
    position: relative;
    padding: 5% 0 7%;
}

.camp_inner img{
    width: 1000px;
    max-width: 85%;
    margin: 0 auto;
}
.camp_area {
    padding-top: 8%;
}
.camp_area h3{
    position: relative;
    margin-bottom: 5%;
}
.camp_area h3::before{
    background-color: #EA3842; /* 線の色 */
    bottom: -10px; /* 線の位置 */
    content: "";
    height: 4px; /* 線の高さ */
    left: 50%; /* 線の中央寄せ */
    position: absolute;
    transform: translateX(-50%); /* 線の中央寄せ */
    width: 60px; /* 線の長さ */
}
.camp_table{
    width: 1000px;
    max-width: 75%;
    margin: 0 auto;
    border-collapse: separate;  /* 表の線と線の間を空ける */
    border-spacing:16px 0;
    font-family: 'Noto Sans Japanese',   sans-serif;

}
.camp_table th{
    font-size: 15px;
    font-weight: 600;
}
.camp_table th,.camp_table td{
    padding: 1% 1.5%;
    border-bottom: #4a4a4a 1px solid;
    font-size: 1.2vw;
}
.camp_lead mark {
    background-color: #4cb220;
    padding: 10px 15px;
    color:#fff;
    font-weight: bold;
}


p.camp_lead {
    margin: -5% 0 6%;
    font-size: 25px;
    text-align: center;
}
.camp_bnr {
    margin: 2rem 0 0;
}


span.ribbon {
  position: relative;
  display: inline-block;
  padding: 0.1rem 0.5rem;
  color: #fff;
  border-radius: 0 100vh 100vh 0;
  background: #4cb220;
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  font-size: 0.7em;
}

@media screen and (max-width: 760px){
    p.camp_lead {
    margin: 0 0 6%;
    font-size: 25px;
    text-align: center;
}

.camp_lead mark {
    margin-top:3%;
    font-size: 5vw;
    line-height: 1.5;
}
    span.ribbon {
    margin: 0rem 0.5rem 0rem -10px;
}
}
.cta_inner{
    width: 1000px;
    max-width: 85%;
    display: flex;
    color: #fff;
    margin: 0 auto 10%;
    justify-content:center;
}
.cta_middle{
    width: 1200px;
    max-width: 85%;
    display: flex;
    color: #fff;
    margin: 10% auto ;
    justify-content:center;
}
.cta_reserve{
    background-color: #EA3842;
}
.cta_course{
    background-color: #679090;
}
.cta_course,.cta_reserve{
    text-align: center;
    padding: 2.5% 0;
    width: 100%;
    font-family: 'Noto Sans Japanese',   sans-serif;
}
.cta_inner h4{
    font-size: 1.4rem;
    font-weight: 600;
}
.cta_btn{
    margin: 6% 0;
}
.btn_white{
    background-color: #fff;
    color: #EA3842;
    font-size: 22px;
    padding: 3.5% 12% 3.5% 9%;
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: 1px;
}
.cta_course .btn_white{
    color: #679090;
}
.cta_course .c-arrow03__wrap{
    background-color: #679090;
}
.cta-bg {
    padding: 9rem 0 0.1rem;
}
@media screen and (max-width: 1280px) {

    .camp_table th{
        font-size: 2vw;
    }
    .camp_table th, .camp_table td{
        padding: 2%;
    }
    .btn_white{
        font-size: 1.8vw;
    }
}
@media screen and (max-width:760px){
    .cta-bg {
        padding: 5.4rem 0 0.1rem;
    }
    .camp_inner{
        max-width: 82%;
        padding: 2rem 1rem;
    }
    .camp_inner img {
        max-width: 100%;
    }
    .camp_table{
        max-width: 91%;
        border-spacing: 8px 0;
    }
    .camp_table th, .camp_table td{
        font-size: 3vw;
        letter-spacing: 0px;
    }
    .t_s{
        width:19%;
    }
    .camp_area h3{
        margin-bottom: 9%;
    }
    .camp_area h3::before{
        height: 2px;
    }
    .cta_inner{
        display: block;
        max-width: 90%;
        margin-bottom: 20%;
    }
    .cta_course, .cta_reserve{
        width: 100%;
        padding:3.5% 0;
                min-height: 120px;
    }
    .cta_inner h4{
        font-size: 4.2vw;
    }
    .btn_white{
        font-size: 4.5vw;
        padding: 4.5% 14% 4.5% 12%;
    }
    .cta_btn{
        margin-top: 8%;
    }
}

.cta_lead mark {
    background-color: #ffffff;
    padding: 10px 15px;
}
@media screen and (max-width: 760px){
.cta_lead mark {
    margin-top:3%;
    font-size: 5vw;
    line-height: 1.5;
}
}

p.cta_lead {
    margin-bottom: 6%;
    font-size: 25px;
    text-align: center;
}
/*---------------------
  skill
-----------------------*/
.skill {
    margin: 15% 0 0;
}
.skill h3,.reason h3,.price h3{
    margin: 1% 0 1%;
}
.skill p{
    text-align: center;
    margin: 0 3%;
}
.skill_list {
    display: block;
    width: 880px;
    max-width: 70%;
    margin: 10% auto;
}
.skill_item{
    position: relative;
}
.skill_txt{
    position: absolute;
    background-color: #4244587a;
    padding: 2% 4%;
    bottom: 5%;
    right: 0;
    text-align: center;
        font-size: 1.2rem;
    font-weight: bold;
}


@media screen and (max-width: 1280px) {
    .skill_txt{
        font-size: 1.1rem;
    }
}
@media screen and (max-width:760px){
    .skill h3, .reason h3, .price h3{
        margin: 2% 5%;
    }
    .skill_list{
        display: contents;
    margin: 20% 0;
    }
    .skill_item{
        width: 100%;
        margin: 15% 0;
    }
    .skill_txt{
        font-size: 1rem;
    }
}
/*---------------------
  program
-----------------------*/
.program {
    background: #f6f6f6;
    padding: 15% 0 1%;
}

.program h3,.reason h3,.price h3{
    margin: 1% 0 1%;
}
.program p{
    text-align: center;
    margin: 0 3%;
}
.program_list{
    display: flex;
    width: 1200px;
    max-width: 85%;
    margin: 10% auto;
    justify-content: space-between;
    margin-bottom: 7%;
    font-family: 'Noto Sans Japanese',   sans-serif;
}
.program_item{
    width: 47%;
    position: relative;
}
.program_txt {
    padding: 6% 7% 0%;
    font-weight: 600;
    text-align: center;
    font-size: 24px;
    color: #333;
}


@media screen and (max-width: 1280px) {
    .program_txt{
        font-size: 1.9vw;
    }
}
@media screen and (max-width:760px){
    .program h3, .reason h3, .price h3{
        margin: 2% 5%;
    }
    .program_list{
        display: block;
        max-width: 90%;
        margin: 20% auto;
    }
    .program_item{
        width: 100%;
        margin-bottom: 12%;
    }
    .program_txt{
        font-size: 4.5vw;
    }
}

/*---------------------
  about
-----------------------*/
.about{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: flex-end;
    margin: 15% 0 8%;
}
.about_machine_bg{
    position: relative;
    z-index: 1;
    width: 40%;
    padding-left: 10%;
}
.about_machine_bg .layer{
    width: 100%;
    background-color: #EA3842;
    padding-top: 100%;
}
.about_machine_bg .picture{
    background-image: url(../img/about_machine.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -2.4vw;
    right: 10.6vw;
    width: 41.33vw;
    max-width: 500px;
}
.about_machine_bg .picture::before{
    content: "";
    display: block;
    width: 100%;
    padding-top: 150%;
    pointer-events: none;
}
.about_mat_bg{
    position: relative;
    z-index: 1;
    width: 40%;
    padding-right: 10%;
}
.about_mat_bg .layer{
    width: 100%;
    background-color: #EA3842;
    padding-top: 100%;
}
.about_mat_bg .picture{
    background-image: url(../img/about_mat.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -2.4vw;
    left: 10.6vw;
    width: 41.33vw;
    max-width: 500px;
}
.about_mat_bg .picture::before{
    content: "";
    display: block;
    width: 100%;
    padding-top: 150%;
    pointer-events: none;
}
.about_h2,.about_txt{
    width: 1200px;
    margin: 0 auto;
}
.about_h2 h2{
    color: #f9cdd0;
    opacity: 0.5;
    z-index: 3;
    text-align: left;
    font-size: 6vw;
    position: absolute;
    top: 5%;
    line-height: 1;
}
.about_h2::before{
    background-color: #EA3842; /* 線の色 */
    top:38%; /* 線の位置 */
    content: "";
    height: 4px; /* 線の高さ */
    position: absolute;
    width: 77px; /* 線の長さ */
}

.about_txt_inner{
    width: 50%;
    margin: 0 auto;
    max-width: 510px;
    position: absolute;
    z-index: 3;
    top: 48%;
    line-height: 1.8;
}
.about_txt_inner h3 {
    text-align: left;
    font-size: 2.1vw;
    padding-bottom: 5%;
    line-height: 1.6;
}
@media screen and (max-width: 1280px) {

    .about_h2, .about_txt{
        margin-left: 8%;
    }
    .about_txt_inner h3{
        font-size: 2.5vw;
    }
    .about_txt_inner{
        width: 42%;
    }
    .about_bg .picture{
        right: 3.6vw;
    }
}
@media screen and (max-width:760px){
    .about{
        display: block;
        margin-bottom: 8%;
    }
    .about_bg{
        width: 76%;
        padding-left: 24%;
    }
    .about_bg .layer{
        padding-top: 140%;
    }
    .about_bg .picture{
        width: 84vw;
        top: 14.6vw;
        right: 9vw;
    }
    .about_machine_bg {
        width: 90%;
    }
    .about_mat_bg {
        width: 90%;
    }
    .about_machine_bg .layer {
        width: 100%;
        padding-top: 100%;
    }
    .about_mat_bg .layer {
        width: 100%;
        padding-top: 100%;
    }
    .about_machine_bg .picture {
        top: -12vw;
        width: 85%;
    }
    .about_mat_bg .picture {
        top: -12vw;
        width: 85%;
    }
    .about_machine_h2_sp h2{
        color: #f9cdd0;
        opacity: 0.5;
        text-align: left;
        font-size: 13vw;
        line-height: 1.2;
    }
    .about_mat_h2_sp h2{
        color: #f9cdd0;
        opacity: 0.5;
        text-align: right;
        font-size: 13vw;
        line-height: 1.2;
    }
    .about .sp{
        margin-top:15%;
        position: relative;
        z-index: 4;
    }
    .about_txt_inner_sp{
        width: 89%;
        margin: 8% auto;
    }
    .about_txt_inner_sp h3{
        text-align: left;
        font-size: 5.4vw;
        margin-bottom: 5%;
    }
    .about_txt_inner_sp p{
        line-height: 1.8;
    }
}

/*---------------------
  message
-----------------------*/
.message {
        margin: 15% 0 0;
    background: #424458;
    padding: 2rem 0;
    color: #fff;
}
.message h3,.reason h3,.price h3{
    margin: 1% 0 1%;
}
.message p{
    text-align: center;
    margin: 0 3%;
}
.message_list {
    display: flex
;
    width: 580px;
    max-width: 85%;
    margin: 10% auto;
    justify-content: space-between;
    margin-bottom: 7%;
    flex-direction: column;
}
.message_item{
    width: 47%;
    position: relative;
    margin: 0 2%;
}
.message_txt {
    position: relative;
    background-color: #fff;
    padding: 5%;
    font-size: 1.1vw;
    text-align: left;
    line-height: 1.7rem;
}


.degree_txt {
    font-size: 1.3vw;
    font-weight: bold;
    margin: 0 0 1rem 0;
}
p.degree_txt {
    text-align: center;
    font-size: 1.5rem;
}
p.name_txt {
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    margin: 2% 0 10%;
}
.message_subtxt {
    position: relative;
    background-color: #fff;
    padding: 2rem 0 3rem;
    font-size: 0.9rem;
        color: #55576c;

}
p.message_subtxt {
    text-align: left;
}
@media screen and (max-width: 1280px) {
    .message_txt{
        font-size: 1.3vw;
    }


}
@media screen and (max-width:760px){
    .message h3, .reason h3, .price h3{
        margin: 2% 0 1%;
    }
    p.degree_txt {
    font-size: 1.2rem;
}
    .message_list{
        display: block;
        max-width: 90%;
        margin: 20% auto;
    }
    .message_item{
        width: 90%;
        margin: 0 auto 22px;
    }
    .message_txt{
        font-size: 3.5vw;
    }
    .message_item img {
        width: 70%;
        margin: 0 auto;
    }
    .name_txt {
        font-size: 4.6vw;
    }
     .message_subtxt {
        font-size: 13px;
        line-height: 1.3rem;
        margin: 0;

}


}


/*---------------------
  course
-----------------------*/

.course h3,.reason h3,.price h3{
    margin: 1% 0 1%;
}
.course p{
    text-align: center;
}
.course_list{
    display: flex;
    width: 1200px;
    max-width: 85%;
    margin: 10% auto;
    justify-content: space-between;
    margin-bottom: 7%;
}
.course_item{
    width: 47%;
    position: relative;
}
.course_txt{
    position: absolute;
    background-color: #ffffffd6;
    padding: 3% 12% 5%;
    bottom: -15%;
    right: 0;
    font-weight: 600;
    text-align: center;
    font-size: 24px;
}
.red_txt{
    color: #EA3842;
    font-size: 22px;
    padding: 6px 0;
}
.white_txt{
    color: #fff;
    padding: 6px 0;
}
.sup_txt {
    font-size: 75%;
    font-weight: normal;
}

.learn{
    background-color: #f6f6f6;
    margin-top: -5%;
    padding: 15% 0 5%;
    text-align: center;
}
.learn h3{
    margin: 0 0 1%;
}
.learn_list{
    display: flex;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    margin-top: 1%;
    margin: 10% auto;
}
.learn_item {
    border-top: solid 2px #EA3842;
    border-bottom: solid 2px #EA3842;
    width: 400px;
    height: 175px;
    margin: 1%;
    position: relative;
}
.learn_txt .red_txt {
    font-weight: bold;
}
.learn_txt{
    position: absolute;
    top: 48%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    width: 100%;
    font-weight: normal;
}
.learn_txt .mark_txt {
    font-size: 1.5vw;
}
.recommend{
    margin: 0 0 12%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
}
.recom_bg{
    max-width: 1080px;
    width: 50%;
    z-index: 1;
}
.recom_txt {
    background-color: #f6f6f6;
    width: 40%;
    max-width: 887px;
    padding: 3% 4% 3% 6%;
    position: absolute;
    right: 10%;
    z-index: 2;
    color: #ea3842;
}
.recom_txt h2{
    color: #ea3842;
    text-align: left;
    font-size: 18px;
}
.recom_txt h3 {
    font-size: 2.8vw;
    margin: 0 0 5%;
}
.recom_list{
    list-style-type: none;
    font-size: 18px;
    margin: 10% auto;
}
.recom_list li {
    position: relative;
    line-height: 1.8;
    margin: 0 0 5px 10px;
}
.recom_list li::after {
    content: '';
    display: block;
    position: absolute;
    top: .5em;
    left: -1.5em;
    width: 10px;
    height: 5px;
    border-left: 3px solid #ea3842;
    border-bottom: 3px solid #ea3842;
    transform: rotate(-45deg);
}
@media screen and (max-width: 1280px) {
    .course_txt{
        font-size: 1.9vw;
    }
    .red_txt{
        font-size: 1.8vw;
    }
    .learn{
        padding: 17% 0;
    }
    .recom_bg{
        width: 70%;
    }
    .recom_txt h2 {
        font-size: 5vw;
    }
    .recom_list li{
        margin: 0 0 3% 7%;
    }
    .learn_item{
        width: 29vw;
        height: 13vw;
    }
}
@media screen and (max-width:760px){
    .course h3, .reason h3, .price h3{
        margin: 2% 0 1%;
    }
    .course_list{
        display: block;
        max-width: 89%;
        margin: 20% auto;
    }
    .course_item{
        width: 100%;
        margin-bottom: 22%;
    }
    .course_txt{
        font-size: 4.2vw;
    }
    .red_txt {
        font-size: 4vw!important;
    }
    .learn {
        padding: 49% 0 12%;
        margin-top: 50%;
    }
    .learn_list{
        display: block;
        max-width: 90%;
        margin: 10% auto;
    }
    .learn_list_sp{
        display: flex;
        margin-top: 5%;
        flex-direction: column;
    }
    .learn_item{
        width: 100%;
        height: 34vw;
    }
    .MaC{
        margin: 0 auto;
    }
    .learn_txt p{
        font-size: 3.5vw;
    }
    .learn_item:before{
        left: 6px;
    }
    .learn_item:after {
        right: 6px;
    }
    .recommend{
        display: block;
        margin: 0 0 14%;
    }
    .recom_bg{
        width: 100%;
    }
    .recom_txt {
        position: relative;
        margin: -6rem auto 0;
        right: auto;
        width: 89%;
        box-sizing: border-box;
        padding: 5% 3%;
    }
    .learn_txt .mark_txt {
        font-size: 4vw;
    }
    .recom_txt h3{
        font-size: 6.3vw;
        margin: 0 0 4%;
    }
    .recom_list{
        font-size: 3.5vw;
        margin: 10% 0;
    }
    .recom_list li {
        margin: 0 0 2% 9%;
        line-height: 1.5;
    }
}
/*---------------------
　knowledge
-----------------------*/
.knowledge{
    background-color: #f6f6f6;
    padding: 6.5% 0;
}
.know_inner {
    width: 1200px;
    max-width: 85%;
    background-color: #fbe6e87e;
    margin: 0 auto;
    position: relative;
    padding: 5% 0;
}
.know_inner h2 {
    font-size: 36px;
    font-weight: bold;
}
.know_inner h3 {
    font-size: 2.1vw;
}
.know_inner img{
    width: 1000px;
    max-width: 57%;
    margin: 5% auto 0;
}
.know_area {
    padding: 8% 0 3%;
    width: 65%;
    margin: 0 auto;
    text-align: left;
}

.know_area h3{
    position: relative;
    margin-bottom: 5%;
}
.know_area h3::before{
    background-color: #EA3842; /* 線の色 */
    bottom: -10px; /* 線の位置 */
    content: "";
    height: 4px; /* 線の高さ */
    left: 50%; /* 線の中央寄せ */
    position: absolute;
    transform: translateX(-50%); /* 線の中央寄せ */
    width: 60px; /* 線の長さ */
}
.mark_txt {
    background:linear-gradient(transparent 50%, rgb(251 255 0 / 56%) 50%);
    display: inline;
    font-weight: bold;
    font-size: 1.7vw;
}
.know_lead mark {
    background-color: #4cb220;
    padding: 10px 15px;
    color:#fff;
    font-weight: bold;
}
p.know_lead {
    margin: -5% 0 6%;
    font-size: 25px;
    text-align: center;
}
@media screen and (max-width: 760px){
    .know_inner h2 {
        font-size: 6vw;
    }
    .know_inner h3 {
        font-size: 5vw;
    }
    .know_area {
        width: 85%;
    }
    .mark_txt {
        font-size: 4.5vw;
    }
    p.know_lead {
    margin: 0 0 6%;
    font-size: 25px;
    text-align: center;
}

    .know_lead mark {
    margin-top:3%;
    font-size: 5vw;
    line-height: 1.5;
}
    span.ribbon {
    margin: 0rem 0.2rem;
}
}

@media screen and (max-width: 1280px) {
    .know_inner h2{
        top:-2.5%
    }
    .know_table th{
        font-size: 2vw;
    }
    .know_table th, .know_table td{
        padding: 2%;
    }
}
@media screen and (max-width:760px){
    .knowledge{
        padding: 24% 0 0;
    }
    .know_inner{
        max-width: 89%;
        padding: 14% 0;
    }
    .know_inner img {
        max-width: 85%;
    }

    .know_area h3{
        margin-bottom: 9%;
    }
    .know_area h3::before{
        height: 2px;
    }
}



/*---------------------
  reason
-----------------------*/
.reason{
    width: 1400px;
    max-width: 100%;
    margin: 15% auto 1%;
}
.reason_item_l,.reason_item_r{
    position: relative;
    display: flex;
    margin-bottom: 4%;
    margin-top: 10%;
}
.reason_item_l img{
    z-index: 2;
    width: 54%;
    position: absolute;
    top: -1%;
    right: 0;
}
.reason_txt{
    position: relative;
    z-index: 1;
    width: 34%;
    background: #f6f6f6;
    margin-top: 130px;
}
.reason_item_l .reason_txt{
    padding: 7% 20% 8% 6%;
    transform: translateY(-50px);
}
.reason_number{
    position: absolute;
    top: -3%;
    transform: translateY(-50%);
    font-size: 144px;
    color: #EA3842;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s;
}
.reason_txt_head{
    font-size: 30px;
    font-weight: 600;
    padding-bottom: 8%;
}
.reason_txt_body{
    line-height: 1.8;
    padding-bottom: 5%;
}
.note{
    list-style-type: none;
    margin-left: 1.5em;
    font-size: 14px;
    vertical-align:super;
}
.note li{
    text-indent: -1.5em;
}
.note li:before{
    content: "※";
    margin-right: 0.5em;
}
span.note {
    margin: 0;
}
/*right*/
.reason_item_r{
    justify-content: flex-end;
}
.reason_item_r img{
    z-index: 2;
    width: 54%;
    position: absolute;
    top: -1%;
    left: 0;
}
.reason_item_r .reason_txt{
    padding: 7% 6% 8% 20%;
    transform: translateY(-50px);
}
.reason_item_r .reason_number{
    right: 10%;
}
.r_4 .reason_txt{
    padding: 7% 6% 17% 20%;
}
@media screen and (max-width: 1280px) {
    .reason_number{
        font-size: 10vw;
    }
    .reason_txt{
        margin-top: 14%;
    }
    .reason_txt_head{
        font-size: 1.9vw;
        letter-spacing: 0px;
    }
    .note{
        font-size:1.0vw;
    }
}
@media screen and (max-width:760px){
    .reason_item_l, .reason_item_r{
        display: block;
    }
    .reason_txt{
        margin-top: 24%;
    }
    .reason_item_l .reason_txt,.reason_item_r .reason_txt{
        transform: none;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 15% 9% 40%;
    }
    .reason_item_l img{
        position: relative;
        width: 91%;
        margin: -28% 0 24% 9%;
    }
    .reason_item_r img{
        width: 90%;
        bottom: -23%;
        top: auto;
    }
    .reason_item_r{
        margin-bottom: 65%;
    }
    .reason_number {
        font-size: 22vw;
        top: -1%;
    }
    .reason_txt_head {
        font-size: 5.3vw;
    }
    .note {
        font-size: 2.3vw;
    }
    .r_4 img{
        bottom: -33%;
    }
}

/*---------------------
  cta
-----------------------*/
.cta_area{
    background-image: url(../img/cta_bg_pc.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    padding: 4% 0 9%;
    color: #fff;
    margin-bottom: 8%;
}
.cta_txt{
    font-size: 20px;
    line-height: 2.0;
    padding: 4%;
}
.cta_area .cta_inner{
    position: absolute;
    top:64%;
    right: 0;
    left: 0;
}
.cta_download{
    display: flex;
    width: 1000px;
    max-width: 85%;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    padding: 1% 0 3%;
    font-weight: 600;
}
.cta_download img{
    width:55px;
    margin-right: 15px;
}
.cta_download a{
    border: #EA3842 2px solid;
    margin-left: 5%;
    padding: 2% 8% 2% 7%;
}
@media screen and (max-width:1500px){
    .cta_download{
        padding: 5% 0 3%;
    }
}
@media screen and (max-width:1280px){
    .cta_txt{
        font-size: 1.8vw;
        line-height: 1.5;
    }
}
@media screen and (max-width:760px){
    .cta_area{
        padding: 12% 0 36%;
        background-image: url(../img/cta_bg_sp.jpg);
        margin-bottom: 72%;
    }
    .cta_area h3{
        font-size: 6.5vw;
    }
    .cta_txt{
        font-size: 4vw;
        line-height: 1.5;
    }
    .cta_download{
        display: block;
        text-align: center;
        padding: 8% 0 15%;
    }
    .cta_download img{
        margin: 0 auto;
        margin-bottom: 5%;
    }
    .cta_download p{
        margin-bottom: 10%;
    }
    .cta_download a{
        margin: 0;
        padding: 4.5% 22% 4.5% 20%;
    }
}

/*---------------------
  movie
-----------------------*/
.movie{
    display: flex;
    width: 1200px;
    max-width: 85%;
    margin: 0 auto 8%;
    justify-content: space-between;
    align-items: center;
    padding-top: 6%;
}
.movie_txt{
    width: 40%;
    padding-right: 5%;
}
.movie_txt_head{
    color: #EA3842;
    font-size: 2vw;
    font-weight: 600;
    margin-bottom: 5%;
}
.movie iframe{
    width: 70%;
    height: 404px;
}
@media screen and (max-width:1280px){
    .movie{
        padding-top: 11%;
    }
    .movie iframe{
        height: 32vw;
    }
}
@media screen and (max-width:760px){
    .movie{
        display: block;
        max-width: 89%;
        padding-top: 15%;
        margin: 0 auto 20%;
    }
    .movie_txt{
        width: 100%;
        padding-bottom: 10%;
    }
    .movie_txt_head{
        font-size: 6vw;
    }
    .movie iframe {
        width: 100%;
        height: 49vw;
    }
}
/*-----------------------------------------
    スケジュール
------------------------------------------*/
.schedule {
    margin: 15% 0 0;
}
.schedule_list {
    width: 1200px;
    max-width: 100%;
    margin: 10% auto;
    margin-bottom: 7%;
}
.schedule_cpn {
    color: #bbd10b;
    font-weight: bold;
    font-size: 1.3rem;
}
  @media only screen and (max-width: 767px) {
    .schedule_cpn {

    font-size: 1.1rem;
}
  }

.bl_mainVisual_lv3Heading { padding: 6px 32px;}
h4.bl_schedule_ttl {
  margin: 10% 10% 4%;
  text-align: center;
}
.text-link {color:#fff;
    text-decoration: underline;
}

/* テーブル */
  .table_course {     border: 1px solid #333;
    margin: 0 auto;
    max-width: 100%;
    width: 70%;
    font-size: 1rem;}
  .table_course tr { border-bottom: 1px solid #333;}
  .table_course tr:nth-child(2n) { background-color: white;}
  .table_course th { border-right: 1px solid #333; background-color: #333; color: white; padding: 10px;}
  .table_course td { border-right: 1px solid #333; padding: 10px; border-bottom: 1px solid #333;}
  .col-date { width: 25%;}
  .panel-body { border: 1px solid #333; padding: 20px; margin-top: 20px;}
  @media only screen and (max-width: 767px) {
    .table_course {

    width: 90%;
    font-size: 0.9rem;
}

  }
  /*-----------------------------------------
    スタジオ
------------------------------------------*/
.studio {
    margin: 15% 0 0;
}
.studio_list {
    width: 1200px;
    max-width: 85%;
    margin: 10% auto;
    margin-bottom: 7%;
}
.map {text-align: center;}
@media screen and (max-width:760px){
    .studio_list {
        margin: 20% auto;
    }
}

/*---------------------
  price
-----------------------*/
.price{
    width: 1400px;
    max-width: 85%;
    margin: 10% auto 8%;
    position: relative;
}
.price p {
    text-align: center;
}
p.price_ttl {
    text-align: left;
}
p.price_txt {
    text-align: left;
}
.price_bg{
    background-color: #f9cdd0;
    width: 90%;
    padding: 6% 0;
    margin: 10% auto;
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}
.price_bnr{
    width: 1000px;
    max-width: 85%;
    margin: 5% auto;
    background-image: url(../img/price_bnr_pc.jpg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2%;
    box-sizing: border-box;
}
.price_inner{
    display: inline-block;
    background-color: #333;
    padding: 4% 5%;
    color: #fff;
    width: 27%;
    text-align: left;
}
.price_ttl{
    font-size: 30px;
    font-weight: 600;
    padding-bottom: 6%;
}
.price_txt{
    font-size: 14px;
    padding-bottom: 10%;
}
.price_link a{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    padding-bottom: 0.5em;
}
.c-button01__text {
    color: #111;
    font-size: 16px;
    font-weight: 600;
    margin-right: 1em;
    text-decoration: none;
    color: #fff;
}
.price_link a:before {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 2px;
    position: absolute;
    width: 60%;
}
.c-arrow01__wrap {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    background: #fff;
    border-radius: 9999px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 35px;
    justify-content: center;
    width: 35px;
}
.c-arrow01__img {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    background: #db1a1a;
    border-radius: 9999px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 5px;
    justify-content: center;
    line-height: 1;
    -webkit-transition: .4s ease;
    transition: .4s ease;
    width: 5px;
}
@media screen and (max-width: 1100px) {
    .price_inner {
        width: 45%;
    }
    .price_bg {
        width: 100%;
        padding: 13% 0;
    }
    .price_link a:before{
        width: 63%;
    }
    .price_ttl{
        font-size: 3vw;
    }
}
@media screen and (max-width:760px){
    .price{
        max-width: 100%;
        margin: 0px auto 64%;
    }
    .price h3{
        font-size: 6vw;
    }
    .price_bg{
        padding: 30% 0;
        margin: 17% auto;
    }
    .price_bnr{
        max-width: 89%;
        height: 59vw;
        background-image: url(../img/price_bnr_pc.jpg);
        position: relative;
    }
    .price_inner{
        box-sizing: border-box;
        display: block;
        width: 87%;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        padding: 6% 7%;
    }
    .price_ttl{
        font-size: 5vw;
    }
    .c-button01__text{
        font-size: 3vw;
    }
    .c-arrow01__wrap{
        height: 27px;
        width: 27px;
    }
    .price_txt{
        font-size: 3.1vw;
    }
    .price_link a:before{
        width: 46%;
        height: 1px;
    }
}
/*---------------------
  conference
-----------------------*/
.conference{
    width: 1400px;
    max-width: 85%;
    margin: 0 auto 8%;
    position: relative;
}
.conference h3{
    padding-bottom: 5%;
}
.conference_bg{
    background-color: #ea3842;
    width: 90%;
    padding: 22% 0;
    margin: 4% auto;
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}
.conference_bnr{
    width: 890px;
    max-width: 85%;
    margin: 10% auto 0;
    background-image: url(../img/online_bnr_pc.jpg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2%;
    box-sizing: border-box;
    text-align: right;
}
.conference_inner{
    display: block;
    background-color: #679090;
    padding: 4% 5%;
    color: #fff;
    width: 27%;
    text-align: left;
}
.conference_ttl{
    font-size: 30px;
    font-weight: 600;
    padding-bottom: 6%;
}
.conference_txt{
    font-size: 14px;
    padding-bottom: 10%;
}
.conference_link a{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    padding-bottom: 0.5em;
}
.c-button01__text {
    color: #111;
    font-size: 16px;
    font-weight: 600;
    margin-right: 1em;
    text-decoration: none;
    color: #fff;
}
.conference_link a:before {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 2px;
    position: absolute;
    width: 94%;
}
.c-arrow01__wrap {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    background: #fff;
    border-radius: 9999px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 35px;
    justify-content: center;
    width: 37px;
}
.c-arrow01__img {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    background: #5a8daa;
    border-radius: 9999px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 5px;
    justify-content: center;
    line-height: 1;
    -webkit-transition: .4s ease;
    transition: .4s ease;
    width: 5px;
}
@media screen and (max-width: 1100px) {
    .conference_inner {
        width: 45%;
    }
    .conference_bg {
        width: 100%;
        padding: 13% 0;
    }
    .conference_link a:before{
        width: 85%;
    }
    .conference_ttl{
        font-size: 3vw;
    }
}
@media screen and (max-width:760px){
    .conference{
        max-width: 100%;
        margin: 0px auto 30%;
    }
    .conference h3{
        font-size: 6vw;
        padding-bottom: 9%;
    }
    .conference_bg{
        padding: 30% 0;
        margin: 17% auto;
    }
    .conference_bnr{
        max-width: 89%;
        height: 59vw;
        background-image: url(../img/online_bnr_sp.jpg);
        position: relative;
    }
    .conference_inner{
        box-sizing: border-box;
        display: block;
        width: 87%;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        padding: 6% 7%;
    }
    .conference_ttl{
        font-size: 5vw;
    }
    .c-button01__text{
        font-size: 3vw;
    }
    .c-arrow01__wrap{
        height: 27px;
        width: 27px;
    }
    .conference_txt{
        font-size: 3.1vw;
    }
    .conference_link a:before{
        width: 46%;
        height: 1px;
    }
}

footer{
    background-color: #4a4a4a;
    padding: 2%;
}
footer p{
    font-size: 14px;
    text-align: center;
    color: #fff;
}
@media screen and (max-width:760px){
    footer{
        padding: 7% 2%;
    }
    footer p{
        font-size: 14px;
        font-size: 2vw;
    }
}
/*-----------------------------------------
   フェードアップ
------------------------------------------*/
/* fadeUp */
.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }

    @keyframes fadeUpAnime{
      from {
        opacity: 0;
      transform: translateY(100px);
      }

      to {
        opacity: 1;
      transform: translateY(0);
      }
    }


    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/

    .fadeUpTrigger{
        opacity: 0;
    }

/* safari対応 */
::-webkit-full-page-media, :future, :root .camp_table{
    width: 91%;
    border-spacing: 8px 0;
}