/* トップエリア
-------------------------------------------------------------------------------------------------*/

/* 960以上 =============================*/
@media only screen and (min-width: 960px){
#top-area{
	padding: 30px;
	overflow: hidden;
}
}

/* トップイメージ
-------------------------------------------------------------------------------------------------*/
#top-image{
	width: 100%;
	height: auto;
}

/* 960以上 =============================*/
@media only screen and (min-width: 960px){
#top-image{
	float: left;
	width: 50%;
}
}

/* イントロダクション
-------------------------------------------------------------------------------------------------*/
.intro{
	width: calc(100% - 30px);
	max-width: 600px;
	margin: 20px auto;
}
.intro h2{
	margin: 20px 0;
	font-size: 1rem;
	text-align: center;
	color: #ff4783;
}
.intro p + p{
	margin-top: 10px;
}

/* 960以上 =============================*/
@media only screen and (min-width: 960px){
.intro{
	float: right;
	width: calc(50% - 40px);
}
}

/* LIKE
-------------------------------------------------------------------------------------------------*/

#sanshin-set #like{
	height: 60px;
	margin: 30px auto;
	background: #fff;
}
/* 600以上 =============================*/
@media only screen and (min-width: 600px){
#sanshin-set #like{
	height: 30px;
}
}

/* オーダーエリア
-------------------------------------------------------------------------------------------------*/
#order-area{
	clear: both;
	overflow: hidden;
}

/* 960以上 =============================*/
@media only screen and (min-width: 960px){
#order-area{
	padding: 30px;
}
}

/* スライダー
-------------------------------------------------------------------------------------------------*/
.slider img {
	width: 100%;
	height: auto;
}

/* slick-initialized付加後に表示 */
.slider{
	display: none;
}
.slider.slick-initialized{
	display: block;
}

/* 960以上 =============================*/
@media only screen and (min-width: 960px){
.slider{
	float: left;
	width: 50%;
}
}

/* セレクトエリア
-------------------------------------------------------------------------------------------------*/
#select-area{
	margin: auto;
	padding: 0 15px;
}
#select-area h2{
	margin: 20px 0 0 5px;
	font-size: 0.9rem;
	color: #5b2;
}
#select-area h2 span{
	font-weight: normal;
	color: #444;
}
#select-area h2 span + span{
	margin-left: 1em;
	font-size: 12px;
	font-weight: normal;
}

#select-area input[type="radio"]{
	display: none;
}

/* 960以上 =============================*/
@media only screen and (min-width: 960px){
#select-area{
	float: right;
	width: 50%;
}
#select-area h2{
	font-size: 1rem;
}
}

/*----------------------------*/
.thumb-item-nav{
	overflow: hidden;
}
.thumb-item-nav li{
	float: left;
	width: 14.28571%;
	width: calc(100% / 7);
}
.thumb-item-nav img{
	width: 100%;
	border: 4px solid transparent;
}
.thumbnail-current img{
	border: 4px solid #5b2;
}

/*----------------------------*/
#liner-select,
#size-select{
	padding: 5px 0 5px 4px;
}
#liner-select li,
#size-select li{
	display: inline-block;
	vertical-align: top;
	margin-right: 5px;
}
#liner-select li:first-child{
	margin-bottom: 10px;
}

/* ラベル
----------------------------*/
#liner-select label,
#size-select label{
	display: table-cell;
	vertical-align: middle;
	height: 40px;
	line-height: 1.2;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	border: 1px solid #aaa;
}
#size-select label{
	width: 60px;
}
#liner-select label{
	padding-left: 10px;
	padding-right: 10px;
}
#liner-select label span,
#size-select label span{
	display: block;
	font-size: 9px;
}
#liner-select input:checked + label,
#size-select input:checked + label{
	color: #fff;
	background: #5b2;
	border: 1px solid #5b2;
	text-shadow: 0 0 2px rgba(255,255,255,0.4);
	box-shadow: 0 0 5px rgba(80,176,32,0.4);
}
#select-area .out{
	_display: none;
	pointer-events: none;
	opacity: 0.5;
	position:relative;
}
#select-area .out:before{
	position:absolute;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	top: 4px;
	left: 4px;
	content: "";
	background: linear-gradient(135deg, transparent, transparent 49%, black 49%, black 51%, transparent 51%, transparent);
}

/* 商品説明
-------------------------------------------------------------------------------------------------*/
#description{
	margin: 40px 0 0;
	text-align: center;
}
#description h2{
	width: 90%;
	max-width: 600px;
	margin: 0 auto 20px;
}
#description h2 img{
	width: 100%;
}
#description > section{
	display: inline-block;
	vertical-align: top;
	width: 45%;
	margin: 0 5px 40px;
}
#description > section:last-child{
	_width: 90%;
}
#description section img,
#description video{
	width: 100%;
	height: auto;
}
#description h3{
	margin: 10px 0;
	font-size: 0.9rem;
	line-height: 1.2;
	color: #ff4783;
}
#description p{
	font-size: 0.8rem;
	text-align: left;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
