html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; font-family: sans-serif;}  body { line-height:1; }  article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {  display:block; }  nav ul { list-style:none; }  blockquote, q { quotes:none; }  blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }  a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }  / change colours to suit your needs / ins { background-color:#ff9; color:#000; text-decoration:none; }  / change colours to suit your needs / mark { background-color:#ff9; color:#000;  font-style:italic; font-weight:bold; }  del { text-decoration: line-through; }  abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }  table { border-collapse:collapse; border-spacing:0; }  /* change border colour to suit your needs  */ hr { display:block; height:1px; border:0;  border-top:1px solid #cccccc; margin:1em 0; padding:0; }  input, select { vertical-align:middle; } 

@charset "UTF-8";

h1,h2,h3,h4,h5,h6,p,th,td,li,dt,dd,strong,a,span	{
	font-family: 'Noto Sans JP', sans-serif;
}
.md,
.sp	{
	display: none;
}

.overlay	{
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	justify-content: center;
	align-items: center;
	background-color: white;
}

.overlay img	{
	position: relative;
	top: -1vh;
	height: 40vh;
	display: block;
	opacity: 0;
}

img	{
	max-width: 100%;
}

.text-center	{
	text-align: center;
}

body	{
	position: relative;
}

.small	{
	zoom: 0.8;
}
.inview	{
	opacity: 0;
}

.inview.fadeInUp	{
	transition: all 2s ease-out;
	position: relative;
	top: -10px;
}

.is-show	{
	opacity: 1;
}

.inview.fadeInUp.is-show	{
	top: 0;
}

.mb10	{
	margin-bottom: 10px;
}

.mb15	{
	margin-bottom: 10px;
}

.mb25	{
	margin-bottom: 25px;
}

.mb50	{
	margin-bottom: 50px;
}

.mb75	{
	margin-bottom: 75px;
}

.mb100	{
	margin-bottom: 100px;
}

.fs12	{
	font-size: 12px;
}
.fs24	{
	font-size: 24px;
}
.w70p	{
	width: 60% !important;
}

.flex	{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flex.col4 .col	{
	width: 23%;
}

.key	{
	width: 100vw;
	box-sizing: border-box;
	padding: 50px;
	position: relative;
}

.key .inner	{
	width: calc(100vw - 100px);
	overflow: hidden;
	position: relative;
}
.key .inner .imgwrap	{
	width: 100%;
}
.key .inner .imgwrap img	{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

.key .logo	{
	position: absolute;
	bottom: 35px;
	right: 25px;
	width: 15vw;
	opacity: 0;
}

.key .keydate	{
	position: absolute;
	top: 25px;
	left: 25px;
	filter: drop-shadow(0 0 1px white);
	width: 20vw;
	opacity: 0;
	margin-top: -10px;
}

.key .social	{
	position: absolute;
	top: 1.5vw;
	right: 1.5vw;
	z-index: 10;
}
.key .social a	{
	color: white;
	display: inline-block;
	border-radius: 50%;
	text-decoration:none;
	background-color: rgba(0,0,0,1);
	font-size: 24px;
	line-height: 1;
	padding: 15px;
	width: 65px;
	height: 65px;
	box-sizing: border-box;
	text-align: center;
	margin-left: 10px;
	transition: all 0.5s linear;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.key .social a i	{
	color: white;
	display: block;
}
.key .social a span.small	{
	font-size: 10px;
	display: block;
	padding: 3px 0;
}
.key .social a:hover	{
	opacity: 0.6;
}

main section	{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	position: relative;
}
main h1,
main h2	{
	line-height: 200%;
	letter-spacing: 2px;
	position: relative;
}

main p	{
	line-height: 200%;
	letter-spacing: 1px;
}

main .sec2	{
	position: relative;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
}

main .sec2 .carousel	{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0.3;
}

main .sec2 .carousel img	{
	width: auto;
	height: 100vh;
}

main .sec2 .inner	{
	width: calc(100vw - 100px);
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: rgba(255,255,255,0.6);
	align-items: center;
}

main .sec2 .inner img	{
	max-width: 400px;
}
main .sec3	{
	overflow: hidden;
	height: auto;
}

main .sec3 .bgimg	{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	min-width: 100%;
	min-height: 100%;
	height: 100%;
	width: auto;
	z-index: 1;
}

main .sec3 .inner	{
	position: relative;
	z-index: 3;
	background-color: rgba(0,0,0,0.5);
	width: calc(100% - 100px);
	height: 100%;
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 35px 0 50px;
	margin-top: 50px;
	margin-bottom: 50px;
}
main .sec3 .inner h2	{
	line-height: 140%;
}

main .sec3 .inner h2 a	{
	color: #cccccc;
	text-decoration: none;
}

main .sec3 .inner h2 a[target="_blank"]:after	{
	content: "";
	background-image: url(images/ext_link_w.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 0.1rem;
}

main .sec3 .inner img	{
	max-width: 400px;
}
main .sec3 .inner *	{
	color: white;
}

main .sec3 .inner .button	{
	position: absolute;
	top: -25px;
	right: -25px;
	text-align: center;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	width: 170px;
	height: 170px;
	border-radius: 85px;
	color: white;
	background-color: rgb(72,160,118);
	font-size: 20px;
	line-height: 120%;
	transition: all .3s ease-out;
	-webkit-animation:blink 1.6s ease-in-out infinite alternate;
	-moz-animation:blink 1.6s ease-in-out infinite alternate;
	animation:blink 1.6s ease-in-out infinite alternate;
}

main .sec3 .inner .button:hover	{
	transform: scale(1.05,1.05);
	-webkit-animation:none;
	-moz-animation:none;
	animation:none;
}

@-webkit-keyframes blink{
	0% {opacity:1;}
	30% {opacity:1;}
	100% {opacity:0;}
}
@-moz-keyframes blink{
	0% {opacity:1;}
	30% {opacity:1;}
	100% {opacity:0;}
}
@keyframes blink{
	0% {opacity:1;}
	30% {opacity:1;}
	100% {opacity:0;}
}

main .sec3 .inner .button span.small	{
	color: white;
	margin-top: 5px;
	zoom: 0.7;
}
main .sec3:after	{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	background-image:
		radial-gradient(rgba(0,0,0,1) 30%, rgba(255,255,255,0) 30%),
		radial-gradient(rgba(0,0,0,1) 30%, rgba(255,255,255,0) 30%);
	background-size: 8px 8px;
	background-position: 0 0, 4px 4px;
	mix-blend-mode: soft-light;
}

main .sec3 ul li	{
	text-align: left !important;
}

ol,ul	{
	list-style: none;
	counter-reset: number;
	max-width: 1000px;
	display: block;
	margin: 0 auto;
	border: 1px solid rgba(255,255,255,0.5);
	padding: 10px 15px;
	box-sizing: border-box;
}

ol li,
ul li	{
	position: relative;
	padding-left: 25px;
	zoom: 0.8;
	margin-bottom: 10px;
}
ol li:first-child,
ul li:first-child	{
	margin-top: 10px;

}
ol li::before {
  counter-increment: number;
  content: counter(number) ' ）';
  position: absolute;
  left: 0;
}

ul li::before {
  content: '・';
  position: absolute;
  left: 0;
}

ol li::before {
  counter-increment: number;
  content: counter(number) '. ';
  position: absolute;
  left: 0;
  font-weight: bold;
  color: #003656;
}

ol li,
ul li	{
	line-height: 200%;
}

main .sec5	{
	box-shadow: 0 0 20px rgba(0,0,0,0.05);
	height: auto;
}
main .sec5 .inner	{
	width: calc(100% - 100px);
	background-color: #f2f2f2;
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 35px;
	margin-top: 50px;
	margin-bottom: 50px;
}

main .sec5 .inner .flex	{
	max-width: 1280px;
	width: calc(100% - 100px);
	margin: 0 auto;
	padding: 0 50px;
	display: flex;
}

main .sec5 .inner .flex .col	{
	background-color: #fff;
	margin-bottom: 50px;
}
main .sec5 .inner .imgarea	{
	width: 100%;
	aspect-ratio: 1 / 1;
	text-align: center;
	background-color: black;
}

main .sec5 .inner .imgarea img	{
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}
main .sec5 .inner h2	{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
main .sec5 .inner h2 span	{
	flex: 1;
	word-break: break-all;
	overflow-wrap: break-word;
}

main .sec5 .inner h2 a	{
	flex-basis:  30px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	background-color: black;
	color: white;
	border-radius: 15px;
	box-sizing: border-box;
	font-size: 10px;
	line-height: 1.1;
	text-decoration: none;
	letter-spacing: 0;
}

main .sec5 .inner .contentarea	{
	padding: 15px 20px 20px;
	box-sizing: border-box;
}

main .sec5 .inner .contentarea p	{
	font-size: 14px;
	letter-spacing: 0;
}

main .sec5 .inner .contentarea p.fs12	{
	line-height: 140%;
	letter-spacing: 1px;
	font-size: 12px;
}

main .sec5 .inner .contentarea p.fs12 a	{
	text-decoration: none;
	color: #8a8a8a;
	font-weight: bold;
	
}

main .sec5 .inner .contentarea p.fs12 a[target="_blank"]:after	{
	content: "";
	background-image: url(images/ext_link.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 0.1rem;
}

main .sec5 .inner .flex.event	{
	max-width: 1280px;
	width: calc(100% - 100px);
	flex-wrap: nowrap;
	background-color: white;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 50px;
	box-sizing: border-box;
	padding: 0;
}

main .sec5 .inner .flex.event .imgarea	{
	aspect-ratio: auto;
	width: 30%;
	height: auto;
}

main .sec5 .inner .flex.event .imgarea img	{
	object-fit: inherit !important;
	width: 100%;
	height: auto;
}
main .sec5 .inner .flex.event .contentarea	{
	width: 68.5%;
}
main .sec5 .inner .flex.event .contentarea h2	{
	display: block;
}

footer .info	{
	padding: 100px 0 150px;
	line-height: 200%;
	letter-spacing: 1px;
}
footer .info h2	{
	letter-spacing: 2px;
}
footer .info .contactbutton	{
	display: block;
	width: 100%;
	max-width: 400px;
	background-color: black;
	color: white;
	padding: 15px 0;
	text-decoration: none;
	margin: 0 auto;
	font-weight: 900;
	letter-spacing: 3px;
	transition: all .5s ease-out;
	position: relative;
	top: 0;
}

footer .info .contactbutton:hover	{
	opacity: 0.5;
	top: -5px;
}

footer .copy	{
	background-color: #f2f2f2;
	padding: 50px 0;
}

footer .copy p	{
	color: black;
	font-size: 12px;
	letter-spacing: 3px;
}
footer a	{
	color: #4a4a4a;
	text-decoration: none;
}
footer a[target="_blank"]:after	{
	content: "";
	background-image: url(images/ext_link.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 0.1rem;
}

@media screen and (max-width: 1280px)	{
	main .sec5 .inner h2	{
		min-height: 40px;
	}
	main .sec5 .inner h2 span	{
		letter-spacing: 0;
		line-height: 120%;
	}
	main .sec5 .inner .contentarea	{
		padding: 15px 10px;
	}
	br.md	{
		display: inline-block;
	}
}
@media screen and (max-width: 834px)	{
	h1,h2,h3,h4,h5,h6,p,th,td,li,dt,dd,strong,a,span	{
		font-size: 3vw;
	}
	
	.pc,.md	{
		display: none !important;
	}
	
	.sp	{
		display: block !important;
	}
	
	.mb10	{
		margin-bottom: 1.6666vw;
	}
	
	.mb15	{
		margin-bottom: 2.25vw;
	}
	
	.mb25	{
		margin-bottom: 7.5vw;
	}
	
	.mb50	{
		margin-bottom: 7.5vw;
	}
	
	.mb75	{
		margin-bottom: 10vw;
	}
	
	.mb100	{
		margin-bottom: 13.333vw;
	}
	
	.fs12	{
		font-size: 10px;
	}
	.fs24	{
		font-size: 4.5vw;
	}
	br.sp	{
		display: inline-block !important;
	}
	
	main h1,
	main h2,
	main p	{
		line-height: 250%;
	}
	
	.overlay img	{
		width:  45vw;
		height: auto;
	}
	
	.key	{
		padding: 5vw;
		box-shadow: 0 0 20px rgba(0,0,0,0.05);
	}
	
	.key .inner	{
		width: 90vw;
	}
	
	.key .inner img	{
		max-width: none;
		height: 100% !important;
		width: auto !important;
	}
	
	.key .logo,.key .keydate	{
		width: 40vw;
	}
	.key .logo	{
		bottom: 2.5vw;
		right: 2.5vw;
		width: 35vw;
	}
	
	.key .keydate	{
		top: 5vw;
		left: 5vw;
	}
	main .sec1,
	main .sec1 .inner,
	main .sec2,
	main .sec2 .inner	{
		min-height: 0 !important;
		height: auto !important;
	}
	main .sec1 .inner	{
		padding-top: 15vw;
		padding-bottom: 15vw;
	}
	main .sec2	{
		padding-top: 10vw;
		padding-bottom: 10vw;
	}
	main .sec1 .inner	{
		width: 90vw;
	}
	main .sec1 .inner img	{
		width: 70vw;
	}
	main .sec2 .inner img,
	main .sec3 .inner img	{
		width: 100%;
	}
	
	main .sec2 .inner,
	main .sec3 .inner,
	main .sec4 .inner,
	main .sec5 .inner	{
		width: 90vw;
		height: auto !important;
		padding: 7.5vw;
		box-sizing: border-box;
	}

	main .sec3 .inner,
	main .sec4 .inner,
	main .sec5 .inner	{
		min-height: calc(100vh - 10vw) !important;
		margin-top: 0;
		margin-bottom: 0;

	}	
	main .sec2 .inner .mb25	{
		margin-bottom: 7.5vw;
	}
	
	main .sec3 .bgimg	{
		height: 100%;
		width: auto;
		max-width: none !important;
	}
	
	main .sec2,
	main .sec3,
	main .sec5	{
		padding: 5vw 0;
	}
	
	main .sec3 .inner .button	{
		width: 50vw;
		height: 50vw;
		border-radius: 25vw;
		transform: scale(0.35,0.35);
		top: -19vw;
		right: -19vw;
		font-size: 6.5vw;
	}
	main .sec3 .inner p	{
		line-height: 170%;
	}
	
	main .sec3 .inner .mb10,
	main .sec3 .inner .mb15	{
		margin-bottom: 3.5vw;
	}
	main .sec3 .inner .button span.small	{
		font-size: 6.5vw;
		transform: scale(0.9,0.9);
	}
	main .sec3 .inner .button:hover	{
		transform: scale(0.4,0.4);
	}
	
	
	.flex	{
		flex-direction: column;
	}

	main .sec5 .inner .flex.col4	{
		width: 100%;
		padding: 0;
	}

	main .sec5 .inner .flex.col4 .col	{
		width: 100%;
		margin-bottom: 10vw;
	}
	
	main .sec5 .inner .contentarea h2 span	{
		font-size: 3.6vw;
	}
	main .sec5 .inner h2 a	{
		font-size: 12px;
		flex-basis:  8vw;
		width: 8vw;
		height: 8vw;
		border-radius: 4vw;
	}
	
	main .sec5 .inner .contentarea	{
		padding-bottom: 7.5vw;
	}
	main .sec5 .inner .contentarea p	{
		font-size: 3.3vw;
		line-height: 180%;
	}
	
	main .sec5 .inner .contentarea p.fs12	{
		line-height: 140%;
		font-size: 2.5vw;
	}
	main .sec5 .inner .contentarea p.fs12 span.small,
	main .sec5 .inner .contentarea p a	{
		font-size: 2.5vw;
	}
	.flex.col4 .col:last-child	{
		margin-bottom: 0;
	}
	footer .info	{
		padding: 15vw 0 25vw;
	}
	footer .info .contactbutton	{
		width: 80vw;
	}
	
	main .sec5 .inner .flex.event	{
		flex-direction: column;
		margin: 0 0 10vw;
		width: 100%;
	}
	
	footer a	{
		font-size: 10px;
	}
	
	footer a[target="_blank"]:after	{
		zoom: 0.6;
	}

	main .sec5 .inner .flex.event .imgarea	{
		width: 100%;
		background-color: transparent;
	}
	main .sec5 .inner .flex.event .contentarea	{
		padding: 15px 10px 7.5vw;
		width: 100%;
	}
	main .sec5 .inner .flex.event .contentarea h2	{
		min-height: 0;
		line-height: 200%;
		margin-bottom: 5vw;
	}
	main .sec5 .inner .flex.event .contentarea h2 span	{
		letter-spacing: -1px;
	}
	
	main .sec5 .inner .flex.event .contentarea p	{
		line-height: 160%;
	}
}

@media (min-aspect-ratio: 16/8) {
	main .sec3 .bgimg	{
		width: 100%;
		height: auto;
	}
}