@charset "UTF-8";

/*==================== 目次 =====================

	1.タグの再定義
	2.リンク設定
	3.BOX設定
	4.共通設定
	5.文字の非表示
	6.ヘッダーナビゲーション
	7.ヘッダーサブナビゲーション
	8.グローバルナビゲーション
	9.パン屑メニュー
	10.メインコンテンツ(共通要素記述)
	11.問い合わせ
	12.フッター

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

/*--------------------------------------------------
	1.タグの再定義
--------------------------------------------------*/
body {
	color: #333333;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragio Kaku Gothic Pro","メイリオ","Meiryo","Osaka","ＭＳ Ｐゴシック",sans-serif;
	font-size: 0.75em;
	line-height: 140%;
	height: 100%;
    margin:0px auto;
}

strong {
	font-weight: bold;
}

img {
	display: block;
	border: none;
}


/*--------------------------------------------------
	2.リンク設定
--------------------------------------------------*/
a {
	outline: hidden;
}
a:link,
a:visited {
	color: #CC6600;
	text-decoration: underline;
}
a:hover,
a:active {
	color: #CC6600;
	text-decoration: none;
}


/*--------------------------------------------------
	3.BOX設定
--------------------------------------------------*/
#Entire {
	width: auto;
	margin: 0px auto;
	background: url(../img/bg_head.gif) repeat-x left 59px;
}

#Header {
	position: relative;
	width: 850px;
	height: 68px;
	margin: 0px auto;
}

#MainVisual {
	width: auto;
/*	height: 300px;	height要素は各ページ毎に記述　*/
	margin: 2px auto 5px;
	padding: 0px auto;
	text-align: center;
	background-color: #ebebeb;
}

#GlobalNavi{
	width: auto;
	height: 40px;
	margin: 5px 0px;
	background: url(../img/bg_global-navi.gif) repeat-x left top;
}

#Footer {
	position: relative;
	display: block;
	width: auto;
	height: 30px;
	margin: 0px auto;
	padding: 10px 0px;
	border-top: 1px solid #ccc;
}

.Section {
	position: relative;
	width: 820px;
	margin: 0px 0px 30px;
}

/*--------------------------------------------------
	4.共通設定	
--------------------------------------------------*/
/* CSデザインセンターロゴ */
#Header strong {
	display: block;
	position: absolute;
	width: 234px;
	height: 32px;
	left: 15px;
	top: 13px;
}

/* CSデザインセンターキャッチ */
#Header em {
	display: block;
	position: absolute;
	width: 164px;
	height: 16px;
	left: 260px;
	top: 23px;
}

/* フロート解除 */
.ToPageTop:after,
.clearfix:after,
.Section:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
}

.ToPageTop,
.clearfix,
.Section {
	display: inline-block;
}

/* Hides from IE-mac ￥*/
*html .ToPageTop
*html .clearfix,
*html .Section {
	height: 1%;
}

.ToPageTop,
.clearfix,
.Section {
	display: block;
}
/* End hides from IE-mac ￥*/


/*--------------------------------------------------
	5.文字の非表示	
--------------------------------------------------*/
a span {
	position:absolute;
	width:0;
	height:0;
	overflow:hidden;
}


/*--------------------------------------------------
	6.HeaderNavi
	ヘッダーナビゲーション
--------------------------------------------------*/
ul#HeaderNavi {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 170px;
	height: 28px;
	margin: 0px auto;
}

#HeaderNavi li {
	float: left;
    display: block;
	height: 28px;
}
#HeaderNavi li a {
	display: block;
	height:	28px;
	background: url(../img/header-navi.jpg) no-repeat left 0px;
}

#HeaderNavi li#BtnMaterial a { width: 77px; background-position: 0 0px;}
#HeaderNavi li#BtnRequest a { width: 93px; background-position: -77px 0px;}

#HeaderNavi li#BtnMaterial a:hover { width: 77px; background-position: 0 -31px;}
#HeaderNavi li#BtnRequest a:hover { width: 93px; background-position: -77px -31px;}

/*--------------------------------------------------
	7.HeaderSubNavi
	ヘッダーサブナビゲーション
--------------------------------------------------*/
ul#HeaderSubNavi {
	position: absolute;
	right: 10px;
	top: 40px;
	width: 218px;
	height: 11px;
	margin: 0px auto;
}

#HeaderSubNavi li {
	float: left;
    display: block;
	height: 11px;
	cursor: pointer;
}
#HeaderSubNavi li a {
	display: block;
	height:	11px;
	background: url(../img/header-sub-navi.gif) no-repeat left 0px;
}

#HeaderSubNavi li#BtnHome a { width: 61px; background-position: 0px 0px;}
#HeaderSubNavi li#BtnTopics a { width: 74px; background-position: -61px 0px;}
#HeaderSubNavi li#BtnFAQ a { width: 83px; background-position: -135px 0px;}

#HeaderSubNavi li#BtnHome a:hover { width: 61px; background-position: 0px -11px;}
#HeaderSubNavi li#BtnTopics a:hover { width: 74px; background-position: -61px -11px;}
#HeaderSubNavi li#BtnFAQ a:hover { width: 83px; background-position: -135px -11px;}

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


	8.GlobalNavi
	グローバルナビゲーション
	
