@charset "utf-8";
/*
Theme Name: theme161
Theme URI: http://theme.o2gp.com/
Description: theme161
Version: 1.0
Author: o2 Group
Author URI: http://theme.o2gp.com/
Tags: simple

	o2 Group v1.0
	 http://theme.o2gp.com/

	This theme was designed and built by o2 Group,
	whose blog you will find at http://theme.o2gp.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

*{margin:0;padding:0;}

body{
background:url(images/header.gif) repeat-x;
font: 90% Sans-Serif;
line-height:150%;
color:#252525;
}

a{color:#820f0f;}
a:hover{color:#bd4545;text-decoration:none;}
a:active, a:focus {outline: 0;}
img{border:0;}
p {margin-bottom:12px;}

.clear{clear:both;}
.left{text-align:left;}
.center{text-align:center;}
.right{text-align:right;}
.float_left {float:left;}
.float_right {float:right;}

table {
	border:1px solid #CACACA;
	border-collapse : collapse;
	background:#FCF8F3;
	margin:10px 0px;
	line-height: 18px;
	font-family: "MS UI Gothic";
	font-weight: normal;
	word-break: break-all;
}

th {
	border:1px solid #CACACA;
	background:#830000;
	padding:6px;
	color:#FFFFFF;
	line-height: 18px;
	font-family: "MS UI Gothic";
	font-weight: normal;
	word-break: break-all;
	text-align:center;
}

td {
	border:1px solid #CACACA;
	background:#FFFFFF;
	padding:6px;
	line-height: 18px;
	font-family: "MS UI Gothic";
	font-weight: normal;
	word-break: break-all;
	text-align:left;

}

.color-cell {
	background:#FAF8F0;
}

.color-blue {
	color:#0086ED;
}

.color-red {
	color:#ED0000;
}

.mgb10 {margin-bottom:10px !important;}

.mgb20 {margin-bottom:20px !important;}

/*******************************
全体幅
*******************************/
#wrapper, #header, #container, .inner{
margin: 0 auto;
width: 960px;
}

#wrapper {
	position: relative;
}

/*******************************
/* ヘッダー
*******************************/
#header{
height: 130px;
position: relative;
}

#header h1,#header h2, #header h3, #header ul, #header .banners{
position:absolute;
top:0;
color: #fff;
font-size: 12px;
line-height: 30px;
}

#header h2{right:0;}

/* ロゴの位置 */
#header h3{top: 59px;}


/******************
/* ヘッダーナビゲーション
******************/
#header ul{
top: 44px;
right:175px;
width: 274px;
height: 14px;
background: url(images/topnav.png) no-repeat 0 0;
line-height:14px;
}

#header ul li{float:left;list-style:none;}

#header ul a{
text-indent: -9999px;
text-decoration: none;
display: block;
height: 14px;
background: url(images/topnav.png) no-repeat;
}

#header ul a#toppage{background-position:0 0;width: 110px;}
#header ul a#sitemap{background-position:-110px 0;width:86px;}
#header ul a#linkpage{background-position:-197px 0;width:77px;}

#header ul a#toppage:hover, #header ul li.active a#contact{background-position:0 -14px;}
/* #header ul a#contact:hover, #header ul li.active a#contact{background-position:-97px -14px;}*/
#header ul a#sitemap:hover, #header ul li.active a#sitemap{background-position:-110px -14px;}
#header ul a#linkpage:hover, #header ul li.active a#linkpage{background-position:-197px -14px;}

/******************
/* ヘッダー　バナー
******************/
#header .banners{
right:-10px;
top:70px;
}

#header .banners img{margin-right:10px;}


/************************************
/* メインナビゲーション
************************************/
ul#mainnav{
margin: 0 auto;
width: 960px;
height: 60px;
background: url(images/mainnav.png) no-repeat 0 0;
}

ul#mainnav li{float:left;list-style:none;width:192px;}

