/*------------------------- 文字コード指定 ---------------------------------------*/
@charset"utf-8";

/*------------------------- リセットCSS ------------------------------------------*/
/**
 *Eric Meyer,s Reset CSS v2.0(http://meyerweb.com/eric/tools/css/reset/)
 *http://cssreset.com
 */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li, 
 fieldset, form, label, lagend,
 table,caption,tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section,summary,
 time,mark,audio,video{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
artcle, aside, details, figcaption, figure,
footer, header,hgroup, menu, nav, section,{
	display: block;
}
body{
	line-height:1;
}
ol, ul{
	list-style: none;
}
blockquote, q{
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
	content: '';
	content: none;
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}

/*------------------------- 共通レイアウト ----------------------------------------*/


/*---------- 1.全体色の設定　（BG 白）（TEXT 濃グレー） --------------------*/
body{
	color:#333;
	background:#fff;
}

/*---------- 2.画像の設定　（BG 白） -----------------------------------*/
img{
    background: #fff;
}

/*---------- 3.リンクの設定 -------------------------------------------*/

/*----- テキスト色　（紺） ---------------------------*/
a{
    color:#237;
}

/*----- ロールオーバー時　（TEXT 灰紺）（BG 薄黄） -------*/
a:hover{
	color: #369;
	background: #ffd;
}

/*----- 現在のページ　（TEXT 紺）（BG 灰水） -----------*/
a.selected{
	color: #fff;
	background: #79b;
}

/*---------- 4.リンク画像の設定 （ロールオーバー時 不透明度50%）-------------*/
a.img{
    background: #fff;
    border: 0;
}
a:hover img{
	opacity: 0.5;
}

/*---------- 5.ヘッダーの設定 （仮想テーブル　中央寄せ　幅940px）-------------*/

/*----- キャッチコピーの設定　（TEXT 灰,80%） -----------*/
h2{
	color:#999;
	text-align:center;
	font-size:80%;
	margin:5px 0 20px;
}

div#header{
    display: table;
	width: 940px;
    margin: 0 auto;
}

/*----- ロゴ・営業時間　共通の設定------------------*/
div#logo, div#info{
	display: table-cell;
	padding-bottom: 20px;
	vertical-align: bottom;
}

/*----- ロゴの設定 --------------------------------*/
div#logo{
	text-align: left;
}

h1 img{
	padding-right: 10px;
}
/*----- 営業時間ほかの設定 ------------------------*/
div#info{
	text-align: right;
	clear:right;
}

#info table{
    margin-left:10px;
    background: #eee;
    border:#ccc 1px solid;
    float:right;
}
#info td{
    padding:10px;
    text-align: left;
}
#info p{
    font-size: 90%;
    line-height: 1.3em;

}
#info p.tel, p.fax{
     color:#237;
     font-weight:bold;
    line-height: 1em;
}
#info p.tel{
     font-size:180%;
}
p.fax{
     font-size: 90%;
}

/*---------- 6.グローバルナビゲーションの設定 -----------------------------*/

/*----- Ｇナビ背景の設定　（BG: bg-gnav.jpg） --------*/ 
nav#gnav{
	background:url('../img/bg-gnav.jpg'); 
}

/*----- Ｇナビ　ul要素内部でのフロート解除 -------------*/ 
nav#gnav ul{
    width: 940px;
    margin: 0 auto;
	overflow: hidden;
}

/*----- Ｇナビ　li要素をフロートで横並びに --------------*/
nav#gnav li{
	float: left;
	width:187px;
	border-right:#fff 1px solid;
}

/*----- Ｇナビゲーション　「ホーム」部分の設定 ------------*/
nav#gnav li:first-child{
	width:186px;
	border-left:#fff 1px solid;
}

/*----- Ｇナビ　a要素のブロック化と設定　（TEXT 白） ------*/
nav#gnav a{
	display: block;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	color: #fff;
}

/*-----　Ｇナビ　ロールオーバー時の設定　----------------*/
nav#gnav a:hover{
	background: #ffd;
	color: #369;
}


/*---------- 7.パンくずナビゲーションの設定 -------------------------------*/
nav#pankuzu{
	width: 940px;
	margin:20px auto 40px;
}

/*----- Ｐナビ　li要素を横並びに ---------------------*/
nav#pankuzu li{
	display: inline;
	font-size: 90%;
	line-height:1.8em;
}

