@charset "UTF-8";


.program_detail #mirai_intro .intro_program {
  padding-top: 20px;
}
.program01_detail #mirai_intro .intro_program {
  background-color: #1f65da;
}
.program02_detail #mirai_intro .intro_program {
  background-color: #eaa0c0;
}
.program03_detail #mirai_intro .intro_program {
  background-color: #69add7;
}
.program04_detail #mirai_intro .intro_program {
  background-color: #80ad26;
}
.program05_detail #mirai_intro .intro_program {
  background-color: #f4c441;
}
.program_detail #mirai_intro .intro_program h2 {
  color: #fff;
}
.program_detail #mirai_intro .intro_program h2 span {
  display: inline-block;
  width: 60%;
  text-align: left;
  font-size: 46px;
}
.program_detail #mirai_intro .intro_program h2 img {
  vertical-align: middle;
  max-width: 25%;
}

.program_detail #mirai_program .program_content {
  padding-top: 60px;
  padding-bottom: 40px;
/*  background: url(/group/blue-academy/mirai/image/program/program_content_bg.png) repeat-x bottom center;*/
}


.program_detail #mirai_program .program_content .content_detail {
  padding-top: 20px;
  margin: 0 5% 15px 5%;
}
.program_detail #mirai_program .program_content .content_detail_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  color: #00a7ea;
  vertical-align: middle;
  padding: 0 0 15px;
}
.program_detail #mirai_program .program_content .content_detail_photo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  color: #00a7ea;
  vertical-align: middle;
  padding: 45px 0 0;
}
.program_detail #mirai_program .program_content .content_detail_slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  color: #00a7ea;
  vertical-align: middle;
}

.program_detail #mirai_program .program_content .content_detail_slide {
  margin: -120px 0 0;
  padding: 150px 40px 40px;
}
.program01_detail #mirai_program .program_content .content_detail_slide {
  background: #1f65da;
}
.program02_detail #mirai_program .program_content .content_detail_slide {
  background: #eaa0c0;
}
.program03_detail #mirai_program .program_content .content_detail_slide {
  background: #69add7;
}
.program04_detail #mirai_program .program_content .content_detail_slide {
  background: #80ad26;
}
.program05_detail #mirai_program .program_content .content_detail_slide {
  background: #f4c441;
}



.program_detail #mirai_program .program_content .content_detail_slide {
  color: #fff;
  font-size: 24px;
  line-height: 1.2;
}
.program_detail #mirai_program .program_content p {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  line-height: 2.2;
  margin: 0 1.5%;
}
.program_detail #mirai_program .program_content p span {
  border-bottom: 1px dashed #00a7ea;
}
.program_detail #mirai_program .program_content p img {
  vertical-align: middle;
}
.program_detail #mirai_program .program_content li {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 22%;
  margin: 0 1.5% 1% 1.5%;
  text-align: center;
  vertial-align: middle;
}
.program_detail #mirai_program .program_content .content_detail_board {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}
.program_detail #mirai_program .program_content .content_detail_board .board_fig {
  position: absolute;
  left: 12%;
  bottom: -20px;
  max-width: 16%;
}
.program05_detail #mirai_program .program_content .content_detail_board .board_fig {
  left: 9%;
}
.program_detail #mirai_program .program_content .content_detail_board .board_txt {
  position: absolute;
  display: block;
  margin: 0 auto;
  left: 25%;
  bottom: 10%;
  max-width: 50%;
}
.program01_detail #mirai_program .program_content .content_detail_board .board_txt {
  bottom: 7%;
}
.program02_detail #mirai_program .program_content .content_detail_board .board_txt {
  bottom: 13%;
}
.program03_detail #mirai_program .program_content .content_detail_board .board_txt {
  bottom: 13%;
}
.program04_detail #mirai_program .program_content .content_detail_board .board_txt {
  bottom: 13.5%;
}
.program_detail #mirai_program h3 {
  text-align: center;
  border-bottom-width: 0;
  margin: 0 2%;
  padding-top: 20px;
  font-size: 36px;
}
#mirai_program .program_staff {
  margin: 0 10%;
  border-top: 1px solid #d4edfb;
}

