//subject
@import "mixin";

/*other  education subject*/

.subject-list {
    border-bottom: 1px solid $color-line-gray2;
    counter-reset: number;
    list-style: none;
    position: relative;
    margin-bottom: 60px;
    &__item {
        line-height: 1.77;
        @include font-size(18);
        @include lineHeightCrop(2);
        position: relative;
        margin-left: 80px;
        padding-bottom: 40px;
        @include lineHeightCrop(1.77);
        @include sp {
            @include font-size(14);
            line-height: 1.785;
            @include lineHeightCrop(1.785);
            margin-left: 60px;
        }
        &:not(:last-child) {
            margin-bottom: 22px;
            border-bottom: 1px solid $color-line-gray2;
        }
        span {
            position: absolute;
            left: -80px;
            top: 10px;
            width: 40px;
            height: 40px;
            text-align: center;
            background: $color-paint-blue;
            color: #fff;
            @include font-size(14);
            line-height: 40px;
            border-radius: 100%;
            @include sp {
                left: -60px;
                top: 20%;
            }
        }
    }
}

.subjectWrap {
    margin-top: 80px;
    .textMb0{
        margin-bottom: 0px;
    }
    .subjectCaption{
    color: $color-text-gray1;
    font-size: 10px;
    font-weight: 400;
    margin-top: 10px; 
    }
    .textRight{
        text-align: right;
    }
    @include sp {
        margin-top: 60px;
        .text {
            margin-bottom: 30px;
        }
    }
    h2.h2 {
        border-top: 1px solid $color-line-gray2;
        padding-top: 46px;
        margin-bottom: 35px;
  letter-spacing:0.15em;
        @include sp {
            padding-top: 33px;
            margin-bottom: 30px;
        }
    }

    @include pc {
          p.text {
        margin-bottom: 40px;
    }      /*    p.text:last-child {
        margin-bottom: 0px;
    }*/
          &__1col {
              margin-bottom: 40px;
              img{width: 100%;}
              }
        /*pc_043　SP＿039*/
        &__2col {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 0px;
            &__item {
                width: 380px!important;
                margin-right: 40px;
                margin-bottom: 0px;
                img {
                    width: 100%;
                }
                
               
                &:nth-child(even) {
                    margin-right: 0px;
                }
            }
        }
        /*pc_045*/
        &__3col {
            display: flex;
            flex-wrap: wrap;

            /*3カラムはswiperなので*/
            .swiper-wrapper{
            flex-wrap: wrap;
           .subjectWrap__3col__item {
                width: 250px!important;
                margin-bottom: 0px;
                    margin-right: 24px;
                  margin-bottom: 40px;
                img {
                    width: 100%;
                }
            }
                .subjectWrap__3col__item:nth-child(3),.subjectWrap__3col__item:nth-child(6){margin-right: 0px;}
            }
        }
    /**pcのみmargin-bottom:0:*/
    .englishM_adjust{margin-bottom: 0px!important;}
    }
    @include sp {
          p.text {
        margin-bottom: 30px;
    }
       &__1col {
              margin-bottom: 40px;
              img{width: 100%;}
              }
        &__2col {
            display: flex;
            flex-direction: column;
            &__item {
                width: 100%!important;
                margin-bottom: 30px;
                margin-right: 0px;
                img {
                    width: 100%;
                }
            }

        }
        &__3col {
            &__item {
                width: 100%!important;
                margin-bottom: 30px;
                margin-right: 0px;
            }
        }
     /************************pcのみmargin-bottom:0:*/
    .englishM_adjust{margin-bottom: 30px!important;}
    }

    /*swiper*/
    @include pc {
        .swiper-container {
            .swiper-wrapper{
            .swiper-slide {
                //                width:250px;
                img {
                    width: 100%;
                }
            }
            .swiper-pagination {
                display: none;
            }
        }
            }
    }
    @include sp {
        .swiper-pagination {
            text-align: right!important;
        }
        .swiper-pagination-bullets {
            bottom: 0px!important;
        }
        .swiper-container {
            margin-bottom: 40px;
            .swiper-slide {
                width: 100%;
                img {
                    width: 100%;
                }
            }
        }
        .swiper-pagination-bullet {
            bottom: 0px!important;
            background: #000;
            opacity: .2;
        }
        .swiper-pagination-bullet-active {
            background: $color-paint-blue;
            opacity: 1;
        }
    }
    /****/
    @include pc {
        .list-set2{margin-bottom: 40px;}
    }
    @include sp { 
        .list-set2{margin-bottom: 30px;}
    }
}

