@charset "UTF-8";

@media screen and (max-width: 1400px){
	.cloud img{
		width: 70%;
	}		

}
@media screen and (max-width: 1000px){
	.ser_wrap,.pro_wrap,.com_wrap {
		width: 90%;
	}
	.cloud{
		display: none;
	}
}
@media screen and (max-width: 768px){
	#juppy_contents{
		background-image: url(../images/sp_bac_hai.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		height: auto;
		position: relative;
		padding-top: 158.051456vh;
	}
	header {
		position: absolute;
		top: 0;
		right: 3%;
		}
		.sp{
			display: block;
		}
		.cloud{
			display: none;
		}

		#business,#company,#profile,#contact{
			background:none;
		}
		#business{
			height: auto;
			margin-bottom: 0.223932vh;
		}
		#business p,#company p,#profile p,#contact p{
			position: relative;
			padding: 7.8603vh 0;
			height: auto;
			width: 100%;
			left: auto;
			bottom: auto;
			right: auto;
			top: auto;
		}
		#business p img,#company p img,#profile p img,#contact p img{
				margin-left: 4.66666vw;
		}
		#company,#profile,#contact{
			height: auto;
			margin-bottom: 0.223932vh;
		}
		#business p{
			background:rgba(0,81,56,0.5);	
		}	#company p{
			background:rgba(132,2,82,0.5);
		}	
		#profile p{
			background:rgba(0,92,160,0.5);
		}
		#contact p{
			background:rgba(145,97,0,0.5);
		}
	.pro_wrap .bus_rightcon img{
		width: 80%;
	}

}
	@media screen and (max-width: 420px){
		.pc{
			display: none;
		}
		header #icon_con ul .pc{
			display: none;
		}
		header #icon_con ul{
			width: 90px;
		}
		header #icon_con ul li{
			width: 25%;
		}
		#business p,#company p,#profile p,#contact p{
			padding: 10.8603vh 0;
		}
		#business p img,#company p img{
			width: 60%;
		}
		#profile p img{
			width: 55%;
		}
		#contact p img{
			width: 70%;
		}
		.business_con h2{
			padding: 5.8125vw 0 7.25vw;
		}	
		.business_con h3{
     		padding-bottom: 4.4375vw;		
		}
		.business_con .works{
			padding-bottom: 4.8vw;
		}
		.business_con h3 img{
			width: 60%;
			height: auto;
		}
		.business_con h3 span{
			font-size: 4.3125vw;
		}
		.txt_business{
			font-size: 3.7vw;
			line-height: 1.8em;
			text-align: center;
			width: 90%;
			margin: 0 auto;
			padding-bottom: 6.2vw;
		}
		.ser_wrap,.flex{
			display: block;
		}
		.com_wrap div{
			width: 100%;
		}
		.bus_leftcon,.bus_rightcon {
			width: 100%;
			float: none;
		}
		.service h4 {
			height: 6.2vw;
			line-height: 6.2vw;
			font-size: 4.2vw;
			margin-bottom: 6.2vw;
		}
		.service section {
			font-size: 3.988vw;
			line-height: 1.8em;
			margin-bottom: 3vw;
		}
		.service dl {
			margin: 6.2vw 0 3.4vw;
		}
		.service .main_dt {
			font-size: 3.9vw;
			line-height: 1.8em;
			padding-bottom: 2.2vw;
		}
		.service section span{
			font-size: 3.4vw;
			line-height: 1.5em;
		}
		.service dl dd {
		font-size: 3.2vw;
		line-height: 1.8em;
		letter-spacing: 0;
	}
		.buz_a{
			font-size: 3.0vw
		}
		.eiga_btn{
			font-size: 3.4vw;
			width: 70%;
			margin: 10px auto 20px;
		}
		.business_con .works h4 {
			font-size: 4.6vw;
			line-height: 1.8em;
			padding: 7.8vw 0;
		}
		.business_con .works dt{
			height: 6.2vw;
			line-height: 6.2vw;
			font-size: 4.2vw;
			margin-bottom: 5.2vw;
		}
		.business_con .works dd {
			font-size: 3.2vw;
			line-height: 1.8em;
			padding: 0 0 3.8vw;
		}
		.coment{
			font-size: 3.6vw;
			line-height: 1.8em;
			padding: 5.5vw 0 ;
		}
		.company_con h2{
			padding:  5.8125vw 0 7.25vw;
		}
		.com_wrap div img{
			position: relative;
			top: auto;
			right: auto;
			height: auto;
			width: 40%;
			margin: 0 auto;
	}
		.com_wrap div dl{
			margin: 5.8vw 0 0;
			text-align: center;
		}
		.profile_con{
			padding-bottom: 7vw;
		}
		.profile_con h2{
			padding:  5.8125vw 0 7.25vw;
		}
		.pro_wrap div{
			width: 100%;
			text-align: center;
			padding: 2vw 0;
		    font-size: 3vw;
			line-height: 2em;
		}
		.pro_wrap div img{
			position: relative;
			top: auto;
			text-align: center;
			width: 60%;
			height: auto;
			margin: 0 auto;
			left: auto;
		}
	}