@charset "UTF-8";

#content {padding: 110px 0 0;}
.contents_title {width: 100%; margin: 0 0 80px;padding: 0;position: relative;}
.contents_title img {width: 100%;height: auto;}
.contents_title_text {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);}
.contents_title h1 {
width: 100%;
font-size: 4vh;
line-height: 1.4;
font-weight: 700;
color: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
z-index: 9;}



.service {width: 960px;margin:0 auto 60px;}
.service dl {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
background: #eeeeee;
margin: 0 0 20px;
}
.service dl dt {width: 100px; background: #22b4af; position: relative;}
.service dl dt span {
font-size: 54px;line-height: 1;color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);

}
.service dl dd {padding: 30px;}
.service dl dd p{font-size: 24px;line-height: 1.4;}
.service ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.service ul li {width: 40%;}
.service ul li:first-child {width: 55%;margin: 0 5% 0 0;}
.service ul li img {width: 100%;height: auto;}
.service ul li p {font-size: 14px;line-height: 1.6;text-align: left;margin: 0 0 20px;}
.service ul li ul {}
.service ul li ul li {}
.service ul li ul.btn_list {width: 100%;}
.service ul li ul.btn_list li.wide2 {width: 48%;margin: 0 2% 2% 0;}

.service ul li ul.list {width: 100%;}
.service ul li ul.list li {
width: 21%; margin: 0 4% 0 0; position: relative;
border: 1px solid #22b4af;
border-radius: 100vh;
-webkit-border-radius: 100vh;
-moz-border-radius:100vh;
}
.service ul li ul.list li:nth-child(4n) {margin: 0;}

.service ul li ul.list li::before {
  display: block;
  content: '';
  padding-top: 100%;
}

.service ul li ul.list li p {
font-size: 14px;
line-height: 1.4;font-weight: 700; color: #22b4af;
text-align: center;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);

}

.service_end {width: 600px;margin: auto;}
.service_end img {width: 100%;height: auto;}

.link_btn {
text-align: center;
color: #ffffff;
font-size: 18px;
line-height:60px;font-weight: 700;
height: 60px;
background:#eb6f28;
padding:0 20px 0 0;
text-decoration: none;display:block;vertical-align: bottom;border: none;
cursor: pointer;
cursor: hand;
border-radius: 100vh;
-webkit-border-radius: 100vh;
-moz-border-radius: 100vh;
transition:0.3s;
position: relative;
}
.link_btn:hover {background:#f9aa25;text-decoration: none;}
.link_btn:before {
content: '';
width: 8px;
height: 8px;
border: 0;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
position: absolute;
top: 50%;
right: 20px;
margin-top: -4px;
transform: rotate(45deg);
}



@media screen and (max-width: 1060px) {
#content {padding: 90px 0 0;}
.contents_title {width: 100%; margin: 0 0 80px;padding: 0;position: relative;}
.contents_title img {width: 100%;height: auto;}
.contents_title_text {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);}
.contents_title h1 {
width: 100%;
font-size: 3vh;
line-height: 1.4;
font-weight: 700;
color: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
z-index: 9;}
}
@media screen and (max-width: 767px) {
#content {padding: 110px 0 0;}
.contents_title {width: 100%; margin: 0 0 10%;padding: 0;position: relative;}
.contents_title img {width: 100%;height: auto;}
.contents_title_text {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);}
.contents_title h1 {
font-size: 3vh;
line-height: 1.4;
font-weight: 700;
color: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
z-index: 9;}




.service {width: 90%;margin:0 auto 10%;}
.service dl {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
background: #eeeeee;
margin: 0 0 20px;
}
.service dl dt {width: 20%;height: auto; background: #22b4af; position: relative;}
.service dl dt span {
font-size: 28px;line-height: 1;color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);

}
.service dl dd {width: 70%; padding: 2.5% 5%;margin: 0;}
.service dl dd p{font-size: 16px;line-height: 1.4;text-align: left;}
.service ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.service ul li {width: 100%;}
.service ul li:first-child {width: 100%;margin: 0 0 5%;}
.service ul li img {width: 100%;height: auto;}
.service ul li p {font-size: 12px;line-height: 1.6;text-align: left;margin: 0 0 20px;}
.service ul li ul {}
.service ul li ul li {}
.service ul li ul.btn_list {width: 100%;}
.service ul li ul.btn_list li.wide2 {width: 48%;margin: 0 2% 2% 0;}

.service ul li ul.list {width: 100%;}
.service ul li ul.list li {
width: 21%; margin: 0 4% 0 0; position: relative;
border: 1px solid #22b4af;
border-radius: 100vh;
-webkit-border-radius: 100vh;
-moz-border-radius:100vh;
}
.service ul li ul.list li:nth-child(4n) {margin: 0;}

.service ul li ul.list li::before {
  display: block;
  content: '';
  padding-top: 100%;
}

.service ul li ul.list li p {
font-size: 14px;
line-height: 1.4;font-weight: 700; color: #22b4af;
text-align: center;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);

}

.service_end {width: 80%;margin: auto;}
.service_end img {width: 100%;height: auto;}





.link_btn {
text-align: center;
color: #ffffff;
font-size: 3vw;
line-height:40px;font-weight: 700;
height: 40px;
background:#eb6f28;
padding:0;
text-decoration: none;display:block;vertical-align: bottom;border: none;
cursor: pointer;
cursor: hand;
border-radius: 100vh;
-webkit-border-radius: 100vh;
-moz-border-radius: 100vh;
transition:0.3s;
position: relative;
}
.link_btn:hover {background:#f9aa25;text-decoration: none;}
.link_btn:before {
content: '';
width: 6px;
height: 6px;
border: 0;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
position: absolute;
top: 50%;
right: 30px;
margin-top: -3px;
transform: rotate(45deg);
}

}