@charset "UTF-8";

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
	margin: 0;
	padding: 0;
}
li { list-style:none; } caption,th{ text-align:left; }
input,textarea,select{ font-family:inherit;font-size:inherit;font-weight:inherit; }
section {
	margin: 0;
	padding: 0;
}
a {
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
	text-decoration: none;
	color: #45454a;
}
a:hover {
	opacity: 0.6;
}
img {
	width: 100%;
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: bottom;
}

html {
	font-size: 62.5%;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	color: #45454a;
}
body {
	-webkit-text-size-adjust: 100%;
}
.open {
	overflow-y: hidden;
}

.nojs {
	z-index: 100000;
	left: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, .96);
	align-items: center;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: fixed;
	top: 0;
}
	.nojs_inner {
		padding: 0 20px;
		font-size: 16px;
		line-height: 1.8;
		max-width: 600px;
		text-align: center;
	}
		.nojs_img {
			margin: 0 auto 40px;
		}
		.nojs p {
			max-height: 100%;
		}

header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	z-index: 10;
	background-color: #fff;
	font-size: 1.6rem;
}
	header .headerinner {
		display: grid;
		align-items: center;
		grid-template-columns: 220px minmax(390px, 660px) 220px;
		margin: 0 auto;
		padding: 0 20px;
		max-width: 1140px;
		height: 100%;
		box-sizing: border-box;
	}
		header .headerLogo_left img {
			width: 203px;
		}
		header .headerLogo_right{
			text-align: right;
		}
			header .headerLogo_right img{
				width: 95px;
			}
		header .headerMenu {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0 25px;
			font-size: 1.7rem;
		}
			header .headerMenu a {
				color: #45454a;
			}

	header #hamburger {
		display: none;
	}
	header nav#header_nav {
		position: fixed;
		top: 60px;
		right: -331px;
	}

@media (max-width: 880px) {
	header .headerinner {
		grid-template-columns: 220px 390px calc(100% - 610px);
	}
}

@media (max-width: 768px) {
	header {
		height: 60px;
	}
		header .headerinner {
			grid-template-columns: 175px calc(100% - 288px) 113px;
		}
			header .headerLogo_right{
				text-align: right;
			}
			header .headerMenuNav {
				display: none;
			}

		header #hamburger {
			display: block;
			position: absolute;
			top: 60px;
			right: 0;
			width: 45px;
			height: 40px;
			cursor: pointer;
			z-index: 10;
			color: #FFFFFF;
			font-size: 1.4rem;
			background-color: #7291ca;
		}
			header #hamburger span {
				display: none;
				background: #FFFFFF;
				display: block;
				width: 25px;
				height: 4px;
				position: absolute;
				left: 11px;
				-webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), top 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.22s;
				transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), top 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.22s;
			}
			header #hamburger span:nth-child(1) {
				top: 10px;
			}
			header #hamburger span:nth-child(2) {
				top: 18px;
				-webkit-transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			}
			header #hamburger span:nth-child(3) {
				top: 26px;
			}
			header.nav-open #hamburger span {
				width: 25px;
				-webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.12s, top 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.12s, top 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			}
			header.nav-open #hamburger span:nth-child(1) {
				top: 18px;
				left: 9px;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}
			header.nav-open #hamburger span:nth-child(2) {
				opacity: 0;
			}
			header.nav-open #hamburger span:nth-child(3) {
				top: 18px;
				left: 9px;
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}

			header nav#header_nav {
				width: 331px;
				height: calc(100vh - 60px);
				max-height: 280px;
				padding: 40px 0 0;
				background-color: #7291ca;
				overflow: hidden;
				z-index: 5;
				transition: all 0.3s;
			}
			header.nav-open nav#header_nav {
				right: 0;
			}
				header #header_nav #nav-list {
					padding: 10px 0 50px 80px;
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					line-height: 1.2;
					font-size: 1.0rem;
					overflow-y: auto;
					box-sizing: border-box;
					scrollbar-gutter: stable;
				}
				header #header_nav #nav-list > * {
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
				}
					header #header_nav a {
						display: block;
						padding: 7px 0;
						text-decoration: none;
						color: #FFFFFF;
						font-size: 1.7rem;
					}
						header #header_nav a .ja {
							font-size: 1.1rem;
						}
}

main {
	position: relative;
	width: 100%;
	font-size: 1.6rem;
	line-height: 2.0;
}

section {
	margin-top: -70px;
	padding-top: 70px;
}

