.timerHidden{ display: none;}
.timerVisible{ display: block;}

#mainvisual{
	width: 100%;
	background-image: url("../images/top/mv-bg2.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
}


.mainimg{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
}
.mainimg img{
	width: 100%;
	border-radius: 100px;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 1025px) {
  #mainvisual {
    width: 100%;
    padding: 100px 0px 100px 0px;
  }
}
@media screen and (max-width: 1024px) {
	#mainvisual{
		padding: 80px 0px;
	}
	.mainimg{
		width: 90%;
		margin: 0 auto;
	}
	.mainimg img{
		border-radius: 30px;
	}
}

.cancel-form{
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
}
.cancel-ttl{
	font-weight: bold;
	color: #fff;
	font-size: 2rem;
	padding: 30px 0px 20px 0px;
	text-align: center;
}

.cancel-form ul{
	display: flex;
	justify-content: center;
}
.cancel-form li{
	width: 100%;
	max-width: 400px;
	text-align: center;
	padding: 0px 20px;
}
.cancel-form li a{
	border: 3px solid #000;
	color: #000;
	background: #fff;
	padding: 10px 0px;
	font-size: 1.2rem;
	font-weight: bold;
	display: block;
}

.cancel-form li a span{
	display: block;
	font-weight: normal;
	font-size: 0.8rem;
}

.cancel-form li a:hover{
	background: #000;
	color: #fff;
}

.mtop-cancel{
	padding:0px 0px 1rem 0px;
}
.mtop-cancel ul{
	display: flex;
	justify-content: center;
}
.mtop-cancel ul li{
	width: 100%;
	max-width: 400px;
	padding: 0px 10px;
	text-align: center;
}

.mtop-cancel li a{
	border: 3px solid #000;
	color: #000;
	background: #fff;
	padding: 10px 0px;
	font-size: 1rem;
	font-weight: bold;
	display: block;
}

.mtop-cancel li a span{
	display: block;
	font-weight: normal;
	font-size: 0.7rem;
}

.mtop-cancel li a:hover{
	background: #000;
	color: #fff;
}
@media screen and (max-width: 1024px) {
	.cancel-form{
		width: 90%;
	}
	.cancel-form ul,
	.mtop-cancel ul{
		width: 100%;
		margin: 0 auto;
		display: inherit;
	}
	.cancel-form ul li,
	.mtop-cancel ul li{
		width: 100%;
		max-width: inherit;
		padding: 0px 0px 10px 0px;
	}
}

/*------------------------
  エントリーボタン
------------------------*/

.entry-area{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 0px;
	text-align: center;
}

/*.entry-area ul{
	display: grid;
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}*/
.entry-area ul{
	display: flex;
	justify-content: center;
}
/*

.entry-area ul li a{
	pointer-events: none;
}*/
@media screen and (min-width: 1025px) {
  .entry-area ul {
    grid-template-columns: repeat(3, 1fr);
  }
	.entry-area ul li{
	width: 100%;
		max-width: 380px;
	}
	
	a.btn-flat::before {
		left: calc(-120% + 50px);
	}
	a.btn-flat::after {
		right: calc(-120% + 50px);
	}
}

@media screen and (max-width: 1024px) {
	.entry-area{
		width: 95%;
	}
	.entry-area ul li{
	width: 100%;
	}
  .entry-area ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 599px) {
	.entry-area{
		width: 90%;
		padding-bottom: 0px;
	}
  .entry-area ul {
    grid-template-columns: repeat(1, 1fr);
	grid-column-gap: 15px;
  }
	.entry-area ul li{
	width: 100%;
	}
	.entry-sub{
		font-size: 12px;
	}
	a.btn-flat::before {
		left: calc(-120% + 50px);
	}
	a.btn-flat::after {
		right: calc(-120% + 50px);
	}
}

.entry-area ul li a.btn {
  width: 100%;
	color: #fff !important;
	text-decoration: none !important;
}

a.color-sat::after,
a.color-sat::before {
  background: #0080C9 !important;
}
a.color-sun::after,
a.color-sun::before{
  background: #C9005E !important;
}

a.color-u22::after,
a.color-u22::before{
  background: #0d449f !important;
}



.entry-area h2.entry-ttl {
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
	font-size: 40px;
	font-weight: bold;
}

@media screen and (max-width: 599px) {
	.entry-area h2.entry-ttl {
		font-size: 20px;
	}
}
.entry-area h2.entry-ttl:before,
.entry-area h2.entry-ttl:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #fff;
  border-bottom: solid 2px #fff;
	background: none !important;
}

.entry-area h2.entry-ttl:before {
  left: 0;
}

.entry-area h2.entry-ttl:after {
  right: 0;
}

.entry-txt{
	padding: 30px 0px;
	text-align: center;
	color: #fff;
}