nav#pankuzu a{
	padding:3px 5px;
	letter-spacing: 0.1em;
	text-decoration: none;
}

/*---------- 8.サブナビとメインを含む範囲の設定 ---------------------------*/

div#inner{
	width: 940px;
	margin: 0 auto;
}

.clearfix:after{
	content:"";
	display: block;
	clear: both;
}
.clearfix{
	*zoom: 1;
}/*IE6/7*/

/*----- サイドの設定 -------------------------------*/
div#side{
	float: left;
	width: 200px;
	margin-bottom: 50px;
}

/*----- メインの設定 -------------------------------*/
div#main{
    float: right;
    width: 700px;
    margin: 0 0 50px 40px;
}

/*---------- 9.サイドナビゲーションの設定 --------------------------------*/
nav#menu{
	display:table;
	width: 200px;
	background: #fff;
}

/*----- Ｓナビ　a要素のと設定　（BG 薄灰）（TEXT 紺） -----*/
nav#menu a{
	display: block;
	margin-bottom: 10px;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	color: #237;
	border:#ccc 1px solid;
	background: #eee;
}

/*-----　Ｓナビ　ロールオーバー時の設定　-----------------*/
nav#menu a:hover{
	background: #ffd;
	color: #369;
}

/*----- 現在のページ　（BG 灰水）（TEXT 紺） -----------*/
nav#menu a.selected{
	background: #79b;
	color: #fff;
}

/*---------- 10.フッター上（ページトップへ）の設定（仮想テーブル） ---------------*/

div#p-top{
	display: table;
	width: 940px;
	margin:0 auto 10px;
}
div#802-s{
	display: table-cell;
	vertical-align:bottom;
	text-align:left;
}
div#p-top-s{
	display: table-cell;
	vertical-align:bottom;
	text-align:right;	
}
a.top-he{
    width: 12em;
    padding: 2px 0 2px 20px;
    font-size: 80%;
	background:url('../img/p-top.gif') no-repeat;
}

/*---------- 11.フッターの設定 ----------------------------------------*/

/*----- フッター背景色の設定 （BG 紺）-----------------*/
footer#footer{
    background:url('../img/bg-footer.jpg');
}

/*----- フッターのナビゲーションの設定（仮想テーブル） -------*/
nav#fnav{
    display: table;
    width: 800px;
    margin: 0 auto 30px; 
}

/*----- Ｆナビ　ul要素内部でのフロート解除 -------------*/ 
nav#fnav ul{
	overflow: hidden;
}

/*----- Ｆナビ　li要素をフロートで横並びに --------------*/
nav#fnav li{
	float: left;
	width:159px;
	border-right:#fff 1px solid;
}

/*----- Ｆナビ　「ホーム」部分の設定 -------------------*/
nav#fnav li:first-child{
	width:158px;
	border-left:#fff 1px solid;
}

/*----- Ｆナビ　a要素のブロック化と設定　（TEXT 白,90%） ---*/
nav#fnav a{
	display: block;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-size: 90%;
}

/*----　Ｆナビ　ロールオーバー時の設定　------------------*/
nav#fnav a:hover{
	background: #ffd;
	color: #369;
}

/*-----コピーライトの設定-----------------------------*/
p#copyright{
    color:#fff;
    text-align: center;
    padding: 10px;
}


/*------------------------- 共通パーツ ------------------------------------------*/

/*---------- A.テキストエリアの設定 -------------------------------------*/
.content{
	margin:0 auto;
}
.waku, .imp{
	margin:0 auto;
	padding:10px 20px;
}

/*----- 枠付きエリア（LINE 薄グレー） ------------------*/
.waku{
	border: #ccc 1px solid;
}

/*----- 重要枠の設定　（BG 薄黄）（LINE オレンジ、角丸） --*/
div.imp{
	width:598px;
	background: #ffe;
	border: #f96 1px solid;
    border-radius: 5px;
}

/*----- 詳細枠 -----------------------------------*/

div.shousai-waku{
	margin:0 auto 30px;
	padding:10px 20px;
	width:598px;
	border:#ccc 1px solid;
	clear:both;
}

div.shousai-content{
	margin:0 auto 30px;
	padding:0;
	width:640px;
	overflow: hidden;
}

