@charset "UTF-8";

/***************************************
01.Reset
02.共通
　ーヘッダー
　ーパンくず
　ーフッター
03.トップページ
04.
05.

***************************************/
/***************************************
01.Reset
***************************************/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

:root {
	--bg-color: #11244A;
	--p-bg-color:#F4F4EA;
	--b-bg-color:#F4F4EA;
	--b-text-color: #333;
	--p-text-color: #5E4D7D;
	--text-color: #fff;
	--accent-color:#65A5D2;
	--bt-color:#EBA223;
	--link-color:#fff;
	--b-link-color:#11244A;
	--w-bg-color:rgba(255 255 255/0.7);
	--pink-text-color:rgba(186,116,129,1);
	--grad-color:linear-gradient(135deg, rgba(186,116,129,1) 0%, rgba(94,77,125,1) 100%);
	--grad-rev-color:#65A5D2;
	--h-bg-color:linear-gradient(90deg, rgba(186,116,129,1) 70%, rgba(186,116,129,0) 100%);
	--current-bg-color:linear-gradient(90deg, rgba(94,77,125,0) 0%, rgba(94,77,125,1) 30%, rgba(94,77,125,0) 100%);
	--menu-font:"Noto Sans JP", serif;
	--default-font:"Noto Sans JP", serif;
	--daruma-font:"Darumadrop One", sans-serif;
	--box-shadow:0px 4px 4px rgba(0,4,4,0.25);
	--text-shadow:0px 4px 4px rgba(0,0,0,0.25);
}

/***************************************
10.GOODS sec_5
***************************************/
#goods {
	text-align: center;
	padding-bottom: 80px;
	
}
.comingsoon{
	text-align: center;
	font-size: 20px;
	padding: 80px 0 140px;
	text-align: center;
}
#goods h3{
	font-size: 19px;
	font-weight: 600;
}

#goods h4{
	font-size: 16px;
	font-weight: 600;
	padding-bottom: 0px;
}
#goods .goods-bt{
	padding: 20px 0;
}
#goods .goods-bt a.bt{
	background: var(--bt-color);
	color: white;
	font-weight: 600;
}
#goods ul li{
	padding-bottom: 48px;
}
#goods ul li a{
	color: white;
	text-align: left;
	pointer-events: none;
}
.goods-link img{
	display: block;
	margin-bottom: 5px;
}

.title{
	position: relative;
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.title p.name{
	font-size: 18px;
	font-weight: bold;
}
.title p.price{
	text-align: right;
}
.title p.price strong{
	font-size: 16px;
	font-weight: bold;
}
@media screen and (min-width:768px) {
	.goods-link img{
		margin-bottom: 8px;
	}
	#goods ul li a{
		pointer-events:auto;
	}
}

@media screen and (min-width:768px) {
	.goods .modal__content{
		max-width: 852px;
	}
}



.goods .modal__content .modal-inner{
	padding-top: 30px;
}
@media screen and (min-width:768px) {
	.goods .modal__content .modal-inner{
		padding: 50px;
	}
}


.goods .modal__content .modal-inner p.name{
	font-size: 18px;
	line-height: 1.6em;
	padding-bottom: 0;
}
.goods .modal__content .modal-inner > div{
	padding-bottom: 0;
}
.goods .modal__content .modal-inner .title p.price{
	position: relative;
	text-align: right;
}
.goods .modal__content .modal-inner p{
	padding-bottom: 0.5em;
}
@media screen and (min-width:768px) {
	.goods .modal__content .modal-inner p.name{
		font-size: 20px;
		line-height: 1.6em;
	}
	.goods .modal__content .modal-inner p.name br{
		display: none;
	}
	.goods .modal__content .modal-inner p.price strong {
		font-size: 20px;
	}
}


.goods .batsu {
	background: transparent;
	width: 20px;
	height: 20px;
}


.goods .batsu::before,
.goods .batsu::after {
	background:var(--bg-color);
}
@media screen and (min-width:768px) {
	.goods .batsu {
		background: transparent;
		width: 30px;
		height: 30px;
		top: 10px;
		right: 10px;
	}
	.goods .batsu::before,
	.goods .batsu::after {
		height: 30px;
	}
}

#goods .goods-note {
	text-align: left;
}
#goods .goods-note ul{
	margin-bottom: 20px;
}
#goods .goods-note ul li {
	padding-bottom: 4px;

}