.entry-sub{
	color: #C9005E;
	text-align: center;
	padding-top: 30px;
	font-weight: bold;
}
.entry-area ul li {}
.entry-area ul li .entry-end{
	position: absolute;

}

.news-bnr{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 0px 0px 0px;
}

.mtop-news{
	padding: 20px;
}

.mtop-news-ttl{
	text-align: center;
	font-weight: bold;
	color: #cb0001;
	font-size: 1.5rem;
	padding-bottom: 30px;
}

.mtop-news p{
	padding-bottom: 1rem;
}

@media screen and (max-width: 1024px) {
	.news-bnr{
		width: 90%;
		padding-top: 30px;
	}
	.mtop-news{
		padding: 0px;
	}
	.modaal-content-container{
		padding: 20px !important;
	}
	.mtop-news-ttl{
		text-align: left;
		font-size: 1.3rem;
	}
}

/*------------------------
  NEWS
------------------------*/
#newsarea{
	width: 100%;
	z-index: 10;
	background: linear-gradient(0deg, rgba(0,24,87,1) 0%, rgba(133,153,184,1) 16%, rgba(150,193,198,1) 30%, rgba(142,209,242,1) 55%, rgba(9,20,133,1) 85%);
	

}
.water{
	width: 100%;
	background-image: url("../images/top/mizu-mov.svg");
	background-position: top center;
	background-repeat: repeat;
	padding-bottom: 50px;
}
h2{
	text-align: center;
	padding: 100px 0px 50px;
	font-size: 3.5rem;
	color: #fff;
	font-family: 'Bebas Neue', san-serif;
	letter-spacing: 0.2rem;
}
h2.topnews{
	text-shadow: 0 0 10px black;
}
.newsover{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap:40px;
}
.newslist{
	background: #fff;
	margin-bottom: 50px;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
	transition: 0.3s;
}
.newslist:hover{
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.7);
}
.newsphoto{
	line-height: 0;
}
.newslist dl{
	padding-top: 10px;
}
.newslist dl dt{
	display: inline-block;
	background: #C51919;
	color: #fff;
	padding: 5px 15px;
	font-family: 'Bebas Neue', san-serif;
}

.newslist dl dd{
	padding: 15px;
}
.newslist dl dd span{
	font-size: 0.8rem;
}
@media screen and (min-width: 1025px) {
	.water{
		background-size: 100%;
		animation: parallax linear both;
		animation-timeline: view();
		min-height: 900px;
	}
}
@media screen and (max-width: 1024px) {
	h2{
		font-size: 2.5rem;
		padding: 30px 0px;
		letter-spacing: 0;
	}
	.water{
		background-size: 140%;
	}
	.newsover{
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap:10px;
	}
	.newslist{
		margin-bottom: 20px;
	}
	.newslist dl dt{
		font-size: 0.8rem;
	}
	.newslist dl dd{
		padding: 10px;
		font-size: 0.8rem;
	}
	.newslist dl dd span{
		font-size: 0.6rem;
	}
}


/*------------------------
  TOURNAMENT
------------------------*/

#tournament-top{
	width: 100%;
	height: auto;
	background-color: #57C4F1;
	background-image: url("../images/top/tournament-bg.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100%;
	padding-bottom: 50px;
	position: relative;
}

.tournament-inner{
	width: 90%;
	max-width: 1200px;
	/*min-height: 800px;*/
	background-color: rgba(255,255,255,0.8);
	margin: 0 auto 50px auto;
}

.tournament-tab{
	width: 100%;
}
.tournament-tab ul{
	display: flex;
	text-align: center;
	font-family: 'Bebas Neue', san-serif;
	font-size: 3rem;
}
.tournament-tab ul li{
	width: 50%;
}
.day1-btn,
.day2-btn{
	position: relative;
}
.day1-btn a{
	display: block;
	background: #999;
	color: #fff;
	padding: 20px 0px;
}
.day1-btn.active a{
	background: #0080C9;
}

.day2-btn a{
	display: block;
	background: #999;
	color: #fff;
	padding: 20px 0px;
}
.day2-btn.active a{
	background: #C9005E;
}
.day1-btn a:hover{
	background: #0080C9;
}
.day1-btn.active::after{
	position: absolute;
	bottom: -10px;
	left: 47%;
	width: 0;
	height: 0;
	content: '';
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: #0080C9 transparent transparent transparent;
}
.day2-btn.active::after{
	position: absolute;
	bottom: -10px;
	left: 47%;
	width: 0;
	height: 0;
	content: '';
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: #C9005E transparent transparent transparent;
}
.day2-btn a:hover{
	background: #C9005E;
}

