@charset "utf-8";

/*---------------------
section共通
----------------------*/
section {
  position: relative;
  scroll-margin-top: 70px;
}

section h2 {
  text-align: center;
  font-size: 65px;
  font-weight: 400;
  letter-spacing: 0.075em;
}

/*---------------------
intro
----------------------*/
.sec-intro {
  margin-block: 70px 100px;
}

.intro {
  position: relative;
}

.intro::before,
.intro::after {
  content: "";
  position: absolute;

}

.intro::before {
  background: url(../img/top/intro-icon01.png) no-repeat center center;
  background-size: 100%;
  width: 220px;
  height: 220px;
  top: 28px;
  left: -47px;
}

.intro::after {
  background: url(../img/top/intro-icon02.png) no-repeat center center;
  background-size: 100%;
  width: 171px;
  height: 171px;
  right: 0;
  bottom: -30px;
}

.intro-title {
  display: block;
  width: max-content;
  margin-inline: auto;
  margin-bottom: 30px;
}

.intro-content .text {
  text-align: center;
}

.intro-content .text p {
  font-size: 29px;
  font-weight: 600;
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.1em;
  display: inline-block;
  padding-bottom: 10px;
  background-image: repeating-linear-gradient(-45deg,
      #c4d18a 0, #c4d18a 3px,
      transparent 3px, transparent 6px);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 6px;

}

.intro-content .text p span {
  color: #e6505a;
}

/*---------------------
step
----------------------*/
.sec-step {
  margin-bottom: 200px;
}

.step-tilte {
  text-align: center;
}

.step-list {
  max-width: 686px;
  margin-inline: auto;
  position: relative;
}

.step-list::before {
  content: "";
  position: absolute;
  background: url(../img/top/step-line.png) no-repeat top center;
  background-size: 100%;
  width: 45px;
  height: 1000px;
  top: 74px;
  left: 65px;

}

.step-list li {
  position: relative;
  margin-bottom: 40px;
}

.step-list li::after {
  position: absolute;
  content: "";
  background: url(../img/top/step-icon01.png) no-repeat center center;
  background-size: 100%;
  top: 108%;
  left: 50%;
  transform: translateX(-50%);
  width: 61px;
  height: 8px;
}

.step-list .list-03::after {
  top: 103%;
}

.step-list .list-04::after {
  top: 112%;
}

.step-list .list-05::after {
  top: 112%;
}

.list-01 a img {
  margin-left: 25px;
}

.list-02 a img {
  margin-left: 20px;
}

.list-03 a img {
  margin-left: -10px;
}

.list-04 a img {
  margin-left: 30px;
}

.list-05 a img {
  margin-left: 25px;
}

/*---------------------
SPECIAL
----------------------*/
.sec-special {
  background: white;
  position: relative;
}

.sec-special::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 115px;
  background: url(../img/top/special-top.png) no-repeat center center;
  background-size: 100%;
  top: -100px;
  left: 0;
}

.sec-special::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 115px;
  background: url(../img/top/special-bottom.png) no-repeat center center;
  background-size: 100%;
  bottom: -100px;
  left: 0;
}

.special-title {
  text-align: center;
}

.special-content p {
  margin-top: 40px;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.special-content .banner {
  margin-top: 40px;
  text-align: center;
}

.special-content .banner a {
  margin-top: 10px;
}

.follow {
  margin-top: 40px;
  padding-bottom: 20px;
  text-align: center;
}

.follow a {
  margin-top: 10px;
}

.sec-happy {
  padding-top: 120px;
}

.happy p {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #e6505a;
  position: relative;
  width: max-content;
  margin-inline: auto;
}

.happy p::before {
  content: "";
  position: absolute;
  background: url(../img/top/happy-icon01.png) no-repeat center center;
  background-size: 100%;
  width: 34px;
  height: 73px;
  bottom: 0;
  left: -35px;
}

.happy p::after {
  content: "";
  position: absolute;
  background: url(../img/top/happy-icon02.png) no-repeat center center;
  background-size: 100%;
  width: 34px;
  height: 73px;
  bottom: 0;
  right: -35px;
}

.happy a {
  text-align: center;
  margin-top: 20px;
}

.actor {
  max-width: 650px;
  margin-inline: auto;
  margin-top: 50px;
  font-family: "Noto Sans JP", sans-serif;
}

.actor p {
  background: white;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  color: #646464;
  line-height: 1.4;
  border-radius: 50px;
  padding: 20px 0;
}

.remark {
  padding-top: 20px;
}