.festival_wrapper {
	margin: 0 auto;
	padding: 0 20px;
	max-width: 1140px;
	box-sizing: border-box;
}

	.ttl_container {
		margin-bottom: 80px;
		text-align: center;
	}
		h2 .ja {
			display: block;
			margin-bottom: 5px;
			font-weight: normal;
			font-size: 1.6rem;
		}
		h2 .en {
			display: block;
			margin: 0 auto;
			line-height: 1.0;
			letter-spacing: 5px;
		}
		.text_container {
			margin-bottom: 40px;
			text-align: center;
		}
			.text_container .textline01 {
				font-size: 3.5rem;
			}
			.text_container .textline02 {
				font-size: 2.0rem;
			}

@media (max-width: 768px) {
	main {
		line-height: 1.7;
	}
	section {
		margin-top: -60px;
		padding-top: 60px;
	}
}

#mainVisual {
	background-color: #e9c932;
}
	#mainVisual .topimage {
		display: grid;
		place-items: center;
		width: 100%;
		height: clamp(400px, 100vw, 700px);
	}
	#mainVisual .topimage img {
		width: clamp(300px, 60vw, 500px);
	}

/* topics */
#topics {
	padding: 60px 0 75px;
}
	#topics .topics_grid {
		display: grid;
		align-items: center;
		grid-template-columns: 30% 70%;
		width: 100%;
	}
		#topics .ttl_container {
			text-align: left;
		}
			#topics h2 .ja {
				color: #e9c932;
			}
			#topics h2 .en {
				margin: 0;
				width: 150px;
			}
		#topics .news {
				font-size: 1.6rem;
		}
			#topics .news dl.news_grid {
				display: grid;
				grid-template-columns: 100px auto;
				padding: 20px  0;
				max-height: 128px;
				box-sizing: border-box;
				overflow-y: auto;
				border-top: 1px solid #000000;
				border-bottom: 1px solid #000000;
				overflow-y: auto;
			}
				#topics .news dl.news_grid dt {
					font-weight: normal;
				}
					#topics .news dl.news_grid dd {
					}
			#topics .news .xlink_grid {
				display: grid;
				grid-template-columns: 60px auto;
				align-items: center;
				margin-top: 50px;
				line-height: 1.6;
			}
				#topics .news .xlink_left {
					padding-right: 10px;
				}

@media (max-width: 768px) {
	#topics {
		padding: 40px 0 50px;
	}
		#topics .topics_grid {
			display: block;
		}
			#topics .ttl_container {
				margin-bottom: 40px;
				text-align: center;
			}
				#topics h2 .en {
					margin: 0 auto;
				}
			#topics .news dl.news_grid {
				max-height: 108px;
			}
			#topics .news .xlink_grid {
				margin-top: 30px;
			}
}

/* about */
#about {
	padding: 135px 0 0;
	background-color: #f2f2f2;
}
	#about .ttl_container {
		margin-bottom: 30px;
		color: #e9c932;
	}
		#about h2 .en {
			width: 255px;
		}
	#about .about_box {
		margin: 0 auto;
		padding: clamp(35px, 5vw, 60px) clamp(25px, 5vw, 60px);
		max-width: 900px;
		border-radius: 20px;
		background-color: #FFFFFF;
		box-sizing: border-box;
		color: #45454a;
	}
	#about .btn_about {
		margin: 50px auto 0;
		width: 100%;
		max-width: 400px;
	}
		#about .btn_about a {
			display: grid;
			place-items: center;
			width: 100%;
			height: clamp(60px, 5vw, 80px);
			border-radius: 40px;
			background-color: #7291CA;
			color: #FFFFFF;
		}

@media (max-width: 768px) {
	#about {
		padding: 80px 0 0;
	}
		#about h2 .en {
			width: 150px;
		}
		#about .btn_about {
			margin: 30px auto 0;
		}
}

#category {
	padding: 135px 0 165px;
	background-color: #f2f2f2;
	text-align: center;
}
	#category .ttl_container {
		margin-bottom: 0;
		color: #e9c932;
	}
		#category  h2 .en {
			width: 395px;
		}
	#category .period {
		display: flex; 
		align-items: center;
		margin-top: 25px;
	}
		#category .period img {
			width: 352px;
		}
	#category .period::before,
	#category .period::after {
		content: "";
		flex-grow: 1;
		background: #000;
		height: 1px;
		margin: 0 10px;
	}
	#category .period::before {
		margin-right: clamp(20px, 4vw, 45px);
	}
	#category .period::after {
		margin-left: clamp(20px, 4vw, 45px);
	}
	#category .category_txt {
		margin-top: 35px;
		font-size: 2.0rem;
		color: #45454a;
	}
	#category .textline01 {
		margin-top: 25px;
		font-size: 3.0rem;
				color: #e9c932;
	}
	#category .textline02 {
		font-size: 1.6rem;
	}
	#category .category_flex {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 90px 3.5%;
		margin-top: 80px;
		width: 100%;
		line-height: 1.7;
		text-align: left;
	}
		#category .category_flex .category_box {
			width: 31%;
		}
			#category .category_flex .category_box h3 {
				margin-top: 10px;
				font-size: 2.0rem;
			}
			#category .category_flex .category_box p {
				margin-top: 10px;
				font-size: 1.6rem;
			}
			#category .category_flex .category_box p.kochira a {
				text-decoration: underline !important;
				color: #e9c932;
			}

