@charset "UTF-8";
/* CSS Document */
#juppy_contents{
	width: 1600px;
	margin: 0 auto;
	background-image: url(../images/bac_hai.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	height: 100%;
}
.sp{
	display: none;
}
.pc{
	display: block;
}
header{
	position: relative;
	z-index: 1000;
}
section{
	position: relative;
	width: 100%;
}
section p{
	cursor: pointer;
}
.cloud{
	position: absolute;
	z-index: 99999;
	display: block;
}
.cloud1{
	bottom: 75px;
	left: 100px;
}
.cloud2{
	bottom: -35px;
	left: 365px;
}
.cloud3{
	bottom: 130px;
	right: 735px;
}
.cloud4{
	bottom: 0;
	right: 600px;
}
.cloud5{
	top: 35px;
	left: 45px;
}
.cloud6{
	top: 58px;
	left: 485px;
}
.cloud7{
	top: 67px;
	left: 525px;
}
.cloud8{
	top: 25px;
	right: 348px;
}
.cloud9{
	top: 160px;
	left: 223px;
}
.cloud10{
	bottom: -100px;
	right: 757px;
}
.cloud11{
	top: 178px;
	left: 75px;
}
.cloud12{
	top: 20px;
	left: 465px;
}
.cloud13{
	top: 0;
	right: 235px;
}
.cloud14{
	bottom: 460px;
	left: 313px;
}
.cloud15{
	bottom:535px;
	right: 605px;
}
.cloud16{
	top:370px;
	right: 320px;
}
.cloud17{
	bottom:240px;
	left: 380px;
}
.cloud18{
	bottom:50px;
	left: 610px;
}
.cloud19{
	bottom:20px;
	right: 390px;
}
header #icon_con{
	position: absolute;
	right: 220px;
	top: 18px;
}
header #icon_con ul{
	 width: 280px;
}
header #icon_con ul li{
	width: 8%;
	display: inline-block;
	padding-left: 1%;
}
header #icon_con ul .pc{
	width: 50%;
}
header #icon_con ul li img{
	width: 100%;
	height: auto;
}
.contents{
	position:relative;
	display:none;
}
.business_con,.company_con,.profile_con{
	text-align:center;
	padding:10px 0 0;
}
#business{
	background-image: url(../images/hai_1.jpg);
	background-repeat: no-repeat;
	height: 872px;
	background-position: center;
	background-size: cover;
}
#business p{
	position: absolute;
	bottom: 20px;
	right: 465px;
	height: 52px;
	width: 128px;
	background: url(../images/business.png) no-repeat 0 0;
}
#business p:hover{
	background-position: 0 bottom;
}
.txt_business{
	font-size: 21px;
	line-height: 37px;
	text-align: center;
	padding-bottom: 100px;
}
.business_con{
	background: #48add9;
}
.business_con h2{
	text-align: center;
	padding: 45px 0 100px;
}
.business_con h3{
	text-align: center;
	padding-bottom: 55px;
}
.business_con h3 span{
	display: block;
	font-size: 21px;
	font-weight: normal;
	line-height: 1.8em;
	letter-spacing: 0.08em;
}
.ser_wrap{
	width: 990px;
	margin: 0 auto;
}
.service h4{
	background: #fff000;
	height: 33px;
	line-height: 33px;
	font-size: 20px;
	vertical-align:middle;
	border-radius: 20px;
	font-weight: bold;
	margin-bottom: 25px;
}
.service dl {
	margin: 50px 0 30px;
}
.service .main_dt{
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.04em;
}
.service dl dd{
	font-size: 15px;
	line-height: 23px;
	letter-spacing: -0.07em;
}
.service section{
	font-size: 21px;
	line-height: 31px;
	margin-bottom: 90px;
}
.service section span{
	font-size: 15px;
	line-height: 24px;
	display: block;
	padding:10px 0 20px;
}
.bus_leftcon{
	width: 49%;
	float: left;
}
.bus_rightcon{
	width: 49%;
	float: right;
}
.business_con .works{
	width: 100%;
	background: #FFFFFF;
}
.business_con .works h4{
	font-size: 24px;
	line-height: 29px;
	font-weight: bold;
	padding: 80px 0 95px;
}
.business_con .works dt{
	width: 218px;
	font-size: 17px;
	height: 34px;
	line-height: 34px;
	color:#FFFFFF;
	font-weight: bold;
	background: #48add9;
	margin: 0 auto;
	border-radius: 18px;
}
.business_con .works dd{
	font-size: 19px;
	line-height: 31px;
	padding: 25px 0 52px;
}
.buz_a{
	color: #0044CC;
	text-decoration: underline;
	font-size: 15px;
}
.buz_a:hover{
	opacity: 0.5;
}
.eiga_btn{
	font-size: 14px;
	display: block;
	width: 280px;
	border: 2px #4daed7 solid;
	height: 35px;
	line-height: 35px;
	margin: 15px auto 0;
	color: #4daed7;
	font-weight: bold;
	    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    }
