body {
    margin: 0;         /* 余白の削除 */
    padding: 0;        /* 余白の削除 */
    font-family: "メイリオ",sans-serif;
    color:#FFFFFF;
    background-image: url(../img/bg02.gif);
    background-repeat: repeat;
    line-height: 100%;
}

#main {
    margin: 0 auto; 
    z-index:0;           
    width: 1000px;                  
    background-color:#FFFFFF;
    color:#000000;
    font-size:12pt;
    box-shadow: 0 0 10px 0 #777;
}

#header {
    height:5px;
    background-color:#f73690;
}

#main_box {
    position: relative; 
    color:#FFFFFF;
    width: 1000px;  
}

#menu {
      padding-top: 240px;
      padding-left: 5px;
      padding-right: 5px;
      float : left ;
      width : 280px ;
      color:#000000;
      height: 757px;
      background-image: url(../img/bg01.gif);
      background-size:cover;

}

#main_window {
      float : left ;
      width : 710px ;
      height: 997px;
}

#main_window_intro {
      float : left ;
      width : 710px ;
      height: 997px;
      background-image: url(../img/intro_bg.jpg);
      background-size:cover;
}

#main_window_story {
      float : left ;
      width : 710px ;
      height: 997px;
      background-image: url(../img/story_bg.jpg);
      background-size:cover;
}

#main_window_chara {
      float : left ;
      width : 710px ;
      height: 997px;
      background-image: url();
      background-size:cover;
}

#main_window_special {
      float : left ;
      width : 710px ;
      height: 997px;
      background-image: url(../img/special.jpg);
      background-size:cover;
}

#main_window_store {
      float : left ;
      width : 710px ;
      height: 997px;
      background-image: url(../img/store_bg.jpg);
      background-size:cover;
}


.main_window_title {
      padding-top: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      text-align: right; 
      color:#000000;
      background: #e8619d;
      color:#FFFFFF;
      height:80px;
}

.title_text {
        float:right;
        font-size:12px;
        text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
	padding-bottom: 10px;
	border-bottom: 4px dotted #FFFFFF;
        width:500px;
        color: #FFFFFF;
        padding: 10px 10px;
  }

.title_text span {
	display: block;
	margin-bottom: 10px;
	color: #FFFFFF;
	font-size: 24px;
}


.main_window_text {
      text-align: right; 
      color:#000000;
      padding-top: 40px;
      padding-right:20px;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
      line-height: 150%;
}


#main_window_top {
      float : left ;
      width : 710px ;
      height: 997px;
      background-image: url(../img/key_img.jpg);
      background-size:cover;
}

.main_window_text_top {
      color:#000000;
      width : 710px ;
      padding-top: 450px;
      padding-left: 20px;
}

.main_spec_box {
    padding:20px;
      width : 350px ;
    border:#e8619d solid 2px; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    background-color: rgba( 255, 255, 255, 0.55 );
    color: #000000;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
    line-height: 120%;
    font-size:18px;

}



#footer {
    height:15px;
    background-color:#f73690;
    text-align: center;
    font-size: 11px;
}


.logo {
    position:absolute;
    top: 0px; 
    z-index: 2;
}


.btn03 {
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
    color: #fff;
    font-size: 17px;
    text-decoration: none;
    background: #e8619d;
    width: 210px;
    padding: 20px 30px;
    position: relative;
    overflow: hidden;
    text-align: center;
    display: block;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.btn03:hover {
    background-size: 100px 100px;
    background-position: right 50%;
    background-color: #36baea;
}
.btn03::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 30px;
    background: url("../img/icon.png") no-repeat 0 50%;
    background-size: 38px 38px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.btn03:hover::before {
    left: 200px;
    background-size: 80px 80px;
 
}
.btn03 span {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
 
}
.btn03:hover span {
    margin-left: -120px;
}



.btn04 {
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
    color: #fff;
    font-size: 17px;
    text-decoration: none;
    background: #d3d3d3;
    width: 210px;
    padding: 20px 30px;
    position: relative;
    overflow: hidden;
    text-align: center;
    display: block;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


.whats_new_box {
    position: relative;
    border-radius: 10px;    
    border:#e8619d solid 2px;    
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
    color: #000000;
    font-size: 13px;
    text-decoration: none;
    background: #FFFFFF;
    width: 265px;
}

.whats_new_title {   
	position: relative;
	padding-bottom: .5em;
	border-bottom: 4px solid #ccc;
        padding: 10px 10px;
}

.whats_new_title::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	z-index: 2;
	content: '';
	width: 20%;
	height: 4px;
	background-color: #e8619d;
}

.whats_new_main {   
	padding-bottom: .3em;
	border-bottom: 1px solid #ccc;
        color: #000000;
        background: #FFFFFF;
        padding: 0px 10px;
} 

.whats_new_main span {
	display: block;
	margin-bottom: .2em;
	color: #aaa;
	font-size: .8em;
}

a img:hover {
	opacity: 0.8 ;
	filter: alpha(opacity=50) ;	/* Ie用 */
}



@-webkit-keyframes typing {
    from { width: 0 }
    to { width:15em }
}

@-moz-keyframes typing {
    from { width: 0 }
    to { width:15em }
}

@-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: pink }
}

@-moz-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: pink }
}

.typing { 
font-weight: bold; 
   text-align: left;
    font-size:15pt;
    width:350px;
    white-space:nowrap;
    overflow:hidden;
    border-right: 10px solid black;
    padding-left:180px;
    
    -webkit-animation: typing 3s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1.5s step-end infinite;
    -moz-animation: typing 3s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1.5s step-end infinite;
}

ruby {
ruby-align: distribute-space;
ruby-overhang: auto;
ruby-position: above;
}

li {
  display: inline-block;
}

a{
    color: #1E90FF;
    text-decoration: none;
    position: relative;
    padding: 4px;
    transition: .3s;
}

a:hover { color: #ff819f; }