/* common */
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap');
html{
	 overflow-y: scroll;
}

#loadingWrap {
   background-color:#fff;
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   text-align: center;
   display: table;
   z-index: 200;
}
#loadingIcon {
   display: table-cell;
   vertical-align: middle;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(8, 234, 232, 0.2);
  border-right: 1.1em solid rgba(8, 234, 232, 0.2);
  border-bottom: 1.1em solid rgba(8, 234, 232, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@media (min-width: 1280px) {
html{
	/*overflow-x: hidden;*/
}

}
h4 {
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 10px;
    line-height: 1.4;
    background: linear-gradient(to right, #46ebd5, #269eff);
    color: #fff;
    padding: 1px 4px 1px 3px;
    margin-bottom: 6px;
    width: 100px;
    text-align-last: justify;
    text-justify: inter-ideograph;
}
.new{
	position:absolute;
	z-index:10;
	top:-20px;
	left:-15px;
}
.newBg{
	position:absolute;
	top:0;
	left:0;
	animation: bgrotate 1s linear infinite;
}
.newTxt{
	position:relative;
	z-index:3;
}
body {
    font-family: 'Noto Sans JP', sans-serif, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    min-width: 1280px;
    width: 100%;
    background-image: url(../images/bg.png);
    background-repeat: repeat;
    background-size: 452px 452px;
	color: #1d1d1d;
}

a {
    color: #1cb7f7;
    text-decoration: none;
}
a:link {
    color: #1cb7f7;
}
a:visited {
    color: #1cb7f7;
}
a:hover {
    color: #20dec9;
}
.smalltxt{
	text-align:left;
	font-size:11px;
	line-height: 1.8;
}

#bgEffect{
width:100%;
height:100%;
position:fixed;
  margin:0 auto;
  background-color:transparent;
}
.container {
    width: 1188px;
    margin: auto auto;
    text-align: center;
}
.blackLink a {
    color: #1d1d1d;
    text-decoration: none;
}
.blackLink a :link {
    color: #1d1d1d;
}
.blackLink a :visited {
    color: #1d1d1d;
}
.blackLink a :hover {
    color: #20dec9;
}
/* header */
header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    min-width: 1280px;
    background-color: rgba(255,255,255,0.90);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
}
header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1188px;
    margin: 0 auto;
}
#logo {
    padding: 5px 0px;
	transition: filter 0.3s ease;
	filter:grayscale(100%);
}
#logo:hover{
    filter:grayscale(0%);
}

#globalNav {
    font-family: 'Roboto Condensed', sans-serif;
	font-size:18px;
    display: flex;
	position:relative;
}
#globalNav ul {
    display: flex;
	padding-top:5px;
}
#globalNav ul li a {
    display: block;
}
#globalNav .menu a {
    display: block;
    padding: 0 5px 5px 5px;
	margin:0px 5px;
    position: relative;
    text-decoration: none;
}
#globalNav .menu a::before, #globalNav .menu a::after {
    border-bottom: solid 2px #20dec9;
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    width: 0;
}
#globalNav .menu a::before {
    left: 50%;
}
#globalNav .menu a::after {
    right: 50%;
}
#globalNav .menu a:hover::before, #globalNav .menu a:hover::after {
    width: 50%;
}
#globalNav .menu a {
    color: #1d1d1d;
    text-decoration: none;
}
#globalNav .menu a:link {
    color: #1d1d1d;
}
#globalNav .menu a:visited {
    color: #1d1d1d;
}
#globalNav .menu a:hover {
    color: #1d1d1d;
}
#globalNav .menu .coming a{
	color:#bccbd3;
}
.trialTag{
	position:absolute;
	top:-15px ;
	left:383px;
}

#globalNav .sns a {
    padding: 0 5px 5px 5px;
}
#globalNav .menu .active::before, #globalNav .menu .active::after {
    border-bottom: solid 2px #20dec9;
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
    width: 50%;
}
#globalNav .menu .coming ::before, #globalNav .menu .coming ::after {
    border-bottom: none;
}

