/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Sapporo ll ウェブサイト用 CSS
Writtened by：Ayako Okada
meimayday@hotmail.com
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
* {
	margin: 0;
	padding: 0;
}
html,body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	color:#3a3a3a;
	background: url(img/background_map2.gif) no-repeat scroll right bottom;
}
li {
	list-style-type: none;
}
a {
	color: #CC9900;
	text-decoration: none;
	border: 0;
}
.sitemap li {
	list-style: disc outside; 
}
/* -------------------------------------------
全体コンテナ（全ページ共通CSS） ok
------------------------------------------- */
div#container {
	position: relative;
	min-height: 100%;
	margin: 0 auto;
	font-size: 0.8em;
}
* html div#container {
	height: 100%;
}
/* -------------------------------------------
トップ～フッター上コンテナ（全ページ共通CSS） ok
------------------------------------------- */
div#main {
	padding-bottom: 1em;
	text-align: center;
	margin: 0 auto;
	padding-top: 12px;
}
/* -------------------------------------------
ヘッダー(top)
------------------------------------------- */
#header_top {
	position: relative;
	width: 900px;/* 中央コンテナの横幅 */
	height: 70px;
	font-size: 0.8em;
	margin: 0 auto;
	text-align: left;
}
#header_top hr {
	display: block:
	width: 100%;
	height: 1px;
	margin: 3px 0;
	padding: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid #c0c0c0;
}
#header_top p.head_lang {
	height: 20px;
}
#header_top p.head_lang a {
	color: #3a3a3a;
}
#header_top p.head_info {
	margin-top: -20px;
}
#header_top p.head_info a {
	color: #3a3a3a;
	background-image: url("img/icon02.gif");
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 12px;
	margin-right: 3px;
}

#header {
	position: relative;
	width: 900px;/* 中央コンテナの横幅 */
	height: 50px;
	font-size: 0.8em;
	margin: 0 auto 10px auto;
	text-align: left;
	line-height:50px;
	border-bottom: 1px solid #c0c0c0;
	vertical-align:middle;
}
#header hr {
	display: block;
	width: 100%;
	height: 1px;
	margin: 3px 0;
	padding: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid #c0c0c0;
}
#header.head_lang {
	float: left;
	width:350px;
	height:46px;
	line-height:46px;
}
#header.head_lang a {
	color: #3a3a3a;
}
#header.head_lang img {
		vertical-align: middle;
	}
#header.head_info {
	float: right;
	width:400px;
	height:46px;
	line-height:46px;
}
a.tmenu {
	color: #3a3a3a;
	background-image: url("img/icon02.gif");
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 12px;
	margin-right: 3px;
}
/* -------------------------------------------
ヘッダー（アイコン大ページ共通CSS）ok
------------------------------------------- */
#header_l {
	position: relative;
	width: 900px;/* 中央コンテナの横幅 */
	height: 170px;
	font-size: 0.8em;
	margin: 0 auto;
	text-align: left;
}
#header_l hr {
	display: block:
	width: 100%;
	height: 1px;
	margin: 3px 0;
	padding: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid #c0c0c0;
}
/* -------------------------------------------
TOP画像用 ok
------------------------------------------- */
#top_img {
	width: 900px;
	height: 345px;
	margin: 0 auto;
	text-align: left;
}
/* -------------------------------------------
メニュー（全ページ共通CSS）ok
------------------------------------------- */
#menu {
	width: 900px;
	height: 40px;
	margin: 0 auto;
	background-color: #808080;
	text-align: left;
}
/* メニュー上部隙間対策IE6ハック */
* html #menu { margin-top: -3px; } 

