@charset "UTF-8";

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

html {
	font-family: 'Roboto', 'Noto Sans JP', sans-serif;
	}

body {
	padding: 50px 0 0 0;
	color: #fff;
	background: #000;
	}

a {
	color: #00ff00;
	text-decoration: none;
	transition: .3s ease;
	}

a:hover {
	color: #e2431e;
	}

img {
	display: block;
	width: 100%;
	}

/* header */
header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	margin: 0;
	padding: 10px 15px;
	background: #000;
	z-index: 1000;
	}

header .logo {
	display: block;
	}

header .logo a {
	display: block;
	}

header .logo a img {
	display: block;
	width: 78.695px;
	height: 30px;
	}

header span.bt {
	display: none;
	}
@media screen and (max-width:767.98px){
header span.bt {
	position: fixed;
	right: 10px;
	top: 10px;
	display: block;
	width: 30px;
	height: 30px;
	content: "";
	transition: .5s ease;
	}
header span.bt:before {
	position: absolute;
	left: 0px;
	top: 7px;
	width: 30px;
	height: 1px;
	content: "";
	background: #00ff00;
	transition: .2s ease;
	}
header span.bt:after {
	position: absolute;
	left: 0px;
	bottom: 7px;
	width: 30px;
	height: 1px;
	content: "";
	background: #00ff00;
	transition: .2s ease;
	}
header span.bt.open:before {
	top: 14.5px;
	transform: rotate(-315deg);
	}
header span.bt.open:after {
	bottom: 14.5px;
	transform: rotate(315deg);
	}
}

header nav {
	position: absolute;
	right: 10px;
	top: 0px;
	display: block;
	z-index: 1000;
	}
@media screen and (max-width:767.98px){
header nav {
	position: fixed;
	right: -100%;
	top: 50px;
	width: 100%;
	transition: .5s ease;
	}
header nav.open {
	right: 0px;
	}
}

header nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}

header nav ul li {
	display: block;
	}
@media screen and (max-width:767.98px){
header nav ul li {
	width: 100%;
	border-bottom: 1px solid #000;
	}
header nav ul li.sns {
	width: calc(100% / 3);
	}
}

header nav ul li a {
	display: block;
	padding: 17px 10px;
	color: #fff;
	font-size: 16px;
	letter-spacing: .1em;
	line-height: 1em;
	}
@media screen and (max-width:834px){
header nav ul li a {
	padding: 17px 7.5px;
	}
}
@media screen and (max-width:768px){
header nav ul li a {
	padding: 17px 5px;
	}
}

header nav ul li a:hover {
	color: #000;
	background: #00ff00;
	}

header nav ul li.sns a {
	margin-top: -1px;
	}
@media screen and (max-width:767.98px){
header nav ul li.sns a {
	margin-top: 0;
	}
}

@media screen and (max-width:767.98px){
header nav ul li a {
	padding: 15px;
	font-size: 20px;
	color: #000;
	background: #00ee00;
	}
header nav ul li.sns a {
	font-size: 30px;
	text-align: center;
	}
header nav ul li.sns a:before {
	display: none;
	}
}

header nav ul li.lang a {
	margin: 13px 0 0 15px;
	padding: 5px;
	color: #541407;
	font-size: .8em;
	letter-spacing: 0;
	background: #fff;
	border-radius: 5px;
	}
@media screen and (max-width:767.98px){
header nav ul li.lang a {
	margin: 0;
	padding: 15px;
	color: #fff;
	font-size: 20px;
	letter-spacing: 0;
	background: #541407;
	border-radius: 0;
	}
}

/* main visual */
#mv {
	position: relative;
	min-height: 650px;
	padding: 35% 7% 3%;
	background: url(../img/mv2025.jpg) center bottom no-repeat;
	background-size: cover;
	}
@media screen and (max-width:767.98px){
#mv {
	min-height: auto;
	padding: 80% 0 5%;
	background: url(../img/mv2025.jpg) right bottom no-repeat;
	background-size: cover;
	}
}

#mv h1 {
	position: absolute;
	left: 30%;
	top: 5%;
	display: block;
	width: 40%;
	animation: mv_h1 1.5s ease both;
	}
