@charset  "utf-8";

/* ============================================================
共通・汎用モジュール
（基本段落／区切り線／見出し／テキスト／リンク、画像マーカー／リスト／表組み／画像まわり／フォーム／汎用クラス）

%update / 2018.07.23

------------------
【目次】
------------------
▼01.共通項目
▼02.header
▼03.ナビメニュー
▼04.メインコンテンツ
▼05.サイドバー
▼06.footer
▼07.wallpaint
▼08.case
▼09.flow
▼10.company
▼11.contact
▼12.paint
▼13.price
▼14.faq
▼15.importance
▼16.timing
▼17.choice
============================================================ */
/* ------------------------------------------------------------
▼01.共通項目
------------------------------------------------------------ */
#body_index {
	
	margin-top: 0;
	background-image: url(images/common/bg_01.gif);
	background-repeat: repeat-x;
}
body {
	
	margin-top: 0;
	background-image: url(images/common/bg_02.gif);
	background-repeat: repeat-x;
}
#wrap {
    width: 960px;  
    margin: 0 auto;
    text-align: left;
}



#container {
    width: 960px;

}

#contents {
    float: left;
    width: 700px;
    margin: 10px 0;
    padding: 20px 0 0 0;
}

#sidenavi {
    float: right;
    width: 250px;
    margin: 10px 0;
    padding: 20px 0 0 0;
}

area{
  border:none;
  outline:none;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}

.clearfix:after {
    content: "";
    clear: both;
    display: block;
}
h1{
	height: 20px;
	font-size: 14px;
	font-weight: normal;
}
.red{
	font-size: 18px;
	color:red; 
}
/* ------------------------------------------------------------
▼02.header
------------------------------------------------------------ */
#header_index {
 /*    background: #FFF url(./images/common/bg_header.jpg) repeat-x bottom;*/
    
	height: 100px;
    
}

#header {
 /*    background: #FFF url(./images/common/bg_header.jpg) repeat-x bottom;*/
    
	height: 320px;
    
}
/* ------------------------------------------------------------
▼03.ナビメニュー
------------------------------------------------------------ */
#globalNavi {
	width: 960px;
	height: 40px;
    margin: 10px 0 0 0;
	padding:0px 0px 0px 0px;
}

#globalNavi ul{
	
	list-style: none; /* リスト形式を削除 */
    clear: both;
}

 /* リストを横並びに */
#globalNavi ul li{
	/* width: 150px;*/
	height: 40px;
	float: left;
}
#globalNavi ul li a{
	text-indent: -9999px; /* テキストをとばす */
	text-decoration: none;
	display: block;
	/* width: 150px;*/
	height: 40px;
	background-image: url(./images/common/navi.gif);
	background-repeat: no-repeat;
}

 
#globalNavi ul li#menu1 a { width:160px;background-position: 0 0; }
#globalNavi ul li#menu2 a { width:160px;background-position: -160px 0px; }
#globalNavi ul li#menu3 a { width:160px;background-position: -320px 0px; }
#globalNavi ul li#menu4 a { width:160px;background-position: -480px 0px; }
#globalNavi ul li#menu5 a { width:160px;background-position: -640px 0px; }
#globalNavi ul li#menu6 a { width:160px;background-position: -800px 0px; }



#globalNavi ul li a:hover{
	text-decoration: none;  
	background-image: url(./images/common/navi.gif);  
	background-repeat: no-repeat;   
}


#globalNavi ul li#menu1 a:hover { background-position: 0 -40px; }
#globalNavi ul li#menu2 a:hover { background-position: -160px -40px; }
#globalNavi ul li#menu3 a:hover { background-position: -320px -40px; }
#globalNavi ul li#menu4 a:hover { background-position: -480px -40px; }
#globalNavi ul li#menu5 a:hover { background-position: -640px -40px; }
#globalNavi ul li#menu6 a:hover { background-position: -800px -40px; }

/* ------------------------------------------------------------
▼04.メインコンテンツ
------------------------------------------------------------ */
.index_img01 {
        margin:0px 0px 10px 0px;
        padding: 0px 0px 0px 0px;
	
}
.index_img02 {
        margin:20px 0px 0px 0px;
        padding: 0px 0px 0px 10px;
	
}
.index_img03 {
        margin:80px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
	
}
.index_text01{
	font-size: 18px;
	font-weight: bold;
	padding: 20px 0px 10px 0px;	
}
.index_text02{
	font-size: 14px;
	line-height: 18px;
}
.index_box01{
	width: 680px;
	margin: 20px 0 0 0;
	padding: 0 0 0 10px;
}


