@charset "utf-8";

/* ================================================================
	MAIN
================================================================ */

#main {
	width: 100%;
	height: 900rem;
	padding: 0;
	background: linear-gradient(-90deg, #007747 0%, #007747 40%, #005FAE 100%);
	overflow: hidden;
	position: sticky;
	top: 0;
	z-index: 1;
}

#main div.sample {
	width: 100%;
	height: 100%;
	background-image: url(../image/main_image_pc.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	display: none;
}

#main div {
	width: 1500rem;
	height: 900rem;
	margin: 0 auto;
	position: relative;
}
#main div * {
	display: block;
	position: absolute;
}
#main div h1 img,
#main div i img,
#main div p img,
#main div span img {
	width: 100%;
}
#main div h1 {
	width: 675rem;
	height: 490rem;
	bottom: 224rem;
	left: 95rem;
	z-index: 10;
	opacity: 0;
	animation: animeFadeIn 2.4s ease-in forwards 4.8s 1 normal;
}
#main div i {
	width: 279rem;
	height: 278rem;
	bottom: 30rem;
	left: -46rem;
	z-index: 10;
	opacity: 0;
	animation: animeSlideIn2 0.6s ease-out forwards 2.8s 1 normal;
}
#main div p {
	width: 485rem;
	height: 145rem;
	bottom: 50rem;
	left: 191rem;
	z-index: 10;
	opacity: 0;
	animation: animeFadeIn 1.0s ease-in forwards 3.6s 1 normal;
}
#main div span {
	width: 1800rem;
	height: 1220rem;
	bottom: -138rem;
	left: -158rem;
	z-index: 1;
	/* opacity: 0; */
	/* animation: animeFadeIn2 1.0s linear forwards 0s 1 normal; */
}
#main div span img {
	mask-image: linear-gradient(-30deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-image: linear-gradient(-30deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
	mask-size: 240% 240%;
	-webkit-mask-size: 240% 240%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: -120% -120%;
	-webkit-mask-position: -120% -120%;
	animation: mask-animation 0.4s ease-in forwards;
}
@keyframes mask-animation {
	0% {
		mask-position: -120% -120%; 
		-webkit-mask-position: -120% -120%;
	}
	100% {
		mask-position: 0 0; 
		-webkit-mask-position: 0 0; 
	}
}
#main div > img {
	position: absolute;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	opacity: 0;
}
#main div > img.img1 {
	left: 820rem;
	bottom: -54rem;
	z-index: 9;
	animation: animeSlideIn 0.4s ease-out forwards 0.3s 1 normal;
}
#main div > img.img2 {
	left: 846rem;
	bottom: -24rem;
	z-index: 8;
	animation: animeSlideIn 0.4s ease-out forwards 0.58s 1 normal;
}
#main div > img.img3 {
	left: 810rem;
	bottom: 58rem;
	z-index: 7;
	animation: animeSlideIn 0.4s ease-out forwards 0.84s 1 normal;
}
#main div > img.img4 {
	left: 1126rem;
	bottom: 228rem;
	z-index: 6;
	animation: animeSlideIn 0.4s ease-out forwards 1.08s 1 normal;
}
#main div > img.img5 {
	left: 754rem;
	bottom: 182rem;
	z-index: 5;
	animation: animeSlideIn 0.4s ease-out forwards 1.3s 1 normal;
}
#main div > img.img6 {
	left: 586rem;
	bottom: 346rem;
	z-index: 4;
	animation: animeSlideIn 0.4s ease-out forwards 1.5s 1 normal;
}
#main div > img.img7 {
	left: 684rem;
	bottom: 448rem;
	z-index: 3;
	animation: animeSlideIn 0.4s ease-out forwards 1.68s 1 normal;
}
#main div > img.img8 {
	left: 450rem;
	bottom: 522rem;
	z-index: 2;
	animation: animeSlideIn 0.4s ease-out forwards 1.84s 1 normal;
}
#main div img.no-pc {
	display: none;
}

