/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600&display=swap');

main{
	color: #000;
	fill: #000;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 1.6rem;
	line-height: 1.6em;
	text-align: justify;
	font-feature-settings : "palt";
	}
	main article{
		position: relative;
		padding: 5em 0;
		}
	main svg{
		width: 1em;
		height: 1em;
		}
	#main .headline{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 1em;
		background: #000;
		color: #fff;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 600;
		font-size: 1.8em;
		text-align: center;
		line-height: 1em;
		}
		#main .headline:before{
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			width: 0;
			height: 0;
			margin: 0 0 0-0.5em;
			padding: 0;
			background: none;
			border: 0.5em solid transparent;
			border-top: 0.7em solid #000;
			}
		#main .headline+*{
			margin-top: 5em;
			}
	#main .title{
		color: #000;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 1.8em;
		line-height: 1em;
		text-align:center;
		}
		#main .title span{
			display: inline-block;
			margin: auto;
			padding: 0.5em 1em;
			border: 0.1em solid #000;
			border-radius: 10em;
			}
		#main .title i{
			margin-right: 0.2em;
			vertical-align: middle;
			opacity: 0.5;
			}
		#main .title+*{
			margin-top: 2em;
			}

#hero{
	display: flex;
	align-items: center;
	position: relative;
	}
	#hero:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(../images/heroBg.jpg) center center;
		background-size: cover;
		z-index: -10;
		}

#heroImages{
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	}
	#heroImages ul{
		width: 25%;
		}

#heroTitle{
	text-align: center;
	}
	#heroTitle span{
		position: absolute;
		left: 50%;
		width: 15em;
		margin-left: -7.5em;
		margin-top: -2em;
		padding: 0.8em;
		background: #000;
		color: #fff;
		text-align: center;
		line-height: 1em;
		z-index: 1;
		}
		#heroTitle span:before{
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -0.5em;
			border: 0.5em solid transparent;
			border-top: 0.7em solid #000;
			}
	#heroTitle h1{
		display: inline-block;
		}
	#heroTitle dl{
		display: flex;
		justify-content: center;
		margin-top: 2em;
		}
	#heroTitle dt,
	#heroTitle dd{
		font-weight: bold;
		text-align: center;
		line-height: 1em;
		}
	#heroTitle dt{
		background: #f13f79;
		border-radius: 10em 0 0 10em;
		color: #fff;
		}
	#heroTitle dd{
		background: #fff;
		border-radius: 0 10em 10em 0;
		color: #000;
		}
	#heroTitle p{
		display: none;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 0.8em;
		color: #fff;
		font-size: 1.6em;
		line-height: 1.4em;
		text-align: center;
		background:rgba(0,0,0,0.7);
		}

#about{}
	#about h3.headline{
		width: 100%;
		background: #f13f79;
		}
	#about h3.headline:before{
		border-top: 0.7em solid #f13f79;
		}
	#about h3.headline+div{
		overflow: hidden;
		}
	#about figure{
		overflow: hidden;
		}
		#about figure i{
			float: left;
			width: 63.3%;
			}
		#about figure i+i{
			float: right;
			width: 36.7%;
			}
	#about figure+div{}
		#about figure+div .sns{
			margin-top: 1em;
			}
			#about figure+div .sns .instagram a{
				color: #FFF;
				border-radius: 4px;
				position: relative;
				display: inline-block;
				height: 28px;
				width: 110px;
				text-align: center;
				font-size: 16px;
				line-height: 28px;
				vertical-align: middle;
				background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
				background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
				overflow: hidden;
				text-decoration:none;
				}
			#about figure+div .sns .instagram a:before{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
				background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
				}
			#about figure+div .sns .instagram a i{
				font-size: 16px;
				position: relative;
				top: 2px;
				}

			#about figure+div .sns .instagram a span {
				display:inline-block;
				position: relative;
				}

