@charset "UTF-8";
/* CSS Document */

* { box-sizing: border-box; }

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

          General Setting

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

html, body {
	margin:0;
	padding:0;
}

body {
    color: #333;
	font-size: 11.5pt;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height:1.8em;
}

h1,h2,h3,h4,ul,p,dl,dt,dd{
	margin:0;
	padding:0;
}

ul,ol{
 list-style: none;
}

img{
	max-width: 100%;
}

/*reset*/
.contents {
	font-size: inherit;
}



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

          common

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


/* テキスト、フォント関連 */

.txt_center_and_left{
	text-align: center;
}

.txt_center{
 text-align: center;
}

.strong{
	font-weight:bold;
}

.font_36{
 font-size: 36pt;
 line-height: 1.4em;
}

.font_30{
 font-size: 30pt;
 line-height: 1.4em;
}

.font_22{
 font-size: 22pt;
 line-height: 1.8em;
}

.font_18{
 font-size: 18pt;
 line-height: 1.8em;
}

.font_14{
 font-size: 14pt;
 line-height: 1.8em;
}


.red{
 color: #D7000F;
}

.yellow{
 color: #fff100;
}

.green{
 color: #0AA155;
}

/* リンク関連 */

a{
 text-decoration: none;
}

a:hover{
 text-decoration: underline;
}

a img{
	border:none;
}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}


.btn{
 display: block;
 background: #F39802;
 color: #fff;
 width: 100%;
 max-width: 400px;
 text-align: center;
 border-radius: 10px;
 height: 70px;
 line-height: 70px;
 letter-spacing: 0.05em; 
 font-size: 18pt;
 font-weight: bold;
 margin: 60px auto 0 auto;
 text-decoration: none;
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.btn:hover{
 background: #F37801;
 text-decoration: none;
 color: #fff;
}
/* レイアウト関連 */

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.col_area{
	display: table;
	width: calc(100% + 80px);
	margin-left: -40px;
	border-spacing: 40px 0;
}

.col_fixed{
  table-layout: fixed;
}

.col_item{
	display: table-cell;
	vertical-align: top;
}

.marginT80{
	margin-top:80px !important;
}

.marginT60{
	margin-top:60px !important;
}

.marginT40{
	margin-top:40px !important;
}

.marginT20{
	margin-top:20px !important;
}

.marginT10{
	margin-top:10px !important;
}

.marginT05{
	margin-top:5px !important;
}

.paddingTB60{
	padding: 60px 0 !important;
}

.Hide_pc{
	display:none;
}




/* リスト、ボックスなどのパーツ */


ul.disc li{
	list-style:disc !important;
	margin-left:1.5em;
 padding: 0;
}


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

          Layout
		  
*****************************************/

.wrapper{
	width:100%;
	overflow:hidden;
}

.contents{
 width:90%;
	max-width:1280px;
	margin:0 auto;
	clear:both;
}

.inner{
 width:100%;
	max-width:1080px;
	margin:0 auto;
}



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

         main
		  
*****************************************/	

#main-image{
 background: url("../../images/works-05/main.jpg") no-repeat bottom center ;
 height: 500px;
 text-align: center;
 padding-top: 150px;
}

#main-image h1{
 background: #09A255;
 color: #fff;
 padding: 50px 0;
 width: 540px;
 margin: auto;
 font-size: 32pt;
 line-height: 1.4em;
 font-weight: bold;
}

#main-estimate{
 background: #09A255;
 margin-top: 10px;
 color: #fff;
 font-weight: bold;
 height: 70px;
 line-height: 70px;
 text-align: center;
}

#main-estimate span{
 background: #fff;
 padding: 0 10px;
 margin-right: 20px;
 display: inline-block;
 height: 55px;
 line-height: 55px;
}

#main-estimate br{
 display: none;
}


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

         trouble
		  
*****************************************/

#trouble{
 background: #D3F4E5;
}

#trouble ul{ 
 width: 850px;
 max-width: 100%;
 margin: 30px auto 0 auto;
  font-weight: bold;
}

#trouble ul li{
 background: url("../../images/works-05/check.png") no-repeat left top 7px;
 padding-left: 30px;
 margin-bottom: 20px;
}

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

         service
		  
*****************************************/

#service h2{
 background: #0CA95E;
 color: #fff;
 text-align: center;
 height: 200px;
 line-height: 200px;
}

#service h3{
 border-bottom: 5px solid #0CA95E;
 width: 850px;
 max-width: 100%;
 margin: 40px auto;
 padding-bottom: 20px;
}

#service .col_item h4{
 background: #0CA95E;
 color: #fff;
 text-align: center;
 padding: 0 15px;
}


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

         finishing_flow
		  
*****************************************/
#finishing_flow h2{
 background: #0CA95E;
 color: #fff;
 text-align: center;
 height: 200px;
 line-height: 1.6em;
 padding-top: 50px;
}

#finishing_flow h2 span{
 display: block;
}

