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

#content {margin-top: 134px;}
div.tit-main{position: absolute;top: 125px;left:0;width:100%;color: #000;font-size: 38px;text-align: center;letter-spacing: -0.040em;z-index: 100;}
div.tit-main span.monts{display:block;padding-bottom: 7px;color:#008eef;font-size: 20px;font-weight: 600;text-transform: uppercase;letter-spacing: 0;}
div.tit-main em{font-weight:500;}

/* content01 */
#content01{position: relative;height:800px;background: #e2e2e2 url(../images/main/bg-visual1.png) center bottom no-repeat;}
#content01 .divider{}
#content01 .divider ul{}
#content01 .divider ul:after{display:block; clear:both; content:"";}
#content01 .divider ul li{display:inline-block;float:left;width:25%;height: 800px;text-align:center;}
#content01 .divider ul li div{position:relative; height:100%; border-left:1px solid rgba(255, 255, 255, 0.4);}
#content01 .divider ul li:first-child div{border-left:0;}
#content01 .divider ul li div:after{content:"";position:absolute; bottom:0; left:0; width:100%; height:0; background:url(../images/main/bg-visual1_on.png) left bottom repeat-x; transition: all 0.8s ease;}
#content01 .divider ul li div:hover:after, #content01 .divider ul li div:focus:after{display:block;  height:100%;}
#content01 .divider ul li div a{display:block;position: absolute;bottom: 0;left: 0;width: 100%;padding: 50px 0 130px;background:url(../images/main/line-visual1.png) top center no-repeat;letter-spacing: -0.040em;z-index: 100;}
#content01 .divider ul li div:hover a:before{display:block; content:""; position: absolute; top:-100px; left:0; width:100%; height:100px;}
#content01 .divider ul li div:hover a, #content01 .divider ul li div:focus a{padding: 50px 0 100px; background:url(../images/main/line-visual1_on.png) top center no-repeat;}
#content01 .divider ul li div a .tit{display:block; position:relative; color: #444;font-size:20px;font-weight:500;}
#content01 .divider ul li div a .text{display:block;padding-top: 10px;color:#666;font-size:15px;font-weight: 300;}
#content01 .divider ul li div:hover a .text, #content01 .divider ul li div:focus a .text{color:#fff;}
#content01 .divider ul li div:hover a .tit, #content01 .divider ul li div:focus a .tit{padding-top:30px; color:#fff;}
#content01 .divider ul li.cont1 div:hover a:before{background:url(../images/main/ico-cont1_1.png) center top no-repeat;}
#content01 .divider ul li.cont2 div:hover a:before{background:url(../images/main/ico-cont1_2.png) center top no-repeat;}
#content01 .divider ul li.cont3 div:hover a:before{background:url(../images/main/ico-cont1_3.png) center top no-repeat;}
#content01 .divider ul li.cont4 div:hover a:before{background:url(../images/main/ico-cont1_4.png) center top no-repeat;}
.bounce{
	display:none;
	position:absolute;
	top: 50px;
	left: 0;
	width: 100%;
	height:18px;
	background: url(../images/sub/ico-arrow2.png) center top no-repeat;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	transform-origin: bottom;
}
#content01 .divider ul li div:hover .bounce {
	display:block;
    animation-name: bounce;
    animation-timing-function: ease;
}
@keyframes bounce {
	0%   { transform: translateY(-5px); }
	50%  { transform: translateY(0); }
	100% { transform: translateY(-5px); }
}

/* content02 */
#content02{position: relative;height:800px;
	background: -moz-linear-gradient(top,  rgba(60,145,254,0.13) 0%, rgba(162,24,126,0.13) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(60,145,254,0.13) 0%,rgba(162,24,126,0.13) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(60,145,254,0.13) 0%,rgba(162,24,126,0.13) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#213c91fe', endColorstr='#21a2187e',GradientType=0 ); /* IE6-9 */
}
#content02:after{display:block;content:"";position:absolute;top:0;left:0;width:100%;height: 100%;background: url(../images/main/bg-visual2.png) center center no-repeat;background-size:cover;/* z-index: -1; */}
#content02 .reviews{position: relative;}
#content02 .reviews h2{color:#154a6f;font-size:33px;text-align: center;}
#content02 .reviews .swiper-wrapper{margin-top: 220px;padding-bottom: 60px;}
#content02 .reviews .swiper-slide{position: relative;margin-top: 35px;}
#content02 .reviews .swiper-slide > div{position: relative;width: 100%;padding: 40px 0;height: 200px;margin: 40px 0;background: #fff;transition: all 0.7s;opacity: 0.7;}
#content02 .reviews .swiper-slide.swiper-slide-next > div{padding: 40px 20px;}
#content02 .reviews .swiper-slide.swiper-slide-prev > div{padding: 40px 20px;}
#content02 .reviews .swiper-slide > div a{}
#content02 .reviews .swiper-slide > div a img{
    display: inline-block;
    width: 110px;
    border-radius: 50%;
}
#content02 .reviews .swiper-slide > div em.tit{
    display: block;
    padding-top: 15px;
    color: #222;
    font-size: 17px;
    letter-spacing: -0.040em;
}
#content02 .reviews .swiper-slide > div span.text{
    display: block;
    padding-top: 8px;
    color: #555;
    font-size: 13px;
    font-weight: 300;
}
#content02 .reviews .swiper-slide > div span.tag{
	display:none;
    position: absolute;
    top: 15px;
    right: -20px;
    padding: 11px 20px;
    border-radius: 50px;
    background: #069aff;
    background: -moz-linear-gradient(left, #069aff 0%, #39c9f8 100%);
    background: -webkit-linear-gradient(left, #069aff 0%,#39c9f8 100%);
    background: linear-gradient(to right, #069aff 0%,#39c9f8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#069aff', endColorstr='#39c9f8',GradientType=1 );
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.020em;
}
#content02 .reviews .swiper-slide-active{width: 530px !important;margin: 35px -51px 0;z-index: 1;}
#content02 .reviews .swiper-slide-active > div{height: 230px;margin: 15px 0;padding: 50px;background: #fff;z-index: 100;opacity: 1;}
#content02 .reviews .swiper-slide-active > div a img{width:130px}
#content02 .reviews .swiper-slide-active > div em.tit{padding-top: 25px;font-size: 20px;}
#content02 .reviews .swiper-slide-active > div span.text{font-size: 15px;}
#content02 .reviews .swiper-slide-active > div span.tag{display:block;}
#content02 .reviews .swiper-control{position:relative;width: 100%;height: 26px;text-align: center;}
#content02 .reviews .swiper-control a.more{
	position:relative;
	margin-left: 130px;
	padding: 10px;
	color: #222;
	font-size: 14px;
	font-weight: 500;
}
#content02 .reviews .swiper-control a.more:after{display:block;content:"";position:absolute;top: 13px;left: -4px;width:1px;height:11px;background: #cdc1cd;}
#content02 .reviews .swiper-pagination{
    top: 1px;
    left: 50%;
    margin-left: -75px;
}
#content02 .reviews .swiper-pagination-bullet{
    width: 10px;
    height: 10px;
    margin: 0 10px;
}
.swiper-pagination-bullet-active{position:relative; background:#35c5f9;}
.swiper-pagination-bullet-active:after{display:block;content:"";position:absolute;top: -12px;left: -12px;width: 30px;height: 30px;border:2px solid #35c5f9;border-radius: 50%;}

/* content03 */
#content03{position: relative;height:900px;background: url(../images/main/bg-visual3_2.png) 0 0 repeat-x;z-index: 100;}
#content03:after{display:block;content:"";position:absolute;top:0;left:0;width:100%;height:698px;background: url(../images/main/bg-visual3.png) center top no-repeat;z-index: -1;}
#content03 .web{padding-top: 280px;}
#content03 .web ul{}
#content03 .web ul:after{display:block; clear:both; content:"";}
#content03 .web ul li{display:inline-block;float:left;width:33.33%;text-align: center;}
#content03 .web ul li div{}
#content03 .web ul li div img{}
#content03 .web ul li div em.tit{display: block;padding-top: 20px;color: #fff;font-size: 20px;letter-spacing: -0.020em;}
#content03 .web ul li div span.text{display: block;padding-top: 10px;color: #adb2c8;font-size: 15px;font-weight: 300;letter-spacing: -0.020em;}
#content03 .web .monitor{width: 100%;height: 350px;margin-top: 70px;background:url(../images/main/ico-cont3_4.png) center top no-repeat;}
#content03 .web .monitor a{display:block;width: 489px;height: 275px;margin: 0 auto;}

/* content04 */
#content04{
	height:360px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f4f4f4+0,f4f4f4+50,e9e9e9+50,e9e9e9+100 */
	background: rgb(244,244,244); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(244,244,244,1) 0%, rgba(244,244,244,1) 50%, rgba(233,233,233,1) 50%, rgba(233,233,233,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(244,244,244,1) 0%,rgba(244,244,244,1) 50%,rgba(233,233,233,1) 50%,rgba(233,233,233,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(244,244,244,1) 0%,rgba(244,244,244,1) 50%,rgba(233,233,233,1) 50%,rgba(233,233,233,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e9e9e9',GradientType=1 ); /* IE6-9 */
}
#content04 .call{
    position: absolute;
    top: 0;
    left: 0;
    width: 360px;
    height: 360px;
    background: #f4f4f4;
    text-align: center;
    display: -webkit-box; 
	display: -ms-flexbox; 
	display: flex;
    justify-content:center;
    align-items:center;
}
#content04 .call p.tit{
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.020em;
}
#content04 .call div.number{padding: 20px 0;line-height: 1;}
#content04 .call div.number a{
    display: block;
    color: #333;
    font-size: 38px;
    font-weight: 300;
}
#content04 .call p.address{
    color: #555;
    font-size: 15px;
    letter-spacing: -0.020em;
    line-height: 1.4;
}
#content04 .ad{
    position: relative;
    width: calc(100% - 360px);
    height: 360px;
    margin-left: 360px;
    background: #e9e9e9 url(../images/main/bg-visual4.png) right bottom no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: left;
    align-items: center;
}
#content04 .ad > div{padding-left: 70px;}
#content04 .ad p.tit{
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.020em;
}
#content04 .ad p.text{
    padding: 20px 0 40px;
    color: #333;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: -0.020em;
    line-height: 1.5;
}
#content04 .ad div.more{}
#content04 .ad div.more a{
    display: inline-block;
    padding: 6px 30px;
    border: 1px solid #c3c3c3;
    border-radius: 25px;
    color: #333;
    font-size: 15px;
    font-weight: 300;
}
#content04 .ad div.more a:hover, #content04 .ad div.more a:focus{border: 1px solid #545d6f;transition: all 0.5s ease;background: #545d6f;color: #fff;}