.heading_lv2{
	background-image: url(../images/h2_bg.png);
	background-position: center top;
	background-size:320px 129px;
	background-repeat: no-repeat;
	height:129px;
	padding-top:50px;
	margin:0 atuo;
	
	
}
.heading_lv2 .subTitle{
display: block;
	font-size:11px;
	}

.textSplitLoad {
    display: none;
	opacity: 0;
}
.split {
    visibility: hidden;
	
}
.news .heading_lv2{
	background-image: url(../images/h2_bg_none.png);

}
.movieIframe{
	box-shadow: 10px 10px 15px rgba(0,0,0,0.15);

}
/* mainVisual */
.mainVisual {
    height: 100vh;
    min-height: 800px;

}

/* main */
main {
    background-image: url(../images/bg_main_footer.png);
    background-size: 241px 126px;
    background-position: left bottom;
    background-repeat: no-repeat;
    padding: 0px 0px 120px 0px;

}
.contents {
    position: relative;
    overflow: hidden;
}
.bgMainHeader {
    position: absolute;
    top: -50px;
    right: -50px;
    z-index: -1;
    overflow: hidden;
}
h2 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 46px;
}
main .container {
    margin: auto;
}
/* mainvisual */
.mainVisual{
	position:relative;
	min-height: 1070px;
}

.mvIllust{
	background-image: url(../images/mv_illust.jpg);
    background-position: center top;
    background-size: cover;
width:100%;
height:100%;
}
.mainVisual .release{
	position:absolute;
	bottom:50px;
	right:50%;
	margin-right:-213px;
	
}
.mainVisual .mvLogo{
	position:absolute;
	top:60px;
	left:20px;
}
.mainVisual .mvProject{
	position:absolute;
	top:80px;
	right:20px;
}


.mainVisual .yoyaku {
	position:absolute;
	width:201px;
	height:201px;
	right:10px;
	bottom:20px;
	overflow: hidden;

}
.mainVisual .yoyaku .bg{
	position:absolute;
	top:0;
	left:0;
	animation: bgrotate 3s linear infinite;

}
 
@keyframes bgrotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.mainVisual .yoyaku .txt{
	position:relative;
	z-index:2;

}

/* topics */
.topics {
}
.bannerList {
	border-collapse: separate;
    border-spacing: 15px 15px;
	background-image: url(../images/bannerlist_bg.gif);
    background-repeat: repeat;
    background-position: 7px 7px;
    background-size: 391px 235px;
}
.bannerList td{
	padding:8px;
	background-image: url(../images/bannerlist_frame.png);
	background-size: 376px 219px;
	background-repeat: no-repeat;
	position:relative;
}
.bannerList .banner{
	height:203px;
	width:360px;
	transition: filter 0.3s ease;
  filter: brightness(
    1); 
}
.bannerList .banner img{
	height:203px;
	width:360px;
	transition: filter 0.3s ease;
  filter: brightness(
    1); 
}
.bannerList .banner:hover{
	height:203px;
	width:360px;
	filter: brightness(1.1);
}