@keyframes animeSlideIn {
	0% { transform:translate(-1500rem,600rem) scale(0.1); opacity:0; }
	90% { opacity:1; }
	100% { transform:translate(0rem,0rem) scale(1.0); opacity:1; }
}
@keyframes animeSlideIn2 {
	0% { transform:translate(1500rem,-900rem) scale(0.1); opacity:0; }
	50% { transform:translate(200rem,0rem) scale(0.6); }
	80% { transform:translate(50rem,-50rem); }
	100% { transform:translate(0rem,0rem) scale(1.0); opacity:1; }
}
@keyframes animeFadeIn {
	0% { opacity:0; }
	100% { opacity:1; }
}
@keyframes animeFadeIn2 {
	0% { transform:scaleY(0) translateY(10%); opacity:0; }
	30% { transform:scaleY(1) translateY(0); opacity:1; }
	100% { ransform:scaleY(1) translateY(0); opacity:1; }
}
/*
#main div h1,
#main div i,
#main div p,
#main div span,
#main div img {
opacity:1;
}
*/

/* ================================================================
	ANCHOR
================================================================ */

#anchor {
	position: sticky;
	top: 0;
	z-index: 99;
	width: 100%;
	padding: 1em 0;
	margin: 1em auto;
	width: 53.2%;		/* 4button */
	width: 54%;		/* 5button */
	padding: 1em;
}
#anchor ul {
	width: 100%;
	margin: 2em auto;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	border-top: solid 1px var(--color-green);
	border-left: solid 1px var(--color-green);
	background: rgba(255,255,255,0.9);
	box-shadow: 0 0 1em rgba(255,255,255,0.5);
}
#anchor ul li {
	width: 25%;		/* 4button */
	width: 20%;		/* 5button */
	border-right: solid 1px var(--color-green);
	border-bottom: solid 1px var(--color-green);
}
#anchor ul li a {
	display: block;
	width: 100%;
	padding: 1em 0 2.1em 0;
	line-height: 1.5em;
	font-weight: bold;
	color: var(--color-green);
	text-shadow: 0 0 1em var(--color-white), 0 0 0.2em var(--color-white);
	text-decoration: none;
	text-align: center;
	position: relative;
}
#anchor ul li a::after {
	content: '';
	display: block;
	width: 0.6em;
	height: 0.6em;
	border-right: solid 2px var(--color-green);
	border-bottom: solid 2px var(--color-green);
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: -1.6em;
	margin: auto;
}
#anchor ul li:hover {
	background: var(--color-green);
}
#anchor ul li:hover a {
	color: var(--color-white);
	text-shadow: none;
	opacity: 1;
}
#anchor ul li:hover a::after {
	border-color: var(--color-white);
}
#anchor ul li:first-child a {
	line-height: 1em;
	padding: 0.75em 0 1.9em 0;
}


/* ================================================================
	EVENT
================================================================ */

#event {
	width: 80%;
	margin: 0 auto;
}
#event > p {
	color: var(--color-green);
	font-weight: bold;
	text-align: center;
}

#event ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#event ul li {
	width: 30%;
	margin-top: 90rem;
	display: flex;
	flex-direction: column;
}
#event ul li img {
	width: 100%;
}
#event ul li h4 {
	display: block;
	color: var(--color-green);
	font-size: 1.33em;
	font-weight: bold;
	line-height: 1.5em;
	margin: 1em 0;
	text-align: left;
}
#event ul li h4 span {
	font-size: 0.75em;
}
#event ul li > span {
	display: inline-block;
	font-size: 0.87em;
	line-height: 1.5em;
	margin-top: 1em;
}
#event ul li > div {
	position: relative;
	overflow: hidden;
}
#event ul li > div img {
	margin-top: -1em;
	margin-bottom: 1em;
}
#event ul li > div p {
	display: block;
	width: 100%;
	text-align: center;
	white-space: nowrap;
	color: var(--color-white);
	background: var(--color-green);
	position: absolute;
	bottom: 0;
	text-shadow: none;
}
#event ul li a {
	display: block;
	text-align: center;
	font-weight: bold;
	color: var(--color-green);
	background: var(--color-white);
	border: solid 1px var(--color-green);
	text-decoration: none;
	padding: 0.75em 0;
	margin-top: 1.5em;
	margin-top: auto;
	position: relative;
}
#event ul li a::after {
	content: '';
	display: block;
	width: 0.6em;
	height: 0.6em;
	border-top: solid 2px var(--color-green);
	border-right: solid 2px var(--color-green);
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	right: 1.12em;
	bottom: 0;
	margin: auto;
}
#event ul li a:hover {
	color: var(--color-white);
	background: var(--color-green);
	text-shadow: none;
	opacity: 1;
}
#event ul li a:hover::after {
	border-color: var(--color-white);
}


