/* -=-=-=-=-=-=-=-=-=-=-=- common -=-=-=-=-=-=-=-=-=-=- */
*{
	margin: 0;
	padding: 0;
}
html{
	font-size: 16px;
	scroll-behavior: smooth;
}
body{
	color: #2e2e2e;
	font-size: 1rem;
	font-family: "Zen Old Mincho",serif;
	font-style: normal;
	font-weight: 400;
	text-align: left;
	line-height: 1.75;
	user-select: none;
	background: url(../img/bg.svg),linear-gradient(to bottom,rgba(52,79,131,1) 0%,rgba(13,159,154,1) 100%);
	background-repeat: repeat,no-repeat;
	background-size: 126px,auto;
}
a,
.btn,
.csr{
	text-decoration: none;
	transition-property: opacity;
	transition-duration: 0.5s;
	cursor: pointer;
}
a:hover,
.btn:hover,
.csr:hover{
	transition-duration: 0s;
	opacity: 0.75;
}
img{
	vertical-align: middle;
	width: 100%;
	max-width: 100%;
	height: auto;
}
@media only screen and (max-width: 600px){
	body{
		background-size: 20vw,auto;
	}
}

/* -=-=-=-=-=-=-=-=-=-=-=- header -=-=-=-=-=-=-=-=-=-=- */
header{
	color: #000000;
	font-weight: 700;
	background-color: #ffffff;
	box-shadow: 0 4px 2px rgba(35,24,21,0.25);
	position: sticky;
	left: 0;
	top: 0;
	padding: 1em;
	z-index: 2;
}
header input,
header label{
	display: none;
}
header nav{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
header nav ul{
	display: flex;
	justify-content: end;
}
header nav ul li{
	list-style: none;
}
header nav ul li:not(:first-child){
	margin-left: 4em;
}
header nav ul li a{
	color: inherit;
	display: block;
}
@media only screen and (max-width: 800px){
	header nav ul li:not(:first-child){
		margin-left: 2em;
	}
}
@media only screen and (max-width: 640px){
	header{
		padding: 1em;
		z-index: 10;
	}
	header label{
		color: transparent;
		text-indent: -100vw;
		border-top-style: solid;
		border-top-color: #ba8037;
		border-top-width: 0.25em;
		border-bottom-style: solid;
		border-bottom-color: #ba8037;
		border-bottom-width: 0.25em;
		border-radius: 0.25em;
		position: relative;
		box-sizing: border-box;
		display: block;
		width: 2em;
		height: 1.5em;
		margin-left: auto;
		transition-property: border-top-color,border-top-width,border-bottom-color,border-bottom-width;
		transition-duration: 0.5s;
	}
	header label::before,
	header label::after{
		content: "";
		background-color: #ba8037;
		border-radius: 0.25em;
		position: absolute;
		left: 0;
		top: calc(50% - 0.125em);
		display: block;
		width: 100%;
		height: 0.25em;
		transition-property: transform;
		transition-duration: 0.5s;
	}
	header nav{
		position: fixed;
		left: 0;
		top: 0;
		background-color: #ffffff;
		box-shadow: 0 0 2px 4px rgba(35,24,21,0.25);
		border-bottom-right-radius: 12px;
		transform: translateX(calc(-100% - 4px));
		transition-property: transform;
		transition-duration: 0.5s;
	}
	header nav ul{
		color: #000000;
		display: block;
	}
	header nav ul li:not(:first-child){
		margin-left: 0;
	}
	header nav ul li a{
		padding: 2em;
		padding-top: 1em;
		padding-bottom: 1em;
	}
	header input:checked + label{
		border-top-color: #ffffff;
		border-top-width: 0;
		border-bottom-color: #ffffff;
		border-bottom-width: 0;
	}
	header input:checked + label::before{
		transform: rotate(45deg);
	}
	header input:checked + label::after{
		transform: rotate(-45deg);
	}
	header input:checked + label + nav{
		transform: translateX(0);
	}
}

/* -=-=-=-=-=-=-=-=-=-=-=- main -=-=-=-=-=-=-=-=-=-=- */
main{
	background-image: url(../img/bg.svgz);
	background-repeat: repeat;
	background-size: min(126px,20vw);
	padding-bottom: 6em;
}
main .box{
	background-color: #f0f4ed;
	border-style: solid;
	border-color: #c49146;
	border-width: 5px;
	border-radius: 20px;
	box-sizing: border-box;
	max-width: 1080px;
	margin: auto;
	margin-top: 8em;
	padding: 2em;
	padding-top: 0;
	scroll-margin-top: clamp(5em,12vw,6em);
}
main .box .title{
	color: #fff7e3;
	font-size: clamp(1.5em,3.75vw,2em);
	font-weight: 700;
	text-align: center;
	line-height: 2.25em;
	background-image: url(../img/bg_title.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 2.25em;
	transform: translateY(-50%);
}
main .att{
	text-align: center;
	word-break: keep-all;
	overflow-wrap: break-word;
	white-space: nowrap;
	margin-top: 1em;
}
main .btn{
	color: #ffffff;
	font-family: "Zen Kaku Gothic Antique",serif;
	font-style: normal;
	font-weight: 700;
	text-align: center;
	line-height: 3.25em;
	border-radius: 3.25em;
	display: block;
	width: 296px;
	height: 3.25em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	box-shadow: 0 4px 0 rgba(0,0,0,0.1);
}
@media only screen and (max-width: calc(1080px + 4em)){
	main .box{
		margin-left: 2em;
		margin-right: 2em;
	}
}
@media only screen and (max-width: 640px){
	main .box{
		border-left-style: none;
		border-right-style: none;
		border-radius: 0;
		margin-left: 0;
		margin-right: 0;
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
}
@media only screen and (max-width: 420px){
	main .att{
		font-size: 0.875em;
	}
}

/* -=-=-=-=-=-=-=-=-=-=-=- #mv -=-=-=-=-=-=-=-=-=-=- */
#mv{
	box-sizing: content-box;
	max-width: 1075px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -3em;
	padding-left: 1em;
	padding-right: 1em;
	overflow: hidden;
}
#mv h1{
	margin-top: 1em;
}
#mv time{
	display: block;
	width: 80%;
	max-width: 631px;
	margin-left: auto;
	margin-right: auto;
}
#mv div{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-right: -2.5em;
	margin-top: -1em;
}
#mv div p{
	margin-right: 2.5em;
	margin-top: 1em;
}
#mv div p img{
	max-height: 55px;
}
@media only screen and (max-width: 600px){
	#mv div p img{
		height: 9vw;
	}
}

