/* =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���[����*/
#menu_table{
	background:#000099;
	text-align:center;
}

#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;
}


}

/* �X�}�[�g�t�H�� �c(�|�[�g���[�g) */
@media only screen and (max-width:580px){
    #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);
	}


}