@charset "UTF-8";

/***************************

2007/10/10 ono
このCSSについて

全体の横幅 740px
トップページ・日記の左（sidenavi） 横幅 215px
トップページの・日記右（main）     横幅 455px
その他のページ(main2)              横幅 740px

◎ここには印刷用のCSS、日記（ブログ）用のCSSも一緒に書かれています。
　zakki.cgiに普段使用されているzakki.cssは使用していません。
　zakki.cgiの方も他のページと同じようにCSSで加工しました。
  そのほうがこのCSSを流用でき、時間短縮になるからです。
  
◎空divについて
	.sun / 上部の太陽に適用
	.bg  / 印刷用背景画像 
	
◎文章の均等について
    http://level.s69.xrea.com/mozilla/index.cgi?id=20051126_Justifyから
	text-align:justify;text-justify:inter-ideograph;
  
  
●トップページ・日記構造
  
  container
  	|
	+----- header
	|
	+----- navi
	|
	+----- info(茨城県水戸市にある造園・土木・外構を承る造園屋です。TEL・FAX:０２９（２２５）９５２９)
	|
    +----- sidenavi
	|
	+----- main
	|
	+----- footer
	
●その他のページ構造

  container
  	|
	+----- header
	|
	+----- navi
	|
	+----- info(茨城県水戸市にある造園・土木・外構を承る造園屋です。TEL・FAX:０２９（２２５）９５２９)
    |
	+----- main2
	|
	+----- footer
	

****************************/

body{
	margin: 0;padding: 0;background: url(img/bg.gif) #ffffff repeat-x 0 0 scroll;text-align: center;font-size: 12px;font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";line-height: 1.4em;color: #333333;
}

img{
margin:0;padding:0;border:0;
}

a{
margin:0;padding:0; 
}

a:link,a:visited{
color:#0000FF;
}

a:hover{
color:#CC66CC;
}

/*全体*/
#container{
margin: 0 auto;padding:0;text-align:left;width:740px;position: relative;
}

/*ヘッダー*/
#header{
margin: 41px 0 40px 0;position:relative;width:210px;float:left;background: url(img/bg.gif) #ffffff repeat-x 0 0 scroll;
}

/*タイトル*/
h1{
margin:0;padding:0;
}

/*ナビゲーション*/
#navi{
margin:41px 0 0 0;padding:0;width:420px;height:112px;position: absolute ;top:auto;left:auto;right:0;
}

#navi ul{
margin: 0;padding:0;list-style:none;
}

#navi li{
margin:0;padding:0;float:left;
}

.clear{ clear:both;}

/*全ページ共通文*/
#info h2{
margin:0 0 25px 0;padding:0;color:#FFFFFF;font-size:12px;font-weight:normal;text-align:center;position:relative;
}

h3{
margin:0;padding:0;width:100%;text-align:center;
}

/*お問い合わせへのリンク*/
.otoiawase_link{
width:90%;padding:12px 0;margin:15px ;letter-spacing:2px;border:1px solid #000;font-size:16px;font-weight:bold;text-align:center;
}

/*左側コンテンツ（トップページ・日記のみ）*/
#sidenavi{
/*margin:0;padding:0;width:215px;position: absolute ;top:auto;left:20px;right:auto;*//*印刷すると全ページにsidenavi部分が表示されてしまった*/
margin: 0 0 0 15px;width:215px;float:left;
}

/*顔写真*/
#sidenavi p{
margin-left:5px;
}

#sidenavi h3{
margin-top:0;text-align:left;
}

/*概要*/
#sidenavi ul{
margin: 0 0 10px 3px;padding:0 0 0 3px;list-style:none;
}

#sidenavi li{
margin:0;padding: 2px 0 2px 13px;background:url(img/dot.gif) no-repeat 0 5px;
}

/*職人紹介*/
#sidenavi dl{
margin:0 0 12px 5px;padding:10px 0 0 0;background:#EDEADA;list-style:none;width:210px;
}

#sidenavi dt, #sidenavi dd{
margin:3px 5px;padding:3px 0;width:200px;color:#666666;font-weight:bold;
}

