@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: #0091d7;}

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

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

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

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

section h3.line{
  border-top: 1px solid #0091d7;
  margin-bottom: 70px;
  margin-top: 1em;
}
section h3.line > span{
  color: #0091d7;
  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: #0091d7;
  text-align: center;
  font-size: 22px;
  line-height: 1.5;
  border-top: 2px solid #0091d7;
  border-bottom: 2px solid #0091d7;
  margin: 0 0 40px;
  position: relative;
  padding: 10px 0;
}

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

.lead{ font-size: 20px;}
.lead .color {
  font-size: 1.35em;
  color: #0091d7;
}

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

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

img.per{ width: 86px;}
img.per02{ width: 133px;}
img.plus{ width: 112px;}
img.per,
img.per02,
img.plus{
  vertical-align: baseline;
  padding: 0 5px;
}

section .inner{
  width: 96%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 90px 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: 22px;
  position: relative;
  letter-spacing: .1em;
  box-shadow: 0 1.5px 0 #782332;
  max-width: 540px;
  margin: 70px auto;
}
.btn01 a{
  color: #fff;
  padding: 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;
}
.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;
}

.video_wrap {
  max-width: 950px;
  margin: 0 auto;
}
.video {
  margin: 0 auto;
  width: 100%;
  position:relative;
  padding-top:56.25%;
}
.video 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: #0091d7;
  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: 30px;
/*    top: 0;
  bottom: 0;*/
  left: 0;
  right: 0;
  margin: auto;
  color: #fff;
}
#mv .title h1 .text .text_s,
.seika h2 .text_s{
  font-size: .5em;
  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;
}

.list01{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list01 li{
  width: 32%;
  position: relative;
  background: #f3f3f2;
  padding: 55px 25px 30px;
  margin-top: 25px;
}
.bg-beige .list01 li{ background: #fff;}
.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: #0091d7;
  font-size: 73px;
  vertical-align: middle;
  padding: 0 10px;
}
.list01 li h3{
  font-size: 21px;
  color: #0091d7;
  font-weight: normal;
}
.list01 li h3::after{
  content: "";
  width: 100%;
  height: 148px;
  display: block;
  margin: 18px auto 28px;
}

.zittai .list01 li:first-child h3::after{ background: url(/school/image/casebox/dinks/img_zittai01.svg) center center/126px no-repeat;}
.zittai .list01 li:nth-child(2) h3::after{ background: url(/school/image/casebox/dinks/img_zittai02.svg) center center/170px no-repeat;}
.zittai .list01 li:nth-child(3) h3::after{ background: url(/school/image/casebox/dinks/img_zittai03.svg) center center/126px no-repeat;}

.tokucho .list01 li:first-child h3::after{ background: url(/school/image/casebox/dinks/img_tokucho01.svg) center center/126px no-repeat;}
.tokucho .list01 li:nth-child(2) h3::after{ background: url(/school/image/casebox/dinks/img_tokucho02.svg) center center/126px no-repeat;}
.tokucho .list01 li:nth-child(3) h3::after{ background: url(/school/image/casebox/dinks/img_tokucho03.svg) center center/140px 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 #0091d7;
  border-left: 2px solid #0091d7;
}
.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;
}

