@charset "UTF-8";

/*---------------------------------------------

General Page CSS

for auro-jp.net
coded by ryo at 2013-04-10
imported to /item_page/*.html

---------------------------------------------*/

@import url(default.css);
@import url(base.css);


.title,h2,.howto h3{
	font-size: 2.8rem !important;
}
.sub_title,.component dl dt,.howto p.next,.characteristic dl dt span,.movie p{
	font-size: 1.4rem;
}

#main-block{
	background:url(/img/top/bg.jpg) left top repeat-y;
	color:#231815;
	font-size:  1.1rem;
}
#main-block section.item_block{
	width: 1300px;
}
.description p,
.description ul li{
	line-height: 1.7;
	padding-bottom: 12px;
}
.important{
	color: #F00;
}

.basic section{
	text-align: center;
}
.basic div{
	overflow: hidden;
	margin: 0 auto;
	width: 62.4%;
}
.basic h2{
	text-align: left !important;
	display: inline-block;
	line-height: 4.2rem;
	font-weight: lighter;
}
.basic h2 em{
	font-size: 4rem;
}
.basic div p:nth-of-type(1){
	width: 39.7%;
	float: left;
	margin-right: 4.8%;
}
.basic div p:nth-of-type(2){
	width: 55.4%;
	float: left;
	margin-bottom: 15px;
	text-align: left;
}
.basic div table{
	width: 55.4%;
	float: left;
}
.basic div table td{
	width: 33.3%;
}
.basic div table tr:nth-last-of-type(1) td{
	text-align: left;
	border: none;
}



.component dl dt{
	text-indent: -0.7rem;
}
.component dl:nth-of-type(1){
	width: 50%;
	float: left;
	border-right: solid 1px #CBCBCB;
	box-sizing:border-box;
	padding-left: 19.2%;
}
.component dl:nth-of-type(1) ul{
	overflow: hidden;
}
.component dl:nth-of-type(1) ul li{
	width: 42.5%;
	margin-right: 7.5%;
	float: left;
}
.component dl:nth-of-type(1) ul li span,
.component dl.graph p.glink a span{
	transform: rotate(90deg);
	display: inline-block;
	margin-right: 3px;
}
.component dl.graph{
	width: 50%;
	float: left;
	position: relative;
	box-sizing:border-box;
	padding: 0 4.6%;
}
.component dl.graph ul li img{
	width:19px;
	vertical-align:sub;
	margin-right:6px;
}
.component dl.graph p.en{
	width:27%;
	position: absolute;
	top: 0;
	right: 31%;
}
.component dl.graph p.glink{
	margin: 15px 0 2px 0;
}
.component dl.graph p.glink a{
	color:#ea410f !important;
	border:#ea410f 1px solid;
	padding:3px 10px;
	min-height:inherit !important;
	margin-top: 15px;
}
.component dl.graph p.glink a:hover{
	opacity:0.7;
}
.component dl.analysis_food,
.component dl.analysis_din{
	clear: both;
	padding-top: 50px;
	padding-left: 19.2%;
}
.component dl.analysis_food ul,
.component dl.analysis_din ul{
	overflow: hidden;
}
.component dl.analysis_food ul li{
	width: 160px;
	float: left;
	margin-right: 25px;
	padding: 5px 0 0 0;
}
.component dl.analysis_food ul li:nth-last-of-type(1){
	margin-right: 0px;
}
.component dl.analysis_din ul li{
	height: 80px;
	margin-right: 15px;
	padding: 5px 0;
	float: left;
	box-sizing:border-box;
}
#cboxLoadedContent p{
	max-width:701px;
	margin:0 auto;
	padding:50px 12px 0 12px;
}



.characteristic dl{
	width:30.2%;
	float:left;
	margin-right:4.7%;
	letter-spacing:1px;
	margin-bottom:60px;
}
.characteristic dl:nth-of-type(3){
	margin-right:0%;
}
.characteristic dl dt span{
	margin-bottom:4%;
	display:block;
	line-height:1.5em;
}
.characteristic dl dt img{
	margin-bottom:4%;
}
.characteristic dl dd{
	line-height:1.6em;
}
.no560 .characteristic p.color{
	width: 46%;
	margin: 0 auto;
}



.movie iframe{
	display: block;
	width:800px;
	height:450px;
	margin:0px auto 50px auto;
}
.movie p{
	text-align: center;
	margin-bottom: 15px;
}