/* ================================================================
	SUMMARY
================================================================ */

#summary {
	width: 66.6%;
	margin: 0 auto;
}
#summary h3 {
	font-family: serif;
	font-size: 1.67em;
	font-weight: bold;
	text-align: center;
	color: var(--color-green);
	margin: 2em 0;
}
#summary p {
	text-align: center;
}
#summary div {
	width: 660rem;
	width: 44em;
	margin-top: 3.3em;
	margin-right: 0;
	margin-left: auto;
	position: relative;
	line-height: 2.4em;
}
#summary div i {
	font-family: serif;
	font-size: 1.67em;
	font-weight: bold;
	font-style: normal;
	text-align: center;
	position: absolute;
	bottom: 0;
	right: 0;
	bottom: 0.12em;
}

#summary dl {
	margin-top: 5.3em;
}
#summary dl dt {
	clear: both;
	float: left;
	width: 32%;
	font-weight: bold;
	text-align: right;
	padding: 1em 0;
}
#summary dl dd {
	border-bottom: solid 1px var(--color-gray);
	padding: 1em 0;
	padding-left: 37%;
}


/* ================================================================
	RESULT
================================================================ */

#result {
	width: 80%;
	margin: 0 auto;
}
#result > p {
	color: var(--color-green);
	font-weight: bold;
	text-align: center;
}
#result ul {
	margin-top: 50rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#result ul li {
	width: 31.6%;
	overflow: hidden;
	position: relative;
	margin-top: 30rem;
}
#result ul li:first-child {
	width: 100%;
}
#result ul li img {
	width: 100%;
	transition: 0.4s;
}
#result ul li a:hover img {
	/* transform: scale(1.2); */
}

#result2 {
	width: 100%;
	background: var(--color-green-l);
	margin: var(--pixel-height-margin-pc) auto;
}
#result2 h2 {
	font-size: 3.3em;
}
#result2 h2 span {
	font-size: 0.27em;	/* 0.15*6/3.3 */
}
#result2 table {
	width: 80%;
	width: calc(80% + 20rem);
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 10rem;
}
#result2 table tr {
	background: var(--color-white);
	font-family: 'Oswald', sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	text-shadow: none;
	text-align: center;
	margin: 0 -10rem;
}
#result2 table tr th {
	font-weight: normal;
	background: var(--color-green-l);
	padding: 1em 0.5em;
}
#result2 table tr th:first-child {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: bold;
	color: var(--color-green);
	text-align: left;
}
#result2 table tr td {
	width: 7.9%;
	padding: 0.5em 0.5em;
}
#result2 table tr td:first-child {
	font-family: "Noto Sans JP", sans-serif;
	text-align: left;
	width: auto;
}
#result2 table tr td:first-child i {
	font-style: normal;
	font-family: 'Oswald', sans-serif;
	display: inline-block;
	width: 18%;
	text-align: center;
}
#result2 table tr td:nth-child(2) {
	background: var(--color-gray-l);
}


/* ================================================================
	HISTORY
================================================================ */

#history {
	width: 66.6%;
	margin: 0 auto;
}
#history ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#history ul li {
	width: 48%;
	overflow: hidden;
	position: relative;
	margin-top: 1em;
}
#history ul li a {
	display: block;
	text-decoration: none;
}
#history ul li img {
	width: 100%;
	margin-bottom: 1em;
	transition: 0.4s;
}
#history ul li a:hover img {
	/* transform: scale(1.2); */
}
#history ul li i {
	color: var(--color-green);
	font-size: 4em;
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	position: absolute;
	right: 0;
	top: 296rem;
	top:66.6%;
	text-shadow: 0 0 2px var(--color-white), 1px 1px 1px var(--color-white), 1px -1px 1px var(--color-white), -1px -1px 1px var(--color-white), -1px 1px 1px var(--color-white);
}
#history ul li h4 {
	color: var(--color-green);
	font-size: 1.47em;
	font-weight: bold;
	position: relative;
	padding-left: 2em;
}
#history ul li h4::before {
	content: '';
	display: block;
	width: 1.5em;
	height: 1.5em;
	background-image: url(../image/history_trophy.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	bottom: 0;
}
#history ul li div {
	font-size: 1.2em;
	color: var(--color-white);
	background: var(--color-black);
	text-align: center;
	white-space: nowrap;
	margin: 1.2em 0;
	margin-bottom: 1em;
	text-shadow: none;
}
#history ul li span {
	color: var(--color-green);
	font-size: 0.8em;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.1em;
	display: block;
	text-align: right;
	position: relative;
	padding-right: 2.5em;
}
#history ul li span::after {
	content: '→';
	display: block;
	width: 2em;
	height: 2em;
	border: solid 1px var(--color-green);
	border-radius: 100%;
	font-size: 0.8em;
	font-weight: bold;
	transform: rotate(-45deg);
	line-height: 2em;
	width: 1em;
	padding: 0 0.5em;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
