:root {
	--fwr: 400;
	--fwm: 500;
	--fwb: 700;
}
html {
	--10px: 0.625rem;
	--13px: 0.813rem;
	--14px: 0.875rem;
	--15px: 0.9375rem;
	--16px: 1rem;
	--18px: 1.125rem;
	--24px: 1.5rem;
	--28px: 1.75rem;
	--32px: 2rem;
	--36px: 2.25rem;
	--52px: 3.25rem;
	--72px: 4.5rem;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;

}
body {
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-size: var(--16px);
	line-height: 1.8;
	font-weight: var(--fwr);
	color: #000;
	position: relative;
	z-index: 1;
}

img {
	max-width: 100%;
	height: auto;
}

.bg {
	/*background: #E8F4F0;*/
	background: linear-gradient(to bottom,  rgba(43,177,161,1) 0%,rgba(232,244,240,1) 15%,rgba(232,244,240,1) 85%,rgba(43,177,161,1) 100%);
}

section {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto 3rem;
	h1 {
		background: #2bb1a1;
		box-shadow: 0px 0px 0px 5px #2bb1a1;
		border: 1px dashed #fff;
		padding: .2rem .5rem .3rem;
 		font-size: var(--28px);
		font-weight: var(--fwb);
		color: #fff;
		margin-bottom: 1rem;
	}
}

@media screen and (min-width: 961px) {
	.sp { display: none !important; }
}
@media (max-width: 767px) {
	.sp { display: block !important; }
}


/*--------------------------------------------------------------
	header
---------------------------------------------------------------- */
header.main-tool-bar {
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transition: ease 0.2s;
}
header .headerWrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1000px;
	margin: 0 auto;
	padding: .8rem 1rem .5rem;
	.nav {
		width: 90%;
	}
	nav ul {
		display: flex;
		justify-content: space-around;
		/*color: #fff;
		text-shadow: 1px 1px 1px #000;*/
		font-size: var(--16px);
		font-weight: var(--fwb);
		padding-top: .5rem;
		a {
			color: #333;
			text-shadow: 1px 1px 1px #acacac;
			&:hover {
				color: #878787;
			}
		}
	}
	img {
		max-width: 65px;
	}
}
/* スクロール後 */
header.main-tool-bar.is-active {
	background: rgb(43,177,161,0.8);
	.headerWrap {
		padding-top: 1%;
		padding-bottom: 1%;
	}
}

@media screen and (min-width: 768px) {
	.miniMenu {
		display: none;
	}
}


/*--------------------------------------------------------------
	header --767
---------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	.miniMenu {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: .8rem 1rem .5rem;
		color: #fff;
		z-index: 999;
		width: 100%;
		img {
			max-width: 50px;
		}
	}
	.menu-btn {
		position: fixed;
		top: 4px;
		right: 10px;
		display: flex;
		height: 60px;
		width: 60px;
		justify-content: center;
		align-items: center;
		z-index: 90;
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background: #fff;
		transition: 0.5s ease;
		position: absolute;
	}
	.menu-btn span:before {
		bottom: 8px;
	}
	.menu-btn span:after {
		top: 8px;
	}
	#menu-btn-check:checked ~ .menu-btn span {
		background-color: rgba(255, 255, 255, 0);
		&::before {
			bottom: 0;
			transform: rotate(45deg);
		}
		&::after {
			top: 0;
			transform: rotate(-45deg);
		}
	}
	#menu-btn-check {
	    display: none;
	}
	.menu-content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;
		z-index: 80;
		background: #2bb1a1;
		transition: all 0.5s;
		ul {
			padding: 70px 1rem 0;
			li {
				border-bottom: solid 1px #fff;
				list-style: none;
				padding: .5rem;
				a {
					display: block;
					width: 100%;
					font-size: 15px;
					box-sizing: border-box;
					color:#fff;
					text-decoration: none;
					padding: 9px 0 10px;
					position: relative;
				}
				&:last-child {
					border: none;
					padding-top: 1.5rem;
					font-size: var(--18px);
					a {
						display: inline;
						font-size: var(--18px);
					}
				}
			}
		}
	}
	#menu-btn-check:checked ~ .menu-content {
	    left: 0;
	}

	/* スクロール後 */
	.miniMenu.is-active {
		background: rgba(43,177,161,0.8);
	}

	/* 768以上の設定を上書き */
	header .headerWrap {
		display: none;
	}
	header.main-tool-bar.is-active {
		display: none;
	}
}


