@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Niconne');

* {
padding:0;
margin:0;
width:100%;
}


body{
background:url("image/bg.jpg");
font-family: 'Noto Sans Japanese', "���C���I", Meiryo, sans-serif;
background-color:#fff;
font-size:16px;
background-attachment: fixed;
background-position: left middle;
overflow-x: hidden;
background-size: cover;
min-width:1024px;
}


a,
a:hover,
a:visited{
color:#666;
text-decoration:none;
}



ul{
list-style:none;
margin:0;
}

p{
font-size:16px;
margin:0;
padding:5px;
line-height:1.8em;
font-weight:300;
letter-spacing:1px;
}

div.defo{
width:500px;
text-align:left;
margin:20px auto;
}

#mailf{
width:650px;
margin:0 auto;
text-align:left;
}

.form{
text-align:left;
}

#tuhan{
text-align:center;
}


#movie{
text-align:center;
margin:20px auto;
}

.movie_pc{
display:block;
}

.movie_sp{
display:none;
}

.movie_sp_m{
display:none;
}


#header{
text-align:center;
padding:0;
position:absolute;
z-index:111;
}


#logo{
margin:20px 50px 0 50px;
}

.re_banner{
text-align:center;
margin:0 auto 0 auto;
}


h1{
text-align:right;
padding:0;
font-weight:200;
font-size:10px;
letter-spacing:5px;
color:#000;
}

img#header-p{
text-align:center;
width:50%;
margin:0;
}

#wrapper{
position: fixed;
bottom:10px;
right:10px;
}

#wrapper ul{
z-index:999;
}

#wrapper li{
float:none;
margin:5px 10px 0 10px;
padding:0;
text-align:right;
}

#contents{
width:100%;
}


#container{
background: rgba(255,255,255,0.8);
margin:0 auto;
width:900px;
height:100%;
color:#000;
text-align:center;
position:relative;
z-index:0;
padding:0;
box-shadow: 0 0 12px #000;
}


#container h2{
font-family: 'Niconne', cursive;
font-weight:200;
font-size:55px;
clear:both;
z-index:999999;
}

#container h2.story{
margin:50px 0 0 0;
color:#000;
}

#container h2.character{
margin:50px 0 0 0;
color:#000;
}

#container h2.Info{
left:25%;
right:25%;
color:#000;
}

#container h2.staff{
right:25%;
color:#000;
}

#container h2.link-h{
left:25%;
color:#000;
}

#container h2 .material{
left:25%;
right:25%;
color:#000;
}

#container h3{
padding:5px 0 2px 15px;
margin-bottom:5px;
letter-spacing:1px;
clear:both;
}

div#mainimg{
max-width:900px;
margin:0 auto;
}

div.character{
width:800px;
margin:0 auto;
}

#img_left {
float:left;
margin:0 10px 20px 28px;
width:260px;
}

#img_left_ja {
float:left;
margin:0 30px 20px 28px;
border:solid 1px #000;
}

.imgleft {
margin:0 15px 20px 15px;
padding:10px;
overflow:auto;
text-align:left;
}


.clear {
clear: both;
}

img.main{
width:100%;
z-index:222;
left:0;
margin:0;
padding:0;
}

img.logo{
z-index:22223;
width:55%;
top:35px;
left:20px;
position:absolute;
}


#story{
background:url("image/story.png") center top;
width:100%;
height:400px;
text-align:center;
margin:0;
}

.story-p{
margin:0 auto;
text-shadow:
#fff 2px 0px,  #fff -2px 0px,
#fff 0px -2px, #fff 0px 2px,
#fff 2px 2px , #fff -2px 2px,
#fff 2px -2px, #fff -2px -2px,
#fff 1px 2px,  #fff -1px 2px,
#fff 1px -2px, #fff -1px -2px,
#fff 2px 1px,  #fff -2px 1px,
#fff 2px -1px, #fff -2px -1px;
}

p#story-first{
margin:0 0 35px 15px;
text-align:left;
padding:40px 0 0 0;
}

p#story-last{
text-align:right;
margin:35px 15px 0 0;
}

#character{
margin:0 auto;
max-width: 900px;
height:500px;
padding: 0 10px;
}

.character-p{
width:900px;
padding:20px 10px 10px 10px;
}



#Info{
width:900px;
height:1500px;
margin:0 auto 20px auto;
padding: 0 10px;
}

.Info-p{
padding:70px 10px 10px 10px;
}

#Info p img.one{
width:500px;
height:100px;
}

#staff{
width:900px;
height:400px;
padding: 0 10px;
text-align:left;
}

.staff-p{
margin:0 25% 250px 25%;
}

.staff-p a,
a:hover,
a:visited{
border-bottom:solid 1px ;
}

.banner{
margin:2px;
width:600px;
height:120px;
}

.h_banner{
margin:0 0 0 6%;
}

#link{
text-align:left;
font-size:14px;
margin:20px 0 0 0;
}

.link-p{
letter-spacing:2px;
margin:0 25% 5% 25%;
}


.link-p img{
margin:15px 0 2px 0;
}

.link-p img.one{
width:500px;
height:100px;
}

.link-p img.two{
width:400px;
height:80px;
}

.link-p img.thr{
width:200px;
height:40px;
}
p.credit{
margin:30px 0;
}

.button {
  position: absolute;
  width:100px;
  height:50px;
  padding: 10px;
  background-color: #fff;
  margin:0;
  border: 1px solid #282828;
  border-radius: 2px;
  cursor: pointer;]
  right: 0;
  top: 0;
}

.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}

.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.button:a {
color:#fff;
}

.button:visited {
color:#fff;
}

.button:hover {
color:#9a7563;
background-color: #fff;
}

div#footer-b{
text-align:center;
padding:25px 0;
}

div#footer{
font-size:14px;
letter-spacing:2px;
padding:5px 0;
}

@media (max-width:480px) {

body{
background:url("image/bg_sp.jpg");
background-repeat:no-repeat;
background-size: cover;
overflow-x: hidden;
min-width:100%;
}

#container{
width:900px;
margin:0 45%;
}

#staff{
width:900px;
height:400px;
padding: 0 10px;
text-align:left;
font-size:20px;
}



}