#sidenavi dd{
margin:  3px 0 0 0;padding: 0 0 2px 10px;border-bottom:1px solid #D8D1AD;font-weight:normal;
}

/*********************************************************

トップページ・日記の右側部分適用

*********************************************************/

#main{
padding:0 0 0 30px;width:455px;margin-left:247px;position: relative;border-left:1px solid #99CC00;letter-spacing:-1px;
}

/*メッセージ部分*/
#main .message{
margin: 0;padding:0 0 13px 0;font-size:14px;text-align:justify;text-justify:inter-ideograph;width:455px;line-height:1.5em;
/*background:url(img/top_bg2.gif) no-repeat 300px 170px;*/
}

#main .message p{
margin:10px 0 5px 0;padding:0;
}

/*ごあいさつ*/
#main .message strong{
margin: 2px 0;padding: 5px 0 1px 0;color:#CC0000;
}

/*愛・侑*/
#main .message span{
font-weight:bold;color:#CC3300;
}

/*社訓*/
#main .message .shakun{
margin:15px 0;padding:0;width:100%;text-align:center;color:#CC6600;font-weight:bold;
}

/*トップの造園・土木・外構紹介欄*/
#main .category{
	margin: 0;padding:0;width:140px;height:350px;float:left;position: relative;font-size:14px;line-height:1.5em;letter-spacing:-1px;
}

#main .category img{ margin:0;padding:3px 0 0 2px;}

/*整列*/
#main .category .just{
  text-align:justify;text-justify:inter-ideograph;
}

/*造園*/
#main .ca1{
margin:0 5px 0 0;padding:0 3px 0 2px;background:#D5FD9D;
}

/*土木*/
#main .ca2{
margin:0 3px ;padding:0 3px 0 2px;background:#F7D6D2;
}

/*外講*/
#main .ca3{
margin:0 0 0 5px;padding:0 3px 0 2px;background:#FFCAB0;
}

#main .category p{
margin: 3px 2px;padding:0;width:135px;
}

/*カテゴリ内の画像*/
#main .category img{
margin:0 0 6px 0;
}

/*詳細リンクに適用*/
#main .category strong{
margin: 0 0 0 20px;font-weight:normal;
}

/*********************************************************

トップページ・日記以外のページ部分

*********************************************************/

#main2 {
width:740px;
}

#main2 h3{
margin:5px 0;padding:5px 0;letter-spacing:3px;
}

#main2 ul{
margin:10px 0 10px 60px;padding:0;line-height:1.5em;
}

#main2 .midasi{
margin:20px 0 15px 20px;
}

#main2 .pagetop{
margin: 10px 20px 15px 0;text-align:right;border:0;
}


/*********************************************************

サブページごとのスタイル

*********************************************************/


/*******************

事業概要・施工例

*******************/

.gaiyo{
font-size:14px;width:740px;background:url(img/gaiyo_bg.gif) no-repeat right 100px;
}

.gaiyo strong{
font-size:16px;color:#FF0000;
}

.gaiyo ul{
margin:10px 0;
}

/*施工例*/
.sekourei{
/*margin-left:20px;*/
text-align:center;
}

/*施工例画像*/
.sekourei span{
margin-left:10px;
}

/*******************

お見積り・受注の流れ

*******************/

.omitumori{
font-size:14px;text-align:center;background:url(img/omitumori_bg.gif) no-repeat;
}

.omitumori p{

}

/*******************

料金・受注の流れ

*******************/

.ryokin{
font-size:14px;
}

.ryokin h4{
margin-bottom:5px;color:#263300;letter-spacing:2px;
}

.ryokin th,td{
padding:5px;
}

/*高さ*/
.ryokin .tdone{
width:200px;
}

/*料金*/
.ryokin .tdtwo{
width:240px;text-align:right;
}

/*背景*/
.ryokin .sentei{
background:url(img/ryo_sentei.jpg) no-repeat 500px 30px;height:200px;padding:10px 0;
}

.ryokin .ikegaki{
background:url(img/ryo_ikegaki.jpg) no-repeat 500px 10px;height:170px;padding:10px 0;
}

.ryokin .matu{
background:url(img/ryo_matu.jpg) no-repeat 500px 10px;height:180px;padding:10px 0;
}

