@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
sky   #C8DCFF 200,220,255
blue  #2873FA  40,115,250
-----------------------------------------------*/

/*-----------------------------------------------
  inner
-----------------------------------------------*/
main .inner {
max-width: 1000px;
margin: auto;
}

/*-----------------------------------------------
  title
-----------------------------------------------*/
main .title {
position: relative;
overflow: hidden;
}
main .title_text {
position: absolute;
width: 100%;
}
main .title_head {
font-size: 4vw;
line-height: 1.35;
color: #FFF;
text-shadow: 0 0 5px #006D67;
}
@media screen and (max-width: 800px) {
	main .title {
	aspect-ratio: 1 / 0.4;
	}
	main .title_photo {
	height: 100%;
	}
	main .title_photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}
	main .title_head {
	font-size: 5vw;
	}
}

/*-----------------------------------------------
  head
-----------------------------------------------*/
main .head1 {
width: 100%;
margin: auto;
font-size: 2.5em;
font-weight: 400;
line-height: 1.25;
text-align: center;
overflow: hidden;
}
main .head1 span {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
}
main .head1 span:before,
main .head1 span:after {
position: absolute;
top: 50%;
content: "";
width: 100vw;
height: 1px;
background: #BABABA;
}
main .head1 span:before {
right: 100%;
}
main .head1 span:after {
left: 100%;
}
@media screen and (max-width: 800px) {
	main .head1 {
	font-size: 1.5em;
	}
}

main .head2 {
display: flex;
justify-content: center;
align-items: center;
padding: 0.5em;
line-height: 1.25;
text-align: center;
color: #FFF;
background: #2873FA;
border-radius: 8px;
}
main .head2 .ja {
font-size: 2em;
}
main .head2 .en {
margin-left: 1em;
}
@media screen and (max-width: 800px) {
	main .head2 {
	display: block;
	border-radius: 5px;
	}
	main .head2 .ja {
	display: block;
	font-size: 1.5em;
	}
	main .head2 .en {
	margin-left: 0;
	font-size: 0.75em;
	}
}

main .head3 {
margin-left: 2em;
font-size: 1.75em;
color: #2873FA;
}
main .head3::before {
content: "●";
}
@media screen and (max-width: 800px) {
	main .head3 {
	margin-left: 0;
	font-size: 1.25em;
	text-align: center;
	}
}

/*-----------------------------------------------
  button
-----------------------------------------------*/
main .button1 {
background: linear-gradient(to bottom, #2873FA, #00B9BE);
}
main .button1 a {
position: relative;
display: block;
margin: auto;
padding: 1.25em 4%;
font-size: 3em;
text-align: center;
color: #FFF;
text-shadow: 0 0 5px #006D67;
}
main .button1 span {
position: relative;
z-index: 2;
display: block;
max-width: 12em;
margin: auto;
background-image: url("../img/common/arw_right.svg"), url("../img/common/arw_left.svg");
background-position: left center, right center;
background-repeat: no-repeat;
background-size: 1em;
}
main .button1 a::after {
content: "ENTRY";
position: absolute;
top: calc(50% - 0.55em);
left: calc(50% - 1.95em);
z-index: 1;
font-size: 2.5em;
line-height: 1;
color: #FFF;
opacity: 0.15;
}
@media screen and (max-width: 800px) {
	main .button1 a {
	font-size: 1.5em;
	}
}


main .mt5   { margin-top:   5px; }
main .mt10  { margin-top:  10px; }
main .mt20  { margin-top:  20px; }
main .mt40  { margin-top:  40px; }
main .mt60  { margin-top:  60px; }
main .mt80  { margin-top:  80px; }
main .mt100 { margin-top: 100px; }
@media screen and (max-width: 800px) {
	main .mt20  { margin-top:  4%; }
	main .mt40  { margin-top:  8%; }
	main .mt60  { margin-top:  8%; }
	main .mt80  { margin-top: 12%; }
	main .mt100 { margin-top: 12%; }
}