/* -=-=-=-=-=-=-=-=-=-=-=- #event -=-=-=-=-=-=-=-=-=-=- */
#event dl{
	box-sizing: border-box;
	display: flex;
	justify-content: left;
	align-items: start;
	flex-wrap: wrap;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}
#event dl dt{
	color: #fff7e3;
	font-weight: 700;
	text-align: center;
	background-color: #344f83;
	border-radius: 2em;
	flex-basis: 9em;
	margin-bottom: 0.5em;
}
#event dl dd{
	word-break: keep-all;
	overflow-wrap: break-word;
	white-space: nowrap;
	flex-basis: calc(100% - 12em);
	margin-left: 3em;
}
_::-webkit-full-page-media, _:future, :root #event dl dd{
	white-space: normal;
}
#event dl dd:not(:last-child){
	margin-bottom: 1.5em;
}
#event dl .flex{
	display: flex;
	flex-wrap: wrap;
}
#event dl .flex span{
	margin-right: 1em;
}
#event dl dd small{
	font-size: 0.75em;
	display: block;
}
#event div{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 3em;
}
#event div p:first-child{
	max-width: 335px;
}
#event div p:last-child{
	max-width: 169px;
	margin-left: -4%;
}
@media only screen and (max-width: 670px){
	#event dl{
		display: block;
	}
	#event dl dd{
		margin-left: 1em;
	}
	#event dl dt:not(:first-child){
		margin-top: 1em;
	}
}
@media only screen and (max-width: 480px){
	#event div{
		justify-content: center;
		align-items: center;
		flex-direction: column-reverse;
		margin-top: 1em;
	}
	#event div p:first-child{
		width: 80vw;
		max-width: none;
	}
	#event div p:last-child{
		width: 50vw;
		max-width: none;
		margin-left: 0;
	}
}

