@charset "UTF-8";

/* -----------------
 共通
-------------------- */

body.service .gnav-list li:nth-of-type(3) span{
  color: #0a5f0a;
}
body.service .gnav-list li:nth-of-type(3) span:before{
  transform: scale(1, 1);
}
@media screen and (max-width:767px) { 
  body.service .gnav-list li:nth-of-type(3) span{
    color: #000;
  }
}

/* -----------------
 詳細
-------------------- */

/* 共通 */

.service-detail .block-common-diagonally,
.service-detail .block-service-detail-bg-none{
  text-align: left;
}
.block-service-detail-bg-none{
  margin-bottom: 50px;
  margin-top: 60px;
}
.block-service-detail-bg-none.mb{
  margin-bottom: 150px;
}
.service-detail .block-common-diagonally{
  text-align: left;
}
.service-detail .block-common-same-directory .block{
  margin-bottom: 80px;
}
.service-detail .block-common-same-directory .block:nth-last-of-type(1){
  margin-bottom: 0;
}
.service-detail .block-common-same-directory .block .head-area{
  margin-right: 100px;
  width: 170px;
}
.service-detail .block-common-same-directory .block .head-area h3{
  box-sizing: border-box;
  border-left: 2px solid #0a5f0a;
  color: #0a5f0a;
  font-size: 2.0rem;
  line-height: 1em;
  margin-top: 20px;
  padding: 10px 0 10px 1em;
  width: 100%;
}
.service-detail .block-common-same-directory .block .btn-area{
  width: calc(100% - 170px - 100px);
}
.service-detail .block-common-same-directory .block .btn-area ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-detail .block-common-same-directory .block .btn-area ul li{
  margin: 0 3% 10px 0;
  width: calc((100% - 3%) / 2);
}
.service-detail .block-common-same-directory .block .btn-area ul li:nth-of-type(even){
  margin-right: 0;
}
.service-detail .block-common-same-directory .block .btn-area ul li a{
  background: #fff;
  box-sizing: border-box;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.2em;
  padding-right: 50px;
  position: relative;
  text-decoration: none;
  transition: .2s;
  width: 100%;
  display: flex;
  align-items: center;
  border: 2px solid #e4ece4;
}
.service-detail .block-common-same-directory .block .btn-area ul li a:before{
  background: url(/common/img/common/icon-btn-arrow-gr.png) no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 25px;
  width: 25px;
  transform: translateY(-50%);
  position :absolute;
  right: 15px;
  top: 50%;
}
.service-detail .block-common-same-directory .block .btn-area ul li a:hover{
  border: 2px solid #0a5f0a;
}
.service-detail .block-common-same-directory .block .btn-area ul li a picture{
  display: block;
  width: 90px;
}
.service-detail .block-common-same-directory .block .btn-area ul li a picture img{
  clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  display: block;
  width: 100%;
}
.service-detail .block-common-same-directory .block .btn-area ul li a h4{
  margin-left: 10px;
  width:calc(100% - 90px - 10px);
}
@media screen and (max-width:767px) {
  .block-service-detail-bg-none.mb{
    margin-bottom: 70px;
  }
  .service-detail .block-common-same-directory .block{
    margin-bottom: 50px;
  }
  .service-detail .block-common-same-directory .block .head-area{
    margin-right: 0;
    width: 100%;
  }
  .service-detail .block-common-same-directory .block .head-area h3{
    font-size: 2.0rem;
    margin-bottom: 20px;
    margin-top: 0;
    padding: 10px 0 10px 1em;
    width: 100%;
  }
  .service-detail .block-common-same-directory .block .btn-area{
    width: 100%;
  }
  .service-detail .block-common-same-directory .block .btn-area ul li{
    margin-bottom: 20px;
    margin-right: 0;
    width: 100%;
  }
  .service-detail .block-common-same-directory .block .btn-area ul li:nth-last-of-type(1){
    margin-bottom: 0;
  }
 }

/* 概要 */

.block-service-detaio-overview div.text-area{
  text-align: left;
  width: 45%;
}
.block-service-detaio-overview div.text-area h2{
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1.4em;
  margin-bottom: 30px;
}
.block-service-detaio-overview div.text-area p{
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 2.0em;
}
.block-service-detaio-overview picture{
  display: block;
  margin-top: -40px;
  width: 50%;
}
@media screen and (max-width:767px) { 
  .block-service-detaio-overview{
    margin-bottom: 40px;
  }
  .block-service-detaio-overview div.text-area{
    margin-bottom: 15px;
    width: 100%;
  }
  .block-service-detaio-overview picture{
    margin-top: 0;
    width: 100%;
  }
}

