@charset "UTF-8";

#tit_area{
background: url("../images/main_service.jpg") no-repeat center center;
background-size: cover;
}

/*----------------------------------------------------------------------------------------------------------------------見出し・改行----------*/

.tit_jp{
font-size:30px;
font-weight:bold;
line-height:1.8;
letter-spacing:0.1em;
}

.tit_en{
font-size:17px;
color:#8dc21f;
letter-spacing:0.05em;
}

.br_pc{ display:inline; }

.br_sp{ display:none; }

@media screen and (max-width:1200px){

.tit_jp{ font-size:24px; }	

.br_pc{ display:none; }

.br_sp{ display:inline; }

}


/*----------------------------------------------------------------------------------------------------------------------intro----------*/

#intro{
width:83.3%;
max-width:1200px;
margin:110px auto 0;
}

#intro h2{
font-size:36px;
color:#8dc21f;
}

#intro p{ 
margin-top:5px;
position:relative;
padding-bottom:90px;
}

#intro p::after{ 
position: absolute;
bottom:0;
left: 0;
content: "";
width: 50px;
height: 1px;
background: #ccc;
}

@media screen and (max-width:1024px){
	
#intro{
width:90%;
margin:60px auto 0;
}	

#intro h2{
font-size:24px;
line-height:1.6;
}

#intro p{ padding-bottom:50px; }

}



/*----------------------------------------------------------------------------------------------------------------------strong----------*/

#strong{
width:83.3%;
max-width:1200px;
margin:100px auto 0;
display:flex;
justify-content: space-between;
}

#strong .tit_box{ width:30%; }

#strong ul{ width:70%; }

#strong ul a{ transition: 0.2s; }
#strong ul a:hover{ color:#8dc21f; }

#strong ul li{
border:1px solid #ddd;
display:flex;
margin-top:12px;
background-color:#f6f6f6;
height:90px;
line-height:1;
}

#strong ul li.bg_w{ background-color:#fff; }

#strong ul li .ico{
width:16%;
text-align:center;
border-right:1px dotted #ccc;
padding-top:24px;	
}

#strong ul li h2{
font-size:18px;
font-weight:bold;
padding-top:36px;
width:78%;
margin:0 3%;
background: url("../images/cir_arrow_bl_down.png") no-repeat right center;
background-size:17px 17px;
}


@media screen and (max-width:767px){

#strong{
width:90%;
margin:50px auto 0;
display:block;
}

#strong .tit_box{ width:100%; }

#strong ul{ 
width:90%;
margin-left:10%;
margin-top:30px;
}

#strong ul li .ico{
width:30%;
}

#strong ul li h2{
width:64%;
margin:0 3%;
font-size:15px;
background: url("../images/cir_arrow_bl_down.png") no-repeat right center;
background-size:17px 17px;
}
	
}

/*----------------------------------------------------------------------------------------------------------------------ec----------*/

#ec {
margin-top:150px;
background-color:#f6f6f6;
padding:150px 0;
}

#ec .inner{
width:83.3%;
max-width:1200px;
margin:0 auto;
display:flex;
justify-content: space-between;
}

#ec h2.tit_jp{ width:30%; }

#ec .box_txt{ width:70%; }

#ec .box_txt h3{
color:#8dc21f;
font-size:24px;
margin-bottom:8px;
}

#ec .box_txt ul{
margin-top:20px;
font-size:14px;
letter-spacing:0.1em;
}

#ec .box_txt li{
padding:16px 0 12px 28px;
border-bottom:1px dotted #ccc;
background: url("../images/ico_check.png") no-repeat left center;
background-size:16px 14px;
}

.komeda{ 
display:flex;
margin-top:50px;
background-color:#fff;
padding:30px 3.5%;
}

.komeda .ph{ width:38.4%; }

.komeda .ph img{ width:100%; height:auto }

.komeda .txt{ 
width:58.1%;
margin-left:3.5%;
}

