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

body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
 -webkit-text-size-adjust: 100%;
   max-width: 1040px; /* 960px 変更するときは#menuも */
   margin:0 auto; /* ブロック要素の中央揃え */
}
.icon{
	vertical-align: text-bottom;
}
.style1 {
	padding: 0 20px;
	text-align: justify;
}
.style2 {
	padding: 0 10px;
	text-align: justify;
}
.style8 {
	color: #CC3366;
}
.red {
	color: red;
}
.logo {
	padding: 5px 5px 0;
}
.top img{
	display: block;
    margin: auto;
    padding: 10px 0 0;
	}
.thumb {
	border: 1px solid;
}
h1 {
	color:#336600;
	font-size: 18px;
	font-weight: bold;
	text-align:left;
	padding: 0 10px;
}
h2 {
	font-size: 14px;
	font-weight: bold;
	color: black;
}
h3 {
	color:red;
	font-size: 16px;
	font-weight: bold;
	text-align:left;
	padding: 0 10px 0;
}
.gt {
	font-size: 14px;
	color: #060;
}
.gt strong {
	color: #060;
	font-weight: bold;
}
#menu{
  width: 100%;
  max-width: 1040px; /* 960px */
  margin: 0 auto;
  padding: 0;
}
#menu li{
  display: block;
  float: left;
  width: 10%;
  margin: 0;
  padding: 0; }
#menu li a{
  display: block;
  padding: 10px 0 10px;
  background: #00809d;
  color: #fff;
  text-align: center;
  text-decoration: none;

  text-shadow:0 -1px 0px #333,0 1px 0px #555;
  font-size:14px;
  line-height:10px;  /* pulldown menu 14px */

  border-left:1px solid #444;
  box-shadow: 1px 0px 0px rgba(225,225,225,0.3) inset,
			 -1px 0px 0px rgba(225,225,225,0.3) inset,
			  0px 1px 1px rgba(0,0,0,0.1) inset,
			  0px -1px 1px rgba(0,0,0,0.3) inset,
			  0px 1px 3px #666;
}
#menu li a:hover{
  background: #00b6aa;
  
    box-shadow: 1px 0px 0px rgba(225,225,225,0) inset,
			 -1px 0px 0px rgba(225,225,225,0) inset,
			  0px 1px 1px rgba(0,0,0,0.1) inset,
			  0px -1px 1px rgba(0,0,0,0.3) inset,
			  0px 1px 3px #666;
}
#toggle{ 
 display: none;
}

 /* for main */
div{
    box-sizing: border-box;
}
hr.style1 {
	border-top: 1px dashed #8c8b8b;
	text-align: left;
	margin-left: 0px;
}
hr.style2 {
	border-top: 1px dotted #f14343;
	text-align: center;
	margin: 10px;
}
hr.style3 {
	border-top: 1px dashed #f14343;
	text-align: center;
}
.base{
	vertical-align:middle ;
}
.counter{
	margin: 0 10px;
	display: inline;
	vertical-align:middle ;

	}
.s12{
	font-size: 12px;
}
.s14{
	font-size: 14px;
}
.s16{
	font-size: 16px;
}
.s20{
	font-size: 20px;
}
.T14{
	display: table-cell;
    background: white;
    color: #575b62;
    font-size: 14px;
    padding: 0px 20px 5px;
    line-height: 150%;
}
.T16 {
	color: #C00;
	font-family: "Monotype Corsiva";
	font-size: 16px;
}
.tab1{
    font-size: 120%;
    color:maroon;
    width: 100%;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #eec19f;
    line-height:20px;
}
.tab2{
    font-size: 120%;
    width: 100%;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #ee9fdc;
    line-height:20px;
}
.tab3{
    font-size: 120%;
    color:blue;
    width: 100%;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #9fd1ee;
    line-height:20px;
}
.tab4{
    font-size: 120%;
    color:#ff0000;
    width: 100%;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #c2facb;
    line-height:20px;
}
.tab5{
    font-size: 120%;
    color:red;
    width: 100%;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #ffe4e1;
    line-height:20px;
}
.right {
	float: right;
	padding: 15px 5px 5px 15px;
	}

footer{
    font-size: 70%;
    width: 100%;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #0095b6;
}
footer address{
    color: #fff;
    letter-spacing: 1px;
    font-style:normal;
}
footer address a{
	text-decoration: none;
}
.css_btn_class {
	font-size:16px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
	border:1px solid #74b807;
	padding:3px 15px;
	margin: 5px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
	background:-ms-linear-gradient( top, #89c403 5%, #77a809 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #89c403), color-stop(100%, #77a809) );
	background-color:#89c403;
	color:#ffffff;
	display:inline-block;
}.css_btn_class:hover {
	background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
	background:-ms-linear-gradient( top, #77a809 5%, #89c403 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #77a809), color-stop(100%, #89c403) );
	background-color:#77a809;
}.css_btn_class:active {
	position:relative;
	top:1px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
figure {
    display: table;
    width: 200px; /* minimum width 200px */
    *width: auto; /* for IE7 and below */
}
figure.block {
	float: left;
	padding: 5px;
	margin: 5px;
}
figcaption{
	font-size: 12px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}
.item{
  text-align: left;
  padding : 5px;
  margin : 5px;
  font-size: 14px;
  width: 480px;
}

@media only screen and (max-width: 768px) {
    #menu li{
    width: 20%;
    border-bottom: 1px solid #444;
  }
.sp{
	padding: 0 10px;
}

}
@media only screen and (max-width: 480px) {
.sp{
	padding: 0 5px;
}
li{
	width: 98%;
}
.logo{
	width: 95%;	/* android向けに少し小さく．max-width: 360px paddingに合わせて少し縮小 98% */	
}
  #menu{
    display: none;
  }
  #menu img{
    width: 100%; 
  }
  #menu li{
    width: 100%;
  }
  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #00809d;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 5px 0 5px;  /* menu height 10px 0 10px */
    border-bottom: 1px solid #444;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 5px;
    background: #00809d;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }
}