/* CSS Document */

header,nav,footer{
	display: none;
	}

main{
	color: #000;
	fill: #000;
	}
	main article{
		position: relative;
		padding: 2em 0;
		}
	main svg{
		width: 1em;
		height: 1em;
		}
#wrapper {
	padding-top: 0;
	}
#main {}
	#main .headline{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 1em;
		background: #000;
		color: #fff;
		font-family: "Rounded Mplus 1c";
		font-weight: bold;
		font-size: 1.2em;
		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: 3em;
			}
		#main .headline+dl.guide-list{
			margin-top: 4.5em;
			}

	#main .title{
		color: #000;
		font-family: "Rounded Mplus 1c";
		font-weight: bold;
		font-size: 1.2em;
		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: 1em;
			}
	#main .thumbBox{
		background-size: cover;
		}
		#main .thumbBox img{
			object-fit: cover;
			}

#hero{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items:  center;
	position: relative;
	height: 90vw;
	padding-bottom: 2em;
	overflow: hidden;
	}
	#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: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	}
	#heroImages > ul{
		width: 33.33%;
		}
	#heroImages .thumbBox{
		padding-top: 30vw;
		}
		#heroImages .thumbBox img{
			object-fit: cover;
			}

#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;
		}
		#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 h2{
		display: inline-block;
		}
	#heroTitle dl{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		margin-top: 1em;
		}
	#heroTitle dt,
	#heroTitle dd{
		padding: 0.5em 0.8em;
		font-weight: bold;
		font-size: 0.9em;
		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;
		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 figure{
		overflow: hidden;
		}
		#about figure i{
			float: left;
			width: 63.3%;
			}
		#about figure i+i{
			float: right;
			width: 36.7%;
			}
	#about figure+div{
		margin-top: 1em;
		}
		#about figure+div .sns{
			display: block;
			margin-top: 1em;
			}
			#about figure+div .sns li{
				text-align: center;
				}
				#about figure+div .sns li+li{
					margin-top: 0.5em;
					margin-left: 0;
					}
			#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;
	z-index: 0;
	}
	#join:before,
	#join:after{
		content: "";
		position: absolute;
		}
	#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:after{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
		background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
		z-index: -2;
		}
		#join .headline+div {
			margin-top: 3em;
			padding: 1em;
			text-align: center;
			font-family: "Rounded Mplus 1c";
			font-weight: bold;
			background: #fff;
			border-radius: 1em;
			}
			#join .headline+div p {
				color: #000;
				margin: 0;
				}
	#join ul{
		list-style: none;
		counter-reset: num;
		margin-top: 1em;
		}
	#join li{
		text-align: center;
		position: relative;
		padding-top: 1em;
		padding-bottom: 1.5em;
		}
		#join li:before{
			text-align: left;
			position: absolute;
			counter-increment:num;
			content: "STEP" counter(num);
			top: 0.5em;
			left: 0;
			right: 0;
			color: #fff;
			letter-spacing: 0.1em;
			font-size: 1.2em;
			font-weight: bold;
			}
		#join li:after{
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			border-bottom: #fff 1px dotted;
			}
			#join li:last-of-type:after{
				border: none;
				}
	#join li+li{
		margin-top: 1em;
		}
	#join p{
		margin-top: 0em;
		color: #fff;
		}
	#join img{
		width: 64%;
		}
	#join a{
		display: inline-block;
		padding: 0.1em 0.5em;
		background: #fff;
		margin-right: 0.3em;
		text-decoration: none;
		}
		#join a:hover{
			background: #2cac99;
			color: #fff;
			}

#present{}
	#present h3.headline+p {
		margin: 3em auto 1em;
		text-align: center;
		color: #f13f79;
		font-weight: bold;
		position: relative;
		}
		#present h3.headline+p:before,
		#present h3.headline+p:after{
			content: "";
			position: absolute;
			display: inline-block;
			width: 2px;
			height: 3.5em;
			top: 0;
			margin-bottom: -0.5em;
			background: #f13f79;
		}
		#present h3.headline+p:before {
			left: 1.5em;
			-webkit-transform: skew(-150deg);
			-moz-transform: skew(-150deg);
		}
		#present h3.headline+p:after {
			right: 1.5em;
			-webkit-transform: skew(150deg);
			-moz-transform: skew(150deg);
		}
	#present dl{
		border: 2px solid #000;
		border-radius: 1em;
		position: relative;
		overflow: hidden;
		}
	#present dl+dl{
		margin-top: 1em;
		}
	#present dt{
		padding: 0.6em;
		border-bottom: 1px solid #000;
		color: #000;
		font-size: 1.2em;
		font-family: "Rounded Mplus 1c";
		font-weight: bold;
		text-align: center;
		line-height: 1.4em;
		}
		#present dt span {
			display: block;
			font-size: 0.8em;
			color: #f13f79;
			}
