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


/* 回転アニメーション */
@keyframes rotate-item {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* 点滅アニメーション */
@keyframes flash {
	0%,
	100% {
		opacity: 0.8;
	}
	50% {
		opacity: 0.5;
	}
}

@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.gradation01 {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100vh;
	z-index: -1;
  background-color: #000;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;

  /* 回転アニメーション */
  transform-origin: 0 0;
  animation-name: rotate-item;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.item-01 {
  z-index: 3;
  animation-duration: 15s;
}
.item-02 {
  z-index: 2;
  left: 45%;
  animation-duration: 50s;
  animation-direction: reverse;
}
.item-03 {
  z-index: 4;
  left: 40%;
  animation-duration: 8s;
}
.item-04 {
  z-index: 1;
  animation-duration: 10s;
}
.round {
  position: relative;
  border-radius: 50%;
}
.round-01 {
  z-index: 3;
  top: 0%;
  width: 50vw;
  height: 50vw;
  background: #0500FA;
  filter: blur(100px);
  animation: flash 20s linear infinite;
}
.round-02 {
  top: -20%;
  width: 50vw;
  height: 50vw;
  background-color: #0500FA;
  filter: blur(120px);
  animation: flash 8s linear infinite;
}
.round-04{
  top: -10%;
  left: -30%;
  width: 120vw;
  height: 80vw;
  background-color: #0500FA;
  filter: blur(120px);
  animation: flash 8s linear infinite;
}

.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 50s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 4);
}
.scroll-infinity__item>img {
	width: 100%;
}

html{
	background-color: black;
	z-index: -1;
}
li,a{
	list-style: none;
	transition: 0.5s;
	font-feature-settings: "palt";
}

li :hover{
	color: #0500FA;
	transition: 0.5s;
	
}

.anton-regular{
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
	color: white;
}

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
	color: white;
}

.zen-kaku-gothic-antique-black {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 900;
  font-style: normal;
	color: white;
}

.zen-kaku-gothic-antique-bold {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-style: normal;
	color: white;
}

.main-nav{
	display: flex;
	width:90%;
	margin: 30px 5%;
	position: absolute;
	z-index: 2;
	position: fixed;
}
	
.menu{
	display: flex;
	margin: 0 0 0 auto;
}
	
h1 img{
	height:50px;
}

.menu a{
	margin-top: 12px;
	margin-left: 30px;
	font-size: 25px;
}

.menu img{
	height: 30px;
}

.catch_copy_1{
	height: 100px;
	margin-bottom: 15px;
}

.catch_copy_2{
	height: 28px;
	margin-bottom: 15px;
}

.main_copy{
	margin-bottom: 30px;
}

.sec01{
	position: absolute;
	z-index: 1;
	width: 90%;
	left: 5%;
	top: 50%;
	transform: translateY(-50%) translateX(0%);
}

.Open{
	height: 100%;
}

.video{
	position: relative;
}

.video video{
	height: 100vh;
	width: 100%;
	object-fit: cover;
}

.scroll{
	position: absolute;
	position: fixed;
	z-index: 1;
	width: 90%;
	left:5%;
	top:100%;
	transform: translateY(-150px) translateX(0%);
}

.scroll img{
	width: 120px;
}

.box{
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
}

.edit{
	width: 30%;
	transition: 0.5s;
}

.thumbnail{
	transition: 0.5s;
}

.edit:hover .thumbnail{
	border: 3px solid #0500FA;
	transition: 0.5s;
	transform: translateY(-5px);
}

.edit:hover  .zen-kaku-gothic-antique-bold{
	color: #0500FA;
	transition: 0.5s;
	transform: translateY(-5px);
}

.edit img{
	width: 100%;
	margin-bottom: 15px;
	border: 3px solid white;
	
}

.tittle{
	display: flex;
	margin: 50px auto;
	width: 90%;
}

.tittle a{
	color: white;
	
}

.t2{
	margin-top: 25px;
}

.tittle .anton-regular{
	font-size: 	120px;;
	margin-right: 30px;
}

.tittle .zen-kaku-gothic-antique-bold{
	font-size: 30px;
}


.switch{
	width:220px;
	margin:48px auto;
	background: rgba(100,100,100,0.5);
	height: 50px;
	border-radius: 7px;
	border: 2px solid rgba(100,100,100);
	transition: 0.5s;
	
}

.switch:hover{
	width:220px;
	margin:48px auto;
	background: #0500FA;
	height: 50px;
	border-radius: 7px;
	border: 2px solid  #0500FA;
	transition: 0.5s;
	transform: translateY(-5px);
}

