@charset "UTF-8";
/* CSS Document */

@media screen and (max-width:767px){
html {
-webkit-overflow-scrolling: touch;
scrollbar-color: #a6a6a6 #d9d9d9;
}
.pc{display: none!important;}
.sp{display: block!important;}

	
	
.wrap{width: 80%;margin: 0 auto;}


section{padding: 15vw 0 0 0;}
h1{position: relative;}
h1.icon01:before{content:"";position: absolute;height: 1px;width: 50px;background: #000;bottom: -45px;}
h1.icon01.tate:before{content:"";position: absolute;height: 50px;width: 1px;background: #000;bottom: -75px;left:calc(50% - 0.5px);}
h1.icon01.center:before{left: calc(50% - 25px);}
h1.headline{font-size: 6.5vw;white-space: nowrap;text-align: center;}
h1.headline span{font-size: 3.2vw;display: block;margin: 13px 0 0 0;}
	
	
header nav{display: flex;justify-content: space-between;height: 50px;align-items: center;padding: 0 5vw;}
header h1{width: 58vw;}
header .box00{display: flex;justify-content: space-between;align-items: center;}
header .box01{display: flex;justify-content: space-between;width: 340px;}
header .box02{display: flex;justify-content: space-between;width: 64px;}
header .box02 a{width: 25px;display: block;}
	
header .box01 a{position: relative;}	
header .box01 a:hover::after {
    width: 100%;
}
header .box01 a::after {
    position: absolute;
    bottom: -6px;
    left: 50%;
    content: '';
    width: 0;
    height: 1px;
    background-color: #000;
    transition: .3s;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#sec01{background: url("../img/image01.jpg") center center no-repeat;background-size: cover;height: 120vw;color: #fff;display: flex;align-items: center;justify-content: center;padding: 0;}
#sec01 h1{font-size: 9.5vw;text-align: center;}
#sec01 h1 span{font-size: 4.5vw;display: block;margin: 0 0 15px 0}
#sec01 h1 p{font-size: 2.5vw;display: block;margin: 15px 0 0 0;}

	
	#sec02 a span{padding: 5vw 0;}
	#sec02 a span:before{content: "";
    position: absolute;
    height: 2vw;
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
    bottom: 6.9vw;
    right: 6.6vw;
	}
	#sec02 a span:after{content: "";
    position: absolute;
    width: 6vw;height: 1px;
	background: #fff;
    right: 6vw;
    bottom: 7vw;
    
	}
.flex{display: flex;flex-direction: column;}
.jus{justify-content: space-between;}

#sec02 {color: #fff;}
#sec02 a{color: #fff;position: relative;}
#sec02 .box01{}
#sec02 .box02{background: #153360;align-items: center;padding: 8vw 0;width: 100%;}
#sec02 .box03{background: #5b769e;font-size: 4vw;line-height: 1.4;text-align: center;display: flex;justify-content: center;align-items: center;width: 100%;}
#sec02 .box03 a{display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}
#sec02 .box04 h1{font-size: 6vw;padding: 0 35px;}
#sec02 .box05{padding: 0 5vw;}
	
#sec02 .box05 .text01{font-size: 4vw;line-height: 1.5;margin: 0 0 5vw 0;text-align: center;}
#sec02 .box05 .text02{font-size: 3vw;line-height: 2;}
#sec02 .line{width: 80%;height: 1px;background: #d2d2d2;margin: 5vw 0 8vw 0;}
	
	.slider{width: 100vw;margin: 0 0 0 -10vw;}
	.slider .slick-dots{bottom:-50px;}
	.slider .slick-dots li button:before{font-size: 12px;}
	#sec03{padding: 15vw 0;}

	#sec03 h1.icon01:before{left: calc(50% - 25px);}
#sec03 .box02{}
#sec03 .box03{margin: 20vw 0 0 0;}
#sec03 .box03 .text01{text-align: center; font-size: 3vw;line-height: 2;margin: 80px 0 0 0;}
.slider {
  display: none;
}
.slider.slick-initialized {
  display: block;
}

#sec04{background: #eaeef4;padding: 20vw 0 5vw 0;}
	#sec04 .box01{overflow: scroll;width: 90vw;padding: 0 0 8vw 0;margin: 0 10vw 0 0;}
	#sec04 .box01::-webkit-scrollbar{
   height: 5px;
}
#sec04 .box01::-webkit-scrollbar-track-piece{
   background-color: #d9d9d9;
}
#sec04 .box01::-webkit-scrollbar-thumb{
   background-color: #a6a6a6;
}
	#sec04 .box01 ul{width: 180vw;}
	#sec04 .box01 .flex{flex-direction: row-reverse;}
#sec04 .text00{font-size: 3.2vw;line-height: 1.9;margin: 100px 0 15vw 0;text-align: center;}
#sec04 .box01{max-width: 960px;margin: 0 auto;}
#sec04 .box01 li{width:31%;font-size: 3vw;margin: 0 10vw 0 0;}
#sec04 .box01 li .text01{color: #fff;background: #153360;border-radius: 20px;text-align: center;padding: 10px 0;margin: 3vw 0 6vw;}
#sec04 .box01 li .text01.off{background: #a6a6a6;border-radius: 0;}
#sec04 .box01 li .text02, #sec04 .box01 li .text03{line-height: 1.8;}
#sec04 .box01 li .text02{border-bottom: 1px solid #000;padding: 0 0 3vw 0;margin: 0 0 3vw 0;}


#sec04 .box02{margin: 10vw 0 0 0;}
#sec04 .box02 li{text-align: center;margin: 0 0 10vw 0;}
#sec04 .box02 li .text04{font-size: 4vw;margin: 40px 0 20px 0;}
#sec04 .box02 li .text05{line-height: 1.8;font-size: 3.2vw;}
#sec04 .box02 li a{display: block;text-decoration: underline;}

	#sec05{padding: 15vw 0;}
	#sec05 .wrap{width: 100%;}
.movie{
position: relative;
width: 80%;
margin:75px auto 0;
}
.movie video{
width: 100%;
}
.movie .play-btn{
display: block;
width: 20%;
position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
.movie .play-btn.playActive{display:none;}
#sec06{background: url("../img/sec06bg.png") repeat;padding: 15vw 0;}
#sec06 .box01{margin: 125px auto 0;}
#sec06 .box01 img{display: block;}
	
#sec07{background: #153360;padding: 15vw 0;}
	#sec07 .box01{max-width: 830px;width: 100%;margin: 0 auto;}
	#sec07 .box01 a.btn{position: relative;border:1px solid #fff;width: 100%;color: #fff;text-align: center;height: 18vw;line-height: 18vw;display: block;font-size: 4vw;}
	#sec07 a:before{content: "";
    position: absolute;
    height: 2vw;
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
    bottom: 8.5vw;
    right: 6vw;;
	}
	#sec07 a:after{content: "";
    position: absolute;
    width: 8vw;height: 1px;
	background: #fff;
    right: 5vw;
    bottom: 8.5vw;
    
	}
	footer small{display: block;text-align: center;padding: 40px 0;color: #153360;}
}