body {
  margin: 0 auto;
  padding: 0;
  font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}

div, dl, dt, dd, ul, ol, li, h1, h2, h3,p{ 
  margin: 0 auto;
  padding: 0;
  
 }

ol, ul {
  list-style: none;
  margin:0;
}


img {
 border: 0;
 vertical-align:bottom;
 }


.box ul {
	margin: 0 auto;
}

.box ul li {	
	display: none;
	overflow: hidden;
}

/* =======================================
	ClearFix
======================================= */
.box ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.box ul {
	display: inline-block;
	overflow: hidden;
}

.fade {   
    -webkit-transition: 0.4s ease-in-out;   
       -moz-transition: 0.4s ease-in-out;   
         -o-transition: 0.4s ease-in-out;   
            transition: 0.4s ease-in-out;   
}   
.fade:hover {   
    opacity: 0.6;   
    filter: alpha(opacity=60);   
}   

.bold{
	font-weight:bold
}
/* ------------------------------
 scroll
------------------------------ */
#subtop{
	clear: both;
	margin: 0px auto 0px auto;
	height: 33px;
	text-align:right;
}


#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 70%;
}
#page-top a {
	background: #305E9D;
	text-decoration: none;
	color: #ccc;
	width: 90px;
	padding: 5px 0;
	text-align: center;
	display: block;

}
#page-top a:hover {
	text-decoration: none;
	background: #8BADDC;
}


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


#grid {
	width: 100%;
	min-width: 480px;
    margin: 0 auto;

}

#header {
width: 100%;
margin: 0 auto;
text-align:left;

}

#navi {
width: 100%;
margin: 10px auto;

}


#navi a:link{color:#000}
#navi a:visited{color:#000}
#navi a:active{color:#000}


#navi ul {
list-style: none;
float: left;
margin: 0px auto;
}

#navi ul li {
list-style: none;
float: left;
line-height: 34px;
font-size:18px;
text-align:center;
padding:0px 0px 0px 0px; 
display: block;
}

#navi1 {
width: 157px;
height: 27px;
margin: 0 3px 15px 0px;
border-bottom: 3px solid #05A787;
clear: none;
}  

.navi1 {
    width: 157px;
	height: 27px;
	background-color: #E3FFFA;
    position: relative;
	border-bottom: 3px solid #05A787;
	color:#05A787;
	margin: 0 3px 15px 0px;
}
.navi1:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 8px solid transparent;
    border-top-color: #05A787;
    top: 100%;
    left: 50%;
    margin-left: -10px;
}
   

#navi1 a:hover {
  background-color: #E3FFFA;
  display: block;
  height: 100%;
 
}

#navi1  a {
  display: block;
  height: 100%;
  text-decoration: none
}


#navi2 {
width: 157px;
height: 27px;
margin: 0 3px 15px 0px;
border-bottom: 3px solid #00083F;
clear: none;
}     

#navi2 a:hover {
  background-color: #E9EDFF;
  display: block;
  height: 100%;
}

#navi2  a {
  display: block;
  height: 100%;
  text-decoration: none
}


#navi3 {
width: 157px;
height: 27px;
margin: 0 3px 15px 0px;
border-bottom: 3px solid #6E6E6E;
clear: none;
}     

#navi3 a:hover {
  background-color: #F2F2F2;
  display: block;
  height: 100%;
}

#navi3  a {
  display: block;
  height: 100%;
  text-decoration: none
}


#navi4 {
width: 157px;
height: 27px;
margin: 0 3px 15px 0px;
border-bottom: 3px solid #ECCC62;
clear: none;
}     

#navi4 a:hover {
  background-color: #FFF8E3;
  display: block;
  height: 100%;
}

#navi4  a {
  display: block;
  height: 100%;
  text-decoration: none
}

#navi5 {
width: 157px;
height: 27px;
margin: 0 3px 15px 0px;
border-bottom: 3px solid #EC6D67;
clear: none;
}     

#navi5 a:hover {
  background-color: #FFE9E9;
  display: block;
  height: 100%;
}

#navi5  a {
  display: block;
  height: 100%;
  text-decoration: none
}

#navi6 {
width: 157px;
height: 27px;
margin: 0 3px 15px 0px;
border-bottom: 3px solid #03A1C3;
clear: none;
}     

#navi6 a:hover {
  background-color: #E6FBFF;
  display: block;
  height: 100%;
}

#navi6  a {
  display: block;
  height: 100%;
  text-decoration: none
}


