@charset "UTF-8";
/* ====================================
common
==================================== */
html, body, h1, h2, h3, h4, h5, h6, h7{
    font-size: 1.5rem;
	    margin: 0;
    padding: 0;
}

body {
    font-size: 14px;
    font-family: "游ゴシック", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}

p, a, img, dl, dt, dd, ol, ul, li, table {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-weight: normal;
    font-size: 1.0rem;
}

img {
  display: block; /* 要素をブロック化 */ 
  margin: 0 auto; /* 中央揃え */
}
h3{
	font-size:60px;
	font-weight: bold;
	margin: 0 0 100px;
}
h3 span{
	color:#006cd4;
	font-weight: bold;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.cFix:before,
.cFix:after {
    content: "";
    display: table;
}
.cFix:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
br.brSP{
    display:none;
}

.sp{
    display:none;
}
.pc{
    display:block;
}


/* ====================================
contents
==================================== */

#wrapper {
    width: 100%;
    height: 100%;
    background: #fff;
    text-align: center;
    overflow: hidden;/*sp右余白削除*/
}

/*ロゴ*/
.logoArea{

    padding: 15px 0 0 0;
              text-align: left;
}
.logoArea .logo{
    max-width: 1024px;
    margin: 0 auto 20px;
}
.logoArea .logo h1{
    width: 230px;
    padding: 5px;
}
.logoArea .logo h1 img{
width:100%;
}

/*ヘッダーイメージ*/
.headImg {
    width: 100%;
    background: url(../img/main_bg.jpg);
    background-size: cover;
    background-position: center bottom;
}
.headImg .inner {
    max-width: 1024px;
    margin: 0 auto;
}
.headImg .inner.sp {
    display:none;
    }
