@charset "utf-8";

#movieWrap {
 position: relative;
 width: 100%;
 height: 0;
 padding-top: 56.25%;
}

#movieWrap iframe {
 /*width:1146px;height:645px;*/
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: none;
}

img.play {
 float: right;
 width: 18px;
 stroke: #003396;
 margin-top: 3px;
}

.box01 h4 {
	padding: 0 20px 20px 20px;
	margin: 20px 0 0;
}

.movie_note {
  font-size: 90%;
  margin: 0 !important;
 }

@media(min-width: 768px){
 .box01.col3 {
  width: calc(100% + 30px);
 }
 .swiper-wrapper {
  flex-wrap: wrap;
 }
 .swiper-slide {
  width: 31.3%;
  max-width: 362px;
 }
 .swiper-button-prev,.swiper-button-next {
  display: none;
 }
}

@media(max-width: 768px){
 .box01.col3 {
  margin-left: -3%;
 }
 img.play {
  margin-right: -5px;
 }
 .swiper-button-next, .swiper-button-prev {
  top: 30% !important;
  width: 22px !important;
  height: 36px !important;
  -moz-background-size: 22px 36px !important;
  -webkit-background-size: 22px 36px !important;
  background-size: 22px 36px !important;
 }
 .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%236ee2e9'%2F%3E%3C%2Fsvg%3E") !important;
 }
.swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%236ee2e9'%2F%3E%3C%2Fsvg%3E") !important;
 }
}

/***** Page navi *****/

.GridA{
	display: flex;
	flex-wrap: wrap;
}

.GridA__item{
    margin-bottom: 2.6% !important;
    padding: 0 1.3%;
    width: -webkit-calc(33.3% - 2.6%);
    width: -moz-calc(33.3% - 2.6%);
    width: calc(33.3% - 2.6%);
}

.CardA{
    display: flex;
    height: 100px;
    padding-left: 5%;
    -webkit-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;
    border-radius: 10px;
    background-color: #f2f5f7;
    background-repeat: no-repeat;
    -js-display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.CardA.-Card01{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_01.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_01.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_01.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_01.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}

.CardA.-Card02{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_02.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_02.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_02.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_02.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}

.CardA.-Card03{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_03.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_03.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_03.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_03.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}

.CardA.-Card04{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_04.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_04.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_04.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_04.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}

.CardA.-Card05{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_05.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_05.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_05.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_05.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}

.CardA.-Card06{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_06.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_06.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_06.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_06.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}

.CardA.-Card07{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_07.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_07.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_07.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_07.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}

.CardA.-Card08{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_08.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_08.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_08.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_08.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}

.CardA.-Card09{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_09.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_09.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_09.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_09.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}

.CardA.-Card10{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_10.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_10.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_10.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_10.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}

.CardA.-Card11{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_11.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_11.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_11.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_11.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}

.CardA.-Card12{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_12.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_12.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_12.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_12.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}

.CardA.-Card13{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_13.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_13.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_13.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_13.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}
.CardA.-Card14{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_14.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_14.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_14.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_14.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}
.CardA.-Card15{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_15.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_15.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_15.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_15.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}
.CardA.-Card16{
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f2f5f7), color-stop(60%, rgba(242, 245, 247, 0))), url('../images/card_16.jpg');
  background-image: -webkit-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_16.jpg');
  background-image:      -o-linear-gradient(left, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_16.jpg');
  background-image:         linear-gradient(90deg, #f2f5f7 30%, rgba(242, 245, 247, 0) 60%), url('../images/card_16.jpg');
  background-position: 0 100%, 100% 50%;
  background-size: 100%, auto 100%;
}
.CardA.-Card01:hover,
.CardA.-Card02:hover,
.CardA.-Card03:hover,
.CardA.-Card04:hover,
.CardA.-Card05:hover,
.CardA.-Card06:hover,
.CardA.-Card07:hover,
.CardA.-Card08:hover,
.CardA.-Card09:hover,
.CardA.-Card10:hover,
.CardA.-Card11:hover,
.CardA.-Card12:hover,
.CardA.-Card13:hover,
.CardA.-Card14:hover,
.CardA.-Card15:hover,
.CardA.-Card16:hover{
  background-size: 100%, auto 107%;
  text-decoration: none !important;
}

.CardA__head{
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    line-height: 1.3;

    -webkit-transition: .4s;
         -o-transition: .4s;
            transition: .4s;
    color: #000;
}

@media screen and (max-width: 780px){
    .GridA{
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .GridA__item{
        width: 47.4%;
    }
    .CardA__head{
      font-size: 1.4rem;
    }
}