.komeda .txt h2{
margin-top:5px;	 
color:#8dc21f;
font-weight:bold;
font-size:16px;
letter-spacing:0.05em;
padding-bottom:3px;
border-bottom:1px dotted #ccc;
}

.komeda .txt p{ margin-top:8px; }

.komeda .txt p:last-child{ margin-top:4px; }

.komeda .txt a{
color:#8dc21f;
text-decoration:underline;
}

.komeda .txt a:hover{ text-decoration:none; }


@media screen and (max-width:767px){
	
#ec {
margin-top:60px;
background-color:#f6f6f6;
padding:60px 0;
}

#ec .inner{
width:90%;
margin:0 auto;
display:block;
}

#ec h2.tit_jp{ width:100%; }

#ec .box_txt{ 
width:90%;
margin-left:10%;
}

#ec .box_txt h3{
margin-bottom:8px;
margin-top:25px;
line-height:1.6;
}

#ec .box_txt li{
padding:16px 0 12px 32px;
}

.komeda{ 
display:block;
margin-top:50px;
padding:30px 5%;
}

.komeda .ph{ width:100%; }

.komeda .txt{ 
width:100%;
margin-left:0;
margin-top:20px;
}

.komeda .txt h2{
margin-top:20px;
line-height:1.6;
padding-bottom:5px;
}

}

/*----------------------------------------------------------------------------------------------------------------------wave----------*/

#wave {
margin:150px auto 0;
width:83.3%;
max-width:1200px;
display:flex;
}

#wave h2.tit_jp{ width:30%; }

#wave .box_txt{ width:70%; }

#wave .box_txt .ph img{ width:100%; height:auto;  }

#wave .box_txt h3{ 
color:#8dc21f;
font-size:18px;
font-weight:bold;
margin-top:35px;
}

#wave .box_txt p{ margin-top:8px; }

.smile{
display:flex;
margin-top:30px;
background-color:#f6f6f6;
padding:25px 5%;
}

.smile .ph{ width:27.5%; }

.smile span{
display:block;
width:72.5%;
margin-left:5%;
line-height:1.8;
}

@media screen and (max-width:767px){
	
#wave {
margin:60px auto 0;
width:90%;
display:block;
}

#wave h2.tit_jp{ width:100%; }

#wave .box_txt{ 
width:90%;
margin-left:10%;
margin-top:30px;
}

#wave .box_txt h3{ line-height:1.6; }

#wave .box_txt p{ margin-top:10px; }

.smile{
display:block;
margin-top:30px;
padding:25px 5%;
}

.smile .ph{ width:50%; }

.smile span{
width:100%;
margin-left:0;
margin-top:20px;
}

	
}

/*----------------------------------------------------------------------------------------------------------------------second----------*/

#second {
margin-top:150px;
padding:150px 0;
background-color:#f6f6f6;
}

#second .inner{
width:83.3%;
max-width:1200px;
margin:0 auto;
display:flex;
justify-content: space-between;
position:relative;
z-index:0;
}

#second h2.tit_jp{ width:30%; }

#second .box_txt{ width:70%; }

#second .box_txt .ph img{ width:100%; height:auto;  }

#second .box_txt h3{ 
color:#8dc21f;
font-size:18px;
font-weight:bold;
margin-top:35px;
}

#second .box_txt p{ margin-top:8px; }

#second .box_txt ul{
margin-top:20px;
font-size:14px;
letter-spacing:0.1em;
}

#second .box_txt li{
padding:16px 0 12px;
border-bottom:1px dotted #ccc;
}

#second .box_txt li span{ color:#8dc21f; }

#second .circle{
position:absolute;
top:-50px;
left:0;
width:545px;
height:545px;
z-index:-1;
}

#second .circle img{ width:100%; height:auto;  }


@media screen and (max-width:767px){
	
#second {
margin-top:60px;
padding:60px 0;
}

#second .inner{
width:90%;
display:block;
}

#second h2.tit_jp{ width:100%; }

#second .box_txt{ 
width:90%;
margin-left:10%;
margin-top:30px;
}

