@charset "utf-8";

/* ベース */
html,body{
font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
line-height:1.5;
letter-spacing:1.5px;
height:100%;
background:url(../img/comic_bg.jpg) #000000 top center;
background-attachment:fixed;
}

#wrapper{
width:100%;
min-width:1260px;
}


/*////////////////////////////////////////////////////////////////////////////////////////*/
/* メイン */

#main02{
	width:1280px;
	height:1002px;
	margin-top:0px;
	margin-right:auto;
	margin-left:auto;
}


/* メインスライダー */
#main_slide{
	width:1280px;
	height:1002px;
	margin-top:0px;
	margin-right:auto;
	margin-left:auto;
	background:rgba(255,0,0,0.0);
	padding-top:0px;
}



/*////////////////////////////////////////////////////////////////////////////////////////*/
/* concept */

#concept{
width:1280px;
height:1529px;
margin-top:0px;
padding-top:0px;
margin-right:auto;
margin-left:auto;
background:url(../img/comic/concept.jpg) top center no-repeat;

}

/*////////////////////////////////////////////////////////////////////////////////////////*/
/* story */

#story{
width:1280px;
height:400px;
margin-top:0px;
padding-top:0px;
margin-bottom:0px;
margin-right:auto;
margin-left:auto;
background:url(../img/comic/story.png) top center no-repeat;
}

/* あらずじタイトル */
.story_title{
margin-top:-125px;
margin-left:0px;
}

/* リンク関連 */
#story_link a img{
display:block;
position:absolute;
}

.tachiyomi a img{
margin-top:15px;
margin-left:420px;

}

.kimilinktop{
margin-top:-250px;
margin-left:920px;
position:absolute;
}

.kimilinktop a img:hover {
    display: inline-block;
    animation: hurueru .1s  infinite;
}


.kimilink a img{
margin-top:-230px;
margin-left:850px;
}


.kimilink a img:hover {
    display: inline-block;
    animation: hurueru .1s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}


/* Wobble Vertical */
@keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }
  33.3% {
    transform: translateY(-6px);
  }
  49.95% {
    transform: translateY(4px);
  }
  66.6% {
    transform: translateY(-2px);
  }
  83.25% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}
.wobble-vertical {
  display: inline-block;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-vertical:hover {
  animation-name: wobble-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}


/*////////////////////////////////////////////////////////////////////////////////////////*/
/* character */

#character{
width:1280px;
height:809px;
margin-top:0px;
padding-top:0px;
margin-right:auto;
margin-left:auto;
z-index: 0;
}

.clink{
float: left;
}


#charaframe{
width:1280px;
height:299px;
margin-top:0px;
padding-top:0px;
margin-right:auto;
margin-left:auto;
z-index: 1000;
}

#charaframe img{
display:block;
position:absolute;
margin-top:-100px;
}



#chara_illust{
width:1280px;
height:4272px;
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
margin-right:auto;
margin-left:auto;
}

/* Float */
.float {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
z-index: 0;
}
.float:hover {
  transform: translateY(-2%);
z-index: 0;
}



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

#footer{
position: fixed; 
position:relative;
width:100%;
min-width:1260px;
padding-bottom:10px;
padding-top:10px;
z-index:1000;
margin-right:auto;
margin-left:auto;
background:url(../img/bg_footer.png) #000000 repeat-x top center;
}

#footer p{
color:#F2EEEE;
font-size:12px;
text-align:center;
letter-spacing:4px;
margin-bottom:20px;
}

#footer ul{
font-size:10px;
text-align:center;
letter-spacing:-.40em;
margin-bottom:15px;
}

#footer ul li{
display:inline-block;
vertical-align:middle;
letter-spacing:normal;
}



#footer li a:hover{
background:rgba(0,0,0,0.1);
}

#footer a:link{color:#fdd5a6;}
#footer a:visited{color:#fdd5a6;}
#footer a:hover{color:#FFF;}

#footer p a:hover{color:#FFF;}



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



#footer ul li{
display:inline-block;
vertical-align:middle;
letter-spacing:normal;
padding-top:30px;
padding-bottom:30px;
padding-left:40px;
}

#footer li a:hover{
background:rgba(0,0,0,0.1);
}

#footer a:link{color:#FFFFFF;}
#footer a:visited{color:#FFFFFF;}
#footer a:hover{color:#FFF;}

#footer p a:hover{color:#FFF;}