@media screen and (max-width:767.98px){
#mv h1 {
	left: 5%;
	top: 5%;
	width: 90%;
	}
}
@keyframes mv_h1 {
	0% { opacity: 0; filter: blur(20px); }
	100% { opacity: 1; filter: blur(0px); }
	}

#mv h2 {
	position: absolute;
	right: 30%;
	top: 5%;
	display: block;
	width: 40%;
	animation: mv_h2 1s ease both;
	}
@media screen and (max-width:767.98px){
#mv h2 {
	right: 10%;
	top: 3%;
	width: 80%;
	}
}
@keyframes mv_h2 {
	0% { opacity: 0; filter: blur(20px); }
	100% { opacity: 1; filter: blur(0px); }
	}

#mv h3 {
	display: block;
	width: 60%;
	margin: 0 auto 50px;
	animation: mv_h3 3s ease both;
	}
@media screen and (max-width:767.98px){
#mv h3 {
	width: 90%;
	margin: 0 auto 20px;
	}
}
@keyframes mv_h3 {
	0% { opacity: 0; transform: translateY(30%); filter: blur(20px); }
	100% { opacity: 1; transform: translateY(0%); filter: blur(0px); }
	}

#mv h4 {
	position: absolute;
	right: 17%;
	top: 20%;
	display: block;
	width: 3%;
	transform: translateX(-50%);
	animation: mv_h4 1.5s ease both;
	}
@media screen and (max-width:767.98px){
#mv h4 {
	right: 19%;
	top: 15%;
	width: 4%;
	}
}
@keyframes mv_h4 {
	0% { opacity: 0; transform: translate(-50%,30%); filter: blur(20px); }
	100% { opacity: 1; transform: translate(-50%,0%); filter: blur(0px); }
	}

#mv p {
	display: block;
	margin: 0 0 1rem;
	color: #fff;
	text-align: center;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0,0,0,.8);
	animation: mv_p 1s ease both .5s;
	}
@keyframes mv_p {
	0% { opacity: 0; filter: blur(20px); }
	100% { opacity: 1; filter: blur(0px); }
	}

#mv p.date {
	font-size: 2em;
	font-weight: 600;
	}
@media screen and (max-width:767.98px){
#mv p.date {
	font-size: 1.5em;
	}
}

#mv a {
	display: block;
	width: 100%;
	max-width: 35%;
	margin: 2rem auto;
	padding: .8rem 0 1rem;
	color: #000;
	font-size: 1.2em;
	font-weight: 600;
	text-align: center;
	background: #0f0;
	border-radius: 5px;
	transition: .3s ease;
	animation: mv_a 1s ease both 1s;
	}
@media screen and (max-width:767.98px){
#mv a {
	margin: 2rem auto 0;
	max-width: 80%;
	}
}
#mv a:hover {
	opacity: .8;
	}

@keyframes mv_a {
	0% { opacity: 0; filter: blur(20px); }
	100% { opacity: 1; filter: blur(0px); }
	}

#mv a br {
	display: none;
	}
@media screen and (max-width:767.98px){
#mv a br {
	display: inline;
	}
}

/* sponcer */
#sponcer {
	position: relative;
	padding: 10px 0;
	background: #fff;
	}

#sponcer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	}

#sponcer ul li {
	display: block;
	width: 20%;
	padding: 20px;
	}
@media screen and (max-width:767.98px){
#sponcer ul li {
	padding: 10px;
	}
header nav ul li.sns {
	width: calc(100% / 3);
	}
}

#sponcer ul li img {
	display: block;
	width: 100%;
	max-height: 50px;
	}

/* about */
#about {
	position: relative;
	padding: 7%;
	text-align: center;
	background: url(../img/bg_about.jpg) center center;
	}
@media screen and (max-width:767.98px){
#about {
	padding: 10% 7%;
	}
}

#about h2 {
	display: block;
	margin: 0 0 2rem;
	font-size: 2em;
	font-weight: 700;
	}

#about p {
	display: block;
	margin: 0 0 1rem;
	line-height: 2em;
	letter-spacing: .1rem;
	}
@media screen and (max-width:767.98px){
#about p {
	text-align: left;
	}
#about p br {
	display: none;
	}
}

#about div img {
	position: absolute;
	box-shadow: 5px 5px 0px #bd8877;
	}
@media screen and (max-width:767.98px){
#about div img {
	position: relative;
	display: inline-block;
	}
}

