@charset "utf-8";


@media screen and (min-width: 780px) {

body{
overflow: scroll;
}

#sub_menu {
position: fixed;
top: 200px;
left: 10px;
}
#topcont {
clear: both;
width: 100%;
height: auto;
marign: 0px auto 0px auto;
background-color: #000000;
text-align: center;
}
#story01 {
margin-left:auto;
margin-right:auto;
width: 100%;
height: 590px;
background-color:#000000;
background-image: url(../images/story01.jpg);
background-repeat: no-repeat;
background-position: center top;
padding: 0px 0px 0px 0px;
background-size: contain;
text-align: center;
}

#story01 a{
text-decoration: none;
color: #ffffff;
}

#story01 table {
width: 950px;
height: auto;
margin: 0px auto 0px auto;
padding-top: 270px;
border: 0;
}
#story01 td.west {
width: 591px;
height:auto;
}
#story01 td.east {
width: 359px;
height:auto;
}
#story01_5 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:99px;
background-color:#000000;
background-image: url(../images/story01_5back.jpg);
background-repeat: repeat;
background-position: center top;
padding: 0px 0px 0px 0px;
}
#story02 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:702px;
background-color:#848484;
background-image: url(../images/story02.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding: 0;
text-align :center;
}
#story02 h1 {
margin: 0;
padding: 100px 0px;
color: #ffffff;
text-align: center;
font-size: 22px;
font-family: serif,times;
line-height: 26px;
text-shadow: 1px 2px 3px #333333;
}
#wordbox02 {
width: 500px;
height: auto;
margin: 0px 0px 0px 36%;
padding: 150px 0px 0px 0px;
border: 0;
color: #ffffff;
font-size: 12px;
text-align: left;
text-shadow: 1px 2px 3px #333333;
}
#story03 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:711px;
background-color:#000000;
background-image: url(../images/story03.jpg);
background-repeat: no-repeat;
background-position: center top;
padding: 0;
}
#story03 h1 {
margin: 0px 0px 0px 12%;
padding: 20px 10%;
color: #ffffff;
text-align: left;
font-size: 22px;
font-family: serif,times;
line-height: 26px;
text-shadow: 1px 2px 3px #333333;
}
#story03 table{
width: 800px;
height: auto;
margin: 400px auto 0px auto;
padding: 0;
border: 0;
border-radius: 10px;
background-color: rgba(0,0,0,0.5);
}
#story03 td {
width: auto;
height: auto;
margin: 0;
padding: 8px;
border: 0;
color: #ffffff;
font-size: 12px;
vertical-align: top;
}

#story04 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:770px;
background-color:#ffffff;
background-image: url(../images/story04.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding: 0;
}

#story04 img{
display: none; 
}


#story04 h1 {
margin: 0px 0px 0px 10%;
padding: 20px 10%;
color: #000000;
text-align: left;
font-size: 22px;
font-family: serif,times;
line-height: 26px;
}
#story04 h2 {
margin: 0px 0px 0px 10%;
padding: 10px 10%;
color: #000000;
text-align: left;
font-size: 20px;
font-family: serif,times;
font-weight: 300;
line-height: 26px;
}

#story04 table{
width: 550px;
height: auto;
margin: 300px 0px 100px 20%;
padding: 0;
border: 0;
background: rgba(255,255,255, 0.7);
}
#story04 td {
width: auto;
height: auto;
border: 0;
color: #000000;
font-size: 12px;
vertical-align: top;
}

#story05{
margin-left:auto;
margin-right:auto;
width: 100%;
height:710px;
background-color:#000000;
background-image: url(../images/story05.jpg);
background-repeat: no-repeat;
background-position: center top;
padding: 0;
}

#story05 img{
display: none;
}

#story05 h1 {
margin: 0px 0px 0px 10%;
padding: 20px 10%;
color: #ffffff;
text-align: left;
font-size: 22px;
font-family: serif,times;
line-height: 26px;
text-shadow: 1px 2px 3px #333333;
}

#wordbox05 {
width: 440px;
height: auto;
margin: 360px 0px 0px 50%;
padding: 8px;
border: 0;
color: #ffffff;
text-align: left;
font-size: 12px;
line-height: 18px;
}