.headImg .inner h1 {
    width: 100%;
    padding: 0;
}
.headImg .inner h1 img {
    width: 100%;
}
.headImg .inner h2 {

}
.headImg .inner h2 img {
    width: 100%;
}
.headImg .inner .circle {
    width: 350px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.headImg .inner .circle img {
    width: 100%;
}
.main_card{
    background:url(../img/main_bottom_bg.png) repeat;
    text-align: center;
    padding:14px;
}

.main_card img{
    max-width:1024px;
    width:100%;
    }

/*floatBtn*/
.floatBtn{
    display:none;
}
.floatBtn.fixed{
    display:none;
}
.floatBtn .inquiry{
    display:none;
}
/*iinquiry_sp*/
.inquiry_sp{
    display:none;
}
/*inquiry*/
.inquiry {
    background: #f8f4e6;
    padding: 30px 0;
    margin: 0 auto;
}
.inquiry .inner {
    max-width: 984px;
    width: 100%;
    margin: 0 auto;
}
.inquiry .commentImg{
    display:block;
}
.inquiry .commentImg.sp{
    display: none;
}

.inquiry .inner .TelMailBox{
    padding: 30px;
}
.inquiry .inner .TelMailBox h3{
    background:url(../img/line.png) repeat-x left center;
    padding: 0;
    margin: 0 0 20px;
    text-align: left;
    font-size: 23px;
}
.inquiry .inner .TelMailBox h3 span{
    background:#fff;
    color:#000;
    padding: 0 10px 0 0;
}
.inquiry .inner .telBtn {

}
.inquiry .inner .telBtn_sp{
        display:none;
    }
.inquiry .inner .mailBtn {

}
.inquiry .inner .mailBtn a img:hover{
    filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
}

.mailBtn{
    display:block;
}
.mailBtn.sp{
    display: none;
}

.tel_btn {
    width: 100%;
}
.mail_btn {
    width: 100%;
}
/*Line{*/
.Line{
    background:#00c500;
}
.Line .inner{
    max-width: 984px;
    width: 100%;
    margin: 0 auto;
    padding:60px 0;
}
.Line .Ttl{
    padding:0 0 50px;
}
.Line .Btn{
    background:#fff url(../img/line_ribon.png) no-repeat left top;
    border-radius: 20px;
    padding:50px 30px 30px 30px;
}
.Line .txt{
    font-size: 28px;
    font-weight: bold;
 margin: 0 0 20px;
}
.Line .txt span{
	background: linear-gradient(transparent 60%, #ffff66 60%);
	}

/*nenshi*/
.nenshi{
    background:url(../img/nenshi_bg.png);
}

/*zouzei*/
.zouzei{
    background:url(../img/zouzei_bg.png);
}

/*chenge*/
.chenge{
    background: #f8f4e6;
    padding: 150px 0 0;
}


/*problem*/
.problem {
    width: 100%;
    text-align: center;
 }
.problem .inner {
    max-width: 984px;
    width: 90%;
    margin: 150px auto 0;
}
.problem .ttl {
    width: 100%;
    margin: 0 auto 80px;
}
.problem .ttl img {
    width: 100%;
}
.problem .imgArea {
    width: 100%;
}
.problem .imgArea img {
    width: 100%;
}


/*5つの特徴*/
.point {
    background: #f8f4e6;
    padding: 150px 0 0;
}
.point .inner {
    text-align: left;
    max-width: 984px;
    margin: 0 auto;
}
.point img {
    width: 100%;
}
.point .ttl {
    width: 100%;
    height: auto;
    margin: 0 auto 2em;	
}

.point .box_imgArea{
    margin:0 0 60px 0;
}
.point .boxArea{
    width: 472px;   
    float: left;
    margin: 0 10px 30px;
}

.point dt{
      font-family: "游明朝",YuMincho,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HG明朝E","MS P明朝","MS 明朝",serif;
text-align: center;
    font-size: 29px;
    padding: 20px 0;
font-weight: bold;
border-bottom: solid 1px #000;
}
.point dd{
    padding: 20px;
    margin-bottom: 30px;   
}

/*staff*/
.staff {
    background:url(../img/flow_bg.png) repeat;
    padding: 150px 0;
}
.staff img{
	width:100%;
}
.staff .inner{
    max-width: 984px;
    width: 100%;
    margin: 0 auto;	
}
 .staff h3{
    font-size: 70px;
}
 .staff h3 img{
    width: 80%;
}
.staff dl{
    width: 30%;
    float: left;
    padding: 10px;
}
.staff dt p{
    font-size: 30px;
    font-weight: bold;
    padding:20px 0;
        font-family: "游明朝",YuMincho,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HG明朝E","MS P明朝","MS 明朝",serif;
}
.staff dd{
    text-align: left;
}
.staff dd span{
	display: block;
	padding:0 0 10px;
}


/*voice*/
.voice {
    padding: 150px 0;
}
.voice .inner {
    max-width: 984px;
    width: 100%;
    margin: 0 auto;
}
.voice .imgArea{
    padding: 15px;
}
.voice .imgArea img{
   width: 100%;
}

.voice ul{
    padding-top:30px;

}
.voice li {
    text-align: left;
    background: url(../img/voice_list.png) no-repeat 10px center;
    padding: 30px 10px 30px 110px;
    font-size: 1.2em;
    border-bottom: dotted #000 5px;
    font-weight: bold;
}
/*service*/
.service {
    padding: 150px 0;
    text-align: left;
}
.service .inner {
    max-width: 984px;
    width: 100%;
    margin: 0 auto;
}
.service .boxArea{
    border-bottom: 1px #000 solid;
    margin:0 0 50px;
}
.service .imgArea{
    float: left;
    width:45%;
    margin:0 0 30px;
}
.service .price_area{
    float: right;
    width:48%;
    margin:0 0 30px;
}
.service h4{
    background: #006d17;
    padding: 0 0 0 10px;
    font-size: 50px;
    font-weight: normal;
}
.service h4 span{
    color: #fff;
    padding: 15px;
    border-left: 3px solid #fff;
}
.service dl{
      border-bottom: solid #ccc 1px;
}
.service dt {
  font-size:40px;   
  float: left ;
  clear: both ;
  width: 200px ;
  height: 50px ;
  line-height: 50px ;
      padding:  20px 0 20px 10px;
 font-weight: bold;
 }
.service dd {
  margin-left: 200px ;
  width: 400px ;
  height: 50px ;
  line-height: 50px ;
      padding: 20px 0;
  font-size:40px; 
 font-weight: bold;
 font-family: 'Century Gothic',sans-serif;
}
.service dd span{
    color:#d73039;
    }
.service .font_large{
    font-size:55px;
}
.service .txt_area{
    clear: both;
    background: #f8f4e6;
    padding: 30px;
    margin:0 0 50px;
    border-radius: 10px;
}
.service .txt_area p{
font-size:1.3rem;
}
.service .txt_area .list{
    margin:0 0 15px;
}
.service .txt_area .list span{
    background: #d73039;
    color:#fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1.1rem;
    margin: 0 20px 0 0;
    font-weight: bold;
}

/*flow*/
.flow {
    background: #f8f4e6;
    padding: 150px 0;
}
.flow .inner {
    max-width: 984px;
    width: 100%;
    margin: 0 auto;
}

/*company*/
.company{
	    padding: 150px 0;
}
.company .inner {
    max-width: 984px;
    width: 100%;
    margin: 0 auto;
}
.company .boxArea{
	width:48%;
	text-align: left;
}
.company .imgArea{
    width:350px;
    margin: 0 auto 30px;
}
.company .imgArea img{
    width:100%;
}
.company .boxArea h4{
	color:#fff;
	background:#006d17;
	padding:10px 30px;
border-radius: 10px;
margin:0 0 20px;
font-size: 30px;
	}
.company .boxArea dl{
	margin:0 0 20px;
	padding:0 20px;
}
.company .boxArea dt{
	font-size:28px;
	font-weight: bold;
    padding: 10px 0;
	}
.company .boxArea dt span{
    font-size:40px;
    font-weight: bold;
    }

.company .boxArea dt.line{
    border-top:solid #000 1px;
}
.company .boxArea.leftBox{
	float:left;
}
.company .boxArea.rightBox{
	float:right;
}

/*フッター*/
#footer {
    clear: both;
    text-align: center;
    background: #000;
    padding: 5px;
    color: #fff;
}

#copyright{
    font-size: 16px;
}  



