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

body{
	margin:0;
	font-size:18px;
	font-family: "Noto Sans JP", sans-serif;
}
img{
	width:100%;
}
ul{
	padding:0;
	margin:0;
}
ul li{
	list-style:none;
}
.home h2{
	font-size:3.4rem;
	line-height:2;
	margin:0;
}
p{
	margin:0;
}
a{
	cursor:pointer;
}
@font-face {
  font-family: 'Hipopotum Studio'; /* 任意のフォント名 */
  src: url('../font/Hipopotam Studio - MrsLollipop-Regular.otf') format('opentype'); /* フォントファイルのパス */
}

/*基本*/
.container{
	width:60%;
	margin:0 auto;
}
@media screen and (max-width: 800px) {
 .container{
	width:80%;
}
}
/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300%;
  bottom: 0;
  width: 32%;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
.open nav {
  left: 0;
  opacity: 1;
}


nav .inner {
  padding: 25px;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333;
}
nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .inner ul li a:hover {
  background: #e4e4e4;
}

/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 50px;
  right: 30px;
  width: 80px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 80px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all .5s;
  animation:toggle_color 22s linear infinite both;
}
.single .toggle_btn span {
  background-color: #333!important;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #fff!important;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}

/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}
nav{
	background-image: url("../img/nav_bg.png");
	background-repeat:no-repeat;
	background-size: contain;
	background-position:bottom;
}