/* -------------------------------------------
メニュー（アーカイブ用）
------------------------------------------- */
.menu_archives {height:60px; line-height:60px; margin:0 0 30px 0; background-color:#cdeaf7;}
.menu_archives ul {margin:0 30px;}
.menu_archives ul li {float:left; text-indent:10px; margin-left:20px;background-image:url(img/arrow_navy.gif); background-position:center left; background-repeat:no-repeat;}
.menu_archives a {color:#009; text-decoration: none; border: 0;}
.menu_archives a:hover {color:#06F; text-decoration: none; border: 0;}
/* -------------------------------------------
コンテンツ（全ページ共通CSS）ok
------------------------------------------- */
#containts{
	display:block;
	width: 900px;
	margin: 0 auto;
	text-align: left;
}
p.icon03 {
	color: #3a3a3a;
	background-image: url("img/icon02.gif");
	background-repeat: no-repeat;
	background-position: left center;
	padding-left:20px;
}
#containts strong {font-size:16px; font-weight:bold;}
#containts hr {margin-top: 7px; margin-bottom:7px;border-width: 3px 0px 0px 0px; border-style:solid; height:1px; border-color:#333;}
/* -------------------------------------------
コンテンツ（サブメニューのあるページ）-プロジェクト概要
------------------------------------------- */
#containts_sub {
	display: block;
	width: 900px;
	margin: 0 auto;
	text-align: left;
	background: url("img/bg_sub_m_l.gif") scroll repeat-y left;
}
#containts_sub div.sub_m_l {
	float: left;
	width: 215px;
	height:500px;
}
#containts_sub div.sub_m_l div {
	margin: 20px;
}
#containts_sub div.sub_m_l div ul {
	margin-top: 35px;
}
#containts_sub div.sub_m_l div ul li {
	margin: 0 0 20px 0;
}
#containts_sub div.sub_m_l div ul li a {
	color: #3a3a3a;
	background-image: url("img/icon02.gif");
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 15px;
	margin-right: 3px;
}
#containts_sub div.contents_r {
	float: left;
	width: 650px;
}
#containts_sub div.contents_r div {
	margin: 20px 0 20px 20px;
}
/* -------------------------------------------
コンテンツ（サブメニューのあるページ）-終了したイベント
------------------------------------------- */
#containts_sub_a {
	display: block;
	width: 900px;
	margin: 0 auto;
	text-align: left;
	color:#3a3a3a;
	font-size:12px;
}
.archives_ttl {margin-bottom: 20px; margin-top:30px;font-family:"Courier New", Courier, monospace; font-size:50px; font-weight:bold; color:#333; line-height:1em;}
.archives_ttl a {font-family:"Courier New", Courier, monospace; font-size:50px; font-weight:bold; color:#dd8a35;}
.archives_ttl a.now {font-family:"Courier New", Courier, monospace; font-size:50px; font-weight:bold; color:#FC0;}
#containts_sub_a strong {font-size:16px; font-weight:bold;}
#containts_sub_a hr {margin-top: 5px; margin-bottom:5px;border-width: 3px 0px 0px 0px; border-style:solid; height:1px; border-color:#333;}
#containts_sub_a div.contents_r {
	float: left;
	width: 760px;
}
#containts_sub_a div.contents_r div {
	margin: 20px 0 20px 20px;
}
#containts_sub_a div.contents_r div.textarea02 {
margin: 20px 0;
}
/* Hyper Space Sapporo2 */
#hpss2 li {
 list-style: none;
 line-height: 2em;
}
#hpss2 p {
 list-style: none;
 font-weight:bold;
 font-size:1.5em;
 margin-top: 20px;
}

/* カレンダー */
#callender {width: 850px; height: 850px; background-image: url(img/callender.gif); position:relative;}
#callender li#event01 a {width:10px; height:50px; display:block; background-color:#7B3A92; position:absolute;top: 0px; left: 225px;}
#callender li#event02_1 a {width:10px; height:28px; display:block; background-color:#036EB8; position:absolute;top: 42px; left: 272px;}
#callender li#event02_2 a {width:10px; height:28px; display:block; background-color:#036EB8; position:absolute;top: 259px; left: 693px;}
#callender li#event03 a {width:10px; height:300px; display:block; background-color:#7B3A92; position:absolute;top: 69px; left: 647px;}
#callender li#event04 a {width:10px; height:28px; display:block; background-color:#7B3A92; position:absolute;top: 123px; left: 600px;}
#callender li#event05 a {width:10px; height:110px; display:block; background-color:#2EA7E0; position:absolute;top: 150px; left: 553px;}
#callender li#event06 a {width:10px; height:110px; display:block; background-color:#2EA7E0; position:absolute;top: 150px; left: 506px;}
#callender li#event07 a {width:10px; height:462px; display:block; background-color:#00A29A; position:absolute;top: 259px; left: 460px;}
#callender li#event08 a {width:10px; height:28px; display:block; background-color:#036EB8; position:absolute;top: 205px; left: 414px;}
#callender li#event09 a {width:10px; height:55px; display:block; background-color:#036EB8; position:absolute;top: 69px; left: 365px;}
#callender li#event10 a {width:20px; height:10px; display:block; background-color:#00A29A; position:absolute;top: 30px; left: 780px;}
#callender li#event11 a {width:10px; height:707px; display:block; background-color:#7B3A92; position:absolute;top: 123px; left: 320px;}
#callender li#event12 a {width:10px; height:55px; display:block; background-color:#FFE200; position:absolute;top: 395px; left: 272px;}
#callender li#event13 a {width:10px; height:55px; display:block; background-color:#EB6100; position:absolute;top: 639px; left: 225px;}
/* -------------------------------------------
ソーシャルネットワーク
------------------------------------------- */
.twitter {
	width: 110px;
	float: right;
}
.facebook {
	width:110px;
	float: right;
}