.t-day h3{
	text-align: center;
	font-size: 2rem;
	background: #0080C9;
	padding: 10px 0px 15px 0px;
	margin-bottom: 1.5rem;
	margin-top: 2rem;
	font-weight: bold;
	color: #fff;
}

@media screen and (max-width: 1024px) {
	.t-day h3{
		font-size: 1.3rem;
		padding: 10px 0px;
	}
}
.tournament-day1,
.tournament-day2{
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
}

.tournament-day1.is-active,
.tournament-day2.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
	padding: 50px;
}

.tournament-day1 dl,
.tournament-day2 dl{
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding-bottom: 50px;
}
.tournament-day1 dl:last-child,
.tournament-day2 dl:last-child{
	padding-bottom: 0px;
}
.tournament-day1 dl dt,
.tournament-day2 dl dt{
	width: 40%;
}


.tournament-day1 dl dt img{
	transition: 0.3s;
	box-shadow: 15px 15px #0080C9;
}
.tournament-day2 dl dt img{
	transition: 0.3s;
	box-shadow: 15px 15px #C9005E;
}
.tournament-day1 dl dt img:hover,
.tournament-day2 dl dt img:hover{
	box-shadow: none;
}
.tournament-day1 dl dd,
.tournament-day2 dl dd{
	width: 55%;
	padding: 30px 20px;
	
}
.tournament-day1 dl dd p,
.tournament-day2 dl dd p{
	display: none;
}
.tournament-day1 dl dd .tournament-sttl{
	border-left: 5px solid #0080C9;
	font-size: 1.8rem;
	padding-left: 15px;
	font-weight: bold;
	margin-bottom: 2rem;
}
.tournament-day2 dl dd .tournament-sttl{
	border-left: 5px solid #C9005E;
	font-size: 1.8rem;
	padding-left: 15px;
	font-weight: bold;
	margin-bottom: 2rem;
}
@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@media screen and (max-width: 1024px) {
	.tournament-tab ul{
		font-size: 2rem;
	}
	.tournament-day1.is-active,
	.tournament-day2.is-active {
		padding: 20px 20px 40px 20px;
	}
	.day1-btn a,
	.day2-btn a{
		padding: 10px 0px;
	}
	.tournament-day1,
	.tournament-day2{
		padding: 20px;
	}
	.tournament-day1 dl dt img{
		box-shadow: 10px 10px #0080C9;
	}
	.tournament-day2 dl dt img{
		box-shadow: 10px 10px #C9005E;
	}
	.tournament-day1 dl dd,
	.tournament-day2 dl dd{
		padding: 10px 0px 10px 10px;
	}
	.tournament-day1 dl dd .tournament-sttl,
	.tournament-day2 dl dd .tournament-sttl{
		font-size: 1rem;
		padding-left: 8px;
		margin-bottom: 1rem;
	}
}
/*------------------------
  PAST EVENT
------------------------*/

#about-area{
	width: 100%;
	height: auto;
	background: linear-gradient(0deg, rgba(87,196,241,1) 0%, rgba(110,214,241,1) 25%, rgba(142,209,242,1) 50%, rgba(13,49,145,1) 80%, rgba(13,49,145,1) 100%);
	position: relative;
}

.past-event{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 100px;
}

.event-bnr ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.event-bnr ul li{
	width: 30%;
	margin-bottom: 30px;
}
.event-bnr ul li img{
	transition: 0.3s;
	box-shadow: 15px 15px #0080C9;
}

.event-bnr ul li img:hover{
	box-shadow: none;
}

.about-area{
	width: 90%;
	max-width: 860px;
	margin: 0 auto;
}

.about-inner{
	width: 100%;
	border: 2px solid #fff;
	border-radius: 50px;
	padding: 50px;
	color: #fff;
}

.about-inner dl{
	border-bottom: 1px solid #fff;
	padding-bottom: 20px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}
.about-inner dl:last-child{
	border-bottom: none;
	padding: 0px;
	margin: 0px;
}
.about-inner dl dt{
	width: 35%;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

.about-inner dl dd{
	width: 65%;
	font-size: 1.5rem;
}

.about-inner dl dd img{
	width: 100%;
	max-width: 300px;
}

@media screen and (max-width: 1024px) {
	.event-bnr ul li{
		width: 48%;
		margin-bottom: 15px;
	}
	
	.event-bnr ul li img{
		box-shadow: 5px 5px #0080C9;
	}
	
	.about-inner{
		border-radius: 30px;
		padding: 30px;
	}
	.about-inner dl{
		display: block;
	}
	.about-inner dl dt,
	.about-inner dl dd{
		width: 100%;
		text-align: left;
	}
	.about-inner dl dt{
		font-size: 1.2rem;
	}
	.about-inner dl dd{
		font-size: 1rem;
	}
}




/*------------------------
  more ボタン
------------------------*/
.more{
	width: 300px;
	margin: 0 auto;
	text-align: center;
}

.more a{
	display: block;
	background: #fff;
	color: #003382;
	border-radius: 30px;
	padding: 15px 0px;
	border: 2px solid #003382;
}

.more a:hover{
	background: #003382;
	color: #fff;
}






/*------------------------
  ローディング画面
------------------------*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background: #fff;
  text-align: center;
  color: #fff;
  z-index: 99999;
}
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#splash_logo img {
  width: 100%;
}

.splashbg {
  display: none;
}

/*#wrap {
  opacity: 0;
}*/

@media screen and (min-width: 1025px) {
  #splash_logo img {
    width: 400px;
  }
}


