@charset "UTF-8";
@media screen and (min-width: 768px),print {

main#wrap{background: #FCFCEB;}
footer{background: url(../images/service/footback.png)no-repeat top center #fff;padding-top: 150px;}

#contentsmain {margin: 0 auto 0px;position: relative;background: url('../images/service/contentsmain-back01.png')no-repeat bottom -1px center #FF8627;padding: 200px 0 269px;}
#contentsmain .inner-Box {margin: 0 auto;position: relative;width: 600px;color: #fff;}
#contentsmain .inner-Box h1 {position: relative;left: 23px;top: -7px;margin-bottom: 51px;}
#contentsmain .inner-Box h1 img{  }
#contentsmain .inner-Box h2{font-size: 32px;line-height: 1.6;font-weight: 700;letter-spacing: 0px;margin-bottom: 20px;text-align: center;}
#contentsmain .inner-Box h2 span{  }
#contentsmain .inner-Box p.text {font-size: 18px;line-height: 32px;font-weight: 400;letter-spacing: 0px;margin: 0 -50px 90px;text-align: center;}
#contentsmain .inner-Box .popicon {display: block;line-height: 1;position: absolute;top: -39px;left: -190px;}
#contentsmain .inner-Box .popicon .iconback{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);  }

.service-archive{padding: 0 20px;max-width: 1200px;margin: 0 auto 220px;}
.service-archive .catettl{padding: 30px 0 0px;}
.service-archive .catettl h2{ }
.service-archive .catettl .system-pic{mix-blend-mode: multiply;margin: 0 auto;width: 440px;}
.service-archive .catettl .system-pic img{width: 100%;height: auto;}
.service-archive .catettl .maintext{ }

.service-archive .boxtttl{padding: 70px 30px 70px;}
.service-archive .boxtttl h2{font-size: 32px;font-weight: bold;margin-bottom: 21px;}
.service-archive .boxtttl h2::before{ content: "■";  }
.service-archive .maintext{font-size: 18px;font-weight: 500;line-height: 34px;}


.service-item {background: #fff;margin: 0 0 40px;position: relative;min-height: 380px;padding: 40px 600px 30px 38px;}
.service-item figure{ position: absolute; top: 0; right: 0;width: 560px; }
.service-item figure img{ width: 100%; height: auto; }
.service-item h3{font-size: 21px;font-weight: 500;letter-spacing: 0;line-height: 33px;margin-bottom: 22px;}
.service-item .text{font-size: 14px;letter-spacing: 0;line-height: 25px;font-weight: 400;margin-bottom: 32px;}
.service-item .dl-btn{ }
.service-item .dl-btn a{width: 180px;font-size: 16px;font-weight: 400;letter-spacing: 0;display: block;position: relative;border-bottom: 1px solid #000;padding: 0 0 13px 7px;}
.service-item .dl-btn a:hover{ text-decoration: none;}
.service-item .dl-btn a span{position: absolute;top: -3px;right: 15px;transition: right 0.3s ease-in-out;}
.service-item .dl-btn a:hover span{ right: 5px; }

.boxmg{margin: 0 0 70px;}

}
@media screen and (min-width:768px) and ( max-width:1280px) {
  .service-item {padding-right: 53%;}
  .service-item figure{width: 50%; }

}

@media screen and (max-width: 767px) {
  main#wrap{background: #FCFCEB;}
  footer{background: url(../images/service/footback.png)no-repeat top center #fff;padding-top: 15vw;}
  
  #contentsmain {position: relative;background: url('../images/service/contentsmain-back01.png')no-repeat bottom -1px center #FF8627;padding: 57.9vw 0 36.95vw;background-size: auto 15vw;}
  #contentsmain .inner-Box {margin: 0 4vw;position: relative;color: #fff;}
  #contentsmain .inner-Box h1 {position: relative;margin: 0 7.7vw 12.4vw;}
  #contentsmain .inner-Box h1 img{  }
  #contentsmain .inner-Box h2{font-size: 6vw;line-height: 1.6;font-weight: 700;letter-spacing: 0.0vw;margin-bottom: 4vw;text-align: center;}
  #contentsmain .inner-Box h2 span{  }
  #contentsmain .inner-Box p.text {font-size: 4vw;line-height: 7.5vw;font-weight: 500;letter-spacing: 0.0vw;margin: 0 3.45vw 7.5vw;}
  #contentsmain .inner-Box .popicon{position: absolute;left: 36.05vw;top: -40.4vw;width: 20vw;}
  #contentsmain .inner-Box .popicon .iconen{width: 7.2vw;}
  #contentsmain .inner-Box .popicon .iconback{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);  }
  

.service-archive{margin: 0 2.5vw;}
.service-archive .catettl{padding: 7.25vw 0 0vw;margin-bottom: 0vw;}
.service-archive .catettl h2{ }
.service-archive .catettl .system-pic{mix-blend-mode: multiply;margin: 0 14vw;margin-bottom: -6.4vw;}
.service-archive .catettl .system-pic img{width: 100%;height: auto;}
.service-archive .catettl .maintext{ }

.service-archive .boxtttl{ margin: 12vw 3.5vw 12.6vw; }
.service-archive .boxtttl h2{font-size: 4.50vw;font-weight: bold;margin-bottom: 2.67vw;letter-spacing: 0.02vw;position: relative;padding-left: 7.2vw;line-height: 7.00vw;}
.service-archive .boxtttl h2::before{content: "■";position: absolute;top: 0vw;left: 0vw;}
.service-archive .maintext{font-size: 3.75vw;font-weight: 500;line-height: 7.25vw;letter-spacing: 0px;}


.service-item {background: #fff;margin: 0 0 9.66vw;position: relative;padding: 0;padding-bottom: 7.50vw;}
.service-item figure{position: relative;top: 0;right: 0;margin-bottom: 2vw;}
.service-item figure img{ width: 100%; height: auto; }
.service-item h3{font-size: 4.50vw;font-weight: 500;letter-spacing: 0;line-height: 6.75vw;padding: 2.1vw 3.9vw;margin-bottom: 2vw;}
.service-item .text{font-size: 3.00vw;letter-spacing: 0;line-height: 5.25vw;font-weight: 400;padding: 0 4.1vw;margin-bottom: 10.23vw;}
.service-item .dl-btn{padding: 0vw 4vw;}
.service-item .dl-btn a{font-size: 3.50vw;font-weight: 400;letter-spacing: 0;display: block;position: relative;border-bottom: 0.24vw solid #000;padding: 0 0 3.14vw 2.79vw;width: 45vw;}
.service-item .dl-btn a span{position: absolute;top: -0.72vw;right: 2.62vw;transition: right 0.3s ease-in-out;width: 4.2vw;}

.ttl-multiline { word-break: break-word; /* 長い単語でも折り返す */ overflow-wrap: break-word; /* 長いURLなども折り返す（保険） */ white-space: normal; }
.boxmg{margin: 0 0 8vw;}

}