@charset "utf-8";

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p,
header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav {
margin:0;
padding: 0;
}

body {
margin:0px;
padding:0px;
color:#330000;
background-color: #e6e6fa;
line-height:1.8em;
font-size:1.05em;
}
ul {
margin:0px;
padding:0px;
list-style:none;
}
header {
text-align:center;
}
.headp {
text-align:center;
margin:10px 10px 0px 10px;
line-height:1.8em;
}
.headp2 {
text-align:left;
margin:0px 10px 20px 10px;
line-height:1.8em;
}
.headp3 {
text-align:center;
margin:10px;
opacity:0.9;
}
input[type="submit"] {
font-size:20px;
height: 80px;
line-height: 80px;
border: 1px solid #FFFFFF;
width: 90%;
color: #FFFFFF;
background-color: #8a2be2;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom:30px;
}
#sttr {
text-align:center;
margin:20px;
font-size:1.5em;
}
.css {
bottom: 0px;
position: fixed;
z-index: 1;
margin-left:0px;
padding:0px;
width:100%;
text-align:center;
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
.text1 {
text-align:center;
line-height:1.5;
margin:5px;
}
.text2 {
line-height:2;
margin:10px;
margin-top:20px;
}
.text3 {
line-height:1.6;
margin:5px;
text-align:center;
}
.text4 {
line-height:1.8em;
margin:5px;
margin-top:50px;
text-align:center;
color:#ff0000;
font-size:130%;
}
.text5 {
line-height:1.8em;
margin:5px;
text-align:left;
}
#textbox1 {
text-align:center;
border:6px inset #c71585;
margin:10px;
padding:10px;
}
.box1p {
font-weight:bold;
margin:20px 10px;
font-size:1.05em;
color:#dc143c;
}
.textbox{
 font-size:130%;
 margin:10px;
 text-align:center;
 color:#dc143c;
}
.textbox2{
margin:0px auto 20px auto;
text-align:center;
line-height:150%;
font-size:90%;
}
#segment p{
margin:10px;
font-weight:bold;
}
#segment {
text-aling:center;
display:box;
margin:10 auto 10 auto;
}
#segment2 p{
margin:10px;
font-weight:bold;
}
#segment2 {
text-aling:center;
display:box;
margin:10 auto 10 auto;
}
.sel{
border: 1px solid #deb887;
padding: 5px;
margin:3px;
height: 45px;
line-height: 45px;
width:22%;
color:#b8860b;
display:inline-block;
}
.sel2{
border: 1px solid #deb887;
padding: 5px;
margin:3px;
height: 45px;
line-height: 45px;
width:90%;
font-size:14px;
color:#b8860b;
}
.textbox3 {
text-align:center;
margin-top:20px;
border: 1px solid #ffb6c1;
padding:10px;
margin:10px;
background-color:#000066;
color:#ffffff;
}
#startbox {
text-align:center;
margin-bottom:40px;
}
.textbox3sum {
text-align:left;
line-height:1.8em;
padding:5px;
font-size:90%;
}
.textbox3title {
text-align:left;
margin-left:10px;
color:#fffacd;
margin:10px 0px;
}
#textbox4 p {
padding:10px;
line-height:150%;
}
#textbox4 img {
margin:10px 0px;
}
.textbox5sum {
text-align:left;
margin:10px 0px;
font-weight:bold;
}
#help p{
margin:0px;
display: block;
width: 100%;
padding:40px 0;
text-align:center;
color:#ffffff;
background-color:#696969;
}
#gaiyo ul li{
padding-left:10px;
margin:0;
height: 44px;
line-height: 44px;
border-top:1px solid #dcdcdc;
background-color:#696969;
}
#gaiyo ul li a{
display: block;
padding-left:3px;
text-decoration:none;
color:#ffffff;
font-size:90%
}
footer{
margin-top:30px;
text-align:center;
}
.chu {
font-size:80%;
text-align:left;
margin:15px;
}
.fuwafuwa {
animation-name:fuwafuwa;
animation-delay:0s;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite; 
} 
@keyframes fuwafuwa {
0% {
transform: translateY(0);
}
50% {
transform: translateY(5px);
}
100% {
transform: translateY(0);
}
}
#lis {
margin:10px;
}
div.animation_box {
padding: 10px;
margin-bottom:10px;
opacity: 0;
transform: translateY(-30px);
transition: 3.5s ease;
}
.anim {
margin-top:-60%;
}
#ranking {
background:#000066;
color:#ffffff;
padding-top:20px;
padding-bottom:20px;
margin-top:50px;
}
/*　headテキスト動き　*/
.bgextend{
animation-name:bgextendAnimeBase;
animation-duration:1s;
animation-fill-mode:forwards;
position: relative;
overflow: hidden;/*　はみ出た色要素を隠す　*/
opacity:0;
color:#ff0000;
font-size:1.1em;
}
@keyframes bgextendAnimeBase{
from {
 opacity:0;
}
to {
 opacity:1;  
}
}
/*中の要素*/
.bgappear{
animation-name:bgextendAnimeSecond;
animation-duration:5s;
animation-delay:0.6s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes bgextendAnimeSecond{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*左から右*/
.bgLRextend::before{
animation-name:bgLRextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: #ffff00;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}