@charset "UTF-8";


/*! BASESTYLE CSS */


body {
	margin: 0;
	padding: 0;
    font-family:-apple-system,'Lucida Grande', 'Hiragino Kaku Gothic ProN', '¥Ò¥é¥®¥Î½Ç¥´ ProN W3', Meiryo, ¥á¥¤¥ê¥ª, sans-serif;
  	line-height: 1.6;
  	font-size: 16px;
	color: # 333;
	width: 100%;
	overflow-x: hidden;
	letter-spacing: 1px;
	text-align: left;
	}


a:link {
	text-decoration:none;
	color:#0000ff;
	}

a:visited {
	text-decoration:none;
	color:#0000ff;
	}

a:active {
	text-decoration:none;
	color:#0000ff;
	}

a:hover {
	text-decoration:underline;
	}


h1 {
	font-size: 30px;
	text-align: center;
	margin: 50px;
	line-height: 2.5;
	color: #666;
}

h3 {
  position: relative;
  padding: .75em 1em .75em 1.5em;
  border: 1px solid #ccc;
}
h3::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #3498db;
  border-radius: 4px;
}



/*!------- header TOP --------- */
#top {
	background: #000080;
	color: #FFFFFF;
	margin: 0;
	padding: 2px;
	height: 50px;
	}


#top .toptitle {
	text-decoration: none;
	margin: 10px;
	color: #FFFFFF;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	}

/*!------- navi MENU --------- */
nav .menu {
	background: #0000cd;
	color: #FFFFFF;
	margin: 0;
	padding: 0px;
	height: 40px;
	}


nav .menu ul {
	display: flex;
	flex-flow: row;
	justify-content: center;
	margin: 0;
	padding: 6px;
	list-style-type: none;
}

nav .menu a {
	display: block;
	padding: 5px 20px;
	color: #FFFFFF;
	text-decoration: none;
}

nav .menu li a:hover {
  color: #FFFFFF;
	text-decoration:underline;
	}

nav .menu li a:visited {
	text-decoration:none;
	color: #FFFFFF;
	}

nav .menu li a:active {
	text-decoration:none;
	color: #FFFFFF;
	}



/*!------- MAIN --------- */



.ab_box  {
	display: block;
	text-align: left;
	width: 90%;
 	margin: 50px auto;
	}

.image-vw {
    	width : 80vw ; 
  	}

.image-vw2 {
  	width : 30vw ; 
  	}


table {
	border-collapse: collapse;
	border: solid 1px #999; /*±íÈ«Ìå¤ò¾€¤Ç‡ì¤¦*/
 	margin: 0px auto;
	color: #333;
	font-size: 15px;
	}

table th {
	border: solid 1px #999;  /*Æƾ€ 1px */
	text-align: center;
	background: #e6e6fa;
 	}

table td {
	border: solid 1px #999;  /*Æƾ€ 1px */
	padding: 3px 10px 3px 10px;
	}

.mid{
	text-align: center;
 }

.left{
  text-align:left;
  }



.gh-x {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.gh-title {
	margin-top: 30px;
}

.gh1 {
	width: 350px ;
  }

.gh2 {  
	width: 500px ;
  }

.gh3 {
	width: 300px ;
  }


/*!------- Footer --------- */
#footer {
	background: #000080;
	color: #FFFFFF;
	}


#footer .ft_cr {
	text-align: center;
	margin: 0 auto;
	padding: 30px 0;
	}


/*================================================
 *  ¥¿¥Ö¥ì¥Ã¥ÈÏò¤±¥Ç¥¶¥¤¥ó
 ================================================*/


 @media screen and (max-width:896px) {
  body {
	 overflow-x: scroll;

  }
	table {
			width:100%;

	}

#top .toptitle {
		font-size: 18px;
		}

 nav .menu {
		height: auto;
 }

 nav .menu ul {
  	flex-flow: wrap;
		padding: 0;

 }

 nav .menu li {
	 border-bottom: 1px solid #fff;
	 width:33.33333%;
	 text-align: center;
 }


	.gh {
		text-align: center;
	   }

	.gh1 {
		width: 340px ;
		height: 200px;
		margin:0 auto;
		justify-content:center;
	   }

 	.gh2 {
		width: 350px ;
		height: 200px;
		margin:0 auto;
		justify-content:center;
    	}

	.gh3 {
		width: 300px ;
		height: 230px;

    margin:0 auto;
	  justify-content:center;
     }