/* timetable */
#timetable {
	position: relative;
	padding: 5% 7%;
	background: url(../img/bg_timetable.jpg) center center no-repeat;
	background-size: 100%;
	}
@media screen and (max-width:767.98px){
#timetable {
	background-size: cover;
	}
}

#timetable h2 {
	display: block;
	margin: 0 0 2rem;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	}

#timetable p {
	display: block;
	margin: 0 0 1.5rem;
	font-size: 1.5em;
	font-weight: 700;
	text-align: center;
	}

#timetable table {
	width: 100%;
	max-width: 500px;
	margin: 0 auto 1rem;
	font-size: 1.5em;
	line-height: 1em;
	}

#timetable th {
	width: 50%;
	padding: 1rem;
	text-align: right;
	}
@media screen and (max-width:767.98px){
#timetable th {
	width: 40%;
	}
}

#timetable td {
	width: 50%;
	padding: 1rem;
	}
@media screen and (max-width:767.98px){
#timetable td {
	width: 60%;
	}
}

/* access */
#access {
	position: relative;
	padding: 5% 7%;
	color: #000;
	background: #fff;
	}
@media screen and (max-width:767.98px){
#access {
	padding: 10% 7%;
	}
}

#access h2 {
	display: block;
	margin: 0 0 2rem;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	}

#access h3 {
	display: block;
	margin: 0 0 2rem;
	font-size: 1.8em;
	font-weight: 700;
	text-align: center;
	}

#access p {
	display: block;
	margin: 0 0 1rem;
	font-size: 1.5em;
	font-weight: 700;
	text-align: center;
	}
@media screen and (max-width:767.98px){
#access p {
	line-height: .5em;
	}
}

#access h4 {
	display: block;
	margin: 2rem 0 1rem;
	font-size: 1.25em;
	font-weight: 500;
	letter-spacing: .1rem;
	text-align: center;
	}

#access p {
	display: block;
	margin: 0 0 1rem;
	padding: 0 5%;
	line-height: 1.5em;
	text-align: center;
	}

#access a {
	display: block;
	margin: 0 0 3rem;
	font-size: 1.2em;
	text-align: center;
	text-decoration: underline;
	}

#access iframe {
	width: 100%;
	margin: 0 0 2rem;
	}



/* touring */
#touring {
	position: relative;
	padding: 5% 7%;
	color: #000;
	background: #eee;
	}
@media screen and (max-width:767.98px){
#touring {
	padding: 10% 7%;
	}
}

#touring h2 {
	display: block;
	margin: 0 0 2rem;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	}

#touring h3 {
	display: block;
	margin: 2rem 0 2rem;
	font-size: 1.8em;
	text-align: center;
	}

#touring p {
	display: block;
	margin: 0 0 1rem;
	text-align: center;
	}
@media screen and (max-width:767.98px){
#touring p {
	line-height: .5em;
	}
}

#touring h4 {
	display: block;
	margin: 2rem 0 1rem;
	font-size: 1.25em;
	font-weight: 500;
	letter-spacing: .1rem;
	text-align: center;
	}

#touring p {
	display: block;
	margin: 0 0 1rem;
	padding: 0 5%;
	line-height: 1.5em;
	text-align: center;
	}

#touring a {
	display: block;
	margin: 0 0 3rem;
	font-size: 1.2em;
	text-align: center;
	text-decoration: underline;
	}

#touring iframe {
	width: 100%;
	margin: 0 0 2rem;
	}

/* faq */
#faq {
	position: relative;
	padding: 5% 7%;
	}
@media screen and (max-width:767.98px){
#faq {
	padding: 10% 7%;
	}
}

#faq h2 {
	display: block;
	margin: 0 0 2rem;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	}

#faq p {
	display: block;
	margin: 0 0 1rem;
	font-size: 1.5em;
	font-weight: 700;
	text-align: center;
	}

#faq dl {
	display: block;
	width: 100%;
	max-width: 70%;
	margin: 0 auto;
	font-size: 1.2em;
	letter-spacing: .05em;
	}
@media screen and (max-width:767.98px){
#faq dl {
	max-width: 100%;
	}
}

#faq dt {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 1rem;
	padding: 1rem 0 1rem 40px;
	}

