/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

html,body{
	font-family:verdana,"�q���M�m�ۃS ProN W4","Hiragino Maru Gothic ProN","���C���I","Meiryo","�l�r �o�S�V�b�N","MS PGothic",Sans-Serif;
	font-size:1em;
	height: 100%;
	line-height:1.7;
	-webkit-text-size-adjust: 100%;
}



/*------------ table style set ------------*/
.hpb-cnt-tb1{
  background-color: #333333;
  border-top-width: 1px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #333333;
  border-right-color: #333333;
  border-bottom-color: #333333;
  border-left-color: #333333;
}
.hpb-cnt-tb2{
  background-color: #333333;
  border: 1px solid #333333;
}
.hpb-cnt-tb3{
  background-color: #333333;
  border: 0px solid #333333;
}
.hpb-cnt-tb-th1 {
  background-color: #BBBBBB;
  xfont-size: 80%;
  color: #333333;
  border-top-width: 0px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #333333;
  border-right-color: #333333;
  border-bottom-color: #333333;
  border-left-color: #333333;
}
.hpb-cnt-tb-th2 {
  background-color: #CCCCCC;
  xfont-size: 80%;
  color: #333333;
  border: 0px solid #333333;
}
.hpb-cnt-tb-cell1 {
  background-color: #EEEEEE;
  xfont-size: 80%;
  color: #333333;
  border-top-width: 0px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #333333;
  border-right-color: #333333;
  border-bottom-color: #333333;
  border-left-color: #333333;
}
.hpb-cnt-tb-cell2 {
  background-color: #FFFFFF;
  xfont-size: 80%;
  color: #333333;
  border-top-width: 0px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #333333;
  border-right-color: #333333;
  border-bottom-color: #333333;
  border-left-color: #333333;
}
.hpb-cnt-tb-cell3 {
  background-color: #EEEEEE;
  xfont-size: 80%;
  color: #333333;
  border: 0px solid #333333;
}
.hpb-cnt-tb-cell4 {
  background-color: #FFFFFF;
  xfont-size: 80%;
  color: #333333;
  border: 0px solid #333333;
}
.hpb-cnt-tb-cell5 {
  background-color: #FFFFFF;
 xfont-size: 80%;
  color: #333333;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #CCCCCC;
  border-right-color: #CCCCCC;
  border-bottom-color: #CCCCCC;
  border-left-color: #CCCCCC;
}


/*���j���[����*/
#header_menu_table, #menu_table{
	background:#000099;
	text-align:center;
  color: white;
}
#header_menu_table .button_list {
  display: flex;
  align-items: center;
}
#header_menu_table .button_list li {
  border-radius: 6px;
  margin: 0 3px;
  cursor: pointer;
}
#header_menu_table .top_title {
  background-color: rgb(0, 128, 0);
}
#header_menu_table img.logo {
  margin: 3px 3px;
  height: 36px;
}
#header_menu_table img.header_button {
  cursor: pointer;
}
#header_menu_table .route_display_label input {
  display: none;
}
#header_menu_table .route_display_label input + .route_display_text::after {
  background-image: url("./icon/route_display.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 30px;
  position: relative;
  width: 90px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
#header_menu_table .route_display_label input:checked + .route_display_text::after {
  background-image: url("./icon/route_display.png");
}
#header_menu_table .lang_item {
  background-color: rgb(156, 220, 87);
}
#header_menu_table .route_item {
  background-color: rgb(156, 220, 87);
}
#header_menu_table .emarge110_item {
  background-color: yellow;
}
#header_menu_table .emarge119_item {
  background-color: red;
}

#header_menu_table .lang_ddmenu {
  display: none;
  flex-direction: column;
  width: 90px;
  position: absolute;
  z-index: 999;
  background-color: #000099;
}
#header_menu_table .lang_ddmenu li {
  color: black;
  background-color: white;
  border-radius: 0px !important;
  margin: 1px !important;
}
#header_menu_table .lang_ddmenu li:hover {
  background-color: rgb(200, 200, 200);
}
#header_menu_table .lang_ddmenu a:hover {
  text-decoration: none;
}
#header_menu_table .header_button_area {
  display: flex;
  justify-content: space-around;
}
#header_menu_table .header_link_area {
  display: flex;
} 
#header_menu_table .header_link a {
  color: white;
}
#header_menu_table .map_search_box {
  border: 1px solid #999;
  display: flex;
  margin-bottom: 0;
  margin-left: 3px;
  background-color: white;
}
#header_menu_table .map_search_box input {
  color: black;
  background-color: white;
  border: none;
  font-weight: 400;
  height: 28px;
  position: relative;
  width: 208px;
}
#header_menu_table .map_search_box .keyword_serch_button {
  border: none;
  border-left: 1px solid #999;
  cursor: pointer;
  margin: 1px;
  padding: 0;
  right: 0;
  top: 0;
  width: 28px;
  background-color: white;
}
#header_menu_table .map_search_box .keyword_serch_button svg {
  height: 18px;
  opacity: 1;
  padding-top: 3px;
  width: 18px;
}
#header_menu_table .map_search_box .keyword_serch_button svg g {
  fill: #999;
}