/*===============================================================================

SP

===============================================================================*/
@media screen and (max-width: 1024px) {
    /* ====================================
contents
==================================== */
.logoArea {
    padding: 15px 20px 0;
    }
.headImg .inner {
    padding: 0 20px;
} 
.main_card{
    background:#007000;
}  
.Line .inner {
    width: auto;
    padding: 60px 20px;
}
.Line .Btn {
    background-size: 150px;
}
.Line .txt {
    font-size: 20px;
    }
.Line a img{
    width:50%;
}

.chenge {
    padding: 80px 0 0;
}
.chenge img{
    width:80%;
}
.problem .inner {
    width: 80%;
    margin: 80px auto 0;
}
.point {
    padding: 80px 0 0;
}
.point .inner {
    width: 80%;
}
.point .boxArea {
    width: 100%;
}
.point img {
    width: 80%;
}
.point dt {
    padding: 10px 0;
}
.staff {
    padding: 80px 0;
}
.staff dl {
    width: 27%;
}
.staff dt p {
    font-size: 20px;
    padding: 10px 0;
}
.staff dd {
    font-size: 18px;
}
.staff h3 {
    width: 80%;
    margin: 0 auto 20px;
}
.voice {
    width:80%;
    padding: 80px 0;
    margin:0 auto;
}
.voice h3 {
    margin: 0 0 20px;
}
.voice img{
 width:100%;
     margin: 0 auto;
}
.voice li {
    font-size: 0.8em;
}
.flow {
    padding: 80px 0;
}
.flow h3 img {
    width: 50%;
}
.flow .imgArea img{
    width: 80%;
    margin:0 auto;
}
.service {
    padding: 80px 0;
    width: 90%;
    margin: 0 auto;
}
.service img{
    width:100%;
}
.service h3 img{
    width:70%;
    margin:0 auto;
}
.service h4 {
    font-size: 30px;
}
.service dt {
    font-size: 20px;
    width: 100px;
    height: 30px;
    line-height: 30px;
}
.service dd {
    margin-left: 100px;
    width: auto;    
    font-size: 28px;
    height: 30px;
    line-height: 30px;
    }
.service .font_large {
    font-size: 35px;
}
.service .txt_area p {
    font-size: 1.0rem;
}
.company {
    padding: 80px 0;
    width: 90%;
    margin: 0 auto;
}
.company h3 img{
    width:60%;
}
.company .boxArea h4 {
    font-size: 24px;
}
.company .boxArea dt {
    font-size: 24px;
}
.company .boxArea dd {
    font-size: 18px;
}
.company .boxArea dt span {
    font-size: 30px;
}
.company .imgArea {
    width: 90%;
}
}


