@charset "UTF-8";
/* reason
-------------------------------------------- */
.flexbox{
    display: flex;
}
@media screen and (max-width: 414px) {
    .underline_dot:after{
        height: 10px;
    }
}
.main__container{
    margin: 56px auto 80px;
    padding: 0;
}
.section__heading{
    margin-bottom: 56px;
}

.reason__inr {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 1024px) {
  .reason__inr {
    display: block;
    margin-bottom: 40px;
  }
}
.reason__inr:last-child {
  margin-bottom: 0;
}

.reason__inr-reverse {
  flex-direction: row-reverse;
}
@media screen and (max-width: 1024px) {
  .reason__inr-reverse {
    flex-direction: row;
  }
}

.reason__txt-block {
  width: 62%;
  margin-right: 3%;
  position: relative;
  padding-left: 8rem;
  margin-bottom: 3%;
}
@media screen and (max-width: 1024px) {
  .reason__txt-block {
    width: 100%;
    margin-right: 0;
    padding: 0;
  }
}
.reason__txt-block p.numbers {
    font-size: 10.2rem;
    line-height: 0;
    white-space: nowrap;
    color: #F7DFD4;
    font-weight: bold;
    position: absolute;
    top: 1rem;
    z-index: -1;
    left: 0rem;
}
@media screen and (max-width: 1024px) {
  .reason__txt-block p.numbers {
    font-size: 4rem;
    position: initial;
  }
}
.reason__txt-block h2 {
    font-size: 3.4rem;
    font-weight: bold;
    color: #D61518;
    margin-block:3rem;
}
@media screen and (max-width: 1024px) {
  .reason__txt-block h2 {
    font-size: 1.8rem;
    margin-bottom: 8px;
  }
}

.reason__txt-block-reverse {
  margin-right: 0;
}

.reason__inr:nth-child(5) .reason__txt-block{
  margin-bottom: 6%;
}
.reason__illust {
    width: 55%;
    text-align: center;
}
.reason__illust img{
    max-height: 360px;
}
@media screen and (max-width: 1024px) {
  .reason__illust {
    width: 60%;
    margin: 0 auto;
  }
}
@media (max-width: 576px) {
  .reason__illust {
    width: 90%;
  }
  .reason__illust img{
    max-height: 240px;
  }
}

.reason__illust-reverse {
  width: 35%;
  margin-right: 3%;
}
@media screen and (max-width: 1024px) {
  .reason__illust-reverse {
    width: 60%;
    margin: 0 auto;
  }
}
@media (max-width: 576px) {
  .reason__illust-reverse {
    width: 90%;
  }
}

.reason__inr:nth-child(even){
    justify-content: flex-end;
}
.reason__inr:nth-child(even) .reason__txt-block{
    width: 80%;
    margin-right: 0;
}
@media screen and (max-width: 1024px) {
    .reason__inr:nth-child(even) .reason__txt-block{
        width: 100%;
    }
}