@charset "Shift_JIS";

@import url("common.css");

/* CSS Document */
/* -----------------------------------------------------------
CSS Information

 File name:      styles.css
 Author:         
 Style Info:     基本設定とコンテンツエリア関係 左横ナビVer.
                 清水観光物産さま用のCSSです
----------------------------------------------------------- */

body{
	background:url(../../cmn_images/shimizu_bg.gif) no-repeat top center fixed;
    background-color: #fff;	
    margin: 0;
    font-family: "ＭＳ Ｐゴシック","平成角ゴシック",sans-serif;
    font-size: 0.8em;
    color: #333333;
    line-height: 150%;
}

a{ text-decoration:underline; }
a:link{ color: #1C7CD0; }
a:visited{ color: #1C7CD0; }
a:hover{ color: #FDAE03; }

p{ line-height: 1.3em; }

.clear{
	clear:both;
	color:#fff;
	margin:0 auto;
	padding:10px;
}

/*clearFix*/
#contents:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0;
    clear: both;
}

/*--------------------------------------------------------
■見出しタグの設定
--------------------------------------------------------*/

h1{
	display: block;
	width: 500px;
	height: 20px;
	font-size: 8.5pt;
	font-weight: normal;
	text-align: left;
	color: #fff;
	position: absolute;
	top: 0;
	left: 35%;
	margin: 0 0 0 -100px;
	padding: 0 20px 0 0;
	voice-family: "\"}\"";
	voice-family: inherit;
}


/*--------------------------------------------------------
■サイト全体設定　
--------------------------------------------------------*/
div#container{
	width: 970px;
	margin: 0px auto;
    text-align: left;
}


/*--------------------------------------------------------
■ヘッダー部分設定　
--------------------------------------------------------*/

div#header{
	background: url(../../cmn_images/bg_header.jpg) no-repeat;
	margin:0;
	width:970px;
	height: 155px;
}

/*--------------------▽ヘッダーロゴ*/

div#header-logo{
	position: absolute;
	top: 5px;
	margin-left: 10px;
	width:300px;
	height: 120px;
	text-align: left;
}


/*--------------------▽ヘッダーお問い合せ部分*/

div#header-tel{
	position: absolute;
	margin: 50px 0px 0px 540px;
	background-color: #0099FF;
	width: 250px;
	height: 40px;
}


/*--------------------------------------------------------
■コンテンツ全体（右＆左＆フッター）
--------------------------------------------------------*/


div#main{
	background:url(../../cmn_images/bg_main.jpg) repeat-y; 
	width: 970px;
	text-align: left;
	margin:0 auto;
}

/*--------------------▽左側（グローバルメニューなど）*/
div#left {
	float: left;
	width: 220px;
	overflow:hidden;
	margin-top:15px;
}

div#left .contents{
	clear:both;
	margin:10px 0px;
	}
	
/*--取扱商品メニュー--*/
.submenu {
	background: url(../../cmn_images/bg_submenu.jpg) no-repeat top; 
	float: left;
	width: 200px;
	height:700px;
	overflow:hidden;
	margin:0px 0px 0px 15px;
	_margin:0px 0px 0px 7.5px;
}

.submenu_m {
	background: url(../../cmn_images/bg_submenu_m.gif) repeat-y; 
	float: left;
	width: 200px;
	overflow:hidden;
	margin:0px 0px 0px 15px;
	_margin:0px 0px 0px 7.5px;
}

.submenu_b {
	background: url(../../cmn_images/bg_submenu_b.gif) no-repeat top; 
	float: left;
	width: 200px;
	height:75px;
	overflow:hidden;
	margin:0px 0px 0px 15px;
	_margin:0px 0px 0px 7.5px;
}

/*--------------------▽中央（コンテンツ部分など）*/
div#center {
	float: left;
	width: 520px;
	overflow:hidden;
	padding:0px 5px;
	margin-top:15px;
	/*background-color:#99CCff;確認用*/
}


div#center .contents{
	clear:both;
	margin:10px 0px;
	}
	
/*--会社概要--*/
#info {
	background:url(index_images/bg_info.gif);
	width:520px;
	height:161px;
	margin:5px 0px 0px 0px;
	padding:0;
	color:#2771D4;
	} 

/*--商品紹介--*/
#box {
	clear:left;
	font-size:9pt;
	width:520px;
	margin:10px 0px 20px 0px;
	padding:0;
	}
	
#box .img {
	float:left;/**/
	padding:2px;
	margin:10px 20px 10px 10px;
	border:1px solid #FDC702;
}	

/*--コンテンツ部分　タイトル　--*/
#box h2{
	padding:5px;
	margin:5px 10px;
	font-size:12pt;
	color:#3399FF;
	font-weight:bold;
	border-bottom:1px dashed #D3EAF5;
}

