@charset "UTF-8";

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

General Page CSS

for auro-jp.net
coded by ryo at 2013-03-20
imported to "all page"

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




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

#main-block section.item_block{
	width: 100%;
}
#main-block div.basic section.item_block div,
#main-block div.component section.item_block,
#main-block div.howto section.item_block{
	width: 900px;
}
.component dl:nth-of-type(1),
.component dl.analysis_din,
.component dl.analysis_food{
	padding-left: 0%;
}
.component dl:nth-of-type(2){
	padding-right: 0%;
}
.component dl:nth-of-type(2) p.en{
	width:38%;
	right: 8%;
}


.characteristic dl dd{
	font-size: 1.3vw;
}


}



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

#main-block section.item_block,
#main-block div.basic section.item_block div{
	width: 96% !important;
	padding-left:2%;
	padding-right:2%;
}
#cboxLoadedContent div.colorbox dl{
	margin-bottom:6%;
	font-size:90%;
}
#cboxLoadedContent div.colorbox dl dt{
	margin:0 0 2% 0%;
	width:80%;
	float:none;
}
#cboxLoadedContent div.colorbox dl dd{
	float:none;
	width:100%;
	font-size:100%;
}
#cboxLoadedContent div.colorbox dl dd span{
	font-size:150%;
	margin-bottom:0.8%;
	letter-spacing:2px;
}
#cboxLoadedContent div.colorbox dl dd span br{
	display:none;
}
.movie iframe{
	width:400px;
	height:220px;
}

.color_designer #main-block section.color div > p img,
.no330 #main-block section.color2 div > p img{
	height:260px;
}
.color_designer #main-block section.color a,
.no330 #main-block section.color2 a{
	width:74%;
	top:24px;
	left:8%;
	padding:10px 5%;
	height:192px;
}
.color_designer #main-block section.color a dd span,
.no330 #main-block section.color2 a dd span{
	width:67%;
	font-size:13px;
	display:block;
}
.color_designer #main-block section.color a dd span br,
.no330 #main-block section.color2 a dd span br{
	display:none;
}
.color_designer #main-block section.color a dd img,
.no330 #main-block section.color2 a dd img{
	width:29%;
}

}




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

.item_block h2{
	line-height: 3.2rem;
	text-align: center !important;
}
.basic h2{
	margin-top: -20px;
	margin-bottom: 20px !important;
	text-align: left !important;
}
.basic h2 em{
	padding-bottom: 10px;
	display: inline-block;
}
.basic div p:nth-of-type(1){
	width: 300px;
	float: none;
	margin: 0 auto 30px auto;
}
.basic div p:nth-of-type(2){
	width: 96%;
	float: none;
	margin: 0 auto 15px auto;
}
.basic div table{
	width: 96%;
	float: none;
	margin: 0 auto 0 auto;
}


.component dl{
	width: 100% !important;
	border: none !important;
	float: none;
}
.component dl:nth-of-type(1) ul li:nth-of-type(odd){
	margin-right: 15%;
}
.component dl:nth-of-type(1) ul li:nth-of-type(even){
	margin-right: 0%;
}
.component dl:nth-of-type(2){
	padding:50px 0 0 0;
}
.component dl:nth-of-type(2) p.en{
	width:160px;
	right: 0;
	left: 175px;
	top: 50px;
}
.component dl.analysis_din ul li{
	height: auto;
	margin-right: 0px;
	padding: 5px 4% 5px 0;
	float: left;
	width: 48%;
	box-sizing: inherit;
}
.component dl.analysis_din ul li:nth-of-type(even){
	padding-right: 0;
}
.component dl.analysis_food ul li{
	width: 130px;
}
.no125 .component dl.analysis_food ul li{
	width: 105px;
	padding: 5px 0;
	margin-right: 10px;
}



.characteristic dl{
	width: 100%;
	margin: 0 0 50px 0;
}
.characteristic dl dt img{
	width: 60%;
	min-width: 450px;
	margin-bottom: 10px;
}
.characteristic dl dt span{
	margin-bottom: 10px;
	font-weight: bold;
}
.characteristic dl dd{
	font-size: 1.1rem;
}
.no560 .characteristic p.color{
	width: 80%;
}



