@charset "UTF-8";
/* CSS Document */
@media (max-width :640px){
	.cont h1{
		max-width:90%;
		border-bottom:2px solid #68b7d9;
		padding-bottom:2%;
		font-size:5.93vw;
		line-height:8vw;
		margin:0 auto;
	}
	.br:before {
		content:"\A";
		white-space:pre;
	}
	.main_img_inner{
		font-size:4.06vw;
		line-height:4.5vw;
	}
	.main_img_inner_txt{
		max-width:95%;
		margin:0 auto;
		color:#3e3a39;
	}
	.main_img_inner .sub_txt{
		display:none;
	}
	.main_img_inner .sub:before{
		content:"【";
	}
	.main_img_inner .sub{
		color:#0085be;
		text-align: left;
		/*font-size:0.9em;*/
		margin-top:2%;
	}
	.main_img_inner .sub:after{
		content:"】";
	}
	.main_img_inner .name{
		/*font-size:0.9em;*/
		border-bottom: #cce6f2 solid 1px;
		padding-bottom:4%;
		width:90%;
		text-align:left;
		margin-top:1%;
		margin-left:1%;
	}
	.main_img_inner .product_name .sub{
		margin-top:5%;
	}
	.main_img_inner .volume .sub{
		margin-top:2%;
	}
	.main_img_inner .manu{
		display: none;
	}
	.main_img_inner .anno{
		font-size:0.8em;
		margin-top:2%;
		margin-bottom:3%;
		text-align:center;
	}
	
	
}
@media (min-width :641px){
	.cont{
		width:989px;
		margin:0 auto;
	}
	.cont h1{
		width:520px;
		border-bottom:2px solid #68b7d9;
		font-size:24px;
		margin:0 auto;
	}
	.main_img_outer{
		height:540px;
		background:url('../img/hydrogelpack_image01_bg.jpg') center;
	}
	.main_img_inner{
		width:1200px;
		margin:0 auto;
		position:relative;
	}
	.main_img_inner .sub_txt{
		position:absolute;
		width:520px;
		top:95px;
		left:572px;
		text-align:left;
		font-size:14px;
	}
	.main_img_inner .sub{
		position:absolute;
		color:#0085be;
		font-size:13px;
	}
	.main_img_inner .name{
		position:absolute;
		font-size:13px;
	}
	.main_img_inner .product_name .sub{
		top:280px;
		left:572px;
		
	}
	.main_img_inner .product_name .name{
		top:280px;
		left:645px;
	}
	.main_img_inner .volume .sub{
		top:315px;
		left:572px;
	}
	.main_img_inner .volume .name{
		top:315px;
		left:645px;
	}
	.main_img_inner .manu .sub{
		top:350px;
		left:572px;
	}
	.main_img_inner .manu .name{
		top:350px;
		left:645px;
	}
	.main_img_inner .use .sub{
		top:407px;
		left:572px;
	}
	.main_img_inner .use .name{
		width:450px;
		top:388px;
		left:645px;
	}
	.main_img_inner .anno{
		position:absolute;
		top:470px;
		left:572px;
		font-size:13px;
	}
}




img{
	margin: 0;
	padding: 0;
	/* 画像下の空白除去 */
	vertical-align: bottom;
}

/* レスポンシブ表示用  */
body{
	text-align:center;
	margin:0;
	padding:0;
}
iframe[name="google_conversion_frame"] { position:absolute; }

