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

body.main{
	font-family: メイリオ , "ＭＳ Ｐゴシック",sans-serif;
	background-color : black;
	text-align: center;
	font-size: 15px;
	margin:0;
	padding:0;
	background-image: url("image/top-haikei.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment : fixed;
	background-size: cover;
}

div.topmain{
	margin:0;
	padding:0;
	background-image: url("image/top-haikei1.png");
	background-color : black;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment : fixed;
	background-size: cover;
}

div.aftmain{
	margin:0;
	padding:0;
	background-image: url("image/top-haikei1.png");
	background-color : black;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment : fixed;
	background-size: cover;
}

div.zentai{
	font-family: メイリオ , "ＭＳ Ｐゴシック",sans-serif;
	font-size: 15px;
	margin:0;
	padding:0;
	background-image: url("image/kabe_3.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment : fixed;
	background-size: cover;
}

a:hover img.hoverimg{
opacity:0.6;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
}

.link:hover img {
position:relative;
top:3px;
}


div#floating-menu{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 999;
    background-image: url('image/HP-haikei-menyu.png');
/*    background: rgba(255, 118, 176, 0.9);	*/
/*     background: rgba(246, 191, 66, 0.9);	*/
    white-space:nowrap;
}


/* 常にアニメ */
@keyframes horizontal {
    0% { transform:translateY( -3px); }
  100% { transform:translateY(  0px); }
}

@-webkit-keyframe horizontal { 
  0%   { -webkit-transform:translateY( -3px); } 
  100%  { -webkit-transform:translateY(  0px); }
}

p.anime {
  animation: horizontal 1s ease-in-out infinite alternate;
}
/* 常にアニメここまで */


 /* バーアニメ */
.bar_ani{ 
  animation: bar_tra 1s ease-out 0s 1 normal; 
  -webkit-animation: bar_tra 1s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes bar_tra { 
  0%   { transform:  translate(50px, 0px); opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes bar_tra { 
  0%   { -webkit-transform:  translate(50px, 0px); opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 

/* アニメレイヤー部分 */
.bar_bg {
    position: relative;
    width: 717px;
    height: 69px;
}

.bar_aniimage {
    position: absolute;
    right: 0px;
    top: 0px;
}
 /* バーアニメ ここまで*/

/* 全体フェード */

.zenf{ 
  animation: zenf0 2s ease-out 0s 1 normal; 
  -webkit-animation: zenf0 2s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes zenf0 { 
  0%   { transform:  translate(0px, 0px); opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes zenf0 { 
  0%   { -webkit-transform:  translate(0px, 0px); opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 
/* 全体フェード　ここまで */

/* あらすじアニメ */

.ara_ani0{ 
  animation: ara0 3s ease-out 0s 1 normal; 
  -webkit-animation: ara0 3s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes ara0 { 
  0%   { transform:  translate(0px, 0px); opacity: 0;  } 
  20%   { transform:  translate(0px, 0px); opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes ara0 { 
  0%   { -webkit-transform:  translate(0px, 0px); opacity: 0;  } 
  20%   { transform:  translate(0px, 0px); opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 


.ara_ani1{ 
 @media screen and (min-width:480px){
  animation: ara1 1s ease-out 0s 1 normal; 
  -webkit-animation: ara1 1s ease 0s 1 normal; /* Safari & Chrome */
  }
}  

@keyframes ara1 { 
  0%   { transform:  translate(0px, 50px); opacity: 0;  } 
  50%   { transform:  translate(0px, 50px); opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes ara1 { 
  0%   { -webkit-transform:  translate(0px, 50px); opacity: 0;  } 
  50%   { -webkit-transform:  translate(0px, 50px); opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 


.ara_ani2{ 
  animation: ara2 1.5s ease-out 0s 1 normal; 
  -webkit-animation: ara2 1.5s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes ara2 { 
  0%   { transform:  scale(2,2); opacity: 0;  } 
  80%   { transform:  scale(2,2); opacity: 0;  } 
  100%  { transform:  scale(1,1); opacity: 1;  } 

} 
@-webkit-keyframes ara2 { 
  0%   { -webkit-transform:  scale(2,2); opacity: 0;  } 
  80%   { -webkit-transform:  scale(2,2); opacity: 0;  } 
  100%  { -webkit-transform:  scale(1, 1); opacity: 1;  } 
} 

.ara_ani3{ 
  animation: ara3 3s ease-out 0s 1 normal; 
  -webkit-animation: ara3 3s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes ara3 { 
  0%   { transform:  translate(0px, 50px); opacity: 0;  } 
  70%   { transform:  translate(0px, 50px); opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes ara3 { 
  0%   { -webkit-transform:  translate(0px, 50px); opacity: 0;  } 
  70%   { -webkit-transform:  translate(0px, 50px); opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 

.ara_ani4{ 
  animation: ara4 4.3s ease-out 0s 1 normal; 
  -webkit-animation: ara4 4.3s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes ara4 { 
  0%   { transform:  translate(0px, 50px); opacity: 0;  } 
  60%   { transform:  translate(0px, 50px); opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes ara4 { 
  0%   { -webkit-transform:  translate(0px, 50px); opacity: 0;  } 
  60%   { -webkit-transform:  translate(0px, 50px); opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 

.ara_ani5{ 
  animation: ara5 5s ease-out 0s 1 normal; 
  -webkit-animation: ara5 5s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes ara5 { 
  0%   { transform:  scale(0, 0); opacity: 0;  } 
  87%   { transform:  scale(0, 0); opacity: 0;  } 
  93%   { transform:  scale(1.07, 1.07); opacity: 1;  } 
  97%   { transform:  scale(1.13, 1.13); opacity: 1;  } 
  100%  { transform:  scale(1, 1); opacity: 1;  } 

} 
@-webkit-keyframes ara5 { 
  0%   { -webkit-transform:  translate(0px, 50px); opacity: 0;  } 
  70%   { -webkit-transform:  translate(0px, 50px); opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 



@charset "UTF-8";
#modal-content {
	width: 50% ;
	margin: 0 ;
	padding: 10px 20px ;
	border: 2px solid #ffffff00 ;
	background: #ffffff00 ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
}
  
#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.button-link {
	color: #00f ;
	text-decoration: underline ;
}
 
.button-link:hover {
	cursor: pointer ;
	color: #f00 ;
}


/* アニメレイヤー部分 */
.ara_bg {
 @media screen and (min-width:480px){
  position: relative;
  width: 1437px;
 }  
}

.ara_image1 {
    position: absolute;
    right: 0px;
    top: 0px;
}
.ara_image2 {
    position: absolute;
    right: 0px;
    top: 0px;
}
.ara_image3 {
    position: absolute;
    right: 0px;
    top: 0px;
}
.ara_image4 {
    position: absolute;
    right: 0px;
    top: 0px;
}
 /* あらすじアニメ ここまで*/
 
 
 /* キャラアイコン */
.aicon1{ 
  animation: icon1 1s ease-out 0s 1 normal; 
  -webkit-animation: icon1 1s ease 0s 1 normal; /* Safari & Chrome */}  

@keyframes icon1 { 
  0%   { transform:  translate(0px, 20px) rotateY(120deg) ; opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes icon1 { 
  0%   { -webkit-transform:  translate(0px, 20px) rotateY(120deg) ; opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 

.aicon2{ 
  animation: icon2 1.5s ease-out 0s 1 normal; 
  -webkit-animation: icon2 1.5s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes icon2 { 
  0%   { transform:  translate(0px, 20px) rotateY(120deg) ; opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes icon2 { 
  0%   { -webkit-transform:  translate(0px, 20px) rotateY(120deg) ; opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 

.aicon3{ 
  animation: icon3 1.8s ease-out 0s 1 normal; 
  -webkit-animation: icon3 1.8s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes icon3 { 
  0%   { transform:  translate(0px, 20px) rotateY(120deg) ; opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes icon3 { 
  0%   { -webkit-transform:  translate(0px, 20px) rotateY(120deg) ; opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 

.aicon4{ 
  animation: icon4 2.2s ease-out 0s 1 normal; 
  -webkit-animation: icon4 2.2s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes icon4 { 
  0%   { transform:  translate(0px, 20px) rotateY(120deg) ; opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes icon4 { 
  0%   { -webkit-transform:  translate(0px, 20px) rotateY(120deg) ; opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 

.aicon5{ 
  animation: icon5 2.5s ease-out 0s 1 normal; 
  -webkit-animation: icon5 2.5s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes icon5 { 
  0%   { transform:  translate(0px, 20px) rotateY(120deg) ; opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes icon5 { 
  0%   { -webkit-transform:  translate(0px, 20px) rotateY(120deg) ; opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 

.aicon6{ 
  animation: icon6 2.7s ease-out 0s 1 normal; 
  -webkit-animation: icon6 2.7s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes icon6 { 
  0%   { transform:  translate(0px, 20px) rotateY(120deg) ; opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes icon6 { 
  0%   { -webkit-transform:  translate(0px, 20px) rotateY(120deg) ; opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 

 /* キャラアイコン　ここまで */

 /* キャラ紹介 */

.chaani0 { 
position: absolute;
}  

.chaani1 { 
position: absolute;
  animation: chaa1 1.5s ease-out 0s 1 normal; 
  -webkit-animation: chaa1 1.5s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes chaa1 { 
  0%   { transform:  translate(-20px, 0px); opacity: 0;  } 
  50%   { transform:  translate(-20px, 0px); opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes chaa1 { 
  0%   { -webkit-transform:  translate(-20px, 0px); opacity: 0;  } 
  50%   { -webkit-transform:  translate(-20px, 0px); opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 

.chaani2 { 
position: absolute;
  animation: chaa2 1s ease-out 0s 1 normal; 
  -webkit-animation: chaa2 1s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes chaa2 { 
  0%   { transform:  translate(0px, 50px); opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes chaa2 { 
  0%   { -webkit-transform:  translate(0px, 50px); opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 


.chaani3 { 
position: absolute;
  animation: chaa3 1s ease-out 0s 1 normal; 
  -webkit-animation: chaa3 1s ease 0s 1 normal; /* Safari & Chrome */
}  

@keyframes chaa3 { 
  0%   { transform:  translate(40px, 0px); opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes chaa3 { 
  0%   { -webkit-transform:  translate(40px, 0px); opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 

.chaani5 { 
position: absolute;
  animation: chaa2 1s ease-out 0s 1 normal; 
  -webkit-animation: chaa2 1s ease 0s 1 normal; /* Safari & Chrome */
} 



 /* アニメレイヤー部分 */
.cha0 {
    position: relative;
    width: 1580px;
    height: 935px;
    overflow: hidden
}

.cha10 {
    position: relative;
    width: 1580px;
    height:3000px;
    overflow: hidden
}

.cha1 {
    position: absolute;
    left: 0px;
    top: 0px;
}
.cha2 {
    position: absolute;
    left: 0px;
    top: 0px;
}
.cha3 {
    position: absolute;
    left: 0px;
    top: 0px;
}
.cha4 {
    position: absolute;
    left: 0px;
    top: 0px;
  animation: chaa4 1.7s ease-out 0s 1 normal; 
  -webkit-animation: chaa4 1.7s ease-out 0s 1 normal; /* Safari & Chrome */
}  

@keyframes chaa4 { 
  0%   { transform:  translate(100px, -30px); opacity: 0;  } 
  70%   { transform:  translate(100px, -30px); opacity: 0;  } 
  100%  { transform:  translate(0px, 0px); opacity: 1;  } 

} 
@-webkit-keyframes chaa4 { 
  0%   { -webkit-transform:  translate(100px, -30px); opacity: 0;  } 
  70%   { -webkit-transform:  translate(100px, -30px); opacity: 0;  } 
  100%  { -webkit-transform:  translate(0px, 0px); opacity: 1;  } 
} 


*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_cssslider {
width: 100%;
max-width:1200px;
padding-top: 0px; /* 画像の高さ */
position: relative;
margin: 2em auto;
text-align: center;
}
.cp_cssslider > img {
position: absolute;
width: 100%;
max-width:1200px;
left: 0;
top: 200;
transition: all 0.5s;
border-radius: 3px;
box-shadow:0px 0px 5px 0px rgba(0,0,0,0);
}
.cp_cssslider input[name='cp_switch'] {
display: none;
}
/* サムネイル */
.cp_cssslider label {
margin: 15px 5px 0 5px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
transition: all 0.5s ease;
opacity: 0.6;
border-radius: 3px;
}
.cp_cssslider label:hover {
opacity: 0.9;
}
.cp_cssslider label img {
display: block;
width: 19%;
border-radius: 2px;
}
.cp_cssslider input[name='cp_switch']:checked + label {
border: 2px solid #FF7043;
opacity: 1;
}
.cp_cssslider input[name='cp_switch'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch']:checked + label + img {
opacity: 1;
}
 /* キャラ紹介 ここまで*/


.tes:hover{
animation: test 2s ease-out 0s 2 normal; 
  -webkit-animation: test 2s ease-out 0s 2 normal; /* Safari & Chrome */
}  

@keyframes test { 
  0%   { transform:   rotateY(360deg);} 
  100%  { transform:   rotateY(0deg);  } 

} 
@-webkit-keyframes test { 
  0%   { -webkit-transform:  rotateY(360deg);} 
  100%  { -webkit-transform:  rotateY(0deg);  } 
} 

.tokbox{   /* 特典部分 */
    width: 1250px;
    padding: 0.8em 1em;
    margin: 2em 0;
    background: #ffffff;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
    border-radius: 5px;
    display: inline-block;
    _display: inline;
}


.hr2 {
  background-color: #fff;
  border-top: 2px dotted #bbb;
  width: 900px;
}