#join{
	position: relative;
	overflow: hidden;
	}
	#join:before,
	#join:after{
		content: "";
		position: absolute;
		}
	#join:before{
		top: 20em;/*ずらす*/
		left: -31em;/*ずらす*/
		width: 59em;/*グラデーションカバーの幅*/
		height: 68em;/*グラデーションカバーの高さ*/
		background: -webkit-radial-gradient(#ffdb2c 20%, rgba(255, 105, 34, 0.65) 45%, rgba(255, 88, 96, 0) 65%);
		background: radial-gradient(#ffdb2c 20%, rgba(255, 105, 34, 0.65) 45%, rgba(255, 88, 96, 0) 65%);
		z-index: -1;
		}
	#join:after{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: -webkit-linear-gradient(64deg, #427eff 0%, #f13f79 70%) no-repeat;
		background: linear-gradient(64deg, #427eff 0%, #f13f79 70%) no-repeat;
		z-index: -2;
		}
	#join .headline+div{
		text-align: center;
		}
		#join .headline+div p{
			display: inline-block;
			margin: 0;
			padding: 0.75em 1.5em;
			font-family: 'Noto Sans JP', sans-serif;
			font-weight: 600;
			line-height: 1;
			color: #000;
			background: #fff;
			font-size: 1.4em;
			border-radius: 1.5em;
			}
	#join ul{
		margin-top: 2em;
		display: flex;
		justify-content: center;
		counter-reset: num;
		}
	#join li{
		width: calc(33.33% - 1em);
		text-align: center;
		}
		#join li:before{
			counter-increment:num;
			content: "STEP" counter(num);
			color: #fff;
			letter-spacing: 0.1em;
			font-size: 1.4em;
			}
	#join p{
		margin-top: 1em;
		color: #fff;
		}
	#join img{
		width: 64%;
		}
	#join a{
		display: inline-block;
		padding: 0.1em 0.5em;
		background: #fff;
		margin-right: 0.3em;
		}
		#join a:hover{
			background: #2cac99;
			color: #fff;
			text-decoration: none;
			}

#present{}
	#present .present-inner{
		display: flex;
		margin:  auto;
		justify-content: center;
		border: 2px solid #000;
		border-radius: 1em;
		overflow: hidden;
	}
	#present h3.headline+p{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 3em auto 1em;
		text-align: center;
		color: #f13f79;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		}
		#present h3.headline+p:before,
		#present h3.headline+p:after{
			content: "";
			display: inline-block;
			width: 2px;
			height: 1.5em;
			margin-bottom: -0.5em;
			background: #f13f79;
			}
		#present h3.headline+p:before {
			margin-right: 1em;
			-ms-transform: rotate(150deg);
			-webkit-transform: skew(-150deg);
			-moz-transform: skew(-150deg);
			}
		#present h3.headline+p:after {
			margin-left: 1em;
			-ms-transform: rotate(-150deg);
			-webkit-transform: skew(150deg);
			-moz-transform: skew(150deg);
			}
	#present p+div{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#present dl{
		width: 100%;
		}
		#present dl{
			position: relative;
			}
			#present dl dt{
				width: 100%;
				font-size: 1.4em;
				padding: 0.6em;
				border-bottom: 1px solid #000;
				color: #000;
				font-family: 'Noto Sans JP', sans-serif;
				font-weight: 500;
				text-align: center;
				line-height: 1.4em;
				}
				#present dt span{
					display: block;
					font-size: 0.8em;
					color: #f13f79;
					}
			#present dl h4{
				font-size: 1.4em;
				}
			#present dl dd{
				padding: 0.6em;
				}
			#present dl+dl dd{
				border-left: dashed 1px #000;
				}
		#present dd.notShow{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.7);
			color: #fff;
			display: flex;
			align-items: center;
			padding: 2em;
			}
	#present h4{
		color: #000;
		font-weight: bold;
		text-align: center;
		line-height: 1em;
		}
	#present figure{
		display: grid;
		text-align: center;
		}
	#present figcaption{
		position: absolute;
		bottom:6em;
		right: 8em;
		background: #f13f79;
		color: #fff;
		padding: 1em;
		font-size: 1.2em;
		border-radius: 50%;
		}
	#present figure+div{
		margin-top: 1em;
		text-align: center;
		}
	#present p{
		margin-top: 1em;
		} 
	#present ul{
		margin-top: 1em;
		padding: 1em;
		background: #f2f2f2;
		color: #666;
		text-align: left;
		}
	#present li{
		font-size: 0.875em;
		padding-left: 1.3em;
		text-indent: -1.3em;
		line-height: 1.4em;
		}
		#present li+li{
			margin-top: 0.5em;
			}
	#present .notes{
		font-size: 0.8em;
		text-align: right;
		color: #666;
		}