.switch a{
	font-size: 20px;
	position: absolute;
	margin-left: 57px;
	margin-top: 10px;
	letter-spacing: 2px;
}

.sec03{
	width: 90%;
	margin: 0 auto;
}

.sub-tittle{
	padding-top: 20px;
	font-size: 45px;
	text-align: center;
	padding-bottom: 20px;
}

.sec03 video {
	border: 3px solid white;
	width: 85%;
	height: 100%;
	margin: 0 7.5%;
}

.sec03 .zen-kaku-gothic-antique-bold{
	text-align: center;
	margin-top: 20px;
	font-size: 22px;
	line-height: 1.5;
	margin-bottom: 70px;
}

.scroll-infinity{
	margin-bottom: 70px;
}

.sec04{
	width: 70%;
	margin: 0 auto;
}

.system div{
	font-size: 40px;
	text-align: center; 
}

.system .zen-kaku-gothic-antique-bold{
	margin-bottom: 30px;
}

.system{
	margin-bottom: 70px;
}

.caption a{
	font-size: 15px;
}

.img{
	margin-top: 40px;
	display: flex;
	justify-content: space-between;
}

.img img{
	width: 47%;
}

.Schedule iframe{
	width: 100%;
	height: 500px;
}

.info a{
	font-size:50px;
	letter-spacing: 3px;
	padding-top: 50px;
}

.info img{
	padding-top: 10px;
	width: 70%;
}

.sec05{
	border-radius: 50px 50px 0 0 ;
	background: rgba(250,250,250,0.5);
	transform: translateY(20px);
	margin-bottom: 0px;
}

.sec05 .tittle{
	padding-top: 50px;
	margin-bottom: 0px;
}

.tittle2 .anton-regular{
	margin-top: 30px;
	font-size: 50px;
}

.sponsor{
	display: flex;
	width: 90%;
	margin: 0 auto;
}

.sponsor-01 img{
	width: 33%;
}
.sponsor-02 img{
	width: 33%;
}
.sponsor-03 img{
	width: 25%;
}
.sponsor-04 img{
	width: 20%;
}

.sec06{
	background-color: #D6D6D6;
}

.sec06 div{
	text-align: center;
	color: #000000;
}
	
	iframe{
		width: 100%;
		height: 500px;
}

@media screen and (min-width: 765px) {
	/* 960px以上に適用されるCSS（PC用） */
}

@media screen and (max-width: 764px) {
	/* 960px以上に適用されるCSS（PC用） */

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
	

.gradation01 {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100vh;
	z-index: -1;
  background-color: #000;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;

  /* 回転アニメーション */
  transform-origin: 0 0;
  animation-name: rotate-item;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.item-01 {
  z-index: 3;
  animation-duration: 15s;
}
.item-02 {
  z-index: 2;
  left: 45%;
  animation-duration: 50s;
  animation-direction: reverse;
}
.item-03 {
  z-index: 4;
  left: 40%;
  animation-duration: 8s;
}
.item-04 {
  z-index: 1;
  animation-duration: 10s;
}
.round {
  position: relative;
  border-radius: 50%;
}
.round-01 {
  z-index: 3;
  top: 0%;
  width: 50vw;
  height: 50vw;
  background: #0500FA;
  filter: blur(100px);
  animation: flash 20s linear infinite;
}
.round-02 {
  top: -20%;
  width: 50vw;
  height: 50vw;
  background-color: #0500FA;
  filter: blur(120px);
  animation: flash 8s linear infinite;
}
.round-04{
  top: -10%;
  left: -30%;
  width: 120vw;
  height: 80vw;
  background-color: #0500FA;
  filter: blur(120px);
  animation: flash 8s linear infinite;
}

.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 50s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 4);
}
.scroll-infinity__item>img {
	width: 100%;
}

html{
	background-color: black;
	z-index: -1;
}
li,a{
	list-style: none;
	transition: 0.5s;
	font-feature-settings: "palt";
}

li :hover{
	color: #0500FA;
	transition: 0.5s;
	
}

.anton-regular{
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
	color: white;
}

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
	color: white;
}

.zen-kaku-gothic-antique-black {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 900;
  font-style: normal;
	color: white;
}

.zen-kaku-gothic-antique-bold {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-style: normal;
	color: white;
}

.main-nav{
	display: flex;
	width:90%;
	margin: 30px 5%;
	position: absolute;
	z-index: 2;
}
	
	.main-nav li{
		display: none;
		
	}
	