.data{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.data li{
  width: 32%;
  padding: 50px 10px 35px;
  text-align: center;
  background: #f3f3f2;
  font-size: 20px;
  margin-bottom: 15px;
  position: relative;
  margin-top: 60px;
  color: #0091d7;
}
.bg-beige .data li{ background: #fff;}
.data li .line{
  border-bottom: 2px solid #0091d7;
}
.data li::after{
  content: "";
  width: 100%;
  height: 155px;
  display: block;
}
.data li:first-child::after{
  background: url(/school/image/casebox/dinks/data01.svg) center center/126px no-repeat;
  margin-top: 2.5em;
}
.data li:nth-child(2)::after{
  background: url(/school/image/casebox/dinks/data02.svg) center center/126px no-repeat;
  margin-top: 1em;
}
.data li:nth-child(3)::after{
  background: url(/school/image/casebox/dinks/data03.svg) 70% center/160px no-repeat;
  margin-top: 1em;
}
.data li h3{
  font-size: 34px;
  position: absolute;
  left: 0;
  right: 0;
  top: -65px;
}
.data li h3 .num{
  font-size: 16px;
  display: block;
  padding-bottom: .25em;
}
.data li h3 .ttl{
  background: #fff;
  padding: 8px 10px;
  border: 1px solid #0091d7;
}

dl.ex{
  background: #f3f3f2;
  padding-top: 45px;
}
dl.ex dt{
  color: #0091d7;
  text-align: center;
  font-size: 22px;
  line-height: 1.5;
  border-top: 2px solid #0091d7;
  border-bottom: 2px solid #0091d7;
  margin: 0 0 40px;
  position: relative;
  padding: 10px 0;
}
dl.ex dt .type{
  color: #000;
  font-size: 20px;
  line-height: 1.3;
  height: 5em;
  display: flex;
  align-items: center;
  padding: 10px;
  background: #fff;
  border: 2px solid #0091d7;
  border-radius: 100%;
  position: absolute;
  right: 10%;
  top: -25px;
}
dl.ex dd{
  font-size: 20px;
  margin: 0 50px;
}
dl.ex dd .case{
  background: #fff url(/school/image/casebox/kyouikuhi/case01.svg) 95% 30px/30% no-repeat;
  margin-top: 55px;
  padding: 20px 0 40px 50px;
}
dl.ex dd .case h3{
  font-family: 'Josefin Slab', serif;
  font-size: 40px;
  text-align: left;
  color: #0091d7;
}
dl.ex dd .case p{
  font-size: 14px;
  width: 60%;
  line-height: 1.6;
}

.bq{
  background: #f3f3f2;
  position: relative;
  padding: 35px;
  margin-bottom: 25px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.bq::before{
  content: "";
  width: 100%;
  height: 21px;
  background: url(/school/image/casebox/bq_border_top.png);
  position: absolute;
  top: 0;
  left: 0;
}
.bq::after{
  content: "";
  width: 100%;
  height: 21px;
  background: url(/school/image/casebox/bq_border_bottom.png);
  position: absolute;
  bottom: 0;
  left: 0;
}
.bq > cite{
  width: 23%;
  border-right: 1px solid;
  font-size: 22px;
  align-items: center;
  display: inline-flex;
}
.bq > blockquote{
  width: 75%;
  border-right: 1px solid;
  padding-right: 30px;
}

.title_school{
  font-size: 20px;
  text-align: center;
  color: #0091d7;
  margin-bottom: 20px;
}
.title_school.arrow{
  margin-top: 70px;
  position: relative;
  background: none;
}
.title_school.arrow::before{
  content: "";
  border: 14px solid transparent;
  border-top: 18px solid #0091d7;
  position: absolute;
  top: -35px;
  left: 49%;
  display: block;
  background: #fff;
}
.bg-beige .title_school.arrow::before{ background: #f3f3f2;}
ul.learning{
  background: #fff;
  padding: 40px;
}
ul.learning li {
  text-align: left;
  padding-left: 25px;
  font-size: 20px;
  background: url(/school/image/casebox/kyouikuhi/checkbox.svg) left 4px/21px no-repeat;
  margin-bottom: 15px;
  line-height: 1.6;
}

.detail_school{
  background: #fff url(/school/image/casebox/img.jpg) left top/contain no-repeat;
  padding-top: 260px;
}
.detail_school h3{
  font-size: 30px;
  color: #0091d7;
  margin-bottom: 30px;
}
.detail_school .list{
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.detail_school .list li{
  width: 48.5%;
  background: #f3f3f2;
  margin-bottom: 60px;
  padding: 35px 30px;
  position: relative;
}
.detail_school .list li .title_list{
  font-size: 19px;
  text-align: center;
  position: absolute;
  top: -1em;
  left: 0;
  right: 0;
  margin: auto;
}
.detail_school .list li h4{
  margin-bottom: 20px;
  font-weight: normal;
}
.detail_school .list li h4 a{
  display: flex;
  background: #0091d7;
  color: #fff;
  padding: 15px 10px 15px 25px;
  font-size: 19px;
  position: relative;
  height: 9em;
  align-items: center;
}
.detail_school .list li h4 a:hover{ opacity: .7;}
.detail_school .list li h4 a.txt_s{
  font-size: 17px;
  line-height: 2;
}
.detail_school .list li h4 a::after{
  content: "";
  width: 36px;
  height: 36px;
  background: url(/school/image/casebox/kyouikuhi/arrow.svg) left top/contain no-repeat;
  position: absolute;
  right: -18px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.matome{
  margin-top: 80px;
  text-align: center;
  background: #f3f3f2;
  color: #0091d7;
  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 #0091d7;
  position: absolute;
  top: -35px;
  left: 49%;
  display: block;
  background: transparent;
}
.matome .line{ border-bottom: 1px solid #0091d7;}

.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 #0091d7;
  border-bottom: 2px solid #0091d7;
  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 #0091d7;
  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%;
}

.reseach .matome h3{ font-size: 21px;}
.reseach .matome .text_l{ font-size: 34px;}

section[class^="ttl"]{
  background-position: left top;
  background-size: 100%;
  background-repeat: no-repeat;
}
.ttl01{ background-image: url(/school/image/casebox/kyouikuhi/ttl01.jpg);}
.ttl01 h2{ color: #fff;}
.ttl01 h2::after{
  border-bottom: 3px solid #fff;
  margin: 20px auto;
}
.ttl02{ background-image: url(/school/image/casebox/kyouikuhi/ttl02.jpg);}
.ttl03{ background-image: url(/school/image/casebox/ttl03.jpg);}
.ttl04{ background-image: url(/school/image/casebox/ttl04.jpg);}
section[class^="ttl"] .inner{ padding: 120px 0;}
section[class^="ttl"] h2::after{ margin: 20px auto 180px;}

.gaiyo{
  background: #f3f3f2;
  text-align: center;
  padding: 40px 30px 30px;
  font-size: 18px;
}
.gaiyo .sub{
  font-size: 21px;
  color: #0091d7;
}
.gaiyo h2{ font-size: 48px;}
.gaiyo h2::after{ content: none;}

ul.canLearn_main li{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  line-height: 1.6;
  margin-bottom: 80px;
}
ul.canLearn_main li h3{
  color: #0091d7;
  text-align: left;
  font-weight: bold;
  margin-bottom: 35px;
}
ul.canLearn_main li > div{
  width: 50%;
  font-size: 1.2em;
}
ul.canLearn_main li > img{ width: 46%;}
ul.canLearn_main li:nth-child(even) > img{ order: -1;}

.seika h3{ margin-top: 75px;}
figure.graph01,
figure.graph02{
  width: 90%;
  margin: 40px auto 20px;
  font-size: 20px;
  font-weight: bold;
}
figure.graph01 .graph{
  display: inline-block;
  vertical-align: middle;
  width: 63.5%;
}
/*figure.graph01 .graph + .graph{
margin-left: 25px;
}*/
figure.graph01 figcaption{
  display: inline-block;
  vertical-align: middle;
  width: 35%;
  padding-left: 15px;
  padding-bottom: 25px;
  line-height: 2.5;
}

img.per{ width: 86px;}
img.per02{ width: 133px;}
img.plus{ width: 112px;}
img.number{ width: 1.55em;}
img.no01{ width: 1.1em;}
img.per,
img.per02,
img.plus,
img.number,
img.no01{
  vertical-align: baseline;
  padding: 0 5px;
}

.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: #0091d7;
  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: #008fd9;
  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: #008fd9;
  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-image: url(/school/image/icn_students_fudo.png);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0;
}
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;
  color: #008fd9;
  font-weight: bold;
  margin-bottom: 10px;
}
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;}
#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%;}


/* ディスプレイ（大） */
@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 ;
  }

  .video{ max-width: 100%;}

  .lead{ font-size: 20px;}

  #mv{ letter-spacing: 0;}
  #mv .img img{ width: 100%;}

/*    .btn01{ max-width: 100%;}
  .btn01 a{ width: 80%;}*/

  section[class^="ttl"] .inner{ padding: 2.5em 0;}
  section[class^="ttl"] h2::after{ margin: 20px auto 50px;}

  section.ttl01 h2::after{ margin: 20px auto 100px;}

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

  .bq{ padding: 35px 35px 35px 15px;}
  .bq > cite{
    width: 30%;
    justify-content: center;
  }
  .bq > blockquote{ width: 65%;}

  section.ttl04 .inner{ padding: 2em 0;}
  section.ttl02 h2::after,
  section.ttl04 h2::after{ margin: 20px auto 100px;}

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

  .detail_school .list li{ padding: 35px 15px 20px;}
  .detail_school .list li h4 a{ font-size: 16px;}
  .detail_school .list li h4 a.txt_s{
    font-size: 13px;
    line-height: 2.3;
  }
  .detail_school .list li .title_list{ font-size: 16px;}

  figure.graph01 .graph{ vertical-align: top;}

  #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%; }

}

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

  .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: 16px;
    letter-spacing: 0;
  }
  section h2::after {
    width: 80px;
    margin: 15px auto 60px;
  }
  section h3{ font-size: 1.2rem}
  section h3.border{ 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;}
  .btn01 a{
    font-size: 16px;
    padding: 10px 5px;
  }
  .btn02::before{ left: 5px;}

  section[class^="ttl"] .inner{ padding: 2em 0;}
  section[class^="ttl"] h2::after{ margin: 10px auto 40px;}

  section.ttl03 .inner{ padding-top: .5em;}
/*    section.ttl04 .inner{ padding-top: 1em;}*/

  .list01{ justify-content: center;}
  .list01 li{
    width: 100%;
    margin-top: 60px;
    padding: 50px 12px 15px;
  }
  .list01 li:first-child{ margin-top: 25px;}
  .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 #0091d7;
  }
  .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;}

  .data li{
    width: 100%;
    font-size: 14px;
    padding: 40px 15px 20px;
  }
  .data li p{ font-size: 14px;}
  .data li h3{
    font-size: 27px;
    top: -50px;
  }
  .data li h3 .num{ font-size: 13px;}

  dl.ex dt{
    font-size: 16px;
    text-align: left;
    padding-left: 3%;
    padding-right: 25%;
  }
  dl.ex dt .type{
    font-size: 13px;
    padding: 5px;
    text-align: center;
    right: 1%;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  dl.ex dd {
    font-size: 14px;
    margin: 0 12px;
  }
  dl.ex dd .case {
    background: #fff;
    margin-top: 35px;
    padding: 10px;
  }
  dl.ex dd .case h3 {
    font-size: 30px;
    text-align: center;
  }
  dl.ex dd .case p{
    font-size: 12px;
    width: 100%;
  }
  dl.ex dd .case p::after{
    content: "";
    width: 60%;
    height: 160px;
    background: url(/school/image/casebox/kyouikuhi/case01.svg) left center/contain no-repeat;
    display: block;
    margin: 0 auto;
  }

  .bq{
    padding: 35px 15px;
    width: 100%;
    margin: 0 auto 25px;
  }
  .bq > cite,
  .bq > blockquote{ width: 100%;}
  .bq > cite{
    border-right: 0;
    border-bottom: 1px solid;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 14px;
  }
  .bq > blockquote{
    border-right: 0;
    padding-right: 0;
    font-size: 11px;
  }

  .title_school{ font-size: 15px;}

  ul.learning{ padding: 15px;}
  ul.learning li{
    font-size: 11px;
    background: url(/school/image/casebox/kyouikuhi/checkbox.svg) left top/14px no-repeat;
    padding-left: 16px;
    margin-bottom: 0;
  }

  .detail_school{
    padding-top: 105px;
    width: 116%;
    margin-left: -8%;
  }
  .detail_school h3{
    font-size: 18px;
    margin-bottom: 15px;
  }
  section .inner .detail_school .lead{
    width: 86%;
    text-align: center;
    margin: 0 auto 40px;
  }
  .detail_school .list{ width: 86%;}
  .detail_school .list li{
    width: 100%;
    padding: 20px 10px;
    margin-bottom: 50px;
  }
  .detail_school .list li .title_list{ font-size: 14px;}
  .detail_school .list li h4{ margin-bottom: 10px;}
  .detail_school .list li h4 a{
    font-size: 15px;
    padding: 12px 7px 12px 20px;
  }
  .detail_school .list li h4 a::after{
    width: 24px;
    height: 24px;
    right: -8px;
  }

  #mv .title{
    margin-top: 0;
    padding-bottom: 35px;
  }
  #mv .title h1{
    font-size: 21px;
    width: 100%;
  }
  #mv .title h1 .bg{ height: 6em;}
  #mv .title h1 .number{
    top: -30px;
    right: 0;
    color: #fff;
  }
  #mv .title h1 .text{ top: .5em;}
  #mv .title h1 .caution{ font-size: 12px;}

  ul.canLearn_main li > div{
    width: 100%;
    margin: 1em 0;
  }
  ul.canLearn_main li{
    background: #fff;
    margin-bottom: 2em;
  }
  ul.canLearn_main li h3{
    margin-bottom: .5em;
    text-align: center;
  }
  ul.canLearn_main li h3::after{
    content: "";
    display: block;
    width: 100%;
    padding-top: 55.7%;
  }
  ul.canLearn_main li:first-child h3::after{ background: url(/school/image/fudolp/img_learn01.jpg?190206)left top/contain no-repeat;}
  ul.canLearn_main li:nth-child(2) h3::after{ background: url(/school/image/fudolp/img_learn02.jpg?190206)left top/contain no-repeat;}
  ul.canLearn_main li:nth-child(3) h3::after{ background: url(/school/image/fudolp/img_learn03.jpg?190206)left top/contain no-repeat;}
  ul.canLearn_main li p{
    line-height: 1.4;
    width: 90%;
    margin: 0 auto;
  }

  ul.canLearn_main li > img{ display: none; width: 100%;}
  ul.canLearn_main li:nth-child(even) > img{ order: 0;}

  .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;
  }
  figure.graph01,
  figure.graph02{ margin: 10px auto 20px;}
  figure.graph01 .graph{
    display: block;
    width: 75%;
    margin: 0 auto 15px;
  }
  figure.graph01 .graph.size_l{ width: 100%;}
  figure.graph01 .graph + .graph{
    /*        display: inline-block;
    width: 50%;
    margin-left: 0;
    padding-top: 0;*/
  }
  figure.graph01 figcaption{
    font-size: .55em;
    width: 100%;
    display: block;
    padding-left: 0;
    padding-bottom: 0;
    margin: 0 auto;
    text-align: center;
  }

  img.per{ width: 65px;}
  img.plus{ width: 80px;}
  img.per02{ width: 100px;}
  img.number{ width: 2.5em;}
  img.no01{  width: 1.8em;}

  .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;}

  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;}

  dl.teacher{
    width: 22%;
    margin-right: 5px;
    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%;}

}

