@charset "utf-8";

/* 遊び方 */
#howto {
	position: relative;
	margin: 0 auto;
	padding-top: 30px;
	padding-bottom: 100px;
}
#howto p{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
}
.cautionWrap{
	margin: 20px auto 0 auto;
	width: calc(100% - 10px);
}

#howtolist{
	position: relative;
	margin:0 auto;
}
#howtolist ul{
	position: relative;
	margin: 0 auto;
}
#howtolist ul li{
	position: relative;
	margin:-10px auto 0 auto;
}
#howtolist ul li:nth-child(odd){
	padding-top: 60px;
	padding-bottom: 100px;
}
#howtolist ul li:nth-child(even){
	margin:-50px auto 0 auto;
}
#howtolist ul li .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: polygon(0 120px, 100% 0, 100% calc(100% - 120px), 0 100%);
	background: rgba(69,30,96,0.65);
}
#howtolist ul li h3{
	position: relative;
	margin: 0 auto 20px auto;
	width: calc(100% - 50px);
	padding: 60px 0 30px 0;
	background-image: url("../img/bar01.png"), url("../img/bar02.png");
	background-position: 50% 0, 50% 100%;
	background-repeat: no-repeat, no-repeat;
	background-size:  100% auto, 100% auto;
	text-align: center;
	font-size: 120%;
	font-weight: 700;
	color: #23d7f3;
}
#howtolist ul li .Img{
	position: relative;
	margin: 0  auto 20px auto;
	width: calc(100% - 50px);
	border: solid 2px;
	border-image: linear-gradient(180deg,rgba(135, 103, 49, 1) 0%, rgba(250, 242, 186, 1) 16%, rgba(132, 99, 45, 1) 37%, rgba(248, 239, 183, 1) 51%, rgba(132, 99, 45, 1) 62%, rgba(250, 242, 186, 1) 85%, rgba(132, 99, 45, 1) 100%) 1;
}
#howtolist ul li p{padding-bottom: 1em;}
#howtolist ul li .bnr3kajyo{
	position: relative;
	margin: 20px auto;
	width: calc(100% - 50px);
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {

	/* 遊び方 */
	#howto {
		padding-top: 60px;
		padding-bottom: 160px;
	}
	#howto p{max-width: 800px;}
	.cautionWrap{max-width: 800px;}

	#howtolist ul li{margin:0 auto;}
	#howtolist ul li:nth-child(odd){
		padding-top: 120px;
		padding-bottom: 150px;
	}
	#howtolist ul li:nth-child(even){margin:-20px auto 0 auto;}
	#howtolist ul li .bg{clip-path: polygon(0 150px, 100% 0, 100% calc(100% - 150px), 0 100%);}
	#howtolist ul li h3{
		margin: 0 auto 40px auto;
		padding: 80px 0 30px 0;
		background-image: url("../img/bar01_pc.png"), url("../img/bar02_pc.png");
		background-size:  min(100%, 746px) auto,  min(100%, 746px) auto;
		font-size: 120%;
		max-width: 800px;
	}
	#howtolist ul li .Img{
		margin: 0  auto 40px auto;
		max-width: 800px;
		border: solid 4px;
		border-image: linear-gradient(180deg,rgba(135, 103, 49, 1) 0%, rgba(250, 242, 186, 1) 16%, rgba(132, 99, 45, 1) 37%, rgba(248, 239, 183, 1) 51%, rgba(132, 99, 45, 1) 62%, rgba(250, 242, 186, 1) 85%, rgba(132, 99, 45, 1) 100%) 1;
	}
	#howtolist ul li p{padding-bottom: 1.5em;	max-width: 800px;}
	#howtolist ul li .bnr3kajyo{max-width: 600px;}

}