@charset "utf-8";

#index-if_header nav a[href*='system']{pointer-events: none;}
#index-if .title {margin: 0 auto 70px; text-align: center; position: relative; z-index: 1000;}




.noscroll .archives li {opacity: 0;}

@media screen and (min-width:641px){
/*

	PC STYLE

**************************************************************/
/*html.noscroll,body.noscroll {overflow: hidden; overflow-y: scroll; height: 100vh;}*/
#index-if #system::after{content: ''; background: rgba(0,115,202,0.6); width: 2800px; height: 1400px; position: fixed; left: 50%; top: 0; transform: rotate(-30deg); margin: -988px  0 0 -2380px; z-index:-10; transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}
#index-if #system::before{content: ''; background: rgba(0,115,202,0.6); width: 3800px; height: 1400px; position: fixed; right: 50%; bottom: -934px; transform: rotate(-30deg); margin: 489px -2804px 0 0; z-index: 0; transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}

#index-if_header nav a[href*='system']::after {opacity: 1; left: 0;}

	


#index-if .title {margin: 170px auto 70px; text-align: center; position: relative; z-index: 1000;}	
	
#index-if article {margin-top: 100px; z-index: auto;}
#index-if article h2 {height:105px; margin-bottom: 30px;}
#index-if article.sec01 h2 {background: url("/index-if/images/system/txt01.png") top center no-repeat; }
#index-if article.sec02 h2 {background: url("/index-if/images/system/txt02.png") top center no-repeat; }
#index-if article.sec03 h2 {background: url("/index-if/images/system/txt03.png") top center no-repeat; }
#index-if article.sec04 h2 {background: url("/index-if/images/system/txt04.png") top center no-repeat; }
#index-if article.sec05 h2 {background: url("/index-if/images/system/txt05.png") top center no-repeat; }

#index-if ul.modal {margin: 0 auto; width:1200px;text-align: center;}	
#index-if ul.modal li {width:380px; display: inline-block; position: relative;}	
#index-if ul.modal li + li{margin-left: 29px;}	
#index-if ul.modal li a img {display: inline-block; transition: 0.3s; width:380px;}
#index-if ul.modal li figure a img {width:1000px;}
#index-if ul.modal li a:hover img {filter: brightness(1.2);}	
	
#index-if .movie{margin: 0 auto; width:1020px;}
#index-if .movie a{display: inline-block; position: relative;}
#index-if .movie a::after{content: ''; background: url(/index-if/images/btn_play.png) center center / cover no-repeat; width: 100%; height: 92%; position: absolute; left: 0; top: 0; z-index: 10; transition: 0.3s;    background-size: 660px;}
#index-if .movie a:hover::after {transform: scale(1.1);}
#index-if .movie a img {display: inline-block; transition: 0.3s;}
#index-if .movie a:hover img {filter: brightness(1.2);}
.ie11 #index-if .movie a:hover img {opacity: 0.7;}

#index-if ul.modal li::after {content: ''; background:url(/index-if/images/system/plus.jpg) center center / cover; width: 36px; height: 36px; position: absolute; right: 0; bottom: 0; z-index: 10; background-size:36px; }
	
#index-if article.sec05 {height: 920px;}	
#index-if article.sec05 .chara{position: absolute; left: 50%; margin-left: -570px; top:100px;}	
#index-if article.sec05 .btn{position: absolute; left: 50%; margin-left: -182px; bottom: 260px;}	
#index-if article.sec05 .btn a img {transition: 0.3s;}
#index-if article.sec05 .btn a:hover img {filter: brightness(1.2);}
	

	
	
/*モーダル*/	
	
.modal figure{
  margin: 0;
  display: none;
}
.modal figure:target{
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
.modal figure:target #overlay{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  color: inherit;
}
.modal figure:target img{
  animation: fadein .3s;
}
#index-if ul.modal li figure a:hover img {filter:none;}
	
@keyframes fadein{
  0%{
    transform: scale(0.2);
    opacity: 0.2;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}
	
	
}
@media screen and (min-width:1201px) and (max-width:1920px){}
@media screen and (min-width:1921px){}
@media screen and (max-width:640px){
/*

	SP STYLE

**************************************************************/

html.noscroll,body.noscroll {overflow: hidden;}

#index-if_header nav a[href*='system'] i::after,
#index-if_header nav a[href*='system'] i::before {opacity: 1;}

#index-if #character { padding: calc(174/640*100vw) 0 calc(140/640*100vw);}
	

#index-if .title  {margin:calc(140/640*100vw) auto calc(50/640*100vw);}
#index-if .title img {height: calc(45/640*100vw); width: auto;}
	
#index-if article {margin-top: calc(80/640*100vw); z-index: auto;}
#index-if article h2 {height:calc(100/640*100vw); margin-bottom: calc(30/640*100vw); font-size: 0;}
#index-if article.sec01 h2 {background: url("/index-if/images/system/txt01-sp.png") top center no-repeat; }
#index-if article.sec02 h2 {background: url("/index-if/images/system/txt02-sp.png") top center no-repeat; }
#index-if article.sec03 h2 {background: url("/index-if/images/system/txt03-sp.png") top center no-repeat; }
#index-if article.sec04 h2 {background: url("/index-if/images/system/txt04-sp.png") top center no-repeat; }
#index-if article.sec05 h2 {background: url("/index-if/images/system/txt05-sp.png") top center no-repeat; }

#index-if ul.modal {margin: 0 auto; width:calc(580/640*100vw);text-align: center;}	
#index-if ul.modal li {width:calc(580/640*100vw); display: inline-block;margin-bottom:calc(20/640*100vw);}	
#index-if ul.modal li a img {display: inline-block; transition: 0.3s; width:calc(580/640*100vw);}
#index-if ul.modal li figure {display: none;}

#index-if article.sec05 .chara img{width:calc(760/640*100vw); margin-left: calc(-40/640*100vw); margin-top: calc(-20/640*100vw);}	
#index-if article.sec05 .btn{margin: calc(-150/640*100vw) auto calc(100/640*100vw); width:calc(386/640*100vw);}
	
.movie{margin: 0 auto; width:calc(580/640*100vw);}	
.movie img{width:calc(580/640*100vw);}	
.movie a{display: inline-block; position: relative;}	
.movie a::after{content: ''; background: url(/index-if/images/btn_play.png) center center / cover; width: 100%; height: 91%; position: absolute; left: 0; top: 0; z-index: 10; transition: 0.3s;}

}