--------------------------------------------------*/
#GlobalNavi ul {
	width: 850px;
	height: 40px;
	margin: 0px auto;
}
#GlobalNavi li {
	float: left;
	display: block;
	height: 40px;
}
#GlobalNavi li a {
	display: block;
	height: 40px;
	background: url(../img/img_global-navi.jpg) no-repeat left top;
}


#GlobalNavi li#BtnAbout a { width:210px; background-position: 0px 0px;}
#GlobalNavi li#BtnInfomation a { width:170px; background-position: -210px 0px;}
#GlobalNavi li#BtnShowcase a { width:90px; background-position: -380px 0px;}
#GlobalNavi li#BtnColor a { width:125px; background-position: -470px 0px;}
#GlobalNavi li#BtnPrize a { width:130px; background-position: -595px 0px;}
#GlobalNavi li#BtnAccess a { width:125px; background-position: -725px 0px;}

#GlobalNavi li#BtnAbout a:hover { width:210px; background-position: 0px -40px;}
#GlobalNavi li#BtnInfomation a:hover { width:170px; background-position: -210px -40px;}
#GlobalNavi li#BtnShowcase a:hover { width:90px; background-position: -380px -40px;}
#GlobalNavi li#BtnColor a:hover { width:125px; background-position: -470px -40px;}
#GlobalNavi li#BtnPrize a:hover { width:130px; background-position: -595px -40px;}
#GlobalNavi li#BtnAccess a:hover { width:125px; background-position: -725px -40px;}

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

	9.FootMark
	パン屑メニュー
	
--------------------------------------------------*/
#FootMark {
	width: 850px;
	height: 20px;
	margin: 0px auto;
	padding-left: 30px;
	font-size: 87.5%;
}


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

	10.Contents
	メインコンテンツ
	※ここには共通要素のみ記述
	他の要素は各ページ毎のCSSに記述する

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

/*** ページトップへ ***/
.ToPageTop li {
	float: right;
}

.ToPageTop:after {
	content: ".";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}

.ToPageTop a {
	display: block;
	margin: 20px 0px 5px;
	padding: 0px 0px 0px 12px;
	background: url(../img/mark_totop.gif) no-repeat left 6px;
}

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

	11.Inquiry
	問い合わせ
	
--------------------------------------------------*/
#Inquiry {
	position: relative;
	width: 780px;
	margin: 0px auto 20px;
	padding: 15px;
	border: 5px solid #EBEBEB;
}

body#Top #Inquiry {
	padding: 15px 30px;
}

#Inquiry:after {
	content: ".";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}

#Inquiry dl#InquiryLeft{
	float: left;
	display: block;
	width: 385px;
	margin: 0px;
	padding: 0px;
}

#Inquiry #InquiryLeft dt{
	float: left;
	display: block;
	width: 52px;
	margin-right: 5px;
	padding: 0px 7px 0px 0px;
	border-right: 1px solid #EBEBEB;
}
#Inquiry #InquiryLeft dd{
	float: right;
	display: block;
	width: 315px;
	margin: 3px 0px;
	text-align: left;
	font-size: 83.3%;
}

#Inquiry dl#InquiryRight{
	float: right;
	display: block;
	width: 385px;
	margin: 0px;
	padding: 0px;
}

#Inquiry #InquiryRight dt{
	float: left;
	display: block;
	width: 21px;
	margin-right: 5px;
	padding: 0px 7px 0px 31px;
	border-right: 1px solid #EBEBEB;
}
#Inquiry #InquiryRight dd {
	float: right;
	display: block;
	width: 315px;
	margin: 0px;
	/padding: 3px 0px 0px;
	text-align: left;
	font-size: 83.3%;
	line-height: 170%;
}

#Inquiry #InquiryRight dd img {
	display: inline-block;
	/display: inline;
	/zoom: 1;
	padding-bottom: 3px;
}

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

	12.Footer
	フッター
	
--------------------------------------------------*/
#FootNotice {
	display: block;
	width: 850px;
	margin: 0px auto 20px;
	font-size: 77%;
}

#Footer address {
	position: absolute;
	display: block;
	width: 850px;
	color: #333333;
	font-size: 0.825em;
	font-family: "ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Times New Roman", Times, serif;
	top: 10px;
	left: 50%;
	margin-left: -425px;
}

#Footer ul {
	position: absolute;
	width: 510px;
	height: 1.5em;
	left: 45%;
	top: 10px;
	letter-spacing: -0.03em;
}

#Footer ul:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
}

#Footer li {
	float: right;
	margin: 0px 5px 0px 0px;
	padding: 0px 5px 0px 0px;
	border-right: 1px solid #d6d6d6;
	list-style: none;
	font-size: 0.825em;
	letter-spacing: 0.1em;
}

#Footer li.noborder {
	border: none;
}
#Footer li a {
	padding: 0px 0px 0px 9px;
	text-decoration: none;
	color: #333333;
	background: url(../img/mark_arrow01.gif) no-repeat left 3px;
}
#Footer li a:hover {
	color: #0699C9;
	background: url(../img/mark_arrow02.gif) no-repeat left 3px;
}