#faq dt::before {
	position: absolute;
	left: 0;
	top: 15px;
	display: block;
	width: 30px;
	height: 30px;
	content: "Q";
	font-size: 24px;
	line-height: 30px;
	text-align: center;
	background: #333;
	border-radius: 50%;
	}

#faq dd {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 2rem;
	padding: 1rem 0 1rem 40px;
	}

#faq dd::before {
	position: absolute;
	left: 0;
	top: 15px;
	display: block;
	width: 30px;
	height: 30px;
	content: "A";
	color: #000;
	font-size: 24px;
	line-height: 30px;
	text-align: center;
	background: #0f0;
	border-radius: 50%;
	}


/* entry */
#entry {
	position: relative;
	padding: 5% 7%;
	color: #000;
	background: #fff;
	}
@media screen and (max-width:767.98px){
#entry {
	padding: 10% 0;
	}
}


#entry h2 {
	display: block;
	margin: 0 0 2rem;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	}

#entry p {
	display: block;
	margin: 0 0 1rem;
	line-height: 1.5em;
	letter-spacing: .1rem;
	text-align: center;
	}
@media screen and (max-width:767.98px){
#entry p {
	line-height: 1.5em;
	}
}

#entry p.notice {
	font-size: .8em;
	}
@media screen and (max-width:767.98px){
#entry p.notice {
	padding-left: 1em;
	line-height: 2em;
	text-align: left;
	text-indent: -1em;
	}
}

#entry form {
	width: 100%;
	max-width: 640px;
	margin: 0 auto 3rem;
	padding: 0 4vw;
	font-size: 1.2em;
	}

#entry div {
	position: relative;
	}

#entry label {
	display: block;
	padding: 1em 0;
	font-weight: 600;
	}

#entry input {
	display: block;
	width: 100%;
	margin: 5px 0;
	padding: 10px;
	border: 1px solid #333;
	background: #fff;
	border-radius: 5px;
	}

#entry div.req:after {
	position: absolute;
	right: 0px;
	top: 27px;
	display: block;
	padding: 3px 5px;
	font-size: 10px;
	line-height: 1em;
	content: "必須";
	color: #fff;
	background: #a00;
	border-radius: 10px;
	}

#entry div.submitbtn input {
	display: block;
	width: 100%;
	max-width: 50%;
	margin: 2rem auto 0;
	padding: .8rem 0 1rem;
	color: #000;
	font-size: 1.2em;
	font-weight: 600;
	text-align: center;
	background: #0f0;
	border: 0;
	border-radius: 5px;
	transition: .3s ease;
	}
@media screen and (max-width:767.98px){
#entry div.submitbtn input {
	margin: 2rem auto 0;
	max-width: 80%;
	}
}
#entry div.submitbtn input:hover {
	opacity: .8;
	}

#entry a {
	display: block;
	margin: 1em 0;
	color: #0f0;
	text-decoration: underline;
	}

#entry div.submitbtn a {
	display: block;
	width: 100%;
	max-width: 50%;
	margin: 2rem auto 1rem;
	padding: .8rem 0 1rem;
	color: #000;
	font-size: 1.2em;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	background: #0f0;
	border: 0;
	border-radius: 5px;
	transition: .3s ease;
	}
@media screen and (max-width:767.98px){
#entry div.submitbtn a {
	margin: 2rem auto 0;
	max-width: 80%;
	}
}
#entry div.submitbtn a:hover {
	opacity: .8;
	}

/* footer */
footer {
	position: relative;
	padding: 10% 0 5%;
	}

footer h2 {
	display: block;
	width: 100%;
	max-width: 300px;
	margin: 0 auto 5rem;
	}
@media screen and (max-width:767.98px){
footer h2 {
	max-width: 50%;
	}
}

footer h3 {
	display: block;
	margin: 5rem 0 2rem;
	letter-spacing: .1rem;
	text-align: center;
	}

footer p {
	display: block;
	margin: 0 0 1rem;
	letter-spacing: .1rem;
	text-align: center;
	}

footer p.copyright {
	margin: 10rem 0 2rem;
	}
@media screen and (max-width:767.98px){
footer p.copyright {
	margin: 6rem 0 2rem;
	}
}

footer p.copyright a {
	color: #fff;
	}

footer p img {
	display: block;
	width: 100%;
	max-width: 200px;
	margin: 0 auto;
	}
@media screen and (max-width:767.98px){
footer p img {
	max-width: 35%;
	}
}

