@charset "UTF-8";



/* =====================================
  special offers
===================================== */
.fc-offers::before{
  background: url(../img/ph/ph-stage.jpg)no-repeat;
  background-size: contain;
  background-position: top 250px right;
  height: 100%;
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
}
.fc-offers::after{
  background: url(../img/ph/ph-stage2.jpg)no-repeat;
  background-size: contain;
  background-position: bottom 10% right;
  height: 100%;
  width: 38%;
  position: absolute;
  right: 0;
  top: 0;
}

.fc-offers .inner1080{
  margin-top: calc(90px * var(--space-scale));
  position: relative;
  z-index: 1;
}
.fc-offers .explanation{
  max-width: 650px;
  margin-bottom: calc(90px * var(--space-scale));
}
.explanation .tx-lead{
  margin-bottom:30px;
}
.sec-step-group .sec-step + .sec-step{
  margin-top:calc(90px * var(--space-scale));
}
.sec-step-group .sec-step .ph-icon{
 background: var(--bg-black-20);
 border-radius: 6px;
 max-width: 160px;
 margin-right: 70px;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
}
.sec-step-group .sec-step:last-child .ph-icon::after{
  display: none;
}
.sec-step-group .sec-step .ph-icon::after{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 30px;
  background: url(../img/common/arrow-bottom01.svg)no-repeat;
  background-size: contain;
  background-position: center;
  left: 0;
  bottom: -30%;
}

.sec-step-group .sec-step .title{
  margin-bottom: 10px;
}
.sec-step-group .sec-step .title .t-en{
  font-size: 20px;
  line-height: 1;
  display: inline-block;
}
.sec-step-group .sec-step .detail .title{
  display: block;
}
.sec-step-group .sec-step .detail .tx,
.sec-step-group .sec-step .detail .title span{
  display: inline-block;
  background: var(--bg-white);
}
.fc-offers .explanation span{
  display: inline-block;
  background: var(--bg-white);
}




@media screen and (max-width: 1179px) {


  .fc-offers::before{
    background: url(../img/ph/ph-stage.jpg)no-repeat;
    background-size: contain;
    background-position: top 15% right;
    width: 60%;
  }
  .fc-offers::after{
    background: url(../img/ph/ph-stage2.jpg)no-repeat;
    background-size: contain;
    background-position: top 55% right;
  }



}
@media screen and (max-width: 1023px) {


  .fc-offers::after{
    background: url(../img/ph/ph-stage2.jpg)no-repeat;
    background-size: contain;
    background-position: top 50% right;
  }



}
@media screen and (max-width: 767px) {

  .mono .fc-offers::before{
    display: none;
  }
  .fc-offers .explanation .ph{
    margin-top: 30px;
  }
  .sec-step-group .sec-step .ph-icon{
    max-width: 100px;
    width: 100%;
    margin-right: 30px;
  }
  .sec-step-group .sec-step .ph-icon::after{
   height: 20px;
   bottom: -22%;
  }
    .fc-offers::after {
        background: url(../img/ph/ph-stage2.jpg) no-repeat;
        background-size: contain;
        background-position: top 48% right;
    }


}
@media screen and (max-width: 460px) {
    .fc-offers::after {
        background: url(../img/ph/ph-stage2.jpg) no-repeat;
        background-size: contain;
        background-position: top 50% right;
    }

}
@media screen and (max-width: 376px) {


  .sec-step-group .sec-step .ph-icon{
    max-width: 80px;
    width: 100%;
    margin-right: 30px;
  }
  .sec-step-group .sec-step .ph-icon::after{
   height: 15px;
   bottom: -22px;
  }



}