#story06{
margin-left:auto;
margin-right:auto;
width: 100%;
height:670px;
background-color:#000000;
background-image: url(../images/story06.jpg);
background-repeat: no-repeat;
background-position: center top;
padding: 0;
}

#story06 h1 {
margin: 20px 0px 0px 16%;
padding: 20px 10%;
color: #ffffff;
text-align: left;
font-size: 22px;
font-family: serif,times;
font-weight: 400;
line-height: 28px;
text-shadow: 1px 2px 8px #333333;
}

#wordbox06 {
width: 400px;
height: auto;
margin: 250px 0px 0px 50%;
padding: 8px;
border: 0;
color: #ffffff;
text-align: left;
font-size: 12px;
line-height: 18px;
background-color: rgba(0,0,0,0.6);
}

#story07{
clear: both;
margin: 0px auto 0px auto;
width: 100%;
height: 712px;
background-color:#000000;
background-image: url(../images/story07.jpg);
background-repeat: no-repeat;
background-position: center top;
padding: 20px;
}

#story07 h1 {
width: 52%;
margin: 20px 0px 0px 0px;
padding: 20px 0px 20px 23%;
color: #ffffff;
text-align: left;
font-size: 22px;
font-family: serif,times;
font-weight: 400;
line-height: 28px;
text-shadow: 1px 2px 8px #333333;
background-color: rgba(0,0,0,0.6);
}

#wordbox07 {
width: 400px;
height: auto;
margin: 300px 0px 40px 50%;
padding: 8px ;
border: 0;
color: #ffffff;
text-align: left;
font-size: 12px;
line-height: 18px;
background-color: rgba(0,0,0,0.6);
}

#story08{
margin-left:auto;
margin-right:auto;
width: 100%;
height:709px;
background-color:#a8b0b7;
background-image: url(../images/story08.jpg);
background-repeat: no-repeat;
background-position: center top;
padding: 10px;
}

#story08 h1 {
width: 52%;
margin: 20px 0px 0px 0px;
padding: 20px 0px 20px 10%;
color: #ffffff;
text-align: left;
font-size: 22px;
font-family: serif,times;
font-weight: 400;
line-height: 28px;
text-shadow: 1px 2px 8px #333333;
}

#story08 table{
width: 800px;
height: auto;
margin: 400px auto 100px auto;
padding: 0;
border: 0;
}

#story08 td {
width: 350px;
height: auto;
margin: 0;
padding: 8px;
border: 0;
color: #000000;
font-size: 12px;
text-align: left;
vertical-align: top;
}

#story09{
margin-left:auto;
margin-right:auto;
width: 100%;
height:710px;
background-color:#000000;
background-image: url(../images/story09.jpg);
background-repeat: no-repeat;
background-position: center top;
padding: 20px 0px 0px 0px;
}

#story09 h1 {
width: auto;
margin: 20px auto 0px auto;
padding: 160px 0px 20px 0px;
color: #ffffff;
text-align: center;
font-size: 30px;
font-family: serif,times;
font-weight: 400;
line-height: 28px;
text-shadow: 1px 2px 8px #333333;
}

#story09 p {
width: auto;
margin: 20px auto 0px auto;
padding: 10px 0px 20px 0px;
color: #ffffff;
text-align: center;
font-size: 16px;
font-weight: 400;
line-height: 28px;
text-shadow: 1px 2px 8px #333333;
}

