/*main color*/
/*addcolor*/
/* spacing */
/*mixin*/
/* mixin */
/* color */
.p-lp-color-ORNG {
  color: #ff7822;
}

.mv {
  position: relative;
}
.mv .mv__ttl {
  position: absolute;
  top: clamp(40px, 6.2962962963px + 8.6419753086vw, 110px);
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 922px);
  z-index: 1;
}
.mv .mv__cap {
  font-size: 10px;
  line-height: 1.4;
  position: absolute;
  bottom: 10px;
  left: 10px;
  -webkit-text-stroke: 4px white;
  paint-order: stroke;
}
@media (max-width: 768px) {
  .mv .mv__cap {
    position: relative;
    top: 10px;
    bottom: auto;
    left: 2.5%;
    width: 95%;
  }
}

.usp {
  padding: clamp(30px, 25.1851851852px + 1.2345679012vw, 40px) 0 clamp(20px, 10.3703703704px + 2.4691358025vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 768px) {
  .usp {
    grid-template-columns: repeat(2, 1fr);
  }
}
.usp li a {
  display: block;
  position: relative;
}
.usp li a img {
  transition: 0.3s;
}
.usp li a img.default {
  visibility: visible;
  opacity: 1;
  position: relative;
  z-index: 0;
}
.usp li a img.hover {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .usp li a:hover img.default {
    visibility: hidden;
    opacity: 0;
  }
  .usp li a:hover img.hover {
    visibility: visible;
    opacity: 1;
  }
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .usp li a:hover img.default {
    visibility: hidden;
    opacity: 0;
  }
  .usp li a:hover img.hover {
    visibility: visible;
    opacity: 1;
  }
}

.lead {
  line-height: 2.4;
  overflow: hidden;
  padding: 40px 0 16px;
  background-image: url(../../img/top/catch_bg01_pc.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  font-weight: 500;
  padding: clamp(50px, 25.9259259259px + 6.1728395062vw, 100px) 0 clamp(50px, 35.5555555556px + 3.7037037037vw, 80px);
}
@media (max-width: 768px) {
  .lead {
    background-image: url(../../img/top/catch_bg01_sp.svg);
  }
}
.lead .mv1000px {
  max-width: 1000px;
  margin: 0 auto;
}
.lead .p-lp-lead-txt {
  font-size: clamp(16px, 15.037037037px + 0.2469135802vw, 18px);
  text-align: center;
}
.lead .lead__headline {
  width: fit-content;
  margin: 0 auto;
  position: relative;
}
.lead .lead__headline .leaf {
  position: absolute;
  top: -30px;
  right: -90px;
  width: clamp(40px, 30.3703703704px + 2.4691358025vw, 60px);
}
@media (max-width: 768px) {
  .lead .lead__headline .leaf {
    top: -15px;
    right: -45px;
  }
}
.lead .lead__headline h3 {
  font-size: clamp(30px, 20.3703703704px + 2.4691358025vw, 50px);
  line-height: 1.4;
  color: #00b1a4;
  text-align: center;
  margin-bottom: clamp(15px, 7.7777777778px + 1.8518518519vw, 30px);
}
.lead .lead__headline .line {
  display: block;
  width: 100%;
  height: 13px;
  background: url(../../img/common/deco_line.svg) center/cover repeat-x;
}
.lead .lead__heading {
  position: relative;
  width: fit-content;
  margin: clamp(40px, 20.7407407407px + 4.9382716049vw, 80px) auto clamp(60px, 55.1851851852px + 1.2345679012vw, 70px);
}
@media (max-width: 767px) {
  .lead .lead__heading {
    width: 90%;
  }
}
.lead .lead__heading h4 {
  font-size: clamp(24px, 18.7037037037px + 1.3580246914vw, 35px);
  line-height: 1.4;
  text-align: center;
}
.lead .lead__heading img {
  position: absolute;
  width: auto;
  height: clamp(30px, 20.3703703704px + 2.4691358025vw, 50px);
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .lead .lead__heading img {
    top: auto;
    transform: unset;
    bottom: -65%;
  }
}
.lead .lead__heading img.houseL {
  left: -60%;
}
@media (max-width: 767px) {
  .lead .lead__heading img.houseL {
    left: 0;
  }
}
.lead .lead__heading img.houseR {
  right: -60%;
}
@media (max-width: 767px) {
  .lead .lead__heading img.houseR {
    right: 0;
  }
}
.lead .lead__txtbox01 {
  position: relative;
}
.lead .lead__txtbox01::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 2%;
  width: 8%;
  height: 95px;
  background-image: url(../../img/common/deco_eda.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.lead .lead__txtbox02 {
  padding: clamp(30px, 20.3703703704px + 2.4691358025vw, 50px) 0;
  position: relative;
}
.lead .lead__txtbox02 .pic01 {
  position: absolute;
  z-index: 0;
  bottom: -2em;
  right: -20%;
  width: min(30%, 310px);
}
@media (max-width: 960px) {
  .lead .lead__txtbox02 .pic01 {
    right: -14%;
  }
}
@media (max-width: 767px) {
  .lead .lead__txtbox02 .pic01 {
    display: none;
  }
}
.lead .lead__txtbox02 .pic02 {
  position: absolute;
  z-index: 0;
  top: 2em;
  left: -20%;
  width: min(30%, 365px);
}
@media (max-width: 960px) {
  .lead .lead__txtbox02 .pic02 {
    left: -14%;
  }
}
@media (max-width: 767px) {
  .lead .lead__txtbox02 .pic02 {
    display: none;
  }
}
.lead .lead__txtbox02 .pic-sp {
  display: none;
}
@media (max-width: 767px) {
  .lead .lead__txtbox02 .pic-sp {
    display: block;
    margin: 30px calc(50% - 50vw) 0;
    width: 100vw;
  }
}
.lead .lead__txtbox03 {
  padding: 0 0 clamp(30px, 20.3703703704px + 2.4691358025vw, 50px);
  position: relative;
}
.lead .lead__txtbox03 .pic01 {
  position: absolute;
  z-index: 0;
  top: 20%;
  right: 0%;
  width: min(15%, 170px);
}
@media (max-width: 768px) {
  .lead .lead__txtbox03 .pic01 {
    top: 0;
    right: -5%;
    width: min(20%, 170px);
  }
}
.lead .lead__txtbox03 .pic02 {
  position: absolute;
  z-index: 0;
  bottom: -10%;
  left: -20%;
  width: min(15%, 170px);
}
@media (max-width: 960px) {
  .lead .lead__txtbox03 .pic02 {
    left: -5%;
  }
}
@media (max-width: 768px) {
  .lead .lead__txtbox03 .pic02 {
    bottom: 0;
    left: -5%;
    width: min(20%, 170px);
  }
}
.lead .lead__txtbox04 {
  padding: 0 0 clamp(30px, 20.3703703704px + 2.4691358025vw, 50px);
  position: relative;
}
.lead .lead__txtbox04 .pic01 {
  position: absolute;
  z-index: 0;
  top: -2em;
  right: -5%;
  width: min(30%, 325px);
}
@media (max-width: 1200px) {
  .lead .lead__txtbox04 .pic01 {
    right: -10%;
  }
}
@media (max-width: 768px) {
  .lead .lead__txtbox04 .pic01 {
    right: -50%;
    position: relative;
    top: 30px;
    width: 50%;
  }
}
.lead .lead__txtbox04 .pic02 {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  width: min(15%, 140px);
}
@media (max-width: 768px) {
  .lead .lead__txtbox04 .pic02 {
    left: 5%;
    width: 30%;
  }
}/*# sourceMappingURL=top.css.map */