/* ------------------------------

 ------------------------------ */
body {
	/*
	background: url(/images/top/bg01.jpg) repeat-x center 80px;
	*/
}

body > div {
	position: relative;
	z-index: 10;
}

#bg {
	position: absolute;
	top: 80px;
	left: 0;
	width: 100%;
	height: 720px;
	z-index: 1 !important;
}

#bg div {
	background-repeat: repeat-x;
	background-position: center 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index:1;
}
#bg div#bg01 { background-image: url(/images/top/bg01_2015.jpg); height: 720px; }
#bg div#bg02 { background-image: url(/images/top/bg02_2015.jpg); height: 720px; }
#bg div#bg03 { background-image: url(/images/top/bg03_2015.jpg); z-index: 3 }

/* ------------------------------
 MV
 ------------------------------ */
#mv {
	background: url(/images/top/mv_bg01.png);
	margin: 0 auto;
	position: relative;
	width: 960px;
	height: 520px;
}

#mv h1 {
	background-image: url(/images/top/mv_img01.png);
	background-position: 0 bottom;
	margin: 0 auto;
	width: 580px;
	height: 400px;
}

#mv a {
	background-image: url(/images/top/mv_img02_2019.png);
	background-position: 0 0;
	margin: 0 auto;
	position: absolute;
	top: 340px;
	left: 240px;
	width: 480px;
	height: 60px;
	z-index: 2;
}

#mv a:hover {
	background-position: 0 -60px;
}

/* ------------------------------
 Map
 ------------------------------ */
#map {
	margin: 0 auto;
	position: relative;
	width: 960px;
	height: 520px;
}

#map h2 {
	background: url(/images/top/map_img01.png) no-repeat 0 0;
	overflow: hidden;
	position: absolute;
	top: -60px;
	left: 350px;
	text-indent: 100%;
	white-space: nowrap;
	width: 260px;
	height: 130px;
	z-index: 2;
}

#map_wrap {
	background: #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	height: 400px;
	margin-bottom: 10px;
	padding: 4px;
}

#map_body {
	width: 952px;
	height: 392px;
}

#map_body > div {
	z-index: auto !important;
}

#map_progress {
	border: 1px solid #e1dbd6;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	padding: 9px 14px;
}

#map_progress_bar {
	background: url(/images/top/map_progress_bg01.png) 0 0;
	height: 10px;
	overflow: visible;
	position: relative;
}

#map_progress_bar_now {
	background: url(/images/top/map_progress_bg02_2019.png) 0 0;
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0px;
	height: 10px;
	z-index: 98;
}

#map_progress_dot_now {
	background: url(/images/top/map_progress_img01_2019.png) 0 0;
	overflow: hidden;
	position: absolute;
	top: -10px;
	left: -15px;
	width: 30px;
	height: 30px;
	z-index: 100;
}

#map_progress_runner {
	background: url(/images/common/icon_runner01_2019.png) 0 0;
	overflow: hidden;
	position: absolute;
	top: -95px;
	left: -60px;
	width: 90px;
	height: 90px;
	z-index: 100;
}

#map_progress_goal {
	background: url(/images/top/map_progress_img02.png) 0 0;
	overflow: hidden;
	position: absolute;
	top: -75px;
	left: 910px;
	width: 80px;
	height: 100px;
	z-index: 99;
}

#map_progress_km {
	background: url(/images/top/map_progress_img03_2019.png) 0 0;
	display: none;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	top: -170px;
	left: -80px;
	width: 160px;
	height: 80px;
	z-index: 100;
}

#map_progress_km p {
	color: #009cc0;
	padding-top: 18px;
	text-align: center;
}

#map_progress_km p strong {
	font-size: 140%;
}

#map_progress_km p span {
	font-size: 80%;
}

#map p.notice {
	color:  #808080;
	font-size: 80%;
	padding: 10px 0 0;
}

/* ------------------------------
 Cource
 ------------------------------ */
#cource {
  background: #fff;
  margin: 0 auto 60px;
  width: 960px;
}

#cource table {
  border: 2px solid #004dcc;
  width: 100%;
}

#cource th,
#cource td {
  line-height: 1.5;
  padding: 15px 20px;
  vertical-align: middle;
}

#cource thead th {
  background: #004dcc;
  color: #fff;
  font-size: 120%;
  text-align: center;
}

#cource tbody td {
  border-left: 1px solid #c3c2c0;
  border-bottom: 1px solid #c3c2c0;
}
#cource tbody td.cell1,
#cource tbody td.cell2 {
  width: 100px;
}
#cource tbody td.cell1 {
  border-left: none;
}
#cource tbody td.cell3 {
  width: 120px;
}
#cource tbody td.cell4 {
  text-align: left;
}

#cource tbody td.cell3 a {
	background: url(/images/common/icon_runner01_2019_map.png) no-repeat 0 0;
  display: inline-block;
  width: 60px;
  height: 60px;
  vertical-align: middle;
}
#cource tbody td.cell3 a:hover {
  background-position: 0 -60px;
}

/* ------------------------------
 News, About
 ------------------------------ */
#news_about {
	margin: 0 auto;
	width: 960px;
	height: 550px;
}

#news_about .en,
#news_about h2 {
	background-position: 0 0;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 460px;
	height: 30px;
}

#news_about h2 {
	height: 90px;
}

#news,
#twitter_widget {
	float: left;
	position: relative;
	width: 460px;
	height: 490px;
}

#twitter_widget {
	float: right;
}