/*--商品紹介　タイトル--*/
#box h3 {
	color:#0099CC;
	font-size:11pt;
	font-weight:bold;
	border-bottom:solid 2px #E1ECFD;
	/*border-top:dashed 1px #e1ecfd;*/
	padding:3px;
	width:300px;
	float:left;
	margin-bottom:10px;
	margin-right:10px;
	
	}

#box h4{
	padding:2px;
	margin:5px 10px;
	font-size:11pt;
	color:#3399FF;
	font-weight:bold;
		border-bottom:dotted 2px #E1ECFD;
}
	
#box p{
	padding:10px;
	}
	
#box .subbox {
	border:1px solid #176BA9;
	margin:10px 0px!important; 
	padding:5px;
	}

#box li {
	background:url(../../cmn_images/icon2.gif) no-repeat left;
	padding:3px 10px;
	margin:10px 10px 15px 40px;
	text-decoration:none;
	list-style-type:none;
}

#box li.top{
	background:url(../../cmn_images/icon2.gif) no-repeat left;
	padding:3px 10px;
	margin:10px;
	text-decoration:none;
	list-style-type:none;
}

/*--キャラグッズ紹介--*/






/*--リスト--*/
	
dl.data {
 padding: 0;
 border: 1px solid #eee;
 border-top: none;
 background-color: #f5f5f5;
}
dl.data dt {
 margin: 0;
 padding: 0.3em 0 0.1em 1em;
 border-top: 1px solid #eee;
 width: 8em;
 float: left;
 color: #666;
}
 
dl.data dd {
 margin: 0 0 0 8em;
 padding: 0.3em 1em;
 border-left: 1px solid #eee;
 border-top: 1px solid #eee;
 color: #5D88AD;
 background-color: #fff;
} 

/*--------------------▽右側（グローバルメニュー・お問い合わせなど）*/
div#right {
	float: left;
	width: 220px;
	/*background-color:#99CC22;確認用*/
	overflow:hidden;

}

div#right .contents{
	clear:both;
	margin:10px;
	}

/*--お問い合わせ--*/
div#contact{
	background:url(../../cmn_images/bg_contact.gif) no-repeat top;
	margin:0px 10px 10px 5px;
	padding:0px;
	width:200px;
	height:240px;
}

/*--新着情報--*/
#news{
	font-size:8.5pt;
}

#news .list {
	background: url(../../cmn_images/icon01.gif) left no-repeat;
	padding:0px 10px;
	color:#FF6699;
	font-weight:bold;
	text-decoration:underline;
 }
#news A {
	color : #FF6699;
 }

/*--------------------------------------------------------
■グローバルメニュー（右側横メニュー）
--------------------------------------------------------*/
	
div#global-menu{
	background:url(../../cmn_images/bg_Gmenu.jpg) no-repeat top;
	margin:0px 10px 10px 5px;
	padding:0px;
	width:200px;
	height:255px;
}


div#global-menu li{
	float: left;
	display: block;
	list-style-type: none;
}

div#global-menu li a{
	display: block;
	text-decoration: none;
	width:165px;
	/*height:28px;*/
}


/*--------------------------------------------------------
■取扱商品メニュー（左側メニュー）
--------------------------------------------------------*/
	
div#sub-menu{
	margin:70px 0px 10px 15px;
	padding:0px;
	width:165px;
}


div#sub-menu li{
	float: left;
	display: block;
	list-style-type: circle;

}

div#sub-menu li a{
	display: block;
	text-decoration: none;
	width:150px;
	height:25px;
	margin-left:10px;
}



/*--------------------------------------------------------
■フラッシュやページ内画像の設定
--------------------------------------------------------*/
div#pageimg{
	margin:0px;
	padding:0px;
	height:300px;
	width:580px;
	background-color: #F1DFA3;/*確認用*/
}
div#pageimg2{
	margin:0px;
	padding:0px;
	height:180px;
	width:600px;
}

/*--------------------------------------------------------
■パンクズナビの設定
--------------------------------------------------------*/
#pan{
	width: 600px;
	height: 20px;
	text-align:right;
	float:right;
	padding-right:50px;
}

#pan li{
	margin: 6px 0 0 4px;
	font-size: 8.5pt;
	line-height: 14pt;
	display:inline;
}



/*--------------------------------------------------------
■フッター部分
--------------------------------------------------------*/
/*/*--------------------▽フッター部分*/

div#footer{
	clear:both;
	margin: 0 auto;
	padding:10px 0px 0px 0px;
	height: 50px;
	width:970px;
	text-align: center;
}