.ribbon {
  display: inline-block;
  position: relative;
  height: 120px;/*リボンの高さ*/
  text-align: center;
  padding: 15px 80px 0 80px;
  background: #0CA95E;
  color: #FFF;
  box-sizing: border-box;
 font-size: 23pt;
 line-height: 1.4em;
}

.ribbon:before, .ribbon:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon:before {
  top: 0;
  left: 0;
  border-width: 60px 0px 60px 30px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.ribbon:after {
  top: 0;
  right: 0;
  border-width: 60px 30px 60px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

 
 #finishing_flow .col_item span{
  display: block;
  background: #0CA95E;
  width: 39px;
  height: 44px;
  border-radius: 22px;
  text-align: center;
  padding-right: 5px;
  line-height: 44px;
  color: #fff;
  font-size: 20pt;
  font-weight: bold;
  font-style: italic;
  margin: 0 auto
 }

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

         point
		  
*****************************************/	

#point h2{
 background: #0CA95E;
 color: #fff;
 text-align: center;
 height: 200px;
 line-height: 200px;
}

#point h3{
 border-bottom: 5px solid #0CA95E;
 width: 800px;
 max-width: 100%;
 margin: 40px auto;
 padding-bottom: 20px;
}

#point .col_item{
 background: #D3F4E5;
 padding: 20px;
}

#point .col_item h4{
 background: #0CA95E;
 color: #fff;
 position: relative;
 padding-left: 100px; 
}

#point .col_item h4 span{
 background: #fff100;
 color: #0CA95E;
 display: block;
 width: 80px;
 text-align: center;
 position: absolute;
 left: 0;
 height: 100%;
}

#point .col_item h4 span::before{
 content: 'Point ';
 font-size: 11.5pt;
}

#point .col_item .example li{
 padding: 0;
 text-indent: -1em;
}

#point .col_item .example li::before{
 content: '・';
}

#point .col_item .example{
 position: relative;
 padding-left: 38px;
}

#point .col_item .example::before{
 content: '例）';
 position: absolute;
 left: 0;
 top: 0;
}

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

         faq
		  
*****************************************/	

#faq h2{
 background: #0CA95E;
 color: #fff;
 text-align: center;
 height: 200px;
 line-height: 200px;
}

#faq ul li{
 padding: 20px 0;
 border-bottom: 2px solid #0CA95E;
}

#faq .faq_q{
 font-size: 1.2em;
 font-weight: bold;
 margin-bottom: 10px;
}

#faq .faq_q::before{
 content: 'Q. ';
 color: #0CA95E;
}

#faq .faq_a::before{
 content: 'A. ';
 color: #0CA95E;
 font-weight: bold;
 font-size: 16pt;
}

#faq .faq_q,
#faq .faq_a{
 position: relative;
 padding-left: 30px;
}

#faq .faq_q::before,
#faq .faq_a::before{
 position: absolute;
 left:0;
}

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

         voice
		  
*****************************************/	
#voice{
 background: #D3F4E4;
 padding: 40px;
 font-weight: bold;
 width: auto;
 max-width: 900px;
 margin: auto;
}

#voice h2{
 background: #0AA156;
 color: #fff;
 text-align: center;
 margin: -40px -40px 0 -40px;
 padding: 10px;
}

#voice .voice_item{
 padding: 0 0 0 125px;
 min-height: 110px;
 margin-bottom: 20px;
 
}

#voice .voice_item span{
 background: #fff;
 display: block;
 padding: 20px;
 border-bottom: 4px solid #0CA95E;
 border-right: 4px solid #0CA95E;
}

#voice .voice_01{
 background: url("../../images/works-05/voice_01_bg.png") no-repeat left top; 
}
#voice .voice_02{
 background: url("../../images/works-05/voice_02_bg.png") no-repeat left top; 
}
#voice .voice_03{
 background: url("../../images/works-05/voice_03_bg.png") no-repeat left top; 
}
#voice .voice_04{
 background: url("../../images/works-05/voice_04_bg.png") no-repeat left top; 
}
#voice .voice_05{
 background: url("../../images/works-05/voice_05_bg.png") no-repeat left top; 
}
#voice .voice_06{
 background: url("../../images/works-05/voice_06_bg.png") no-repeat left top; 
}



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

         features
		  
*****************************************/	

#features {
 background: #eee;
 margin-bottom: 20px;
}
#features .contents{
 background: url("../../images/works-05/features_bg.png") no-repeat right top 20px;
 background-size: 240px;
 margin: 0 auto;
}

#features h3{
 background: #0AA256;
 color: #fff;
 display: inline;
 padding: 10px 15px;;
}

#features .features_item{
 background: #fff;
 padding: 40px;
}

#features .features_item h4{
 border-top: 3px solid #0AA256;
 padding-top: 10px;
}

#features .features_item .col_area{
 min-height: 140px;
}

#features .features_item .col_item{
 position: relative;
 padding: 0 0 0 170px; 
}