.item_block p.photo{
	width: 105%;
	margin-left: -2.5%;
}



.howto section p.photo{
	width: 100%;
}



.chart section > p{
	display: block;
}
.chart table{
  display: block;
  width: 100%;
  margin: auto;
  overflow: hidden;
}
.chart table thead tr.sp,
.chart > p,
.chart table br{
  display: block;
}
.chart table thead tr:nth-of-type(1),
.chart table thead tr:nth-of-type(2),
.chart table .space td{
	display:none !important;
}
.chart table thead {
  float: left;
  display: block;
  overflow-x: scroll;
}
.chart table thead th {
  display: block;
  font-size:1rem;
	background:none;
	width:100px !important;
}
.chart table tbody {
  display: block;
  width: auto;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.chart table tbody td {
  display: block;
  width:auto !important;
  border-left:none;
  text-align:center !important;
}
.chart table thead tr:nth-of-type(3) th:nth-of-type(1),
.chart table tbody td:nth-of-type(1) {
  background:#aaa !important;
  font-weight:bold;
  text-align:center;
  line-height:1.2;
  padding:3px 6px;
  height:3em;
  vertical-align:middle;
}
.chart table tbody tr {
  display: inline-block;
}
.chart table tfoot tr:nth-of-type(1) {
	display:none;
}




.data ul{
	width: 100%;
}
.data ul li{
	width: 100%;
	float: none;
	margin-right: 0 !important
}
.data ul li.line{
	display: none;
}
.data ul li table{
	width: 100%;
}
.data ul li table td{
	width: 50%;
	box-sizing: border-box;
}



}



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

.basic h2 em{
	font-size: 100%;
	padding-bottom: 3vw;
	display: inherit;
}
.title,h2,.howto h3{
	font-size: 8.7vw !important;
}
.characteristic dl dt img{
	width: 100%;
	min-width: auto;
}


.howto section h3{
	font-size: 1.8rem !important;
	font-weight: bold;
}
.movie iframe{
	width:300px;
	height:170px;
}


.color_designer #main-block section.color a,
.no330 #main-block section.color2 a{
	width:82%;
	top:24px;
	left:5%;
	padding:10px 4%;
	height:192px;
}
.color_designer #main-block section.color a dt,
.no330 #main-block section.color2 a dt{
	font-size:150%;
}
.color_designer #main-block section.color a dd span,
.no330 #main-block section.color2 a dd span{
	width:100%;
}
.color_designer #main-block section.color a dd img,
.no330 #main-block section.color2 a dd img{
	display:none;
}
.color_designer #main-block section.color a p,
.no330 #main-block section.color2 a p{
	font-size:140%;
	font-weight:bold;
}



}














@media screen and (max-width:1050px){
body{
	padding-top:111px;
}
header section.block{
	width:auto;
	margin:0 15px;
}
header div section{
	height:22px;
	padding:5px 0;
}
header div section h1,
header div section ul li address{
	line-height:22px;
}
header div section ul li img{
	width:20px;
}
header > section p:nth-of-type(1){
	width:160px;
}
header > section ul{
	padding-top:36px;
	height:40px;
}
header > section ul li{
	margin-left:28px;
	font-size:1.2rem;
}
article div#shop section.block,
article div#item section.block,
.no380 #how3 section table{
	width:95%;
	padding:40px 0;
}
}