@media (max-width: 768px) {
	#category {
		padding: 65px 0 110px;
	}
		#category  h2 .en {
			width: 255px;
		}
		#category .period img {
			width: 255px;
		}
		#category .category_txt {
			margin-top: 25px;
		}
		#category .textline01 {
			margin-top: 15px;
			font-size: 2.4rem;
		}
		#category .category_flex {
			margin-top: 40px;
			gap: 50px 4.0%;
		}
			#category .category_flex .category_box {
				width: 48%;
			}
				#category .category_flex .category_box h3 {
					margin-top: 10px;
					font-size: 1.8rem;
				}
				#category .category_flex .category_box p {
					margin-top: 10px;
					font-size: 1.6rem;
				}
}

#starman {
	padding: 120px 0 135px;
	background-color: #e9c932;
	color: #FFFFFF;
}
	#starman .starman_grid {
		display: grid;
		align-items: center;
		grid-template-columns: 55% 35%;
		gap: 0 10%;
		width: 100%;
	}
		#starman .ttl_container {
			margin-bottom: 50px;
			text-align: left;
		}
			#starman h2 .en {
				margin: 0;
				width: 340px;
			}
		#starman p.txt01 {
			margin-bottom: 50px;
			font-size: 2.0rem;
		}
		#starman p.txt02 {
			font-size: 1.8rem;
		}

@media (max-width: 768px) {
	#starman {
		padding: 80px 0 90px;
	}
		#starman .starman_grid {
			display: block;
		}
			#starman .ttl_container {
				margin-bottom: 30px;
				text-align: center;
			}
				#starman h2 .en {
					margin: 0 auto;
					width: 255px;
				}
			#starman p.txt01 {
				margin-bottom: 30px;
			}
			#starman .starman_grid .starman_grid_right {
				margin: 40px auto 0;
				max-width: 500px;
			}
}

/* outline */
#outline {
	padding: 140px 0;
	background-color: #F2f2f2;
}
	#outline h2 .en {
		width: 565px;
	}
	#outline .outline_box {
		padding: clamp(35px, 5vw, 60px) clamp(25px, 5vw, 60px);
		border: 1px solid #000000;
		border-radius: 20px;
		background-color: #FFFFFF;
		box-sizing: border-box;
	}
		#outline dl.outline_grid {
			display: grid;
			grid-template-columns: 70px auto;
			gap: 1em 40px;
			margin: 50px auto 0;
			width: 100%;
			max-width: 1100px;
			font-size: 1.8rem;
		}
			#outline dl.outline_grid dt {
				color: #e9c932;
			}
			#outline dl.outline_grid dd {
			}

@media (max-width: 768px) {
	#outline {
		padding: 95px 0;
	}
		#outline .ttl_container {
			margin-bottom: 40px
		}
			#outline h2 .en {
				width: 255px;
			}
			#outline dl.outline_grid {
				display: grid;
				gap: 1em 10px;
			}
}

footer {
	padding: 60px 0;
	background-color: #E6E6E6;
	font-size: 1.6rem;
	text-align: center;
}
	footer .fotter_logo {
		margin: 0 auto;
		max-width: 450px;
	}
	footer .fotter_flex {
		display: flex;
		justify-content: space-between;
		margin-top: 40px;
		font-size: 1.4rem;
	}
		footer .fotter_flex a {
			display: block;
			text-decoration: none;
			color: #45454a;
		}
	footer .fotter_copy {
		margin-top: 40px;
		font-size: 1.2rem;
	}

@media (max-width: 980px) {
	footer .fotter_flex {
		display: block;
	}
		footer .fotter_flex a {
			margin-top: 10px;
		}

}

.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.show_pc {
	display: block;
}
.show_sp {
	display: none;
}

@media (max-width: 768px) {
	.show_pc {
		display: none;
	}
	.show_sp {
		display: block;
	}
}