#story09 h2{
width: auto;
margin: 20px auto 0px auto;
padding: 140px 0px 20px 0px;
color: #ffffff;
text-align: center;
font-size: 20px;
font-family: serif,times;
font-weight: 400;
line-height: 28px;
text-shadow: 1px 2px 8px #333333;
}

}
@media screen and (max-width: 780px) {



#sub_menu {
display: none;
}
#topcont {
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-color: #000000;
text-align: center;
}
#story01 {
width: 100%;
height: 80%;
margin: 0;
padding: 0;
background-image: url(../images/story01s.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
#story01 table {
width: 100%;
height: auto;
margin: 0;
padding: 50% 0px 0px 0px;
border: 0;
}
#story01 td.west {
display: none;
}
#story01 td.east {
width: auto;
height:auto;
text-align: center;
}
#story01 img {
margin: 0px auto 0px auto;
padding: 0;
border: 0;
}
#story01_5 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color:#000000;
background-image: url(../images/story01_5back.jpg);
background-repeat: repeat;
background-position: center top;
padding: 0px 0px 0px 0px;
}
#story02 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color:#666666;
background-image: url(../images/story02s.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding: 0;
}
#story02 h1 {
margin: 0;
padding: 40px 0px 0px 0px;
color: #ffffff;
text-align: center;
font-size: 16px;
font-family: serif,times;
line-height: 20px;
text-shadow: 1px 2px 3px #333333;
}
#wordbox02 {
width: 60%;
height: auto;
margin: 50px 8px 50px 35%;
padding: 0;
border: 0;
color: #ffffff;
text-align: left;
font-size: 10px;
line-height: 18px;
}

#story03 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color:#000000;
background-image: url(../images/story03.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding: 0;
}
#story03 h1 {
margin: 0;
padding: 0px 10%;
color: #ffffff;
text-align: left;
font-size: 16px;
font-family: serif,times;
line-height: 20px;
text-shadow: 1px 2px 3px #333333;
}
#story03 table{
width: 94%;
height: auto;
margin: 40% 0px 0px 8px;
padding: 0;
border: 0;
background-color: rgba(0,0,0,0.5);
}
#story03 td {
display: block;
width: 100%;
height: auto;
border: 0;
color: #ffffff;
font-size: 11px;
text-shadow: 1px 2px 3px #333333;
vertical-align: top;
}


#story04 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color:#ffffff;

padding: 0;
}

#story04 h1 {
margin: 20px 0px 0px 0px;
padding: 0px 10%;
color: #000000;
text-align: left;
font-size: 18px;
font-family: serif,times;
line-height: 20px;
}

#story04 h2 {
margin: 0px 0px;
padding: 0px 10%;
color: #000000;
text-align: left;
font-size: 12px;
font-family: serif,times;
line-height: 16px;
}

#story04 table{
width: 94%;
height: auto;
margin: 0px 0px 0px 8px;
padding: 0;
border: 0;
background-color: #ffffff;
}
#story04 td {
display: block;
width: 100%;
height: auto;
border: 0;
color: #000000;
font-size: 11px;
vertical-align: top;
}

#story05 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color: #000000;
padding: 0;
border-bottom: 6px solid #cccccc;
}

#story05 h1 {
margin: 20px 0px 0px 0px;
padding: 0px 10%;
color: #ffffff;
text-align: left;
font-size: 18px;
font-family: serif,times;
line-height: 20px;
}

#wordbox05 {
clear: both;
margin: 0px 8px 0px 8px;
padding: 0;
border: 0;
color: #ffffff;
text-align: left;
font-size: 10px;
line-height: 18px;
}

#story06 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color: #000000;
background-image: url(../images/story06.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding: 20px 0px 0px 0px;
border-bottom: 6px solid #cccccc;
}

#story06 h1 {
margin: 20px 0px 0px 0px;
padding: 0px 4%;
color: #ffffff;
text-align: left;
font-size: 18px;
font-family: serif,times;
line-height: 20px;
text-shadow: 2px 2px 3px #000000;
}

#wordbox06 {
clear: both;
margin: 30% 8px 0px 8px;
padding: 0;
border: 0;
color: #ffffff;
text-align: left;
font-size: 10px;
line-height: 18px;
text-shadow: 2px 2px 3px #000000;
}

#story07 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color: #000000;
background-image: url(../images/story07.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding: 20px 0px 0px 0px;
}

#story07 h1 {
margin: 0px 0px 0px 0px;
padding: 0px 4%;
color: #ffffff;
text-align: left;
font-size: 16px;
font-family: serif,times;
line-height: 20px;
text-shadow: 2px 2px 4px #000000;
background-color: rgba(0,0,0,0.4);
}