/**カラム内、タイトル*/
.column_in_title {
    @include font-size(18);
        font-weight: 500;
       margin: 30px 0;
       margin: 20px 0;
  font-weight:500;
 line-height:1.8;
  @include lineHeightCrop(1.8);
  letter-spacing:0.15em;
       /*3カラムなど*/
        @include sp {
    @include font-size(16);
       margin: 16px 0;
        }
    }
   .column_in_title_small1 {
    @include font-size(16);
       margin: 20px 0 0;
  letter-spacing:0.15em;
  font-weight:500;
 line-height:1.8;
@include lineHeightCrop(1.8);
       }



/*multiple マージン調整*/
.multiple {
    @include pc {
//      > div {
 >div:not(:last-child) {
      margin-bottom: 40px;
     p.text{
         margin-top: 0px;
         margin-bottom: 0px;}
                }
    }
    @include sp {
 >div:not(:last-child) {
           /* margin-bottom: 0px;*/
     p.text{
        margin-top:0px;
          /*margin-bottom: 0px;*/
     }
                }
    }
}
/***margin調整***/

.mb0 {
    margin-bottom: 0px!important;
    @include sp {
        margin-bottom: 0px!important;
    }
}
.pc_mb0{
    @include pc {
    margin-bottom: 0px!important;
    }
}
.pc_mb1{
    @include pc {
    margin-bottom: 1px!important;
    }
}
.pc_mb25{
    @include pc {
    margin-bottom: 25px!important;
    }
}
.sp_mb0{
    @include sp {
    margin-bottom: 0px!important;
    }
}
.sp_mb40{
    @include sp {
    margin-bottom: 40px!important;
    }
}
.sp_mb50{
    @include sp {
    margin-bottom: 50px!important;
    }
}
.sp_mb25{
    @include sp {
    margin-bottom: 25px!important;
    }
}
.mt40 {
    margin-top: 40px!important;
    @include sp {
        margin-top: 30px!important;
    }
}
.mb40 {
    margin-bottom: 40px!important;
    @include sp {
        margin-bottom: 30px!important;
    }
}
.mb30{
        margin-bottom: 30px!important;
    @include sp {
        margin-bottom: 20px!important;
    }
}
.mb15{
        margin-bottom: 15px!important;
}
.mb20{
        margin-bottom: 20px!important;
    @include sp {
        margin-bottom: 20px!important;
    }
}

.mb25{
        margin-bottom: 25px!important;
    @include sp {
        margin-bottom: 15px!important;
    }
}

.mb25_2{
        margin-bottom: 25px!important;
    @include sp {
        margin-bottom: 25px!important;
    }
}
.mb80{
            margin-bottom: 80px!important;
    @include sp {
        margin-bottom: 60px!important;
    }
}
.mt30{
        margin-top: 30px!important;
    @include sp {
        margin-top: 20px!important;
    }
}
.mt-10px{
    margin-top: -10px;
}
.mt-15px{
    margin-top: -15px;
}



            /*flex order*/
    @include sp {
        .lower-2col{
            display: flex;
            flex-direction: column;
        }
            .flexOrder0 {
                order: 0!important;
            }
            .flexOrder1 {
                order: 1!important;
            }
            .flexOrder2 {
                order: 2!important;
            }
}

