@charset "utf-8";
/*商品紹介メニュー部*/
#product-nav{
	margin:0;
	padding:0;
	display:flex;
	flex-flow:wrap;
	justify-content:center;
	align-content:center;
}
#product-nav li{
	list-style:none;
	width:46.875%;
	height:50px;
	border:solid 1px #000;
	background:#9370db;
}
#product-nav li:nth-child(2){
	border-left:none;
}
#product-nav li:nth-child(3){
	border-top:none;
}
#product-nav li:nth-child(4){
	border-left:none;
	border-top:none;
}

#product-nav li a{
	display:block;
	width:100%;
	font-size:1.5em;
	font-weight:bold;
	line-height:50px;
	color:#fff;
	text-decoration:none;
	text-align:center;

}
#product-nav li a:hover{
	background:rgba(255,255,255,0.5);
	color:#c71585;
}
/*----------------PC表示---------------------*/
@media screen and (min-width:640px){
	

	#product-nav li.pn{
		border:none;
		width:22.2222%;
		border-top:solid 1px #000;
		border-right:solid 1px #000;
		border-bottom:solid 1px #000;
	}
	#product-nav li:first-child{
		border-left:solid 1px #000;
	}
}
/*----------------------------------------*/
/*モーダルウィンドウ*/
.modal-content{
	width: 80% ;
	height:60%;
	margin: 0 ;
	padding: 10px 20px ;
	border: 2px solid #9370db;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
	color:#000;
	overflow:scroll;
}

.modal-content p:first-child,
.modal-content h4,
.modal-content h5{
	text-align:center;
}
.modal-content h4{
	border-bottom:solid 3px #9370db;
	font-size:1.5em;
}
.modal-content h5{
	font-size:1.25em;
	border-bottom:dotted 3px #9370db;
	margin-left:10px;
	margin-right:10px;
}


#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.button-link {
	color: #00f ;
	text-decoration: underline ;
	font-weight:bold;
}

.button-link:hover {
	cursor: pointer ;
	color: #f00 ;
}
/*設定部*/

.product-menu{
	margin:0 auto;
	padding:0;
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	border:solid 1px #9370db;
	
}
.product-menu li{
	list-style:none;
	width:44.4444%;
	border:solid 1px #000;
	margin:1.1111%;
}


.product-menu a{
	display:block;
	background-size:cover;
	width:100%;
	height:100%;
	background:#fff;
	text-decoration:none;
	position:relative;
}

/*メニュー文字の位置*/
.product-menu a h4{
	position:absolute;
	color:#fff;
	text-shadow:
		1px 1px 0 #000,
		-1px 1px 0 #000,
		1px -1px 0 #000,
		-1px -1px 0 #000;
text-shadow:
		1px 1px 1px #000,
		-1px 1px 1px #000,
		1px -1px 1px #000,
		-1px -1px 1px #000;
	font-weight:bold;
	text-align:center;
	font-size:1.125em;/*18px*/
	white-space:nowrap;
	left:50%;
	top:100%;
	transform: translate(-50%,-100%);
	margin:0;
}
/*----------------PC表示----------------*/
@media screen and (min-width:640px){
	.modal-content{
		width: 50% ;
		height:80%;
	}
	.product-menu a h4{
		font-size:1.5em;/*24px*/
	}
}
/*-------------------------------------*/
/*画面に合わせて縮小設定*/
.wrapper{
    position:relative;
    width: 100%;
}
.wrapper:before{
    content:"";
    display:block;
    padding-top:69.3181%;/* 高さを幅 3:4にしたければ3/4*100=75% */
}
.contents{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
/*-------------差分レイアウト-------------*/
/*羊羹*/
#youka ul:after{
	content:"";
	display:block;
	width:44.4444%;
	margin:1.1111%;
}
/*季節限定*/
#limited strong{
	color:#f00;
}

#limited .product-menu li{
	width:33.3333%;
}

#limited .wrapper:before {
    padding-top:100%;
}