﻿@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}

@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}

body {
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	line-height: 1.6;
	font-family: "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

h1, h2, h3, h4, h5, h6, p,
ul, ol, li, dl, dt, dd,
blockquote, form, input, select {
	margin: 0;
	padding: 0;
}

img {border: none;}
li, dt, dd {line-height: 1.2em;}
table {line-height: 1.6em;}

a:link, a:visited {
	text-decoration: underline;
	background-color: transparent;
	color: #000000;
}
a:hover {text-decoration: none;}

.BrowserBreadCrumbs a:link, .BrowserBreadCrumbs a:visited,
#RightPane a:link, #RightPane a:visited {
	text-decoration: underline;
	background-color: transparent;
	color: none;
}

.BrowserBreadCrumbs a:hover,
#RightPane a:hover {text-decoration: none;}

#BaseTable {
	width: 100%;
	margin: 0px auto;
}

#Middle {
	margin: 0px auto;
}

/*
#ContentPane {
	width: 690px;
	float: left;
	display: inline;
}

#RightPane {
	float: right;
	width: 220px;
}
*/

#FooterPane {
  width: 100%;
  position: relative;
}

#gotop ul {
	margin: 0 auto;
	width: 936px;
}

#gotop li {list-style: none;}

#gotop li.gotop_l {
	background: url("../images/base/arrow01.gif") no-repeat scroll left 27px transparent;
	float: left;
	list-style: none outside none;
	padding-left: 15px;
	padding-top: 24px;
	text-align: left;
	width: 700px;
}

#gotop li.gotop_r {
	background: url("../images/base/gotop.gif") no-repeat scroll left top transparent;
	float: right;
	height: 42px;
	list-style: none outside none;
	margin: 10px 0;
	text-align: right;
	width: 200px;
}

#gotop li.gotop_r a {
	display: block;
	height: 42px;
	width: 200px;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {min-height: 1px;}

* html .clearfix {
	height: 1px; /*¥*/ /*/
  height: auto;
  overflow: hidden;
  /**/
}

.img_left {
	margin-right: 10px;
	margin-bottom: 10px;
}

.img_right {
	margin-left: 10px;
	margin-bottom: 10px;
}

.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb10lpb10 {
	margin-bottom: 10px;
	border-bottom: 1px dotted #000000;
	padding-bottom: 10px;
	width: 100%;
}

#walkingmap h2 {
	background: url(../images/h22021rn/h2_walkingmap.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#access h2 {
	background: url(../images/h22021rn/h2_access.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#about h2 {
	background: url(../images/h22021rn/h2_about.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#sitemap h2 {
	background: url(../images/h22021rn/h2_sitemap.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#usability h2 {
	background: url(../images/h22021rn/h2_usability.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#walkingevent h2 {
	background: url(../images/h22021rn/h2_walkingevent.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#walkingcolumn h2 {
	background: url(../images/h22021rn/h2_walkingcolumn.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#essay h2 {
	background: url(../images/h22021rn/h2_essay.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#media h2 {
	background: url(../images/h22021rn/h2_media.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#category h2 {
	background: url(../images/h22021rn/h2_category.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#scene h2 {
	background: url(../images/h22021rn/h2_scene.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#time h2 {
	background: url(../images/h22021rn/h2_time.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#difficulty h2 {
	background: url(../images/h22021rn/h2_difficulty.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#area h2 {
	background: url(../images/h22021rn/h2_area.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#allroute h2 {
	background: url(../images/h22021rn/h2_allroute.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#kuni-route h2 {
	background: url(../images/h22021rn/h2_kuni-route.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#town-route h2 {
	background: url(../images/h22021rn/h2_town-route.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#other-route h2 {
	background: url(../images/h22021rn/h2_other-route.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#c_bus h2 {
	background: url(../images/h22021rn/h2_c_bus.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#news h2 {
	background: url(../images/h22021rn/h2_news.png) left top no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
	height: 50px;
}

#walkingmap p, #access p, #about p, #sitemap p,
#usability p, #walkingevent h2, #walkingcolumn p,
#essay p, #media p, #category p, #scene p, #time p, 
#difficulty p, #area p, #allroute p {
	width: 650px;
	padding-left: 20px;
	margin-bottom: 30px;
}

@media screen and (max-width: 640px) {
	#Middle {padding-top: 83px !important;}
  #ContentPane {
    width: 90%;
  }
  #RightPane {
    marign: 0 auto !important;
    width: 220px;
  }
}

@media screen and (min-width: 641px) {
	#Middle {
    width: 936px;
		position: relative;
		padding-top: 160px;
    padding-bottom: 100px;
    display: flex;
    justify-content: space-between;
	}

  #ContentPane {
    width: 690px;
    flex: 0 0 690px;
  }
  #RightPane {
    width: 220px;
    flex: 0 0 220px;
  }
}