/*------------------------
  YOUTUBE
------------------------*/

#mov-over {
  position: relative;
  /*ローディング画像などを表示す際の基点とするため指定*/
  height: 80vh;
  /*高さを全画面にあわせる*/
  text-align: center;
  color: #fff;
  /*ローディング画面時＆動画が表示されないときに表示する背景画像のレスポンシブ化*/
  background-size: cover;
}


/* youtube設定 */
#youtube-area {
	position: absolute;
  /*z-index: -999999;*/
  /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0;
}
#youtube-area iframe {
  max-width: none;
}

/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
  animation-name: PageAnimeAppear;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
/*.modaal-outer-wrapper{
	background:rgba(0,0,0,0.8);
}*/
@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#youtube {
  /*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh;
  /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw;
  /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
	
}

/*youtubeがクリックされないためのマスク*/
#youtube-mask {
  position: absolute;
  z-index: 2;
  /*下から2番目に表示*/
  top: 0;
  width: 100%;
  height: 100%;
  /*background: rgba(0, 0, 0, 0.7);*/
	background: url("../images/top/mov_bg.png") repeat;
}
.main-item-logo {
  position: absolute;
  z-index: 4;
  /*下から2番目に表示*/
  /*天地中央配置*/
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  /*色指定*/
  color: #fff;
  text-shadow: 0 0 15px #666;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}

.mov-photo{
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
	transition: 0.3s;
	filter: grayscale(50%);
}
.mov-photo:hover{
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.6); 
	filter: inherit;
}

.mov-photo a{
	display: block;
}

@media screen and (max-width: 1024px) {
	#mov-over{
		height: 30vh;
	}
	.mov-photo{
		width: 65%;
	}
}


/*------------------------
  アニメーション
------------------------*/

@keyframes PageAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}

@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes parallax {
  from {
    background-position: center 100;
  }

  to {
    background-position: center -1000px;
  }
}

@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
.blurTrigger {
  opacity: 0;
}

@keyframes gradients {
    0%   {background-position: 0 0;}
    25% {background-position: 50% 0;}
    50% {background-position: 90% 0;}
    60% {background-position: 60%;}
    75% {background-position: 40%;}
    100%  {background-position: 0 0;}
}
@media screen and (max-width: 767px) {
	#matsuri{
		overflow: hidden;
	}
}
@media screen and (max-width: 1024px) {
	.modaal-video-wrap{
		margin: 0 !important;
	}
}

/*------------------------
  カウントダウン
------------------------*/
.matsuri-count{
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	z-index: 999;
}

.count-inner{
	padding: 10px;
}
.count-inner ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 1rem;
	line-height: 0;
}
.count-inner ul li{
	padding: 0px 10px;
}
.count-inner ul li img{
	width: 150px;
}
.count-inner ul li span{
	font-size: 1.4rem;
	font-weight: bold;
}

.count-inner ul li:nth-child(2),
.count-inner ul li:nth-child(3){
	color: #57C4F1;
}
.count-inner ul li:nth-child(3){
	font-weight: bold;
}

.count-inner ul li.countdown__txt1{
	line-height: 0;
}
.count-inner ul li.countdown__txt2{
	font-weight: bold;
	font-size: 1.8rem;
	color: #57C4F1;
}

.count-inner ul li.countdown__txt2 span{
	font-size: 1rem;
	color: #fff;
	margin-left: 5px;
}

@media screen and (max-width: 599px) {
	.sitetop .footer-contact a{
		border: 2px solid #fff;
	}
	.count-inner ul{
		font-size: 12px;
		line-height: 1rem;
	}
	.count-inner ul li{
		padding: 0px;
	}
	.count-inner ul li:nth-child(1),
	.count-inner ul li:nth-child(3){
		display: none;
	}
	.count-inner ul li:nth-child(2){
		width: 66%;
		line-height: 1.3rem;
	}
	.count-inner ul li span.sp-map{
		font-size: 1rem;
	}
	.count-inner ul li.countdown__txt2{
		margin-left: 10px;
	}
	.past-event{
		padding-bottom: 50px;
	}
	
}