@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat');
/* CSS Document */
header{
	padding: 18vh 0 10vh;
	position: relative;
}
header:before{
	content: "";
	width: 50%;
	position: absolute;
	display: block;
	top:0;
	bottom:0;
	background-image: url("../img/bg_l.png");
	background-size: 100% auto;
	background-position: left center;
	background-repeat: no-repeat;
	z-index: -1;
}
header:after{
	content: "";
	width: 50%;
	position: absolute;
	display: block;
	top:0;
	bottom:0;
	right: 0;
	background-image: url("../img/bg_r.png");
	background-size: 100% auto;
	background-position: right center;
	background-repeat: no-repeat;
	z-index: -1;
}
h1{
	width: 40%;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 2;
}
.catch{
	/*background-color: var(--black);*/
	text-align: center;
	padding: 0.5em;
	color: #fff;
	position: relative;
}
.catch:before{
	content: "";
	display: block;
	position: absolute;
	top:0.5em;
	left: 0.5em;
	width: 6em;
	height: 6em;
	background-image: url("../img/gold_line_icon.png");
	background-position: left top;
	background-size: contain;
	background-repeat: no-repeat;
}
.catch:after{
	content: "";
	display: block;
	position: absolute;
	bottom:0.5em;
	right: 0.5em;
	width: 6em;
	height: 6em;
	background-image: url("../img/gold_line_icon.png");
	background-position: left top;
	background-size: contain;
	background-repeat: no-repeat;
	transform: scale(-1,-1);
}

.catch .txt{
	padding: 2.5em 3em 2.5em;
	border: var(--gold) 1px solid;
	position: relative;
	line-height: 1.8em;
}
.catch .txt:before{
	content: "";
	width: 5em;
	height: 5em;
	position: absolute;
	display: block;
	background-image: url("../img/butterfly_r.png");
	background-position: right top;
	background-repeat: no-repeat;
	background-size: contain;
	top:-0.5em;
	right: 0;
}
.catch .txt:after{
	content: "";
	width: 8em;
	height: 6em;
	position: absolute;
	display: block;
	background-image: url("../img/butterfly_l.png");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: contain;
	bottom:-0.5em;
	left: -0.5em;
}
.large{
	width: calc(100% - 4em);
	font-size: 1.3em;
	line-height: 1.5em;
	display: block;
	color: #fff;
	/*border: 1em solid;
	border-image: url("../img/frame.png") 27 round;
	border-image-width: 1.5em;
	padding: 0;
	position: relative;*/
	margin:0 auto 1em;
}
.large span:not(.br2){
	display: block;
	position: relative;
	padding: 1em;
	background-image: url("../img/midasgi_black_bg.jpg");
	color: var(--gold);
	font-weight: bold;
	text-align: center;
	background-repeat: repeat-x;
	background-size: auto 100%;
	
}
.large span:not(.br2):before{
	content: "";
	display: block;
	position: absolute;
	width: 4em;
	top:0;
	bottom: 0;
	left: -2em;
	background-image: url("../img/midasgi_black_side.png");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
.large span:not(.br2):after{
	content: "";
	display: block;
	position: absolute;
	width: 4em;
	top:0;
	bottom: 0;
	right: -2em;
	background-image: url("../img/midasgi_black_side.png");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto 100%;
	transform: scale(-1,-1);
}
#event{
	padding: 2em 0;
	transition: transform 0.5s 0s ease-out,opacity 0.5s 0s ease;
	transform: translateY(2em);
	opacity: 0;
	position: relative;
}
#event.action{
	transform: translateY(0);
	opacity: 1;
}
#event h2{
	width: 15%;
	max-width: 242px;
	margin: 0 auto;
	text-align: center;
}
#event dl{
	padding: 1em 0;
	max-width: 1000px;
	margin: 0 auto;
}