div.shousai-waku img, div.shousai-content img{
    float:right;
}
/*---------- B.テキストの基本設定 -------------------------------------*/
.doc, .doc-2{
	line-height: 1.5em;
}

.doc{
	text-indent: 1em;
}

.f-90{
	font-size:90%;
}

.f-80{
	font-size:80%;
}

/*----- 注意書きの設定　 ---------------------------*/
.heed{
    font-size: 90%;
    padding-bottom: 3px;
    line-height:1.3em;
    text-indent:1em;
}

.coment{
	color: #c00;
    font-size: 80%;
	font-weight: normal;
}

/*----- 重要色の設定　 ----------------------------*/   
.imp-red{
    color: #c00;
}

.imp-blue{
	color: #369;
	font-weight: bold;
}

/*----- 下線付き　項目：内容　（LINE 薄グレー、点線） ----*/
table.bor-b{
	margin:0 auto;
	width:600px;
}

table.bor-b th,table.bor-b td{
	border-bottom: #999 1px dotted;
    vertical-align: top;	
    font-weight:normal;
	line-height: 1.5em;
}

table.bor-b th{
	padding: 10px;
	font-size: 90%;
	text-align: center;
}

table.bor-b td{
	padding: 10px 0;
	text-align: left;
}

/*------------------- C.配置の設定 ----------------------------------*/
.left{
    text-align:left;
}
.right{
    text-align:right;
}
.center{
    text-align:center;
}

/*------------------- D.下余白の設定 --------------------------------*/
.mar-b05{
	margin-bottom:5px;
}
.mar-b10{
	margin-bottom:10px;
}
.mar-b15{
	margin-bottom:15px;
}
.mar-b20{
	margin-bottom:20px;
}
.mar-b25{
	margin-bottom:25px;
}
.mar-b30{
	margin-bottom:30px;
}
.mar-b35{
	margin-bottom:35px;
}
.mar-b40{
	margin-bottom:40px;
}


/*-------------------- E.見出しの設定 --------------------------------*/

h3{
	margin-bottom: 40px;
	padding-top:15px;
	font-size:120%;
	font-weight: bold;
	background:url('../img/h3-line.jpg') no-repeat;
}

h4{
	margin-bottom:30px;
	padding: 2px 15px;
	border:#cde 1px solid;
    border-radius: 3px;
    background:url('../img/h4-bg.jpg') repeat-x;
	line-height:1.5em;
}

h4.he-imp{
	border:#f96 1px solid;
    color:#c00;
    font-weight:bold;
    background:url('../img/h4-imp-bg.jpg') repeat-x;
}

h5{
	margin: 0 20px;
	padding: 2px 0;
	border-bottom: #ccc 1px solid;
}

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

/*------------------------- ホーム　index ---------------------------------------*/

/*----- カレンダーの設定 ----------------------------*/
#calender table{
	margin: 10px auto;
	width: 198px;
	background: #fff;
	color: #333;
	border: #ccc 1px solid;
	border-collapse: collapse;
}

#calender table,
#calender p{
	text-align: center;
	vertical-align: middle;
}

#calender p{
    color: #c00;
    background: #fcc;
    font-size: 90%;
}

#calender td{
	padding: 2px 1px;
	border:#ccc 1px solid;
}

/*----- 動画・会社写真のエリア設定 -------------------*/
section#photo{
	width: 700px;
	height: 300px;
	margin-bottom: 50px;
	padding: 0px;
}
div.slider{
    width:100%;
    overflow:hidden;
    position:relative;
}
ul.slideInner {
    list-style:none;
    margin:0;
    padding:0;
}
ul.slideInner li {
    position:absolute;
    width:100%;
    background:#fff;
    margin:0;
    padding:0;
}
ul.slideInner li img {
    width:100%;
}
.slidePrev {
    position:absolute;
    width:50px;
    height:60px;
    left:0;
    cursor:pointer;
    z-index:100;
}

.slideNext {
    position:absolute;
    display:block;
    width:50px;
    height:60px;
    right:0;
    cursor:pointer;
    z-index:100;
}

.controlNav {
    position:relative;
    float:left;
    left:50%;
    bottom:0;
}

/*-----　メイン画像（ボタン）の設定（仮想テーブル） ---------*/
div.box{
	display: table;
	width: 700px;
	margin-bottom: 20px;
	font-size: 90%;
}