#features .features_item .col_item img{
 position: absolute;
 left: 0;
 top: 0;
}




/* ==========================================
	mediaQuery タブレット用
========================================== */

@media only screen and (max-width: 940px){
 
 .txt_center_and_left{
	text-align: left;
}
 
.Hide_tb{
	display:none;
}
 
.Hide_pc{
	display:block;
}
 


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

         main
		  
*****************************************/	

#main-image{
 background-size: cover;
}
 
#main-estimate{
 height: auto;
 line-height: normal;
 padding: 10px 0;
}
 
#main-estimate br{
 display: block;
}
 
/****************************************

         intro2
		  
*****************************************/
 
 
#intro2 .col_area{
	display: block;
	width: 100%;
	margin-left: 0;
}

#intro2 .col_item{
	display: block;
 margin-bottom: 40px;
}
 
 

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

         service
		  
*****************************************/

#service h2{
 height: 80px;
 line-height: 80px;
}
 
/****************************************

         finishing_flow
		  
*****************************************/
#finishing_flow h2{
 height: auto;
 padding: 10px 0;
}

#finishing_flow .ribbon {
 height: 90px;
 padding: 15px 40px 0 40px;
 font-size: 15pt;
 }

#finishing_flow .ribbon:before {
  border-width: 45px 0px 45px 20px;
}

#finishing_flow .ribbon:after {
  border-width: 45px 20px 45px 0px;
}



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

         features
		  
*****************************************/	


#features .contents{
 background: none;
}

#features h3{
 display: block;
}

#features .features_item .col_item{
 position: relative;
 padding: 0; 
}
 
 #features .features_item h4{
 margin-bottom: 10px;
}

#features .features_item .col_item img{
 position: relative;
 width: 30%;
 float: left;
 margin: 0 20px 0 0;
}
 
 
}

/* ==========================================
	mediaQuery スマホ用
========================================== */

@media only screen and (max-width: 640px){
	
img{
	max-width:100%;
	height: auto;
}

.Hide_sp{
	display:none;
}	
 
 .col_area{
	display: block;
	width: 100%;
	margin-left: 0;
}

.col_item{
	display: block;
 margin-bottom: 40px;
}
 
.font_36{
 font-size: 22pt;
 line-height: normal;
}

 .font_30{
 font-size: 16pt;
 line-height: normal;
}
 
 .font_22{
 font-size: 16pt;
 line-height: 1.8em;
}


.font_18{
 font-size: 13pt;
 line-height: 1.8em;
}
 
.font_14{
 font-size: 13pt;
 line-height: 1.8em;
}
 

.marginT80{
	margin-top:40px !important;
}

.marginT60{
	margin-top:40px !important;
}

 .paddingTB60{
	padding: 40px 0 !important;
}
 
.btn{
 height: 50px;
 line-height: 50px;
 font-size: 13pt;
 margin: 60px auto;
}




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

         main
		  
*****************************************/	

#main-image{
 height: 350px;
 padding-top: 100px;
}

#main-image h1{
 width: auto;
 font-size: 18pt;
}


#main-estimate{
 height: auto;
 line-height: normal;
 padding: 10px 0;
}
 

#main-estimate span{
 padding: 0 10px;
 height: auto;
 line-height: normal;
 margin-right: 10px;
}
 
#main-estimate br{
 display: block;
}

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

         finishing_flow
		  
*****************************************/

.ribbon {
 height: auto !important;
 padding: 10px 15px !important;
 font-size: 13pt;
 text-align: left;
 }

.ribbon:before,.ribbon:after {
  border:none;
}

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

         voice
		  
*****************************************/	
#voice{
 padding: 20px;
}

#voice h2{
 background: #0AA156;
 color: #fff;
 text-align: center;
 margin: -20px -20px 0 -20px;
 padding: 10px;
}

#voice .voice_item{
 padding: 85px 0 0 0;
}


#voice .voice_01{
 background: url("../../images/works-05/voice_01.png") no-repeat center top; 
 background-size: 80px;
}
#voice .voice_02{
 background: url("../../images/works-05/voice_02.png") no-repeat center top; 
 background-size: 80px;
}
#voice .voice_03{
 background: url("../../images/works-05/voice_03.png") no-repeat center top; 
 background-size: 80px;
}
#voice .voice_04{
 background: url("../../images/works-05/voice_04.png") no-repeat center top; 
 background-size: 80px;
}
#voice .voice_05{
 background: url("../../images/works-05/voice_05.png") no-repeat center top; 
 background-size: 80px;
}
#voice .voice_06{
 background: url("../../images/works-05/voice_06.png") no-repeat center top; 
 background-size: 80px;
}
 
 /****************************************

         features
		  
*****************************************/	

 
 #features .features_item h4{
 margin-bottom: 10px;
  text-align: center;
}
 
 #features .features_item{
  padding: 20px;
 }

#features .features_item .col_item img{
 width: 140px;
 float: none;
 margin: 0 auto 10px auto;
 display: block;
}
 
}