@charset "UTF-8";

/* ------------------------------------------- CSS Information 
 Style Info:     ブラウザスタイルのリセット設定
----------------------------------------------------------- */  
html{overflow-y: scroll;} 
body,div,p,blockquote,pre,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,table,th,td,form,input,textarea,fieldset{margin: 0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;}
table{border-collapse: collapse;border-spacing: 0;}
caption, th{text-align: left;}   
img,abbr,acronym,fieldset{border: none;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
hr,legend{display: none;}
object,embed{vertical-align: top;} 

/* ------------------------------------------- CSS Information 
 Style Info:     基本設定
----------------------------------------------------------- */
html {
background-color: #000;
}
body {
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
color:#333333;
font-size:1.3em;
line-height:0;
text-align:center;
letter-spacing:0em;
overflow:hidden;
background-color: #000;
}
@media only screen and (max-width:640px){
body{font-size:1em;}
}

a:link{text-decoration:underline;color:#ffec47;}
a:visited{text-decoration:none;color:#ffec47;}
a:hover{text-decoration:underline;color:#ffec47;}
a:active{text-decoration:none;color:#ffec47;}
.b{font-weight:bold;}
.u{text-decoration:underline;}
.red{color:#f00;}
.yellow{color:#ff0}
.blue{color:#00f}




/*Animation*/
@-webkit-keyframes blink{
0%{opacity:0.1;}
100%{opacity:1;}
}
@-moz-keyframes blink{
0%{opacity:0.1;}
100%{opacity:1;}
}
@keyframes blink{
0%{opacity:0.1;}
100%{opacity:1;}
}
@-webkit-keyframes bounce {
0%,100%{-webkit-transform:scale(1.0)}
50%{-webkit-transform:scale(0.9)}
}
@-moz-keyframes bounce{
0%,100%{transform:scale(1.0)}
50%{transform:scale(0.9)}
}
@keyframes bounce{
0%,100%{transform:scale(1.0)}
50%{transform:scale(0.9)}
}


/*Responsive*/
.img{width:100%;max-width:960px;display:block;margin:0 auto;}
@media only screen and (max-width:640px){
.img{max-width:640px}
}


/*Style*/
.bg01 {
background:#000000 url(../img/bg_book.jpg) no-repeat center top;
background-size: contain;
}
.bg02 {
background:#000000 url(../img/bg_books.jpg) no-repeat center top;
background-size: cover;
}

.box {
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
}

.boxw {
width:100%;
margin:0 auto;
padding:0;
box-sizing:border-box;
position:relative;
max-width:960px;
}

.text {
max-width:780px;
background:rgba(0,0,0,0.7);
margin:0 auto;
padding:20px 40px;
text-align: left;
color:#fff;
line-height: 1.5em;
}

.alert {
-webkit-animation:blink 0.5s ease-in-out infinite alternate;
-moz-animation:blink 0.5s ease-in-out infinite alternate;
animation:blink 0.5s ease-in-out infinite alternate;
}

input[type="email"] {
width: 100%;
font-size:1.1em;
border-radius:5px;
text-align: left;
padding:20px 10px;
box-sizing: border-box;
}

.bounce {
margin:0 auto;
padding:0;
width:100%;
max-width:640px;
text-align:center;
-webkit-animation:bounce 1.0s ease-in-out infinite;
-moz-animation:bounce 1.0s ease-in-out infinite;
animation:bounce 1.0s ease-in-out infinite;
}


/*footer----------*/
footer{
margin:0;
padding:30px;
width:100%;
color:#f5f5f5;
background:#000000;
box-sizing:border-box;
}
address{
text-align:center;
font-size:12px;
line-height:20px;
padding:0;
}
@media only screen and (max-width:640px){
footer{padding:30px 10px;}
.sp_no{display:none;}
}

/* ------------------------------------------- CSS Information 
 Style Info:     アニメーション
----------------------------------------------------------- */
.sa{opacity:0;transition:all 1s ease;}
.sa.show{opacity:1;transform:none;}
.sa-lr{transform:translate(-100px, 0);}
.sa-rl{transform:translate(100px, 0);}
.sa-up{transform: translate(0, 100px);}
.sa-down{transform: translate(0, -100px);}