/*/*--------------------▽フッターメニュー部分*/

div#footer-menu{
	text-align: center;
	margin: 0 auto;
	color:#666;
}

div#footer-menu ul{
	margin: 0.3em 0px;
	padding: 0px;
	list-style-type: none;
	text-align: center;
}

div#footer-menu li{
	display: inline;
	margin: 0 0.5em 0 0.5em;
	padding-right:0.5em;
	font-size: 9pt;
	border-right: 1px #ccc solid;
	line-height: 14pt;
}

div#footer-menu li#menuLast {
	border-right: none;
}

div#footer-menu a{ text-decoration: none; }
div#footer-menu a:link{ color: #1C7CD0; }
div#footer-menu a:visited{ color: #1C7CD0; }
div#footer-menu a:hover{ color: #FDAE03; text-decoration: underline; }


/*/*--------------------▽Copyright部分*/

div#copyright{
	background:url(../../cmn_images/copyright.gif) no-repeat;
	margin:0;
	padding:0;
	height:28px;
	width:970px;
	text-indent:-9999px;

}


/*--------------------------------------------------------
■装飾的設定
--------------------------------------------------------*/
/*--------------------▽画像の振り分け*/
.imgL{
	float:left;
	padding:10px;
}

.imgR{
	float:right;
	padding:10px;
}

.imgR2{
	float:right;
	padding:10px 20px 20px 10px;
}


.waku {
	border:1px solid #3EA1E8;
	padding:2px;
	margin:10px 3px;
}

.waku2 {
	border:1px solid #66CCFF;
	padding:2px;
	margin:4px;
}

/*--------------------▽テキストの色*/