.ryokin .bassai{
background:url(img/ryo_basai.jpg) no-repeat 500px 20px;height:180px;padding:10px 0;
}

.ryokin .kusa{
background:url(img/ryo_kusa.jpg) no-repeat 500px 20px;height:150px;padding:10px 0;
}

.ryokin th{
background:#DAFF6A;color:#3D5100;letter-spacing:3px;border:1px solid #ccc;
}

.ryokin td{
border:1px solid #ccc;background:#F7FFDD;
}

.ryokin p{
margin: 5px 0 0 20px;
}

/*******************

お問合せ

*******************/

.otoiawase{
font-size:14px;
}

.otoiawase form{
margin:0 auto;width:600px;padding-bottom:10px;
}

.otoiawase table{
border:1px solid #99CC00;
}

.otoiawase .center{
text-align:center;
}

/*必須*/
.otoiawase em{
color:#FF0000;font-weight:normal;
}

.otoiawase input , textarea{
margin:3px 0;padding:3px;font-size:14px;
}

.otoiawase .nyuryoku , textarea{
width:380px;
}

.otoiawase .nyuryoku_yubin{
width:60px;
}

.otoiawase textarea{
height:150px;
}

/*左項目*/
.otoiawase .hidari{
padding:3px 0 3px 5px;width:200px;font-weight:bold;border-bottom:1px solid #99CC00;border-right:1px solid #99CC00; background:#D2F8A9;
}

/*右項目*/
.otoiawase .migi{
width:400px;border-bottom:1px solid #99CC00; 
}

/*******************

フッター

*******************/

#footer {
margin:10px 0;padding:3px 0 0 0 ;width:740px;background:url(img/footer_line.gif) repeat-x 0 0;white-space: nowrap;text-align:center;clear:both;
float:left;
}

#footer p{
margin:10px 0 15px 0;padding:0;
}

#footer .browzer{
margin:3px 0;padding:0;font-size:10px;color:#666666;
}

/*太陽*/
.sun{
position:absolute;top:10px;left:235px;width:30px;height:30px;background:url(img/sun.gif) no-repeat 0 0;
}

/*******************

日記(CGI)

*******************/

.m1 , .calendar_area , .past_log_area , .entry_body , past_log_table , m3{
font-size:14px;
}

/*最近のエントリー*/
.headline_area{
margin:0;padding:0;width:100%;
}

.headline_table_area{
margin:0;padding:0;width:100%;
}

/*エントリータイトル*/
.entry_title{
	margin:0;padding:5px 0 10px 0;font-family:"ＭＳ ゴシック", "Osaka－等幅";font-size:16px;color:#CD9614;width:450px;border-bottom:1px dashed #CD9614;
}

/*エントリー文*/
.entry_body{
  padding:20px 0 30px 0;letter-spacing:2px;line-height:2em;
}

/*エントリーフッター*/
.entry_foot{
  padding:15px 0 50px 0;text-align:right;font-size:10px;
}

/*カレンダー*/
.calendar_area{
padding:15px 0;border-top:1px dashed #669900;width:210px;
}

/*カレンダー先月トップ来月*/
.month_click{
width:200px;text-align:center;
}

/*過去の記事タイトル*/
.past_log_area{
padding:15px 0 0 0;text-align:center;border-top:1px dashed #669900;
}

/*月別ログ*/
.past_log_table{
width:210px;text-align:center;
}

/*見出し部分*/
.m1{
padding:10px 0;text-align:center;letter-spacing:3px;
}

/*ヘッドライン別*/
.m2{}

/*メニュー*/
.m3{
width:80px;text-align:center;
}

/**
IEのみ適用(最初にアンダーをつけるとIEだけに適用される)
**/

.ie{
_padding-top:5px;
}

/*******************

印刷
(２ページ以降にも背景が表示されるのを防止)

*******************/

@media print{

	body{
		background:none;
	}
	
	/*印刷用背景画像指定*/
	.bg{
		position:absolute;left:0;top:0;z-index:auto;background: url(img/bg.gif) #ffffff repeat-x 0 0 scroll;width:100%;height:200px;
	}
	
}