@charset "utf-8";


.reason-wrap{
  display:flex;
  width:90%;
  margin:0 auto 5rem;
  max-width:1200px;
  justify-content: space-between;
}

.reason-item{
  width:30%;
  position: relative;
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  font-weight:bold;
}

.reason-item:nth-child(2){
  animation-delay:0.5s !important;
}

.reason-item:nth-child(3){
  animation-delay:1s !important;
}

.reason-text{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.5rem;
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
}

.reason-text p:first-child{
  font-size:clamp(3rem, 2.5rem + 1.67vw, 4.375rem);
  line-height:1;
}

.reason-img-wrap{
  position:relative;
}

.reason-img-wrap img:not(.reason-img){
  border-radius:10px;
  object-fit:cover;
}

.reason-img{
  width:45%;
  left:2.5%;
  bottom:-5%;
  position:absolute;
}


.reason-item:first-child{
  color:#33B0BE;
}

.reason-item:first-child .reason-img{
  width:24%;
}


.reason-item:nth-child(2){
  color:#0C5EA5;
}

.reason-item:last-child{
  color:#57AA84;
}

.reason-item:last-child .reason-img{
  width:33%;
}


.reason-bg{
  position:absolute;
  z-index:-1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.reason-contents{
  padding:2rem 0 5rem;
}

.reason-contents .container{
  width:80%;
  margin:0 auto;
  max-width:800px;
}

.reason-contents.white{
  background:#fff;
}

.reason-title{
  text-align:center;
  padding-bottom:1rem;
  margin-bottom:20px;
  font-size:clamp(2.5rem, 1.818rem + 2.27vw, 4.375rem);
  font-weight:bold;
  color:#33B0BE;
  border-bottom:2px solid #33B0BE;
}

.reason-title h2{
  font-size:clamp(1.125rem, 0.625rem + 1.67vw, 2.5rem);
}

  .reason-title h2 strong{
    font-weight:bold;
}

.reason-contents img{
  margin-bottom:20px;
  border-radius:20px;
  object-fit: cover;
  aspect-ratio: 2 / 1;
}

.reason-contents.blue .reason-title{
  color:#0C5EA5;
  border-bottom:2px solid #0C5EA5;
}

.reason-contents.green .reason-title{
  color:#C8DD4C;
  border-bottom:2px solid #C8DD4C;
}

@media screen and (max-width: 1400px) {
  .reason-item {
    width: 32%;
  }
}

@media screen and (max-width: 1024px) {
  .reason-text p:first-child {
    font-size: 1.5rem;
  }
  .reason-text{
    font-size: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .reason-wrap{
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  .reason-item {
    width: 100%;
  }
  .reason-text p:first-child {
    font-size: 2.5rem;
  }
  .reason-text {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
    .reason-text p{
      line-height:1.5;
  }
  .reason-title h2 {
    font-size: 20px;
    line-height: 1.5;
  }
}