/*===============================================================================
===============================================================================*/
@media screen and (max-width: 640px) {
/* ====================================
contents
==================================== */
#wrapper {
    margin: 0 0 20px;
}
p, a, img, dl, dt, dd, ol, ul, li, table {
    font-size: 0.8rem;
}
h3{
    margin: 0;
	font-size:24px;
	font-weight: bold;
}
h3 img{
    width:100%;
    margin: 0 auto;
}

br.brSP{
    display:block;
}

.sp{
    display: block;
}
.pc{
    display: none;
}
/*ヘッドイメージ sp*/

.logoArea {
    padding: 0;
    background: #ffffff;
    margin: 0 0 10px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}
.logoArea .logo {
    margin: 0 auto;
}
.logoArea .logo h1 {
     width: 120px;
}

.main_card{
    background:#007000;
}
.headImg {
    height: auto;
}
.headImg .inner {
    padding-top: 0;
}
.headImg .inner img{
    width:100%;
    }
/*iinquiry_sp*/
.inquiry_sp{
    display:block;
}

/*chenge sp*/
.chenge {
    padding: 30px 0 0;
}
.chenge img{
    width:90%;
    margin:0 auto;
}

/*roblem sp*/
.problem{
    padding: 20px 0 0;
}
.problem .inner {
    margin: 30px auto 0;

}	
.problem .ttl {
    width: 100%;
    float: none;
margin: 0 auto 40px;
}
.problem .imgArea {
    width: 100%;
    float: none;
    margin: 0 auto;
}
		
/*point　sp*/
.point {
    background: #f4f0ea;
padding: 0;
}
.point .inner {
    padding: 50px 20px 20px;
}   
.point .ttl {
	width:100%;
}
.point .boxArea {
    width: 100%;
    float: none;
    margin: 0;
}
.point img {
    width: 100%;
}
.point .imgArea {
    width: 100%;
}
.point dt {
    font-size: 20px;
}
.point dd {
    padding: 20px 0;
}
.point .box_imgArea {
    margin: 0;
}

/*staff　sp*/
.staff {
padding:60px 20px;
}
.staff h3{
    width: 90%;    
    margin:0 auto 30px;
  }
.staff h3 img{
    width:100%;
}
.staff dl {
    width: 80%;
    float: none;
    padding: 20px;
    margin: 0 auto;
}
.staff .imgArea {
    width: 70%;
    margin: 0 auto;
}
.staff dt p {
    font-size: 22px;
    padding:10px 0;
}
.staff dd span {
    margin: 0 0 10px;
    padding: 0;
    background: #000;
}
.staff span img {
    width: 60%;
}

/*voice　sp*/
.voice {
    padding: 60px 0;
}
.voice .inner {
    width: auto;
    padding: 0;
}
.voice h3{
    margin:0 0 30px;
}
.voice .imgArea {
    margin: 0;
    padding: 0;
}
.voice .imgArea img{
    width:100%;
}
.voice li {
    background-size: 40px;
    padding: 20px 10px 20px 60px;
    font-size: 0.8em;
}
/*service sp*/
.service {
    padding: 50px 0;
}
.service img {
    width:100%;
}
.service .inner {
    margin: 0 20px;
    width: 90%;
}
.service h3 {
    width: 90%;
    margin: 0 auto 20px;
}
.service h3 img{
    width:100%;
    }
