/*PC共通 -----------------*/

.js-scroll-trigger{opacity: 0;}
.js-scroll-trigger.is-active{opacity: 1;}

html {
    font-size: 62.5%;
    overflow-y: scroll !important;
}

body {
    font-size: 1.6rem;
   font-family: 'Noto Sans JP', sans-serif;
    background-color: #fff;
    line-height: 2.2rem;
    list-style: none;

}

img{width: 100%; height: auto;}

a {
    text-decoration: none;
    color: #00d7be;
}

::selection {
  background-color:#00d7be;
}

li {
    list-style: none !important;
}

.tbOnly {
    display: none;
}

.spOnly {
    display: none;
}

.BroadcastInfo{width: 88%; margin: 30px auto 0 auto;}


/* ローディング画面 */
.loader {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 555;
  top: 0;
  left: 0;
  display: flex;
	background-size: cover;
  justify-content: center;
  align-items: center;
}
.loader video {
}

.loader_pc{display: block;}
.loader_sp{display: none;}


.fade-anime1 {
  color: transparent;
  font-size: 36px;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}

.fade-anime1 img{opacity: 0;}

.fade-anime1::after {
  background: #00d7be;
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translatey(105%);
}
 
.fade-anime1.is-active{
  color: #362ae0;
}

.fade-anime1.is-active img{
	animation: mask-bg-img 1.2s;
	transition: .6s;opacity: 1;}

.fade-anime1.is-active::after {
  animation: mask-bg 1s cubic-bezier(0.8, 0, 0.170, 1);
}

.passing{margin-bottom: 4px;}
 
@keyframes mask-bg {
  0% {
    transform: translateY(101%)
  }
  40%, 60% {
    transform: translateY(0)
  }
  100% {
    transform: translateY(-100%)
  }
}

@keyframes mask-bg-img {
  0% {
    transform: translateY(140%);
	  opacity: 0;
  }
  100% {
    transform: translateY(0);
	  opacity: 1;
  }
}


/*PCコンテンツ -----------------*/
.right {
    width: calc(100% - 294px) !important;
    margin-left: auto;
    margin-right: 0;
	position: relative;
	
}

#introduction{padding: 5% 0 8% 0;}


.midasi{width: 90%; max-width: 850px;margin:0 auto 80px auto;position: relative;z-index: 1;}