/*		#present dt i{
			vertical-align: middle;
			margin-right: 0.1em;
			fill: #f13f79;
			font-size: 1.4em;
			}*/
	#present dd{
		padding: 1em;
		}
		#present dd.notShow {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.8);
			color: #fff;
			display: flex;
			align-items: center;
			padding: 2em;
			}
	#present figure{
		display: grid;
		grid-template-rows: 1fr 1fr;
		position: relative;
		}
		#present figcaption {
			position: absolute;
			bottom: 0.5em;
			right: 0.5em;
			background: #f13f79;
			color: #fff;
			padding: 1em;
			font-size: 1em;
			border-radius: 50%;
			}
	#present figure+div{
		margin-top: 1em;
		text-align: center;
		}
	#present h4{
		color: #000;
		font-weight: bold;
		font-size: 1.2em;
		text-align: center;
		line-height: 1em;
		}
	#present p{
		margin-top: 1em;
		text-align: left;
		}
	#present ul{
		margin-top: 1em;
		padding: 1em;
		background: #f2f2f2;
		color: #666;
		text-align: left;
		list-style: none;
		}
	#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 .thumbBox{
		padding-top: 66.66%;
		}
	#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-weight: bold;
		line-height: 1.4em;
		}
	#spot div{
		text-align: center;
		}
	#spot p+div{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		}
	#spot figure{
		position: relative;
		width: calc(50% - 0.5em);
		margin-top: 1em;
		border-radius: 100%;
		overflow: hidden;
		}
		#spot figure a .thumbBox {
			transition: all 0.2s ease-out;
			}
			#spot figure a:hover .thumbBox {
				opacity: 0.7;
				transition: all 0.2s ease-out;
				}
	#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;
		}
	#spot .thumbBox{
		padding-top: 100%;
		background-size:cover;
		}

#guide{
	position: relative;
	}
	#guide h3.headline{
		background: #f13f79;
		line-height: 1.2em;
		}
		#guide h3.headline:before{
			border-top: 0.7em solid #f13f79;
			}
	#guide dl{}
	#guide dt{
		padding: 0.5em;
		margin-top: 2em;
		background: #f13f79;
		border-radius: 2em;
		color: #fff;
		font-weight: bold;
		text-align: center;
		}
	#guide dd{
		padding-top: 1em;
		text-align: left;
		}
	#guide li{
		line-height: 1.4em;
		}
	#guide li+li{
		margin-top: 0.5em;
		}
	#guide ul{
		list-style: none;
		}
		#guide ul li{
			position: relative;
			padding-left: 1.2em;
			}
			#guide ul li:before{
				content: "";
				position: absolute;
				top: 0.2em;
				left: 0;
				width: 0.5em;
				height: 0.5em;
				border: 2px solid #000;
				border-radius: 100%;
				}
	#guide ol{
		counter-reset: chapter;
		list-style: none;
		}
		#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;
			}
	#guide table{
		border-collapse: collapse;
		}
	#guide th,
	#guide td{
		padding: 0.5em;
		border: 1px solid #eee;
		line-height: 1.4em;
		}
		#guide td:last-child{
			text-align: center;
			}
	#guide thead{
		background: rgba(0,0,0,0.1);
		text-align: center;
		}
	#guide .notes{
		margin-top: 1em;
		color: #e85353;
		}
		#guide .notes li{
			font-size: 0.875em;
			padding-left: 1.3em;
			text-indent: -1.3em;
			}
		#guide .notes li:before{
			content: none;
			}
	#guide .toggleBox{
		padding: 2em 0;
		}
	#guide .toggleMenu{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 1em;
		background: #f13f79;
		color: #fff;
		fill: #fff;
		font-family: "Rounded Mplus 1c";
		font-weight: bold;
		font-size: 1.4em;
		text-align: center;
		line-height: 1em;
		}
		#guide .toggleMenu:after{
			content: "見る";
			}
		#guide .toggleMenu i{
			margin-right: 0.2em;
			vertical-align: middle;
			}
		#guide .toggleMenu.open{}
			#guide .toggleMenu.open:after{
				content: "閉じる";
				}
			#guide .toggleMenu.open svg{
				transform: scale(1, -1);
				}
		#guide .toggleMenu:hover{
			cursor: pointer;
			}

#post{
	padding-bottom: 2.2em;
	padding-bottom: 4.2em;
	}
	#post .instagramBox {
		margin-top: 5em;
		}
		#post .instagramBox h4{
			text-align: center;
			}
		#post .instagramBox a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			}

	#post h3+p{
		margin: 1em 0;
		text-align: center;
		line-height: 1em;
		}
	#post p+div{}
		#post p+div > *{
			width: 100% !important;
			}