/*メインビュー*/
#hero{
	width:100%;
	height:100vh;
	background: linear-gradient(90deg,rgba(173, 216, 230) 0%, rgba(173, 216, 230) 28%, rgba(45, 131, 189, 1) 32%, rgba(0, 12, 31, 1) 35%, rgba(0, 12, 31, 1) 64%, rgba(45, 131, 189, 1) 68%, rgba(173, 216, 230) 71%, rgba(173, 216, 230) 100%);
	 background-size: 350% 100%;
     animation: Grad 22s ease-in-out infinite;
	overflow:hidden;
	position:relative;
}
#hero .hero_bg{
	width:100%;
	height:100vh;
	position:relative;
}
.hero_wrapper{
	position:relative;
	width:50%;
	top:50%;
	transform:translateY(-50%);
	margin-left:50%;
	height:82%;
	display:flex;
	justify-content: flex-start;
	align-items:center;
}
.hero_wrapper div{
	position:absolute;
	height:100%;
}
.hero_wrapper div img{
	height:100%;
	width:auto;
}
.flex{
	display:flex;
}
.loop {
    overflow: hidden;
    display: flex;
    position: absolute;
    width: 100%;
	bottom:1%;
}
.loop__box {
    display: flex;
    list-style: none;
    padding: 0;
}
.scroll-infinity__item {
    width:100vw;
    overflow: hidden;
}
.scroll-infinity__list--left {
    animation: infinity-scroll-left 50s infinite linear 0.5s both;
}
.star {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 40%, rgba(255,255,255,0) 70%);
  opacity: var(--base-opacity, .65);
  animation: twinkle var(--twinkle, 2.2s) ease-in-out infinite;
  animation-delay: calc(var(--delay, 0s) * -1);
}
/*アニメーション*/
@keyframes twinkle {
  0%, 100% { opacity: .6; transform: scale(1); }
  40%      { opacity: .2; }
  70%      { opacity: 1; transform: scale(1.1); }
}
@keyframes Grad {
    0%{background-position:0% 0%}
    28.57%{background-position:0% 0%}
	50%{background-position:50% 0%}
	78.57%{background-position:50% 0%}
    100%{background-position:100% 0%}
}
@keyframes infinity-scroll-left{
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-100%);
}
}
@keyframes op1{
0% {
    opacity:0;
}
100% {
   opacity:1;
}
}
@keyframes op0{
0% {
    opacity:1;
}
100%{opacity:0;}
}
@keyframes op0_1{
0% {
    opacity:1;
}
33% {
   opacity:0;
}
66% {
   opacity:0;
}
	99%{
		 opacity:0;
}
100%{opacity:0;}
}
@keyframes op0_2{
0% {
    opacity:1;
}
33% {
   opacity:1;
}
66% {
   opacity:0;
}
	99%{
	opacity:0;
}
	100%{
	opacity:0;
	}
}
@keyframes op0_3{
0% {
    opacity:1;
}
33% {
   opacity:1;
}
66% {
   opacity:1;
}
99%{
	opacity:0;
}
100%{
	opacity:0;
	}
}
@keyframes title_color{
0% {
	fill: #141414;
	opacity:1;
	filter: drop-shadow(0px 0px 1px rgb(0 0 0 / 0));
}
41.99999% {
	fill: #141414;
	opacity:1;
	filter: drop-shadow(0px 0px 1px rgb(0 0 0 / 0));
}
42%{
	fill: #fff;
	filter: drop-shadow(0px 0px 1px rgb(0 0 0 / 1));
	opacity:1;
}
92.9999%{
	fill: #fff;
	filter: drop-shadow(0px 0px 1px rgb(0 0 0 / 0));
}
93%{
	fill: #141414;
	filter: drop-shadow(0px 0px 1px rgb(0 0 0 / 0));
	}
100%{
	fill: #141414;
	filter: drop-shadow(0px 0px 1px rgb(0 0 0 / 0));
	}
}
@keyframes animals{
0% {
	opacity:1;
}
39%{
	opacity:1;
}
39.99999% {
	opacity:0;
}
41.99999% {
	opacity:0;
	
}
43%{
	opacity:0;
	
}
90%{
	opacity:0;
	
	}
92.9999%{
	opacity:0;
	
}
94%{
	opacity:1;
	
	}
100%{
	opacity:1;
	
	}
}
@keyframes flying{
0% {
   visibility:visible;
}
38%{
	visibility:visible;
}
38.99999% {
	visibility:hidden;
}
41.99999% {
	visibility:hidden;
	
}
43%{
	visibility:hidden;
	
}
90%{
	visibility:hidden;
	
	}
92.9999%{
	visibility:hidden;
	
}
94%{
	visibility:visible;
	
	}
100%{
	visibility:visible;
	
	}
}
@keyframes toggle_color{
0% {
	background-color: #333;
}
33.99999% {
	background-color: #333;
}
34%{
	background-color: #fff;
}
84.9999%{
	background-color: #fff;
}
85%{
	background-color: #333;
	}
100%{
	background-color: #333;
	}
}
@keyframes title_translate{
0% {
	opacity:1;
	transform:translateY(0);
}
39%{
	opacity:1;
	transform:translateY(0);
}
39.99999% {
	opacity:0;
}
41.99999% {
	opacity:0;
	transform:translateY(10px);
}
43%{
	opacity:1;
	transform:translateY(0);
}
90%{
	opacity:1;
	transform:translateY(0);
	}
92.9999%{
	opacity:0;
	transform:translateY(10px);
}
94%{
	opacity:1;
	transform:translateY(0);
	}
100%{
	opacity:1;
	transform:translateY(0);
	}
}
@keyframes layer10_1{
0% {
    transform:translate(0,0);
	opacity:1;
}
49%{
	opacity:1;
	}
50%{
	transform:translate(50px,-20px);
	opacity:0;
	}
100%{
	opacity:0;
	}
}
@keyframes layer10_2{
0% {
    transform:translate(50px,-20px);
	opacity:0;
}
49%{
	opacity:0;
	}
50%{
	transform:translate(50px,-20px);
	opacity:1;
	}
100%{
	transform:translate(0,0);
	opacity:1;
	}
}
@keyframes poyon-bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(0);
  }
  50% {
	transform: translateY(0); 
  }
  65% {
	transform: translateY(0); 
  }
  70% {
   transform: translateY(-10px) translateX(-10px);
  }
  75%{
	  transform: translateY(0);
	}
  80%{
	  transform: translateY(-10px) translateX(-10px);
	}
  85%{
	  transform: translateY(0);
	}
  100% {
    transform: translateY(0);
  }
}
@keyframes sequence-poyon {
  0%,
  80%,
  100% {
    transform: translateX(0) translateY(0);
  }
  40% {
    transform: translateX(-20px) translateY(-20px);
  }
}
@keyframes jump_rotate {
	0%{transform:translateY(0) rotate(0);}
	40%{transform:translateY(-30px);}
	50%{transform:translateY(-30px) rotate(0);}
	75%{transform:translateY(-30px) rotate(-360deg);}
	80%{transform:translateY(-30px) rotate(-360deg);}
	100%{transform:translateY(0) rotate(-360deg);}
}
@keyframes glass {
    0%{opacity:1;}
    39.9999%{opacity:1;}
	40%{opacity:0;}
	89.9999%{opacity:0;}
	90%{opacity:1;}
    100%{opacity:1;}
}
/*/アニメーション*/
.hero_wrapper>div{
}
.hero_wrapper>div:nth-of-type(2){
	animation-delay:0.12s;
	animation:animals 22s infinite both;
}
.hero_wrapper>div:nth-of-type(3){
	 animation: sequence-poyon 1.8s ease-out infinite, animals 22s infinite both;
}
.hero_wrapper>div:nth-of-type(4){
	animation-delay:0.36s;
	animation: animals 22s infinite both;
}
.hero_wrapper>div:nth-of-type(5){
	animation-delay:0.48s;
    animation: poyon-bounce 3s ease-in-out infinite both, animals 22s infinite both;
}
.hero_wrapper>div:nth-of-type(6){
	animation-delay:0.60s;
	animation: animals 22s infinite both;
}
.hero_wrapper>div:nth-of-type(7){
	animation-delay:0.72s;
	animation: jump_rotate 2.4s ease-out infinite, animals 22s infinite both;
	transform-origin: 69.98313% 45.83333%;
}
.hero_wrapper>div:nth-of-type(8){
	animation-delay:0.84s;
	animation:animals 22s infinite both;
}
.hero_wrapper>div:nth-of-type(9){
	animation-delay:0.96s;
	animation:animals 22s infinite both;
}
.hero_wrapper>div:nth-of-type(10){
	animation: layer10_1 8s linear infinite both, flying 22s infinite both;
}
.hero_wrapper>div:nth-of-type(11){
	animation: glass 22s linear infinite both;
	transform-origin: 100% 100%;
}
/*
.hero_wrapper>div:nth-of-type(10){
	animation: layer10_1 8s linear infinite both;
}*/
.hero_images .img_1{
	position:absolute;
	width:13.2vh;
	left:calc(50% + 300px);
	top:8%;
	animation: layer10_2 8s linear infinite both, flying 22s infinite both;
}
.hero_text{
	position:absolute;
	top: 50%;
	transform:translateY(-50%);
	margin-left:5%;
	width:40%;
}
  .cls-1, .cls-2 {
       
	   /* animation: grad_font 28s ease 5s infinite;*/
	  
      }
      .cls-2 {
        fill-rule: evenodd;
      }