#history ul li a:hover span {
	text-decoration: underline;
}
#history ul li a:hover span::after {
	text-decoration: none;
	color: var(--color-white);
	background: var(--color-green);
}


/* ================================================================
	SPONSOR
================================================================ */

#sponsor {
	width: 80%;
	margin: 0 auto;
}
#sponsor ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 1%;
}
#sponsor ul.large {
	margin-top: 4.5em;
}
#sponsor ul::after,
#sponsor ul::before {
	content: '';
	display: block;
	order: 1;
}
#sponsor ul li {
	margin-bottom: 2%;
}
#sponsor ul.large li,
#sponsor ul.large::after,
#sponsor ul.large::before {
	width: 49%;
}
#sponsor ul.middle li,
#sponsor ul.middle::after,
#sponsor ul.middle::before {
	width: 32%;
}
#sponsor ul.small li,
#sponsor ul.small::after,
#sponsor ul.small::before {
	width: 23.5%;
}
#sponsor ul.x-small li,
#sponsor ul.x-small::after,
#sponsor ul.x-small::before {
	width: 23.5%;
}
#sponsor ul li a.no-link {
	pointer-events: none;
}
#sponsor ul li a img {
	width: 100%;
	border: solid 1px var(--color-gray);
	box-shadow: 0 0 0.2em var(--color-white), 0 0 0.5em var(--color-white);
}
#sponsor ul li a.no-img {
	display: block;
	width: 100%;
	background: var(--color-white);
	border: solid 1px var(--color-gray);
	box-shadow: 0 0 0.2em var(--color-white), 0 0 0.5em var(--color-white);
	overflow: hidden;
	position: relative;
}
#sponsor ul li a.no-img::before {
	content: '';
	display: block;
	padding-top: 33.3%;
}
#sponsor ul li a.no-img p {
	color: var(--color-abema);
	font-weight: bold;
	font-size: 1.8em;
	line-height: 1.4em;
	text-align: center;
	white-space: nowrap;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}
#sponsor ul.x-small li a.no-img::before {
	padding-top: 25%;
}
#sponsor ul.x-small li a.no-img p {
	/* font-weight: normal; */
	font-size: 1.2em;
	font-size: 1em;
}
#sponsor ul.x-small li a.no-img p span {
	font-size: 0.9em;
}


/* ================================================================
	GALLERY
================================================================ */

#gallery {
	color: var(--color-white);
	background: var(--color-green);
	width: 100%;
	margin: var(--pixel-height-margin-pc) auto;
	overflow: hidden;
}
#gallery h2 {
	color: var(--color-white);
	text-shadow: none;
}

#gallery #gallery-swiper {
	margin-top: 4.5em;
	margin-bottom: 2em;
	position: relative;
	overflow: visible;
	left: 17.1%;
}
#gallery #gallery-swiper img {
	width: 100%;
	position: relative;
	z-index:1;
	transition: 0.2s;
}
#gallery #gallery-swiper img:hover,
#gallery #gallery-swiper img:active {
	transform:scale(1.2);
	box-shadow: 0 0 12rem var(--color-abema), 0 0 3rem var(--color-green);
	z-index: 2;
	transition: 0.1s;
}


/* ================================================================
	BANNER
================================================================ */

#banner {
	width: 66.6%;
	margin: 0 auto;
}
#banner ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	justify-content: center;
}
#banner li {
	display: block;
	width: 48%;
	margin: 2% 0;
}
/*
#banner li:last-child {
	flex: 0 0 48%;
	margin: 2% auto;
}
*/
#banner li a img {
	width: 100%;
	box-shadow: 0 0 0.2em var(--color-white), 0 0 0.5em var(--color-white);
}