@charset "utf-8";

/* ******** パンくずリスト ******************************** */

.Breadcrumb {
	width: 100%;
	float: left;
	margin-bottom: 1%;
}

.Breadcrumb ul {
	width: 100%;
	list-style-type: none;
	float: left;
	margin-bottom: 0.4%;
	font-size: 12px;
	padding: 0;
}

.Breadcrumb ul > li {
	float: left;
}

.Breadcrumb ul > li > a {
	color: #004b91;
	text-decoration: none;
}

.Breadcrumb ul > li > a:hover {
	color: #ff7e00;
}

.Breadcrumb ul > li:after {
	content: "＞";
}

.Breadcrumb ul > li:last-child:after {
	content: none;
}

/* ********************************************************* */

.mainImage {
	margin-bottom: 2%;
}

.product-mainImage {
	width: 30%;
	margin-right: 2%;
	float: left;
}

.mainImage-list {
	width: 100%;
	text-align: center;
}

.mainImage-list img {
	width: 40px;
	padding: 1%;
}

/* ****************** モーダルウィンドウの設定 ******************** */

.modal-content {
	max-width: 100%;
	position: fixed;
	display: none;
	z-index: 8888; /* 前面に設置（2） */
	margin: 0;
	padding: 0;
	border: 10px solid #fff; /* メイン画像の枠線の設定 */
	background: #fff; /* メイン画像の背景の設定 */
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-align: center;
}

.modal-content img {
	max-width: 80%;
	min-width: 1px;
	max-height: 800px;
	min-height: 1px;
}

.modal-content p {
	margin: 0;
	padding: 0;
	z-index: 9999; /* 最前面に設置（3） */
	text-align: center;
	position: absolute;
	top: -30px;
	right: -30px;
	background: #3b3b3b;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border: 4px #fff solid;
}

.modal-content a {
	display: block;
	padding-top: 4%;
	font-size: 40px;
	color: #fff;
}

.modal-overlay {
	width: 100%;
	height: 120%; /*スマホ用の設定値 */
	background-color: rgba(0,0,0,0.75); /* 半透過の設定値 */
	z-index: 7777; /* 背景に設置（1） */
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
}

.modal-open:hover {
	cursor: pointer;
}

.modal-close:hover {
	cursor: pointer;
}

.main-imageCenter {
	display: block;
 	margin: 0 auto;
	max-width: 80%;
	max-height: 630px;
}

/* ********************************************************* */


.main-product {
	width: 68%;
	float: left;
}

.main-product h1 {
	font-size: 20px;
	font-weight: normal;
	border-bottom: 1px #ccc solid;
	margin-bottom: 2%;
	padding: 0.5%;
}

.main-product p {
	padding: 0;
	margin-bottom: 2%;
	color: #cb0000;
}


.item-select {
	width: 100%;
	list-style-type: none;
	margin-bottom: 0.3%;
}

.item-select:after {
	content: "";
	display: block;
	clear: both;
}

