html {
  scroll-behavior: smooth;
}

#planlist {
  background-color: #423226;
  background-image: url(../images/concept/bg@2x.webp);
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: top;
  padding-bottom: 60px;
}
@media screen and (max-width: 1024px) {
  #planlist {
    padding-bottom: 30px;
  }
}
@media screen and (max-width: 480px) {
  #planlist {
    padding-bottom: 10px;
  }
}
#planlist .main img {
  width: 100%;
}
#planlist .btnFlex {
  display: flex;
  justify-content: space-between;
  padding: 140px 0;
}
@media screen and (max-width: 1024px) {
  #planlist .btnFlex {
    padding: 90px 0;
  }
}
@media screen and (max-width: 480px) {
  #planlist .btnFlex {
    padding: 60px 0;
  }
}
#planlist .btnFlex a {
  width: calc(33% - 10px);
}
#planlist .wText {
  color: #fff;
  font-size: 20px;
  padding: 80px 0;
}
@media screen and (max-width: 1024px) {
  #planlist .wText {
    padding: 60px 0;
  }
}
@media screen and (max-width: 480px) {
  #planlist .wText {
    padding: 30px 0;
    font-size: 14px;
    text-align: left;
  }
}
#planlist .flexArea {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 480px) {
  #planlist .flexArea {
    flex-direction: column;
  }
}
#planlist .flexArea .flexItem {
  width: calc(50% - 25px);
}
@media screen and (max-width: 480px) {
  #planlist .flexArea .flexItem {
    width: 100%;
  }
}
#planlist .flexArea .flexItem .flexBtn {
  display: block;
  margin: 60px 0 140px;
}
@media screen and (max-width: 480px) {
  #planlist .flexArea .flexItem .flexBtn {
    margin: 30px 0 70px;
  }
}

a {
  transition: 0.5s;
}
a:hover {
  filter: brightness(120%) saturate(160%);
  transition: 0.5s;
}