.eiga_btn:hover{
	background: #fff000;
}
.coment{
	background: #fff000;
	font-size: 22px;
	line-height: 35px;
	font-weight: bold;
	padding: 70px 0 85px;
}
#company{
	background-image: url(../images/hai_2.jpg);
	background-repeat: no-repeat;
	height: 373px;
	background-position: center;
	background-size: cover;
}
#company p{
	position: absolute;
	bottom: 20px;
	left: 494px;
	height: 49px;
	width: 133px;
	background: url(../images/company.png) no-repeat 0 0;
}
#company  p:hover{
	background-position: 0 bottom;
}
.company_con{
	background:#FFFFFF;
}
.company_con h2{
	text-align: center;
	padding: 45px 0 20px;
}

.com_wrap{
	width: 800px;
	margin: 0 auto;
}
.com_wrap div{
	position: relative;
}
.com_wrap div img{
    position: absolute;
    top: 180px;
    display: block;
    right: 30%;
}
.com_wrap div dl{
	text-align: left;
	margin: 70px 0 100px;
}
.com_wrap div dl dt{
	font-size: 12px;
	line-height: 19px;
	font-weight: bold;
}
.com_wrap div dl .bold{
	font-size: 15px;
}
.com_wrap div dl dd{
	font-size: 14px;
	line-height: 19px;
	padding-bottom: 20px;
}
#profile{
	background-image: url(../images/hai_3.jpg);
	background-repeat: no-repeat;
	height: 457px;
	background-position: center;
	background-size: cover;
}
#profile p{
	position: absolute;
	bottom: 15px;
	right: 366px;
	height: 41px;
	width: 102px;
	background: url(../images/profile.png) no-repeat 0 0;
}
#profile  p:hover{
	background-position: 0 bottom;
}
.profile_con{
	background: #fff000;
}
.profile_con h2{
	text-align: center;
	padding: 45px 0 20px;
}
.pro_wrap{
	width: 960px;
	margin: 0 auto;
}
.pro_wrap div{
	width: 50%;
	font-size: 15px;
	line-height: 25px;
	text-align: left;
	padding: 50px 0 90px;
	position: relative;
}
.pro_wrap div img{
	position: absolute;
	top: 20%;
	left: 30%;
}
.pro_wrap .bus_rightcon img{
	position: relative;
	top: auto;
	left: auto;
}
#contact{
	background-image: url(../images/hai_4.jpg);
	background-repeat: no-repeat;
	height: 1141px;
	background-position: center;
	background-size: cover;
	position: relative;
	width: 1600px;
	margin: 0 auto;
}
#contact p{
	position: absolute;
	top: 208px;
	left: 460px;
	height: 49px;
	width: 122px;
	background: url(../images/contact.png) no-repeat 0 0;
}
#contact p a{
	display: block;
	width: 100%;
	height: 100%;
}
#contact  p:hover{
	background-position: 0 bottom;
}

@media screen and (max-width: 1600px){
#juppy_contents,#contact{
	width: 100%;
	}
	.cloud img{
		width: 90%; 
	}
	header #icon_con{
		right: 3%;
		top: 18px;
	}
	.cloud1{
		bottom: 4.6875vw;
		left: 6.25vw;
	}
	.cloud2{
		bottom: -2.1875vw;
		left: 22.8125vw;
	}
	.cloud3{
		bottom: 8.125vw;
		right: 45.9375vw;
	}
	.cloud4{
		display: none;
	}
	.cloud5{
		top: 2.1875vw;
		left: 2.8125vw;
	}
	.cloud6{
		top: 3.625vw;
		left: 20.3125vw;
	}
	.cloud7{
		top: 0;
		left: 32.8125vw;
	}
	.cloud8{
		top: 3.8625vw;
		right: 21.75vw;
	}
	.cloud9{
		top: 10vw;
		left: 13.9375vw;
	}
	.cloud10{
		bottom: -9.375vw;
		right: 47.3125vw;
	}
	.cloud11{
		top: 11.125vw;
		left: 4.6875vw;
	}
	.cloud12{
		top: -3.25vw;
		left: 29.0625vw;
	}
	.cloud13{
		top: 0;
		right: 14.6875vw;
	}
	.cloud14{
		bottom: 28.75vw;
		left: 19.5625vw;
	}
	.cloud15{
		bottom:33.4375vw;
		right: 25.8125vw;
	}
	.cloud16{
		top:23.125vw;
		right: 20vw;
	}
	.cloud17{
		bottom:15vw;
		left: 23.75vw;
	}
	.cloud18{
		bottom:3.125vw;
		left: 38.125vw;
	}
	.cloud19{
		bottom:1.25vw;
		right: 24.375vw;
	}
	#business{
		height: 54.3vw;
		}
	#business p{
		bottom:2.5vw;
		right: 29.06625vw;
		z-index: 99999;
	}
	#company{
		height: 23.3123vw;
		}
	#company p {
		bottom:2.5vw;
		left: 27.875vw;
		z-index: 99999;	
	}
	#profile{
		height: 28.5624vw;
		}
	#profile p {
		bottom:0.5vw;
		right: 15.875vw;
		z-index: 99999;
	}
	#contact{
		height: 71.3124vw;
		width: 100%;
		}
	#contact p {
		top: 13vw;
		left: 28.75vw;
		z-index: 99999;
	}
}