/* ポイント */

.block-service-point{
  gap: 2%;
}
.block-service-point .block{
  background: #0a5f0a;
  box-sizing: border-box;
  clip-path: polygon(0 2.5vw, 100% 0, 100% calc(100% - 2.5vw) , 0 100%);
  padding: 1px;
  width: 100%;
  display: flex;f
  lex-direction: column;
}
.block-service-point .block div{
  background: #fff;
  box-sizing: border-box;
  clip-path: polygon(0 2.5vw, 100% 0, 100% calc(100% - 2.5vw) , 0 100%);
  padding: 60px 30px;
  flex-grow: 1;
}
.block-service-point .block div h3{
  font-size: 2.1rem;
  line-height: 1.8em;
  margin-bottom: 1em;
}
.block-service-point .block div p{
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.8em;
}
@media screen and (max-width:767px) { 
  .block-service-point .block{
    clip-path: polygon(0 8vw, 100% 0, 100% calc(100% - 8vw) , 0 100%);
  }
  .block-service-point .block div{
    clip-path: polygon(0 8vw, 100% 0, 100% calc(100% - 8vw) , 0 100%);
    padding-left: 5%;
    padding-right: 5%;
  }
}

/* おすすめ */

.list-service-recommend{
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-service-recommend li{
  border: 1px solid #0a5f0a;
  box-sizing: border-box;
  color: #0a5f0a;
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1.6em;
  margin-bottom: 20px;
  margin-right: 5%;
  padding: 30px 20px 30px 70px;
  position: relative;
  width: calc((100% - 5%) / 2);
  display: flex;
  align-items: center;
}
.list-service-recommend li:nth-of-type(even){
  margin-right: 0;
}
.list-service-recommend li:before{
  background: url(/common/img/common/icon-cheack.png) no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 35px;
  width: 35px;
  transform: translateY(-50%);
  position :absolute;
  left: 20px;
  top: 50%;
}
@media screen and (max-width:767px) { 
  .list-service-recommend li{
    font-size: 1.8rem;
    margin-right: 0;
    padding: 20px 20px 20px 55px;
    width:100%;
  }
  .list-service-recommend li:before{
    height: 20px;
    width: 20px;
  }
}

/* 悩み・課題 */

.block-service-concern .block{
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
  gap: 5%;
}
.block-service-concern .block:nth-of-type(1){
  padding-bottom: 15px;
  padding-top: 0;  
}
.block-service-concern .block .h-area,
.block-service-concern .block .solution-area{
  font-size: 1.5rem;
  font-weight: 700;
  width: 100%;
}
.block-service-concern .block .h-area h3{
  font-size: 1.9rem;
  line-height: 1.8em;
}
.block-service-concern .block .solution-area p{
  font-size: 1.7rem;
  line-height: 1.8em;
}
.block-service-concern .block .solution-area p a{
  color: #fff;
}
@media screen and (max-width:767px) {
  .block-service-concern .block{
    gap: 0;
  }
  .block-service-concern .block:nth-of-type(1){
    display: none;
  }
  .block-service-concern .block:nth-of-type(2){
    border-top: 1px solid #ccc;
  }
}

/* 詳細 */

.block-service-detail .block{
  gap: 5%;
  margin-bottom: 50px;
}
.block-service-detail .block div{
  width: 60%;
}
.block-service-detail .block.no-pic div{
  margin-bottom: 50px;
  width: 100%;
}
.block-service-detail .block.no-pic:nth-last-of-type(1) div:nth-last-of-type(1){
  margin-bottom: 0;
}
.block-service-detail .block div p{
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 2.0em;
  margin-bottom: 1em;
}
.block-service-detail .block div p:nth-last-of-type(1) {
  margin-bottom: 0;
}
.block-service-detail .block picture{
  width: 40%;
}
.block-service-detail-img{
  border: 10px solid #ccc;
  box-sizing: border-box;
  margin-top: 100px;
  padding: 40px 5%;
}
.block-service-detail-img h3{
  font-size: 2.7rem;
  font-weight: 900;
  line-height: 1.4em;
  margin-bottom: 50px;
}
.block-service-detail-img h4{
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.4em;
  margin-bottom: 30px;
  padding-left: 25px;
  position: relative;
}
.block-service-detail-img h4:before{
  background: #0a5f0a;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 15px;
  width: 15px;
  position :absolute;
  left: 0;
  top: 9px;
}
.block-service-detail-img p{
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.8em;
  margin-bottom: 30px;
  margin-top: 50px;
}
.block-service-detail-img picture+h4{
  margin-top: 50px;
}
.block-service-detail-img .btn-area{
  text-align: right;
}
.block-service-detail-img .btn-area a{
  padding-right: 70px;
}
@media screen and (max-width:767px) { 
  .block-service-detail .block{
    gap: 0;
  }
  .block-service-detail .block div{
    width: 100%;
  }
  .block-service-detail .block picture{
    width: 100%;
  }
  .block-service-detail-img{
    border: 5px solid #ccc;
    margin-top: 50px;
    padding-bottom: 30px;
    padding-top: 30px;
  }
  .block-service-detail-img h3{
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.4em;
    margin-bottom: 40px;
  }
  .block-service-detail-img h4{
    font-size: 1.8rem;
    padding-left: 20px;
  }
  .block-service-detail-img h4:before{
    height: 12px;
    width: 12px;
  }
  .block-service-detail-img p{
    font-size: 1.5rem;
    margin-top: 40px;
  }
  .block-service-detail-img .btn-area{
    text-align: center;
  }
  .block-service-detail-img .btn-area a{
    line-height: 1.4em;
    padding-left: 30px;
    padding-right: 50px;
    width: 100%;
  }
}

/* プラン */

.lsit-service-plan{
  list-style: none;
  margin: 0;
  padding: 0;
}
.lsit-service-plan li{
  background: #0a5f0a;
  box-sizing: border-box;
  clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  margin: 0 5% 20px 0;
  padding: 1px;
  width: calc((100% - 6%) / 2);
  display: flex;
  flex-direction: column;
}
.lsit-service-plan li:nth-of-type(even){
  margin-right: 0;
}
.lsit-service-plan li div{
  background: #fff;
  box-sizing: border-box;
  clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  padding: 30px;
  display: flex;
  align-items: center;
  flex-grow: 1;
  gap: 20px;
}
.lsit-service-plan li div span{
  background: #0a5f0a;
  border-radius: 50%;
  box-sizing: border-box;
  color: #fff;
  font-size: 3.0rem;
  font-weight: 500;
  height: 50px;
  line-height: 1em;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lsit-service-plan li div h3{
  font-size: 2.1rem;
  line-height: 1em;
  width: calc(100% - 50px - 20px);
}
@media screen and (max-width:767px) { 
  .lsit-service-plan li{
    margin-right: 0;
    width: 100%;
  }
  .lsit-service-plan li div{
    padding-bottom: 20px;
    padding-top: 20px;
  }
  .lsit-service-plan li div span{
    font-size: 2.6rem;
    font-weight: 500;
    height: 35px;
    line-height: 1em;
    width: 35px;
  }
  .lsit-service-plan li div h3{
    font-size: 1.9rem;
  }
}

/* 運賃・費用 */

.p-cost{
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.8em;
}

/* 導入事例 */

.block-service-case{
  margin-bottom: 50px;
}
.block-service-case:nth-last-of-type(1){
  margin-bottom: 0;
}
.block-service-case .common-tag{
  background: #052f05;
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.block-service-case .inner{
  background: #fff;
  padding: 30px;
}
.block-service-case h3{
  border-bottom: 1px dotted; #ccc;
  border-top: 1px solid #ccc;
  font-size: 2.4rem;
  line-height: 1.4em;
  padding: 25px 0;
}
.block-service-case .block{
  padding: 15px 0;
  border-bottom: 1px dotted; #ccc;
}
.block-service-case .block h4{
  border: 1px solid; #ccc;
  box-sizing: border-box;
  display: block;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1em;
  padding: 15px 1em;
  text-align: center;
  width: 150px;
}
.block-service-case .block p{
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8em;
  width: calc(100% - 150px - 30px);
}
@media screen and (max-width:767px) { 

.block-service-case .inner{
  background: transparent;
  padding: 0;
}
.block-service-case h3{
  font-size: 2.1rem;
  padding-bottom: 20px;
  padding-top: 20px;
}
.block-service-case .block h4{
  background: #fff;
  border: 1px solid; #ccc;
  font-size: 1.4rem;
  margin-bottom: 10px;
  padding: 8px .5em;
  text-align: center;
  width: 120px;
}
.block-service-case .block p{
  font-size: 1.6rem;
  width: 100%;
}


}