@media screen and (min-width:641px){
	
    .spimg{ display:none; }
	.pcimg{ display:block; }
	.outer{
		position:relative;
		width:1200px;
		margin:0 auto;
	}
	.main_1{
		background-image:url(../img/hydrogelpack/main_bg.jpg);
		background-repeat:no-repeat;
		background-position:center
	}
	.main_1_ac{
		background-image:url(../img/hydrogelpack/main_ac_bg.jpg);
		background-repeat:no-repeat;
		background-position:center
	}
	.main_2{
		background-image:url(../img/hydrogelpack/nayami_bg.jpg);
		background-repeat:no-repeat;
		background-position:center
	}
	.main_3{
		background-image:url(../img/hydrogelpack/resolve_bg.jpg);
		background-position:center;
		background-repeat:no-repeat;
	}
	.main_4{
		background-image:url(../img/hydrogelpack/enquete_bg.jpg);
		background-position:center;
		background-repeat:no-repeat;
	}
	.main_5_outer{
		background-image:url(../img/hydrogelpack/voice_bg.jpg);
		background-position:top;
		background-repeat:no-repeat;
	}
	.main_5_inner .inner_title{
		color:#007fb7;
		font-size:28px;
		letter-spacing: 4px;
	}
	.main_5_inner{
		text-align:left;
	}
	.main_5_inner .name{
		font-size: 25px;
	}
	.main_5_inner p{
		font-size:18px;
		line-height: 35px;
		margin-left:20px;
	}
	.main_5_inner .inner_1{
		position:absolute;
		top:330px;
		left:110px;
	}
	.main_5_inner .inner_2{
		position:absolute;
		top:620px;
		left:500px;
	}
	.main_5_inner .inner_3{
		position:absolute;
		top:930px;
		left:110px;
	
	}
	.main_5_inner .inner_4{
		position:absolute;
		top:1220px;
		left:370px;
	}
	
	.main_6{
		/* background-image:url(../img/hydrogelpack/title_bg.jpg); */
		background-color: #0085be;
		background-position:center;
		background-repeat:no-repeat;
	}
	.main_7_outer{
		background-image:url(../img/hydrogelpack/01_bg.jpg);
		background-position:center;
		background-repeat:no-repeat;
		text-align: left;
	}
	.main_7_outer .inner_1{
		width:520px;
		position:absolute;
		top:225px;
		left:120px;
		font-size:18px;
		line-height:33px;
		letter-spacing: -1px;
	
	}
	.main_8_outer{
		background-image:url(../img/hydrogelpack/02_bg.jpg); 
		background-position:center;
		background-repeat:no-repeat;
		text-align:left;
	}
	.main_8_outer .inner_1{
		width:520px;
		position:absolute;
		top:225px;
		left:120px;
		font-size:18px;
		line-height:33px;
		letter-spacing: -1px;
	
	}
	
	.main_9_outer{
		background-image:url(../img/hydrogelpack/03_bg.jpg);
		background-position:center;
		background-repeat:no-repeat;
		text-align: left;
	}
	.main_9_outer .inner_1{
		position:absolute;
		color:#007fb7;
		font-size:28px;
		top:440px;
		left:250px;
	}
	.main_9_outer .inner_2{
		width:360px;
		font-size: 18px;
		position:absolute;
		top:505px;
		left:200px;
		line-height: 33px;
	}
	.main_9_outer .inner_3{
		position:absolute;
		color:#007fb7;
		font-size:28px;
		top:440px;
		left:645px;
	}
	.main_9_outer .inner_4{
		width:360px;
		font-size: 18px;
		position:absolute;
		top:505px;
		left:642px;
		line-height: 33px;
	}
	.main_10_outer{
		background-image:url(../img/hydrogelpack/04_bg.jpg);
		background-position:center;
		background-repeat:no-repeat;
		text-align: left;
	}
	.main_10_outer .inner_1{
		position:absolute;
		font-size:18px;
		top:505px;
		left:120px;
		letter-spacing: 1px;
		line-height: 33px;
	}
	.main_10_outer .inner_1 .color{
		color:#007fb7;
		font-size:18px;
		font-weight:bold;
		letter-spacing: 1px;
		line-height: 33px;
	}
	.main_10_outer .inner_2{
		position:absolute;
		font-size:18px;
		top:975px;
		left:120px;
		letter-spacing: 0.5px;
		line-height: 33px;
	}
	.hinsitsu_outer{
		background-image:url(../img/hydrogelpack/hinsitsu_bg.jpg);
		background-repeat:no-repeat;
		background-position:center;
		height:770px;
	}
	.hinsitsu_outer .inner_1{
		position:absolute;
		font-size:18px;
		text-align:center;
		top:120px;
		left:290px;
		letter-spacing: 0.5px;
		line-height: 33px;
	}
	.main_11_outer{
		padding-bottom:20px;
		background-color:#fff;
	}
	.main_11_outer .inner_1{
		position:absolute;
		width:225px;
		top:425px;
		left:120px;
		font-size:18px;
		text-align: left;
	}
	.main_11_outer .inner_2{
		position:absolute;
		width:225px;
		top:425px;
		left:370px;
		font-size:18px;
		text-align: left;
	}
	.main_11_outer .inner_3{
		position:absolute;
		width:225px;
		top:425px;
		left:620px;
		font-size:18px;
		text-align: left;
	}
	.main_11_outer .inner_4{
		position:absolute;
		width:225px;
		top:425px;
		left:870px;
		font-size:18px;
		text-align: left;
	}
	.main_11_outer .anno{
		position:absolute;
		width:930px;
		top:565px;
		left:135px;
		text-align: left;
	}
	.main_12_outer{
		background-color:#fff;
	}
	.main_12_outer img{
		margin:0 auto;
	}
	.main_12_outer .question{
		font-size:26px;
		color:#007fb7;
		text-align: left;
		font-weight:bold;
		width:840px;
	}
	.main_12_outer .answer{
		text-align:left;
		font-size:18px;
		width:840px;
	}
	.main_12_outer .inner_1{
		position:absolute;
		top:195px;
		left:185px;
	}
	.main_12_outer .inner_2{
		position:absolute;
		top:255px;
		left:185px;
		line-height:30px; 
	}
	.main_12_outer .inner_3{
		position:absolute;
		top:380px;
		left:185px;
	}
	.main_12_outer .inner_4{
		position:absolute;
		top:480px;
		left:185px;
		line-height:30px; 
	}
	.main_12_outer .inner_5{
		position:absolute;
		top:620px;
		left:185px;
	}
	.main_12_outer .inner_6{
		position:absolute;
		top:680px;
		left:185px;
		line-height:30px; 
	}
	.main_12_outer .inner_7{
		position:absolute;
		top:770px;
		left:185px; 
	}
	.main_12_outer .inner_8{
		position:absolute;
		top:830px;
		left:185px;
		line-height:30px; 
	}
	.main_12_outer .inner_9{
		position:absolute;
		top:920px;
		left:185px;
	}
	.main_12_outer .inner_10{
		position:absolute;
		top:980px;
		left:185px;
		line-height:30px; 
	}
	.br-pc{
		display: none;
	}
	.kounyu_outer{
		position:relative;
		width:100%;
	}


	.kounyu_inner_03 a{
    	position:absolute;
    	width:85.8%;
    	top:42%;
    	left:7%;
	}
	.kounyu_inner_04 a{
    	position:absolute;
    	width:85.8%;
    	top:85%;
    	left:7%;
	}

	.lp_footer{
    	position:fixed;
    	bottom:0%;
    	right:0%;
	}
	.pc_footer{
		background-color:#ffffff;	
	}
	.gel_voice{
		background-image:url(../img/hydrogelpack/hgp_voice_pc_bg.jpg);
		background-repeat:no-repeat;
		background-position:center;
	}
	.voice_outer{
		position:relative;
		width:1200px;
		margin:0 auto;
	}
	.voice_inner{
		position:absolute;
		top:155px;
		left:145px;
		text-align:left;
		width:915px;
		height:250px;
		overflow-y:scroll;
		font-size:14px;
	}
	.voice_inner table{
		width:100%;
	}
	.voice_inner table td{
		padding-top:10px;
		padding-bottom:10px;
		padding-left:10px;
	}
	.voice_inner table td.color{
		background-color:#fdf5e5;
	}
}
	