#spot{
	position: relative;
	background: rgba(255,255,255,0.7);
	}
	#spot:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(../images/spotBg.jpg) center center;
		background-size: cover;
		z-index: -1;
		}
	#spot h3+p{
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1.6em;
		}
	#spot div{
		text-align: center;
		}
	#spot p+div{
		display: flex;
		justify-content: space-between;
		margin-top: 2em;
		}
	#spot figure{
		position: relative;
		border-radius: 100%;
		overflow: hidden;
		}
	#spot figcaption{
		display: none;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 0.8em 0 1em 0;
		background: rgba(0,0,0,0.7);
		color: #fff;
		text-align: center;
		line-height: 1em;
		}

#guide{
	position: relative;
	padding-bottom: 5em;
	overflow: hidden;
	}
	#guide h3.headline{
		background: #f13f79;
		}
		#guide h3.headline:before{
			border-top: 0.7em solid #f13f79;
			}
	#guide dl{
		display: flex;
		}
	#guide dt{
		background: #f13f79;
		border-radius: 2em;
		color: #fff;
		font-weight: bold;
		text-align: center;
		}
	#guide dd{}
		#guide dd>*+*{
			margin-top: 1em;
			}
	#guide li{
		line-height: 1.4em;
		}
	#guide li+li{
		margin-top: 0.5em;
		}
	#guide ul{}
		#guide ul li{
			position: relative;
			padding-left: 1.5em;
			}
			#guide ul li:before{
				content: "";
				position: absolute;
				top: calc(0.5em - 2px);
				left: 0;
				width: 0.5em;
				height: 0.5em;
				border: 2px solid #000;
				border-radius: 100%;
				}
	#guide ol{
		counter-reset: chapter;
		}
		#guide ol li{
			padding-left: 1.4em;
			text-indent: -1.4em;
			}
		#guide ol li:before{
			content: counter(chapter)". ";
			counter-increment: chapter;
			color: #000;
			font-weight: bold;
			}

#guideLottery{}
	#guideLottery p{
		font-weight: bold;
		}
	#guideLottery figcaption{
		text-align: center;
		}

#post{
	padding-bottom: 7.2em;
	}
	#post h3+p{
		margin: 2em 0;
		font-size: 1.4em;
		text-align: center;
		line-height: 1em;
		}
	#post h3+div{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
		#post h3+div > *{
			}

.sns{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	}
	.sns li{
		align-content: center;
		}
	.sns li+li{
		padding-left: 10px;
		}
	.sns .fb_iframe_widget span{
		vertical-align: top !important;
		}

.notes{
	margin-left: 1em;
	text-indent: -1em;
	}


/* for all */
@media (max-width: 1199px) {
/*1199px以下*/
}
@media (max-width: 991px) {
/*991px以下*/

#main {}
	#main .headline{
		font-size: 1.4em;
		}
		#main .headline+*{
			margin-top: 2em;
			}
#hero{
	height: 55vh;
	max-height: 365px;
	}
#heroImages{}
	#heroImages ul{
		width: 33.33%;
		}
#heroTitle{
	margin-top: 2em;
	}
	#heroTitle span{
		margin-top: -4em;
		font-size: 0.8em;
		}
	#heroTitle dt,
	#heroTitle dd{
		padding: 0.5em 0.8em;
		font-size: 0.9em;
		}
#about{}
	#about figure{
		width: 100%;
		overflow: hidden;
		}
	#about figure+div{
		margin-top: 1em;
		width: 100%;
		}
