@charset "UTF-8";
/* CSS Document */

/*=======================================================

Last Update -> 2010/10/27
音工房キーステーション
http://key-station.com
Thanks！Matsugawa_san Oshiro_san
by Nakki
=========================================================*/

/*リセット
=========================================================*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:normal;
}
ol,ul{
	list-style:none;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border: 0;
}

/*共通
=========================================================*/

body { 
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'Osaka','ＭＳＰゴシック','MS P Gothic',verdana,arial,sans-serif;
	font-size: 12px;
	line-height:1.5em;
	background-color:#ffffff;
}

img {
	border: none;
}

li {
	list-style-type:none;
}

/*テキスト
----------------------------------------------------------- */
.xxlarge { 
	font-size: 16px;
	line-height:1.5em;
}
.xlarge { 
	font-size: 15px;
	line-height:1.5em;
}
.large { 
	font-size: 14px;
	line-height:1.5em;
}
.medium { 
	font-size: 13px;
	line-height:1.5em;
}
.small { 
	font-size: 12px;
	line-height:1.5em;
}
.xsmall { 
	font-size: 11px;
	line-height:1.5em;
}
.xxsmall { 
	font-size: 10px;
	line-height:1.2em;
}

.titlegray01 {
	font-size: 16px;
	line-height:1em;
	font-weight: bold;
	color:#666666;
}

.titlegray02 {
	font-size: 12px;
	line-height:1.2em;
	font-weight: nomal;
	color:#666666;
}

.titlewh01 { 
	font-size: 16px;
	line-height:1em;
	font-weight:bold;
	color:#FFFFFF;
}

.titlewh02 { 
	font-size: 14px;
	line-height:1.3em;
	font-weight:bold;
	color:#3F3F3F;
}

.smallgr01 { 
	font-size: 12px;
	line-height:1.5em;
	color:#3F3F3F;
}

.titlebl01 { 
	font-size: 18px;
	line-height:1em;
	font-weight:bold;
	color:#0077FF;
}

.mediumbk01 { 
	font-size: 12px;
	line-height:1.5em;
	font-weight:bold;
	color:#000000;
}

.mediumgr01 {
	font-size: 12px;
	line-height:1.5em;
	color:##333333;
}

.mediumgr02 {
	font-size: 12px;
	line-height:1.5em;
	color:#3F3F3F;
	font-weight:bold;
}

.bold { 
	font-weight:bold;
}


/*文字色
----------------------------------------------------------- */

.red1 {
	color:#FF0000;
}

.orenge1 {
	color:#FF6600;
}

.blue1 {
	color:#0000FF;
}

.gray1 {
	color:#3F3F3F;
}

/*リンク
----------------------------------------------------------- */
a:link    {text-decoration: none ; color:#006FEF;}
a:visited {text-decoration: none ; color:#006FEF;}
a:hover   {text-decoration: underline ; color:#006FEF;}
a:active  {text-decoration: none ; color:#006FEF;}

a.gray:link    {text-decoration: none ; color:#3F3F3F;}
a.gray:visited {text-decoration: none ; color:#3F3F3F;}
a.gray:hover   {text-decoration: underline ; color:#3F3F3F;}
a.gray:active  {text-decoration: none ; color:#3F3F3F;}

a.bk:link    {text-decoration: none ; color:#000000;}
a.bk:visited {text-decoration: none ; color:#000000;}
a.bk:hover   {text-decoration: underline ; color:#000000;}
a.bk:active  {text-decoration: none ; color:#000000;}

a.wh:link    {text-decoration: none ; color:#FFFFFF;}
a.wh:visited {text-decoration: none ; color:#FFFFFF;}
a.wh:hover   {text-decoration: underline ; color:#FFFFFF;}
a.wh:active  {text-decoration: none ; color:#FFFFFF;}

/*背景色
----------------------------------------------------------- */
.backcolorbk01 {
	background-color:#000000;
}

.backcolorbk02 {
	background-color:#050505;
}

.backcolorgr01 {
	background-color:#F2F2F2;
}

.border {
	border-right: 1px solid #D1D7DD;
}

/*ヘッダー
=========================================================*/
#container { 
	width: 900px;
	background: url(../img/back_music.jpg) no-repeat top;
	margin: 0 auto;
	text-align: left;
	overflow: auto;
	border-right: 1px solid #D1D7DD;
	border-left: 1px solid #D1D7DD;
	min-height: 100%;
}

#header { 
	width:880px;
	height:47px;
	margin:23px 10px 0px 10px;
}

#imglogo {
	width:155px;
	height:45px;
	float:left;
}

#imgtel {
	width:195px;
	height:45px;
	float:right;
}

/*ナビゲーション
=========================================================*/

#gnavi {
	clear:both;
	width:900px;
	height:45px;
	border:0;
	background: url(../img/navi_b.jpg) repeat-x;
	color:#FFFFFF;
}

ul.navi {
	margin-left:130px;
}

ul.navi li {
	float:left;
	display:inline;
	margin:0;
	padding:0;
	text-align:center;
}

/*メインコンテンツ
=========================================================*/

#mainimage {
	width:900px;
	height:280px;
	background-color:#FFFFFF;
}

#wrapper {
	clear:both;
	width:880px;
	margin-left:10px;
	margin-top:10px;
	margin-bottom:30px;
	overflow: auto;
}

#main {
	width:600px;
	float:left;
}

/*トピックス
----------------------------------------------------------- */
#main ul li.newtopics {
	background:url(../img/icon_new.jpg) no-repeat 0px 8px; 
	padding:6px 0 6px 30px;
	border-bottom: 1px dotted #ADB9C2;
}

#main ul li.nomaltopics {
	background:url(../img/icon_nomal.jpg) no-repeat 0px 8px; 
	padding:6px 0 6px 30px;
	border-bottom: 1px dotted #ADB9C2;
}

/*ピックアップ
----------------------------------------------------------- */
#main dl.pickup {
	border-bottom: none;
}

.pickup dd {
	background-color:#F2F2F2;
	padding:5px;
}

#main div.pickup2 {
	border-bottom: none;
	width:290px;
}

/*パンクズ
----------------------------------------------------------- */
p.pankuzu {
	padding:0 0 3px 5px;
}

#main h2.titleitem {
	margin-bottom:10px;
}

ul.logolist li {
	float:left;
	display:inline;
	text-align:center;
	list-style-type:none;
	margin:0 5px 5px 0;
	padding:0;
}

#main h2.titleworks {
	margin-bottom:10px;
}

ul.workscar {
	width:600px;
	height:25px;
	margin-top:15px;
}

ul.workscar li {
	width:60px;
	float:left;
	display:inline;
	text-align:center;
	list-style-type:none;
	margin:0 6px 0 0;
	padding:0;
}

/*制作事例
----------------------------------------------------------- */
#worksmain {
	clear:both;
	width:600px;
}

#worksmain table {
	width:100%;
	margin-top:12px;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	text-align:left;
}

