@charset "utf-8";

.serviceLink {
    max-width: 800px;
    margin: 0 auto 80px;
	display: flex;
	justify-content:space-between;
}
.serviceLink li {
    width:30%;
}
.serviceLink li a {
    position: relative;
    display: block;
    padding:0 0 5px;
    font-size:1.3rem;
    font-weight: 500;
    color:var(--main-bg1);
    border-bottom: 1px solid var(--main-bg1);
    text-decoration: none;
}
.serviceLink li a::after {
    position: absolute;
	font-family: 'Material Icons';
	content: '\e313';
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    font-size:1.6rem;
}

@media screen and (max-width:900px){
.serviceLink {
    margin: 0 5% 80px;
    display:block;
}
.serviceLink li {
    width:100%;
}
.serviceLink li a {
    padding:10px 0 10px;
}
}

/*===============================================
	ourService
===============================================*/
#ourService {
	max-width: 800px;
	margin: 60px auto 120px;
}
#ourService h3.line {
    font-size:3rem;
}
#ourService h3.line span {
    display: block;
    color:#808080;
    font-weight: 600;
    font-size:1.4rem;
}

@media screen and (max-width:900px){
#ourService {
	margin: 60px 5% 65px;
}  
}

/*===============================================
	service
===============================================*/
.service {
    margin: 0 0 120px;
    padding-top:20px;
}
.service:last-child {
    margin: 0 0 40px;
}
.service .serviceName {
    position: relative;
    margin: 0 0 45px;
}
.service .serviceName h4 {
    position: absolute;
    top:-20px;
    left: 0;
    width:360px;
    padding:5px 0;
    color:#FFF;
    font-size:3rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1em;
    background: var(--main-gr1);
}
.service h5 {
    margin: 0 0 45px;
    color:var(--main-bg1);
    font-weight: 500;
    font-size:1.8rem;
    line-height: 1.6;
    text-align: center;
}

.serviceWrap {
    max-width: calc(840px - 80px);
    margin: 0 auto 45px;
    padding:40px 40px 10px;
    background-color: #FFF;
}

/* explanation */
.serviceWrap .explanation {
    margin: 0 0 35px;
	display: flex;
	justify-content:space-between;
}
.serviceWrap .explanation .txt {
    width:48%;
}

.serviceWrap .explanation li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 1.1em;
    text-indent: -0.6em;
    font-size:1.2rem;
    font-weight: 500;
    line-height: 1.6;
}

.serviceWrap .explanation li::before {
    content: "●";
    display: inline-block;
    width: 0.5em;
    color: var(--main-bg1);
}
.serviceWrap .explanation .img {
    width:48%;
}

/* comment */
.serviceWrap .comment {
    margin: 0 0 35px;
    padding:20px 40px 20px;
    background-color: #fdebb2;
    border-radius: 10px;
}
.serviceWrap .comment .heading {
    margin: 0 0 15px;
/*    display: flex;
    align-items: center;
    gap: 15px;*/
}

/*.serviceWrap .comment .heading .icon {
    width:70px;
}*/

.serviceWrap .comment .heading h6 {
  margin: 0;
    color: var(--main-bg1);
    font-size:1.4rem;
    line-height: 1.6;
    font-weight: 600;
}

.serviceWrap .comment .txt {
    line-height: 1.6;
}

.serviceBtn {
    max-width: 600px;
    margin: -20px auto 65px;
}


@media screen and (max-width:900px){
 .service {
    margin: 0 0 80px;
}
.service .serviceName h4 {
    width:200px;
    font-size:1.6rem;
}
.service h5 {
    margin: 0 0 45px;
    font-size:1.6rem;
}
    
.serviceWrap {
    max-width: calc(840px - 60px);
    margin: 0 5% 45px;
    padding:30px 30px 10px;
}

/* explanation */
.serviceWrap .explanation {
    display:block;
}

.serviceWrap .explanation .txt {
    width:100%;
    margin-bottom: 25px;
}

.serviceWrap .explanation li {
    font-size:1rem;
}


.serviceWrap .explanation .img {
    width:100%;
}

/* comment */
.serviceWrap .comment {
    padding:20px 25px 20px;
}
/*.serviceWrap .comment .heading .icon {
    width:70px;
}*/

.serviceWrap .comment .heading h6 {
    font-size:1.2rem;
}

.serviceWrap .comment .txt {
    font-size:0.9rem;
}

.serviceBtn {
    margin: -20px 5% 35px;
}
}