#event dt{
	display: block;
	padding: 0 2em;
}
#event dt span{
	display: block;
	position: relative;
	padding: 1em;
	background-image: url("../img/midasgi_black_bg.jpg");
	color: var(--gold);
	font-weight: bold;
	text-align: center;
	background-repeat: repeat-x;
	background-size: auto 100%;
	
}
#event dt span:before{
	content: "";
	display: block;
	position: absolute;
	width: 4em;
	top:0;
	bottom: 0;
	left: -2em;
	background-image: url("../img/midasgi_black_side.png");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#event dt span:after{
	content: "";
	display: block;
	position: absolute;
	width: 4em;
	top:0;
	bottom: 0;
	right: -2em;
	background-image: url("../img/midasgi_black_side.png");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto 100%;
	transform: scale(-1,-1);
}
#event dd{
	padding: 1em;

	text-align: center;
	color:#fff;
}
#event dd strong{
	font-size: 1.2em;
	line-height: 1.5em;
}

#info{
	background-color: var(--black);
	padding: 0.5em;
	transition: transform 0.5s 0s ease-out,opacity 0.5s 0s ease;
	transform: translateY(2em);
	opacity: 0;
	position: relative;
}
#info.action{
	transform: translateY(0);
	opacity: 1;
}
#info .box{
	border: var(--gold) 1px solid;
	position: relative;
	padding:2em 1em;
	text-align: center;
}
#info h2{
	width: calc(100% - 30vw);
	margin: 0 auto;
	max-width: 700px;
	color: #fff;
	border: 1em solid;
	border-image: url("../img/frame.png") 27 round;
	border-image-width: 1.5em;
	padding: 0;
}
#info .txt{
	width: calc(100% - 20vw);
	margin: 0 auto;
	color: #fff;
	padding: 1em 0;
	position: relative;
	z-index: 10;
	display: block;
}

	#info .box:before{
		content: "";
		width: 6.5vw;
		height: 15em;
		background-image: url("../img/bonbori_red.png");
		background-position: center top;
		background-repeat: no-repeat;
		background-size: contain;
		left: 3vw;
		top:0;
		position: absolute;
		display: block;
		z-index: 3;

	}
	#info .box:after{
		content: "";
		width: 6.5vw;
		height: 15em;
		background-image: url("../img/bonbori_red.png");
		background-position: center top;
		background-repeat: no-repeat;
		background-size: contain;
		right: 3vw;
		top:0;
		position: absolute;
		display: block;
		z-index: 3;
	}
#info h3{
	background-color: var(--gold);
	color: var(--black);
	padding: 0.5em;
	margin-bottom: 1em;
}


/*販売グッズ*/
#goods{
	padding: 2em 0;
	transition: transform 0.5s 0s ease-out,opacity 0.5s 0s ease;
	transform: translateY(2em);
	opacity: 0;
	position: relative;
}
#goods.action{
	transform: translateY(0);
	opacity: 1;
}
#goods h2{
	width: 15%;
	max-width: 242px;
	margin: 0 auto;
	text-align: center;
}

	/*グッズサムネ*/
.goodsWrap {
	text-align: left;
		display: grid;
	grid-template-columns:repeat(4, 1fr);
	column-gap: 0.5em;
	row-gap: 1em;
	padding: 1em 0 0;
}
.itemBox{

	background-color:var(--black);
	padding: 0;
	font-size: 0.8em;
	position: relative;
	border: var(--gold) 1px solid;
	color: var(--gold);
}

.itemBox .new{
	text-align: center;
	background-color:var(--red);
	color: #fff;
}
.itemBox .new:before{
	content: none;
}