/**accordion__item**/ 
@include sp {
    .accordion__item {
        cursor: pointer;
        display: block;
    }
    .accordion__item__link {
        display: block;
        position: relative;
        background: url("../images/common/icon_on.png")right center no-repeat;
        background-size: 12px auto;
        padding: 25px 0;
        border-top: 1px solid #f2f2f2;
        margin-bottom: 0px;
    }
    .accordion__item__link_first {
        border-top: 1px solid #f2f2f2;
    }
    .accordion__item__link_second {
        border-bottom: 1px solid #f2f2f2;
        margin-bottom: 0px;
    }
    /*.accordion__item__link:after {
  content: '+';
  display: block;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
}*/
    /*.accordion__item__link.on:after {
  content: '-';
}*/
    .on {
        background: url("../images/common/icon_off.png")right center no-repeat;
        background-size: 12px auto;
        border-bottom: none;
    }
    .sp_boder_bottom {
        border-bottom: 1px solid #f2f2f2;
    }
    .accordion__item {
        display: none;
    }
}
//facilities
.facilities {
    .map {
        @include pc {
            background: url("/prim/assets/images/school-life/facilities/map_pc.jpg")center center no-repeat;
            height: 440px;
            width: 800px;
            position: relative;
            .fa_a {
                position: absolute;
                top: 78px;
                left: 639px;
                img {
                    width: (148px / 2);
                }
            }
            .fa_b {
                position: absolute;
                top: 64px;
                left: 277px;
                img {
                    width: (146px / 2);
                }
            }
            .fa_c {
                position: absolute;
                top: 60px;
                left: 106px;
                img {
                    width: (184px / 2);
                }
            }
            .fa_d {
                position: absolute;
                top: 363px;
                left: 132px;
                img {
                    width: (184px / 2);
                }
            }
            a {
                &:hover {
                    opacity: .3;
                }
            }
        }
        
  @include sp {
              background: url("/prim/assets/images/school-life/facilities/map_sp.jpg")center center no-repeat;
              background-size: 100%;
              width: 100%;
              height: 0;
              padding-top: 68.75%;
              z-index: 1;
              a {
                  z-index: 10;
                  display: inline-block;
              }
              .fa_a {
                  position: absolute;
                  top: 0;
                  /* left: 79.6875%;*/
                  left: 0;
                  margin-top: 4.5%;
                  margin-left: 79.375%;
                  
                  width: 16.5625%;
                  img {
                      width: 100%;
                      height: auto;
                  }
              }
              .fa_b {
                  position: absolute;
                  top: 0;
                  left: 0;
                  margin-top: 4.5%;
                  margin-left: 37.1875%;
                  width: 16.5625%;
                  img {
                      width: 100%;
                      height: auto;
                  }
              }
              .fa_c {
                  position: absolute;
                  top: 0;
                  left: 0;
                  margin-left: 13.125%;
                  margin-top: 14.5%;
                  width: 20.625%;
                  img {
                      width: 100%;
                      height: auto;
                  }
              }
              .fa_d {
                  position: absolute;
                  top: 0;
                  left: 0;
                  margin-left: 11.125%;
                  margin-top: 58%;
                  width: 20.625%;
                  img {
                      width: 100%;
                      height: auto;
                  }
              }
          }
      }

    
  }
.facilities__item{
    
   @include pc {
           position: relative;
    .text_2block{width: 524px;
        z-index: 10;
    }
    .lower-3col__item{
        margin-bottom: 0px!important;
    }
    }
   @include sp {
       .h5{margin-bottom: 20px!important;}
      p{padding-bottom: 10px;}
           .lower-3col__item{
        margin-bottom: 0px!important;
    }
    }

    }