.workspic1{
	display:none;
}


/*アクセス
----------------------------------------------------------- */
#access01 {
	width:570px;
	height:530px;
	padding:10px;
	border:1px solid #CFCFCF;
	background-color:#FFFFFF;
}

#access01 ul {
	float:left;
}

#access01 p.appearance {
	float:right;
	width:180px;
	height:135px;
	border:1px solid #CFCFCF;
	margin-bottom:10px;
}

.map {
	clear:both;
	margin-top:10px;
	width:570px;
	height:340px;
	padding-top:5px;
	padding-bottom:5px;
	border:1px solid #CFCFCF;
	text-align:center;
}

.printbt {
	margin-top:10px;
	border:none;
	text-align:center;
}

/*サブコンテンツ
----------------------------------------------------------- */
.infobox {
	margin-bottom:25px;
	background-color:#FFFFFF;
}

.info_rear,.info_center,.info_front {
	width:600px;
}

.info_front {
	background:url(../img/info/waku1.jpg) no-repeat center top;
	padding-top:10px;
}

.info_rear {
	background:url(../img/info/waku3.jpg) no-repeat center bottom;
	padding-bottom:10px;
}

.info_center {
	background:url(../img/info/waku2.jpg) repeat-y center top;
}

.info_main {
	width:570px;
	margin-left:15px;
	padding-top:5px;
	padding-bottom:15px;
}


/*table設定（サブコンテンツ）*/
#main.info_main table	{
	width: 100%;
}

.info_icon {
	text-align:right;
	padding-bottom:10px;
}

.border01 {
	border-bottom:dotted #ADB9C2 1px;
}

.infotitle {
	font-size: 18px;
	font-weight:bold;
	color:#0077FF;
}

.info_main h3 {
	margin-top:15px;
	margin-bottom:10px;
}

.infosubtitle {
	font-size: 12px;
	line-height:1.5em;
	font-weight:bold;
	color:#000000;
}

p.barbr { 
	background-image:url(../img/info/bar_br.jpg);
	background-repeat:no-repeat;
	background-position:left;
	border:none;
	padding-left:7px;
	vertical-align:text-top;
	margin-bottom:10px;
	
	font-size: 12px;
	line-height:1.5em;
	font-weight:bold;
	color:#000000;
}

p.infoimage {
	margin-bottom:15px;
}

a.modoru {
	float:right;
}

/*mm1*/
#mm101 { 
	width:580px;
	height:240px;
	background-image:url(../img/info/mm1/mm1taikan01.jpg);
	background-repeat:no-repeat;
	background-position:left;
	border:none;
}

dl#mm1image{
	background-image:url(../img/info/mm1/mm1taikan02.jpg);
	background-repeat:no-repeat;
	background-position:center;
}