ul#mainnav a{
text-indent: -9999px;
text-decoration: none;
display: block;
width: 192px;
height: 60px;
background: url(images/mainnav.png) no-repeat 0 0;
}

ul#mainnav a#home{background-position:0 0;}
ul#mainnav a#menu1{background-position:-192px 0;}
ul#mainnav a#menu2{background-position:-384px 0;}
ul#mainnav a#menu3{background-position:-576px 0;}
ul#mainnav a#menu4{background-position:-768px 0;}


ul#mainnav a#home:hover, ul#mainnav li.active a#home{background-position:0 -60px;}
ul#mainnav a#menu1:hover, ul#mainnav li.active a#menu1{background-position:-192px -60px;}
ul#mainnav a#menu2:hover, ul#mainnav li.active a#menu2{background-position:-384px -60px;}
ul#mainnav a#menu3:hover, ul#mainnav li.active a#menu3{background-position:-576px -60px;}
ul#mainnav a#menu4:hover, ul#mainnav li.active a#menu4{background-position:-768px -60px;}



/*******************************
メイン画像
*******************************/
#mainImage{
padding: 12px 0 0;
background:#fff;
}


/*******************************
コンテンツ位置
*******************************/
#container{
padding: 20px 0;
position: relative;
}

#main {
width: 960px;
padding-bottom:0px;
}

#main2 {
width: 760px;
padding-bottom:0px;
float:right;
}

* html #main2 {
width: 759px;
}

#sidebar {
float: left;
width: 180px;
padding-bottom:40px;
font-size:13px;
}


/*************************
/* ボックスの囲み
/* .boxContainer
/* 背景画像でボックスの高さを調整
/* 
/* 各ボックス
/* .box1 1番目の2つのbox
/* .box2 2番目の3つのbox（画像）
/* .box3 3番目の2つのbox
/* .box4 4,5番目の1つのbox
/* #sidebar .box1 サイドバーのbox
*************************/
.boxContainer{
width:715px;
margin:0 auto 20px;
background: url(images/box1.gif) 0 100%;
}

.box1,.box2, .box3, .box4{
float: left;
width: 225px;
margin: 0 20px 20px 0;
}

.box1, .box3, .box4{
width:327px;
margin:0 21px 0 0;
padding: 10px;
border-top:1px solid #dadada;
}

#sidebar .box1{
width:164px;
padding: 10px 7px;
border:1px solid #dadada;
background: #fff;
}

.box3{
width:347px;
padding:0 0 10px;
}

.box4{
margin:0 0 20px 0;
padding:0;
width:715px;
border:1px solid #dadada;
background: #fff;
}

/* 最後のbox */
.last{margin-right:0;}


/* 画像を中央表示 */
.box1 .center{padding-bottom:10px;}

/* 画像を左に回りこみ */
.box4 img{
float:left;
margin: 0 10px 10px;
}

.box4 h4 img{float:none;margin:0 0 10px;}

.box4 p{padding: 0 10px 10px;}



#date {
text-align: right;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 10px;
font-weight:bold;
color:#858585;
}

#next {
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
}
img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}
.alignright {
    float: right;
}
.alignleft {
    float: left;
}

.box_img_border{
   border: 1px solid #cccccc;
   padding: 1px;
  margin: 1px;
}

.content-left {
   float: left;
   /*width: 200px;*/
   margin-right: 10px;
}
.content-right {
   float: left;
}


/*************
/* 見出し
*************/
.box3 h4{margin-bottom:10px;}

h3.border{
padding-bottom:8px;
margin:15px 0px 10px 0px;
color: #820f0f;
background: url(images/h3.gif) repeat-x 0 100%;
}

#container h2#first{
padding: 0 5px 0 20px;
margin:0 0 10px 0;
line-height:45px;
font-size: 140%;
color:#820f0f;
background: url(images/h2Bg.png) no-repeat 0 100%;
}

