/* CSS Document */
@import url('common1.css');
/* 共通 */


h3{
	float:none;
	clear:both;
	overflow:hidden;
	width:auto;
}
#topimage{
	position:relative;
}
.point{
	border:5px solid #cddde7;
}
.point .p_content{
	background-repeat:no-repeat;
	background-position:left 0.5em;
}
#section1{
	overflow:hidden;
	clear:both;
}
#section1 .text2{
	border-top:1px dotted #0168b3;
}
/*
#section1 li{
	background:#ffffff;
}
*/
#section1 .textbox span{
	display:block;
	color:#0168b3;
}
#section3{
	overflow:hidden;
	clear:both;
}
#section3 ul{
	margin-bottom:10px;
	overflow:hidden;
}
#section2 .caption,#section3 .caption{
	color:#0168b3;
	font-weight:bold;
}
#section3 ul li{
	border-bottom:1px dotted #a3c9e4;
}
#section4{
	overflow:hidden;
	clear:both;
}
#section4 dl{
	overflow:hidden;
}
#section4 dl dd{
	border-bottom:1px dotted #c2c3c4;
}
#section4 .textbox{
	border-width:3px;
	border-style:solid;
	border-color:#cddce9;
}
#section4 dd:last-child{
	border:0;
}
#section5 .textbox{
	border-width:3px;
	border-style:solid;
	border-color:#cddce9;
	background:#edf4f9;
}
.attention{
	font-size:0.85em;
	padding-left:1em;
	text-indent:-1em;
}
/*modal
--------------------------------------------------*/
.mov01{
		text-align: center;
		margin:0 auto 3%;
}

/*PC
----------------------------------------------------*/
@media screen and (min-width:1081px),print{
	#topimage{
		background:url(../image/top_image_pc.jpg) no-repeat;/**/
		height:180px;
		margin-bottom:50px;
	}
	#topimage{
		padding:170px 0 0 153px;
		width: calc(1080px - 260px);
	}
	#topimage .btn{
		/*float:left;*/
		margin:0 20px;
	}
	#topimage .t_content{display: flex; }
	#topimage .btn1{padding-top: 20px;	}
	#topimage .btn2{padding-top: 25px;	}
	#topimage .btn3 { padding-top: 14px; }

	.section{
		margin-bottom:45px;
	}
	.point{
		padding:15px 10px 10px;
	}
	.p_content{
		padding-left:10px;
	}
	#item_lineup{
		margin-bottom:45px;
	}
	/*Section1
	------------------------------------*/
	#section1 h3{
		margin-bottom:26px;
	}
	#section1 ul{
		margin-left:-17px;
	}
	#section1 li{
		padding-left:17px;
	}
	#section1 .l_caption{
		margin-bottom:12px;
	}
	#section1 .textbox{
		padding:0 10px;
		margin-bottom:35px;
	}
	#section1 .text2{
		margin-top:10px;
		padding-top:10px;
	}
	#section1 .caption{
		height:42px;
		display:table-cell;
		padding-bottom:12px;
		vertical-align:middle;
	}
	#section2{
		min-height:576px;
		background:url(../image/s2_topimage_pc.jpg) no-repeat;/**/
		overflow:hidden;
		clear:both;
		padding-top:26px;
	}
	#section2 .s_content{
		width:467px;
		float:right;
	}
	#section2 h3{
		margin-bottom:30px;
	}
	#section2 dt{
		margin-bottom:5px;
		height:40px;
	}
	#section2 .caption.c1{
		background:url(../image/s2_caption1_1_pc.gif) left top no-repeat;
	}
	#section2 .caption.c2{
		background:url(../image/s2_caption1_2_pc.gif) left top no-repeat;
	}
	#section2 dd{
		margin-bottom:15px;
		padding-bottom:15px;
		border-bottom:1px dotted #a3c9e4;
	}
	#section2 .point{
		margin-bottom:15px;
	}
	#section2 li .caption{
		margin-bottom:5px;
	}
	#section2 .text{
		margin-bottom:17px;
	}
	#section3 >.s_content{
		min-height:273px;
		background:url(../image/s3_topimage_pc.jpg) no-repeat;/**/
		overflow:hidden;
		clear:both;
		padding:254px 510px 0 0;
	}
	#section3 ul{
		margin-bottom:10px;
	}
	#section3 ul li{
		padding-bottom:10px;
		margin-bottom:10px;
	}
	#section4 .s_topimage{
		background:url(../image/s4_topimage_pc.jpg) no-repeat;/**/
		height:475px;
	}
	#section4 dl{
		float:right;
		margin:-250px 0 0;
		width:420px;
	}
	#section4 dl dt{
		margin-bottom:10px;
	}
	#section4 dl dd{
		padding-bottom:15px;
		margin-bottom:15px;
	}
	#section4 .textbox{
		width:387px;
		float:left;
		padding:22px 27px;
		margin-left:60px;
	}
	
	.point .p_content{
		background-image:url(../image/point_pc.gif);/**/
	}
	#section1 ul{
		display:table;
		table-layout:fixed;
		width:100%;
	}
	#section1 li{
		display:table-cell;
	}
	#item_lineup{
		background:url(../image/border21.png) repeat-x 0 bottom;/**/
	}

	#section1 ul{
		padding-bottom:10px;
		background:url(../image/border6.png) repeat-x left bottom;/**/
	}
	#section3,#section4{
		padding-top:45px;
		background:url(../image/border6.png) repeat-x left top;/**/
	}

	#section5{
		background:url(../image/s5_topimagebg_pc.jpg) no-repeat right top;/**/
		position:relative;
		overflow:hidden;
	}
	#section5 >div{
		padding-bottom:30px;
	}
	#section5 .image_box{
		overflow:hidden;
		position:absolute;
		right:-60px;
		bottom:0;
	}
	#section5 .textbox{
		overflow:hidden;
		margin-bottom:30px;
		padding:30px 20px;
		width:410px;
		margin-left:33px;
	}
	#section5 ul{
		margin-left:33px;
	}
	#section5 ul li{
		overflow:hidden;
		clear:both;
		margin-bottom:20px;
	}  
}    
/*Tab&Phone
--------------------------------------------------*/
@media screen and (max-width:1080px),print{
    #topimage{
	position:relative;
}
#topimage >.t_content{
	position:absolute;
	bottom:1%;
	display:flex;
	/*
	table-layout:fixed;*/
}
/*#topimage .btn{
	display:table-cell;
}*/
#section5 .textbox{
	margin-bottom:3%;
}
#section5 ul{
	overflow:hidden;
	margin-bottom:3%;
}
#section5 li{
	margin-bottom:5%;
}
	/*modal
--------------------------------------------------*/
	.milk .mov01{
		width: 90%;
		margin: 0 auto 5%;
	}
}