.title svg>g>g{
	animation:title_color 22s linear infinite both, title_translate 22s infinite both, op1_title 0.8s 1 linear both;
}
.title svg>g>g:nth-of-type(2){
	animation-delay:0.1s;
}
.title svg>g>g:nth-of-type(3){
	animation-delay:0.2s;
}
.title svg>g>g:nth-of-type(4){
	animation-delay:0.3s;
}
.title svg>g>g:nth-of-type(5){
	animation-delay:0.4s;
}
.title svg>g>g:nth-of-type(6){
	animation-delay:0.5s;
}
.title svg>g>g:nth-of-type(7){
	animation-delay:0.6s;
}
.title svg>g>g:nth-of-type(8){
	animation-delay:0.7s;
}
/*惑星追加*/
@keyframes sun_rotate{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(-120deg);}
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
@keyframes space_fadein{
0% {
	clip-path: inset(0 0 0 100%);
}
41.99999% {
	clip-path: inset(0 0 0 100%);
}
48%{
	clip-path: inset(0 0 0 0);
}
88.9999%{
    clip-path: inset(0 0 0 0);
}
95%{
	clip-path: inset(0 100% 0 0);
	
	}
100%{
	clip-path: inset(0 100% 0 100%);
	}
}
@keyframes space_fadein2{
0% {
	clip-path: inset(0 100% 0 0);
}
41.99999% {
	clip-path: inset(0 100% 0 0);
}
48%{
	clip-path: inset(0 0 0 0);
}
85.9999%{
    clip-path: inset(0 0 0 0);
}
92%{
	clip-path: inset(0 100% 0 0);
	
	}
100%{
	clip-path: inset(0 100% 0 0);
	}
}
.hero_full{
}
.suns_wrapper{
	position:absolute;
	left:22%;
	top:0;
}
.suns{
	width:16vw;
	position:relative;
	height:16vw;
	display:flex;
	justify-content: center;
	align-items:center;
	/*animation:sun_rotate 11s linear infinite both;*/
	transform-origin: 30vw 60vh;
}
.suns>div{
	position:absolute;
}
/*
.suns>div:nth-of-type(3){
  animation: fadeOut 0.15s 2s forwards; 
}
.suns>div:nth-of-type(2){
	animation: fadeOut 0.15s 6s forwards;
}
.suns>div:nth-of-type(1){
	animation: fadeOut 0.15s 9s forwards; 
}*/
.space>div{
	position:absolute;
}
.space .jupitar {
    width: 12vw;
    height: 12vw;
    top: 45.44444%;
    left: 12.32229%;
}
.space .ter{
	width: 9.8958vw;
	height:9.8958vw;
	bottom:-3%;
	right:4.166666%;
}
.space .saturn{
	left:3.2%;
	top:48.296296%;
	width:135px;
}
.space .mv{
	left:43.229166%;
	top:22.22222%;
	width:70px;
}
.space .space_bg1{
	margin-top:40px;
	width:100%;
	animation:space_fadein 22s ease infinite both;
	
}
.space .space_bg2{
	bottom:0;
	left:0;
	width:100%;
	animation:space_fadein2 22s ease infinite both;
	animation-delay: 0.72s;
}
.space .soleiu{
	width:100%;
	margin-top:6.48148%;
}
/*ニュース*/
#top_news h2{
  font-family: "Potta One", system-ui;
  font-weight: 400;
  font-style: normal;
}
.news_list li{
	list-style: none;
	border-bottom:1px solid #ccc;
    padding-top: 1em;
    padding-bottom: 1em;
	line-height:1.4;
}
.news_list li a{
	text-decoration:none;
	display:flex;
	align-items:center;
}
.news_list li a:hover{
	opacity:0.6;
}
.news_list li a span:nth-of-type(1){
	display:block;
	margin-right:50px;
	color:#4D4D4D;
	font-family: "Potta One", system-ui;
    font-weight: 400;
    font-style: normal;
}
@media screen and (max-width: 1200px) {
  .news_list li a span:nth-of-type(1) {
    margin-right: 2%;
}
}
@media screen and (max-width: 747px) {
  .news_list li a span:nth-of-type(1) {
    font-size: 4vw;
}
}
.news_list li a span:nth-of-type(2){
	display:block;
	color:#121212;
}
.news_list li a span:nth-of-type(3){
    font-family: "Potta One", system-ui;
    font-weight: 400;
    font-style: normal;
	display:block;
	margin-left:auto;
	color:#121212;
}