/* -=-=-=-=-=-=-=-=-=-=-=- #play -=-=-=-=-=-=-=-=-=-=- */
#play ul{
	display: flex;
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
}
#play ul li{
	flex-basis: 25%;
	list-style: none;
}
#play ul li:not(:first-child){
	margin-left: 1vw;
}
#play .btn{
	background-color: #02993b;
}
@media only screen and (max-width: 800px){
	#play ul{
		flex-wrap: wrap;
	}
	#play ul li{
		flex-basis: calc(50% - 0.6vw);
	}
	#play ul li:not(:first-child){
		margin-left: 0;
	}
	#play ul li:nth-child(2n){
		margin-left: 1vw;
	}
	#play ul li:nth-child(n + 3){
		margin-top: 1vw;
	}
}
@media only screen and (max-width: 400px){
	#play ul{
		box-sizing: content-box;
		display: block;
		max-width: 66vw;
	}
	#play ul li:not(:first-child){
		margin-top: 1em;
	}
	#play ul li:nth-child(2n){
		margin-left: 0;
	}
}

/* -=-=-=-=-=-=-=-=-=-=-=- #attention -=-=-=-=-=-=-=-=-=-=- */
#attention ul{
	box-sizing: border-box;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.2em;
}
@media only screen and (max-width: 640px){
	#attention ul{
		font-size: 0.875em;
	}
}

/* -=-=-=-=-=-=-=-=-=-=-=- #map -=-=-=-=-=-=-=-=-=-=- */
#map label{
	display: block;
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
}

/* -=-=-=-=-=-=-=-=-=-=-=- #booklet -=-=-=-=-=-=-=-=-=-=- */
#booklet a{
	display: block;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
#booklet .btn{
	background-color: #ba8037;
}

/* -=-=-=-=-=-=-=-=-=-=-=- #prize -=-=-=-=-=-=-=-=-=-=- */
#prize h2{
	width: 50vw;
	max-width: 300px;
	min-width: 220px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}
#prize ul{
	display: flex;
	list-style: none;
	justify-content: center;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
}
#prize ul#prize2{
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
}
#prize ul li{
	margin-bottom: 2em;
}
#prize ul#prize1 li{
	flex-basis: 24.5%;
}
#prize ul#prize1 li:first-child{
	flex-basis: 26.5%;
}
#prize ul#prize2 li{
	flex-basis: calc(100% / 3);
}
#prize ul li figure{
	text-align: center;
}
#prize ul li figure div{
	position: relative;
	display: inline-block;
}
#prize ul li figure div img{
	border-radius: 12px;
	width: auto;
	height: 146px;
}
#prize ul li figure span{
	color: #fff7e3;
	font-size: 0.75em;
	line-height: 2em;
	background-color: #49a0af;
	border-radius: 2em;
	position: absolute;
	right: 0;
	bottom: -3%;
	display: inline-block;
	height: 2em;
	padding-left: 0.75em;
	padding-right: 0.75em;
	transform: translateX(50%);
}
#prize ul li figure figcaption{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin-top: 0.5em;
}
#prize ul li figure figcaption strong{
	color: #fff7e3;
	font-weight: 700;
	line-height: 2.25em;
	background-color: #ba8037;
	display: block;
	flex-shrink: 0;
	height: 2.25em;
	margin-right: 0.5em;
	padding-left: 1em;
	padding-right: 1em;
}
#prize ul li figure figcaption p{
	font-size: 0.875em;
	text-align: left;
	line-height: 1.25;
}
#prize ul li figure ul{
	font-size: 0.75em;
	text-align: left;
	line-height: 1.5;
	display: block;
	padding-left: 2em;
}
#prize ul li figure ul li{
	list-style: disc;
	margin-bottom: 0;
}
@media only screen and (max-width: 1120px){
	#prize ul#prize1{
		max-width: 540px;
	}
	#prize ul#prize1 li,
	#prize ul#prize1 li:first-child{
		flex-basis: 50%;
	}
}
@media only screen and (max-width: 800px){
	#prize ul#prize2{
		max-width: 540px;
	}
	#prize ul#prize2 li{
		flex-basis: 50%;
	}
}
@media only screen and (max-width: 480px){
	#prize ul#prize1,
	#prize ul#prize2{
		max-width: 380px;
	}
	#prize ul#prize1 li,
	#prize ul#prize1 li:first-child,
	#prize ul#prize2 li{
		flex-basis: 100%;
	}
}