div.box-left1,div.box-right1{
	display: table-cell;
	width: 340px;
    text-align: center;
}

div.box-left2, div.box-right2{
	display: table-cell;
	width: 220px;
    text-align: center;
}

div.box-left1, div.box-left2{
	margin-right:20px;
}

div.box a{
    text-decoration:none;
}
/*----- お知らせの設定 -----------------------------*/

/*-- お知らせ　枠の設定 ----------------------------*/
div#notice{
    width: 658px;
    height: 248px;
    margin: 10px auto 20px ;
	padding:10px 20px;
	border : #ccc 1px solid;
	overflow: auto;
}


/*------------------------- 会社概要　office -----------------------------------*/


/*------------------------- よくあるご質問　q-a ------------------------------------*/

/*----- 目次の設定 -------------------------------*/

div#mokuji{
	width: 558px;
	border: #ccc 1px solid;
	margin: 0 auto 50px;
	padding: 20px;
}

div#mokuji ul{
	display:table;
	width:100%;
	overflow: hidden;
}
div#mokuji li{
	display:table-cell;
	width: 219px;
	padding: 10px 20px;
	float: left;
}

/*----- ＱアンドＡの設定 ----------------------------*/

table.q-a{
	width:660px;
	margin: 0 auto 20px;
	padding: 0;
}
p.ques:first-letter,
p.ans:first-letter{
	color: #237;
	font-size: 180%;
	font-weight: bold;
	line-height: 1em;
    float: left;
    margin-right: 0.4em;
    padding: 0.1em;
}
p.ques:first-letter{
	background: #ff9;
}
p.ans:first-letter{
	background: #bde;
}
p.ans{
	color: #237;
}
p.ans-heed{
	color: #237;
	font-size:90%
}
/*------------------------- お問い合わせ　enquiry --------------------------------*/

/*----- フォーム枠の設定 ---------------------------*/
table.enquiry{
	width:100%;
	margin-bottom: 20px;
	border:#79b 1px solid;
	border-collapse: collapse;
}

.enquiry th,
.enquiry td{
	padding: 10px;
	border:#79b 1px solid;
	text-align:left;
	vertical-align: top;
}
.enquiry th{
	width: 9em;
	background: #dee;
	font-weight:normal;
	font-size: 90%;
}

/*----- 入力フォームの設定 --------------------------*/
input{
	padding: 5px;
}
input.name,input.ruby,input.tel,input.email{
	width: 250px;
}
input.address,input.office{
	width:450px;
}
textarea{
	width: 450px;
	height: 200px;
	vertical-align: top;
}
input:focus,textarea:focus{
	background:#ffd;
}

/*----- ボタンの設定 -------------------------------*/
div.btns{
	margin:30px;
	text-align:center;}

div.btns input{
	width:100px;
}
input.btn-clear{
	background:#eee;
}

input.btn-send{
    margin-left:20px;
    background:#79b;
    color:#fff;
}
input.btn-clear:hover,input.btn-send:hover{
	opacity:0.5;
}
input.btn-send:active{
	background:#ff0;
	color:#f00;
}

/*-----------------------------------------------------------------------------*/
/*------------------------- サービス共通 -----------------------------------------*/


/*----- 価格表 ----------------------------------*/
table.price{
	margin: 10px auto;
	border: #ccc 2px solid;
	border-collapse: collapse;
}
table.price a{
	text-decoration: none;
}

table.price th{
    padding: 5px;
    font-size: 90%;
    line-height: 1.3em;
    letter-spacing:0.1em;
    text-align: center;
    vertical-align:middle;
	border: #ccc 1px solid;
}

table.price td{
    padding: 5px;
    text-align: center;
    vertical-align:middle;
	border: #ccc 1px solid;
}

/*-----------------------------------------------------------------------------*/
/*------------------- リンクページ共通 --------------------------------------------*/

/*----- 色上質紙サンプルのテーブル -------------------*/

#card-youshi table{
    border-collapse: separate;
    border-spacing: 5px;
}
#card-youshi th{
	padding:5px 0;
}

#card-youshi td{
    text-align:center;
    font-size: 80%;
    letter-spacing: 0.2em;
    text-indent: none;
}

/*----- 画像加工の価格表 ------------------------*/

#kako-price tbody th{
	text-align:left;
	text-indent:2em;
}