@charset "utf-8";
.intro{
  max-width: 1200px;
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: var(--sp-64);
}
.intro_txt{
  font-size: min(2rem,4.2vw);
  font-weight: bold;
  .str{
    font-size: min(3.2rem,7vw);
    color: var(--sub-color);
  }
}
.reason{
  position: relative;
  margin: var(--sp-64) auto;
  &::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/bg.webp) no-repeat center;
    background-size: cover;
    position: absolute;
    left: 0;
    top: var(--sp-64);
  }
}
.reason--02{
  padding-top: var(--sp-64);
  &::before{
    display: none;
  }
}
.rea_img{
  width: calc(50% + 560px);
  max-width: 100%;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
  background: linear-gradient(90deg,#efefef 0%,#efefef 25%,rgba(239, 239, 239, 0.95) 32%,rgba(239, 239, 239, 0.8) 40%,rgba(239, 239, 239, 0.55) 52%,rgba(239, 239, 239, 0.25) 68%,transparent 85%
  );
  img{
    max-width: none;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 30%,
      black 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 30%,
      black 100%
    );
  }
  @media screen and (max-width: 767px) {
    justify-content: center;
    height: 241px;
  } 
}
.rea_inner{
  width: calc(50% - 20px);
  margin: -328px 0 0 auto;
  display: flex;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  background: #1A1F72E6;
  @media screen and (max-width: 767px) {
    width: 95%;
    margin: calc(var(--sp-64) * -1) 0 0 auto;
  }
}
.rea_body{
  max-width: 700px;
  width: 100%;
  padding: var(--sp-64);
  padding-right: 120px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  @media screen and (max-width: 767px) {
    padding: 30px 10% 30px 5%;
  }
}
.rea_head{
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 2.4rem;
  font-weight: bold;
  @media screen and (max-width: 767px) {
    font-size: 2.0rem;
    letter-spacing: 0.5px;
  }
}
.reason--rev{
  .rea_img{
    justify-content: flex-start;
    background: linear-gradient(-90deg,#efefef 0,#efefef 33%,transparent 33%);
    margin-left: auto;
    margin-right: 0;
    @media screen and (max-width: 767px) {
      justify-content: center;
      height: 241px;
    } 
  }
  .rea_inner{
    margin: -328px auto 0 0;
    justify-content: flex-end;
  @media screen and (max-width: 767px) {
    width: 95%;
    margin: calc(var(--sp-64) * -1) auto 0 0;
  }
  }
  .rea_body{
    padding-right: var(--sp-64);
    padding-left: 120px;
    @media screen and (max-width: 767px) {
    padding: 30px 5% 30px 10%;
    }
  }
}