dd.txt01 {
	margin-bottom:5px;
}

/*clio*/
#clio001 { 
	width:580px;
	height:200px;
	background-image:url(../img/info/clio/clio03.jpg);
	background-repeat:no-repeat;
	background-position:left;
	border:none;
}

.cliotxt01 {
	padding-right:220px;
	padding-top:35px;
	text-align:center;
}

.cliotxt02 {
	padding-right:55px;
	padding-top:30px;
	text-align:center;
}


/*右サイド
=========================================================*/
#sub {
	width:260px;
	background-color:#FFFFFF;
	float:right;
}

#sub ul.side {
	padding-top:10px;
	margin-bottom:10px;
	background:url(../img/tokuyaku02.jpg) repeat-x top;
	line-height:1.7em;
}

#sub ul li.link1 {
	list-style-type:none;
	background:url(../img/icon_sub.jpg) no-repeat 5px 2px;
	padding-left:20px;
}

p.banner {
	padding-top:10px;
}

.logomin {
	vertical-align:middle;
	color:#333333;
	border:none;
}

.side02 {
	padding-top:10px;
	margin-bottom:10px;
	padding-left:5px;
	background:url(../img/tokuyaku02.jpg) repeat-x top;
}

.side03 {
	background:url(../img/tokuyaku02.jpg) repeat-x top;
	margin-bottom:10px;
}


/*フッター
=========================================================*/
#footer {
	clear:both;
	height:100%;
	color:#FFFFFF;
	background-color:#000000;
	text-align:right;
	line-height:1.5em;
	padding:10px;
}

address {
	text-align:center;
	margin-top:5px;
	margin-bottom:5px;
}

/*マージン　パディングー
=========================================================*/
.m_all_0 {margin:0;}
.m_all_5 {margin:5px;}
.m_all_10 {margin:10px;}

.m_tl_8 {margin:8px 0 0 8px;}
.m_rl_5 {margin:0 5px;}
.m_rl_7 {margin:0 7px;}
.m_rl_10 {margin:0 10px;}
.m_tb_5 {margin:5px 0;}
.m_tb_10 {margin:10px 0px;}
.m_tb_20 {margin:20px 0px;}
.m_tb_30 {margin:30px 0px;}

.m_t_5 {margin-top:5px;}
.m_t_10 {margin-top:10px;}
.m_t_15 {margin-top:15px;}
.m_t_20 {margin-top:20px;}
.m_t_25 {margin-top:25px;}
.m_t_30 {margin-top:30px;}
.m_t_40 {margin-top:40px;}

.m_r_5 {margin-right:5px;}
.m_r_7 {margin-right:7px;}
.m_r_10 {margin-right:10px;}
.m_r_15 {margin-right:15px;}
.m_r_20 {margin-right:20px;}
.m_r_25 {margin-right:25px;}
.m_r_30 {margin-right:30px;}

.m_b_5 {margin-bottom:5px;}
.m_b_7 {margin-bottom:7px;}
.m_b_10 {margin-bottom:10px;}
.m_b_15 {margin-bottom:15px;}
.m_b_20 {margin-bottom:20px;}
.m_b_25 {margin-bottom:25px;}
.m_b_30 {margin-bottom:30px;}

.m_l_5 {margin-left:5px;}
.m_l_7 {margin-left:7px;}
.m_l_10 {margin-left:10px;}
.m_l_15 {margin-left:15px;}
.m_l_20 {margin-left:20px;}
.m_l_25 {margin-left:25px;}
.m_l_30 {margin-left:30px;}
.m_l_35 {margin-left:35px;}

.p_all_5 {padding:5px;}
.p_all_7 {padding:7px;}
.p_all_8 {padding:8px;}
.p_all_10 {padding:10px;}

.p_t_5 {padding-top:5px;}
.p_t_10 {padding-top:10px;}
.p_t_15 {padding-top:15px;}
.p_t_20 {padding-top:20px;}

.p_r_5 {padding-right:5px;}
.p_r_7 {padding-right:7px;}
.p_r_10 {padding-right:10px;}

.p_b_5 {padding-bottom:5px;}
.p_b_10 {padding-bottom:10px;}

.p_l_5 {padding-left:5px;}
.p_l_10 {padding-left:10px;}
.p_l_15 {padding-left:15px;}
.p_l_20 {padding-left:20px;}
.p_l_25 {padding-left:25px;}
.p_l_30 {padding-left:30px;}

.p_tb_5 {padding:5px 0;}
.p_tb_10 {padding:10px 0px;}
.p_tb_20 {padding:20px 0px;}
.p_tb_30 {padding:30px 0px;}

.border_g {border: solid 1px #999;}

.clear_l {clear:left;}
.clear_b {clear:both;}

.float_l {float:left;}
.float_r {float:right;}

/* clear */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

.clear {
	clear: both;
}