/*--リストでテーブル--*/
.table {
	list-style: none;
	mergin: 0;
	padding: 10px 0px 0px 20px;
	
}
.table li {
	clear: both;
}
.table li div {
	display: block;
	float: left;
}
.col1 {
	width: 100px;
	font-size: 14px;
	color: black;
	padding: 3px;
}
.col2 {
	width: 550px;
	font-size: 14px;
	color: black;
	padding: 3px;
}

/* ------------------------------------------------------------
▼05.サイドバー
------------------------------------------------------------ */
.side_img01 {
        margin:0px 0px 0px 0px;
        padding: 0px 0px 10px 0px;
	
}
.side_box01{
	width: 240px;
	height: 250px;
	background-image: url(images/common/side_021.gif);
	margin:0px 0px 0px 0px;
    
}
.side_text01{
	font-size: 14px;
	
	padding: 70px 0px 0px 20px;	
}
/* ------------------------------------------------------------
▼06.footer
------------------------------------------------------------ */


#footer {
	height: 250px;
	width: 960px;
	clear: both;
	margin-right: auto;
	margin-left: auto;
	margin-top: 50px;
	padding-top: 0px;
}
#footerbg {
	background-image: url(images/common/footerbg.gif);
	background-repeat: repeat-x;
}
.footer_box01{
	width: 960px;
	height: 220px;
	margin: 20px 0px 0px 20px;
}
.footer_box02{
	width: 600px;
	margin: 20px 0px 0px 20px;
	float: left;
}
.footer_box03{
	font-size: 12px;
	width: 150px;
	margin: 30px 0px 0px 20px;
	float: left;
}
.footer_box04{
	width: 200px;
	margin: 20px 0px 0px 20px;
}
.footer_box05{
	width: 960px;
	margin: 20px 0px 0px 20px;
}
.footer_text01{
	font-size: 24px;
	color: #545454;
	width: 300px;
	padding: 20px 0px 0px 20px;	
	
}
.footer_text02{
	font-size: 14px;
	color: #545454;
	width: 300px;
	margin: 5px;
	padding: 0px 0px 0px 30px;	
	
}
.clt{
	font-size: 12px;
	color: #ffffff;
	margin: 5px;
	padding: 0px 0px 0px 30px;	
	
}
.footer_img01 {
        margin:0px 0px 0px 0px;
        padding: 120px 0 0 0;
	
}
#footer li{
	list-style-image: url(images/common/listmark01.gif);
	font-size: 14px;
	line-height: 20px;
	
	
}
#footer a {
	text-decoration: none;
	
}
#footer a:link {
	color: #000000;
}
#footer a:visited {
	color: #000000;
} 
#footer a:hover {
	color: #3F8A59;
} 


