@charset "UTF-8";
/* CSS Document */

html,body {
	height: 100%;
} 

html {
	background: url(img_common/bg.png);
}

body {
	font-family:"游ゴシック体","ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* 
------------- ヘッダー*/

@media screen and (min-width: 768px) {

header {
	position: relative;
	width: 100%;
}

header:before {
	content:"";
	display: block;
	padding-top: 73.242%;
}

#headerBox {
	position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

#slideWrapper {
	width: 84.082%;
	position: absolute;
	top: 0;
	right: 0;
}
	
header h3 {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 71.875%;
	bottom: 6.2%;
	left: 2.539%;
	margin: 0;
}

}

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

header {
	position: relative;
	width: 100%;
}

header:before {
	content:"";
	display: block;
	padding-top: 91%;
}

#headerBox {
	position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

#slideWrapper {
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
}
	
header h3 {
	padding-top: 70%;
	display: block;
	overflow: hidden;
	width: 80%;
	margin: 0 auto;	
}

}

h1 {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 18.262%;
	top: 2.2%;
	left: 2.539%;
	z-index: 1;
}

h1 img {
	width: 100%;
	height: auto;
}

#slideWrapper img {
	width: 100%;
	height: auto;
}

#ball {
	display: none;
}

header h3 img {
	width: 100%;
	height: auto;
}


/* 
------------- ディスクリプション*/

@media screen and (min-width: 1000px) {
	
#discWrapper {
	width: 100%;
	background-color: #13242C;
}

#discBox {
	width: 910px;
	margin: 0px auto;
	padding: 75px 0;
}

}

@media screen and (max-width: 999px) {
	
#discWrapper {
	width: 100%;
	background-color: #13242C;
}

#discBox {
	width: 91.091%;
	margin: 0px auto;
	padding: 10% 0;
}
	
#discWrapper p br {
    display: none;
}
	
}

#discWrapper h2 {
	font-size: 27px;
	font-weight: 600;
	color: #fff;
	font-family: "游ゴシック体","ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	margin-bottom: 40px;
	line-height: 1.7em;
	letter-spacing: 0.02em;
}

#discWrapper p {
	font-size: 17px;
	font-weight: 400;
	color: #fff;
	font-family: "游ゴシック体","ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	line-height: 1.8em;
	text-align: justify;
}


/* 
------------- プロダクト*/

#productWrapper {
	width: 100%;
}

@media screen and (min-width: 1000px) {

#productWrapper h2 {
	margin: 57px 0;
	text-align: center;
	letter-spacing: 0.04em;
	font-size: 60px;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
}

#productWrapper h2 br {
	display: none;
}
	
#productWrapper h3 {
	font-family: 'PT Serif', serif;
	font-weight: 400;
	font-size: 29px;
	margin: 10px 0 0;
}

#productWrapper h3 br {
	display: none;
}

#productWrapper h3 span {
	font-size: 25px;
}

#productBox {
	width: 910px;
	margin: 0px auto;
	padding: 0px 0;
}

.productLBox {
	float: left;
	width: 44.61538%;
}
	
.productRBox {
	float: right;
	width: 52.41758%;
}

.productImgWrapper {
	width: 910px;
	margin-top: 20px;
}

.productImgWrapper li {
	width: 32.63736%;
	float:  left;
}
	
.mrl {
	margin-right: 1.04396%;
}

}

@media screen and (max-width: 999px) and (min-width: 580px) {
	
#productWrapper h2 {
	margin: 47px 0;
	text-align: center;
	letter-spacing: 0.04em;
	font-size: 50px;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
}

#productWrapper h3 {
	font-family: 'PT Serif', serif;
	font-weight: 400;
	font-size: 23px;
	margin: 10px 0 0;
}

#productWrapper h3 span {
	font-size: 20px;
}

#productBox {
	width: 91.091%;
	margin: 0px auto;
	padding: 0px 0;
}

.productLBox {
	float: left;
	width: 44.61538%;
}
	
.productRBox {
	float: right;
	width: 52.41758%;
}

.productImgWrapper {
	width: 100%;
	margin-top: 20px;
}

.productImgWrapper li {
	width: 32.638%;
	float:  left;
}
	
.mrl {
	margin-right: 1.04396%;
}

}

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

#productWrapper h2 {
	margin: 37px 0;
	text-align: center;
	letter-spacing: 0.04em;
	font-size: 40px;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
}

#productWrapper h3 {
	font-family: 'PT Serif', serif;
	font-weight: 400;
	font-size: 20px;
	margin: 10px 0 0;
}

#productWrapper h3 span {
	font-size: 17px;
}

#productBox {
	width: 90%;
	margin: 0px auto;
	padding: 0px 0;
}

.productLBox {
	float: left;
	width: 100%;
	margin-bottom: 20px;
}
	
.productRBox {
	float: right;
	width: 100%;
}

.productImgWrapper {
	width: 100%;
	margin-top: 20px;
}

.productImgWrapper li {
	width: 32.638%;
	float:  left;
}
	
.mrl {
	margin-right: 1.04396%;
}

.productRBox dd br {
	display: none;
}

}

#productWrapper h4 {
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 30px;
}

.productBox {
	margin-bottom: 100px;
}

.productLBox img {
	width: 100%;
	height: auto;
}

.productRBox p {
	font-size: 14px;
	text-align: justify;
}

.productRBox dl {
	margin-top: 20px;
}

.productRBox dt,.productRBox dd {
	color: #000;
	font-size: 12px;
}

.productRBox dt {
	margin: 15px 0 0;
	width: 80px;
	float: left;
	clear: both;
}

.productRBox dd {
	margin: 15px 0 0;
	width : -webkit-calc(100% - 80px) ;
   width : calc(100% - 80px) ;
	float: left;
	text-align: justify;
}

.btnBuy {
	margin-top: 10px;
	float: right;
}

.btnBuy a {
	font-size: 30px;
	font-family: 'Oswald', sans-serif;
	color: #fff;
	background-color: #000;
	padding: 0px 20px 2px;
	text-decoration: none;
}

.btnBuy a:hover {
	color: #fff;
	background-color: #aaa;
}

.btnSLP {
	text-align: center;
	margin-bottom: 100px;
}
.btnSL {
	text-align: center;
	margin: 10px auto 10px;
}

.btnSL a {
	font-size: 30px;
	font-family: 'Oswald', sans-serif;
	color: #fff;
	background-color: #000;
	padding: 0px 20px 2px;
	text-decoration: none;
}

.btnSL a:hover {
	color: #fff;
	background-color: #aaa;
}

.productImgWrapper li img {
	width: 100%;
	height: auto;
}

/* 
------------- フッター*/

footer {
	padding: 20px 0 25px;
	background-color: #13242C;
}

footer div {
	width: 131px;
	height: 130px;
	margin: 20px auto 60px;
}

footer p {
	text-align: center;
	color: #fff;
	font-size: 11px;
}