@charset "utf-8";

@viewport {
  width : extend-to-zoom 100%;
  height : extend-to-zoom 100%;
}


html{font-family : Meiryo UI, verdana, sans-serif;}


a {
  text-decoration: none;
}

img{
max-width: 100%;
height: auto;
width /***/:auto;　
}






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


body{
width:100%;
margin:0;
float:none;
}


ul li {list-style-type:none;}

.pagetop {
    display: none;
    position: fixed;
    bottom:20px;
    right:20px;
    }

.pagetop a {
    display: block;
    width:50px;
    background-color:palegreen; 
}
 
.pagetop a:hover {
    display: block;
    background-color:pink;
}

header{
        width:100%;
        height:10%;
        position:fixed;
        z-index:199;
        background-color:whitesmoke;
        box-shadow:5px 5px 5px grey;
        border-bottom: 1px solid silver;
}


.nav{   display:flex;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}


.nav.labo{ text-align:center;
           margin-top:5px;
           color:purple;
           text-shadow:5px 5px 5px grey;
}






#comment{text-align:left;}



#wrapper{
clear:both;
width:100%;
margin-left:auto;
margin-right:auto;
}


#top{
	padding-top:100px;
	width:100%;
	margin:auto;
	margin-bottom:30px;
	padding-bottom:30px;
	text-align:center;
}

#slideshow {display:none;}


#title{
        text-align:center;
	width:100%;
	height:20%;
        padding-top:10%;
        padding-bottom:10%;
	color:purple;
	text-shadow:5px 5px 5px grey;
	background-color:lightblue;
}


#info{
clear:both;
margin-left:7px;
margin-right:7px;
}


#bord1{
margin-top:20px;
width:98%;
height:180px;
color:darkgreen;
background-color:wheat;
float:left;
padding-top:0%;
padding-left:0px;
padding-bottom:20px;
border-bottom:darkgrey 3px solid;
border-right:silver 1px solid;
}

#bord2{
margin-top:20px;
margin-left:2px;
width:98%;
height:180px;
color:darkgreen;
background-color:palegreen;
float:left;
padding-top:0%;
padding-left:0px;
padding-bottom:20px;
border-bottom:darkgrey 3px solid;
border-right:silver 1px solid;
}

#bord3{
margin-top:20px;
margin-left:2px;
width:98%;
height:180px;
color:darkgreen;
background-color:khaki;
float:left;
padding-top:0%;
padding-left:0px;
padding-bottom:20px;
border-bottom:darkgrey 3px solid;
border-right:silver 1px solid;
}



#bord3 a {text-decoration: none;}

#bord3 img{
float:right;
margin-top:-60px;
width:100%;
margin-right:20px;
}


#work{
clear:both;
width:100%;
padding-top:20px;
padding-bottom:20px;
margin-left:auto;
margin-right:auto;
}


#main{
float:left;
width:100%;
height:auto;
padding-top:20px;
}





#side {
float:left;
width:100%;
padding-top:0px;
}


#side h3{
	padding-left:10px;
	color:darkgreen;
	border-bottom:darkgrey 2px solid;
        border-right:silver 1px solid;
}

#side ul{
text-indent:2em;
list-style-type:none;
line-height:2em;
margin:0px;
padding:0px;
border-bottom:darkgrey 2px solid;
border-right:silver 1px solid;
}

#side li{
background-color:lavender;
}

#side li a{
display:block;
text-decoration: none;
}

#side li:hover > a{
  background: white;
  color: blue;
}

#side > li:hover > a{
  border-radius: 3px 3px 0 0;
}

#map{width:100%;}



footer{clear:both;
padding-top:5%;
width:100%;
text-align:center;
}


.msg{width:100%;
background-color:lavender;
}


.msg .box{width:60%;
        margin-left:15%;
        text-align:center;
        color:purple;
	padding:5%;
}


.address{
line-height:0.8em;
}

.address eng
{line-height:0.2em;
}


footer img{
width:10%;
position:relative;
margin-top:-100%;
left:30%;
}

}











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




body{
width:100%;
margin:0;
}



ul li {list-style-type:none;}