/* ------------------------------------------------------------
▼07.wallpaint
------------------------------------------------------------ */
.wallpaint_text01{
	font-size: 18px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
.wallpaint_text02{
	font-size: 14px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
table.wallpaint01 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-left: 3px solid #369;
	margin: 10px;
}
table.wallpaint01 th {
	width: 147px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #153d73;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;

}
table.wallpaint01 td {
	width: 349px;
	padding: 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.wallpaint_box01 {
	
	line-height: 1.8;
	font-size: 16px;
	border-left: 5px solid #369;
	margin: 30px 10px 10px 10px;
	padding: 0 0 0 10px;
}
.wallpaint_img01 {
        margin:20px 0px 0px 0px;
        padding: 0px 0 0 0px;
	
}
/* ------------------------------------------------------------
▼08.case
------------------------------------------------------------ */

.case_box_wrap01{
	width: 670px;
	
	border: 1px solid #000000; 
	margin:10px 0px 0px 10px;
    padding: 10px 0 10px 0;	
}
.case_box_wrap02{
	width: 670px;
	height: 280px;
	
	
    
}

/* 2段 */
.case_box_wrap03{
	width: 670px;
	height: 560px;
	
	
    
}
/* 3段 */
.case_box_wrap04{
	width: 670px;
	height: 1050px;
	
	
    
}

/* 横と縦 */
.case_box_wrap05{
	width: 670px;
	height: 580px;
	
    
}

.case_box_wrap06{
	width: 670px;
	/* margin: 0 0 20px 0; */
	
}
.case_textbox {
	width: 650px;
	margin: 20px 0 10px 0px;
	
}
.case_left{
		width: 300px;
		
		background-color: white;
		
		/*border: medium solid #ff00ff; */
        margin:10px 0px 0px 10px;
        padding: 10px 0 0 0px;	
        float: left;
}
.case_right{
		width: 300px;
		
		background-color: white;
		
        margin:10px 10px 0px 0px;
        padding: 10px 0 0 0;	
        float: right;
}
.case_text01{
	font-size: 14px;
	
	padding: 20px 0px 0px 10px;	
}
.case_text02{
	font-size: 18px;
	font-weight: bold;
	color: blue;
	padding: 10px 0px 0px 20px;	
}
.case_text03{
	font-size: 14px;
	
	padding: 5px 0px 0px 5px;	
}
.case_img01 {
        margin:20px 0px 0px 10px;
        padding: 0px 0 0 0px;
	
}
.case_img02 {
        margin:10px 0px 0px 0px;
        padding: 0px 0 0 10px;
	
}
.case_list01{
	width: 550px;
	
	/*border: medium solid #ff00ff; */
	margin:10px 0px 0px 10px;
    padding: 10px 0 0 0;	
}
.case_list01 dl, dt, dd {
  margin : 0;
  padding : 0;
}
 
.case_list01 dl {
  /* dlの背景色をdt用に使う。区切り線はdtの上部に持たせる */
  background-color : #f4b436;
  
  /* dlの上部線はなくし，dtとddの上部線をdlの上部線のように見せる */
  border-width : 0 1px 1px 1px;
  border-style : solid;
  border-color : #000000;
  width  : 100%;
}
 
.case_list01 dt {
  float : left;
  clear : both;
  width : 100px;
   /* 上線のみ表示 */
  border-width : 1px 0 0 0;
  border-style : solid;
  border-color : #000000;
  font-size: 14px;
  font-weight : bold;
  padding : 5px;
}
 
.case_list01 dd {
  /* dtの幅だけ横にずらす */
  margin-left : 110px;
  /* dlやdtとは異なった背景色を使用 */
  background-color : #fce8c2;
  /* 上線と，dt・ddの左右間の区切り */
  border-width : 1px 0 0 1px; 
  border-style : solid;
  border-color : #000000;
 font-size: 14px;
  padding : 5px;
}  
.case_list02{
	width: 280px;
	
	/*border: medium solid #ff00ff; */
	margin:5px 0px 0px 10px;
    padding: 5px 0 0 0;	
}
.case_list02 dl, dt, dd {
  margin : 0;
  padding : 0;
}
 
.case_list02 dl {
  /* dlの背景色をdt用に使う。区切り線はdtの上部に持たせる */
  background-color : #b2f8a2;
  
  /* dlの上部線はなくし，dtとddの上部線をdlの上部線のように見せる */
  border-width : 0 1px 1px 1px;
  border-style : solid;
  border-color : #000000;
  width  : 100%;
}
 
.case_list02 dt {
  float : left;
  clear : both;
  width : 60px;
   /* 上線のみ表示 */
  border-width : 1px 0 0 0;
  border-style : solid;
  border-color : #000000;
  font-size: 14px;
  font-weight : bold;
  padding : 5px;
}
 
.case_list02 dd {
  /* dtの幅だけ横にずらす */
  margin-left : 60px;
  /* dlやdtとは異なった背景色を使用 */
  background-color : #e2f8dd;
  /* 上線と，dt・ddの左右間の区切り */
  border-width : 1px 0 0 1px; 
  border-style : solid;
  border-color : #000000;
 font-size: 14px;
  padding : 5px;
}     
/* ------------------------------------------------------------
▼09.flow
------------------------------------------------------------ */
.flow_box01{
	width: 680px;
}

table.flow01 {
	width: 640px;
	
	line-height: 1.5;
	margin: 10px;
}

table.flow01 td {
	
	padding: 15px 10px 15px 10px;
	
}
table.flow01 td.flow_text01{
	font-size: 14px;
	margin: 0px 0px 0px 50px;
	padding: 0px 0px 0px 50px;
}
.flow_text02{
	font-size: 28px;
	color: #3F8A59;
	font-weight: bold;
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
.flow_img01 {
        margin:10px 0px 0px 0px;
        padding: 0px 0px 20px 0px;
	
}	
/* ------------------------------------------------------------
▼10.company
------------------------------------------------------------ */
.company_text01{
	font-size: 14px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
.company_text02{
	font-size: 18px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
.company_text03{
	font-size: 14px;
	width: 650px;
	padding: 10px 0px 0px 50px;	
}
.company_img01 {
        margin:10px 0px 0px 0px;
        padding: 0px 0px 20px 0px;
	
}
.company_img02 {
        margin:20px 0px 0px 80px;
        padding: 0px 0px 0px 0px;
	
}
table.company01 {
	width: 640px;		
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-left: 3px solid #369;
	margin: 10px 0 0 10px;
	padding: 5px;
}
table.company01 th {
	
	padding: 10px;
	
}
table.company01 td {
	
	padding: 10px;
	
}
table.company01 td.company_text04{
	font-size: 14px;
	margin: 0px 0px 0px 50px;
	padding: 0px 0px 0px 50px;
}
/* ------------------------------------------------------------
▼11.contact
------------------------------------------------------------ */
.contact_text01{
	font-size: 14px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
.contact_text02{
	font-size: 18px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
.contact_img01 {
        margin:10px 0px 0px 0px;
        padding: 0px 0px 20px 0px;
	
}

/* ------------------------------------------------------------
▼12.paint
------------------------------------------------------------ */
.paint_text01{
	font-size: 14px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
.paint_text02{
	font-size: 18px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
.paint_img01 {
        margin:10px 0px 0px 0px;
        padding: 0px 0px 20px 0px;
	
}

.paint_img02 {
        margin:20px 0px 0px 15px;
        padding: 0px 0px 5px 0px;
	
}
.paint_box01 {
	
	line-height: 1.8;
	font-size: 16px;
	border-left: 5px solid #369;
	margin: 10px;
	padding: 0 0 0 10px;
}
table.paint01 th {
	width: 147px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #153d73;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;

}
table.paint01 td {
	width: 349px;
	padding: 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
/* ------------------------------------------------------------
▼13.price
------------------------------------------------------------ */
.price_text01{
	font-size: 14px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
.price_text02{
	font-size: 18px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
.price_img01 {
        margin:10px 0px 0px 0px;
        padding: 0px 0px 20px 0px;
	
}
.price_img02 {
        margin:20px 0px 0px 15px;
        padding: 0px 0px 5px 0px;
	
}

/* ------------------------------------------------------------
▼14.faq
------------------------------------------------------------ */

.faq{
	width: 650px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 30px 0px;
}


div.faq dl{
	margin-top:30px;
	padding-left:20px;
	padding-bottom:30px;
	border-bottom:1px dotted #666666;
}

div.faq dl dt{
	background:url(images/faq/q.gif) top left no-repeat;
	font-size:16px;
	font-weight:bold;
	padding:6px 0px 15px 50px;
	margin:20px 0px 10px 0px;
	}
div.faq dl dd{
	background:url(images/faq/a.gif) top left no-repeat;
	font-size:14px;
	padding:6px 0px 15px 50px;
	margin: 0px;
	}

/* ------------------------------------------------------------
▼15.importance
------------------------------------------------------------ */
.importance_text01{
	font-size: 14px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
.importance_box01 {
	
	line-height: 1.8;
	font-size: 16px;
	border-left: 4px solid #369;
	margin: 10px;
	padding: 0 0 0 10px;
}
.importance_img01 {
        margin:10px 10px 20px 0px;
        padding: 0px 0px 20px 0px;
	float: right;
	
}
.importance_img02 {
        margin:30px 0px 20px 350px;
        padding: 0px 0px 20px 0px;
	
}
/* ------------------------------------------------------------
▼16.timing
------------------------------------------------------------ */
.timing_text01{
	font-size: 14px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
.timing_box01 {
	
	line-height: 1.8;
	font-size: 16px;
	border-left: 5px solid #369;
	margin: 10px;
	padding: 0 0 0 10px;
}
.timing_img01 {
        margin:20px 0px 0px 0px;
        padding: 0px 0 0 0px;
	
}
.timing_img02 {
        margin:20px 0px 30px 0px;
        
	
}
.timing_box02{
	width: 320px;
	float: left;
}
.timing_box03{
	width: 360px;
	font-size: 14px;
	padding: 10px 0px 0px 10px;	
	float: left;
}
.timing_box04{
	width: 690px;
	margin: 10px 0 10px 10px;
	
}
/* ------------------------------------------------------------
▼17.choice
------------------------------------------------------------ */
.choice_text01{
	font-size: 14px;
	width: 650px;
	padding: 10px 0px 0px 20px;	
}
.choice_box01 {
	
	line-height: 1.8;
	font-size: 16px;
	border-left: 5px solid #369;
	margin: 10px;
	padding: 0 0 0 10px;
}



/* ------------------------------------------------------------
▼20.共通
------------------------------------------------------------ */

#formWrap {
	width:680px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}

#slideshow2 {
   position: relative;
   width:  960px; /* 画像の横幅に合わせて記述 */
   height: 400px; /* 画像の高さに合わせて記述 */
}
#slideshow {
   position: relative;
   width:  960px; /* 画像の横幅に合わせて記述 */
   height: 400px; /* 画像の高さに合わせて記述 */
}
#slideshow img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: 9;
}

/* clearfix */


.floatclear{
         clear: both;
}
      
.clearfix:after {
  content: "."; 
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; 
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}      