.color_designer #main-block section.color > h1,
.no330 #main-block section.color2 > h1{
	font-size:180%;
	color:#231815;
	height:auto !important;
}
.color_designer #main-block section.color div,
.no330 #main-block section.color2 div{
	position:relative;
	overflow:hidden;
}
.color_designer #main-block section.color a,
.no330 #main-block section.color2 a{
	width:490px;
	position:absolute;
	top:14%;
	left:7%;
	border:#FFF 2px solid;
	background:rgba(84,84,84,0.5);
	color:#FFF;
	padding:20px 35px;
}
.color_designer #main-block section.color a:hover,
.no330 #main-block section.color2 a:hover{
	opacity:0.7;
}
.color_designer #main-block section.color dl dt,
.no330 #main-block section.color2 dl dt{
	font-size:170%;
	font-weight:bold;
	letter-spacing:2px;
}
.color_designer #main-block section.color dl dd,
.no330 #main-block section.color2 dl dd{
	padding-top:5px;
	position:relative;
}
.color_designer #main-block section.color dl dd span,
.no330 #main-block section.color2 dl dd span{
	font-size:15px;
	line-height:1.8;
}
.color_designer #main-block section.color dl dd img,
.no330 #main-block section.color2 dl dd img{
	width:140px;
	display:block;
	margin-top:-15px;
	position:absolute;
	top:-10px;
	right:0px;
}
.color_designer #main-block section.color a p,
.no330 #main-block section.color2 a p{
	font-size:170%;
	text-align:center;
	margin:10px 15px 0 0;
}
.color_designer #main-block section.color a p img,
.no330 #main-block section.color2 a p img{
	width:28px;
}



.howto section{
}
.howto section h3{
	background:url(/img/item/129/s1.png) center 0 no-repeat;
	padding-top: 75px;
	text-align: center;
	font-weight: normal;
}
.howto section:nth-of-type(2) h3{
	background:url(/img/item/129/s2.png) center 0 no-repeat;
}
.howto section:nth-of-type(3) h3{
	background:url(/img/item/129/s3.png) center 0 no-repeat;
}
.howto section:nth-of-type(4) h3{
	background:url(/img/item/129/s4.png) center 0 no-repeat;
}
.howto section:nth-of-type(5) h3{
	background:url(/img/item/129/s5.png) center 0 no-repeat;
}
.howto section:nth-of-type(6) h3{
	background:url(/img/item/129/s6.png) center 0 no-repeat;
}
.howto section:nth-of-type(7) h3{
	background:url(/img/item/129/s7.png) center 0 no-repeat;
}
.howto section p.bun{
	text-align: center;
	margin-bottom: 10px;
}
.howto section p.photo{
	width: 650px;
	margin: 0 auto;
}
.howto section p:nth-of-type(3){
	margin-top: 70px;
}
.howto section p.next{
	margin: 0 !important;
	padding: 60px 0;
	text-align: center;
	line-height: 1.3;
}
.no380 .how section dl dt{
	font-size: 1.8rem;
}
.no380 .how section dl{
	margin-bottom: 30px;
}
.no380 #how3 section table{
	width: 1000px;
	text-align: center;
	margin: 0 auto;
}





.bullets section{
	text-align: center;
}
.bullets section section{
	margin-bottom: 35px;
}
.bullets section h3{
	font-size: 2rem;
}
.bullets section ul{
	text-align: left;
	display: inline-block;
}
.bullets table{
	margin: 0 auto;
}


.chart section > p{
	width: 100%;
	padding-bottom: 5px;
	display: none;
}
.chart table{
	width: 100%;
}
.chart table thead tr.sp,
.chart table br{
	display:none;
}
.chart table .space td{
	height:5px;
	background:#aaa !important;
}
.chart table th,
.chart table td {
	box-sizing: border-box;
	width:11%;
	text-align:center;
	padding:6px;
	min-height:20px;
	font-size:1rem;
}
.chart table tr:nth-of-type(1) th:nth-of-type(1),
.chart table tr td:nth-of-type(1){
	width:20%;
	text-align:left;
}
.chart table tr th.space,
.chart table tr td.space{
	width:0px;
	padding:2px;
}
.chart table thead th,
.chart table tfoot th {
	background:#aaa;
	font-size:1.2rem;
}
.chart table tbody tr:nth-of-type(2n) td{
	background:#e6e6e6;
}
.chart table tbody .red{
	font-weight:bold;
	color:#F00;
}
.chart table tbody .red{
	font-weight:bold;
	color:#F00;
}
table .supplement{
	text-align: left;
}



.data ul{
	overflow: hidden;
	width: 730px;
	margin: 0 auto;
}
.data ul li{
	width: 340px;
	float: left;
}
.data ul li:nth-of-type(odd){
	margin-right: 50px;
}
.data ul li table td{
	text-align: center;
	width: 190px;
}
.data ul li table tr:nth-last-of-type(1) td{
	text-align: left;
	border: none;
}
.data ul li:nth-last-of-type(1){
	width: 100%;
}



.qa dl{
	width: 80%;
	margin: 0 auto 10px auto;
}
.qa dl span{
	display: inline-block;
	padding-right: 15px;
	font-size: 30px;
	font-weight: bold;
	font-family:Arial, Helvetica, "sans-serif";
}
.qa dl dt{
	padding: 5px 30px 10px 30px;
	background: #e1efff;
}
.qa dl dt span{
	color: #214b8a;
}
.qa dl dd{
	padding: 5px 30px 10px 30px;
	background: #e9e9e9;
	margin-bottom: 10px;
}
.qa dl dd span{
	color: #df8633;
}



#main-block > div:nth-of-type(2n){
	background: #f1f5fa;
}