#container h2{
padding: 0 5px 0 20px;
margin:10px 0px;
line-height:45px;
font-size: 140%;
color:#820f0f;
background: url(images/h2Bg.png) no-repeat 0 100%;
}

#container .box4 h3{
padding: 7px 5px;
}

/*************
/* リスト
*************/
#container ul{margin-left: 5px;}

#container ul li, #footerUpper ul li{
list-style: none;
margin-bottom: 6px;
padding: 0 5px 0 12px;
background: url(images/bullet2.gif) no-repeat 0 6px;
}

.2nd {
list-style: none;
margin:0px 0px 6px 12px;
padding: 0 5px 0 12px;
background: url(images/bullet.gif) no-repeat 0 7px;
}

#container .box3 ul{padding: 0 5px;}

#sidebar ul{margin-left:3px;}

/*************
サイド（右側）コンテンツ
*************/
#sidebar p{margin-bottom:20px;}
#sidebar ul{margin-bottom:10px;}


/*******************************
/* フッター
*******************************/
#footerUpper{
clear:both;
padding: 0px 0;
border-bottom:1px solid #5d5d5d;
overflow: hidden;
background:#888888;
}

#footerUpper .inner{
background: url(images/footerBorder.gif) repeat-y;
}

#footerUpper ul li{
color:#fff;
background: url(images/bullet.gif) no-repeat 0 6px;
}

#footerUpper a{color:#fff;}
#footerUpper a:hover{color:#eeeeee;}

#footerLower{
clear:both;
padding: 10px;
text-align:center;
border-top:1px solid #7e7e7e;
background:#5d5d5d;
}

address{
color: #fff;
font-style:normal;
font-size:13px;
}



/********* 以下、コスモテックオリジナルクラス *********/

/*******************************
/* トップページ催物情報
*******************************/
h4#index {
	margin-bottom:10px;
	width:960px;
	height:45px;
	background: url(images/bg_sttl.gif) no-repeat;
	line-height:42px;
	margin-bottom:10px;
}

h4#index p {
	margin-left:20px;
	color:#820F0F;
	font-size:140%;
}

div.eventbox_left {
	width:468px;
	border:1px solid #DADADA;
	float:left;
	margin-bottom:20px;
}

div.eventbox_right {
	width:468px;
	border:1px solid #DADADA;
	float:right;
	margin-bottom:20px;
}


div.eventtitle {
	width:448px;
	height:36px;
	background: url(images/bg_eventtitle.gif);
	margin:10px;
}

div.eventtitle p {
	margin-left:10px;
	line-height:36px;
	font-weight:bold;
}

div.eventimgbox {
	width:190px;
	float:left;
}

div.eventimgbox img {
	margin:0 10px 10px 10px;
	border:1px solid #DADADA;
}

div.eventtextbox {
	float:left;
	width:260px;
}

div.eventtextboxPdg {
	width:420px;
	padding:15px;
}

div.eventtextbox_noimg {
	float:left;
	width:680px;
padding:10px;
}

div.eventtextbox img {
	margin:18px 0px 10px 0px;
}
p.eventcaption1 {
	line-height:130%;
	margin-bottom:0px;
}

p.eventcaption2 {
	color:#FF000E;
	background: url(images/h3.gif) repeat-x 0 100%;
	padding-bottom:15px;
	margin-bottom:10px;
}

p.eventcaption3 {
	color:#E44600;
	line-height:110%;
	margin-bottom:5px;
}

p.eventcaption4 {
	line-height:110%;
	margin-bottom:5px;
}
	
/*******************************
/* 最新のお知らせ
*******************************/
ul#info {
	margin:10px;
}

ul#info li {
	margin-bottom:5px;
}


/*******************************
/* 催物情報
*******************************/
div.eventimgbox_common {
	width:280px;
	float:left;
}

div.eventimgbox_common img {
	margin:0 10px 10px 10px;
	border:1px solid #DADADA;
}

