@charset "UTF-8";
/* common */
.swiper-pagination{display:inline-block; position:relative; text-align:center;}
.swiper-pagination-bullet{display:inline-block; position:relative; width:10px; height:10px; margin:0 4px; background:transparent; border:1px solid #fff; border-radius:50%; opacity:1; vertical-align:top; transition:all 0.2s;}
.swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{background:#fff;}
.swiper-pagination-bullet-active{background:#fff;}
.swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{}
.swiper-button-next, .swiper-button-prev{width:17px;height:17px;opacity:1;  transition:.2s;}
.swiper-button-next{background:url('../images/ico_next.png') no-repeat center right;}
.swiper-button-prev{background:url('../images/ico_prev.png') no-repeat center left;}
.swiper-button-next:focus, .swiper-button-prev:focus, .swiper-button-next:hover, .swiper-button-prev:hover{opacity:.8;}


/* visual */
#mainVisual{position:relative; width:100%;height:580px; margin:0 auto; background:#fff; overflow:hidden;}
#mainVisual:after{content:''; clear:both; display:block;}
#mainVisual .inner{height:100%; padding:0;}
#mainVisual .swiper-container{width:100%;/* max-width:1920px;  */height:100%;}
#mainVisual .swiper-container .bg01{background:url('../images/main/main_visual_01.jpg') no-repeat center; background-size:cover;}
#mainVisual .swiper-container .bg02{background:url('../images/main/main_visual_02.jpg') no-repeat center; background-size:cover;}
#mainVisual .swiper-slide-active .fade-in-bottom{-webkit-animation:fade-in-bottom .8s ease-in-out .2s both; animation:fade-in-bottom .8s ease-in-out .2s both; -webkit-animation-delay:.2s; animation-delay:.2s;}
#mainVisual .txtBox{position:absolute; width:100%; top:170px;text-align:center; z-index:2; cursor:default;}
#mainVisual .txtBox span{font-size:1.5em;color:#fff;font-weight:500;opacity:.6;display:inline-block;text-shadow:1px 1px 10px rgba(0,0,0,0.3);}
#mainVisual .txtBox p{display:block; line-height:1.6; margin:0 auto; color:#fff; font-size:1.125em; font-weight:500; word-break:keep-all; text-shadow:1px 1px 10px rgba(0,0,0,0.3);}
#mainVisual .txtBox p.ti{font-size:3em; font-weight:800;line-height:1.4;margin:15px 0 0;}
#mainVisual .bgBox{position:absolute; width:100%; bottom:170px; z-index:2;}
#mainVisual .bgBox .pager{position:relative; bottom:0; right:0; text-align:center;}

/* contents */
#mainContents{clear:both; position:relative; width:100%; min-width:1400px; margin:0 auto; padding:0; background:#fff; z-index:1;}


#mainContents .area01, #mainContents .area02{clear:both; width:100%; padding:80px 0;}

#mainContents .area01{background:#fff;}
#mainContents .area01 .quickTitle{margin:0 0 60px; color:#333; text-align:center;font-size:2.125rem; font-weight:800;}
#mainContents .area01 .quick{position:relative;}
#mainContents .area01 .quick ul.list{display:flex;flex-wrap:wrap;justify-content: space-between;align-items: stretch;}
#mainContents .area01 .quick ul.list li{position:relative;width:324px;}
#mainContents .area01 .quick ul.list li a{display:block;background:#fff;padding:30px 30px;border:1px solid #ddd ;height:210px;transition:all .2s;border-radius:18px;}
#mainContents .area01 .quick ul.list li a p.ti{font-size:1.25em; line-height:1.5em; font-weight:500;word-break:keep-all;}
#mainContents .area01 .quick ul.list li a .img{position:absolute; bottom:20px; right:20px;width:30%; max-width:94px;}
#mainContents .area01 .quick ul.list li a .img img{width:100%;}
#mainContents .area01 .quick ul.list li a:focus,#mainContents .area01 .quick ul.list li a:hover{box-shadow:1px 1px 10px rgba(0,0,0,0.3); }

#mainContents .area02{background:linear-gradient(90deg,#b6d2e5,#d2e9c0);}
#mainContents .area02:after{content:'';display:block;clear:both;}
#mainContents .area02 .sites{position:relative;clear:both;padding:0 38px;}
#mainContents .area02 .sites ul{}
#mainContents .area02 .sites ul li{}
#mainContents .area02 .sites ul li a{position:relative;display:block;background:#fff;border-radius:18px;text-align:center;}
#mainContents .area02 .sites ul li a img{transform:scale(1);transition:all .2s;width:100%;}
#mainContents .area02 .sites ul li a:focus img,#mainContents .area02 .sites ul li a:hover img{transform:scale(1.05);}
#mainContents .area02 .sites .bgBox {position: absolute;width: 100%;top:0;left: 0;height:100%;}
#mainContents .area02 .sites .bgBox .control {cursor: default;}
#mainContents .area02 .sites .bgBox .control .swiper-button-prev, #mainContents .area02 .sites .bgBox .control .swiper-button-next { position: absolute;}
#mainContents .area02 .sites .bgBox .control .swiper-button-prev {left: 0;top: 50%;margin-top: -8.5px;}
#mainContents .area02 .sites .bgBox .control .swiper-button-next {right:0;top: 50%;margin-top: -8.5px;}

@media only screen and (max-width:1399px){
	#mainContents{min-width:1200px;}
	#mainContents .area01 .quick ul.list li{width:23.2%;}
	#mainContents .area01 .quick ul.list li a{height:240px;padding:28px 26px;}
}

@media only screen and (max-width:1279px){
	#mainVisual{height:580px;}
	#mainContents{min-width:960px;}
}

@media only screen and (max-width:1023px){
	#mainVisual{margin-top:72px;height:480px;}
	#mainVisual .txtBox{top:32.5%;}
	#mainVisual .txtBox p{}
	#mainVisual .txtBox p.ti{margin:12px auto 0;}
	#mainVisual .bgBox{bottom:30px;}

	#mainContents{min-width:100%;}
	#mainContents .area01, #mainContents .area02{padding:60px 0;}
	#mainContents .quickTitle{margin:0 0 28px; font-size:1.5em;}
	#mainContents .area01 .quick ul.list li{width:48.5%;margin-bottom:3%;}
	#mainContents .area01 .quick ul.list li:nth-child(n + 3){margin-bottom:0;}
	#mainContents .area01 .quick ul.list li a{height:180px;padding:26px 24px;}
	#mainContents .area01 .quick ul.list li a .img{width:20%; max-width:80px;}

	#mainContents .area02 .sites{padding:0 28px;}
	#mainContents .area02 .sites ul li a img{max-width:238px;}
	
}


@media only screen and (max-width:768px){
	#mainVisual{height:380px;}
	#mainVisual .txtBox p{}
	#mainVisual .txtBox p.ti{font-size:2.5em;}
	#mainVisual .bgBox{bottom:20px;}
	#mainContents .area01, #mainContents .area02{padding:50px 0;}
	#mainContents .area01 .quickTitle{margin:0 0 30px;}


}

@media only screen and (max-width:540px){
	#mainVisual{height:320px;}
	#mainVisual .txtBox{top:20%;}
	#mainVisual .swiper-container .bg01 .txtBox{padding:0 5%;}
	#mainVisual .swiper-container .bg02 .txtBox{padding:0 10%;}
	#mainContents .quickTitle{margin:0 0 18px;}
	#mainContents .area01 .quick ul.list li{width:100%;margin-bottom:18px;}
	#mainContents .area01 .quick ul.list li:nth-child(n + 3){margin-bottom:18px;}
	#mainContents .area01 .quick ul.list li:nth-child(n + 5){display:none !important;}
	#mainContents .area01 .quick ul.list li:nth-child(n + 4){margin-bottom:0;}
	#mainContents .area01 .quick ul.list li a{height:auto;padding:20px 18px;overflow:hidden;}
	#mainContents .area01 .quick ul.list li a p.ti{font-size: 1.125em;}
	#mainContents .area01 .quick ul.list li a .img{position: initial;float: right;width:15%;min-width:50px;}
}


@media only screen and (max-width:500px){
	#mainVisual .swiper-container .bg01 .txtBox{padding:0 12px;}
}

@media only screen and (max-width:480px){
	#mainVisual .txtBox{top:32.5%;}
	#mainVisual .txtBox span{font-size:1.375em;}
	#mainVisual .txtBox p{font-size:1em;}
	#mainVisual .txtBox p.ti{font-size:2em;margin:10px auto 0;}
	#mainContents .area01 .quickTitle{font-size:1.875em;}

}

@media only screen and (max-width:430px){
	#mainVisual .txtBox{top:25%;}
	#mainVisual .swiper-container .bg01 .txtBox{padding:0 5%;}
	#mainVisual .swiper-container .bg02 .txtBox{padding:0 10%;}
}

@media only screen and (max-width:390px){
	#mainVisual .swiper-container .bg01 .txtBox{padding:0 12px;}
}

@media only screen and (max-width:380px){
	#mainVisual .swiper-container .bg01 .txtBox{top:20%;padding:0 12px;}
}



/* ie hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){
}