@charset "utf-8";
/* CSS Document */

/*Resetcss*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td{
margin: 0;
padding: 0;
font-weight:normal;
}

body{
color: #555;
margin: 0;
padding: 0;
font: 13px/1.5 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
*font-size: small;
*font: x-small;
line-height: 1.5;
}

h1,h2,h3,h4,h5,h6,strong{
font-size: 100%;
}

table{
border-collapse: collapse;
border-spacing: 0;
font-size: 1em; /* for IE 5.5 */
}

img{
border: 0;
}

li{
list-style:none;	
}

a{
text-decoration:none;	
}

a:link {color:#555;} 
a:visited {color:#555;} 
a:hover {color:#555c;}
a:active {color:#555;} 

.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix{
zoom:1;	
}

/*goncss*/

#header{
z-index:999;
position:fixed;
width:800px;
}

h1{
padding:0 0 10px;
margin:0 10px 0 0;
}

h1 img{
margin:4px 10px -15px 2px;
}

#header ul{
clear:both;
margin:10px 0 0;
}

#gnav{
padding:0 0 0 7px;	
}

#nnav{
padding:2px 0 0 21px;	
}

#header li{
padding:5px 15px;
font-size:10px;
width:100px;
}

#header li a{
display:block;
}

.top

#contents{
clear:both;	
}

.section{
width:100%;	
position:relative;
}
.layer{
width:100%;
height:100%;
}

#section1 img{
width: 100%;
height:auto;
}

#section2{
background:url(../img/gon2.png) no-repeat 0px 0px;
background-size:100% auto;
background-position:center;
padding:-100px 30px;
margin:30px 30px;
}

#section3{
z-index:888;
background:url(../img/gon6.jpg) no-repeat 0px 0px;
background-size:100% auto;
background-position:center;
margin:0 30px;
}

#section4{
text-align:center;
margin:30px 0 230px;
padding-bottom:5em;
}

#section4 p{
width:290px;
margin:0 auto;
text-align: justify;
line-height:2;
}

#section4 p img{
padding:20px 0 0;
}

h3{
padding:100px 0;	
font-size:18px;
background:url(../img/gon3.gif) no-repeat;
background-size:99px 189px;
background-position:center;
}

#section5{
background:url(../img/gon4.jpg) no-repeat;
background-size:100% auto;
background-position:center;

}

#section6 img{
width: 100%;
height:auto;
}

#section7{
text-align:center;
padding:40px 0 0;
}

#section8{
text-align:center;
padding:0 0 20px;
}

#footer{
clear:both;
font-size:11px;
text-align:center;
padding:20px 0;	
line-height:2;
}

@media (max-device-width: 1024px) and (orientation: landscape) {
#section2{
background-size:100% auto;
background-position:center;
padding:-20px 30px;
margin:30px 0;
}

#section3{
z-index:888;
background-size:80% auto;
background-position:center;
margin:0 0;
width:100%;
height:200px;
}

#section4{
text-align:center;
margin:30px 0 50px;
}

#section5{
background-size:cover;
background-position:center;
height:500px;
}
}


@media (max-device-width: 768px) and (orientation: portrait)  {
#section2{
background-size:100% auto;
background-position:center;
padding:-20px 30px;
margin:30px 0;
}

#section3{
z-index:888;
background-size:80% auto;
background-position:center;
margin:0 0;
width:100%;
height:200px;
}

#section4{
text-align:center;
margin:30px 0 50px;
}

#section5{
background-size:cover;
background-position:center;
height:500px;
}

}

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
#section2{
background-size:100% auto;
background-position:center;
padding:-20px 30px;
margin:30px 0;
}

#section3{
z-index:888;
background-size:80% auto;
background-position:center;
margin:0 0;
width:100%;
height:200px;
}

#section4{
text-align:center;
margin:30px 0 50px;
}

#section5{
background-size:cover;
background-position:center;
height:500px;
}
} 

@media screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2){
#section2{
background-size:100% auto;
background-position:center;
padding:-20px 30px;
margin:30px 0;
}

#section3{
z-index:888;
background-size:80% auto;
background-position:center;
margin:0 0;
width:100%;
height:200px;
}

#section4{
text-align:center;
margin:30px 0 50px;
}

#section5{
background-size:cover;
background-position:center;
height:500px;
}
}

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
#section2{
background-size:100% auto;
background-position:center;
padding:-20px 30px;
margin:30px 0;
}

#section3{
z-index:888;
background-size:80% auto;
background-position:center;
margin:0 0;
width:100%;
height:200px;
}

#section4{
text-align:center;
margin:30px 0 50px;
}

#section5{
background-size:cover;
background-position:center;
height:500px;
}
}

@media screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 2){
#section2{
background-size:100% auto;
background-position:center;
padding:-20px 30px;
margin:30px 0;
}

#section3{
z-index:888;
background-size:80% auto;
background-position:center;
margin:0 0;
width:100%;
height:200px;
}

#section4{
text-align:center;
margin:30px 0 50px;
}

#section5{
background-size:cover;
background-position:center;
height:500px;
}}