.red{ color: #ff0000!important; }/*赤色*/
.blue{ color: #0000dd!important; }/*青色*/
.green{ color: #008000!important; }/*緑色*/
.yellow{ color: #ffff00!important; }/*黄色*/
.navy{ color: #1F26A9!important; }/*紺色*/
.orange{ color: #ff6600!important; }/*橙色*/
.pink{ color: #cc6699!important; }/*ピンク色*/
.olive{ color: #808000!important; }/*黄土色*/
.lime{ color: #00ff00!important; }/*黄緑*/
.aqua{ color: #167FA6!important; }/*水色*/

/*--------------------▽ページトップへ戻る*/

.link-top{
	clear: both;
	margin: 10px 5px;
	padding: 0px;
	width: 95%;
	font-size: 10pt;
	text-align: right;
}


/*--------------------▽文字の大きさ*/
.b{ font-weight: bold!important; }

.f08em{ font-size: 0.8em; }
.f09em{ font-size: 0.9em; }
.f10em{ font-size: 1.0em; }
.f11em{ font-size: 1.1em; }
.f12em{ font-size: 1.2em; }
.f13em{ font-size: 1.3em; }
.f14em{ font-size: 1.4em; }
.f16em{ font-size: 1.6em; }
.f18em{ font-size: 1.8em; }
.f20em{ font-size: 2.0em; }
.f22em{ font-size: 2.2em; }
.f24em{ font-size: 2.4em; }

/*--------------------▽周囲からの距離の指定*/

.p0{ padding: 0px!important; }
.p0-t{ padding-top: 0px!important; }
.p0-r{ padding-right: 0px!important; }
.p0-b{ padding-bottom: 0px!important; }
.p0-l{ padding-left: 0px!important; }

.p3{ padding: 3px!important; }

.p5{ padding: 5px!important; }
.p5-t{ padding-top: 5px!important; }
.p5-r{ padding-right: 5px!important; }
.p5-b{ padding-bottom: 5px!important; }
.p5-l{ padding-left: 5px!important; }

.p10{ padding: 10px!important; }
.p10-t{ padding-top: 10px!important; }
.p10-r{ padding-right: 10px!important; }
.p10-b{ padding-bottom: 10px!important; }
.p10-l{ padding-left: 10px!important; }

.p15{ padding: 15px!important; }
.p15-t{ padding-top: 15px!important; }
.p15-r{ padding-right: 15px!important; }
.p15-b{ padding-bottom: 15px!important; }
.p15-l{ padding-left: 15px!important; }

.p20{ padding: 20px!important; }
.p20-t{ padding-top: 20px!important; }
.p20-r{ padding-right: 20px!important; }
.p20-b{ padding-bottom: 20px!important; }
.p20-l{ padding-left: 20px!important; }

.p25{ padding: 25px!important; }
.p25-t{ padding-top: 25px!important; }
.p25-r{ padding-right: 25px!important; }
.p25-b{ padding-bottom: 25px!important; }
.p25-l{ padding-left: 25px!important; }

.p30{ padding: 30px!important; }
.p30-t{ padding-top: 30px!important; }
.p30-r{ padding-right: 30px!important; }
.p30-b{ padding-bottom: 30px!important; }
.p30-l{ padding-left: 30px!important; }

.p40{ padding: 40px!important; }
.p40-t{ padding-top: 40px!important; }
.p40-r{ padding-right: 40px!important; }
.p40-b{ padding-bottom: 40px!important; }
.p40-l{ padding-left: 40px!important; }

.p50{ padding: 50px!important; }
.p50-t{ padding-top: 50px!important; }
.p50-r{ padding-right: 50px!important; }
.p50-b{ padding-bottom: 50px!important; }
.p50-l{ padding-left: 50px!important; }

.p60{ padding: 60px!important; }
.p60-t{ padding-top: 60px!important; }
.p60-r{ padding-right: 60px!important; }
.p60-b{ padding-bottom: 60px!important; }
.p60-l{ padding-left: 60px!important; }

.p70{ padding: 70px!important; }
.p70-t{ padding-top: 70px!important; }
.p70-r{ padding-right: 70px!important; }
.p70-b{ padding-bottom: 70px!important; }
.p70-l{ padding-left: 70px!important; }

.p65-t{ padding-top: 65px!important; }
.p80-t{ padding-top: 80px!important; }
.p90-t{ padding-top: 90px!important; }
.p100-t{ padding-top: 100px!important; }


.p120-l{ padding-left: 120px!important; }
.p150-l{ padding-left: 150px!important; }
.p200-l{ padding-left: 200px!important; }
.p220-l{ padding-left: 220px!important; }
.p250-l{ padding-left: 250px!important; }

.p250-r{ padding-right: 250px!important; }


.m0{ margin: 0px!important; }/*周りからのmarginを0にする*/
.m0-t{ margin-top: 0px!important; }/*上からのmarginが0px*/
.m0-r{ margin-right: 0px!important; }/*右からのmarginが0px*/
.m0-b{ margin-bottom: 0px!important; }/*下からのmarginが0px*/
.m0-l{ margin-left: 0px!important; }/*左からのmarginが0px*/

.m10{ margin: 10px!important; }/*周りからのmarginが10px*/
.m10-t{ margin-top: 10px!important; }/*上からのmarginが10px*/
.m10-r{ margin-right: 10px!important; }/*右からのmarginが10px*/
.m10-b{ margin-bottom: 10px!important; }/*下からのmarginが10px*/
.m10-l{ margin-left: 10px!important; }/*左からのmarginが10px*/

.m15{ margin: 15px!important; }
.m15-t{ margin-top: 15px!important; }
.m15-r{ margin-right: 15px!important; }
.m15-b{ margin-bottom: 15px!important; }
.m15-l{ margin-left: 15px!important; }

.m20{ margin: 20px!important; }
.m20-t{ margin-top: 20px!important; }
.m20-r{ margin-right: 20px!important; }
.m20-b{ margin-bottom: 20px!important; }
.m20-l{ margin-left: 20px!important; }

.m30{ margin: 30px!important; }
.m30-t{ margin-top: 30px!important; }
.m30-r{ margin-right: 30px!important; }
.m30-b{ margin-bottom: 30px!important; }
.m30-l{ margin-left: 30px!important; }

.m40{ margin: 40px!important; }
.m40-t{ margin-top: 40px!important; }
.m40-r{ margin-right: 40px!important; }
.m40-b{ margin-bottom: 40px!important; }
.m40-l{ margin-left: 40px!important; }

.m50{ margin: 50px!important; }
.m50-t{ margin-top: 50px!important; }
.m50-r{ margin-right: 50px!important; }
.m50-b{ margin-bottom: 50px!important; }
.m50-l{ margin-left: 50px!important; }

.m60{ margin: 60px!important; }
.m60-t{ margin-top: 60px!important; }
.m60-r{ margin-right: 60px!important; }
.m60-b{ margin-bottom: 60px!important; }
.m60-l{ margin-left: 60px!important; }

.m70{ margin: 70px!important; }
.m70-t{ margin-top: 70px!important; }
.m70-r{ margin-right: 70px!important; }
.m70-b{ margin-bottom: 70px!important; }
.m70-l{ margin-left: 70px!important; }

.m80{ margin: 80px!important; }
.m80-t{ margin-top: 80px!important; }
.m80-r{ margin-right: 80px!important; }
.m80-b{ margin-bottom: 80px!important; }
.m80-l{ margin-left: 80px!important; }

.m300-l{ margin-left: 300px!important; }

.m190-t{ margin-top: 190px!important; }
.m200-t{ margin-top: 200px!important; }