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

body {
background-color: #ffffff;
margin:0;
padding:0;}


img{
border:none;
}

a:link{color: #999999; }
a:visited{color: #758CDC; }
a:hover{color: #333333; }

h1{
font:font-family:Arial, Helvetica, sans-serif;
}

/* top page */



#photodiv{
width:800px;
margin:0px;
} 

img{
border:none;
-ms-interpolation-mode: bicubic;
}

li a:hover img{
visibility:hidden;
}

.wrap{
margin:0 auto;
width:800px;
height:auto;
}

ul.menu{
height:7px;
margin-left:-40px;
margin-bottom: 8px;
width: 100%;
display: block;
}

ul.menu li{
list-style-type:none;
float:left;
margin:0 5px 0 0;
height:10px;
line-height:10%;
overflow-y:hidden;
display:block;
}


.top a{
background:url(img/top-1o.jpg) no-repeat;
display: block;
overflow: hidden;
}
.online a{
background:url(img/online-1o.jpg) no-repeat;
display: block;
overflow: hidden;
}
.cg a{
background:url(img/cg-1o.jpg) no-repeat;
display: block;
overflow: hidden;
}
.fs a{
background:url(img/fs-1o.jpg) no-repeat;
display: block;
overflow: hidden;
}
.access a{
background:url(img/access-1o.jpg) no-repeat;
display: block;
overflow: hidden;
}
.blog a{
background:url(img/blog-1o.jpg) no-repeat;
display: block;
overflow: hidden;
}
.link a{
background:url(img/link-1o.jpg) no-repeat;
display: block\9;
overflow: hidden\9;
}

.clear{
clear:both;
}


/*iframe info*/


.info{
width:475px;
height:140px;
border:1px #808080 double;
margin:19px 20px 20px 0;
padding:0px;
float:left;
overflow-y:auto;
}


.infotext{
width:478px;
height:138px;
position:relative;
margin:0px;
padding:0px;
overflow-y:auto;
}

.infotext H{
font:font-family:Arial, Helvetica, sans-serif;
font-size:12px;
height:21px;
width:auto;
padding:2px 0 0 5px;
background-color:#999999;
margin:0;
display:block;
color: #ffffff;

}


.infotext ul{
margin:10px 0 0 10px;
font-weight:bold;
font-size:11px;
}

.infotext ul li{
list-style-type:none;
font-weight:normal;
border-bottom:1px #999999 dotted;
margin:0 10px;
}

/*-iframe info*/

/*contact*/
.contact{
width:298px;
height:138px;
border:1px #808080 double;
position:relative;
margin:20px 0 0 500px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}

.contact H{
font:font-family:Arial, Helvetica, sans-serif;
font-size:12px;
height:21px;
width:5px auto;
padding:2px 0 0 5px;
background-color:#999999;
margin:0;
display:block;
color: #fff;
}


.logo{
float:left;
height:100px;
}


/*-contact*/

.footer{
text-align: center;
width:800px;
clear:both;
font:"Arial", "Helvetica", "sans-serif";
font-size:11px;
}

/* -top page */


.map {
margin:10px 0 0 100px;
width:600px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

dl.text{
display:block;
width:600px;
margin:0 auto;
font:Arial, Helvetica, sans-serif,;
font-size:12px;
}

dl.text dt{
font-weight:bold;
}





ul.linkpage{
text-align:center;
width:100%;
margin:0;
font-weight:bold;
font-size:11px;
}

ul.linkpage li{
width:100%;
text-align:center;
list-style-type:none;
font-weight:normal;
margin:5px 0;
display:block;
}


/* custom gallery */
.gwrapper{
width:800px;
height:420px;
}

div.gwrapper table tr td span{

}


.gleft{
width::400px;
height:400px;
float:left;
clear:both;
margin:0;
}

.gright{
width:380px;
height:400px;
margin-left:420px;
font:font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}


div.gwrapper table tr td.name{
height: 5px;
text-align:center;
font-weight:bold;
}

@media screen and (max-width:480px){
    *, *::before, *::after {
        box-sizing: border-box;
    }
    ul.menu{
        margin-bottom: 25px;
    }
    .wrap{
        width: 100%;
    }
    #photodiv, #photodiv img, .footer{
        width:100%;
    } 
    .info{
        width: calc(100% - 40px);
        float: unset;
        margin: 20px;
    }
    .contact{
        width: calc(100% - 40px);
        margin: 20px;
    }
    .clear > img{
        width: 100%;
        height: auto;
    }
    .map, .map iframe{
        width: 100%;
        margin: 0;
    }
    dl.text{
        width: 100%;
        margin: 0 20px;
    }
}