#mirai_program .program_staff .program_staff01 dl::before {
  color: #1f65da;
}
#mirai_program .program_staff .program_staff02 dl::before {
  color: #eaa0c0;
}
#mirai_program .program_staff .program_staff03 dl::before {
  color: #69add7;
}
#mirai_program .program_staff .program_staff04 dl::before {
  color: #80ad26;
}
#mirai_program .program_staff .program_staff05 dl::before {
  color: #f4c441;
}

@media screen and (max-width: 1024px) {
.program_detail #mirai_program .program_content .content_detail_slide {
  font-size: 20px;
}
}

@media screen and (max-width: 768px) {

.program_detail #mirai_program h3 {
  padding-top: 0;
}
  
.program_detail #mirai_program .program_content {
/*  background-size: 100% 25%;*/
  padding-top: 40px;
}

.program_detail #mirai_program .program_content .content_detail_photo {
  padding: 25px 0 0;
}

.program_detail #mirai_program .program_content .content_detail {
  margin-top: 0;
}
.program_detail #mirai_program .program_content .content_detail_slide {
  font-size: 18px;
  padding: 110px 5% 15px 5%;
  margin-top: -130px;
}
.program_detail #mirai_program .program_content p {
  -ms-flex-preferred-size: 97%;
      flex-basis: 97%;
  max-width: 97%;
  text-align: center;
}
.program_detail #mirai_program .program_content .explain_txt {
  padding-top: 20px;
  text-align: left;
}
.program_detail #mirai_program .program_content li {
    -ms-flex-preferred-size: 47%;
        flex-basis: 47%;
    max-width: 47%;
}

.program_detail #mirai_program .program_staff {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.program_detail #mirai_program .program_staff a {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  max-width: 50%;
}
.program_detail #mirai_program .program_staff a:nth-of-type(2n+1) {
  border-right-width: 0;
}
.program_detail #mirai_program .program_staff dt {
  min-height: 3em;
  padding-top: 0;
  font-size: 18px;
}


}

@media screen and (min-width: 641px) {
.program_detail #mirai_program .program_content .content_detail_board .board_txt_sp {
  display: none;
}
}

@media screen and (max-width: 767px) {

.program_detail #mirai_intro .intro_program h2 span {
  width: 70%;
  font-size: 24px;
}

.program_detail #mirai_program .program_content .content_detail_slide {
  font-size: 14px;
}
.program_detail #mirai_program .program_content p {
  max-width: 100%;
  margin: 0;
}

.program_detail #mirai_program .program_content .content_detail_board {
  background-attachment: scroll;
  margin-bottom: -7%;
  padding: 33% 0 0 0;
  background: url(/group/blue-academy/mirai/image/program/staff_board_bg_sp.png) no-repeat top center;
  background-size: contain;
}
.program_detail #mirai_program .program_content .content_detail_board .board_bg {
/*  visibility: hidden;*/
  opacity: 0;
}
.program_detail #mirai_program .program_content .content_detail_board .board_fig {
  left: 6.5%;
  bottom: 10%;
  max-width: 16%;
}
.program05_detail #mirai_program .program_content .content_detail_board .board_fig {
  left: 2.3%;
}
.program_detail #mirai_program .program_content .content_detail_board .board_txt {
  left: 8%;
  bottom: 23.5%;
  max-width: 84%;
}
.program_detail #mirai_program .program_content .content_detail_board .board_txt_pc {
  display: none;
}

.program_detail #mirai_program h3 {
  font-size: 20px;
}

.program_detail #mirai_program .program_content p {
  font-size: 16px;
  line-height: 2;
}
.program_detail #mirai_program .program_content p span {

}

.program_detail #mirai_intro .intro_program h2 span {
  font-size: 30px;
}


.program_detail #mirai_program .program_content .content_detail_slide  {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  margin-top: -130px;
}
.program_detail #mirai_program .program_content li {
  max-width: 100%;
  padding: 10px;
}

.program_detail #mirai_program h3 {
  font-size: 24px;
}

}