/*--------------------------------------------------------------
	intro
---------------------------------------------------------------- */
#intro {
	position:relative;
	/*z-index: 100;*/
	width: 100%;
	height:100vh;
	/*background: url(../images/pht_main.jpg) center center no-repeat;
	background-size: cover;
	opacity: 0;
	animation: view_movie 1s linear 1s both;*/
	text-align: center;
	font-size: var(--18px);
	font-weight: var(--fwb);
	display: grid;
	place-items: center;
	.cntUnit {
		 p {
			margin-bottom: .5rem;
			/*animation: view 1s linear 1s both;*/
		}
		.logoTxtsvg {
			svg {
				width: 100%;
			}
		}
		.yearTxt {
			font-size: var(--72px);
			color: #5581c1;
			#year01, #year03 {
				color: #f4c820;
			}
			h2 {
				color: #2bb1a1;
				text-shadow: 1px 1px 1px #333;
				font-size: var(--52px);
				margin-top: -1rem;
			}
		}
		.txtUnit {
			dl {
				margin-top: 1rem;
				font-size: var(--16px);
				dt,dd {
					font-weight: var(--fwr);
				}
			}
		}
	}
}

/*@keyframes view_movie {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}*/
@keyframes view {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}



@media screen and (max-width: 767px) {
	#intro .logoTxtsvg {
		margin-right: 1rem;
		margin-left: 1rem;
	}
}


/* closeUnit
----------------------------------------- */
.closeUnit {
	position: absolute;
	top: 0;
	width: 100vw;
	height: 100%;
	background: rgba(25, 134, 59, 0.8);
	p {
		padding-top: 40vh;
		font-size: var(--24px);
		color: #fff;
		text-shadow: 1px 1px 1px #000;
	}
}

@media screen and (min-width: 961px) {
	.closeUnit {
		width: calc(100vw - 17px);
		padding-top: 7vh;
	}
}


/* chevron
----------------------------------------- */
.chevron {
	text-align: center;
	position: absolute;
	cursor: pointer;
	/* margin: auto; */
	bottom: 2%;
	left: 50%;
	transform: translate(-50%, 0);
}

.pulse {
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0% {
		transform: translate(0, 0);
	}
 	50% {
		transform: translate(0, 10px);
	}
	100% {
		transform: translate(0, 0);
	}
}


/*--------------------------------------------------------------
	leadUnit
---------------------------------------------------------------- */
#leadUnit {
	text-align: center;
	font-size: var(--18px);
	font-weight: var(--fwb);
	#Lead {
		text-shadow: 1px 1px 1px #333;
		p {
			font-size: var(--28px);
			color: #2bb1a1;
			&:nth-of-type(2) {
				font-size: var(--32px);
				line-height: 1.2;
			}
		}
	}

	/* 1文字づつのy方向を有効にする */
	.lead_text span {
		/* transformプロパティを有効にするため */
		display: inline-block;
	}

	.figWrap {
		margin: 3rem;
		ul {
			display: grid;
			gap: 50px;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			align-items: flex-end;
			li {
				span {
					font-size: var(--13px);
					font-weight: var(--fwm);
				}
				p {
					border: 2px solid #2bb1a1;
					border-radius: 10px;
					padding: .15em 1em;
					margin-top: .5em;
				}
				img {
					max-width: 100%;
					height: auto;
				}
			}
		}
	}
}

/*--------------------------------------------------------------
	event
---------------------------------------------------------------- */
#event {
	.map p {
		border: none;
	}
	ol {
		margin-top: 1rem;
		li {
			border-bottom: 1px dashed #000;
			padding: 1rem 1rem 0;
			&:last-child {
				border: none;
			}
			span {
				padding: 0 1rem;
				margin-right: .5rem;
				color: #fff;
				font-size: var(--18px);
				font-weight: var(--fwb);
			}
		}
	}
	div {
		&:nth-child(1) span {
			background: #3d7abd;
		}
		&:nth-child(2) span {
			background: #f9c53d;
			color: #2a3594;
		}
	}
}