/*Tab
--------------------------------------------------*/
@media screen and (max-width:1080px) and (min-width:751px){
	#topimage{
		margin-bottom:5%;
	}
	#topimage >.t_content{
		left:10%;
		width:70%;
	}

	#topimage .btn1{ width: 30%; }
	#topimage .btn2{ width: 23%; padding: 0 4% 1%;}
	#topimage .btn3{
		position:absolute;
		bottom: 6%;
		right:0;
		width:35%;
		padding-left:2%
	}
	.section{
		margin-bottom:7%;
	}
	.point{
/*
		background-image:url(/../../images/product/milk/point_pc.gif);
		background-repeat:no-repeat;
		background-position:left 0.5em;
*/
		padding:3% 3% 0;
	}
	.p_content{
		margin-bottom:3%;
		padding-left:10px;
	}
	#item_lineup{
		background:url(../image/border21.png) repeat-x 0 bottom;/**/
	}
	#section1{
		overflow:hidden;
		clear:both;
	}
	#section1 ul{
		display:table;
		table-layout:fixed;
		width:100%;
	}
	#section1 h3{
		margin-bottom:3%;
	}
	#section1 ul{
		margin-left:-3%;
		box-sizing:border-box;
		width:103%;
		padding-bottom:10px;
		background:url(../image/border6.png) repeat-x left bottom;/**/
	}
	#section1 li{
		display:table-cell;
		padding-left:3%;
		padding-bottom:5%;
	}
	#section1 li .l_caption{
		margin-bottom:3%;
	}
	#section1 li .caption{
		margin-bottom:3%;
	}
	#section1 li .text2{
		margin-top:5%;
		padding-top:5%;
	}
	#section2{
		overflow:hidden;
		clear:both
	}
	#section2 >div{
		float:left;
		width:47.5%;
	}
	#section2 .s_content{
		margin-left:5%;
		padding-top:5%;
	}
	#section2 h3{
		margin-bottom:5%;
	}
	#section2 dt.caption{
		margin-bottom:2%;
	}
	#section2 dd{
		margin-bottom:5%;
	}
	#section2 .point{
		margin-bottom:3%;
	}
	#section3 .s_content{
		overflow:hidden;
		float:left;
		position:relative;
		width:45%;
		padding-top:5%;
		padding-left:3%;
	}
	#section3{
		padding-top:45px;
		background:url(../image/border6.png) repeat-x left top;/**/
	}
	#section3 ul{
		bottom:5%;
		left:2%;
	}
	#section3 .s_topimage{
		width:50%;
		float:right;
	}
	#section3 li{
		margin-bottom:2%;
		padding-bottom:2%;
	}
	#section3 .point{
		padding-bottom:2%;
	}
	#section3 .p_point{
	}
	#section4{
		padding-top:45px;
		background:url(../image/border6.png) repeat-x left top;/**/
		margin-bottom: 100px;
	}
	#section4 .s_topimage{
		width:40%;
		float:left;
	}
	#section4 .textbox{
		clear:left;
		float:left;
		width:40%;
		box-sizing:border-box;
		padding:2%;
	}
	#section4 dl{
		float:right;
		overflow:hidden;
		width:55%;
		margin-top:-30%;
	}
	#section4 dl dt{
		margin-bottom:3%;
	}
	#section4 dl dd{
		margin-bottom:3%;
		padding-bottom:2%;
	}
	#section5{
		background:url(../image/s5_topimagebg_pc.jpg) no-repeat right top /90% auto;/**/
		overflow:hidden;
		clear:both;
	}
	#section5 .image_box{
		float:right;
		overflow:hidden;
		width:50%;
	}
	#section5 .textbox{
		float:left;
		overflow:hidden;
		width:39%;
		padding:3%;
		margin-left:3%;
	}
	#section5 ul{
		width:40%;
		margin-left:3%;
		float:left;
	}
}
/*Phone
--------------------------------------------------*/
@media screen and (max-width:750px){
	#topimage{
		margin-bottom:7%;
	}
	#topimage .t_content{
		width:100%;
		bottom: 4%;
		/*left:3%;*/
	}
	#topimage .btn{
		padding: 0 2%;
		position: absolute;
		bottom: 5%;
		width: 31.3%;
	}
	#topimage .btn1{left:3% }
	#topimage .btn2{left:36% }
	#topimage .btn3{
		bottom:2%;
		right:-1%;
	}
	.section{
		margin-bottom:7%;
	}
	.point{
		padding:3%;
	}
	.p_content{
		background-image:url(../image/point_phone.gif);/**/
		padding-left:20px;
		padding-top:2%;
		padding-bottom:2%;
	}
	#section1 h3{
		margin-bottom:3%;
	}
	#section1 ul{
		padding:0 10% 5px;
		background:url(../image/border6.png) repeat-x bottom;/**/
	}
	#section1 ul li{
		margin-bottom:7%;
	}
	#section1 .l_caption{
		margin-bottom:3%;
	}
	#section1 .caption{
		margin-bottom:2%;
	}
	#section1 .text2{
		padding-top:5%;
		margin-top:5%;
	}
	#section2 .s_topimage{
		margin-bottom:3%;
	}
	#section2 h3{
		margin-bottom:3%;
	}
	#section2 dt.caption{
		margin-bottom:2%;
	}
	#section2 dd{
		margin-bottom:5%;
		padding-left:15%;
	}
	#section2 .point{
		margin-bottom:5%;
	}
	#section3 .s_topimage{
		background:url(../image/border6.png) repeat-x top;/**/
		padding-top:7%;
	}
	#section3 li{
		padding-bottom:3%;
		margin-bottom:3%;
	}
	#section4 .s_topimage{
		margin-bottom:3%;
	}
	#section4 .textbox{
		padding:3%;
		margin-bottom:5%;
	}
	#section4 dt{
		margin-bottom:3%;
	}
	#section4 dd{
		margin-bottom:5%;
		padding-bottom:3%;
	}

	#section5{
		background:url(../image/s5_topimagebg_phone.jpg) no-repeat right top;/**/
		position:relative;
		overflow:hidden;
	}
	#section5 .textbox{
		padding:5%;
		margin-bottom:3%;
	}

#section3,#section2{ padding-top: 10%; margin-top: -10%;}
#section4{ padding-top: 10%; margin-top: -10%;}

}