#wordbox07 {
clear: both;
margin: 45% 8px 0px 8px;
padding: 0;
border: 0;
color: #ffffff;
text-align: left;
font-size: 10px;
line-height: 18px;
text-shadow: 2px 2px 3px #000000;
}

#story08 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color: #a8b0b7;
background-image: url(../images/story08.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding: 20px 0px 0px 0px;
}

#story08 h1 {
margin: 0px 0px 0px 0px;
padding: 0px 4%;
color: #000000;
text-align: left;
font-size: 16px;
font-family: serif,times;
line-height: 20px;
}

#story08 table{
width: 94%;
height: auto;
margin: 50% 0px 0px 8px;
padding: 0;
border: 0;
}
#story08 td {
display: block;
width: 100%;
height: auto;
border: 0;
color: #000000;
font-size: 12px;
vertical-align: top;
}

#story09 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color: #e4e4e4;
background-image: url(../images/story09.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
padding: 20px 0px 40px 0px;
}

#story09 h1 {
margin: 0px 0px 0px 0px;
padding: 10px 4%;
color: #ffffff;
text-align: center;
font-size: 16px;
font-family: serif,times;
line-height: 20px;
}


#story09 p {
width: auto;
margin: 10px 8px 0px 8px;
padding: 0px 0px 8px 0px;
color: #ffffff;
text-align: left;
font-size: 12px;
font-weight: 400;
line-height: 16px;
text-shadow: 1px 2px 8px #333333;
}

#story09 h2{
width: auto;
margin: 10px 0px;
padding: 0;
color: #ffffff;
text-align: center;
font-size: 16px;
font-family: serif,times;
font-weight: 400;
line-height: 28px;
text-shadow: 1px 2px 8px #333333;
}

.scrollable{
display: none;
}

}


media screen and (max-width: 768px) {

#topcont {
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-color: #000000;
text-align: center;
}
#story01 {
width: 100%;
height: 80%;
margin: 0;
padding: 0;
background-image: url(../images/story01s.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
#story01 table {
width: 100%;
height: auto;
margin: 0;
padding: 50% 0px 0px 0px;
border: 0;
}
#story01 td.west {
display: none;
}
#story01 td.east {
width: auto;
height:auto;
text-align: center;
}
#story01 img {
margin: 0px auto 0px auto;
padding: 0;
border: 0;
}
#story01_5 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color:#000000;
background-image: url(../images/story01_5back.jpg);
background-repeat: repeat;
background-position: center top;
padding: 0px 0px 0px 0px;
}
#story02 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color:#666666;
background-image: url(../images/story02.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding: 0;
}
#story02 h1 {
margin: 0;
padding: 40px 0px 0px 0px;
color: #ffffff;
text-align: center;
font-size: 16px;
font-family: serif,times;
line-height: 20px;
text-shadow: 1px 2px 3px #333333;
}
#wordbox02 {
margin: 50px 8px 0px 30%;
padding: 0;
border: 0;
color: #ffffff;
text-align: left;
font-size: 10px;
line-height: 18px;
}

#story03 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color:#000000;
background-image: url(../images/story03.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding: 0;
}
#story03 h1 {
margin: 0;
padding: 0px 10%;
color: #ffffff;
text-align: left;
font-size: 16px;
font-family: serif,times;
line-height: 20px;
text-shadow: 1px 2px 3px #333333;
}
#story03 table{
width: 94%;
height: auto;
margin: 40% 0px 0px 8px;
padding: 0;
border: 0;
}
#story03 td {
display: block;
width: 100%;
height: auto;
border: 0;
color: #ffffff;
font-size: 11px;
text-shadow: 1px 2px 3px #333333;
vertical-align: top;
}


#story04 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color:#ffffff;

padding: 0;
}

#story04 h1 {
margin: 20px 0px 0px 0px;
padding: 0px 10%;
color: #000000;
text-align: left;
font-size: 18px;
font-family: serif,times;
line-height: 20px;
}

#story04 h2 {
margin: 0px 0px;
padding: 0px 10%;
color: #000000;
text-align: left;
font-size: 12px;
font-family: serif,times;
line-height: 16px;
}

