main{
  font-size: 18px;

  h2{
    padding-bottom: 1.85em;
    font-size: clamp(33px, calc(11.589327146171694px + 2.784222737819025vw), 45px);
  }

  .area {
    padding-top: 90px;
    padding-bottom: 100px;
  }
}

#hero-img {
  width: 100vw;
  height: calc(100lvh - 198px);
  text-align: center;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

#reason{
  .flex{
    p{
    flex-basis: 23%;
    }
  }
}


#select-by-scene h4{
  font-size: 2em;
}

.scene-name span,
.tab-ttl::before {
  margin-right: .5em;
  font-size: 1.5em;
}

.scene-name{
  margin-bottom: 1.5em;
}

.scene-items{
  display: flex;
  justify-content: space-evenly;
  gap:2%;

  .scene-item{
    flex-basis: 48%;
  }
}

.scene-item-text :first-child {
  min-height: 168px;
}

#service h3{
  margin-bottom:1.5em;
}

#concierge,
#wrapping,
#engraving {
  padding: 60px 20px;
}

#wrapping,
#engraving{
  .flex{
    display: flex;
    justify-content: space-evenly;

    figure{
      flex-basis: 45%;
    }
  }
}

#concierge{
  .flex{
    display: flex;
    justify-content: space-evenly;
    gap:3%;
  }

  figcaption{
    max-width: 25em;
    flex-basis: 65%;

    p{
      margin-bottom:1.25em
    }
  }

}

#concierge-img{
  flex-basis:45%;
}