/*footer*/
.copyright{
	margin:0 auto;
	margin-top:1em;
	margin-bottom:1em;
}
.top .container section{
	margin-bottom:8vh;
}
.footer_nav_cont {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translate(-50%, -50%);
	width:500px;
	box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .footer_nav_cont {
    width:80%;
}
}
.footer_nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 1em;
    background-color: #fff;
    padding: 0.8em;
    border-radius: 16px;
}
.footer_nav li a {
    color:#333;
	font-family: 'Hipopotum Studio', sans-serif;
}
.footer_nav li a:hover {
    color:#9F9F9F;
}
footer{
	position:relative;
	width:100%;
}
/*ロゴ*/
#logos ul{
	display:flex;
	justify-content: center;
}
#logos ul li{
	margin-right:3%;
}
#logos ul li:last-of-type{
	margin-right:0;
}
/*シングルページ*/
.single #navArea{
	height:130px;
}
.single{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.single .container {
    margin-bottom: auto;
}
/*配信情報*/
#streaming{
	display: flex;
	flex-direction:column;
	align-items:center;
	margin-top:2em;
	margin-bottom:2em;
}
#streaming p{
	font-family: "Potta One", system-ui;
    font-weight: 400;
    font-style: normal;
}
#streaming ul{
	display:flex;
	justify-content: center;
	align-items:center;
	background-color:#fff;
	border-radius:16px;
	padding:1em;
}
#streaming ul li {
    width: 10em;
    margin-right: 8%;
}
#streaming ul li:last-of-type{
	margin-right:0;
}
/**/
@media screen and (max-width: 1400px) {
.hero_wrapper {
    margin-left:0; 
    height: 60%;
    justify-content: center;
    margin: 0 auto;
}
	.hero_text {
	margin-left:0;
    top: 85%;
    width: 60%;
    left: 50%;
    transform: translate(-50%, 0);
}
}