.item-select li {
	width: 23.5%;
	margin-right: 2%;
	margin-bottom: 1%;
	padding: 0.8% 0;
	float: left;
	cursor: pointer;
	color: #004b91;
	word-wrap: break-word;
	font-size: 15px;
	text-align: center;
	border: 1px #999 solid;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background: -moz-linear-gradient(top center, #fff 0%, #dadada 100%);
	background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#dadada));
	background: linear-gradient(#fff, #dadada);
}

.item-select li:nth-child(4n+4) {
	margin-right: 0;
}


.item-select li:hover {
	border: 1px #ce9c4b solid;
	background: -moz-linear-gradient(top center, #ffe38e 0%, #ffb052 100%);
	background: -webkit-gradient(linear, center top, center bottom, from(#ffe38e), to(#ffb052));
	background: linear-gradient(#ffe38e, #ffb052);
}

.select-item {
	background: #fff6d9;
	padding: 1%;
}

.this-none {
	display: none;
}

#select {
	border: 1px #ce9c4b solid;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background: -moz-linear-gradient(top center, #ffe38e 0%, #ffb052 100%);
	background: -webkit-gradient(linear, center top, center bottom, from(#ffe38e), to(#ffb052));
	background: linear-gradient(#ffe38e, #ffb052);
	color: #cd0000;
	text-decoration: none;
}

#item_price {
	margin: 1%;
}

#item_price span {
	color: #cb0000;
	font-size:120%;
}

.item-select span {
	color: #cd0000;
	font-weight: bold;
}



/* ********* メインの商品設定 ******** */


.product-data {
	width: 73%;
	margin-right: 2%;
	float: left;
}

.product {
	width: 100%;
	margin-bottom: 2%;
	float: left;
}

.product-data table {
	width: 100%;
	border: 1px #ccc solid;
	background: #fff;
	font-size: 13px;
}

.product-data table tr {
	border-bottom: 1px #ccc solid;
}

.product-data table tr:last-child {
	border: 0;
}

.product-data table tr td {
	border-right: 1px #ccc solid;
	padding: 2%;
	vertical-align: middle;
}

.product-data table tr td:nth-child(1) {
	width: 15%;
	background: #ebebeb;
}

.product-data table tr td:nth-child(2) {
	border: 0;
}

.product-data table img {
	margin-right: 1.5%;
}

.product-data table tr:nth-child(1) td:nth-child(2) {
	color: #cd0000;
	font-weight: bold;
}

.item_quantity {
	color:#ff4500;
	font-size:18px;
	font-weight: bold;
}

.item_message {
	color:#3cb371;
	font-size:18px;
	font-weight: bold;
}

.cart_message {
	color:#ff4500;
	font-size:16px;
	font-weight: bold;
}

.product-cart {
	width: 25%;
	background: #fff;
	float: left;
	border: 1px #ccc solid;
	padding: 1%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	margin-bottom: 1%;
}


.product-cart table {
	width: 100%;
	font-size: 18px;
}

.product-cart table td:nth-child(1) {
	width: 35%;
	font-size: 14px;
	font-weight: bold;
	padding: 5% 1%;
}

.product-cart table td:nth-child(2) {
	width: 65%;
	text-align: right;
	padding: 5% 1%;
}

.product-cart table tr {
	border-bottom: 1px #ccc solid;
}

.product-cart table tr:last-child {
	border: 0;
}

.product-cart table span {
	color: #cb0000;
	font-weight: bold;
}

.product-cart h3 {
	font-size: 14px;
	color: #fff;
	background: #cd0000;
	padding: 3%;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.product-cart ul {
	width: 100%;
	margin: 0;
	list-style-type: none;
}

.product-cart ul li {
	width: 100%;
	padding: 0.8% 0;
}

/* ****** カート関係 ****** */

.cart-quantity {
	padding: 2%;
	text-align: right;
}

.cart-button {
	width: 100%;
	padding: 7% 0;
	margin-top: 4%;
	text-align: center;
	border: 1px #ce9c4b solid;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background: -moz-linear-gradient(top center, #ffe38e 0%, #ffb052 100%);
	background: -webkit-gradient(linear, center top, center bottom, from(#ffe38e), to(#ffb052));
	background: linear-gradient(#ffe38e, #ffb052);
	cursor: pointer;
}

.cart-button:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
}

/* ******************************************* */


.product-faq {
	width: 100%;
	margin: 1% 0;
}

.product-faq p {
	color: #000;
	font-size: 13px
}

.product-faq:after {
	content: "";
	display: block;
	clear: both;
}

.product-faq ul {
	width: 100%;
	list-style-type: none;
	font-size: 13px;
	float: left;
}

.product-faq ul li {
	width: 20%;
	float: left;
	padding: 0.5% 0;
}

.product-faq ul li a {
	color: #004b91;
	text-decoration: none;
}

.product-faq ul li a:hover {
	color: #ff7e00;
	text-decoration: underline;
}

.product-faq div {
	width: 100%;
	background: #fff;
	padding: 1.5%;
	float: left;
	margin-bottom: 2%;
}


/* ***** アルコールの設定 ****** */

.alcohol-alert {
	padding: 1%;
}

.alcohol-alert h3 {
	font-size: 24px;
	color: #cd0000;
}

.alcohol-alert p {
	font-size: 18px;
	color: #000;
	padding: 0.8%;
	margin: 0;
}

/* ***************************** */



/* ************************************************************* */













.product-information {
	width: 100%;
	float: left;
	margin-top: 4%;
	margin-bottom: 4%;
	padding: 0.5%;
}

.product-information:after {
	content: "";
	display: block;
	clear: both;
}

.product-information h2 {
	padding:2%;
	border: 1px #aeaeae solid;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	color:#282828;
	cursor:pointer;
	background: -moz-linear-gradient(top center, #fff 0%, #dadada 100%);
	background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#dadada));
	background: linear-gradient(#fff, #dadada);
}

.product-information h2:hover{
	color:#ff8c00;
}

.product-information a {
	color: #004b91;
	text-decoration: none;
}

.product-information a:hover {
	color: #ff7e00;
	text-decoration: underline;
}

.product-information table {
	width: 100%;
	font-size: 14px;
}

.product-information table tr {
	border-bottom: 1px #ccc dotted;
}

.product-information table th {
	width: 9%;
	text-align: right;
	padding: 0.5%;
}

.product-information table td {
	width: 91%;
	padding: 0.5%;
}


/* *********************************************************** */











.product-carousel {
	width: 100%;
	float: left;
	margin-bottom: 4%;
}

.product-carousel:after {
	content: "";
	display: block;
	clear: both;
}

.product-carousel h2 {
	font-size: 15px;
	color: #1c1c1c;
	border-left: 15px #ff9d20 solid;
	background: #eeeeee;
	margin-bottom: 2%;
	padding: 0.7% 1.5%;
	border-radius: 4px;        /* CSS3草案 */
	-webkit-border-radius: 4px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 4px;   /* Firefox用 */
}

.carousel-list {
	width: 100%;
	padding: 1.5%;
	float: left;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	margin-bottom: 2%;
	border-bottom: 1px #ccc solid;
}

.carousel-list > div {
	width: 10%;
	padding: 0 1%;
	float: left;
	word-wrap: break-word;
	text-align: center;
}

.carousel-list div > a {
	font-size: 14px;
	color: #004b91;
	text-decoration: none;
}

.carousel-list div > a:hover {
	color: #ff7e00;
	text-decoration: underline;
}

.carousel-list div > a div:nth-child(1) {
	width: 100%;
	height: 200px;
	display: table-cell;
	vertical-align: middle;
}

.carousel-list div > a div:nth-child(1) img {
	max-width: 100%;
	min-width: 1px;
	max-height: 200px;
	min-height: 1px;
}

.carousel-list div > a  div:nth-child(2) {
	width: 100%;
	margin: 5% 0;
	text-align: left;
}

.carousel-list div > a  div:nth-child(3) {
	width: 100%;
	color: #cd0000;
}

.carousel-list div > a  div:nth-child(3) span {
	font-weight: bold;
}

/* ********************************************************** */




/* ***** オンライン併売 ***** */

.online-soldOut {
	width: 100%;
	font-size: 13px;
	color: #cd0000;
	float: left;
	border-top: 1px #ccc solid;
	padding: 1%;
	padding-left:1em;
	text-indent:-1em;
}

/* *************************************************** */



/* ***** 売り切れ設定 ***** */

.sold-out {
	width: 100%;
	float: left;
	padding: 2%;
}

.sold-out > p {
	color: #cd0000;
	font-size: 18px;
	padding: 0;
	margin-bottom: 2%;
}

.sold-out > ul {
	width: 100%;
	list-style-type: none;
}

.sold-out > ul li a {
	color: #004b91;
	text-decoration: none;
}

.sold-out > ul li a:hover {
	color: #ff7e00;
	text-decoration: underline;
}


/* **************************************************** */











/* ******* タブレット ****** */

@media screen and (min-width: 600px) and (max-width: 959px) {

	/* ***** パンクズリスト ****** */
	.Breadcrumb {
		margin-bottom: 4%;
	}
	/* ****************************** */


	/* **** モーダル設定 **** */
	.modal-content {
		max-width: 70%;
		left: 0;
		top: 0;
	}

	.modal-content img {
		width: 100%;
	}

	/* ***************************** */




	.product-mainImage {
		width: 42%;
		margin-right: 3%;
	}

	.main-product {
		width: 55%;
	}

	.main-product h1 {
		font-size: 16px;
		font-weight: normal;
		padding: 0;
	}

	.main-product p {
		font-size: 14px;
		margin-bottom: 5%;
	}

	.item-select {
		margin-bottom: 4%;
	}

	.item-select li {
		width: 32%;
		margin-right: 2%;
		margin-bottom: 2%;
		padding: 3% 0;
		font-size: 13px;
	}

	.item-select li:nth-child(3n+3) {
		margin-right: 0;
	}

	.item-select li:nth-child(4n+4) {
		margin-right: 2.5%;
	}

	.product {
		margin-bottom: 4%;
	}

	/* *** 商品公式画像リスト *** */
	.mainImage {
		margin-bottom: 6%;
	}

	.mainImage-list img {
		width: 20%;
		padding: 1%;
	}
	/* ************************* */

		/* *** 商品データ *** */
		.product-data {
			width: 100%;
			margin: 0;
		}

		.product-data table tr td {
			border-right: 1px #ccc solid;
			padding: 3.5%;
			vertical-align: middle;
		}

		.product-data table tr td:nth-child(1) {
			width: 25%;
			background: #ebebeb;
		}

		.product-data table tr td:nth-child(2) {
			border: 0;
		}

		/* *** 商品データ内のヘルプ *** */
		.product-faq div {
			padding: 2%;
			margin-bottom: 2%;
		}

		.product-faq ul li {
			width: 33%;
			float: left;
			padding: 1.5% 0;
		}
		/* ***************************** */

		/* ****************** */

		/* *** 購入カート欄 *** */
		.product-cart {
			width: 100%;
			float: left;
			margin-bottom: 4%;
		}
		/* ****************** */





	/* **** 商品情報 **** */
	.product-information {
		margin-top: 7%;
		margin-bottom: 7%;
	}

	.product-information table th {
		width: 15%;
		text-align: right;
		padding: 1%;
	}

	.product-information table td {
		width: 85%;
		padding: 1%;
	}
	/* *************************** */




	.product-carousel h2 {
		margin-bottom: 3%;
		color: #ff7800;
		border-bottom: 1px #ff7800 solid;
	}

	.carousel-list {
		width: 100%;
		padding: 1.5%;
		float: left;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		margin-bottom: 2%;
		border-bottom: 1px #ccc solid;
	}

	.carousel-list > div {
		width: 15%;
		margin-right: 2%;
		padding: 0 1%;
		float: left;
		word-wrap: break-word;
		text-align: center;
	}

	.carousel-list > div > a div:nth-child(1) {
		width: 100%;
		height: 200px;
		display: table-cell;
		vertical-align: middle;
	}

	.carousel-list > div > a div:nth-child(1) img {
		max-width: 100%;
		min-width: 1px;
		max-height: 200px;
		min-height: 1px;
	}

	.carousel-list > div > a  div:nth-child(2) {
		width: 100%;
		margin: 5% 0;
		text-align: left;
	}

	.carousel-list > div > a  div:nth-child(3) {
		width: 100%;
		color: #cd0000;
	}

	.carousel-list > div:nth-child(n+7) {
		display: none;
	}

	.carousel-list > div:nth-child(6) {
		margin: 0;
	}

	.item_quantity {
		color:#ff4500;
		font-weight: bold;
	}

	.item_message {
		color:#3cb371;
		font-weight: bold;
	}

}







/* ******** スマホ *************** */

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

	.Breadcrumb {
		display: none;
	}

	/* **** 公式画像 **** */
	.product-mainImage {
		width: 100%;
		margin: 0;
	}

	.mainImage {
		padding-bottom: 10%;
		border-bottom: 1px #ccc solid;
	}

	.mainImage img {
		width: 60%;
	}

	.mainImage-list {
		display: none;
	}

	.mainImage {
		margin-bottom: 6%;
	}
	/* ************************ */


	/* ***** 商品データ ***** */

	.select-item {
		background: #fff6d9;
		padding: 3%;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	}

	.main-product {
		width: 100%;
	}

	.item-select {
		border-bottom: 1px #ccc solid;
		margin-bottom: 5%;
	}

	#select {
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		background: -moz-linear-gradient(top center, #ffe38e 0%, #ffb052 100%);
		background: -webkit-gradient(linear, center top, center bottom, from(#ffe38e), to(#ffb052));
		background: linear-gradient(top center, #ffe38e 0%, #ffb052 100%);
		color: #cd0000;
		text-decoration: none;
	}

	.item-select li {
		width: 49%;
		margin-right: 2%;
		margin-bottom: 2%;
		padding: 3.5% 0;
		font-size: 15px;
		text-align: center;
		border: 1px #999 solid;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		background: -moz-linear-gradient(top center, #fff 0%, #dadada 100%);
		background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#dadada));
		background: linear-gradient(top center, #fff 0%, #dadada 100%);
		font-weight: normal;
	}

	.item-select li:nth-child(2n+2) {
		margin-right: 0;
	}

	.font-resize {
		color: #555;
		font-size: 14px;
		padding: 3%;
		margin-bottom: 8%;
		font-weight: bold;
	}

	.main-product p {
		font-size: 13px;
		padding: 0;
		margin-bottom: 6%;
		color: #cb0000;
	}

	.product-data {
		width: 100%;
		margin: 0%;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	}

	.product-cart {
		width: 100%;
		padding: 1%;
		margin-bottom: 1%;
	}

	.product-data table {
		border: 1px #999 solid;
		margin-bottom: 2%;
	}

	.product-data table tr {
		border: 0;
		border-bottom: 1px #ccc dotted;
	}

	.product-data table tr td:nth-child(1) {
		width: 100%;
		display: block;
		border: 0;
		padding: 2% 3% 0% 3%;
		font-weight: bold;
		background: #fff;
	}

	.product-data table tr td:nth-child(2) {
		width: 100%;
		display: block;
		padding: 3% 6%;
	}

	.product-cart {
		border: 1px #999 solid;
	}

	.product-faq {
		display: none;
	}

	/* ************************ */



	/* *** モーダル設定 *** */
	.modal-content {
		max-width: 70%;
		left: 0;
		top: 0;
	}

	.modal-content img {
		width: 100%;
	}

	.modal-content p {
		top: -20px;
		right: -20px;
		background: #3b3b3b;
		width: 30px;
		height: 30px;
	}

	.modal-content a {
		display: block;
		padding-top: 10%;
		font-size: 20px;
		color: #fff;
	}

	/* ***************************** */




	.product-information h2 {
		font-size: 15px;
		margin-bottom: 3%;
		padding: 4% 2%;
	}

	.product-information table {
		border: 1px #ccc solid;
		margin-bottom: 12%;
	}

	.product-information table tr {
		border-bottom: 1px #ccc dotted;
	}

	.product-information table th {
		width: 100%;
		text-align: left;
		padding: 3%;
		display: block;
	}

	.product-information table td {
		width: 100%;
		padding: 3%;
		display: block;
	}





	.product-carousel {
		width: 100%;
		float: left;
		margin-bottom: 20%;
	}

	.product-carousel h2 {
		font-size: 15px;
		margin-bottom: 3%;
		padding: 4% 2%;
	}

	.carousel-list {
		width: 100%;
		padding: 5%;
		float: left;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		margin-bottom: 5%;
		border: 1px #ccc solid;
	}

	.carousel-list > div {
		width: 100%;
		margin-bottom: 5%;
		padding: 0 1%;
		float: left;
		word-wrap: break-word;
		text-align: center;
		border-bottom: 1px #ccc solid;
	}

	.carousel-list > div:nth-child(5) {
		border: 0;
	}

	.carousel-list div > a  div:nth-child(3) {
		width: 100%;
		color: #cd0000;
		margin-bottom: 5%;
	}

	.carousel-list > div:nth-child(n+6) {
		display: none;
	}


	/* ***** オンライン併売 ***** */

	.online-soldOut {
		margin-bottom: 15%;
	}

	/* *************************************************** */


	/* ***** 売り切れ設定 ***** */

	.sold-out {
		width: 100%;
		float: left;
		padding: 2%;
		margin-bottom: 12%;
	}

	.sold-out > p {
		color: #cd0000;
		font-size: 16px;
		padding: 0;
		margin-bottom: 8%;
	}

	.sold-out > ul {
		width: 100%;
		list-style-type: none;
	}

	.sold-out > ul li {
		font-size: 14px;
	}

	.sold-out > ul li a {
		color: #004b91;
		text-decoration: none;
	}

	.sold-out > ul li a:hover {
		color: #ff7e00;
		text-decoration: underline;
	}

	/* **************************************************** */

	.item_quantity {
		color:#ff4500;
		font-size:16px;
		font-weight: bold;
	}

	.item_message {
		color:#3cb371;
		font-size:16px;
		font-weight: bold;
	}

}