/*
===========================================================================

	Title : jelly.css

===========================================================================
*/


/***************************************************************
*
*	PC view
*	
****************************************************************/
#wrap #content.jelly {
	margin: 0 auto 90px;
	width: 1000px;
	font-size: 14px;
	color: #302420;
}

#wrap #content.jelly .main{
	text-align: center;
}

#wrap #content.jelly .main ul{
	width: 544px;
	margin: 0 auto;
	padding: 0 0 60px 0;
}

#wrap #content.jelly .main ul li{
	float: left;
	margin: 0 5px;
}

#wrap #content.jelly h3{
	margin-bottom: 30px;
}

#wrap #content.jelly .note{
	margin: 1em 0 0;
	font-size: 12px;
}

#wrap #content.jelly .note2{
	margin: 3em 0 0;
	font-size: 14px;
}

#wrap #content.jelly .underline{
	text-decoration: underline;
}

#wrap #content.jelly .inner{
	width: 920px;
	margin: auto;
}

#wrap #content.jelly .type{
	margin-top: 80px;
	overflow: hidden;
}

#wrap #content.jelly .feature{
	display: table;
}

#wrap #content.jelly .feature img{
	display: table-cell;
	vertical-align: middle;
}

#wrap #content.jelly .feature ul{
	display: table-cell;
	width: 648px;
	padding-left: 25px;
	padding-right: 25px;
	vertical-align: middle;
}

#wrap #content.jelly .feature ul li{
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.6;
}

#wrap #content.jelly .type .inner{
	float: left;
	width: 920px;
	margin: 60px 40px 0;
}

#wrap #content.jelly .type .inner ol{
	margin: 0 0 30px 16px;
}

#wrap #content.jelly .type .inner ol li{
	list-style-type: decimal;
}

#wrap #content.jelly .inner h4{
	background: url(../image/line_pc.png) repeat-x left bottom;
	background-size: 7px 2px;
	font-weight: bold;
	font-size: 22px;
	margin: 60px 0 30px 0;
	padding-bottom:7px;
}

#wrap #content.jelly .inner h4:first-child{
	margin: 0 0 30px 0;
}

#wrap #content.jelly .inner .col2 {
	float: left;
	width: 440px;
	position: relative;
	overflow: hidden;
}

#wrap #content.jelly .inner .col2:nth-of-type(odd){
	margin-right: 40px;
}

#wrap #content.jelly .inner .col2 p,
#wrap #content.jelly .inner .col2 ul{
	float: left;
	width: 250px;
	margin: 0;
}

#wrap #content.jelly .inner .col2 ul li{
	padding-left:1em;
	text-indent: -1em;
}

#wrap #content.jelly .inner .col2 p.col2img{
	float: left;
	width: 190px;
	text-align: right;
}

#wrap #content.jelly .inner .col2 p.col2img img{
	width: 173px;
}

#wrap #content.jelly .inner .col2list li{
	float: left;
	width: 325px;
}

#wrap #content.jelly .inner .txt_dose img{
	width: 700px;
	margin: auto;
}

#wrap #content.jelly .left_img{
	float: left;
	width: 243px;
	margin: 0 0 0 40px;
}


#wrap #content.jelly .link_btn{
	width: 640px;
	margin: 75px auto 0;
	overflow: hidden;
}

#wrap #content.jelly .link_btn li{
	float: left;
	margin: 0 9px;
}

#wrap #content.jelly .relatedlink li:before{
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: -6px;
	border: 6px solid transparent;
	border-left: 7px solid #302420;
}

#wrap #content.jelly .relatedlink li{
	line-height: 32px;
}






/***************************************************************
*
*	SP view
*	
****************************************************************/


@media screen and (max-width:769px){
	

	#wrap #content.jelly {
		margin: 0 auto 20%;
		width: 100%;
		font-size: 11px;
	}

	#wrap #content.jelly .main{
		text-align: center;
	}

	#wrap #content.jelly .main ul{
		width: 92.1875%;
		padding: 10% 0 10% 0;
	}

	#wrap #content.jelly .main ul li{
		width: 49%;
		margin: 0;
	}
	
	#wrap #content.jelly .main ul li:first-child{
		margin-right: 2%;
	}
	
	#wrap #content.jelly .main ul li img{
		width: 100%;
	}
	
	#wrap #content.jelly h2{
		padding: 0;
		margin-bottom: 0;
	}
	
	#wrap #content.jelly h3{
		padding: 0;
		margin-bottom: 5%;
	}
	
	#wrap #content.jelly h3 + p{
		font-size: 11px;
		padding: 0 5%;
	}
	
	#wrap #content.jelly h2 img,
	#wrap #content.jelly h3 img{
		width: 100%;
	}
	
	#wrap #content.jelly .note{
		font-size: 11px;
		padding: 0;
	}
	
	#wrap #content.jelly .note2{
		font-size: 11px;
		padding: 0;
    }

	
	#wrap #content.jelly .txt{
		padding: 0;
		font-size: 11px;
	}

	#wrap #content.jelly .inner{
		width: 92.1875%;
		margin: 0 auto;
	}
	
	#wrap #content.jelly .feature{
		display: inherit;
	}

	#wrap #content.jelly .feature img{
		display: block;
	}

	#wrap #content.jelly .feature ul{
		display: block;
		width: 92.1875%;
		margin: auto;
		padding: 4% 0 0;
	}

	#wrap #content.jelly .type{
		margin-top: 10%;
	}

	#wrap #content.jelly .type .inner{
		float: none;
		width: 92.1875%;
		margin: auto;
	}

	#wrap #content.jelly .type .inner ol{
		margin: 0 0 4% 5%;
	}

	#wrap #content.jelly .inner h4,
	#wrap #content.jelly .inner h4:first-child{
		padding-bottom: 3%;
		margin:10% 0 5%;
		font-size: 14px;
	}

	#wrap #content.jelly .inner .col2:first-child h4{
		margin: 0 0 5% 0;
	}

	#wrap #content.jelly .inner .col2{
		float: none;
		width: 100%;
	}

	#wrap #content.jelly .inner .col2:nth-of-type(odd){
		margin-right: 0;
	}

	#wrap #content.jelly .inner .col2 p,
	#wrap #content.jelly .inner .col2 ul{
		width: 57%;
		margin: 0;
		padding: 0;
		font-size: 11px;
		line-height: 1.7;
	}

	#wrap #content.jelly .inner .col2 p.col2img{
		width: 41%;
		margin-left: 2%;
	}

	#wrap #content.jelly .inner .col2 p.col2img img{
		width: 100%;
	}

	#wrap #content.jelly .inner .col2list li{
		float: none;
		margin: auto;
	}
	
	#wrap #content.jelly .inner .txt_dose img{
		width: 92.1875%;
		margin: auto;
	}

	#wrap #content.jelly .left_img{
		float: none;
		display: block;
		width: 59%;
		margin: 0 auto;
	}


	#wrap #content.jelly .link_btn{
		width: 92.1875%;
		margin: 10% auto 0;
	}

	#wrap #content.jelly .link_btn li{
		float: none;
		margin: 0 auto 4%;
	}




}