/* movie */
.movie{margin-top:50px;}
.movie .container {
    padding: 50px 0;
	position:relative;
}
.movie h2{
	position:absolute;
	left:40px;
	top:50px;
}
.cssObject{
	transform:skew(-45deg);
	position:absolute;

}
.movie .object01{
	height:500px;
	width:1000px;
	background:linear-gradient(-45deg, #0fbef6, #0fbef6, #46ebd5);
	left:50%;
	top:-20px;

}
.movie .object02{
	height:200px;
	width:1000px;
	background:linear-gradient(45deg, #0fbef6, #0fbef6, #46ebd5);
right:50%;
	bottom:-20px;
	margin-right:200px;
}

.movieArea{
	position:relative;
	z-index:10;
}
/* news */
.news{

}
/* news iframe */
.newsArea{
	width:1000px;
	margin:0 auto;
}
.newsArea dl{
	display: flex;
	border-bottom: solid 1px #d3dde2;
	padding:25px 0px;
}
.newsArea dt{
	font-weight: 700;
	padding:0px 30px;
	background-image: url(../images/news_header_icon.png);
	background-position: 4px 8px;
	background-repeat: no-repeat;
	background-size:10px 10px;
	width:140px;
	line-height: 1.5;
	
}
.newsArea dd{
line-height: 1.5;
text-align: left;
	
}
/* footer */
#pageTop{
	position:fixed;
	bottom:5px;
	right:20px;
}
footer {
    font-family: 'Roboto Condensed', sans-serif;
    padding: 15px 0px;
    border-top: solid 1px #cdd8de;
    background: #fff;
	position:relative;
	z-index:100;
}
footer .container{
	text-align:left;
}
footer .sns {
    display: flex;
}
footer .sns li {
    padding: 0 5px 2px 5px;
}
footer .sns li:first-child {
	padding: 0 5px 2px 0px;}
small {
    font-size: 9px;
}

/* animation SLIDEBG */

@keyframes slideBg{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 101%;
		width: 0;
	}
}

@keyframes slideTxt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
 
/* css */

.slideEffect .slideBg {
	position: relative;
	display: inline-block;
	transform: translate3d(0, 0, 0);
}
.slideEffect .slideBg:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #46ebd5;

}
.slideEffect .slideTxt {
	opacity: 0;
	transform: translate3d(0, 0, 0);
	line-height: 1.5;
	margin-bottom:5px;
	
	

}
.slideEffect.move .slideBg:before {
	animation: slideBg .5s ease 0s 1 normal forwards;
}
.slideEffect.move .slideTxt {
	animation: slideTxt 0s ease .25s 1 normal forwards;
}

.slideEffectS .slideBg {
	position: relative;
	display: inline-block;
	transform: translate3d(0, 0, 0);
}
.slideEffectS .slideBg:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #46ebd5;

}
.slideEffectS .slideTxt {
	opacity: 0;
	transform: translate3d(0, 0, 0);
	line-height: 1.5;
	margin-bottom:5px;
	
	

}
.slideEffectS.move .slideBg:before {
	animation: slideBg .5s ease 0s 1 normal forwards;
}
.slideEffectS.move .slideTxt {
	animation: slideTxt 0s ease .25s 1 normal forwards;
}



.frameBox{
	background-image: url(../images/frame_box_header.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size:1188px 89px;
	padding-top:89px;
	
}
.frameBoxContents{
	background-image: url(../images/frame_box_contents.png);
	background-repeat: repeat;
	background-position: center center;
	background-size:1188px 6px;
	padding:0 50px;
}
.frameBoxFooter{
	background-image: url(../images/frame_box_footer.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size:1188px 89px;
	padding-bottom:89px;
	
}
h3 + .frameBox{margin-top:-60px;}
h3 + .frameBox{margin-bottom:80px;}

.txtList{
	width:900px;
	margin:0 auto;
}
.txtList dl{
	display: flex;
	align-items: center;
	border-bottom: solid 1px #d3dde2;
	padding:10px 0px;
	text-align: left;
	line-height: 2;
}
.txtList dt{
	font-weight: 700;
	width:210px;
}

.blink{
		animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
	}
@keyframes blink {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  44% {
    opacity: .85;
  }
  48% {
    opacity: .4;
  }
  52% {
    opacity: .85;
  }
  56% {
    opacity: .4;
  }
  60% {
    opacity: .85;
  }
  100% {
    opacity: 1;
  }
}
 @keyframes fadeLeft {
 0% {
opacity: 0;
transform: translate3d(-30px, 0, 0);
}
 100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeLeft{
	animation-name: fadeLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

.fadeLeftBg{
	animation-name: fadeLeft;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}