@charset "utf-8";

* {
	box-sizing: border-box;
}
img {
	max-width: 100%;
	height: auto;
	-ms-interpolation-mode: bicubic;
	vertical-align: bottom;
}
html {
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
}
body {
	line-height: 1.5;
	font-size: 1.2rem;
	color: #333333;
}
body, main, h1, p, ul, li, dl, dd, figure {
	margin: 0;
	padding: 0;
}
/*=====main=====*/
.spOnly {
	display: none;
}
.main-inner h1 {
	text-align: center;
	background: url(../figure/index_bg01.png) no-repeat center top;
}
.main-inner {
	background: url(../figure/index_bg02.jpg) no-repeat center top;
}
.syohinDetail {
	width: 1000px;
	margin: 0 auto;
}
.syohinDetail h2 {
	text-align: center;
}
.text01 {
	text-align: center;
}
.syohinDetail ul {
	text-align: center;
	margin: 74px 0 1416px;
}
.syohinDetail ul li.btn-position {
	position: relative;
}
.button01 {
	position: absolute;
	top: 257px;
	left: 57px;
}
.button02, .button03 {
	text-align: center;
	margin-top: 21px;
}
.button03 {
	text-align: center;
	padding-bottom: 258px;
}
/*=====mediaQuery999=====*/
@media screen and (max-width:999px), print {
	.main-inner h1 {
		background: none;
	}
}
/*=====mediaQuery767=====*/
@media screen and (max-width:767px), print {
	.pcOnly {
		display: none;
	}
	.spOnly {
		display: block;
	}
	.main-inner {
		background: url(../figure/index_bg_sp02.jpg) no-repeat center top;
		background-size: 100% auto;
	}
	.syohinDetail {
		width: 100%;
	}
	h2.spOnly {
		margin: 0 auto;
		width: 80%;
	}
	p.spOnly.text01 {
		margin-top: 16px;
	}
	.syohinDetail ul {
		margin: 155px 0 190%;
	}
	.syohinDetail ul li.btn-position {
		position: none;
	}
	.syohinDetail ul li+li {
		margin-top: 5px;
	}
	.button01 {
		width: 80%;
		margin: -20px 10% 0;
		position: none;
		top: auto;
		left: auto;
	}
	.button02 {
		width: 87%;
		margin: 0 6%;
		margin-top: 21px;
	}
	.button03 {
		width: 87%;
		margin: 4% 7% 0;
		padding-bottom: 30%;
	}
}
/*=====mediaQuery640=====*/
@media screen and (max-width:640px), print {
	.syohinDetail ul {
		margin: 58px 0 190%;
	}
}