#container {
clear:both;
width: 481px;
max-width: 500px;
padding: 0px;
margin: 0 auto;

}



.box{
float:left;
margin:1px

}


.box1{
width:230px;

}

.box2{
width:478px;
height:238px;
}

.box3{
width:478px;
height:478px;
}


#coment {
width: 150%;
max-width: 480px;
padding: 0px;
margin: 0px auto 10px auto;
text-align:center;
color:#666;
font-size:12px;

}


#footer {
width: 150%;
max-width: 480px;
padding: 5px 0px;
margin: 0px auto;
text-align:center;
font-size:8px


}


#copy {
width: 150%;
max-width: 480px;
padding: 5px 0px 5px 0px;
margin: 0px auto;
text-align:center;
font-size:11px;
color:#666;
}


}



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

html {
     overflow-y: scroll;
}


#grid {
	width: 960px;
    margin: 0 auto;
	clear: none;
	float: none;

}

#header {
width: 960px;
margin: 0 auto;
text-align:left;

}

#navi {
width: 960px;
margin: 0px auto 0px auto;

}


#navi a:link{color:#000}
#navi a:visited{color:#000}
#navi a:active{color:#000}


#navi ul {
list-style: none;
float: left;
margin: 0 auto;
}

#navi ul li {
list-style: none;
float: left;
line-height: 34px;
font-size:12px;
text-align:center;
padding:0px 0px 0px 0px; 
display: block;
}


#navi1 {
width: 157px;
height: 27px;
margin: 0 3px 0 0px;
border-bottom: 3px solid #05A787;
display: block;
clear: none;

}     

.navi1 {
    width: 157px;
	height: 27px;
	background-color: #E3FFFA;
    position: relative;
	border-bottom: 3px solid #05A787;
	color:#05A787;
	font-size:12px;
	margin: 0 3px 0 0px;
}
.navi1:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 8px solid transparent;
    border-top-color: #05A787;
    top: 100%;
    left: 50%;
    margin-left: -10px;
}



#navi2 {
width: 157px;
height: 27px;
margin: 0 3px 15px 0px;
border-bottom: 3px solid #00083F;
clear: none;
}     

#navi2 a:hover {
  background-color: #E9EDFF;
  display: block;
  height: 100%;
}

#navi2  a {
  display: block;
  height: 100%;
  text-decoration: none
}


#navi3 {
width: 157px;
height: 27px;
margin: 0 3px 15px 0px;
border-bottom: 3px solid #6E6E6E;
clear: none;
}     

#navi3 a:hover {
  background-color: #F2F2F2;
  display: block;
  height: 100%;
}

#navi3  a {
  display: block;
  height: 100%;
  text-decoration: none
}


#navi4 {
width: 157px;
height: 27px;
margin: 0 3px 15px 0px;
border-bottom: 3px solid #ECCC62;
clear: none;
}     

#navi4 a:hover {
  background-color: #FFF8E3;
  display: block;
  height: 100%;
}

#navi4  a {
  display: block;
  height: 100%;
  text-decoration: none
}

#navi5 {
width: 157px;
height: 27px;
margin: 0 3px 15px 0px;
border-bottom: 3px solid #EC6D67;
clear: none;
}     

#navi5 a:hover {
  background-color: #FFE9E9;
  display: block;
  height: 100%;
}

#navi5  a {
  display: block;
  height: 100%;
  text-decoration: none
}

#navi6 {
width: 157px;
height: 27px;
margin: 0 3px 15px 0px;
border-bottom: 3px solid #03A1C3;
clear: none;
}     

#navi6 a:hover {
  background-color: #E6FBFF;
  display: block;
  height: 100%;
}

#navi6  a {
  display: block;
  height: 100%;
  text-decoration: none
}


#container {
clear:both;
width: 960px;
padding: 0px ;
margin: 20px auto 10px auto;

}



.box{
float:left;
margin:1px

}


.box1{
width:238px;
height:238px;
}

.box2{
width:478px;
height:238px;
}

.box3{
width:478px;
height:478px;
}

#coment {
clear:both;
width: 960px;
padding: 0px;
margin: 0px auto 10px auto;
text-align:center;
color:#666;
font-size:12px;

}

#footer {
clear:both;
width: 960px;
padding: 0px;
margin: 0px auto 10px auto;
text-align:center;
color:#666;
font-size:12px;

}
#copy {
clear:both;
width: 960px;
padding: 5px 0px 5px 0px;
margin: 0px auto;
text-align:center;
font-size:10px;
color:#666;
}

}