/* -=-=-=-=-=-=-=-=-=-=-=- #survey -=-=-=-=-=-=-=-=-=-=- */
#survey img{
	display: block;
	max-width: 160px;
	margin-left: auto;
	margin-right: auto;
}
#survey .btn{
	background-color: #ba8037;
}

/* -=-=-=-=-=-=-=-=-=-=-=- #map_view -=-=-=-=-=-=-=-=-=-=- */
#large_map{
	display: none;
}
#map_view{
	position: fixed;
	left: 0;
	top: 0;
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	opacity: 0;
	z-index: -10;
	transform: scale(1.2);
	transition-property: opacity,z-index,transform;
	transition-delay: 0s,0.5s,0s;
	transition-duration: 0.5s,0s,0.5s;
}
#map_view div{
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: max-content;
	height: auto;
	transform: translate(-50%,-50%);
}
#map_view .button{
	color: transparent;
	text-indent: -100vw;
	position: absolute;
	right: 0;
	top: -1.75em;
	display: block;
	width: 1.5em;
	height: 1.5em;
	cursor: pointer;
	transform: rotate(45deg);
}
#map_view .button::before,
#map_view .button::after{
	content: "";
	position: absolute;
	background-color: #ffffff;
	display: block;
}
#map_view .button::before{
	left: 0;
	top: calc(50% - 0.125em);
	width: 1.5em;
	height: 0.25em;
}
#map_view .button::after{
	left: calc(50% - 0.125em);
	top: 0;
	width: 0.25em;
	height: 1.5em;
}
#map_view img{
	max-width: 92vw;
	max-height: 92vh;
}
#map_view .filter{
	color: transparent;
	text-indent: -100vw;
	background-color: rgba(0,0,0,0.5);
	display: block;
	width: 100%;
	height: 100%;
}
#large_map:checked + #map_view{
	opacity: 1;
	z-index: 10;
	transform: scale(1);
	transition-delay: 0s;
}

/* -=-=-=-=-=-=-=-=-=-=-=- footer -=-=-=-=-=-=-=-=-=-=- */
footer{
	color: #ffffff;
	font-weight: 400;
	text-align: center;
	line-height: 1.2;
	background-color: #2e2e2e;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
footer small{
	font-size: inherit;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-left: 0.5em;
	margin-right: 0.5em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
footer small span{
	display: block;
	margin-left: 0.5em;
	margin-right: 0.5em;
}
@media only screen and (max-width: 1020px){
	footer small:first-child{
		flex-basis: 100%;
	}
}
@media only screen and (max-width: 800px){
	footer{
		font-size: 0.875em;
	}
}
@media only screen and (max-width: 640px){
	footer{
		font-size: 0.75em;
	}
}