#gallery {}
	#gallery h3.headline{
		background: #f13f79;
		}
		#gallery h3.headline:before{
			border-top: 0.7em solid #f13f79;
			}
	#gallery h3.headline+div p{
		font-size: 1.1em;
		line-height: 1.6em;
		}

	#gallery .title{
		margin-top: 2em;
		}
		#gallery .title span{
			border: 0.1em solid #f13f79;
			}
		#gallery .title a{
			color: #f13f79;
			text-decoration: none;
			}

	#gallery dl{}
	#gallery dt{
		padding: 0.5em;
		margin-top: 2em;
		background: #f13f79;
		border-radius: 2em;
		color: #fff;
		font-weight: bold;
		text-align: center;
		}
	#gallery dd{
		padding-top: 1em;
		text-align: left;
		}
	#gallery li{
		line-height: 1.4em;
		}
	#gallery li+li{
		margin-top: 0.5em;
		}
	#gallery ul{
		list-style: none;
		}
		#gallery ul li{
			position: relative;
			padding-left: 1.2em;
			}
			#gallery ul li:before{
				content: "";
				position: absolute;
				top: 0.2em;
				left: 0;
				width: 0.5em;
				height: 0.5em;
				border: 2px solid #000;
				border-radius: 100%;
				}
	#gallery ol{
		counter-reset: chapter;
		}
		#gallery ol li{
			padding-left: 1.4em;
			text-indent: -1.4em;
			}
		#gallery ol li:before{
			content: counter(chapter)". ";
			counter-increment: chapter;
			color: #000;
			font-weight: bold;
			}
	#gallery table{
		border-collapse: collapse;
		}
	#gallery th,
	#gallery td{
		padding: 0.5em;
		border: 1px solid #eee;
		line-height: 1.4em;
		}
		#gallery td:last-child{
			text-align: center;
			}
	#gallery thead{
		background: rgba(0,0,0,0.1);
		text-align: center;
		}
	#gallery .notes{
		margin-top: 1em;
		color: #e85353;
		}
		#gallery .notes li{
			font-size: 0.875em;
			padding-left: 1.3em;
			text-indent: -1.3em;
			}
		#gallery .notes li:before{
			content: none;
			}



#instagram .instagram-inner{
	display: block;
	margin: 3.5em 0 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	text-align: center;
}

@media screen and (min-width: 0px) and (max-width: 350px){
#instagram iframe{
	width: 320px !important;
	height:800px !important;
}
}
@media screen and (min-width: 351px) and (max-width: 375px){
#instagram iframe{
	height:850px !important;
}
}
@media screen and (min-width: 376px) and (max-width: 400px){
#instagram iframe{
	height:900px !important;
}
}



@media screen and (min-width: 401px) and (max-width: 425px){
#instagram iframe{
	height:950px !important;
}
}
@media screen and (min-width: 426px) and (max-width: 450px){
#instagram iframe{
	height:1000px !important;
}
}
@media screen and (min-width: 451px) and (max-width: 475px){
#instagram iframe{
	height:1050px !important;
}
}
@media screen and (min-width: 476px) and (max-width: 500px){
#instagram iframe{
	height:1100px !important;
}
}



@media screen and (min-width: 501px) and (max-width: 525px){
#instagram iframe{
	height:1150px !important;
}
}
@media screen and (min-width: 526px) and (max-width: 550px){
#instagram iframe{
	height:1200px !important;
}
}
@media screen and (min-width: 551px) and (max-width: 575px){
#instagram iframe{
	height:1250px !important;
}
}
@media screen and (min-width: 576px) and (max-width: 600px){
#instagram iframe{
	height:1300px !important;
}
}



@media screen and (min-width: 601px) and (max-width: 625px){
#instagram iframe{
	height:1350px !important;
}
}
@media screen and (min-width: 626px) and (max-width: 650px){
#instagram iframe{
	height:1400px !important;
}
}
@media screen and (min-width: 651px) and (max-width: 675px){
#instagram iframe{
	height:1450px !important;
}
}
@media screen and (min-width: 676px) and (max-width: 700px){
#instagram iframe{
	height:1500px !important;
}
}



@media screen and (min-width: 701px) and (max-width: 725px){
#instagram iframe{
	height:1550px !important;
}
}
@media screen and (min-width: 726px) and (max-width: 750px){
#instagram iframe{
	height:1600px !important;
}
}
@media screen and (min-width: 751px) and (max-width: 775px){
#instagram iframe{
	height:1650px !important;
}
}
@media screen and (min-width: 776px) and (max-width: 800px){
#instagram iframe{
	height:1700px !important;
}
}

@media screen and (min-width: 801px){
#instagram iframe{
	width: 750px !important;
	height:1750px !important;
}
}