#menu_table table{
	xbackground:#000099;
}
#menu_table table th{
	color:#fff;
	text-align:center;
	font-size:1em;
	padding-top:10px;
}
#menu_table ul{
	background:#ccc;
	width:100%;
	padding:0;
	text-align: center; /* ������ */
}
#menu_table li{
        display: block;
	float: left;
	width: 16%;
	margin:0.6% 0 0.6% 0.6%;
	padding: 6px 0; 
	background:#fff;
	border:1% solid #000099;
	text-align:center;
}

.contents_menu ul{
	background:#ccc;
	width:90%;
	padding:0;
}
.contents_menu li{
  display: block;
	float: left;
	width: 10.9%;
	margin:0 0 0.2% 0.2%;
	padding: 10px 0; 
	background:#000099;
	color:#fff;
	text-align:center;
}

.c_title{
	xmargin-top:20px;
}

.clear{
	clear:both;
}
.clear br{
	display:none;
}
#opcntrol {
    position: absolute;
    top: 40px;
    right: 5px;
    background: #021c8b;
    color: #fff;
    font-weight: bold;
    padding: 21px 2px !important;
    display: none;
    cursor: pointer;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

	

@media only screen and (min-width:941px){
    #opcntrol {
        font-size:1em;
    }
}
/* ���j�^�[��940px�ȉ� */
@media only screen and (max-width:940px){

	*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}

	body{
	font-size:1em;
	}

    tbody tr{
        display: block;
        margin-bottom: 0;
    }
    tbody th,
    tbody td{
        display: list-item;
        border: none;
    }

    #menu_table li{
	width: 32.5%;
	margin:0 0 0.6% 0.6%;
    }

    .contents_menu ul{
	margin-top:-22px;
    }

    .contents_menu li{
	width: 32%;
	margin:0 0 0.8% 1%;
	}

    .c_title{
	padding:10px 10px 0;
	width:90%;
    }

    table.shop_list{
	width:90%;
    }

    .shop_list tr{
	margin-bottom:3px;
    }

    .shop_list td{
	width:100%;
	text-align:left;
	padding-left:2%;
    }
    .shop_list td img{
	width:2em;
	height:2em;
    }

    .hpb-cnt-tb-cell1 {
	width:90%;
    }

    td{
	list-style-type: none;
	min-height:1em;
    }

    th.top_title{
	padding-bottom:10px;
    }
    #opcntrol {
        font-size:.7em;
    }


.hpb-cnt-tb1{
  background-color: #333;
  border-top-width: 1px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #333333;
  border-right-color: #333333;
  border-bottom-color: #333333;
  border-left-color: #333333;
  margin:0;
}


}

@media only screen and (min-width:581px) {
  #header_menu_table .top_title {
    display: flex;
    align-items: center;
    padding: 0 30px;
  }
  #header_menu_table .top_title .title {
    white-space: nowrap;
  }
  #header_menu_table .button_list {
    width: 100%;
    margin-left: 15px;
  }
  #header_menu_table .button_list li {
    flex-grow: 1;
  }
  #header_menu_table .header_link_area {
    position: relative;
    padding: 3px 30px;
  }
  #header_menu_table .header_link_warap {
    width: 100%;
    display: flex;
  }  
  #header_menu_table .header_link_area .header_link {
    /* border-right: 1px solid white; */
    position: relative;
    margin-right: 1rem;
    margin-left: 1rem;
    flex-grow: 1;
  }
  #header_menu_table .header_link_area .header_link:nth-child(-n + 3)::after {
    /* 「-n + 3」で、3つ目までをこのスタイルを有効にしている。 */
    margin: 0 1rem;
    content: "";
    width: 1px;
    top: 30%;
    height: 50%;
    background-color: white;
    position: absolute;
    left: 100%;
  }
}

/* �X�}�[�g�t�H�� �c(�|�[�g���[�g) */
@media only screen and (max-width:580px){
  #header_menu_table .button_list {
    justify-content: space-around;
    flex-wrap: wrap;
  }
  #header_menu_table .button_list li {
    width: calc(50% - 6px);
    margin: 1px 3px;
  }
  #header_menu_table .lang_ddmenu {
    width: calc(50% - 9px);
  }
  #header_menu_table .lang_ddmenu li {
    width: 100%;
  }
  #header_menu_table .map_search_box {
    display: none;
  }
  #header_menu_table .header_link_area {
    justify-content: space-around;
    flex-wrap: wrap;
  }
  #header_menu_table .header_link_warap {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
  }  
  #header_menu_table .header_link {
    width: 50%;
    border: 1px solid white;
  }

  #menu_table li{
	width: 49%;
	margin:0 0 0.8% 0.8%;
	}

    .contents_menu li{
	width: 32%;
	margin:0 0 0.8% 0.8%;
	}
	
	.wrap { position: relative; width: 100%; height: 100%; min-height: 100%; }

	div#footer {
		background:#000099;
		padding: 3px 0 0 0;
 		bottom: 0;
 		z-index: 5000;
		position: fixed;
 		width: 100%;
	}
	
	table.shop_list tbody tr td:nth-child(2) { 
		min-height: 100px;
		height: auto;
		padding-top: 4px;
		padding-bottom: 6px;
	}	

	* html div#footer {
		position:absolute;
		bottom: expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1);
	}


}