/* -------------------------------------------
フッター（全ページ共通CSS）ok
------------------------------------------- */
div#footer {
	position: absolute; bottom: 0;
	width: 100%;
	height: 25px;
	line-height: 25px;
	text-align: center;
	font-size: 0.75em;
	color: #FFFFFF;
	background-color: #3a3a3a;
}
/* -------------------------------------------
clearfix（全ページ共通CSS）ok
------------------------------------------- */
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
} /*IE7以外のモダンブラウザ向け*/

.clearfix{display:inline-block;} /*IE7およびMacIE5向け*/

/*Hides from IE-mac\*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*End hide from IE-mac*/ /*IE6以前向け*/
/* *******************************************
ページ装飾
******************************************* */
/* H2（サブメニューなし） */
#containts h2 {
margin: 35px 0 0 0;
background-image: url(../img/ico_titlehead.gif);
background-repeat:no-repeat;
text-indent:20px;
color:#666;
}
/* H2（サブメニューあり） */
.contents_r h2 {
margin: 35px 0 0 0;
background-image: url(../img/ico_titlehead.gif);
background-repeat:no-repeat;
text-indent:20px;
}
/* H3（サブメニューなし） */
#containts h3 {
margin: 30px 0 10px 0;
}
/* H3（サブメニューあり） */
.contents_r h3 {
margin: 30px 0 10px 0;
}
/* テキストエリア（サブメニューなし） */
.textarea01 {
margin: 10px;
padding: 10px;
width: 100%;
}
.textarea01 p {
margin: 3px 0;
padding-top: 3px;
padding-bottom: 3px;
width: 100%;
}
.textarea01 blockquote {margin-left:30px;margin-top:10px;margin-bottom:10px;padding-left:20px;color:#333;font-size:0.9em; border-left:solid 2px #999;}
/* テキストエリア（サブメニューあり） */
.textarea02 {
margin: 20px 0 20px 10px;
}
.textarea02 p {
	margin: 6px 0;
	width: 100%;
}
/* ページ最下部スペーサー */
.page_bottom_spacer {
	margin: 60px 0 0 0;
}
/* *******************************************
汎用css
******************************************* */
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}

.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr40 {margin-right:40px;}
.mr50 {margin-right:50px;}

.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}

.ml3 {margin-left:3px;}
.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml40 {margin-left:40px;}
.ml50 {margin-left:50px;}

.pt5 { padding-top:5px; }
.pt10 { padding-top:10px; }
.pt20 { padding-top:20px; }
.pt30 { padding-top:30px; }
.pt40 { padding-top:40px; }
.pt50 { padding-top:50px; }

.pb5 { padding-bottom:5px; }
.pb10 { padding-botto:10px; }
.pb20 { padding-botto:20px; }
.pb30 { padding-botto:30px; }
.pb40 { padding-botto:40px; }
.pb50 { padding-botto:50px; }

.ptb3 {padding-top:3px; padding-bottom:3px; }

.bgyellow { background-color: #FF0;}
.bggray { background-color:#efefef; padding:3px; }
.arrow { background: url("img/icon02.gif") no-repeat left center;text-indent: 15px;margin-right: 3px; }
.red {color:#F00;}
.end { padding:5px; margin-left:10px;color:#FFF; background-color:#F00; text-decoration:none;}
.caption { font-size: 0.8em; font-weight:normal; }
/* *******************************************
smartPopup設定
******************************************* */
div.tooltip	{
	width: 250px;
	position: absolute;
	left: -9999px;
	background: #EEE;
	padding: 5px;
	border: 1px solid #AAA;
}

div.tooltip p{
	color: #FFF;
	background: #222;
	padding: 5px 10px;
	font-size:10px;
}