@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap");
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  80% {
    opacity: 1;
    background: black;
  }
  100% {
    opacity: 0;
    background: rgba(0, 0, 0, 0.6);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  80% {
    opacity: 1;
    background: black;
  }
  100% {
    opacity: 0;
    background: rgba(0, 0, 0, 0.6);
  }
}
/*basic*/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

.clear {
  clear: both;
}

@media screen and (max-width: 767px) {
  .pc-s {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .sp-s {
    display: none !important;
  }
}
#lp .sec-intro {
  margin-top: 0;
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  #lp .sec-intro {
    margin-bottom: 60px;
  }
}
#lp .sec-intro .kv {
  text-align: center;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  #lp .sec-intro .kv {
    margin-bottom: 20px;
  }
}
#lp .sec-intro .kv img {
  max-width: 100%;
  height: auto;
}
#lp .sec-intro p {
  text-align: center;
  font-size: 18px;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  line-height: 2.2;
}
@media screen and (max-width: 767px) {
  #lp .sec-intro p {
    font-size: 15px;
    line-height: 2;
  }
}

#lp .sec-base {
  max-width: 800px;
  margin: 0 auto 110px;
}
@media screen and (max-width: 767px) {
  #lp .sec-base {
    margin-bottom: 60px;
  }
}
#lp .sec-base h2 {
  font-family: "Noto Sans JP", "sans-serif";
  font-weight: 700;
  font-size: 42px;
  letter-spacing: 2px;
  margin-bottom: 35px;
}
@media screen and (max-width: 767px) {
  #lp .sec-base h2 {
    font-size: 29px;
    margin-bottom: 20px;
  }
}
#lp .sec-base h2.pink {
  color: #ff8b8b;
}
#lp .sec-base h2.blue {
  color: #589ced;
}
#lp .sec-base img {
  max-width: 100%;
  height: auto;
}
#lp .sec-base .mv {
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  #lp .sec-base .mv {
    margin-bottom: 30px;
  }
}
#lp .sec-base .top_txt {
  margin-bottom: 50px;
  font-size: 16px;
  line-height: 2;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  text-align: justify;
  text-justify: inter-ideograph;
  word-break: break-all;
}
@media screen and (max-width: 767px) {
  #lp .sec-base .top_txt {
    font-size: 13px;
    padding: 0 5%;
    line-height: 1.8;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 767px) {
  #lp .sec-base figure {
    padding: 0 5%;
  }
}
#lp .sec-base .btn {
  margin: 30px auto 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #lp .sec-base .btn {
    padding: 0 20%;
  }
}
#lp .sec-base .btn::after {
  content: none;
}
#lp .sec-base .btn img {
  max-width: 100%;
  height: auto;
}

#lp .sec-difference {
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  #lp .sec-difference {
    margin-bottom: 50px;
  }
}
#lp .sec-difference h2 {
  font-family: "Noto Sans JP", "sans-serif";
  font-weight: 700;
  font-size: 42px;
  letter-spacing: 2px;
  margin-bottom: 35px;
}
@media screen and (max-width: 767px) {
  #lp .sec-difference h2 {
    font-size: 29px;
    margin-bottom: 20px;
    line-height: 1.3;
  }
}
#lp .sec-difference h2 .pink {
  color: #ff8b8b;
}
#lp .sec-difference h2 .blue {
  color: #589ced;
}
@media screen and (max-width: 767px) {
  #lp .sec-difference .scroll {
    width: 90%;
    overflow: auto;
    margin: auto;
  }
}
#lp .sec-difference table {
  width: 100%;
  border-collapse: collapse;
}
@media screen and (max-width: 767px) {
  #lp .sec-difference table {
    width: 500px;
  }
}
#lp .sec-difference table th {
  font-weight: bold;
  font-size: 18px;
  vertical-align: middle;
  padding: 10px 15px;
  border: 1px solid #666;
  text-align: left;
}
@media screen and (max-width: 767px) {
  #lp .sec-difference table th {
    font-size: 14px;
    padding: 10px;
  }
}
#lp .sec-difference table th.pink {
  text-align: center;
  color: #ff8b8b;
  width: 40%;
}
#lp .sec-difference table th.blue {
  text-align: center;
  color: #589ced;
  width: 40%;
}
#lp .sec-difference table td {
  font-size: 16px;
  font-weight: bold;
  padding: 25px 15px;
  border: 1px solid #666;
}
@media screen and (max-width: 767px) {
  #lp .sec-difference table td {
    font-size: 13px;
    padding: 20px 10px;
  }
}
#lp .sec-difference table td.pink {
  color: #ff8b8b;
}
#lp .sec-difference table td.blue {
  color: #589ced;
}
#lp .sec-difference table td small {
  font-size: 85%;
}
#lp .sec-difference .btm_txt {
  margin: 40px 0 40px;
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  #lp .sec-difference .btm_txt {
    font-size: 13px;
    margin: 30px 0 20px;
    padding: 0 5%;
  }
}
#lp .sec-difference .btn_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 767px) {
  #lp .sec-difference .btn_area {
    display: block;
  }
}
#lp .sec-difference .btn_area a {
  width: 334px;
  margin: 0 20px;
  display: block;
}
@media screen and (max-width: 767px) {
  #lp .sec-difference .btn_area a {
    width: 60%;
    margin: 0 auto;
  }
  #lp .sec-difference .btn_area a + a {
    margin-top: 4%;
  }
}
#lp .sec-difference .btn_area a img {
  max-width: 100%;
  height: auto;
}
#lp .sec-difference .btn_area a::after {
  content: none;
}