/* トップへ戻るボタン */
.totop {
	z-index: 99999999;
	position: fixed;
	right: 20px;
	bottom: 36px;
	display: block;
	width: 50px;
	height: 50px;
	}
@media screen and (max-width:767.98px){
.totop {
	width: 30px;
	height: 30px;
	}
}

.totop a {
	display: block;
	width: 100%;
	height: 100%;
	background: url("../img/totop.svg") center center no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	text-indent: 100%;
	font-size: 0;
	}

br.sp {
	display: none;
	}
@media screen and (max-width:767.98px){
br.sp {
	display: inline;
	}
}

@media screen and (max-width:767.98px){
br.pc {
	display: none;
	}
}

.jscsw {
	opacity: 0;
	transform: translateY(5%);
	transition: .3s ease .1s;
	}

.jscsw.on {
	opacity: 1;
	transform: translateY(0%);
	}

.red {
	color: #cc380d;
	text-decoration: underline;
	}


/* 道案内 */
#route {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 4%;
	text-align: center;
	}

#route h1 {
	margin: 0 0 3rem;
	font-size: 2em;
	}

#route p {
	margin: 0 0 3rem;
	font-size: 1.5em;
	}

#route img {
	margin: 0 0 1rem;
	}

/* 注意事項 */
#notice {
	position: relative;
	padding: 5% 7%;
	background: #333;
	}
@media screen and (max-width:767.98px){
#notice {
	padding: 10% 7%;
	}
}

#notice h2 {
	display: block;
	margin: 0 0 2rem;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	}

#notice ul {
	display: block;
	width: 100%;
	max-width: 700px;
	margin: 0 auto 1rem;
	}

#notice li {
	display: block;
	margin: 0 0 1rem;
	padding-left: 1em;
	font-size: 1em;
	text-indent: -1em;
	}

/* news */
#news {
	text-align: center;
	padding: 3rem 4vw;
	}

#news h2 {
	display: block;
	margin: 0 0 2rem;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	}

#news p {
	display: block;
	margin: 0 0 1rem;
	font-size: 1em;
	line-height: 2em;
	}

#news a {
	display: block;
	width: 100%;
	max-width: 300px;
	margin: 2rem auto 0;
	padding: .8rem 0 1rem;
	color: #0f0;
	font-size: 1.2em;
	font-weight: 600;
	text-align: center;
	border: 3px solid #0f0;
	border-radius: 5px;
	transition: .3s ease;
	}
@media screen and (max-width:767.98px){
#news a {
	margin: 2rem auto 0;
	max-width: 80%;
	}
}
#news a:hover {
	opacity: .8;
	}


/* #tshirt */
#tshirt {
	padding: 3rem 4vw;
	}

#tshirt h2 {
	display: block;
	margin: 0 0 2rem;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	}
@media screen and (max-width:767.98px){
#tshirt h2 span {
	display: block;
	}
}

#tshirt p {
	display: block;
	margin: 0 0 1rem;
	font-size: 1em;
	line-height: 2em;
	text-align: center;
	}

#tshirt .pic {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 20px;
	}

#tshirt .pic img {
	display: block;
	width: 50%;
	}
@media screen and (max-width:767.98px){
#tshirt .pic img {
	width: 100%;
	}
}

#tshirt table {
	width: 50%;
	border: 1px solid #ccc;
	margin: 0 auto;
	}
@media screen and (max-width:767.98px){
#tshirt table {
	width: 100%;
	}
}

#tshirt thead th {
	padding: 5px;
	text-align: center;
	border-bottom: 1px solid #ccc;
	}

#tshirt tbody th {
	padding: 5px;
	text-align: center;
	}

#tshirt tbody td {
	padding: 5px;
	text-align: center;
	}

#tshirt a.btn {
	display: block;
	width: 100%;
	max-width: 50%;
	margin: 2rem auto 10px;
	padding: .8rem 0 1rem;
	color: #000;
	font-size: 1.2em;
	font-weight: 600;
	text-align: center;
	background: #0f0;
	border: 0;
	border-radius: 5px;
	transition: .3s ease;
	}
@media screen and (max-width:767.98px){
#tshirt a.btn {
	margin: 2rem auto 0;
	max-width: 80%;
	}
}
#tshirt a.btn:hover {
	opacity: .8;
	}