#story04 table{
width: 94%;
height: auto;
margin: 0px 0px 0px 8px;
padding: 0;
border: 0;
background-color: #ffffff;
}
#story04 td {
display: block;
width: 100%;
height: auto;
border: 0;
color: #000000;
font-size: 11px;
vertical-align: top;
}

#story05 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color: #000000;
padding: 0;
border-bottom: 6px solid #cccccc;
}

#story05 h1 {
margin: 20px 0px 0px 0px;
padding: 0px 10%;
color: #ffffff;
text-align: left;
font-size: 18px;
font-family: serif,times;
line-height: 20px;
}

#wordbox05 {
clear: both;
margin: 0px 8px 0px 8px;
padding: 0;
border: 0;
color: #ffffff;
text-align: left;
font-size: 10px;
line-height: 18px;
}

#story06 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color: #000000;
background-image: url(../images/story06.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding: 20px 0px 0px 0px;
border-bottom: 6px solid #cccccc;
}

#story06 h1 {
margin: 20px 0px 0px 0px;
padding: 0px 4%;
color: #ffffff;
text-align: left;
font-size: 18px;
font-family: serif,times;
line-height: 20px;
text-shadow: 2px 2px 3px #000000;
}

#wordbox06 {
clear: both;
margin: 30% 8px 0px 8px;
padding: 0;
border: 0;
color: #ffffff;
text-align: left;
font-size: 10px;
line-height: 18px;
text-shadow: 2px 2px 3px #000000;
}

#story07 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color: #000000;
background-image: url(../images/story07.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding: 20px 0px 0px 0px;
}

#story07 h1 {
margin: 0px 0px 0px 0px;
padding: 0px 4%;
color: #ffffff;
text-align: left;
font-size: 16px;
font-family: serif,times;
line-height: 20px;
text-shadow: 2px 2px 4px #000000;
background-color: rgba(0,0,0,0.4);
}

#wordbox07 {
clear: both;
margin: 45% 8px 0px 8px;
padding: 0;
border: 0;
color: #ffffff;
text-align: left;
font-size: 10px;
line-height: 18px;
text-shadow: 2px 2px 3px #000000;
}

#story08 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color: #a8b0b7;
background-image: url(../images/story08.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
padding: 20px 0px 0px 0px;
}

#story08 h1 {
margin: 0px 0px 0px 0px;
padding: 0px 4%;
color: #000000;
text-align: left;
font-size: 16px;
font-family: serif,times;
line-height: 20px;
}

#story08 table{
width: 94%;
height: auto;
margin: 50% 0px 0px 8px;
padding: 0;
border: 0;
}
#story08 td {
display: block;
width: 100%;
height: auto;
border: 0;
color: #000000;
font-size: 12px;
vertical-align: top;
}

#story09 {
margin-left:auto;
margin-right:auto;
width: 100%;
height:auto;
background-color: #e4e4e4;
background-image: url(../images/story09.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
padding: 20px 0px 40px 0px;
}

#story09 h1 {
margin: 0px 0px 0px 0px;
padding: 10px 4%;
color: #ffffff;
text-align: center;
font-size: 16px;
font-family: serif,times;
line-height: 20px;
}


#story09 p {
width: auto;
margin: 10px 8px 0px 8px;
padding: 0px 0px 8px 0px;
color: #ffffff;
text-align: left;
font-size: 12px;
font-weight: 400;
line-height: 16px;
text-shadow: 1px 2px 8px #333333;
}

#story09 h2{
width: auto;
margin: 10px 0px;
padding: 0;
color: #ffffff;
text-align: center;
font-size: 16px;
font-family: serif,times;
font-weight: 400;
line-height: 28px;
text-shadow: 1px 2px 8px #333333;
}

}

media screen and (max-width: 480px) {

#story02 h1 {
margin: 0;
padding: 0;
color: #ffffff;
text-align: center;
font-size: 16px;
font-family: serif,times;
line-height: 20px;
text-shadow: 1px 2px 3px #333333;
}
#wordbox02 {
margin: 80px 8px 0px 30%;
padding: 0;
border: 0;
color: #ffffff;
text-align: left;
font-size: 10px;
line-height: 18px;
}

}