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


/*****/

.list1l:before {
    padding-top: 0.75em;
    @include sp {
        padding-top: 1.5em;
    }
}

.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;
        }
    }
    h3.text {
        line-height: 2;
        @include lineHeightCrop(2);
        margin-bottom: 40px;
    }
    @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;
    }
}