/****/
.field-trip-slide{
     @include pc {
.image01__item,.image02__item,.image03__item,.image04__item,.image05__item,.image06__item,.image07__item,.image08__item{
  overflow: hidden;
  position: relative;
}
.image01__item img,.image02__item img,.image03__item img,.image04__item img,.image05__item img,.image06__item img,.image07__item img,.image08__item img{
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.image01__item:after,.image01-thumbs__item:after,.image02__item:after,.image02-thumbs__item:after,.image03__item:after,.image03-thumbs__item:after,.image04__item:after,.image04-thumbs__item:after,.image05__item:after,.image05-thumbs__item:after,.image06__item:after,.image06-thumbs__item:after,.image07__item:after,.image07-thumbs__item:after,.image08__item:after,.image08-thumbs__item:after{
  display: block;
  padding-top: 75%;
  content: '';
}
.image01-thumbs,.image02-thumbs,.image03-thumbs,.image04-thumbs,.image05-thumbs,.image06-thumbs,.image07-thumbs,.image08-thumbs{
  width: 100%;
  padding: 12px 0 0;
  box-sizing: border-box;
}
.image01-thumbs__item,.image02-thumbs__item,.image03-thumbs__item,.image04-thumbs__item,.image05-thumbs__item,.image06-thumbs__item,.image07-thumbs__item,.image08-thumbs__item{
  overflow: hidden;
  position: relative;
    width: 86px!important;
    margin-right: 12px!important;
}
.image01-thumbs__item:last-child,.image02-thumbs__item:last-child,.image03-thumbs__item:last-child,.image04-thumbs__item:last-child,.image05-thumbs__item:last-child,.image06-thumbs__item:last-child,.image07-thumbs__item:last-child,.image08-thumbs__item:last-child{
    margin-right: 0px!important;
}
.image01-thumbs__item:hover,.image02-thumbs__item:hover,.image03-thumbs__item:hover,.image04-thumbs__item:hover,.image05-thumbs__item:hover,.image06-thumbs__item:hover,.image07-thumbs__item:hover,.image08-thumbs__item:hover{
    cursor: pointer;
}
.image01-thumbs__item.swiper-slide,.image02-thumbs__item.swiper-slide,.image03-thumbs__item.swiper-slide,.image04-thumbs__item.swiper-slide,.image05-thumbs__item.swiper-slide,.image06-thumbs__item.swiper-slide,.image07-thumbs__item.swiper-slide,.image08-thumbs__item.swiper-slide{
  opacity: 0.5;
}
.image01-thumbs__item.swiper-slide-thumb-active,.image02-thumbs__item.swiper-slide-thumb-active,.image03-thumbs__item.swiper-slide-thumb-active,.image04-thumbs__item.swiper-slide-thumb-active,.image05-thumbs__item.swiper-slide-thumb-active,.image06-thumbs__item.swiper-slide-thumb-active,.image07-thumbs__item.swiper-slide-thumb-active,.image08-thumbs__item.swiper-slide-thumb-active{
  opacity: 1;
}
.image01-thumbs__item img,.image02-thumbs__item img,.image03-thumbs__item img,.image04-thumbs__item img,.image05-thumbs__item img,.image06-thumbs__item img,.image07-thumbs__item img,.image08-thumbs__item img{
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
         
         
 
       
    }
   /**/
        @include sp {
          
   /*         .image01-thumbs{
                display: none!important;
            }*/
            .pc{display: none!important;}
            
        .swiper-pagination {
            margin-top: 30px;
            text-align: right!important;
            z-index: 1000;
        }
        .swiper-pagination-bullets {
            bottom: 0px!important;
        }
            
        .swiper-container {
            margin-bottom: 0px;
            .swiper-slide {
                width: 100%;
                img {
                    width: 100%;
                }
            }
        }
       .swiper-pagination-bullet {
            bottom: 30px!important;
            background: #000;
            opacity: .2;
        }
     .swiper-pagination-bullet-active {
            background: $color-paint-blue;
            opacity: 1;
        }
    }

}

/**field-trip**/
.subjectWrap__line{
    padding-top: 50px;
    padding-bottom: 80px;
    border-top: 1px solid $color-line-gray2;
 @include sp {
padding-bottom: 60px;
    padding-top: 40px;    
}
}
     
         .h3_1{
             line-height: 80px;
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    margin-bottom: 40px;
             padding-left: 100px;
                @include sp {
                    font-size: 1.8rem;
    margin-bottom: 20px;
             line-height: 60px;
             padding-left: 75px;
             }
             
         }
         .grade1{
        background: url("/prim/assets/images/education/mind/field-trip/icon_01.png")left center no-repeat;
        background-size: 80px auto;
                @include sp {
                    
        background-size: 60px auto;
             }
            }
         .grade2{
        background: url("/prim/assets/images/education/mind/field-trip/icon_02.png")left center no-repeat;
        background-size: 80px auto;
                @include sp {
                    
        background-size: 60px auto;
             }
            }
         .grade3{
        background: url("/prim/assets/images/education/mind/field-trip/icon_03.png")left center no-repeat;
        background-size: 80px auto;
                @include sp {
                    
        background-size: 60px auto;
             }
            }

         .grade4{
        background: url("/prim/assets/images/education/mind/field-trip/icon_04.png")left center no-repeat;
        background-size: 80px auto;
                @include sp {
                    
        background-size: 60px auto;
             }
            }

         .grade5{
        background: url("/prim/assets/images/education/mind/field-trip/icon_05.png")left center no-repeat;
        background-size: 80px auto;
                @include sp {
                    
        background-size: 60px auto;
             }
            }

         .grade6{
        background: url("/prim/assets/images/education/mind/field-trip/icon_06.png")left center no-repeat;
        background-size: 80px auto;
                @include sp {
                    
        background-size: 60px auto;
             }
            }