.note{
	display: block;
	margin: 5px 0 0 10px;
	font-size: 0.6rem;
	text-align: left;
	list-style: outside;
	color: #844;
}

/* 600以上 =============================*/
@media only screen and (min-width: 600px){
#description h3{
	font-size: 1rem;
}
#description p{
	font-size: 0.9rem;
}
}

/* 960以上 =============================*/
@media only screen and (min-width: 960px){
#description{
	padding: 20px;
}
#description > section{
	width: 30%;
	margin: 0 10px 40px;
}
}

/* お客さまのレビュー
-------------------------------------------------------------------------------------------------*/
#review{
	overflow: hidden;
	background: #e3b079;
	background: url(../common/bg_cork01.png);
	background-size: 300px 300px;
}
#review h2{
	margin: 20px 0 0;
	text-align: center;
	color: #fff;
	text-shadow: 0 0 3px rgba(0,0,0,1);
}
#review .review-area{
	width: 75%;
	max-width: 1000px;
	height: 400px;
	margin: auto;
	padding-right: 10px;
	overflow: scroll;
		-webkit-overflow-scrolling: touch;
}
#review section{
	max-width: 600px;
	margin: 20px auto;
	padding: 10px 10px 5px;
	background-color: #fffbf2;
	border-radius: 3px;
	box-shadow: 3px 5px 5px rgba(0,0,0,0.2);
}

#review .review-area h3,
#review .review-area h4{
	display: inline-block;
}
#review .review-area h3{
	margin: 0;
	text-align: center;
	color: #280;
	font-size: 1rem;
}
#review .review-area h4,
#review time{
	font-size: 0.8rem;
}
#review .rating{
	display: block;
}
#review .star5:before,
#review .star4:before,
#review .star3:before,
#review .star2:before,
#review .star1:before{
	color: #fa0;
	text-shadow: 0 0 5px rgba(255,160,0,1);
}
#review .star4:after,
#review .star3:after,
#review .star2:after,
#review .star1:after{
	color: #aaa;
}
#review .star5:before{
	content:"★★★★★";
}
#review .star4:before,
#review .star1:after{
	content:"★★★★";
}
#review .star3:before,
#review .star2:after{
	content:"★★★";
}
#review .star2:before,
#review .star3:after{
	content:"★★";
}
#review .star1:before,
#review .star4:after{
	content:"★";
}
#review pre{
	white-space: pre-wrap;
	font-size: 0.8rem;
	margin: 5px 0;
	padding: 0 0;
	background: linear-gradient(#ccc 1px, transparent 1px);
	background-size: auto 2.5em;
	line-height: 2.5em;
}
/* 960以上 =============================*/
@media only screen and (min-width: 960px){
#review section{
	padding: 10px 20px 5px;
	background-image: url(../common/nabbie-stump.png);
	background-size: 100px;
	background-repeat: no-repeat;
	background-position: top right;
}
#review section:nth-child(odd){
	margin-left: 60px;
	margin-right: auto;
}
#review section:nth-child(even){
	margin-right: 60px;
	margin-left: auto;
}
}

/* 価格表示エリア
-------------------------------------------------------------------------------------------------*/
.order-price,
.soryo{
	margin-bottom: 10px;
	text-indent: 5px;
}
.order-price{
	padding-top: 10px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #a00;
}
.order-price:before{
	content: "￥ ";
	font-size: 0.8rem;
	font-weight: normal;
}
.soryo{
	padding-bottom: 10px;
	color: #555;
	font-size: 1rem;
	font-weight: normal;
}
.soryo:before{
	content: "国内送料 ";
	font-size: 0.8rem;
}
.order-price:after{
	content: "税込・送料込";
	margin-left: 5px;
	font-size: 0.6rem;
	font-weight: normal;
}

/* ボタンエリア
-------------------------------------------------------------------------------------------------*/
.btn-area{
	max-width: 600px;
	margin: auto;
	padding: 0 0 10px;
	overflow: hidden;
}
.amount-area{
	display: none;
	float: left;
	_margin-right: 10px;
	vertical-align: bottom;
}
.add-cart{
	width: 100%;
	max-width: 600px;
	height: auto;
	margin: auto;
	padding: 20px 0;
	font-size: 1rem;
	background-image: url(../common/cart.svg);
	background-position: center left 25%;
	background-repeat: no-repeat;
	background-size: 8%;
}
.delay-send{
	display: block;
	margin-bottom: 5px;
	font-size: 0.8rem;
	color:#888;
}