#join{
	z-index: 0;
	}
	#join:before{
		top: 12em;/*ずらす*/
		left: -35em;/*ずらす*/
		width: 50em;/*グラデーションカバーの幅*/
		height: 50em;/*グラデーションカバーの高さ*/
		background: -webkit-radial-gradient(#ffdb2c 20%, rgba(255, 105, 34, 0.65) 45%, rgba(255, 88, 96, 0) 65%);
		background: radial-gradient(#ffdb2c 20%, rgba(255, 105, 34, 0.65) 45%, rgba(255, 88, 96, 0) 65%);
		z-index: -1;
		}
	#join .headline+div{}
		#join .headline+div{
			margin-top:  2em;
			}
	#join ul{
		justify-content: space-between;
		}
	#join li{
		position: relative;
		padding-top: 1em;
		padding-bottom: 1.5em;
		width: calc(50% - 1em);
		}
		#join li:before{
			text-align: left;
			position: absolute;
			top: 0.5em;
			left: 0;
			right: 0;
			font-size: 1.2em;
			}
		#join li:after{
			display: none;
			}
	#join p{
		margin-top: 0em;
		text-align: left;
		}
#present{}
	#present h3.headline+p{
		margin-top: 1em;
		font-size: 1.2em;
		line-height: 1.2em;
		}
	#present figure{
		grid-template-rows: 1fr 1fr;
		position: relative;
		}
	#present figure+div{
		margin-top: 1em;
		text-align: center;
		}
	#present p{
		text-align: left;
		}
#spot{}
	#spot h3+p {
		font-weight: bold;
		line-height: 1.4em;
		text-align: left;
		}
	#spot p+div{
		flex-wrap: wrap;
		}
	#spot figure{
		width: calc(50% - 0.5em);
		margin-top: 1em;
		}
#guide{}
	#guide h3.headline{
		line-height: 1.2em;
		}
		#guide h3.headline+*{
			margin-top: 4em;
			}
	#guide dl{
		flex-wrap: wrap;
		}
	#guide dt,
	#guide dd{
		width: 100%;
		}
	#guide dt{
		padding: 0.5em;
		}	
	#guide dd{
		padding-top: 1em;
		text-align: left;
		}
		#guide dd+dt{
			margin-top: 2em;
			}
#guideLottery{}
	#guideLottery p+figure,
	#guideLottery div+div{
		margin-top: 1em;
		}
}


/* for mobile */
@media (max-width: 767px) {
/*767px以下*/
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#hero{
	height: 64vw;
	max-height: 690px;
	}
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
}
@media (min-width: 768px) and (max-width: 1199px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
#hero{
	height: 69vh;
	max-height: 815px;
	}
#heroTitle{}
	#heroTitle span{
		width: 24em;
		margin-left: -12em;
		margin-top: -3em;
		font-size: 1em;
		line-height: 1.4em;
		}
#present{}
	#present figure{
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		}
#guideLottery{}
	#guideLottery figure{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		column-gap: 1em;
		}
	#guideLottery div+div{
		margin-top: 0;
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#hero{
	height: 49vw;
	max-height: 690px;
	}
#heroTitle{
	margin-top: 3em;
	}
	#heroTitle span{
		width: 24em;
		margin-left: -12em;
		margin-top: -3.5em;
		font-size: 1em;
		line-height: 1.4em;
		}
		#heroTitle span:before{
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -0.5em;
			border: 0.5em solid transparent;
			border-top: 0.7em solid #000;
			}
	#heroTitle dt,
	#heroTitle dd{
		padding: 1em 1.5em;
		font-size: 1.2em;
		}
#about{}
	#about figure{
		float: left;
		width: 40%;
		}
		#about figure+div{
			float: right;
			width: calc(60% - 2em);
			}
#present{}
	#present .present-inner{
		width: 70%;
	}
	#present h3.headline+p{
		font-size: 1.6em;
		}
	#present figure{
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		}
	#present p{
		text-align: center;
		} 
#join{}
	#join .headline+div{
		margin-top:  4em;
		}
#spot{}
	#spot figure{
		width: calc(25% - 1em);
		}
#guide{}
	#guide dl{
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		}
	#guide dt,
	#guide dd{
		margin-top: 2em;
		padding: 0.5em;
		}
	#guide dt{
		width: 10em;
		}
	#guide dd{
		width: calc(100% - 11em);
		padding-right: 0;
		}
#guideLottery{}
	#guideLottery figure{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		column-gap: 1em;
		}
	#guideLottery p+figure{
		margin-top: 1em;
		}
	#guideLottery div+div{
		margin-top: 0;
		}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}


/* Edge */
@supports (-ms-ime-align:auto) {
}


/* ie */
@media all and (-ms-high-contrast: none){
}