@charset "UTF-8";
/* Work Shikaku */
.mv:before{background: url("../img/work/mv.jpg") no-repeat center center/cover;}

@media only screen and (max-width: 480px) {
  .mv:before{background: url("../img/work/mv_sp.jpg") no-repeat top center/cover;}
}

.main > .container{padding-bottom: 1px;}
.titleLine{margin-bottom: 30px;}

.group h4{width: 475px; margin: 0 auto 25px; font-size: 30px; line-height: 1.4; padding: 8px 0 6px; text-align: center; color: #fff; font-weight: bold;}
.group h4.bgPurple{background: #959bbf;}
.group h4.bgPink{background: #d19aa3;}

@media only screen and (min-width: 768px) {
  .group{margin-bottom: 110px;}
  .part:not(:last-of-type){margin: 0 0 80px;}
}

@media only screen and (max-width: 767px) {  
  .group{margin-bottom: 80px;}
  .group h4{width: 100%; font-size: min(6vw,30px);}
  
  .part:not(:last-of-type){margin: 0 0 40px;}
}

/* Pass rate */
.passTit{text-align: center; margin: 0 auto 40px; width: 55%;}

.passBox1{display: flex; flex-wrap: wrap; justify-content: space-between;}
.passBox1 [class*="item"]{width: 48%;}
.passBox1 p{font-size: 19px; line-height: 1.6;}
.passBox1 .img{margin-top: -20px;}
.passBox1 .item1 .img{text-align: right;}
.passBox1 .item2{text-align: right;}
.passBox1 .item2 .txt{display: inline-block; text-align: left;}
.passBox1 .item2 .img{text-align: left;}

@media only screen and (max-width: 1023px) {  
  .passBox1 .img{margin-top: 0;}
}

@media only screen and (max-width: 767px) {
  .passBox1 [class*="item"]{width: 100%; display: flex; justify-content: center; align-items: center;}
  .passBox1 p{font-size: 3.5vw;}
  .passBox1 .img{width: 42%; margin: 0 0 0 2%;}
  .passBox1 .item2 .img{order: -1; margin: 0 2% 0 0;}
}

.passBox2{position: relative; padding-top: 40px;}
.passBox2 p{font-size: 19px; line-height: 1.6;}
.passBox2 .txt{position: absolute; top: 10px; right: calc(50% + 170px);}
.passBox2 .img{text-align: center;}

@media only screen and (max-width: 1023px) {  
  .passBox2 .img{margin-left: 230px; text-align: left;}
  .passBox2 .txt{right: auto; left: 0;}
}

@media only screen and (max-width: 767px) {
  .passBox2{padding: 0;}
  .passBox2 p{font-size: 3.5vw;}
  .passBox2 .img{widtH: 42%; margin: 0 0 0 49%;}  
  .passBox2 .txt{top: auto; bottom: -3%; left: 4%;}
}

/* Table */
/* @media only screen and (min-width: 768px) {  */
.scroll-bar{ overflow-x: auto; overflow-y: hidden;}
.tbl{width: 100%; min-width: 600px; border-collapse: collapse; border-spacing: 0;}
.tbl th{background: #6e808e; color: #fff; font-weight: bold;}
.tbl th,
.tbl td{border: 1px solid #ebebeb; width: 14%; vertical-align: middle; text-align: center; padding: 12px 0; line-height: 1.4;}
.tbl th:nth-of-type(1){width: 16%}
/* } */

@media only screen and (max-width: 767px) {
  .btnPdf{text-align: center;}
  .btnPdf a{color: #6e808e; text-decoration: underline;}
}

/* Preparation */
.prepaBox{display: flex; justify-content: space-between; flex-wrap: wrap;}
.prepaBox .item{width: 31%;}
.prepaBox .tit{display: flex; align-items: flex-end; margin: 0 0 15px;}
.prepaBox .tit figure{width: min(9vw, 95px)}
.prepaBox h5{font-size: min(2.4vw,24px); line-height: 1.35; font-weight: bold; padding: 0 0 0 10px;}
.prepaBox .txt{font-size: 18px;}

@media only screen and (max-width: 767px) {
  .prepaBox .item{width: 100%;}
  .prepaBox .item:not(:last-of-type){margin: 0 0 25px;}
  .prepaBox .tit figure{width: min(20vw, 95px)}
  .prepaBox h5{font-size: min(5.5vw,24px);}
  .prepaBox .txt{font-size: 16px;}
}

/* Certificate */
.certiList{border: 2px solid #777777; padding: 20px; width: 475px; text-align: center; margin: 0 auto;}
.certiList ul{display: inline-block; text-align: left;}
.certiList li{font-size: 18px; line-height: 1.4; text-indent: -1em; margin-left: 1em;}
.certiList li:not(:last-of-type){margin-bottom: 5px;}

.certiBox{margin: 25px 0 0 0; background: #eeeeee; padding: 20px 5%;}
.certiBox *{font-size: 18px; line-height: 1.4;}
.certiBox h5{font-weight: bold; margin: 0 0 5px;}

@media only screen and (max-width: 767px) {
  .certiList{width: 100%;}
  .certiList li{font-size: 16px;}
  
  .certiBox{padding: 20px; margin: 20px -20px 0;}
  .certiBox *{font-size: 16px;}
}

p.point-red {
  color: red;
  font-size: 30px;
}
@media only screen and (max-width: 767px) {
  p.point-red {
    font-size: 4vw;
  }
}