@charset 'shift_jis';

  @media screen and (min-width:768px) {
	.btMeterType{
		background: #FFF url("/procedures/safe-use/img/meter-p4/meter_img.png") right 45px center no-repeat;
		background-size: 435px auto;
		border-radius: 10px;
		border: 3px solid #0066B5;
		color: #0066B5 !important;
		display: block;
		font-size: 28px;
    line-height: 1.7;
		padding: 50px 53.57% 50px 33px;
		margin-bottom: 80px;
	}
	.btMeterType span{
		background: url("/procedures/safe-use/img/meter-p4/ic_arrow.svg") left center no-repeat;
		background-size: 10px auto;
		display: block;
		padding-left: 25px;
	}
  }
  @media screen and (max-width: 767px) {
	.btMeterType{
		border-radius: 10px;
		border: 3px solid #0066B5;
		color: #0066B5 !important;
		display: block;
		font-size: 20px;
		padding: 25px 30px 20px;
		margin: 0 15px 40px;
	}
	.btMeterType:after{
		background: #FFF url("/procedures/safe-use/img/meter-p4/meter_img.png") center bottom no-repeat;
		background-size: cover;
		content: "";
		display: block;
		padding-bottom: 23.44%;
		margin-top: 10px;
		width: 100%;
	}
	.btMeterType span{
		background: url("/procedures/safe-use/img/meter-p4/ic_arrow.svg") left center no-repeat;
		background-size: 10px auto;
		display: block;
		padding-left: 25px;
	}}

  @media screen and (min-width: 768px){
a.btnNormal.meterp4btn{
    display: block;
    text-align: center;
    padding: 10px 25px;
    background-image: url("/common/img/ic_arrow_under_white.svg") ;
    background-position: left 15px center;
    background-size: 10px auto;
}
  }

  @media screen and (max-width: 767px) {
    a.btnNormal.meterp4btn{
    display: block;
    text-align: center;
    padding: 10px 25px;
    background-image: url("/common/img/ic_arrow_under_white.svg") ;
    background-position: left 15px center;
    background-size: 10px auto;
    background-repeat: no-repeat;
}
  }

a.btnNormal.meterp4btn span{
  display: inline-block;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  a.btnNormal.meterp4btn span{
    padding-left: 0;
    background-image: unset;
  }
}

@media screen and (min-width: 768px){
  .featureBox{
    margin: 20px 0;
  }
.featureBox dt{
  width: 100px;
}
.featureBox dd{
  padding: 15px 10px;
}
}
@media screen and (max-width: 767px) {
	.featureBox{
    margin: 20px 0;
	}}

.featureBox.operationBox .column3Wrap {
  display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
}
@media screen and (min-width: 768px){
  .featureBox.operationBox .column3Wrap {
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
}
}

.featureBox.operationBox .column3Wrap li{
  position: relative;
  counter-increment: number;
  margin: 10px 0 20px 0;
  padding: 0 30px 0 15px;
  text-indent: initial;
  display: inline-block;
}
@media screen and (min-width: 768px){
.featureBox.operationBox .column3Wrap li{
  margin: 10px;
  }
}
@media screen and (max-width: 767px) {
.featureBox.operationBox .column3Wrap li:last-child{
  margin: 10px 0 0 0;
}}


.featureBox.operationBox .column3Wrap li:before {
  background-color: #0066B5;
  border-radius: 50%;
  color: #FFF;
  content: counter(number);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 18px;
  display: block;
  text-align: center;
  line-height: 30px;
  width: 30px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
@media screen and (min-width:768px) {
.featureBox.operationBox .column3Wrap li:not(:last-child)::after{
  content: "";
    position: absolute;
    right: -4%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    border: 5px solid transparent;
    border-left: 8px solid #0066B5;  
}
}
@media screen and (max-width: 767px) {
  .featureBox.operationBox .column3Wrap li:not(:last-child)::after{
    content: "";
    position: absolute;
    bottom: -120%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
      border: 5px solid transparent;
      border-top: 8px solid #0066B5;  
  }
  }

  .mark_box{
    display: flex;
    align-items: center;
    gap: 15px;
    flex-direction: column;
  }
  @media screen and (min-width:768px) {
    .mark_box{
      flex-direction: row;
    }
  }

  .mark_box p, .mark_box, .mark_box .image{
    margin-bottom: 0;
    }

    .mark_box .img_area{
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
    }

  .mark_box .image img{
    max-width: 120px;
  }

.display_box{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 15px; 
  margin-bottom: 0;
}
@media screen and (min-width:768px) {
  .display_box{
    flex-direction: row;
    gap: 30px; 
    margin-bottom: 35px;
  }
}

.display_box .image{
  margin-bottom: 0;
}
.display_box .image img{
  max-width: 200px;
}