div.eventtextbox_common {
	float:left;
	width:680px;
}

/*******************************
/* 座席表
*******************************/
div#seatmap {
	width:763px;
	height:881px;
	background:url(images/seatmap.gif);
	margin:20px auto -20px auto;
	position:relative;
}

div#seatmap a {
	width:20px;
	height:30px;
	display:block;
}

div#seat-g2 {
	width:20px;
	height:30px;
	text-indent:-9999px;
	position:absolute;
	top:287px;
	left:75px;
}

div#seat-g19 {
	width:20px;
	height:30px;
	text-indent:-9999px;
	position:absolute;
	top:315px;
	left:365px;
}

div#seat-f37 {
	width:20px;
	height:30px;
	text-indent:-9999px;
	position:absolute;
	top:254px;
	left:670px;
}

div#seat-t1 {
	width:20px;
	height:30px;
	text-indent:-9999px;
	position:absolute;
	top:762px;
	left:37px;
}

div#seat-t19 {
	width:20px;
	height:30px;
	text-indent:-9999px;
	position:absolute;
	top:770px;
	left:365px;
}

div#seat-t38 {
	width:20px;
	height:30px;
	text-indent:-9999px;
	position:absolute;
	top:760px;
	left:710px;
}

#lightpop-details {
	float:left;
}

#lightpop-details-caption {
	float:left;
	font-size:140%;
}

#lightpop-details-number {
	float:left;
	text-indent:-9999px;
}

#lightpop-data-close {
	float:right;
}

/*******************************
/* アクセスマップ 
*******************************/
div#accessmap {
	width:430px;
	height:507px;
	margin-top:20px;
	background:url(images/ecoruma_access.jpg);
	position:relative;
}

div#accessmap a {
	width:105px;
	height:55px;
	display:block;
}
div#zoommap {
	width:105px;
	height:55px;
	text-indent:-9999px;
	position:absolute;
	top:260px;
	left:170px;
}


/*******************************
/* フォントサイズ変更
*******************************/
#chg-fontsize {
	float:right;
	position:absolute;
	top:40px;
	right:0px;
}

/*******************************
/* 共通クラス
*******************************/
#anchor {
	width:960px;
	margin:0 auto 10px auto;
	font-size:90%;
	text-align:right;
}

.indent {
	margin-left:20px;
}

.bullet1 {
	padding: 0 5px 0 20px;
	background: url(images/bullet.gif) no-repeat 0 1px;
}

.bullet2 {
	padding: 0 5px 0 12px;
	background: url(images/bullet2.gif) no-repeat 0 7px;
}

.bullet3 {
	padding: 0 5px 0 20px;
	background: url(images/bullet3.gif) no-repeat 0 3px;
	font-size:120%;
	color:#820F0F;
}

.bullet_tel {
	padding: 0 5px 0 20px;
	background: url(images/bullet_tel.gif) no-repeat 0 0px;
}

.bullet_pdf {
	padding: 0 5px 0 20px;
	background: url(images/bullet_pdf.gif) no-repeat 0 1px;
}

/* ツイッターアイコン ヘッダー部 */
.twitter-icon {
	position: absolute;
	top: 69px;
	left: 394px;
}

/* 音楽の街バナー ヘッダー部 */
.ongaku-banner {
	position: absolute;
	top: 37px;
	left: 354px;
}

.sslbox{
	width:960px;
	margin:auto;
	position:relative;
}

.copy{
	position:absolute;
	bottom:0;
	right:0;
}

/*******************************
/* 共通フォントクラス
*******************************/
.red     {color:#FF0000;}
.darkred {color:#CD0000;}
.green   {color:#008000;}
.yellow  {color:#F88000;}
.blue    {color:#0000FF;}

.bold  {font-weight:bold;}

.small   {font-size:90%;}
.large   {font-size:120%;}
.largest {font-size:140%;}