body{
margin:0;
padding:50px 0px 50px 0px;
background-image:url('../images/sozai/wall13.jpg');
}

* html body{
overflow:hidden;
}

div#headerArea{
z-index:100;
position:fixed!important;
position:absolute;
top:0;
left:0;
width:100%;
height:30px;
padding:15px 0px 0px 5px;
color:#000;
background-image: url('../images/sozai/wallppr043.gif');
border-bottom:1px solid #696969;
font-size:1.0em;
}

div#footerArea{
position:fixed!important;
position:absolute;
bottom:0;
left:0;
width:100%;
padding:0px 0px 0px 0px;
height:40px;
text-align:center;
background-color:#444444;
}

#footer p{
color:#FFD700;
}

* html div#contentsArea{
height:100%;
overflow:auto;
}

#topga{
width:100%;
background:#ffffff;
position:relative;
}

#topga img{
max-width:100%; 
height:auto;
}

#topga h1{
position:absolute;
top:15px;
margin:0;
left:20px;
font-size:2.2em;
color:#eeeeee;
font-weight:bold;
}

#topga span{
position:absolute;
top:53px;
margin:0;
left:22px;
font-size:1.5em;
color:#eeeeee;
font-weight:bold;
}

#lead{
width:70%;
background:#eeeeee;
margin:50px auto 30px auto;
padding:10px 5px 10px 13px;
line-height:1.4;
font-size:1.0em;
color:#AB078F;
}

#end{
width:70%;
background:#eeeeee;
margin:50px auto 50px auto;
padding:10px 5px 10px 13px;
line-height:1.4;
font-size:1.0em;
color:#AB078F;
}

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

#yamaski{
background-color:#CCCCCC;
width:80%;
margin:30px auto 30px auto;
font-size:1.0em;
border:1px solid #111111;
padding:15px 15px 5px 15px;
}

.textarea{
margin:0 auto 0 auto;
width:80%;
}

}

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

#yamaski{
background-color:#CCCCCC;
width:95%;
margin:30px auto 30px auto;
font-size:1.0em;
border:1px solid #111111;
padding:15px 15px 5px 15px;
}

.textarea{
margin:0 auto 0 auto;
width:100%;
}

}




h2{
font-size:1.8em;
color:#770000;
margin:50px 0px 0px 0px;
}

h3{
font-size:1.0em;
font-weight:bold;
color:#003366;
margin:50px 0px 0px 0px;
padding:0;
}

#yamaski p{
font-size:1.0em;
color:#111111;
margin:0px 0px 50px 0px;
padding:0;
line-height:1.4;
}

a:link {color: #800000; font-weight:bold; text-decoration:none;}
a:visited {color: #800000; text-decoration:none;}
a:hover { color: #FF8C00; text-decoration:underline;}
a:active { color: #FF8C00; text-decoration:none;}

.photos2{
margin:0px auto 20px auto;
width:50%;
}

.photos2 img{
max-width:100%;
height:auto;
}

.photos2 span{
font-size:0.9em;
color:#111111;
margin:0px 0px 0px 0px;
padding:0;
line-height:1.4;
}

.photos{
margin:0 auto 0 auto;
display: inline;
width:45%;
}

.photos img{
-webkit-transform:scale(1);
position:absolute;
z-index:110;
}
 
 
/* ClearFixElements
-------------------------- */
.photos:after {
    content: "";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
 
/* CSS3 HoverAnimation
-------------------------- */
@-webkit-keyframes hoverSpread {
    0% {-webkit-transform:scale(1);opacity: 0.7;}
    100% {-webkit-transform:scale(1.5);opacity: 1;}
}
 
.photos img:hover {
    -webkit-animation-name: hoverSpread;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-iteration-count: 1;
 
    -webkit-transform: scale(1.5);
    -webkit-box-shadow: 0 0 10px #000;
    opacity: 1;
    z-index: 120;
}