.introTxt{width: 90%; max-width: 1000px;color: #fff; text-align: center; margin:0 auto; }
.introTxt p{font-size: 20px; line-height: 4.2rem; margin-bottom: 6%;text-shadow:#0a584e 0px 0 10px,#0a584e 1px 0 10px,#0a584e 1px 0 10px,#0a584e 1px 0 10px;}
.introTxt .mb0{margin-bottom: 0;}
.introTxt .medium{font-size: 27px;}
.introTxt .large{font-size: 36px;color: #00d7be; font-weight: 600;}

.blinkingWrap-pc{display: block;}
.blinkingWrap-sp{display: none;}


#news{margin: 5% 0 0 0;background: #00d7be;padding: 120px 0;position: relative;}


.newsBg1{background: url(../img/top/newsBgTop.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    height: 39px;
    width: 24%;
	right: 0;
    top: -37px;
    position: absolute;}

.newsBg3{background: url(../img/top/newsBg1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    height: 140px;
    width: 275px;
	left: 12%;
    top: 8%;
    position: absolute;}

.newsBg4{background: url(../img/top/newsBg2.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
    height: 100%;
    width: 150px;
    left: 1%;
    top: 1%;
    position: absolute;}

.newsBg5{background: url(../img/top/newsBg3.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
    height: 100%;
    width: 150px;
    right: 1%;
    bottom: 1%;
    position: absolute;}

.newsArea{display: flex;justify-content: center;color: #fff;margin: 0 auto; width: 88%;}
.newsArea-ALL{z-index: 1;position: relative;}

.newsTopImg img {
    width: 100%;
    height: 165px;
    object-fit: cover;
}

.newsImg a{display: block;line-height: 0;}

@media screen and (max-width:1400px) {
.newsTopImg img {height: 200px;}
}

@media screen and (max-width:1100px) {
.newsTopImg img {height: 185px;}
}

@media screen and (max-width:1000px) {
.newsTopImg img {height: 135px;}
}

@media screen and (max-width:767px) {
.newsTopImg img{height: 180px;}
}

@media screen and (max-width:500px) {
.newsTopImg img{height: 140px;}
}


.newsArea li{background: rgba(0,0,0,0.80); padding: 2%; margin-left: 3%;overflow: hidden;position: relative;flex-basis: 25%;}
.newsArea li:nth-child(4n+1){margin-left: 0;}
.datetime{display: flex;margin: 7px 0;align-items: flex-end;}
.newstag {background: #00d7be;
    display: inline-block;
    padding: 0 3%;
    color: #000;
    font-size: 70%;
    text-decoration: none;
    text-align: center;
}
.newsArea li .datetime p{color: #00a591; font-size: 12px; margin-left: 5px;}
.newsTitle{color: #fff;font-size: 15px;}

.glitchTxt{animation-duration: 0.01s;
       animation-name: textflicker;
       animation-iteration-count: infinite;
       animation-direction: alternate;}

.glitchTxt2{animation-duration: 0.01s;
       animation-name: textflicker2;
       animation-iteration-count: infinite;
       animation-direction: alternate;}

.glitchTxt3{animation-duration: 0.01s;
       animation-name: textflicker3;
       animation-iteration-count: infinite;
       animation-direction: alternate;}

@keyframes textflicker {
  from {
    text-shadow: 1px 0 0 #f2192d, -2px 0 0 #00d7be;
  }
  to {
    text-shadow: 2px 0.5px 2px #f2192d, -1px -0.5px 2px #00d7be;
  }
}

@keyframes textflicker2 {
  from {
    text-shadow: 1px 0 0 #f2192d, -2px 0 0 #00d7be ,#0a584e 0px 0 10px,#0a584e 1px 0 10px,#0a584e 1px 0 10px,#0a584e 1px 0 10px;
  }
  to {
    text-shadow: 2px 0.5px 2px #f2192d, -1px -0.5px 2px #00d7be,#0a584e 0px 0 10px,#0a584e 1px 0 10px,#0a584e 1px 0 10px,#0a584e 1px 0 10px;
  }
}

@keyframes textflicker3 {
  from {
    text-shadow: 1px 0 0 #f8adbb, -2px 0 0 #9dfff4;
  }
  to {
    text-shadow: 2px 0.5px 2px #f8adbb, -1px -0.5px 2px #9dfff4;
  }
}

.newsArea li:before,
.news-cont:before {
    content: '';
    position: absolute;
	background:rgba(255,255,255,0.80);
}

.newsArea li:after,
.news-cont:after {
    content: '';
    position: absolute;
	background:rgba(255,255,255,0.80);
}

/* 下のボーダー */
.newsArea li:before {
    bottom: 0;
    left: -150%;;
    width: 100%;
    height: 1px;
}
/* 右のボーダー */
.newsArea li:after {
    bottom: -150%;;
    right: 0;
    width: 1px;
    height: 100%;
}
/* 上のボーダー */
.news-cont:before {
    top: 0;
    right: -150%;;
    width: 100%;
    height: 1px;
}
/* 左のボーダー */
.news-cont:after {
    top: -150%;;
    left: 0;
    width: 1px;
    height: 100%;
}

/* ホバー時のアニメーション指定 */
.newsArea li::before {
    animation: leftAnim 3s linear 0s infinite;
}
.newsArea li::after {
    animation: bottomAnim 3s linear 1.5s infinite;
}
.news-cont::before {
    animation: rightAnim 3s linear 0s infinite;
}
.news-cont::after {
    animation: topAnim 3s linear 1.5s infinite;
}

/* 各アニメーション */
@keyframes topAnim {
    0% {top:-150%;}
    100% {top:105%;}
}
@keyframes bottomAnim {
    0% {bottom:-150%;}
    100% {bottom:105%;}
}
@keyframes rightAnim {
    0% {right:-150%;}
    100% {right:105%;}
}
@keyframes leftAnim {
    0% {left:-150%;}
    100% {left:105%;}
}



#movie{
    position: relative;
    overflow: hidden;
	padding:180px 0;
	background: rgba(0,0,0,0.80)
}

.movieBg1{background: url(../img/top/movieBgTop.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    height: 65px;
    width: 42%;
	left: 0;
    top:0;
    position: absolute;}

.movieBg2{background: url(../img/top/movieBgBot.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    height: 50px;
    width: 44%;
	right: 0;
    bottom:0;
    position: absolute;}

.tab-content{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    vertical-align: middle;
    z-index: -1;
    display: none;
    opacity: 0;
}

video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s;
}

/* selectedクラスが付いたコンテンツのみ表示。 */
.tab-content.selected {
  display: block;
	opacity: 1;
	transition: 0.2s;
}

.movieBtn{display: flex;justify-content: center;width: 96%; max-width: 1100px; margin: 0 auto;}
.movieBtn li{border: 2px solid #fff;background: rgba(0,215,190,0.20); padding: 0.4rem;flex: 1;position: relative;margin-left: 2%;max-width: 539px; display: flex;justify-content: center;align-items: center;}
.movieBtn li:nth-child(3n+1){margin-left: 0;}
.movieBtn li:after{
position:absolute;content: "";
  display: inline-block;
	top: -7px;
	right: 0;
  width: 42px;
  height: 5px;
  background: url("../img/common/btn_topdeco.svg") no-repeat;
  background-size: contain;}
.movieBtnwrap{display: flex; justify-content: center;flex-grow: 1;color: #fff;font-weight: 600;padding: 3rem 1rem;text-align: center;font-size:19px;cursor: pointer;    position: relative;}
.movieBtnwrap:hover{background: #fff;color: #000;transition: 0.3s;}

.movieBtnwrap-wrap{display: flex;
    width: 100%;
    height: 100%;
    background: #000;
    justify-content: center;
    align-items: center;}

.newIcon{position: absolute;
    background: #ffad10;
    color: #fff;
    padding: 0px 7px;
    font-size: 70%;
    z-index: 10;
    top: 0.4rem;
    left: 0.4rem;}


.btnMore{position: relative;display: flex;align-items: center;width: 92%; margin: 45px auto 0 auto;}
.btnMore a{
	color: #000;
	font-weight: 700; font-size: 120%;display: block;margin-left: auto;
    margin-right: 0;
    cursor: pointer;
    text-decoration: none;
padding: 8px 14px;}

.btnMore a:hover{background: #000; color: #fff; transition: 0.2s;}

.btnMore-line {
    content: "";
    display: block;
    top: calc(30%);
    right: 3rem;
    width: 29rem;
    height: 0.5rem;
    border: none;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    transform: skew(45deg);
    margin-left: -4px;
}

.btnMore2{position: relative;display: flex;align-items: center;width: 92%; margin: 45px auto 0 auto;}
.btnMore2 a{
	color: #fff;
	font-weight: 700; font-size: 120%;display: block;margin-left: auto;
    margin-right: 0;
    cursor: pointer;
    text-decoration: none;
padding: 8px 14px;}

.btnMore2 a:hover{background: #fff; color: #000; transition: 0.2s;}

.btnMore-line2 {
    content: "";
    display: block;
    top: calc(30%);
    right: 3rem;
    width: 29rem;
    height: 0.5rem;
    border: none;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: skew(45deg);
    margin-left: -4px;
}


.keyImg{line-height: 0;}
.onair{position: relative;padding:1.5% 0 4.5% 0; margin-bottom:10%;}
.onairTxt{width: 95%; max-width: 1150px; margin: 0 auto;}
.onairBg1{background: url(../img/top/onairBgLeft.svg);
	background-repeat: no-repeat;
    background-size:100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;}
.onairBg2{background: url(../img/top/onairBgRight.svg);
	background-repeat: no-repeat;
    background-size:100%;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;}



.blackBg{position: absolute;background: rgba(0,0,0,0.80);height:100vh;width: 100%;}
.blackMainBg{background:url("../img/common/rightMainBg01.png")#000; height:100vh; background-attachment: fixed;width: 100%; top: 0;z-index: -2;background-size: contain; background-position: center; overflow: hidden; position:fixed;}

.whiteBg{position: absolute;background: rgba(255,255,255,0.80);height:100vh;width: 100%;}
.whiteMainBg{background:url("../img/common/rightMainBg02.png")#000; height:100vh; background-attachment: fixed;width: 100%; top: 0;z-index: -2;background-size: contain; background-position: center; overflow: hidden; position:fixed;}

.greenBg{position: absolute;background:rgba(79,234,216,0.60);height:100vh;width: 100%;}
.greenMainBg{background:url("../img/common/rightMainBg03.png")#000; height:100vh; background-attachment: fixed;width: 100%; top: 0;z-index: -2;background-size: contain; background-position: center; overflow: hidden; position:fixed;}

.MainBg01{position: absolute; background:url("../img/common/rightBg01.png");height:2158px;width: 100%;z-index: -1;}
.MainBg02{position: absolute; background:url("../img/common/rightBg02.png");height:2158px;width: 100%;z-index: -1;}
.MainBg03{position: absolute; background:url("../img/common/rightBg03.png");height:2158px;width: 100%;z-index: -1;}
.MainBg04{position: absolute; background:url("../img/common/rightBg04.png");height:2158px;width: 100%;z-index: -1;}
.MainBg05{position: absolute; background:url("../img/common/rightBg05.png");height:2158px;width: 100%;z-index: -1;}
.MainBg06{position: absolute; background:url("../img/common/rightBg06.png");height:2158px;width: 100%;z-index: -1;}

.MainBg07{position: absolute; background:url("../img/common/rightBg01-2.png");height:2158px;width: 100%;z-index: -1;}
.MainBg08{position: absolute; background:url("../img/common/rightBg02-2.png");height:2158px;width: 100%;z-index: -1;}
.MainBg09{position: absolute; background:url("../img/common/rightBg03-2.png");height:2158px;width: 100%;z-index: -1;}
.MainBg10{position: absolute; background:url("../img/common/rightBg04-2.png");height:2158px;width: 100%;z-index: -1;}
.MainBg11{position: absolute; background:url("../img/common/rightBg05-2.png");height:2158px;width: 100%;z-index: -1;}
.MainBg12{position: absolute; background:url("../img/common/rightBg06-2.png");height:2158px;width: 100%;z-index: -1;}

.pageback{text-align: center; font-size: 16px; margin: 15px auto 0 auto;}
.pageback a{color: #fff; font-weight: 600; text-align: center; display:inline-block;background: #000; padding: 1rem 3rem;}
.pageback a:hover{color: #000;background: #fff;transition: 0.3s;}

@media screen and (max-width:1660px) {
	.onair {padding: 1% 0 1% 0;}
	.onairTxt { width: 80%;}
}

@media screen and (max-width:1500px) {
}

@media screen and (max-width:1200px) {
	
	.newsArea{flex-wrap: wrap;}
	
	.newsArea li {
		margin-bottom: 3%;
    flex-basis: 44.5%;
	}
	
	.newsArea li:nth-child(2n+1) {
    margin-left: 0;
}
}

@media screen and (max-width:1100px) {
	
	.right {
    width: calc(100% - 237px) !important;
	}
	
	.newsBg3{display: none;}
	
	
}

@media screen and (max-width:1100px) {
.loader_pc{display: none;}
.loader_sp{display: block;}
}

@media screen and (max-width:767px) {
	
	.onair {padding: 1% 0 1% 0;}
	.onairTxt { width: 80%;}
	
	.blinkingWrap-pc{display: none;}
.blinkingWrap-sp{display: block;}

    .right {
        width: 100% !important;
        margin-left: auto;
        margin-right: auto;
		padding-top: 72px;
    }

    .pcOnly {
        display: none;
    }

    .spOnly {
        display: block;
    }
	
	.btnMore-line {
    width: 10rem;
}
	.btnMore-line2 {
    width: 10rem;
}
	.midasi {
    margin: 0 auto 50px auto;}
	.midasi.news {
    width: 90%;}
	
	.btnMore {
    width: 87%;
}
	
	.btnMore2 {
    width: 87%;
}

.introTxt {text-align:left;}
.introTxt p{font-size: 15px; line-height:3rem;}
.introTxt .medium{font-size: 19px; line-height:3.2rem;}
.introTxt .large{font-size: 23px; line-height:3.4rem;}

    section {
        padding: 15% 0;
    }
	
	#movie{
	padding:120px 0;
}
	
	.newsArea-ALL{
		overflow-x: auto;
		padding-left: 11%;
	overflow-style: none;}
	
	.newsArea{width: 349%;
    flex-wrap: nowrap;
		justify-content: flex-start;
    padding-right: 11%;}
	
	.newsArea-ALL::-webkit-scrollbar{
		display:none;
	margin-top: 20px;
	background-color:rgba(0,0,0,0.40);
	border-radius: 10px;
	height: 7px;
}

.newsArea-ALL::-webkit-scrollbar-thumb {
	display:none;
	background-color:rgba(0,0,0,1.00);
	border-radius: 10px;
}
	
	.newsArea li {
    margin-left: 3%!important;
    margin-bottom: 0;
    flex-basis: 45%;
	width: 19%;
}
	.newsArea li:nth-child(4n+1) {
    margin-left: 0!important;
}
	
.newsTitle{font-size: 14px;}
	
.newsBg1 {
    height: 30px;
    width: 35%;
    top: -30px;
}
	
.newsBg4 {
    height: 100%;
    width: 130px;
    left: 1%;
    top: 1%;
}
	
.newsBg5 {
    height: 100%;
    width: 130px;
    right: 1%;
    bottom: 1%;
}
	
	.movieBg1 {
    height: 38px;
    width: 45%;
}
	.movieBg2 {
    height: 30px;
    width: 38%;
}
	
.movieBtn{display: flex;flex-wrap: wrap;}
.movieBtn li{flex:none;position: relative;margin-left: 3%!important; margin-bottom: 4.5%; width: 45%; flex-basis: 45%;}
.movieBtn li:nth-child(2n+1){margin-left: 0!important;}
.movieBtnwrap{padding: 2rem 1rem;font-size: 18px;}
.movieBtnwrap:hover{background: #000;color: #fff;}
	
	
	.tab-content video{
    width: 110%;
    height: 75vh;
    object-fit: cover;
    transition: all .3s;
}
	
	.loader video {
		width: 100%;
    	height: 100vh;
	}
	


}