@media screen and (max-width:767px){
body{
	padding-top:111px;
}
header{
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
}
header div{
	display:none;
}
header section.block{
	margin:0;
}
header > section p:nth-of-type(1){
	width:170px;
	float:none;
	padding:13px 0 5px 2px;
}
header > section p:nth-of-type(2),
#sp_button{
	display:block;
}
header > section ul{
	border-top:#003c8a solid 1px;
	float:none;
	padding-top:0px;
	height:0;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
header > section ul li{
	float:none;
	margin-left:0px;
	font-size:1.23rem;
	line-height:55px;
	background:#dadcde;
	border-bottom:#003c8a solid 1px;
	color:#003c8a;
	font-weight:bold;
}
header > section ul li a{
	padding-left:11%;
	display:block;
}
header > section ul li a::before{
	content:"→　"
}

ul.swiper-wrapper li span{
	font-size:4vw;
	left:20%;
}


footer nav{
	margin-right:-20px;
}
footer nav li{
	float:left;
	margin-right:20px;
}
footer nav li{
	font-size:0.8rem;
	padding-bottom:5px;
}
footer aside ul{
	width:95%;
	overflow:hidden;
	margin:0 auto;
}
footer aside ul li{
	width:30%;
	margin:30px 5% 30px 0;
}
footer aside li:nth-of-type(3){
	padding-top:0.7vw;
	height:7.8vw;
	font-size:2.4vw;
    border-radius:1.41vw;
    -webkit-border-radius:1.41vw;
    -moz-border-radius:1.41vw;
}




article div#item section.block{
	width:100%;
}
section.item dt{
	display:block;
	min-height:inherit;
	line-height:1.7;
	margin-bottom:0;
}
section.item dt span{
	width:92%;
	float:none;
	background:#003c8a;
	color:#FFF;
	font-weight:bold;
	padding:6px 8% 6px 0;
	font-size:1.5rem;
	min-height:inherit;
	line-height:1.7;
	border:none;
	position:relative;
}
section.item dl:nth-of-type(1) dt span{
	background:#5cb531;
}
section.item dl:nth-of-type(3) dt span{
	background:#f5a200;
}
section.item dl:nth-of-type(4) dt span{
	background:#df0011;
}
section.item dt span::after{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:6%;
	width:10px;
	height:10px;
	margin:auto;
	border-top:3px solid #FFF;
	border-right:3px solid #FFF;
	-webkit-transform:rotate(135deg);
	transform:rotate(135deg);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
section.item dt.open span::after{
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	top:7px;
}
section.item dt em{
	width:94%;
	padding:10px 3% 10px 3%;
	float:none;
	border:none;
}
section.item dt em:hover,
section.item ul li a:hover{
	background:none !important;
}
section.item dt em::after{
	display:none;
}
section.item ul li{
	width:33%;
	margin:0;
	float:left;
	text-align:center;
	line-height:1.4;
	padding:0;
	border-bottom:#CCC solid 1px;
}
section.item ul li:nth-of-type(3n-1){
	border-left:#CCC solid 1px;
	border-right:#CCC solid 1px;
}
section.item ul li a{
	padding:20px 6%;
}
section.item ul li em{
	display:none;
}
section.item ul li img{
	height:auto;
	width:70%;
	margin-top:8px !important;
}
section.item ul li span{
	height:4.2em;
	display:block;
	overflow:hidden;
	font-size:0.9rem;
	text-align:left;
}
section.item ul li a:after{
	content:'  ...';
	float:left;
	display:block;
	margin-top:-5px;
}


section.shop ul{
	margin:0 auto;
	width:490px;
}
section.shop ul li{
	width:230px;
	margin:0 30px 30px 0;
}
section.shop ul li img{
	width:160px;
	padding:13px 33px;
}
section.shop ul li:nth-of-type(2n){
	margin-right:0%;
}




.qa dl{
	width: 100%;
}


}




@media screen and (max-width:560px){
section.shop ul{
	width:100%;
}
section.shop ul li{
	width:45%;
	margin:0 10% 30px 0;
}
section.shop ul li img{
/*
	width:120px;
	padding:13px 20px;
*/
	width:100%;
	padding:0;
}
}










@media screen and (max-width:1075px){
#cboxLoadedContent div.colorbox dl{
	margin-bottom:6%;
	font-size:90%;
}
#cboxLoadedContent div.colorbox dl dt{
	margin:0 0 2% 0%;
	width:80%;
	float:none;
}
#cboxLoadedContent div.colorbox dl dd{
	float:none;
	width:100%;
	font-size:100%;
}
#cboxLoadedContent div.colorbox dl dd span{
	font-size:150%;
	margin-bottom:0.8%;
	letter-spacing:2px;
}
#cboxLoadedContent div.colorbox dl dd span br{
	display:none;
}
}