@media screen and (max-width: 320px){
  section h2{ font-size: 15px;}
  section[class^="ttl"] .inner{ padding-top: 1.5em;}
  section.ttl03 .inner{ padding-top: 0.5em;}
/*    section.ttl04 .inner{ padding-top: 0.5em;}*/
  .detail_school{ padding-top: 90px;}
  .detail_school .list li h4 a{ padding: 12px 7px 12px 12px;}
}

.course h2 {
  position: relative;
}
.course h2 .free {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  color: #44a1c5;
  font-size: 42px;
  border: 2px solid #44a1c5;
  width: 147px;
  height: 147px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  margin: auto;
}
.course .inner {
  width: 96%;
}
.course .inner .lead {
  font-size: 22px;
}
@media screen and (max-width: 599px) {
  .course h2 .free {
    font-size: 20px;
    width: 68px;
    height: 68px;
  }
  .course .inner .lead {
    font-size: 15px;
  }
}

.course-tab {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  margin-top: 60px;
}
.course-tab > li {
  position: relative;
  z-index: 1;
  cursor: pointer;
  font-size: 18px;
  line-height: 1.3;
  width: 48.5%;
  padding: 1em;
  box-sizing: border-box;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  text-align: center;
}
.course-tab > li a {
  color: #fff;
  text-decoration: none;
  pointer-events: none;
}
.course-tab .tab-one {
  background: #44a1c5;
  border: 1px solid #44a1c5;
}
.course-tab .tab-two {
  background: #44a1c5;
  border: 1px solid #44a1c5;
}
.course-tab .tab-three {
  background: #44a1c5;
  border: 1px solid #44a1c5;
}
.course-tab > li.is-active {
  border-bottom-width: 0;
  background: #fff;
  font-weight: bold;
  padding: 1.3em 1em;
  cursor: default;
}
.course-tab .tab-one.is-active a {
  color: #44a1c5;
}
.course-tab .tab-two.is-active a {
  color: #44a1c5;
}
.course-tab .tab-three.is-active a {
  color: #44a1c5;
}
@media screen and (max-width: 599px) {
  .course-tab {
    align-items: initial;
  }
  .course-tab > li {
    font-size: 16px;
    padding: 1em 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .course-tab > li.is-active {
    font-weight: normal;
    padding: .5em 0;
  }
}

.course-tab.bottom {
  margin-top: -1px;
  align-items: flex-start;
}
.course-tab.bottom > li {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.course-tab.bottom > li.is-active {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-top: none;
}
@media screen and (max-width: 599px) {
  .course-tab.bottom > li {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 1em 0;
  }
}

.course-txt-head {
  font-size: 15px;
}
.course-txt-head .ttl {
  font-size: 18px;
  font-weight: bold;
}

.course-bottom-txt {
  margin-top: 10px;
}
@media screen and (max-width: 599px) {
  .course-bottom-txt {
    margin-top: 40px;
  }
}

.tabs {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 80px;
}
@media screen and (max-width: 599px) {
  .tabs {
    margin-top: 40px;
  }
}
.tabs .item {
  font-size: 20px;
  color: #fff;
  line-height: 1.5;
  cursor: pointer;
  width: 49%;
  text-align: center;
  border: 2px solid #44a1c5;
  background-color: #44a1c5;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px 10px 0 0;
  padding: 10px 5px;
}
.tabs .item.is-active {
  cursor: default;
  border-bottom-color: #fff;
  background-color: #fff;
  color: #44a1c5;
  padding: 15px 5px;
}
@media screen and (max-width: 599px) {
  .tabs .item{ font-size: 12px;}
}

.experienceLearning {
  border: 2px solid #44a1c5;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: hidden;
  padding: 40px;
  margin: -2px 0 20px;
  background: #fff;
  display: none;
}
.experienceLearning.is-active {
  display: block;
}
.experienceLearning h3 {
  color: #44a1c5;
  text-align: center;
  font-size: 34px;
  border-bottom: 1px dashed #44a1c5;
  margin: 40px auto 30px;
  line-height: 1.5;
}
.experienceLearning .ttl-experienced {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.experienceLearning .ttl-experienced .btn-exlp {
  display: block;
  color: #ffffff;
  background: #44a1c5 url(/images/common/arrow02.svg) 96% center/18px no-repeat;;
  border-radius: 5px;
  font-size: 20px;
  margin-bottom: 10px;
  padding: 5px 50px;
  white-space: nowrap;
}
.experienceLearning .ttl-experienced .btn-exlp:hover {
  text-decoration: none;
  opacity: .7;
}
@media screen and (max-width: 999px) {
  .experienceLearning .ttl-experienced {
    flex-direction: column;
    align-items: center;
  }
  .experienceLearning .ttl-experienced .main {
    margin-bottom: 10px;
  }
  .experienceLearning .ttl-experienced .sub {
    margin-left: auto;
  }
}
@media screen and (max-width: 599px) {
  .experienceLearning .ttl-experienced .btn-exlp {
    font-size: 16px;
    background: #44a1c5 url(/images/common/arrow02.svg) 97% center/12px no-repeat;
  }
}
/*.experienceLearning h4 {
  font-size: 18px;
  color: #FFF;
  background-color: #FD9827;
  text-align: center;
  margin-right: 10px;
  display: inline;
  padding: 5px;
}*/
.experienceLearning h4.bg_none {
  background: none;
  color: #2b4098;
  font-size: 24px;
}
.experienceLearning h4.bg_none.line_dash {
  display: block;
  border-top: 1px dashed;
  border-bottom: 1px dashed;
  margin-top: 2em;
  margin-bottom: 1em;
}
.experienceLearning p {
  font-size: 12px;
  margin-bottom: 10px;
}
.experienceLearning .lead{ font-size: 1.3em;}

.experienceLearning table {
  border: 1px solid #b6b6b6;
  width: 100%;
  left: 0;
  right: 0;
  margin: 10px 0 25px 0;
}

.experienceLearning .formular table tbody th .step {
  display: inline-block;
  color: #fff;
  background: #44a1c5;
  border-radius: 10px;
  padding: 0 15px;
}
.experienceLearning .web_dvd table th{
  text-align: center;
  padding: 10px 0;
}
.experienceLearning table td {
  padding: 10px 15px;
  text-align: left;
}
.experienceLearning table td select {
  width: 100%;
  height: 30px;
  padding-left: 10px;
}
.experienceLearning table th.title03 {
  font-size: 23px;
  background-color: #1eb4dc;
  color: #fff;
  border: solid 1px #1eb4dc;
}
.experienceLearning table th{
  background: #fafafa;
  width: 22%;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  vertical-align: middle;
  border-right: 1px dotted #b6b6b6;
}
.experienceLearning table tr th,
.experienceLearning table tr:not(:last-child) td {
  border-bottom: 1px solid #b6b6b6;
}

.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 table p {
  line-height: 1.2;
  font-size: 14px;
}
.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;
}

.experienceLearning dl.table{
  border-top: 1px solid #2b4098;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 35px;
}
.experienceLearning dl.table dt{
  width: 15%;
  font-weight: bold;
  font-size: 1.2em;
  padding: 15px 20px;
  border-bottom: 1px solid #2b4098;
}
.experienceLearning dl.table dd{
  width: 85%;
  padding: 15px;
  border-bottom: 1px solid #2b4098;
}

@media screen and (max-width: 599px) {
   /* スマホ */
  .experienceLearning{
    padding: 30px 10px;
  }
  .experienceLearning h3{
    font-size: 1.6em;
    margin: 15px auto 25px;
  }
  .experienceLearning h4.bg_none{ font-size: 20px;}
  .experienceLearning table{ table-layout: fixed;}
  .experienceLearning table th,
  .experienceLearning table.courseInfo tbody th{
    width: 100%;
    display: block;
    border-right: none;
    padding: 10px;
    background: #fafafa;
  }
  .experienceLearning table td{
    width: 100%;
    display: block;
    border-right: none;
    padding: 10px;
  }
  .experienceLearning dl.table dt{ width: 35%;}
  .experienceLearning dl.table dd{ width: 65%;}
}

.present2101 h2 {
  color: inherit;
}