@charset "shift-jis";
/* --------------------------------------------------------------------
	Financial Academy

	Style Info: cart setting

-------------------------------------------------------------------- */
*{ box-sizing: border-box;}
body{ counter-reset: process 0;}

img{ max-width: 100%;}

.tac { text-align: center;}
.tar { text-align: right;}
.txt_orange { color: #ea5413;}
.txt_red { color: #ff0000;}
.txt_blue { color: #2c4198;}
.txt_lblue { color: #00afec;}
.txt_purple { color: #00af78;}

.text_l{ font-size: 18px;}
.text_s{ font-size: .75em;}
.text_bold{ font-weight: bold;}

.mb50 { margin-bottom: 50px !important;}
.mb60 { margin-bottom: 60px !important;}
.mb70 { margin-bottom: 70px !important;}
.mb80 { margin-bottom: 80px !important;}
.ml10 { margin-left: 10px !important;}
.ml20 { margin-left: 20px !important;}
.ml35 { margin-left: 35px !important;}

.caution{ font-size: .8em;}

.indent1 {
    text-indent: -1em;
    padding-left: 1em;
}

.pc{ display: inherit;}
span.pc{ display: inline;}
.sp{ display: none !important;}

.br_pc::before{
    content: "\A" ;
    white-space: pre ;
}

select {
    width: 100%;
    height: 30px;
    padding-left: 10px;
}

section h2{
    font-size: 2rem;
/*    letter-spacing: .15em;*/
    font-weight: normal;
    line-height: 1.7;
    text-align: center;
    color: #1c236d;
}
section h2::after{
    content: "";
    display: block;
    border-bottom: 3px solid #1c236d;
    width: 115px;
    margin: 20px auto 85px;
}
.mf h2{ color: #00af78;}
.mf h2::after{ border-bottom-color: #00af78;}
.fudo h2{ color: #0091d7;}
.fudo h2::after{ border-bottom-color: #0091d7;}
section h3{
    text-align: center;
    font-size: 23px;
}

section h3.check::before{
    font-family: "Font Awesome 5 Free";
    content: '\f00c';
    font-weight: 900;
    margin-right: .8em;
}

section h3.line{
    border-top: 1px solid #1c236d;
    margin-bottom: 70px;
    margin-top: 1em;
}
section h3.line > span{
    color: #1c236d;
    background: #fff;
    margin-top: -1em;
    display: inline-block;
    padding: 0 12px;
    max-width: 85%;
    letter-spacing: .15em;
}
.bg-beige h3.line > span{ background: #f3f3f2;}

section h3.border{
    color: #1c236d;
    text-align: center;
    font-size: 22px;
    line-height: 1.5;
    border-top: 2px solid #1c236d;
    border-bottom: 2px solid #1c236d;
    margin: 0 0 40px;
    position: relative;
    padding: 10px 0;
}
.mf h3.border{
    color: #00af78;
    border-top: 2px solid #00af78;
    border-bottom: 2px solid #00af78;
}
.fudo h3.border{
    color: #0091d7;
    border-top: 2px solid #0091d7;
    border-bottom: 2px solid #0091d7;
}

section h3.border02 span{
    border: 1px solid;
    padding: 15px;
}

section h3.bg{
    color: #fff;
    text-align: center;
    font-size: 22px;
    line-height: 1.5;
    background: #1c236d;
    margin: 0 0 40px;
    position: relative;
    padding: 10px 0;
}
.mf h3.bg{ background: #00af78;}
.fudo .box h3.bg{
    color: #fff;
    background: #0091d7;
}

.bg-beige { background-color: #f3f3f2;}

.lead{ font-size: 20px;}
.lead .color {
    font-size: 1.35em;
    color: #00af78;
}

section .inner{
    width: 96%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 70px 0;
}
section .inner .lead{
    font-size: 18px;
    text-align: center;
    margin-bottom: 65px;
}

.btn01{
    text-align: center;
    background: #e50012 url(/images/common/arrow02.svg) 97% center/21px no-repeat;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    position: relative;
    letter-spacing: .1em;
    box-shadow: 0 1.5px 0 #782332;
    max-width: 380px;
    margin: 70px auto;
}
.btn01 a{
    color: #fff;
    padding: 10px 15px;
    display: block;
}
.btn01 a:hover{
    text-decoration: none;
    opacity: .7;
}
.btn02 {
    text-align: center;
    background: #e10f40;
    width: 100%;
    max-width: 410px;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    padding: 20px;
    position: relative;
}
a.btn02 {
    display: block;
    text-decoration: none;
    color: #fff;
    margin: 30px auto;
}
.btn02::before{
    font-family: "Font Awesome 5 Free";
    content: '\f138';
    font-weight: 900;
    color: #fff;
    position: absolute;
    left: 20px;
    top: 25px;
}
.btn02:hover{
    cursor: pointer;
    opacity: .7;
}
.btn02.mf{ background: #00af78;}
.btn02.mf::before{
    content: "";
    width: 36px;
    height: 36px;
    background: url(/school/image/casebox/entrepreneur/arrow.svg) left top/contain no-repeat;
    left: 0;
    right: 0;
    bottom: -50px;
    margin: auto;
    transform: rotate(90deg);
}
.btn02.fudo{ background: #0091d7;}
.btn02.fudo::before{
    content: "";
    width: 36px;
    height: 36px;
    background: url(/school/image/casebox/mutualfund/arw_fudo.svg) left top/contain no-repeat;
    left: 0;
    right: 0;
    bottom: -50px;
    margin: auto;
    transform: rotate(90deg);
}


.txt_link{
    display: block;
    text-align: center;
    font-size: 16px;
    text-decoration: underline !important;
    margin-top: 30px;
    margin-bottom: 30px;
}
.txt_link:hover{ text-decoration: none !important;}
.mf .txt_link{ color: #00af78;}
.fudo .txt_link{ color: #0091d7;}

.youtube {
    max-width: 950px;
    margin: 0 auto;
    width: 100%;
    position:relative;
    padding-top:56.25%;
}
.youtube iframe {
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
}

#mv{
    text-align: center;
    letter-spacing: .25em;
/*    position: relative;*/
}
#mv .img{
    text-align: right;
    background: #f3f3f2;
}
#mv .img img{ max-width: 900px;}
#mv .title{
    margin-top: -100px;
    padding-bottom: 70px;
}
#mv .title h1{
    width: 90%;
    max-width: 900px;
    margin: 0 auto 55px;
/*    background: #00afec;
    color: #fff;
    padding: 35px;
    height: 5em;
    mix-blend-mode: multiply;*/
    position: relative;
    font-size: 43px;
    font-weight: normal;
}
#mv .title h1 .bg{
    display: block;
    background: #5667ad;
    width: 100%;
    height: 5em;
    mix-blend-mode: multiply;
}
#mv .title h1 .number{
    font-family: 'Josefin Slab', serif;
    position: absolute;
    color: #01afec;
    font-size: .7em;
    top: -45px;
    left: 0;
    letter-spacing: 0;
}
#mv .title h1 .text{
    position: absolute;
    top: 40px;
/*    top: 0;
    bottom: 0;*/
    left: 0;
    right: 0;
    margin: auto;
    color: #fff;
}
#mv .title h1 .text .text_s,
.seika h2 .text_s{
    font-size: .65em;
    vertical-align: .8em;
}
#mv .title h1 .caution{
    position: absolute;
    bottom: 0;
    display: block;
    color: #fff;
    left: 0;
    right: 0;
    font-size: 17px;
    letter-spacing: 0;
}
#mv .title h1 span[class^="baloon"]{
    font-size: 24px;
    border: 1px solid #fff;
    position: absolute;
    top: 20px;
    padding: 0 10px;
    color: #fff;
}
#mv .title h1 .baloon01{
    background: #00af78;
    left: 8%;
}
#mv .title h1 .baloon01::before{
    content: "";
    border: 8px solid transparent;
    border-left: 20px solid #fff;
    position: absolute;
    right: -28px;
    transform: skewY(-335deg);
    top: 55%;
}
#mv .title h1 .baloon01::after{
    content: "";
    border: 7px solid transparent;
    border-left: 20px solid #00af78;
    position: absolute;
    right: -25px;
    transform: skewY(-335deg);
    top: 55%;
}
#mv .title h1 .baloon02{
    background: #0091d7;
    right: 6%;
}
#mv .title h1 .baloon02::before{
    content: "";
    border: 8px solid transparent;
    border-right: 20px solid #fff;
    position: absolute;
    left: -28px;
    transform: skewY(335deg);
    top: 55%;
}
#mv .title h1 .baloon02::after{
    content: "";
    border: 7px solid transparent;
    border-right: 20px solid #0091d7;
    position: absolute;
    left: -25px;
    transform: skewY(335deg);
    top: 55%;
}


.box{
    background: #f3f3f2;
    position: relative;
}
.bg-beige .box{ background: #fff;}
.box h3{
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 30px;
    color: #00af78;
}
.box.fudo h3,
.fudo .box h3{ color: #0091d7;}
.box h3 .text_l{
    display: block;
    font-size: 2em;
}
.box h3 .num{
    font-family: 'Josefin Slab', serif;
    font-size: 73px;
    vertical-align: middle;
    padding: 0 10px;
    position: absolute;
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
}
.box .voice{
    background: #fff;
    position: relative;
    padding: 15px 25px;
    margin-bottom: 15px;
    font-size: 13px;
}
.bg-beige .box .voice{ background: #f3f3f2;}
.box .voice::before,
.box .voice::after{
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-top: 2px solid #00af78;
    border-left: 2px solid #00af78;
}

.fudo .box .voice::before,
.fudo .box .voice::after,
.box.fudo .voice::before,
.box.fudo .voice::after{ border-color: #0091d7;}
.box .voice::before{
    top: 0;
    left: 0;
}
.box .voice::after{
    bottom: 0px;
    right: 0px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.box .voice + .chart{
    margin-top: 75px;
    position: relative;
}
.box .voice + .chart::before {
    content: "";
    border: 14px solid transparent;
    border-top: 18px solid #00af78;
    position: absolute;
    top: -45px;
    left: 49%;
    display: block;
    background: transparent;
}
.fudo .box .voice + .chart::before,
.box.fudo .voice + .chart::before { border-top-color: #0091d7;}

.box .chart{
    font-size: 21px;
    background: #f3f3f2;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: #00af78;
}
.fudo .box .chart,
.box.fudo .chart{ color: #0091d7;}
/*.box .chart dt{ width: 25%;}*/
.box .chart dd{ width: 5em;}
.box .chart + .chart{ margin-top: 10px;}

.ver .box{
    padding: 60px 25px 40px;
}

.type .inner{ padding-bottom: 25px;}
.type .box{
    padding: 50px 45px 60px;
}
.type .box ul li {
    text-align: left;
    padding-left: 25px;
    font-size: 18px;
    background: url(/images/common/check_zemi.svg) left 3px/20px no-repeat;
    margin-bottom: 15px;
    line-height: 1.6;
}
.fudo.type .box ul li{ background-image: url(/images/common/check_fudo.svg);}

.type .catch{
    width: 85%;
    max-width: 540px;
    margin: 40px auto;
    border-top: 1px dashed;
    border-bottom: 1px dashed;
    padding: 1em;
}
.mf.type .catch{
    border-top-color: #00b078;
    border-bottom-color: #00b078;
}
.fudo.type .catch{
    border-top-color: #0091d7;
    border-bottom-color: #0091d7;
}
.type .catch p{
    text-align: center;
    font-size: 16px;
}

.type .ttl_arw{
    text-align: center;
    font-size: 18px;
}
.type .ttl_arw::after{
    content: '';
    padding: 10px;
    margin-top: 10px;
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
}
.mf.type .ttl_arw{ color: #00b078;}
.mf.type .ttl_arw::after{ background-image: url(/school/image/casebox/arw_clr_mf.svg);}
.fudo.type .ttl_arw{ color: #0091d7;}
.fudo.type .ttl_arw::after{ background-image: url(/school/image/casebox/arw_clr_fudo.svg);}

.seminor .box h2{ font-size: 43px;}
.seminor .box h2:not(.line)::after{ content: none;}
.seminor .box h2 .circle{
    font-size: 15px;
    display: inline-flex;
    width: 58px;
    height: 58px;
    border: 1px solid;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    vertical-align: 12px;
    margin-left: 30px;
}
.seminor .box h2 + p{
    width: 90%;
    margin: 0 auto 40px;
}
.seminor .top{
    margin-top: 30px;
    padding: 0 15px;
}
.seminor .top .catch{
    font-size: 16px;
    margin-bottom: 1em;
}
.mf.seminor .top .catch{ color: #00b078;}
.fudo.seminor .top .catch{ color: #0091d7;}

.seminor .top.flex img {
    width: 50%;
    max-width: 420px;
}
@media screen and (max-width: 599px) {
    .seminor .top.flex img {
        width: 100%;
        max-width: none;
    }
}

.list01{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 15px;
}
.list01 > li{
    width: 32%;
    position: relative;
/*    background: #f3f3f2;*/
    background: #fff;
    border: 1px solid;
    padding: 55px 25px 30px;
    margin-top: 25px;
}
.mf .list01 > li{ border-color: #00af78;}
.fudo .list01 > li{ border-color: #0091d7;}

/*.box .list01 > li{ background: #fff;}

.bg-beige .list01 > li{ background: #fff;}
.bg-beige .box .list01 > li{ background: #f3f3f2;}*/

.list01 li .title{
    text-align: center;
    font-size: 18px;
    position: absolute;
    top: -3.5em;
    left: 0;
    right: 0;
}
.list01 li .title .number{
    font-family: 'Josefin Slab', serif;
    color: #00af78;
    font-size: 73px;
    vertical-align: middle;
    padding: 0 10px;
}
.list01 li h4{
    font-size: 21px;
    color: #00af78;
    font-weight: normal;
    text-align: center;
}
.fudo .list01 li h4{ color: #0091d7;}
.list01 li h4::after{
    content: "";
    width: 100%;
    height: 148px;
    display: block;
    margin: 18px auto 28px;
}

.bg-beige .list01 > li > .txt li{
    list-style-type: disc;
    margin-left: 1.3em;
    line-height: 1.3;
    margin-bottom: .5em;
}


.seminor .box{ padding-bottom: 5px;}
.seminor .list01 li:first-child h4::after{
    background: url(/school/image/casebox/mutualfund/img_mf01.svg) center center/126px no-repeat;
    margin-top: 2.5em;
}
.seminor .list01 li:nth-child(2) h4::after{ background: url(/school/image/casebox/mutualfund/img_mf02.svg) center center/126px no-repeat;}
.seminor .list01 li:nth-child(3) h4::after{ background: url(/school/image/casebox/mutualfund/img_mf03.svg) center center/162px no-repeat;}

.seminor.fudo .list01 li:first-child h4::after{
    background: url(/school/image/casebox/mutualfund/img_fudo01.svg) center center/148px no-repeat;
    margin-top: 2.5em;
}
.seminor.fudo .list01 li:nth-child(2) h4::after{ background: url(/school/image/casebox/mutualfund/img_fudo02.svg) center center/129px no-repeat;}
.seminor.fudo .list01 li:nth-child(3) h4::after{ background: url(/school/image/casebox/mutualfund/img_fudo03.svg) center center/139px no-repeat;}

.list01 li .voice{
    background: #fff;
    position: relative;
    padding: 15px 25px;
    margin-bottom: 15px;
    height: 9em;
    display: inline-flex;
    align-items: center;
}
.bg-beige .list01 li .voice{ background: #f3f3f2;}
.list01 li .voice::before,
.list01 li .voice::after{
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-top: 2px solid #00af78;
    border-left: 2px solid #00af78;
}
.list01 li .voice::before{
    top: 0;
    left: 0;
}
.list01 li .voice::after{
    bottom: 0px;
    right: 0px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.list02{
    max-width: 380px;
    margin: 0 auto;
    font-size: 20px;
}
.list02 li{
    list-style-type: inherit;
    margin-left: 1.3em;
}


.matome{
    margin-top: 80px;
    text-align: center;
    background: #f3f3f2;
    color: #00af78;
    font-size: 18px;
/*    font-weight: bold;*/
    padding: 25px;
    position: relative;
}
.bg-beige .matome{ background: #fff;}
.matome::before{
    content: "";
    border: 14px solid transparent;
    border-top: 18px solid #00af78;
    position: absolute;
    top: -35px;
    left: 49%;
    display: block;
    background: transparent;
}
.matome .line{ border-bottom: 1px solid #00af78;}

.matome.teacher{ padding: 50px 90px;}
.matome.teacher h3{
    font-size: 21px;
    margin-bottom: 20px;
}
.matome.teacher .comment{
    width: 76%;
    position: relative;
    font-size: 14px;
    text-align: left;
    background: #f3f3f2;
    padding: 25px 15px 20px;
    border-right: 2px solid #00af78;
    border-bottom: 2px solid #00af78;
    color: #000;
    line-height: 1.5;
}
.matome.teacher::after{
    content: "";
    padding: 63px;
    background: url(/school/image/casebox/dinks/img_teacher.svg)center center/contain no-repeat;
    position: absolute;
    right: 120px;
    bottom: 40px;
}
.matome.teacher .comment::before{
    content: "";
    border: 10px solid transparent;
    border-left: 30px solid #00af78;
    position: absolute;
    right: -40px;
    transform: skewY(-335deg);
    top: calc(55% + 2px);
}
.matome.teacher .comment::after{
    content: "";
    border: 10px solid transparent;
    border-left: 30px solid #f3f3f2;
    position: absolute;
    right: -40px;
    transform: skewY(-335deg);
    top: 55%;
}

.title_fudo{
    text-align: center;
    font-size: 2.5em;
    padding: 120px 0;
    color: #0091d7;
}

.reason .box{
    background: #f3f3f2;
    padding-top: 50px;
}
.reason.bg-beige .box{ background: #fff;}
.reason .box .conts{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    line-height: 1.6;
    padding: 0 50px 50px;
}
.reason .box .conts h3{
    color: #1c236d;
    text-align: left;
    margin-bottom: 25px;
    font-size: 20px;
}
.reason .box .conts p{ font-size: 14px;}
.reason .box .conts > div{
    width: 47.5%;
    font-size: 1.2em;
}
.reason .box .conts > img{ width: 48%;}
.reason .box .conts:nth-of-type(even) > img{ order: -1;}

.ab{ text-align: center;}
dl.teacher{
    width: 20%;
    display: inline-block;
    margin-right: 25px;
    vertical-align: top;
    text-align: left;
    font-size: 13px;
}
dl.teacher:last-child{ margin-right: 0;}
dl.teacher dt{ font-size: 19px; line-height: 2.5;}
dl.teacher dd > img{ max-width: 100%;}


/* 「受講生の声」スライダー */
.comment_slick.slick-initialized .slick-slide{ padding: 30px;}
.comment_slick .slick-dots li button:before{
    font-family: inherit;
    content: "\025cf";
    font-size: 15px;
}
.comment_slick .slick-prev {
    left: 30px;
    z-index: 10;
}
.comment_slick .slick-prev::before{
    content: "";
    color: #555;
    border-left: 2px solid;
    border-bottom: 2px solid;
    width: 10px;
    height: 10px;
    padding: 8px;
    transform: rotate(45deg);
    display: block;
}
.comment_slick .slick-next { right: 30px;}
.comment_slick .slick-next::before{
    content: "";
    color: #555;
    border-left: 2px solid;
    border-bottom: 2px solid;
    width: 10px;
    height: 10px;
    padding: 8px;
    transform: rotate(225deg);
    display: block;
}
section#intro .voice .slick-dots{ bottom: 80px;}

section#policy { padding-bottom: 90px;}

section#intro p,
section#policy p {
    line-height: 1.7;
    text-align: center;
    margin-bottom: 30px;
}

section#intro .voice{
    background: #f3f3f2;
    padding: 50px 50px 100px;
}
section#intro .voice .width48{
    background: #fff;
    border: 15px solid #f3f3f2;
}

section#intro.bg-beige .voice{ background: #fff;}
section#intro.bg-beige .voice .width48{
    background: #f3f3f2;
    border: 15px solid #fff;
}

section#intro .voice .width48 p{ text-align: left;}
section#intro .voice .width48 .img{
    position: relative;
    min-height: 100px;
}
section#intro .voice .width48 .img::before{
    content: "";
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    padding-right: 100px;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0;
}
section#intro .voice .width48.fudo .img::before{ background-image: url(/school/image/icn_students_fudo.png);}
section#intro .voice .width48.mf .img::before{ background-image: url(/school/image/icn_students_mf.png);}

section#intro .voice .width48 .img.man01::before{ background-position: left top;}
section#intro .voice .width48 .img.man02::before{ background-position: -100px top;}
section#intro .voice .width48 .img.man03::before{ background-position: -200px top;}
section#intro .voice .width48 .img.man04::before{ background-position: -300px top;}
section#intro .voice .width48 .img.woman01::before{ background-position: left bottom;}
section#intro .voice .width48 .img.woman02::before{ background-position: -100px bottom;}
section#intro .voice .width48 .img.woman03::before{ background-position: -200px bottom;}
section#intro .voice .width48 .img.woman04::before{ background-position: -300px bottom;}
section#intro .voice .width48 .name{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
section#intro .voice .width48 .label{
    display: inline-block;
    border: 2px solid;
    padding: 0 10px;
    margin-bottom: .5em;
    font-weight: bold;
}
section#intro .voice .width48.fudo .name,
section#intro .voice .width48.fudo .label{ color: #0091d7;}
section#intro .voice .width48.mf .name,
section#intro .voice .width48.mf .label{ color: #00af78;}
section#intro .voice .width48 .txt{ font-size: 14px;}


/* メディア掲載 */
#media h4{
    font-size: 22px;
    letter-spacing: .05em;
    margin-bottom: 20px;
    line-height: 1.6;
    font-weight: normal;
}
#media figure{
    margin-bottom: 80px;
    background: #fff;
}
#media figure img{ max-width: 100%;}

#media ul {
    max-width: 700px;
    margin: 0 auto 25px;
}
#media ul li {
    display: block;
    float: left;
    width: 90px;
    height: 124px;
    margin-bottom: 25px;
}
#media ul li:not(:nth-child(6n+6)){ margin-right: 32px; }
#media .btn a{ margin-bottom: 0; }

#media .books{
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
    display: flex;
    justify-content: space-between;
}
#media .books p img{ width: 80%;}



.tab_area {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    margin-top: 120px;
    /* border-bottom: 2px solid #0091d7; */
}
.tab_label {
    width: 45%;
    text-align: center;
    background: #fff;
    padding: 0 10px;
    font-size: 25px;
    border: 1px solid #e1e1de;
}
label[for="tab1"] {
    color: #00af78;
    border-bottom: 1px solid #0091d7;
}
label[for="tab2"] {
    color: #0091d7;
    border-bottom: 1px solid #00af78;
}
.tab_area label.active {
    position: relative;
    border-bottom: 0;
}
.tab_area label[for="tab1"].active{
    border: 1px solid #00af78;
    border-bottom: 0;
}
.tab_area label[for="tab2"].active{
    border: 1px solid #0091d7;
    border-bottom: 0;
}
.tab_area label.active::before{
    content: "";
    position: absolute;
    border: 2em solid transparent;
}
.tab_area label[for="tab1"].active::before{ border-top: 2.8em solid #00af78;}
.tab_area label[for="tab2"].active::before{ border-top: 2.8em solid #0092d8;}
.tab_area label.active::after {
    content: "";
    position: absolute;
    border: 2em solid transparent;
    border-top: 2.8em solid #fff;
}
.tab_area label[for="tab1"].active::before {
    right: calc(-.7em - 1px);
    top: 8px;
    transform: rotate(65deg);
}
.tab_area label[for="tab1"].active::after {
    right: -.7em;
    top: 8px;
    transform: rotate(65deg);
}
.tab_area label[for="tab2"].active::before {
    left: calc(-.65em - 1px);
    top: 8px;
    transform: rotate(-65deg);
}
.tab_area label[for="tab2"].active::after {
    left: -.65em;
    top: 8px;
    transform: rotate(-65deg);
}


/*-----------------------.experienceLearning---------------------------*/
.courseList{ margin-top: -1px;}
.experienceLearning {
    display: none;
/*    border: 2px solid #00af78;*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: hidden;
    padding: 70px 40px 40px 40px;
    margin: 0 0 80px;
    background: #fff;
}
.experienceLearning.active{ display: block;}
#panel1.experienceLearning{ border-top: 1px solid #00af78;}
#panel2.experienceLearning{ border-top: 1px solid #0091d7;}

.experienceLearning .top_txt{
    font-size: 19px;
    border-bottom: 1px solid;
    color: #00af78;
}
#panel2.experienceLearning .top_txt{ color: #0091d7;}
.experienceLearning h3 {
    color: #00af78;
    text-align: center;
    font-size: 34px;
    border-bottom: 1px dashed #00af78;
    margin: 40px auto 30px;
}
.experienceLearning h4 {
    font-size: 18px;
    color: #FFF;
    background-color: #FD9827;
    text-align: center;
    margin-right: 10px;
    display: inline;
    padding: 5px;
}

.experienceLearning .detail{
    margin-bottom: 45px;
    font-size: 1.2em;
}
.experienceLearning .detail dt{
    display: inline-block;
    width: 4em;
    vertical-align: top;
}
.experienceLearning .detail dd{
    display: inline-block;
    width: calc(100% - 4.5em);
    vertical-align: top;
}

.experienceLearning p {
    font-size: 12px;
    margin-bottom: 10px;
}
.experienceLearning table {
    border: 1px solid #b6b6b6;
    width: 100%;
    left: 0;
    right: 0;
    margin: 10px 0 25px 0;
}

.experienceLearning .web_dvd table tr {
    border-bottom: 1px solid #b6b6b6;
}
/*.experienceLearning .formular table tbody th,
.experienceLearning .formular table tbody td{
display: block;
width: 100%;
border-right: 0;
border-bottom: 1px solid #b6b6b6;
text-align: center;
}
.experienceLearning .formular table tbody th{ background: #fafafa;}*/
.experienceLearning .formular table tbody th .step {
    display: inline-block;
    color: #fff;
    background: #00af78;
    border-radius: 10px;
    padding: 0 15px;
}
#panel2.experienceLearning .formular table tbody th .step{ background: #0091d7;}
/*.experienceLearning table th,
.experienceLearning table.courseInfo tbody th*/
.experienceLearning .web_dvd table th{
    background-color: #fafafa;
    border-right: 1px dotted #b6b6b6;
    text-align: center;
    padding: 10px 0;
}
.experienceLearning table td {
    padding: 10px;
    background-color: #fff;
}
.experienceLearning table th.title03 {
    font-size: 23px;
    background-color: #1eb4dc;
    color: #fff;
    border: solid 1px #1eb4dc;
}
.orangeFont {
    color: #ff6500;
}
.experienceLearning p.free {
    text-align: center;
}
.experienceLearning table p.fontore {
    color: #FD9827;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 0;
}

.experienceLearning p.web {
    padding-top: 10px;
    float: left;
}
.experienceLearning p.dvd {
    padding-top: 10px;
    float: right;
}
.experienceLearning p.homeLearning {
    margin: 50px 0 20px;
    font-weight: bold;
    text-align: center;
    font-size: 22px;
}
.experienceLearning p.homeLearning strong {
    color: #1eb4dc;
    font-size: 30px;
}

/* ==========================================================================
.taiken
========================================================================== */
.taiken .btn{
    display: flex;
    justify-content: space-between;
}
.taiken .btn > div{ width: 48.5%;}
.taiken .btn .ttl{ margin-bottom: 10px !important;}
.taiken .btn .mf .ttl{ color: #00af78;}
.taiken .btn .fudo .ttl{ color: #0091d7;}
.taiken .btn .ttl > span{
    display: inline-block;
    vertical-align: middle;
}
.taiken .btn .ttl::before{
    content: "＼";
    display: inline-block;
    font-size: 1.3em;
    vertical-align: middle;
    margin-right: 10px;
}
.taiken .btn .ttl::after{
    content: "／";
    display: inline-block;
    font-size: 1.3em;
    vertical-align: middle;
    margin-left: 10px;
}

.taiken .box{
    background: #fff;
    border: 1px solid;
    margin-top: 30px;
    padding-top: 30px;
}
.taiken .mf .box{ border-color: #00af78;}
.taiken .fudo .box{ border-color: #0091d7;}

.taiken .box h2.line{
    color: #333;
    font-size: 20px;
}
.taiken .box h2.line::after{ margin-bottom: 40px;}
.taiken .seminor .box h2 .circle{
    position: absolute;
}
.taiken .seminor.mf .box h2 .circle{ color: #00af78;}
.taiken .seminor.fudo .box h2 .circle{ color: #0091d7;}

.taiken .seminor .top p{
    text-align: left !important;
    margin-bottom: 10px !important;
}


/* ディスプレイ（大） */
@media screen and (min-width: 1651px) {
    section[class^="ttl"] .inner{ padding: 13em 0;}
    section[class^="ttl"] h2::after{ margin: 20px auto 10em;}
}

/* タブレット以下 */
@media screen and (max-width: 1024px) {
    #head2{ height: 80px !important;}

    #container{
        margin-top: 100px;
        overflow: hidden;
    }

    .br_pc::before,
    .br_sp::before{ content: none;}
    .br_tb::before{
        content: "\A" ;
        white-space: pre ;
    }

    .youtube{ max-width: 100%;}

    .lead{ font-size: 20px;}

    #mv{ letter-spacing: 0;}
    #mv .img img{ width: 100%;}
    #mv .title h1 .baloon01{ left: 3%;}
    #mv .title h1 .baloon02{ right: 1%;}

    .list01 li:first-child h3::after,
    .list01 li:nth-child(3) h3::after{ margin: 40px auto;}
    .list01 li .voice{ height: 14em;}

    .matome.teacher{ padding: 50px;}
    .matome.teacher::after{ right: 30px;}

    .box .chart dt{ width: 38%;}

    #media ul li {
        width: 13%;
        max-height: 124px; }
    #media ul li:not(:nth-child(6n+6)) {
        margin-right: 4.4%; }
    #media .btn a {
        max-width: 100%; }

    .experienceLearning{ margin-top: 0;}
}

@media screen and (min-width: 600px) {
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .ver .flex{ flex-wrap: wrap;}
    .ver .flex > *{ width: 48.5%;}
    
    .seminor .top > div{
        flex-grow: 1;
        margin-left: 25px;
    }
}

/* スマホ */
@media screen and (max-width: 599px) {
    #head2{ height: 85px !important;}
    #contents{ display: none;}
    p{ font-size: 13px;}

    .pc{ display: none !important;}
    .sp{ display: inherit !important;}

    .br_pc::before,
    .br_tb::before{ content: none;}
    .br_sp::before{
        content: "\A" ;
        white-space: pre ;
    }

    .text_l{ font-size: 1.15em;}

    section .inner{
        width: 86%;
        padding: 40px 0;
    }
    section h2 {
        font-size: 20px;
        letter-spacing: 0;
    }
    section h2::after {
        width: 80px;
        margin: 15px auto 60px;
    }
    section h3{ font-size: 1.2rem}
    section h3.border,
    section h3.bg{ font-size: 18px;}
    section h3.line{ margin-bottom: 20px;}
    .lead{
        font-size: 14px;
        width: 90%;
        margin: 0 auto;
    }
    section .inner .lead{
        width: 100%;
        font-size: 14px;
        text-align: left;
        margin-bottom: 50px;
    }
    .btn01{
        background-size: 13px;
        margin: 25px auto;
    }
    .btn01 a{
        font-size: 16px;
        padding: 10px 5px;
    }
    
    .btn02 {
        font-size: 12px;
        padding: 10px;
    }
    .btn02::before{ left: 5px;}
    .btn02.mf::before,
    .btn02.fudo::before{
        width: 20px;
        height: 20px;
        bottom: -20px;
    }

    .box h3{ font-size: 16px;}
    .box h3 .num{
        font-size: 50px;
        top: -30px;
    }

    .ver .flex > div + div{ margin-top: 60px;}
    
    .box .chart{ justify-content: center;}
    .box .chart dt {
        width: 100%;
        text-align: center;
    }

    .type .box{ padding: 25px 15px;}
    .type .box ul li{ font-size: 15px;}

    .seminor .box h2{
        font-size: 23px;
        position: relative;
        line-height: 1.3;
    }
    .seminor .box h2 .circle{
        position: absolute;
        width: 50px;
        height: 50px;
        right: 5px;
        top: -1em;
    }
    
    .seminor .top > div{ margin-top: 1em;}
    
    .seminor .list01 li:first-child h4::after,
    .seminor.fudo .list01 li:first-child h4::after{ margin-top: 0;}

    .list01{ justify-content: center;}
    .list01 > li{
        width: 95%;
        margin-top: 0;
        padding: 20px 15px;
    }
    .list01 > li + li{ margin-top: 1em;}
    .list01 > li h3{ font-size: 18px;}
    .list01 > li .voice{
        height: auto;
        padding: 12px;
        font-size: 11px;
        width: 100%;
    }
    .list01 li:first-child h3::after,
    .list01 li:nth-child(3) h3::after{ margin: 0 auto;}

    .list02 li{ font-size: 16px;}

    .matome{
        font-size: 13px;
        padding: 20px 12px;
        text-align: left;
        margin: 45px auto 0;
        width: 100%;
    }
    .matome::before{ top: -25px;}

    .matome.teacher{ padding: 25px;}
    .matome.teacher .comment{
        width: 100%;
        margin-bottom: 120px;
        border-right: 0;
        border-left: 2px solid #00af78;
    }
    .matome.teacher .comment::before{
        right: 60%;
        transform: rotate(45deg);
        top: auto;
        bottom: -18px;
    }
    .matome.teacher .comment::after{
        right: 60%;
        transform: rotate(45deg);
        top: auto;
        bottom: -16px;
    }
    .matome.teacher::after{ bottom: 20px;}

    .reseach .matome h3 { font-size: 15px;}
    .reseach .matome .text_l{ font-size: 23px;}

    #mv .title{
        margin-top: 0;
        padding-bottom: 35px;
    }
    #mv .title h1{
        font-size: 25px;
        width: 100%;
    }
    #mv .title h1 .bg{
        height: 6.5em;
        mix-blend-mode: normal;
        position: relative;
        z-index: -2;
    }
    #mv .title h1 .number{
        top: -30px;
        right: 0;
        color: #fff;
    }
    #mv .title h1 .text{ top: 2em;}
    #mv .title h1 .caution{ font-size: 12px;}
    #mv .title h1 span[class^="baloon"]{
        font-size: 14px;
        top: 12px;
        padding: 0;
        z-index: 0;
    }
    #mv .title h1 .baloon01{ left: 10%;}
    #mv .title h1 .baloon01 > span{
        position: relative;
        z-index: 0;
        padding: 5px 10px;
        background: #00af78;
    }
    #mv .title h1 .baloon01::before {
        border-left: none;
        border-bottom: 20px solid #fff;
        right: 30%;
        transform: skewY(40deg);
        top: auto;
        bottom: -5px;
        z-index: -2;
    }
    #mv .title h1 .baloon01::after {
        border-left: none;
        border-bottom: 18px solid #00af78;
        right: calc(30% + 1px);
        transform: skewY(40deg);
        top: auto;
        bottom: -4px;
        z-index: -1;
    }
    #mv .title h1 .baloon02{ right: 10%;}
    #mv .title h1 .baloon02 > span{
        position: relative;
        z-index: 0;
        padding: 5px 10px;
        background: #0091d7;
    }
    #mv .title h1 .baloon02::before {
        border-right: none;
        border-bottom: 20px solid #fff;
        left: 30%;
        transform: skewY(-40deg);
        top: auto;
        bottom: -5px;
        z-index: -2;
    }
    #mv .title h1 .baloon02::after {
        border-right: none;
        border-bottom: 18px solid #0091d7;
        left: calc(30% + 1px);
        transform: skewY(-40deg);
        top: auto;
        bottom: -4px;
        z-index: -1;
    }


    .gaiyo{
        padding: 20px 10px;
        font-size: 16px;
    }
    .gaiyo .sub{ font-size: 18px;}
    .gaiyo h2{ font-size: 25px;}

    .seika h3 {
        margin-top: 30px;
        font-size: 13px;
    }
    .reason .box{ padding-top: 30px;}
    .reason .box .conts{ padding: 0 25px 25px;}
    .reason .box .conts > div{ width: 100%;}
    .reason .box .conts h3{
        margin-bottom: .5em;
        font-size: 18px;
    }
    .reason .box .conts > img {
        width: 100%;
        margin-top: .5em;
    }
    .reason .box .conts:nth-of-type(even) > img{ order: 0;}

    .title_fudo {
        font-size: 1.6em;
        padding: 40px 10px;
    }

    section#intro .voice{ padding: 15px 15px 50px;}
    .comment_slick .slick-prev{ left: 15px;}
    .comment_slick .slick-next{ right: 15px;}
    .comment_slick .slick-prev::before,
    .comment_slick .slick-next::before{ padding: 3px;}
    .slick-slide{ padding: 15px;}
    section#intro .voice .slick-dots{ bottom: 30px;}

    section#intro .voice .width48 .img::before{
        width: 60px;
        height: 60px;
        padding-right: 60px;
    }
    section#intro .voice .width48 .img::before{ background-size: 245px;}
    section#intro .voice .width48 .img.man02::before{ background-position: -61px top;}
    section#intro .voice .width48 .img.man03::before{ background-position: -122px top;}
    section#intro .voice .width48 .img.man04::before{ background-position: -183px top;}
    section#intro .voice .width48 .img.woman02::before{ background-position: -61px bottom;}
    section#intro .voice .width48 .img.woman03::before{ background-position: -122px bottom;}
    section#intro .voice .width48 .img.woman04::before{ background-position: -183px bottom;}


    dl.teacher{
        width: 22%;
        margin-right: 4px;
        font-size: 10px;
    }
    dl.teacher dt{ font-size: 110%;}

    #media ul li {
        width: 15.6%;
        max-height: 68px; }
    #media ul li:not(:nth-child(6n+6)) {
        margin-right: inherit; }
    #media ul li:not(:nth-child(5n+5)) {
        margin-right: 5.5%; }

    #media .books{
        width: 100%;
        margin: 0px auto;
        display: flex;
        justify-content: space-between;}

    #media .books p img{
        width: 80%;}

    .tab_area{ margin-top: 50px;}
    .tab_label{ font-size: 15px;}
    .tab_label > span{
        position: relative;
        z-index: 2;
    }

    .tab_area label[for="tab1"].active::before {
        right: calc(.2em - 1px);
        top: -2px;
        transform: rotate(75deg);
        border-top-width: 3.5em;
    }
    .tab_area label[for="tab1"].active::after {
        right: .2em;
        top: -2px;
        transform: rotate(75deg);
        border-top-width: 3.5em;
    }
    .tab_area label[for="tab2"].active::before {
        left: 1px;
        top: -2px;
        transform: rotate(-75deg);
        border-top-width: 3.5em;
    }
    .tab_area label[for="tab2"].active::after {
        left: 2px;
        top: -2px;
        transform: rotate(-75deg);
        border-top-width: 3.5em;
    }

    .experienceLearning{
        padding: 30px 10px;
/*        margin: 30px 0;*/
    }
    .experienceLearning h3{
        font-size: 1.6em;
        margin: 15px auto 25px;
    }
    .experienceLearning table{ table-layout: fixed;}
    .experienceLearning table th,
    .experienceLearning table.courseInfo tbody th,
    .experienceLearning table td{
        width: 100%;
        display: block;
    }
    .experienceLearning table th,
    .experienceLearning table.courseInfo tbody th{
        border-bottom: 1px solid #b6b6b6;
        border-right: none;
        padding: 10px;
        text-align: center;
        background-image: none;
    }
    .experienceLearning .web_dvd table th {
        border-bottom-style: solid;
        border-right: none;
    }
    .experienceLearning table tr:last-child td {
        border-bottom: none;
    }
    
    .taiken .btn .ttl{ font-size: 10px;}
    .taiken .btn .ttl::before{ margin-right: 3px;}
    .taiken .btn .ttl::after{ margin-left: 3px;}
    .taiken .btn02.mf::before,
    .taiken .btn02.fudo::before{ bottom: -40px;}

}

