@charset "UTF-8";
.article .area_mainvisual {
  background: url(../img/service/mainvisual.jpg) no-repeat center top;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .article .area_mainvisual {
    background: url(../img/service/mainvisual_sp.jpg) no-repeat center top;
    background-size: cover;
  }
}


/*----サブタイトル----*/
h4.ttl_sub{
  font-size: 3rem;
  color: #1538aa;
  line-height: 2.5;
}
@media screen and (max-width: 768px) {
  h4.ttl_sub{
    font-size: 2.5rem;
    line-height: 1.8;
    /* margin-top: 12vw; */
  }
}

/*　黒ボタン */
@media screen and (min-width: 769px) {
	.btn_area {
		margin: 36px auto 0 0;
	}
	.btn_area .button{
		padding: 15px 40px 13px 0;
	}
}
@media screen and (max-width: 768px) {
	.btn_area {
		margin: 8vw auto 0;
	}
}


/*----枠線----*/
.border_boxs{
  margin: 35px auto 0;
  border: solid 2px #e3e3e3;
  padding: 20px 32px;
}
@media screen and (max-width: 1024px) {
  .border_boxs{
    /* margin: 0; */
    padding: 3vw 4%;
  }
}
@media screen and (max-width: 768px) {
  .border_boxs{
    margin: 2.3rem auto 0;
  }
}

/*----contents_area----*/
@media screen and (min-width:769px) and (max-width:1024px) {
  .inner{
    width: 100%;
  }
}
@media screen and (max-width:1024px) {
	section .contents_area{
    width: 90% !important;
    margin: 6vw auto 0;
 }
}
.contents_area{
	margin-top: 0px;
}
.contents_area .block{
	margin-top: 60px;
}
@media screen and (max-width: 768px) {
	.contents_area{
		margin-top: 3vw;
	}
	.contents_area .block{
		margin-top: 10vw;
	}
}

/*-- 動画 --*/
.relief ul{
	display: flex;
	justify-content: space-between;
}
.relief ul li{
	counter-increment: number;
	width: calc(100% / 2);
	text-align:  center; 
}
.relief ul li:first-child{
	padding-right: 35px;
}
.relief ul li:nth-child(2n){
	padding-left: 35px;
}
.relief ul li:last-child{
	padding-left: 35px;
	margin-left: 35px;
}
.relief ul li + li{
	border-left:1px solid #e3e3e3;
}
.relief ul li .txt_boxs{
	margin-top: 0;
}
.relief ul li dl dt:before{
	content: counter(number, decimal-leading-zero);
	font-family: "Roboto", sans-serif;
	font-size: 3rem;
	margin-right: 15px;
	vertical-align: middle;
}
@media screen and (max-width: 768px) {
	.relief ul{
		display: block;
	}
	.relief ul li{
		width: 100%;
		padding: 0 !important;
		margin: 8vw 0 0 !important;
	}
	.relief ul li + li{
		border-left:none;
	}

	.relief ul li dl dt:before{
		font-size: 2rem;
		margin-right: 2vw;
	}
}