@charset "utf-8";
@import url("common.css");

.visual_wrap{position: relative;overflow: hidden; width:100%; /*background:url('/m/img/backaground_pattern.gif');*/}


/*visual*/
#visual{position:relative; width:100%; box-sizing:border-box; overflow:hidden; margin:0 auto}

#visual .text{padding:0 3%; box-sizing:border-box; width:100%; display:block; position: absolute;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); text-align:center;}
#visual .txt_ef{opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: 0.4s;transition-duration: 0.4s;-webkit-transition-timing-function: linear;
transition-timing-function: linear;-webkit-transition-delay: 0s;transition-delay: 0s;transform: translate3d(0px, 30px, 0);-webkit-transform: translate3d(0px, 30px, 0);

}
#visual .slick-slide.action .txt_ef{opacity: 1;transform: translate3d(0px, 0px, 0);-webkit-transform: translate3d(0px, 0px, 0);  }


/* Slider */
#visual .slick-slider .slick-track, #visual .slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
#visual .slick-slide{display: none; float: left; min-height: 1px;}
#visual .slick-initialized .slick-slide{display: block;}

/* Dots */
#visual .slick-dotted.slick-slider{}
#visual .slick-dots{position: absolute;display: block;list-style: none;text-align: center; width:100%; padding:0; margin:0}
#visual .slick-dots li{position: relative;display: inline-block; width:12px;height:12px;margin:0 3px;padding: 0;cursor: pointer;}
#visual .slick-dots li button{background:none; font-size: 0;line-height: 0;display: block;width:12px;height:12px; padding:0;cursor: pointer;color: transparent;border: 0;outline: none;}
#visual .slick-dots li button:hover, #visual .slick-dots li button:focus{ outline: none;}
#visual .slick-dots li button:hover:before, #visual .slick-dots li button:focus:before{ opacity: 1;}
#visual .slick-dots li button:before{border-radius: 12px; background:rgba(255,255,255,0.5); position: absolute;top: 0;left: 0; width:12px;height:12px;content: '';text-align: center;color: black;}
#visual .slick-dots li.slick-active button:before{background:none; border:3px solid #fff; box-sizing:border-box;}

/* Arrows */
#visual .slick-prev, #visual .slick-next{ position: absolute; top: 50%; -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);
    transform: translateY(-50%);margin:0 0 0; display: block;width:27px;height:55px; padding: 0; cursor: pointer;    color: transparent;    border: none;    outline: none;    background: transparent; z-index:1}
	#visual .slick-prev{left:50%; margin-left: -800px;background:url('/m/img/v_arrow_l.png') center no-repeat;}
	#visual .slick-next{right:50%; margin-right: -800px; background:url('/m/img/v_arrow_r.png') center no-repeat;}
#visual .slick-slider{position: relative;display: block;box-sizing: border-box;
	-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;
		touch-action: pan-y;-webkit-tap-highlight-color: transparent;	}
#visual .slick-list{position: relative;display: block;overflow: hidden;}


/* section bg */
.cover01{background:url('/m/img/visual_01.jpg') center no-repeat;}
.cover02{background:url('/m/img/visual_02.jpg') center no-repeat;}
.cover03{background:url('/m/img/visual_03.jpg') center no-repeat;}
.cover04{background:url('/m/img/visual_04.jpg') center no-repeat;}
.cover05{background:url('/m/img/visual_05.jpg') center no-repeat;}


.cover02 .text{top: 30% !important; }


/* main */
.sub_imgbox{box-sizing:border-box}
.section{margin-bottom:2px;width:100%;height:400px; position:relative;overflow:hidden;background-position:center;}
.sub_imgbox .slick-list, .sub_imgbox .slick-track {}
.sub_imgbox .slick-dots{bottom:30px; }

.sub_imgbox h5{font-family:'PT Sans', 'NGEN', sans-serif; font-weight:700; line-height:130%; font-size:25px; color:#fff; text-shadow: 4px 5px 10px rgba(0,0,0,0.3);}
.sub_imgbox h6{text-shadow: 3px 3px 10px rgba(0,0,0,0.5);  letter-spacing:-1pt;margin-top:15px;line-height:30px;font-weight:400; font-size:13px; color:#eee;}
.sub_imgbox h6 span{color:#f8c351;font-family:'NGEN';  }

.visual_line {margin-top: 15px; width: 30px; border: 1px solid #fff; margin-left: auto; margin-right: auto;}






.contents_wrap{width:100% ; background:#f4f3f4 url('/m/img/contents_background.jpg')no-repeat center center/cover; padding:40px 3%; box-sizing:border-box} 
 
.contents_in {position:relative;width:100%; margin:0 auto; overflow:hidden;}
.contents_in li {width:49.5%; margin:0 1% 15px 0; float:left; text-align:center; letter-spacing:-1px; position:relative;}
.contents_in li:nth-child(2n) {margin-right:0}

.contents_in li a{display:table; width:100%; box-sizing:border-box; position: relative;overflow: hidden; transition: all 0.3s ease; -o-transition: all 0.3s ease;  -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
.contents_in li .icon{width:70px; height:73px; margin:0 auto; display:table-cell; vertical-align:middle; background-size:70px; background-position:center; background-repeat:no-repeat}
.contents_in li:nth-child(1) .icon{background-image:url('/m/img/contents_icon01.png')}
.contents_in li:nth-child(2) .icon{background-image:url('/m/img/contents_icon02.png')}
.contents_in li:nth-child(3) .icon{background-image:url('/m/img/contents_icon03.png')}
.contents_in li:nth-child(4) .icon{background-image:url('/m/img/contents_icon04.png')}
.contents_in li:nth-child(2) ~ li {margin-bottom:0}
.contents_in li .tit{font-family: 'NGEN';  color:#424242;font-size:13px;  line-height:100%; letter-spacing:-0.3pt; text-align:left; display:table-cell; vertical-align:middle; width:calc(100% - 70px); padding-left:15px; box-sizing:border-box}







/*******************************************************************************
	@media 421~480px
*******************************************************************************/
@media all and (max-width:480px){

.sub_imgbox h5 br {display:none;}


}


/*******************************************************************************
	@media 321~420px
*******************************************************************************/

@media all and (max-width:420px){



}


/*******************************************************************************
	@media ~320px
*******************************************************************************/
@media all and (max-width:320px){

.section {height:320px}
.cover02 .text{top: 50% !important; }
.contents_in li .icon {background-size:50px; width:50px; height:53px}


}