#second .box_txt h3{ line-height:1.6; }

#second .circle{
top:-10px;
width:300px;
height:300px;
}

}

/*----------------------------------------------------------------------------------------------------------------------processing----------*/

#processing {
margin:150px auto 0;
width:83.3%;
max-width:1200px;
display:flex;
}

#processing h2.tit_jp{ width:30%; }

#processing ul{ 
width:70%;
display:flex;
justify-content: space-between;
flex-wrap: wrap;
}

#processing ul li{ 
width:28.5%;
margin-top:40px;
}

#processing ul li:nth-child(1),
#processing ul li:nth-child(2),
#processing ul li:nth-child(3){ margin-top:0px;	}

#processing ul li:nth-child(1) .ico{
background: url("../images/ico_service_05.png") no-repeat center center;
background-size:90px 36px;
}

#processing ul li:nth-child(2) .ico{
background: url("../images/ico_service_06.png") no-repeat center center;
background-size:56px 90px;
}

#processing ul li:nth-child(3) .ico{
background: url("../images/ico_service_07.png") no-repeat center center;
background-size:62px 63px;
}

#processing ul li:nth-child(4) .ico{
background: url("../images/ico_service_08.png") no-repeat center center;
background-size:64px 72px;
}

#processing ul li:nth-child(5) .ico{
background: url("../images/ico_service_09.png") no-repeat center center;
background-size:98px 95px;
}

#processing ul li:nth-child(6) .ico{
background: url("../images/ico_service_10.png") no-repeat center center;
background-size:55px 71px;
}

#processing ul li:nth-child(7) .ico{
background: url("../images/ico_service_11.png") no-repeat center center;
background-size:98px 58px;
}

#processing ul li:nth-child(8) .ico{
background: url("../images/ico_service_12.png") no-repeat center center;
background-size:78px 58px;
}

#processing ul li .ico{ height:180px; }

#processing ul li:nth-child(odd) .ico{ background-color:#f9f9f9; }

#processing ul li:nth-child(2n) .ico{ background-color:#f3f8ea; }

#processing ul li h3{ 
text-align:center;
font-size:18px;
margin-top:15px;
}

#processing ul:after {
content: "";
display: block;
width: 28.5%;
height: 0;
}


@media screen and (max-width:1024px){
	
#processing {
margin:150px auto 0;
display:block;
}

#processing h2.tit_jp{ width:100%; }

#processing ul{ 
width:100%;
margin-top:40px;
}
	
}

@media screen and (max-width:767px){
	
#processing {
margin:60px auto 0;
width:90%;
}

#processing ul{ 
width:90%;
margin-left:10%;
margin-top:0px;
}

#processing ul li{ 
width:48%;
margin-top:40px;
}

#processing ul li:nth-child(1),
#processing ul li:nth-child(2),
#processing ul li:nth-child(3){
margin-top:40px;	
}

#processing ul li:nth-child(odd) .ico{ background-color:#f9f9f9; }
#processing ul li:nth-child(2n) .ico{ background-color:#f7fdff; }
#processing ul li:nth-child(3n) .ico{ background-color:#f7fdff; }
#processing ul li:nth-child(7) .ico{ background-color:#f7fdff; }
#processing ul li:nth-child(4n) .ico{ background-color:#f9f9f9;  }

#processing ul li h3{ font-size:15px; }

}


/*----------------------------------------------------------------------------------------------------------------------sample----------*/

#sample{
margin:150px auto 0;
background-color:#f6f6f6;
}


#sample .inner{
padding:150px 0;
width:83.3%;
margin:0 auto;
max-width:1200px;
display:flex;
}

#sample h2.tit_jp{ width:30%; }

#sample ul{ 
width:70%;
display:flex;
justify-content: space-between;
flex-wrap: wrap;
}

#sample ul li{ 
width:28.5%;
margin-top:40px;
}

#sample ul li:nth-child(1),
#sample ul li:nth-child(2),
#sample ul li:nth-child(3){
margin-top:0px;	
}