.menu{
	display: flex;
	margin: 0 0 0 auto;
}
h1 img{
	height:50px;
}

.menu a{
	margin-top: 12px;
	margin-left: 30px;
	font-size: 25px;
}

.menu img{
	height: 30px;
}

.catch_copy_1{
	height: 80px;
	margin-bottom: 15px;
}

.catch_copy_2{
	height: 20px;
	margin-bottom: 15px;
}

.main_copy{
	margin-bottom: 30px;
}

.sec01{
	position: absolute;
	z-index: 1;
	width: 90%;
	left: 5%;
	top: 50%;
	transform: translateY(-50%) translateX(0%);
}

.Open{
	height: 100%;
}

.video{
	position: relative;
}

.video video{
	height: 100vh;
	width: 100%;
	object-fit: cover;
	margin-bottom: 50px;
}

.scroll{
	position: absolute;
	position: fixed;
	z-index: 1;
	width: 90%;
	left:5%;
	top:100%;
	transform: translateY(-150px) translateX(0%);
}

.scroll img{
	width: 120px;
}

.box{
	width: 85%;
	margin: 0 auto;
}

.edit{
	margin-top: 50px;
	width: 100%;
}

.edit img{
	width: 100%;
	margin-bottom: 15px;
	border: 3px solid white;
	
}

.tittle{
	width: 100%;
	margin: 0 auto;
	display:contents;
}
	.tittle div{
		width: 100%;
	}
	
	.tittle li{
		text-align: center;
	}

.tittle a{
	color: white;
}
	
.tittle .anton-regular{
	font-size: 70px;
	margin-right: -5px;
}

.tittle .zen-kaku-gothic-antique-bold{
	font-size: 20px;
}


.switch{
	width:220px;
	margin:48px auto;
	background: rgba(100,100,100,0.5);
	height: 50px;
	border-radius: 7px;
	border: 2px solid rgba(100,100,100);
	transition: 0.5s;
	
}

.switch:hover{
	width:220px;
	margin:48px auto;
	background: #0500FA;
	height: 50px;
	border-radius: 7px;
	border: 2px solid  #0500FA;
	transition: 0.5s;
	transform: translateY(-5px);
}

.switch a{
	font-size: 20px;
	position: absolute;
	margin-left: 57px;
	margin-top: 10px;
	letter-spacing: 2px;
}

.sec03{
	width: 100%;
	margin: 0 auto;
}

.sub-tittle{
	padding-top: 20px;
	font-size: 45px;
	text-align: center;
	padding-bottom: 20px;
}
	
	.sec03 br{
		display: none;
	}

.sec03 video {
	border: 3px solid white;
	width: 85%;
	height: 100%;
	margin: 0 7.5%;
}

.sec03 .zen-kaku-gothic-antique-bold{
	text-align: center;
	margin-top: 20px;
	font-size: 22px;
	line-height: 1.5;
	margin-bottom: 70px;
}

.scroll-infinity{
	margin-bottom: 70px;
}

.sec04{
	width: 90%;
	margin: 0 auto;
}

.system div{
	font-size: 40px;
	text-align: center; 
}

.system .zen-kaku-gothic-antique-bold{
	margin-bottom: 30px;
}

.system{
	margin-bottom: 70px;
}

.caption a{
	font-size: 15px;
}
	.caption li{
		margin-top: 15px;
	line-height: 10px;
}

.img{
	margin-top: 40px;
	display: flex;
	justify-content: space-between;
}

.img img{
	width: 47%;
}

.Schedule iframe{
	width: 100%;
	height: 300px;
}

.info a{
	font-size:50px;
	letter-spacing: 3px;
	padding-top: 50px;
}

.info img{
	padding-top: 10px;
	width: 70%;
}

.sec05{
	border-radius: 50px 50px 0 0 ;
	background: rgba(250,250,250,0.5);
	transform: translateY(20px);
	margin-bottom: 0px;
}

.sec05 .tittle{
	padding-top: 50px;
	margin-bottom: 0px;
}

.tittle2 .anton-regular{
	margin-top: 30px;
	font-size: 35px;
}

.sponsor{
	display: flex;
	width: 90%;
	margin: 0 auto;
}

.sponsor-01 img{
	width: 33%;
}
.sponsor-02 img{
	width: 33%;
}
.sponsor-03 img{
	width: 25%;
}
.sponsor-04 img{
	width: 20%;
}

.sec06{
	background-color: #D6D6D6;
}

.sec06 div{
	text-align: center;
	color: #000000;
}
	
	iframe{
		width: 100%;
		height: 300px;
	}
	
}