@charset "utf-8";

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

	スマートフォン向けcommon.css
	
	catalog
	
-------------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------------
	リセット
-------------------------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
}

html{
	font-size:62.5%;
}
body{
	max-width:1000px;
	margin:0 auto 20%;
	line-height:1.5;
	font-family:Helvetica, Arial,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
	font-size:1.4em;
	-webkit-text-size-adjust:100%;
	color:#333;
}
h1,h2,h3,h4,h5,h6,
input,
textarea{
	font-weight:normal;
	font-size:100%;
}
ol,ul{
	list-style:none;
}
blockquote,q{
	quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
	content:'';
	content:none;
}
input,
textarea,
select{
	font-family:Helvetica, Arial,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}

img{
	max-width:100%;
	height:auto;
	border:none;
	-ms-interpolation-mode:bicubic;
	vertical-align:bottom;
}
a img{
	border:none;
	vertical-align:bottom;
}


@media screen and (min-width: 200px) and (max-width: 299px){
	body{
		font-size:1em;
	}
}
@media screen and (min-width: 300px) and (max-width: 399px){
	body{
		font-size:1.05em;
	}
}
@media screen and (min-width: 400px) and (max-width: 499px){
	body{
		font-size:1.1em;
	}
}
@media screen and (min-width: 500px) and (max-width: 599px){
	body{
		font-size:1.15em;
	}
}
@media screen and (min-width: 600px) and (max-width: 699px){
	body{
		font-size:1.2em;
	}
}
@media screen and (min-width: 700px) and (max-width: 799px){
	body{
		font-size:1.25em;
	}
}
@media screen and (min-width: 800px) and (max-width: 899px){
	body{
		font-size:1.3em;
	}
}
@media screen and (min-width: 900px) and (max-width: 999px){
	body{
		font-size:1.35em;
	}
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
ul{
	list-style:none;
	margin:0;
	padding:0;
}


a{
    -webkit-tap-highlight-color:rgba(0,0,0,0.1);
	tap-highlight-color:rgba(0,0,0,0.8);
	text-decoration:none;
	color:#333;
}

input{
	-webkit-border-radius:100%;
	border-radius:0;
}
input, select{
	vertical-align:middle;
}


/* --------------------------------------------------------------------------------
	共通クラス
-------------------------------------------------------------------------------- */
.clear{
	clear:both;
}
br.clear{
	display:block;
	margin:0;
	padding:0;
	clear:both;
	height:0;
	border:none;
	visibility:hidden;
	font-size:0;
}
.clearfix:after{
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}
.clearfix{
	min-height:1%;
}
* html .clearfix{
	height:1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

ul.ul{
	list-style:disc;
	padding:0 0 0 1.5em;
}
ol.ol{
	list-style:decimal;
	padding:0 0 0 1.75em;
}

/********** プレースホルダー **********/
::-webkit-input-placeholder{
}

/* --------------------------------------------------------------------------------
	デバイスごとの表示・非表示
-------------------------------------------------------------------------------- */
.device-sp{
	display:block;
}
.device-sp-inline{
	display:inline;
}
.device-pc{
	display:none;
}
.device-pc-inline{
	display:none;
}


/* --------------------------------------------------------------------------------
	container
-------------------------------------------------------------------------------- */
#container{
}


/* --------------------------------------------------------------------------------
	wrapper
-------------------------------------------------------------------------------- */
#wrapper{
}


/* --------------------------------------------------------------------------------
	main
-------------------------------------------------------------------------------- */
#main{
	padding:2%;
}