.service .imgArea {
    float: none;
    width: 100%;
}
.service .boxArea {
    margin: 0 0 20px;
}
.service .price_area {
    float: none;
    width: 100%;
    margin: 0 0 30px;
}
.service .font_large {
    font-size: 45px;
}
.service dd {
    font-size: 35px;
}
.service h4 {
    font-size: 30px;
    margin: 0 0 10px;
}
.service dt {
    font-size: 20px;
    width: 100px;
}
.service dd {
    margin-left: 100px;
    width: auto;
}
.service .txt_area {
    padding: 20px;
    margin: 0 0 20px;
}
.service .txt_area p {
    font-size: 0.7rem;
}
.service .txt_area .list span {
    padding: 10px;
    font-size: 0.6rem;
    margin: 0 10px 0 0;
}
/*flow sp*/
.flow {
    padding: 60px 0;
    margin-bottom: 0;
    background-size: 130%;
}
.flow h3{
    margin-bottom:30px;
    }
.flow h3 img {
    width: 60%;
}
.flow .inner {
    width: 100%;
	margin:0 auto;
}
.flow .imgArea img {
    width: 90%;
}
/*company sp*/	
.company {
    margin-bottom: 0;
    padding: 50px 20px;
}
.company h3 {
    width: 70%;
    margin: 0 auto 20px;
}
.company h3 img{
    width:100%;
    }
.company .inner {
	padding:0;
	max-width: 100%;
    width: 100%;
    margin: 0;
}
.company .boxArea {
    width: 100%;
}
.company .boxArea h4 {
    font-size: 20px;
}
.company .txt_area {
    width: 100%;
}

.company .txt_area dl dt {
    width: 100%;
}
.company .boxArea dl {
    padding: 0;
}
.company .boxArea dt {
    font-size: 20px;
}
.company .txt_area dl dd {
    width: 100%;
}

/*inquiry　sp*/
.inquiry {
    padding: 0;
}
.inquiry .inner .TelMailBox {
    padding: 20px 20px 0;
}

/*Line　sp*/
.Line {
    background: #00c500;
    padding: 20px;
}
.Line .inner {
    padding: 0;
}
.Line .Btn {
    background-size: 80px;
    padding: 20px 30px 20px 30px;
}
.Line .txt {
    font-size: 16px;
}
 .Line img {  
    width: 100%;
}
.Line a img {
    width: 60%;
}
.Line .Ttl {
    padding: 0 0 20px;
}
.nenshi img{
    width: 100%;
}
.zouzei img{
    width: 100%;
}


/*floatBtn*/
.floatBtn {
        display:block;
padding: 0;
    background: none;
    bottom:0;
}

.floatBtn.fixed {
     display:block;   
  position: fixed;
  z-index:100;
    background: none;
  width: 100%;
  box-shadow: 0 0 8px gray;
}

.floatBtn .inquiry {
    display:block;
    padding: 0;
    width: 100%;
}

.floatBtn .inquiry .inner .TelMailBox {
    padding: 5px 2px;
    background:rgba(243, 240, 234, 0.85);
}


.floatBtn .inquiry .telBtn_sp {
    display: block;
    float: left;
    width: 36%;
   margin: 0 0 0 2px;
}

.floatBtn .inquiry .mailBtn_sp {
    display: block;
    float: left;
    width: 36%;
    margin: 0 0 0 4px;
}
.floatBtn .inquiry .Line_sp {
    display: block;
    float: left;
    width: 25%;
    margin: 0 0 0 4px;
}

/*フッター　sp*/
#footer {
    clear: both;
margin: 0 0 60px;
}
#copyright{
    font-size: 12px;
}

}