#twitter_widget .widget {
  border: 1px solid #f4f2f0;
  border-bottom: none;
}

#twitter_widget .en {
  background-image: url(/images/top/twitter_img01_2019.png);
}

#news div.content,
#about div.content {
	background: #f4f2f0;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	height: 460px;
	text-align: left;
}

#news .en {
	background-image: url(/images/top/news_img01_2019.png);
}

#news h2 {
	background-image: url(/images/top/news_img02_2019.png);
}

#news .list {
	background: url(/images/common/dot.png) repeat-x 0 0;
	height: 370px;
	overflow: auto;
}

#news li a {
	background: url(/images/common/icon_flag01.png) no-repeat 15px 18px;
	display: block;

	-webkit-transition: background-color 0.3s ease-out;
	transition: background-color 0.3s ease-out;
}

#news li a:hover {
	background-color: #fff9ec;
}

#news li a span {
	display: block;
	padding-right: 40px;
	padding-left: 70px;
}

#news li span.date {
	background: url(/images/common/dot.png) repeat-x 0 0;
	color: #004dcc;
	font-weight: bold;
	font-size: 85%;
	padding-top: 20px;
}

#news li span.title {
	color: #333;
	font-weight: bold;
	font-size: 130%;
	line-height: 1.3;
	padding-bottom: 5px;
}

#news li span.body {
	color: #666;
	line-height: 1.5;
	padding-bottom: 15px;
}

#about {
  margin: 0 auto;
  padding-bottom: 60px;
  width: 960px;
}

#about .en,
#about h2 {
	background-position: 0 0;
	background-repeat: no-repeat;
  margin-right: auto;
  margin-left: auto;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 460px;
	height: 30px;
}

#about .en {
	background-image: url(/images/top/about_img01_2019.png);
}

#about h2 {
	background-image: url(/images/top/about_img01_2019_02.png);
  height: 30px;
  margin-bottom: 15px;
  width: 960px;
  height: 20px;
}

#about div.content {
	background: #f4f2f0 url(/images/top/about_bg01.png) no-repeat 0 -115px;
  height: auto;
  padding: 50px 40px 40px 300px;
}

#about h3 {
	color: #ed1c24;
	font-size: 120%;
  margin-bottom: 15px;
  /*
	padding: 100px 40px 10px;
  text-align: center;
  */
}

#about h4 {
	font-weight: normal;
  margin-bottom: 25px;
}

#about a {
	background: #ed1c24;
	-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
	box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
	color: #fff;
	display: block;
	font-size: 120%;
	line-height: 20px;
  /*
  margin-right: auto;
  margin-left: auto;
  */
	padding: 15px 0;
  /*
	position: absolute;
	bottom: 40px;
	left: 100px;
  */
	text-align: center;
	width: 260px;
	z-index: 2;
}

#about a:hover {
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}

#about img.runner {
	position: absolute;
	top: 110px;
	left: 100px;
	z-index: 2;
}

.mCSB_dragger_bar {
	background: #009cc0 !important;
	-moz-border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
	border-radius: 0 !important;
	width: 10px !important;
}

.mCSB_draggerRail {
	background: #e1dbd6 !important;
	-moz-border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
	border-radius: 0 !important;
	width: 10px !important;
}

.mCSB_container {
	margin-right: 0 !important;
}

.mCSB_scrollTools {
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
	width: 10px !important;
}


/* ------------------------------
 Comment
 ------------------------------ */
#comment {
	margin: 0 auto;
	padding-bottom: 60px;
	width: 960px;
}

#comment h3 {
	background: url(/images/top/comment_img01_2019.png) no-repeat 0 0;
	margin-bottom: 15px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 960px;
	height: 20px;
}

#comment div {
	background: #f4f2f0 url(/images/top/comment_img02.png) no-repeat 30px center;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	font-size: 110%;
	letter-spacing: 2px;
	line-height: 2;
	padding: 30px 30px 30px 200px;
	text-align: left;
}

#comment div p.name {
	font-weight: bold;
	padding-top: 10px;
}


/* ------------------------------
 Smile Tohoku Project
 ------------------------------ */
#smile {
	margin: 0 auto;
	padding-bottom: 60px;
	width: 960px;
}

#smile h3 {
	background: url(/images/top/smile_img01.png) no-repeat 0 0;
	margin-bottom: 15px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 960px;
	height: 20px;
}

#smile p {
	background: #f4f2f0;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	font-size: 110%;
	letter-spacing: 2px;
	line-height: 2;
	padding: 30px;
	text-align: left;
}

/* ------------------------------
 Sponsor
 ------------------------------ */
#sponsor {
	margin: 0 auto;
	padding-bottom: 45px;
	width: 960px;
}

#sponsor h3 {
	background: url(/images/top/sponsor_img01_2019.png) no-repeat 0 0;
	margin-bottom: 30px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 960px;
	height: 20px;
}

#sponsor ul {
  display: block;
  text-align: center;
}

#sponsor li {
  display: inline-block;
  padding: 0 15px 30px;
  text-align: center;
}

#sponsor li a {
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	overflow: hidden;
  text-align: left;
	text-indent: 100%;
	white-space: nowrap;
}


#sponsor li.sponsor01 a { background-image: url(/images/top/sponsor_img02_2019.png); width: 480px; height: 180px; }
#sponsor li.sponsor02 a { background-image: url(/images/top/sponsor_img03_2019.png); width: 170px; height: 200px; }
#sponsor li.sponsor03 a { background-image: url(/images/top/sponsor_img04_2019.png); width: 360px; height: 60px; }
