@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: 66.87%;
}

#headerBox {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-color: white;
}

#slideWrapper {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

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

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

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

}

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

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

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

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

#slideWrapper {
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
}

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

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

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

}

#ball {
	display: none;
}


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

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

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

#discWrapper h2 {
	font-size: 27px;
	font-weight: 600;
	color: #fff;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',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;
}

}

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

#discWrapper {
	width: 100%;
	background-color: #dcaac1;
}

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

#discWrapper h2 {
	font-size: 27px;
	font-weight: 600;
	color: #fff;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',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;
}

}

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

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

#discWrapper h2 {
	font-size: 17px;
	font-weight: 600;
	color: #fff;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	margin-bottom: 30px;
	line-height: 1.7em;
	letter-spacing: 0.02em;
}

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

}

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

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

}

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

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

#productWrapper {
	width: 100%;
	margin-top: 80px;
}

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

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

.productRBox h3 {
	font-family: "游ゴシック体","ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-weight: 400;
	margin: 0 0 20px;
	font-size: 17px;
	color: #E4007F;
}

.productRBox h4 {
	font-weight: 400;
	font-size: 17px;
	margin-bottom: 30px;
	color: #674556;
}

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

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

}

@media screen and (max-width: 999px) and (min-width: 580px) {

#productWrapper {
	width: 100%;
	margin-top: 60px;
}

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

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

.productRBox h3 {
	font-family: 'PT Serif', serif;
	font-weight: 400;
	margin: 0 0 20px;
	font-size: 17px;
	color: #E4007F;
}

.productRBox h4 {
	font-weight: 400;
	font-size: 17px;
	margin-bottom: 30px;
	color: #674556;
}

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

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

}

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

#productWrapper {
	width: 100%;
	margin-top: 45px;
}

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

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

.productRBox h3 {
	font-family: 'PT Serif', serif;
	font-weight: 400;
	margin: 5px 0 20px;
	font-size: 17px;
	color: #E4007F;
}

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

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

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

.productRBox dd br {
	display: none;
}

}

.productBox {
	margin-bottom: 100px;
}

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

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

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

.productRBox dt,.productRBox dd {
	color: #674556;
	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: 20px;
	float: right;
}

.btnBuy a {
	font-size: 16px;
	font-family: "Segoe UI", "sans-serif";
	font-weight: 400;
	color: #fff;
	background-color: #dcaac1;
	padding: 10px 24px;
	text-decoration: none;
}

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

.btnSLP {
	text-align: center;
	margin-bottom: 100px;
	margin-top: 20px;
	font-size: 13px;
}
.btnSL {
	text-align: center;
	margin: 10px auto 10px;
}

.btnSL a {
	font-size: 16px;
	font-family: "Segoe UI", "sans-serif";
	font-weight: 400;
	color: #fff;
	background-color: #dcaac1;
	padding: 10px 24px;
	text-decoration: none;
}

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

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

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

footer {
	padding: 20px 0 25px;
	background-color: #674556;
	text-align: center;
}

footer div {
	width: 100%;
	height: auto;
	margin: 55px auto 55px;
}

footer img {
	width: 35%;
	height: auto;
}

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

@media screen and (max-width: 579px) {
	footer div {
		width: 100%;
		height: auto;
		margin: 45px auto 40px;
	}
	
	footer img {
		width: 65%;
		height: auto;
	}
	
	footer p {
		text-align: center;
		color: #fff;
		font-size: 9px;
	}

}