@media screen and (max-width: 800px) {
	.hero_text {
    width: 16em;  
}
	#streaming ul li {
    width: 22%;
}
}
/**/
@media screen and (max-width: 767px) {
  nav {
	width:100%;
  }
  nav .inner{
	margin-top:6em;
  }
  .open .toggle_btn span{
	background-color:#333!important;
}
}
#logos ul {
    align-items: center;
    flex-flow: row wrap;
}
#logos ul li {
    width: 7em;
}
#logos ul li a{
    display:block;
	width: 100%;
    height: 100%;
}
#top_news{
    margin-top: 8vh;
    margin-bottom: 15vh;
}
#streaming p{
	text-align:center;
	font-size:1.2em;
	font-family:initial;
}
#streaming p>span{
	display:block;
}
#streaming p span .strong{
	font-size:1.4em;
	font-weight:bold;
}
#streaming p{
	margin-bottom:0.2em;
}
@media screen and (max-width: 767px) {
#streaming p{
	font-size:1em;
}
}
/*1209*/
.copyright p span{
	display:block;
	font-family: "Potta One", system-ui;
    font-weight: 400;
    font-style: normal;
	text-align:center;
	font-size:1vw
}
@media screen and (max-width: 767px) {
.copyright p span{
	font-size:1.5vw
}
}
.top_left_arrow div{
	width:32px;
	height:32px;
}
.top_left_arrow{
	display:flex;
	justify-content: center;
	align-items:center;
	margin-top:8vh;
}
/*シングルページ*/
.single p{
	line-height:1.6em;
	margin-bottom:1em;
}
.single h3 {
    margin-top: 1.9em;
    margin-bottom: 1.9em;
    font-size: 1.32em;
}
.single h2{
	margin-top:1.7em;
	margin-bottom:1.7em;
}
.single h1{
	border-bottom: 1px solid #363636;
    padding-bottom: 4px;
	display: flex;
	flex-direction:column;
	margin-bottom: 1.4em;
	
}
.single h1 small{
	margin-bottom:6px;
	font-size:1rem;
	
}
/*直前*/
.hero_wrapper {
    margin-left:0; 
    justify-content: center;
    margin: 0 auto;
	top:43%;
}
	.hero_text {
	margin-left:0;
    top: 85%;
    width: 40em;
    left: 50%;
    transform: translate(-50%, 0);
}
.hero_wrapper .img_1 {
    position: absolute;
    width: 17vh;
    height: 17vh;
    left: calc(50% + 120px);
    top: 1.8%;
    animation: layer10_2 8s linear infinite both, flying 22s infinite both;
}