@media screen and (max-width: 320px){
    section h2{ font-size: 15px;}
    #mv .title h1 .text .text_s,
    .seika h2 .text_s{ font-size: .55em;}
}

.seminar_detail_table {
    width: 100%;
}
.seminar_detail_table th {
    white-space: nowrap;
    font-weight: normal;
}
.seminar_detail_table th,
.seminar_detail_table td {
    padding: 10px;
    line-height: 1.5;
}
.seminar_detail_table.fudo {
    border-top: 1px solid #44a1c5;
    border-left: 1px solid #44a1c5;
}
.seminar_detail_table.fudo th {
    background: rgb(68 161 197 / .1);
}
.seminar_detail_table.fudo th,
.seminar_detail_table.fudo td {
    border-right: 1px solid #44a1c5;
    border-bottom: 1px solid #44a1c5;
}
.seminar_detail_table.mf {
    border-top: 1px solid #8a9f55;
    border-left: 1px solid #8a9f55;
}
.seminar_detail_table.mf th {
    background: rgb(138 159 85 / .1);
}
.seminar_detail_table.mf th,
.seminar_detail_table.mf td {
    border-right: 1px solid #8a9f55;
    border-bottom: 1px solid #8a9f55;
}
@media screen and (max-width: 599px) {
    .seminar_detail_table {
        font-size: 14px;
    }
    .seminar_detail_table th {
        display: block;
        text-align: center;
    }
    .seminar_detail_table td {
        display: block;
    }
}