.itemBox a:hover{
	background-color:transparent;
}
.image{
	padding: 0.5em 0.5em 0;
	position: relative;
}
.itemBox a{
	position: relative;
	display: block;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.itemBox a:before{
	content: "";
	width: 0;
	height: 100%;
	display: block;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	transition: all 0.2s 0s ease-out;
	background: var(--red);
	opacity: 0.8;
}
.itemBox a:hover:before{
	width: 100%;
}
.itemBox a:after{
	content: "more";
	position: absolute;
	line-height: 1.5em;
	height: 1.5em;
	letter-spacing: 1px;
	width: 100%;
	border-bottom: var(--gold) 2px solid;
	text-align: center;
	top:50%;
	left:0%;
	color: var(--gold);
	z-index: 2;
	display:block;
	opacity: 0;
	transition: all 0.2s 0s ease-out;
	font-weight: bold;
}
.itemBox a:hover:after{
	opacity: 1;
}
.goodsCategory{
	color: #fff;
	padding: 0.2em 0;
	margin-bottom: 0.3em;
}
.itemBox h4{
	padding: 0.5em;
	line-height: 1.5em;
	color:#fff;
}
.price{
	text-align: right;
	font-weight: bold;
	border-top: var(--gold) 1px solid;
	padding: 0.5em;
	padding-left: 2em;
	position: relative;

}
.memo{
	text-align: center;
	background-color: var(--gold);
	color: var(--black);
	font-weight: bold;
}
.goodsNum{
position: absolute;
top:0.2em;
left:0em;
/*padding: 0.25em;*/
width: 2em;
	height: 2em;
background-repeat: no-repeat;
background-position: center;
background-size:contain;
text-align: center;
font-size: 15px;
	line-height: 2em;
font-weight: bold;
	background-color: var(--gold);
	border-radius: 50%;
color: var(--black);
text-shadow: none;
	transform: scale(0.9);
}
ul.list{
	margin-left: 1em;
}
ul.list li{
	text-indent: -1em;
	margin: 0.5em 0;
}
.caution{
	background-color: var(--black);
	color: #fff;
	padding: 0.5em;

}

.caution .box{
	border: var(--gold) 1px solid;
	position: relative;
	padding: 1.5em;
	/*font-size: max(0.9em,12px);*/
}

/*---------------------------------------------------------
@media
------------------------------------------------------------*/
@media (max-width: 1024px) {
header{
	padding: 18vh 0 15vh;
	position: relative;
}
header:before{
	content: "";
	width: 80%;
	position: absolute;
	display: block;
	top:6vw;
	bottom:0;
	background-image: url("../img/bg_l.png");
	background-size: 100% auto;
	background-position: left top;
	background-repeat: no-repeat;
}
header:after{
	content: "";
	width: 80%;
	position: absolute;
	display: block;
	top:0;
	bottom:0;
	right: 0;
	background-image: url("../img/bg_r.png");
	background-size: 100% auto;
	background-position: right bottom;
	background-repeat: no-repeat;
}
	h1{
	width: 55%;

}
.catch .txt:before{
	content: "";
	width: 4em;
	height: 4em;
}
.catch .txt:after{
	content: "";
	width: 6em;
	height: 4em;

}
	.large{
	width: calc(100% - 2em);
	font-size: 1.1em;
	line-height: 1.5em;
}

#event h2{
	width: 20%;
}
	/*グッズサムネ*/
	
#goods h2{
	width: 20%;
}
.goodsWrap {

	grid-template-columns:repeat(3, 1fr);
}


}

@media (max-width: 912px) {

}

@media (max-width: 786px) {
	#info .box:before{
		width: 10vw;
	}
	#info .box:after{
		width: 10vw;
	}
	#event h2{
	width: 30%;
}
/*グッズサムネ*/
#goods h2{
	width: 30%;
}
.itemBox{


	font-size: 0.9em;
}

.goodsWrap {

	grid-template-columns:repeat(2, 1fr);
}
.goodsNum{
top:0em;
}

}
@media (max-width: 480px) {
header{
	padding: 6em 0 5em;
	position: relative;
}
	/*グッズサムネ*/
	/*グッズサムネ*/
.itemBox{


	font-size: max(1em,12px);
}

.goodsWrap {

	/*grid-template-columns:repeat(1, 1fr);*/
}
}