@media screen and (max-width:640px){
    .spimg{ display:block; }
	.pcimg{ display:none; }
	body{
		margin:0;
		padding:0;
		text-align:center
	}
	img{
    	width:100%;
	}
	.kounyu_outer{
		position:relative;
	}


	.kounyu_inner_03 a{
    	position:absolute;
	    width:85.8%;
    	top:42%;
    	left:7%;
	}
	.kounyu_inner_04 a{
    	position:absolute;
    	width:85.8%;
    	top:85%;
    	left:7%;
	}

	.lp_footer{
    	position:fixed;
    	bottom:0%;
    	right:0%;
	}
	.voice_outer{
		position:relative;
		width:100%;
		margin:0 auto;
	}
	.voice_inner{
		position:absolute;
		top:25%;
		left:7%;
		text-align:left;
		width:85%;
		height:62%;
		overflow-y:scroll;
		font-size:1.1em;
	}
	.voice_inner::-webkit-scrollbar{
		background:#ccc;
		width:10px;
	}
	.voice_inner::-webkit-scrollbar-thumb{
		background:#aaa;
	}
	.voice_inner table{
		width:100%;
	}
	table td{
		padding-top:5px;
		padding-bottom:5px;
		padding-left:10px;
		padding-right:5px;
	}
	table td.color{
		background-color:#fdf5e5;
	}
	.outer{
		position:relative
	}
	.br-sp{
		display: none;		
		}
	.main_5_inner .inner_title{
		display:block;
		margin-bottom:4%;
		font-size:5.9vw;
		color:#007fb7;
		line-height:7.0vw;
		font-weight: bold;
		letter-spacing: 0.8vw;
		text-align:left;
	}
	.main_5_inner p{
		font-size:4.2vw;
		line-height:6vw;
		text-align: left;
	}
	.main_5_inner .name{
		display: block;
		text-align: right;
		padding-right:2%;
	}
	.main_5_inner .inner_1{
		position:absolute;
		width:88%;
		top:9.5%;
		left:7%;
	}
	
	.main_5_inner .inner_2{
		position:absolute;
		width:88%;
		top:29.5%;
		left:7%;
	}
	.main_5_inner .inner_3{
		position:absolute;
		width:88%;
		top:48%;
		left:7%;
	}
	.main_5_inner .inner_3 .inner_title{
		letter-spacing: -0.3vw;
	}
	.main_5_inner .inner_4{
		position:absolute;
		width:88%;
		top:64%;
		left:7%;
	}
	.main_7_outer .inner_1{
		position:absolute;
		text-align: left;
		font-size:4.4vw;
		line-height: 7vw;
		top:46.5%;
		left:3.5%;
		width:95%;
	}
	.main_8_outer .inner_1{
		position:absolute;
		text-align: left;
		font-size:4.4vw;
		line-height: 7vw;
		top:58%;
		left:3.5%;
		width:95%;
	}
	.main_8_outer .anno{
		font-size:3.0vw;
	}
	.main_9_outer h5{
		display:none;
	}
	.main_9_outer .inner_2{
		position:absolute;
		text-align: left;
		font-size:4.4vw;
		line-height: 7vw;
		display:block;
		width:95%;
		top:40.5%;
		left:4%;
	}
	.main_9_outer .inner_4{
		position:absolute;
		text-align: left;
		font-size:4.4vw;
		line-height: 7vw;
		display:block;
		width:95%;
		top:83%;
		left:4%;
	}
	.main_10_outer .inner_1{
		position:absolute;
		text-align: left;
		font-size:4.4vw;
		letter-spacing: -0.09vw;
		line-height: 7vw;
		display:block;
		width:94%;
		top:30%;
		left:4%;
	}
	.main_10_outer .color{
		color:#007fb7;
	}
	.main_10_outer .inner_2{
		position:absolute;
		text-align: left;
		font-size:4.4vw;
		letter-spacing: -0.09vw;
		line-height: 7vw;
		display:block;
		width:94%;
		top:71%;
		left:4%;
	}
	.hinsitsu_outer .inner_1{
		position:absolute;
		text-align: left;
		font-size:4.4vw;
		line-height: 7vw;
		display:block;
		width:91%;
		top:9.5%;
		left:6%;
	}
	.main_11_outer .inner_1{
		position:absolute;
		text-align: left;
		font-size:4.4vw;
		line-height: 7vw;
		display:block;
		width:95%;
		top:18%;
		left:4%;
	}
	.main_11_outer .inner_2{
		position:absolute;
		text-align: left;
		font-size:4.4vw;
		line-height: 7vw;
		display:block;
		width:95%;
		top:40%;
		left:4%;
	}
	.main_11_outer .inner_3{
		position:absolute;
		text-align: left;
		font-size:4.4vw;
		line-height: 7vw;
		display:block;
		width:95%;
		top:62.5%;
		left:4%;
	}
	.main_11_outer .inner_4{
		position:absolute;
		text-align: left;
		font-size:4.4vw;
		line-height: 7vw;
		display:block;
		width:95%;
		top:83.3%;
		left:4%;
	}
	.main_11_outer .anno{
		position:absolute;
		display: block;
		text-align: left;
		display:block;
		width:88%;
		font-size:3.4vw;
		letter-spacing: 0.2vw;
		line-height: 5.7vw;
		top:87.5%;
		left:7%;
	}
	.main_12_outer .question{
		position: absolute;
		font-size:5.9vw;
		color: #007fb7;
		font-weight: bold;
		text-align: left;
		letter-spacing: -0.1vw;
		margin-bottom:1.5%;
		line-height: 9vw;
		display:block;
		width:95%;
	}
	.main_12_outer .answer{
		position: absolute;
		font-size:4.4vw;
		text-align: left;
		line-height: 7vw;
		display:block;
		width:94%;
	}
	.main_12_outer .inner_1{
		top:7%;
		left:4%;
	}
	.main_12_outer .inner_2{
		top:10.3%;
		left:4%;
	}
	.main_12_outer .inner_3{
		top:25%;
		left:4%;
	}
	.main_12_outer .inner_4{
		top:30.8%;
		left:4%;
	}
	.main_12_outer .inner_5{
		top:50%;
		left:4%;
	}
	.main_12_outer .inner_6{
		top:55.7%;
		left:4%;
	}
	.main_12_outer .inner_7{
		top:67%;
		left:4%;
	}
	.main_12_outer .inner_8{
		top:72.7%;
		left:4%;
	}
	.main_12_outer .inner_9{
		top:84.2%;
		left:4%;
	}
	.main_12_outer .inner_10{
		top:87.4%;
		left:4%;
	}

}