@charset "utf-8";

/******************** map ********************/
#map_wrapper {
	width: 100%;
	padding-top: 10px;
    height: 700px;
	position: relative;
	margin: auto;
}
#map{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
#map_wrapper {
    height: 480px;
}
#map{
    height: 480px;
}
}
/******************** btn_footer ********************/
.bg_gray {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
    padding: 8px 0;
}
.bg_gray ul {
	width: 600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.bg_gray li {
    padding: 0 3px;
    text-align: center;
}
.bg_gray li#kakutei {
    padding: 0 3px 0 5px;
    width: 56%;
}
.bg_gray li#current {
    width: 14%;
}
.bg_gray li#gotoform {
    padding: 0 5px 0 3px;
    width: 29%;
}
.bg_gray li a {
    display: block;
    text-align: center;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0px 1px 3px #333;
    align-content: center;
    border: none;
    background: transparent;
    height: 84px;
}
@media screen and (min-width: 320px) and (max-width: 600px){
.bg_gray ul {
	width: 100%;
}
}
@media screen and (min-width: 320px) and (max-width: 330px){
.bg_gray li a {
    height: 44px;
}
}
@media screen and (min-width: 331px) and (max-width: 400px){
.bg_gray li a {
    height: 52px;
}
}
@media screen and (min-width: 401px) and (max-width: 500px){
.bg_gray li a {
    height: 60px;
}
}
@media screen and (min-width: 501px) and (max-width: 600px){
.bg_gray li a {
    height: 80px;
}
}
.bg_gray li#kakutei a {
    background: #ff5757;
}
.bg_gray li#current a {
    background: #52b6ff;
}
.bg_gray li#gotoform a {
    background: #fff;
}
.bg_gray img {
    height: auto;
    width: 100%;
    display: block;
}
footer {
    padding-bottom: 100px;
}
@media screen and (min-width: 320px) and (max-width: 330px){
footer {
    padding-bottom: 60px;
}
}
@media screen and (min-width: 331px) and (max-width: 400px){
footer {
    padding-bottom: 70px;
}
}
@media screen and (min-width: 401px) and (max-width: 500px){
footer {
    padding-bottom: 80px;
}
}
@media screen and (min-width: 501px) and (max-width: 600px){
footer {
    padding-bottom: 100px;
}
}


/* よく使いそうなCSS3
----------------------------------------------------*/
#selectors {
/* 角丸 */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

/* 角丸個別 */
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topright: 15px;
	border-top-right-radius: 15px;

/* ボックスに影 */
	-webkit-box-shadow: 1px 1px 3px #999;
	-moz-box-shadow: 1px 1px 3px #999;
	box-shadow: 1px 1px 3px #999;

/* テキストに影 */
	text-shadow: 1px 1px 0px #999;

/* グラデーション */
    background: -moz-linear-gradient(top, #f5f5f5, #fff);　/* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#066));　/* Safari,Google Chrome用 */  
}
/********************
* html  IE6
*:first-child+html  IE7
head~/* */body  IE8/*
html>body  Firefox
body:last-child  Opera
html:not([lang*=""])  Firefox
html:not(:only-child:only-child)  Safari
********************/