.pagetop {
    display: none;
    position: fixed;
    bottom:20px;
    right:20px;
    }

.pagetop a {
    display: block;
    width:50px;
    background-color:palegreen; 
}
 
.pagetop a:hover {
    display: block;
    background-color:pink;
}

table{
text-align:center;
}



header{
        width:100%;
        height:55px;
        position:fixed;
        z-index:199;
        background-color:whitesmoke;
        box-shadow:5px 5px 5px grey;
        border-bottom: 1px solid silver;
}


.nav{   display:flex;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}


.nav.labo{ text-align:center;
           margin-top:5px;
           color:purple;
           text-shadow:5px 5px 5px grey;
}



#comment{text-align:left;}


#wrapper{
clear:both;
width:100%;
margin-left:auto;
margin-right:auto;
}


#top{
	padding-top:100px;
	width:960px;
	margin:auto;
	text-align:center;
}

#slideshow {float:left;
   position: relative;
   width:  640px; /* 画像の横幅に合わせて記述 */
   height: 427px; /* 画像の高さに合わせて記述 */
}

#slideshow img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}

#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}

#slideshow img.last-active {
   z-index: 9;
}


#title{ width:320px;
        height:320px;
        float:right;
        margin-bottom:10px;
        text-align:center;
        padding-top:57px;
	color:purple;
	text-shadow:5px 5px 5px grey;
	background-color:lightblue;
}


#info{
clear:both;
width:960px;
margin-left:auto;
margin-right:auto;
}


#bord1{
margin-top:20px;
width:317px;
height:150px;
color:darkgreen;
background-color:wheat;
float:left;
padding-top:0%;
padding-left:0px;
padding-bottom:20px;
border-bottom:darkgrey 3px solid;
border-right:silver 1px solid;
}

#bord2{
margin-top:20px;
margin-left:2px;
width:317px;
height:150px;
color:darkgreen;
background-color:palegreen;
float:left;
padding-top:0%;
padding-left:0px;
padding-bottom:20px;
border-bottom:darkgrey 3px solid;
border-right:silver 1px solid;
}

#bord3{
margin-top:20px;
margin-left:2px;
width:317px;
height:150px;
color:darkgreen;
background-color:khaki;
float:left;
padding-top:0%;
padding-left:0px;
padding-bottom:20px;
border-bottom:darkgrey 3px solid;
border-right:silver 1px solid;
}



#bord3 a {text-decoration: none;}

#bord3 img{
float:right;
margin-top:-60px;
width:100px;
margin-right:20px;
}


#work{
clear:both;
width:960px;
padding-top:20px;
padding-bottom:20px;
margin-left:auto;
margin-right:auto;
}


#main{
float:left;
width:640px;
height:1000px;
display:inline-block;
padding-top:20px;
}


#main img{width:100%}


#main h3{
padding-left:3%;
width:93%;
color:darkgreen;
line-height:200%;
border-bottom:darkgrey 2px solid;
border-right:silver 1px solid;
}



#side {
float:left;
width:320px;
padding-top:0px;
}

#side h3{
	padding-left:10px;
	color:darkgreen;
	border-bottom:darkgrey 2px solid;
        border-right:silver 1px solid;
}

#side ul{
text-indent:2em;
list-style-type:none;
line-height:2em;
margin:0px;
padding:0px;
border-bottom:darkgrey 2px solid;
border-right:silver 1px solid;
}

#side li{
text-align:left;
background-color:lavender;
}

#side li a{
display:block;
text-align:left;
text-decoration: none;
}

#side li:hover a{
  background: white;
  color: blue;
}

#side li:hover a{
  border-radius: 3px 3px 0 0;
}

#map{width:100%;}



footer{
clear:both;
padding-top:5%;
width:100%;
text-align:center;
}


.msg{width:100%;
background-color:lavender;
}


.msg .box{
width:100%;
height:80px;    
text-align:center;
padding-top:10px;
color:purple;
	
}


.address{
line-height:0.8em;
}

.address eng
{line-height:0.2em;
}


footer img{
width:10%;
position:relative;
margin-top:-100%;
left:30%;
}

}