#sample ul li:nth-child(1) .ico{
background: url("../images/ico_service_13.png") no-repeat center center;
background-size:90px 74px;
background-color:#fff;
}

#sample ul li:nth-child(2) .ico{
background: url("../images/ico_service_14.png") no-repeat center center;
background-size:67px 68px;
background-color:#fff;
}

#sample ul li:nth-child(3) .ico{
background: url("../images/ico_service_15.png") no-repeat center center;
background-size:69px 59px;
background-color:#fff;
}

#sample ul li:nth-child(4) .ico{
background: url("../images/ico_service_16.png") no-repeat center center;
background-size:84px 62px;
background-color:#fff;
}

#sample ul li:nth-child(5) .ico{
background: url("../images/ico_service_17.png") no-repeat center center;
background-size:86px 92px;
background-color:#fff;
}

#sample ul li:nth-child(6) .ico{
background: url("../images/ico_service_18.png") no-repeat center center;
background-size:63px 81px;
background-color:#fff;
}

#sample ul li:nth-child(7) .ico{
background: url("../images/ico_service_19.png") no-repeat center center;
background-size:57px 89px;
background-color:#fff;
}

#sample ul li:nth-child(8) .ico{
background: url("../images/ico_service_20.png") no-repeat center center;
background-size:101px 58px;
background-color:#fff;
}

#sample ul li .ico{ height:180px; }

#sample ul li h3{ 
text-align:center;
font-size:18px;
margin-top:15px;
}

#sample ul:after {
content: "";
display: block;
width: 28.5%;
height: 0;
}
@media screen and (max-width:1024px){
	
#sample .inner{
display:block;
}

#sample .inner h2.tit_jp{ width:100%; }

#sample .inner ul{ 
width:100%;
margin-top:40px;
}
	
}

@media screen and (max-width:767px){
	
#sample {
margin:60px auto 0;
}
#sample .inner{ 
padding:60px 0;
width:90%;
}

#sample .inner ul{ 
width:90%;
margin-left:10%;
margin-top:0px;
}

#sample ul li{ 
width:48%;
margin-top:40px;
}

#sample ul li:nth-child(1),
#sample ul li:nth-child(2),
#sample ul li:nth-child(3){
margin-top:40px;	
}

#sample ul li h3{ font-size:15px; }

}


/*----------------------------------------------------------------------------------------------------------------------councel----------*/

#counsel {
margin:150px auto 0;
width:83.3%;
max-width:1200px;
}

#counsel h2{
width:100%;
font-weight:bold;
background-color:#f3f8ea;
border-top:1px solid #e5e5e5;
border-bottom:1px solid #e5e5e5;
padding:22px 0 17px 30px;
}

#counsel ul{
display:flex;
border-bottom:1px solid #e5e5e5;
}

#counsel ul li.tel{ 
width:30%;
font-weight:bold;
font-size:18px;
border-right:1px dotted #ccc;
margin:20px 0;
padding-left:30px;
letter-spacing:0.2em;
}

#counsel ul li.tel a{ cursor:default; }

#counsel ul li.tel span{ font-size:32px; }

#counsel ul li.time{ 
width:70%;
margin:25px 0;
padding-left:30px;
line-height:2;
}


#counsel ul li.time span{ 
font-weight:bold;
color:#8dc21f;
}

#counsel .more{
width:40%;
margin:70px auto;
}


@media screen and (max-width:1200px){
	
#counsel ul{ display:block; }

#counsel ul li.tel{ 
width:100%;
border-right:none;
margin:20px 0 0 0;
}

#counsel ul li.time{ 
width:100%;
margin:0 0 25px 0;
}

#counsel .more{
width:70%;
margin:40px auto;
}

}



@media screen and (max-width:767px){

#counsel {
margin:60px auto 0;
width:90%;
}

#counsel ul li.tel span{ font-size:24px; }

#counsel ul li.time{ padding-right:30px; }

}