/*--------------------------------------------------------------
	panf
---------------------------------------------------------------- */
.panf {
	text-align: center;
	img {
		max-width: 800px;
		width: 100%;
		margin: 2rem 0;
		border: 1px solid #ccc;
	}
	.yearBtn {
		text-align: center;
		a {
			border: 2px solid #6cc3af;
			border-radius: 8px;
			color: #2bb1a1;
			font-weight: var(--fwb);
			padding: .5rem;
			&:hover {
				background: #6cc3af;
				color: #fff;
			}
		}
	}
}


/*--------------------------------------------------------------
	flyer
---------------------------------------------------------------- */
.paper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	img {
		max-width: 320px;
		width: 100%;
		margin: 2rem 0;
		border: 1px solid #ccc;
	}
	.yearBtn {
		text-align: center;
		a {
			border: 2px solid #6cc3af;
			border-radius: 8px;
			color: #2bb1a1;
			font-weight: var(--fwb);
			padding: .5rem;
			&:hover {
				background: #6cc3af;
				color: #fff;
			}
		}
	}
}


/*--------------------------------------------------------------
	access
---------------------------------------------------------------- */
.map {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	justify-content: center;
	div {
		flex-basis: calc((100% - 30px) / 2);
		min-width: 300px;
		margin-top: 2rem;
		p {
			border: 1px solid #ccc;
		}
		iframe {
			width: 100%;
			height: 400px;
		}
	}
	h1 {
		background: none;
		border: 3px double #000;
		border-right: none;
		border-left: none;
		box-shadow: none;
		padding: .5rem;
		font-size: var(--24px);
		font-weight: var(--fwm);
		text-align: center;
		color: #000;
	}
	dl {
		margin-bottom: 1rem;
	}
}
@media screen and (max-width: 767px) {
	.map {
		display: block;
	}
}


/*--------------------------------------------------------------
	Links
---------------------------------------------------------------- */
#Links {
	padding-bottom: 3rem;
	ul {
		display: flex;
		flex-wrap: wrap;
	}
	li {
		width: 25%;
		padding: 1rem;
		text-align: center;
	}
	li:nth-of-type(7) {
		width: 50%;
	}
}
@media screen and (max-width: 767px) {
	#Links {
		li {
			width: 50%;
		}
		li:nth-of-type(7) {
			width: 100%;
		}
	}
}
@media screen and (max-width: 375px) {
	#Links {
		li {
			width: 100%;
		}
	}
}


/*--------------------------------------------------------------
	footer
---------------------------------------------------------------- */
footer {
	padding-top: 1rem;
	background: #6cc3af;
	color: #fff;
	font-size: var(--14px);
	line-height: 1.6;
	section {
		margin-bottom: 0;
	}
	dl {
		/*max-width: 900px;
		margin: auto;*/
		margin-bottom: .5rem;
		padding: 0 2rem;
	}
	ul {
		background: #2bb1a1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 1.5rem;
	}
}

@media screen and (max-width: 767px) {
	footer {
		font-size: var(--13px);

	}
}
footer .sns_link { padding: 20px 0; }
footer .sns_link li { margin-right: 2.54%; }
footer .sns_link li a { width: 5.34vw; height: 5.34vw; display: block; }
footer .sns_link li.facebook a { background: url(../images/facebook.svg) no-repeat center center; background-size: 100% 100%; }
footer .sns_link li.twitter a { background: url(../images/logo_x.svg) no-repeat center center; background-size: 100% 100%; width: 3.2vw; }
@media (min-width: 1025px) {
	footer .sns_link li a { width: 40px; height: 40px; }
}


/*--------------------------------------------------------------
	pagetop
---------------------------------------------------------------- */
.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 30px;
	a {
		display: block;
		background: rgba(51, 51, 51, 0.5);
		color: #fff;
		text-align: center;
		font-size: var(--16px);
		padding: 1rem;
		border-radius: 10px;
		&:hover {
			background: rgba(43, 177, 161, 0.5);
		}
	}
}