@media (min-width: 1024px) and (max-width: 1279px) {
	#content02 .reviews{width: 924px;}	
	#content02 .reviews .swiper-slide-active{margin: 35px -111px 0;}
}

@media (max-width: 1023px) {
	#content {margin-top: 50px;}
	div.tit-main{position: relative;top: 0;font-size: 19px;}
	div.tit-main span.monts{padding-bottom: 3px;font-size: 17px;}
	/* content01 */
	#content01{height: auto;padding: 35px 0;background-size: cover;background-attachment: fixed;}
    #content01 .divider{padding: 0;}
	#content01 .divider ul li{display: block;float: none;width: 100%;height: auto;padding: 25px 0 0;}
    #content01 .divider ul li div{height: auto;}
    #content01 .divider ul li div:after{background:transparent;}
	#content01 .divider ul li div a{position: relative;padding: 83px 0 0;background: transparent;}
	#content01 .divider ul li.cont1 div a{background: url(../images/main/m-ico-cont1_1.png) center top no-repeat;}
	#content01 .divider ul li.cont2 div a{background: url(../images/main/m-ico-cont1_2.png) center top no-repeat;}
	#content01 .divider ul li.cont3 div a{background: url(../images/main/m-ico-cont1_3.png) center top no-repeat;}
	#content01 .divider ul li.cont4 div a{background: url(../images/main/m-ico-cont1_4.png) center top no-repeat;}
	#content01 .divider ul li div:hover a, #content01 .divider ul li div:focus a{padding: 83px 0 0;}
	#content01 .divider ul li div:hover a:before{background:transparent !important;}
	#content01 .divider ul li div:hover a .tit, #content01 .divider ul li div:focus a .tit{padding-top:0;color: #444;}
	#content01 .divider ul li div a .tit{font-size:17px;}
	#content01 .divider ul li div a .text{margin-top:5px;padding-top: 0px;/* background: rgba(226, 226, 226, 0.2); */font-size: 13px;}
	#content01 .divider ul li div:hover a .text, #content01 .divider ul li div:focus a .text{color: #666;}
	#content01 .divider ul li div:hover .bounce{display:none;}
	/* content02 */
	#content02{height: auto;padding: 35px 0;}
	#content02 .reviews .swiper-wrapper{padding-bottom: 0;margin-top:0;}
	#content02 .reviews .swiper-slide{margin-top:0;}
	#content02 .reviews .swiper-slide-active{width: 100% !important;height: auto;margin: 15px auto 0;}
	#content02 .reviews .swiper-slide > div{height: auto;margin: 15px 0 25px;padding: 35px 15px 15px;}
	#content02 .reviews .swiper-slide > div span.tag{right: auto;left: 50%;top: -18px;width: 130px;margin-left: -65px;padding: 11px 0;}
	#content02 .reviews .swiper-slide-active > div a img{width:100px;}
	#content02 .reviews .swiper-slide-active > div em.tit{padding-top: 10px;font-size: 17px;}
	#content02 .reviews .swiper-slide-active > div span.text{font-size: 13px;}
	/* content03 */
	#content03{height: auto;padding: 35px 0 0;}
	#content03 .web{padding-top: 0;}
	#content03 .web ul li{display:block;float:none;width:100%;margin-top: 25px;}
	#content03 .web ul li div em.tit{padding-top:5px; font-size:17px;}
	#content03 .web ul li div span.text{padding-top: 5px;font-size:13px;}
	#content03 .web .monitor{width: 320px;height: 220px;margin: 25px auto 0;background-size: cover;}
	#content03 .web .monitor a{width:100%;height:100%;}
	/* content04 */
	#content04{height: auto;background: transparent;}
	#content04 .container{margin: 0;}
	#content04 .call{position: relative;width: 100%;height: auto;padding: 25px 0;}
	#content04 .call p.tit{font-size: 16px;}
	#content04 .call div.number{padding: 10px 0;}
	#content04 .call div.number a{font-size: 30px;}
	#content04 .call p.address{font-size: 13px;}
	#content04 .ad{width: auto;height: auto;margin: 0;padding: 25px 20px;background-size: 220px;}
	#content04 .ad > div{width: 100%;padding: 0;}
	#content04 .ad p.tit{text-align: center;}
	#content04 .ad p.text{padding: 10px 0;background: rgba(233, 233, 233, 0.5);font-size: 13px;text-align: center;}
	#content04 .ad div.more{text-align: center;}
	#content04 .ad div.more a{padding: 5px 15px;border: 1px solid #545d6f;background: #545d6f;color: #fff;font-size: 13px;}
}