@charset "UTF-8";
.en {
  font-family: grover, sans-serif;
  font-weight: 900;
  font-style: normal;
}

html,
body {
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 100%;
  font-size: 16px;
  margin: 0 auto;
  background-color: #effac7;
}

img,
video {
  width: 100%;
  display: block;
}

@media screen and (min-width: 769px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .spNone {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .pcNone {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .pcNone {
    display: block;
  }
}

a {
  display: block;
  text-decoration: none;
  transition: all 0.2s;
  color: #000;
}
a[href=""] {
  pointer-events: none;
}
a:hover {
  transition: all 0.2s;
}

#loading-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 999;
}

.flex {
  display: flex;
}

.staff_container {
  margin: 0 auto;
  width: clamp(320px, 85.3333333333vw, 360px);
}
.staff_container .flex {
  gap: clamp(20px, 5.3333333333vw, 28px);
  align-items: center;
}
.staff_container .left {
  width: clamp(99px, 26.4vw, 136px);
}
.staff_container .right {
  font-size: clamp(11px, 2.9333333333vw, 15px);
  line-height: 1.4;
}
.staff_container .right .brand {
  white-space: nowrap;
}
.staff_container .right .name {
  font-size: clamp(15px, 4vw, 20px);
  line-height: 1;
  margin: 6px 0 12px;
  letter-spacing: 0.1em;
}
.staff_container .right .sns {
  font-size: 11px;
  font-family: "Avenir";
  line-height: 1;
  font-weight: 400;
  display: flex;
  gap: 6px;
  letter-spacing: 0.03em;
}
.staff_container .right .sns li {
  width: 96px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.staff_container .right .sns li a {
  padding: 6px 0;
  border: 1px solid #000;
  border-radius: 50px;
  position: relative;
}
.staff_container .right .sns li a:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #edccff;
  top: 3.5px;
  left: 3px;
  z-index: -1;
  border-radius: 50px;
}
.staff_container .right .sns li a:hover {
  border: 1px solid #707070;
  color: #fff;
}
.staff_container .right .sns li a:hover::after {
  background-color: #000;
}

.item_li {
  white-space: pre-line;
}
.item_li li {
  background-color: rgba(0, 0, 0, 0.4);
  width: fit-content;
  border-radius: 15px;
  letter-spacing: 0.07em;
}
.item_li li a {
  color: #fff;
  font-size: clamp(11px, 2.9333333333vw, 14px);
  line-height: 1.5;
  padding: clamp(8px, 2.1333333333vw, 10px) clamp(12px, 3.2vw, 18px);
  position: relative;
}
.item_li li a:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 10px solid rgba(0, 0, 0, 0.4);
  border-right: 0;
  transform: translateX(-50%) rotate(90deg);
  left: 50%;
  bottom: -9px;
}
.item_li li a.top:after {
  transform-origin: left;
  transform: rotate(-90deg);
  bottom: inherit;
  top: -4px;
}

.code_li {
  width: 340px;
  font-size: 11px;
}
.code_li li a {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  line-height: 2;
  gap: 12px;
}
.code_li li a:hover {
  opacity: 0.4;
}
.code_li .left {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: flex-end;
  gap: 18px;
}
.code_li .left figure {
  width: 80px;
}
.code_li .left .text_wrap {
  padding-bottom: 5px;
}
.code_li .buy {
  background-color: #000;
  color: #fff;
  padding: 3px 23px;
  border-radius: 50px;
  letter-spacing: 0.15em;
  margin-bottom: 5px;
}

.oshi_li {
  width: clamp(314px, 83.7333333333vw, 720px);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.6;
  gap: clamp(34px, 9.0666666667vw, 40px) clamp(5px, 1.3333333333vw, 10px);
}
.oshi_li li {
  width: calc(50% - clamp(2.5px, 0.6666666667vw, 5px));
}
.oshi_li li a:hover {
  opacity: 0.4;
}
.oshi_li figure {
  margin-bottom: 15px;
}

.btn {
  width: clamp(317px, 84.5333333333vw, 380px);
  border-radius: 50px;
  font-size: clamp(14px, 3.7333333333vw, 16px);
  padding: clamp(20px, 5.3333333333vw, 28px) 0;
  text-align: center;
  position: relative;
  margin: 0 auto;
  z-index: 3;
  letter-spacing: 0.12em;
}
.btn:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  border-radius: 50px;
  border: 1px solid #000;
}
.btn:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #edccff;
  top: 5px;
  left: 5px;
  z-index: -1;
  border-radius: 50px;
}
.btn:hover {
  color: #fff;
}
.btn:hover::before {
  border: 1px solid #707070;
}
.btn:hover::after {
  background-color: #000;
}

.fv {
  background-image: url(../img/fv_sp.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100vh;
  position: relative;
}
.fv .title_wrap {
  position: relative;
  padding: 40px 0 0;
}
.fv .title_wrap h1 {
  width: 70%;
  max-width: 300px;
  margin: 0 auto;
}
.fv .title_wrap h1.active {
  animation: purun 1s 1s linear forwards;
}
@keyframes purun {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  15% {
    transform: scale(0.9, 0.9) translate(0%, 5%);
  }
  30% {
    transform: scale(1.3, 0.8) translate(0%, 10%);
  }
  50% {
    transform: scale(0.8, 1.3) translate(0%, -10%);
  }
  70% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  90% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
.fv .heart_wrap {
  position: absolute;
  width: 50px;
  top: 30%;
  left: 30px;
}
.fv .heart_wrap.left li {
  width: 22px;
}
.fv .heart_wrap.left li:nth-child(1) {
  margin: 0 5px 60px auto;
}
.fv .heart_wrap.left li:nth-child(2) {
  margin: 0 auto 45px 0;
}
.fv .heart_wrap.left li:nth-child(3) {
  margin: 0 0 60px auto;
}
.fv .heart_wrap.right {
  left: inherit;
  right: 30px;
}
.fv .heart_wrap.right li {
  width: 22px;
}
.fv .heart_wrap.right li:nth-child(1) {
  margin: 0 30px 50px auto;
}
.fv .heart_wrap.right li:nth-child(2) {
  margin: 0 0 50px auto;
}
.fv .heart_wrap.right li:nth-child(3) {
  margin: 0 auto 0 0;
}

.read {
  padding: clamp(80px, 21.3333333333vw, 100px) 0 clamp(80px, 21.3333333333vw, 120px);
  background-color: #e6f0c1;
}
.read .text {
  font-size: clamp(12px, 3.2vw, 16px);
  width: clamp(300px, 80vw, 582px);
  text-align: center;
  line-height: 1.8;
  margin: 0 auto 100px;
}
.read .en {
  font-size: clamp(19px, 5.0666666667vw, 28px);
  text-align: center;
  margin-bottom: clamp(35px, 9.3333333333vw, 40px);
  color: #fff;
  text-stroke: 1px #000;
  -webkit-text-stroke: 1px #000;
  letter-spacing: 0.07em;
}
.read .flex {
  width: clamp(247px, 65.8666666667vw, 680px);
  margin: 0 auto;
  justify-content: space-between;
  gap: 38px clamp(10px, 2.6666666667vw, 40px);
  align-items: flex-end;
}
.read .flex li {
  width: clamp(110px, 29.3333333333vw, 140px);
}
.read .flex li .circle {
  width: clamp(110px, 29.3333333333vw, 140px);
  height: clamp(110px, 29.3333333333vw, 140px);
  position: relative;
  border-radius: 50%;
}
.read .flex li .circle:after {
  content: "";
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  background-color: #fff;
  width: 105%;
  height: 105%;
  border-radius: 50%;
  z-index: -1;
  border: 1px solid #000;
}
.read .flex li .circle figure {
  position: absolute;
  bottom: 0;
  z-index: 1;
}
.read .flex li:nth-child(1) .circle {
  background-color: #aab3f4;
}
.read .flex li:nth-child(2) .circle {
  background-color: #f2b59a;
}
.read .flex li:nth-child(3) .circle {
  background-color: #7bb9a7;
}
.read .flex li:nth-child(3) figure {
  width: 115%;
  left: -5%;
  bottom: -1%;
}
.read .flex li:nth-child(4) .circle {
  background-color: #c3ade8;
}
.read .flex li:nth-child(4) figure {
  width: 125%;
}
.read .flex p {
  font-size: clamp(15px, 4vw, 18px);
  text-align: center;
  padding-top: clamp(13px, 3.4666666667vw, 27px);
  white-space: nowrap;
}

.sec {
  padding: clamp(60px, 16vw, 140px) 0 clamp(78px, 20.8vw, 100px);
}
.sec .page {
  background-color: #edccff;
  font-size: clamp(12px, 3.2vw, 14px);
  width: clamp(196px, 52.2666666667vw, 233px);
  border: 1px solid #000;
  text-align: center;
  margin: 0 auto;
  border-radius: clamp(24px, 6.4vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2.6666666667vw, 15px) 0;
  letter-spacing: 0.08em;
}
.sec .page span {
  font-size: clamp(22px, 5.8666666667vw, 25px);
  margin: 0 0 2px 5px;
  color: #fff;
  text-stroke: 1px #000;
  -webkit-text-stroke: 1px #000;
  line-height: 1;
}
.sec h2 {
  font-size: clamp(19px, 5.0666666667vw, 32px);
  margin: 30px auto 44px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.08em;
}
.sec .text {
  font-size: clamp(12px, 3.2vw, 16px);
  text-align: center;
  line-height: 1.9;
  margin: 0 auto clamp(60px, 16vw, 120px);
}
.sec h3 {
  font-size: clamp(22px, 5.8666666667vw, 32px);
  color: #edccff;
  position: absolute;
  top: -10px;
  left: 19px;
  letter-spacing: 0.08em;
  text-stroke: 1px #000;
  -webkit-text-stroke: 1px #000;
}
.sec .w_bg {
  background-color: #f7fde0;
  width: clamp(355px, 94.6666666667vw, 486px);
  margin: 0 auto 65px;
  border-radius: 0 75px 0 0;
  position: relative;
  padding: clamp(49px, 13.0666666667vw, 67px) 0 clamp(145px, 38.6666666667vw, 188px);
}
.sec .w_bg .inner {
  width: clamp(330px, 88vw, 452px);
  margin: 0 auto;
}
.sec .w_bg .pos {
  position: absolute;
  bottom: 0;
}
.sec .btn {
  margin: 76px auto 0;
}

.img_credit {
  margin: clamp(52px, 13.8666666667vw, 71px) 0 0 0;
  position: relative;
}
.img_credit li {
  text-align: center;
  position: absolute;
  z-index: 1;
}

#sec1 {
  background-image: url(../img/wave_1.svg); /* 波状のSVG画像を使用 */
  background-repeat: repeat-x; /* 水平方向に繰り返す */
  background-position: top;
  margin-top: -10px;
}
#sec1 .cre1 li:nth-child(1) {
  top: 87px;
  left: -8px;
}
#sec1 .cre1 li:nth-child(2) {
  top: 75px;
  left: clamp(97px, 25.8666666667vw, 120px);
}
#sec1 .cre1 li:nth-child(3) {
  top: clamp(160px, 42.6666666667vw, 230px);
  left: clamp(152px, 40.5333333333vw, 200px);
}
#sec1 .cre1 li:nth-child(4) {
  bottom: 46px;
  left: -13px;
}
#sec1 .cre1 li:nth-child(5) {
  bottom: clamp(58px, 15.4666666667vw, 100px);
  left: clamp(94px, 25.0666666667vw, 120px);
}
#sec1 .cre1 li:nth-child(5) a.top::after {
  left: 30%;
}
#sec1 .cre1 li:nth-child(6) {
  bottom: 72px;
  right: 12px;
}
#sec1 .cre2 li:nth-child(1) {
  top: 15px;
  left: clamp(35px, 9.3333333333vw, 60px);
}
#sec1 .cre2 li:nth-child(2) {
  top: -15px;
  left: clamp(120px, 32vw, 170px);
}
#sec1 .cre2 li:nth-child(3) {
  top: clamp(50px, 13.3333333333vw, 90px);
  left: clamp(170px, 45.3333333333vw, 220px);
}
#sec1 .cre2 li:nth-child(4) {
  top: clamp(130px, 34.6666666667vw, 150px);
  left: 10px;
}
#sec1 .cre2 li:nth-child(5) {
  top: clamp(170px, 45.3333333333vw, 150px);
  left: clamp(94px, 25.0666666667vw, 125px);
}
#sec1 .cre2 li:nth-child(6) {
  top: 150px;
  right: -10px;
}
#sec1 .cre2 li:nth-child(7) {
  bottom: 80px;
  left: 12px;
}
#sec1 .cre2 li:nth-child(8) {
  bottom: 80px;
  left: clamp(140px, 37.3333333333vw, 190px);
}
#sec1 .cre2 li:nth-child(8) a.top::after {
  left: 65%;
}
#sec1 .cre3 li:nth-child(1) {
  top: 15px;
  left: clamp(25px, 6.6666666667vw, 40px);
}
#sec1 .cre3 li:nth-child(2) {
  top: 30px;
  left: clamp(140px, 37.3333333333vw, 190px);
}
#sec1 .cre3 li:nth-child(3) {
  top: clamp(200px, 53.3333333333vw, 270px);
  left: clamp(30px, 8vw, 50px);
}
#sec1 .cre3 li:nth-child(4) {
  bottom: clamp(10px, 2.6666666667vw, 15px);
  right: 60px;
}
#sec1 .pos1 {
  width: clamp(140px, 37.3333333333vw, 160px);
  right: 10px;
}
#sec1 .pos2 {
  width: clamp(131px, 34.9333333333vw, 151px);
  right: 0;
}
#sec1 .pos3 {
  width: clamp(117px, 31.2vw, 137px);
  left: 40px;
}

#sec2,
#sec3,
#sec4,
#sec5 {
  position: relative;
}
#sec2:before,
#sec3:before,
#sec4:before,
#sec5:before {
  content: "";
  width: 100%;
  height: 10%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: repeat-x;
  background-position: top;
  margin-top: -10px;
}

#sec2 {
  padding: clamp(100px, 26.6666666667vw, 130px) 0 clamp(115px, 30.6666666667vw, 210px);
  background-color: #e6f0c1;
  position: relative;
}
#sec2 .text {
  margin: 0 auto 120px;
}
#sec2:before {
  background-image: url(../img/wave_2.svg); /* 波状のSVG画像を使用 */
}
#sec2 .bg {
  background-color: #e6f0c1;
}
#sec2 .inner {
  width: clamp(365px, 97.3333333333vw, 975px);
  background-color: #effac7;
  padding: 10px 0 clamp(70px, 18.6666666667vw, 128px);
  border-radius: 0 75px 0 0;
  position: relative;
  margin: 0 0 clamp(150px, 40vw, 180px) 0;
}
#sec2 .inner:nth-child(odd) {
  border-radius: 75px 0 0 0;
  margin: 0 0 clamp(150px, 40vw, 180px) auto;
}
#sec2 .inner:last-child {
  margin: 0 0 0 auto;
}
#sec2 .inner .staff_container .staff:nth-child(1) {
  margin-bottom: clamp(35px, 9.3333333333vw, 45px);
}
#sec2 .inner .circle {
  width: clamp(67px, 17.8666666667vw, 94px);
  margin: -25px auto 0;
}
#sec2 .title {
  text-align: center;
}
#sec2 .title figure {
  width: clamp(180px, 48vw, 254px);
  margin: -20px auto 0;
}
#sec2 .title p {
  font-size: clamp(12px, 3.2vw, 16px);
  margin-top: clamp(15px, 4vw, 20px);
}
#sec2 h3 {
  position: inherit;
  text-align: center;
  margin: 35px 0;
  top: 0;
  left: 0;
}
#sec2 .code_li {
  margin: 0 auto;
}
#sec2 .code_li .lr {
  margin-bottom: 14px;
}
#sec2 .code_li li {
  margin-bottom: 20px;
}
#sec2 .code_li li:last-child {
  margin-bottom: 0;
}
#sec2 .flex_wrap {
  width: clamp(330px, 88vw, 520px);
  margin: clamp(65px, 17.3333333333vw, 105px) auto clamp(52px, 13.8666666667vw, 60px);
}
#sec2 .flex_wrap .slider_fade {
  width: clamp(276px, 73.6vw, 313px);
}
#sec2 .flex_wrap .point {
  position: relative;
  display: flex;
  font-size: 11px;
  align-items: center;
  line-height: 1.6;
  gap: 12px;
  justify-content: space-between;
}
#sec2 .flex_wrap .point .left {
  width: max(189px, 50.4vw);
  white-space: pre-line;
}
#sec2 .flex_wrap .point .right {
  width: clamp(125px, 33.3333333333vw, 190px);
}
#sec2 .flex_wrap .point .point_img {
  position: absolute;
  width: clamp(102px, 27.2vw, 195px);
  right: 42px;
  top: -60px;
}
#sec2 .inner1 {
  position: relative;
}
#sec2 .inner1 .heart_wrap {
  position: absolute;
  width: 30px;
  z-index: 3;
  right: 20px;
  top: -55px;
}
#sec2 .inner1 .heart_wrap li {
  width: 22px;
}
#sec2 .inner1 .heart_wrap li:nth-child(1) {
  margin: 0 5px 50px auto;
}
#sec2 .inner1 .heart_wrap li:nth-child(2) {
  margin: 0 8px 30px auto;
}
#sec2 .inner1 .heart_wrap li:nth-child(3) {
  margin: 0 0 10px auto;
}
#sec2 .inner1 .heart_wrap li:nth-child(4) {
  margin: 0 auto 0 0;
}
#sec2 .inner1 .code_li:nth-child(1) {
  margin-bottom: 73px;
}
#sec2 .inner2 .circle {
  width: clamp(102px, 27.2vw, 150px);
}
#sec2 .inner3 {
  position: relative;
}
#sec2 .inner3 .heart_wrap {
  position: absolute;
  width: 30px;
  z-index: 3;
  left: 20px;
  top: -55px;
}
#sec2 .inner3 .heart_wrap li {
  width: 22px;
}
#sec2 .inner3 .heart_wrap li:nth-child(1) {
  margin: 0 5px 50px auto;
}
#sec2 .inner3 .heart_wrap li:nth-child(2) {
  margin: 0 8px 30px auto;
}
#sec2 .inner3 .heart_wrap li:nth-child(3) {
  margin: 0 0 10px auto;
}
#sec2 .inner3 .heart_wrap li:nth-child(4) {
  margin: 0 auto 0 0;
}
#sec2 .inner3 .circle {
  width: clamp(82px, 21.8666666667vw, 130px);
}
#sec2 .inner4 .circle {
  width: clamp(103px, 27.2vw, 151px);
}

#sec3 {
  padding: clamp(100px, 26.6666666667vw, 130px) 0 clamp(110px, 30.6666666667vw, 176px);
}
#sec3 .text {
  margin: 0 auto clamp(34px, 9.0666666667vw, 50px);
}
#sec3:before {
  background-image: url(../img/wave_1.svg);
}
#sec3 .box {
  width: clamp(284px, 75.7333333333vw, 576px);
  margin: 0 auto 113px;
  border: 1px solid #000;
  border-radius: 74px;
  text-align: center;
  padding: clamp(52px, 13.8666666667vw, 88px) 0 clamp(34px, 9.0666666667vw, 75px);
}
#sec3 .box figure {
  width: clamp(244px, 65.0666666667vw, 446px);
  margin: 0 auto;
}
#sec3 .box .name {
  font-size: clamp(18px, 4.8vw, 26px);
  padding: clamp(10px, 2.6666666667vw, 30px) 0 clamp(7px, 1.8666666667vw, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.6666666667vw, 18px);
  letter-spacing: 0.08em;
}
#sec3 .box .name a {
  font-size: clamp(10px, 2.6666666667vw, 17px);
  background-color: #edccff;
  border: 1px solid #000;
  padding: 2px 9px 3px;
  border-radius: 50px;
  letter-spacing: 0;
  margin-top: 3px;
  transition: all 0.4s;
}
#sec3 .box .name a:hover {
  opacity: 0.6;
  transition: all 0.4s;
}
#sec3 .box .access {
  font-size: clamp(11px, 2.9333333333vw, 16px);
  padding: 2px 0 15px;
}
#sec3 .box .time {
  font-size: clamp(12px, 3.2vw, 19px);
  letter-spacing: 0.08em;
}
#sec3 .step_wrap {
  overflow-x: hidden;
}
#sec3 .step_wrap .bg {
  width: clamp(330px, 88vw, 642px);
  margin: 0 auto;
  padding-bottom: 80px;
  border: 1px solid #707070;
  background-color: #fff;
  background-image: linear-gradient(0deg, transparent calc(100% - 0.5px), rgba(112, 112, 112, 0.5) calc(100% - 0.5px)), linear-gradient(90deg, transparent calc(100% - 0.5px), rgba(112, 112, 112, 0.5) calc(100% - 0.5px));
  background-size: 21px 21px;
  background-repeat: repeat;
  background-position: center center;
}
#sec3 .step_wrap li {
  position: relative;
}
#sec3 .step_wrap li:nth-child(1) figure {
  margin: clamp(89px, 23.7333333333vw, 152px) auto 0;
}
#sec3 .step_wrap li:nth-child(odd) .title {
  transform: rotate(-6deg);
  left: -80px;
  text-align: right;
}
#sec3 .step_wrap li:nth-child(odd) .title .title_text {
  padding-right: clamp(60px, 16vw, 100px);
}
#sec3 .step_wrap li:nth-child(odd) .title .circle {
  transform: rotate(6deg);
  right: 3%;
  top: -70%;
}
#sec3 .step_wrap li:nth-child(even) .title {
  transform: rotate(6deg);
  right: -80px;
}
#sec3 .step_wrap li:nth-child(even) .title .title_text {
  padding-left: clamp(60px, 16vw, 100px);
}
#sec3 .step_wrap li:nth-child(even) .title .circle {
  transform: rotate(-6deg);
  left: 3%;
  top: -70%;
}
#sec3 .step_wrap figure {
  width: clamp(227px, 60.5333333333vw, 362px);
  margin: clamp(110px, 29.3333333333vw, 140px) auto 0;
}
#sec3 .step_wrap .title {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  position: absolute;
  top: -5px;
  background-color: #169696;
  color: #fff;
  font-size: clamp(12px, 3.2vw, 16px);
  padding: clamp(10px, 2.6666666667vw, 17px) 0;
  border-radius: 50px;
  z-index: 10;
}
#sec3 .step_wrap .title .circle {
  position: absolute;
  color: #000;
  background-color: #fff;
  text-align: center;
  width: clamp(40px, 10.6666666667vw, 81px);
  height: clamp(40px, 10.6666666667vw, 81px);
  border: 1px solid #000;
  border-radius: 50px;
  font-size: clamp(14px, 3.7333333333vw, 26px);
  font-family: "adobe-caslon-pro", serif;
  font-weight: 700;
}
#sec3 .step_wrap .title .circle span {
  font-size: 10px;
  display: block;
  transform: scale(0.7);
  font-weight: 400;
  margin-top: clamp(12px, 3.2vw, 25px);
  line-height: 1px;
  margin-bottom: -7px;
}
#sec3 .step_wrap .arrow {
  margin: 30px 0 20px;
}
#sec3 .step_wrap .arrow li {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 13px solid #16968c;
  border-bottom: 0;
  margin: 0 auto 6px;
}
#sec3 .step_wrap .perfect {
  font-size: clamp(20px, 5.3333333333vw, 24px);
  text-align: center;
  margin-bottom: 30px;
  color: #16968c;
}
#sec3 .step_wrap .slider_fade {
  width: clamp(288px, 76.8vw, 405px);
  margin: 0 auto;
}

#sec4 {
  padding: clamp(100px, 26.6666666667vw, 130px) 0 clamp(110px, 30.6666666667vw, 184px);
  background-color: #e6f0c1;
}
#sec4:before {
  background-image: url(../img/wave_2.svg);
}
#sec4 .insta_wrap {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
#sec4 .hash {
  font-size: clamp(15px, 4vw, 19px);
  font-weight: bold;
  letter-spacing: 0.08em;
}
#sec4 .hash_bottom {
  font-size: clamp(14px, 3.7333333333vw, 18px);
  margin: 10px 0 clamp(20px, 5.3333333333vw, 30px);
}

#sec5:before {
  background-image: url(../img/wave_1.svg);
}
#sec5 .oshi_li {
  margin: 0 auto;
}
#sec5 h5 {
  text-align: center;
  font-size: clamp(12px, 3.2vw, 15px);
  line-height: 1.5;
  margin: 40px 0 60px;
}
#sec5 h5 .en {
  color: #fff;
  text-stroke: 1px #000;
  -webkit-text-stroke: 1px #000;
  font-size: clamp(22px, 5.8666666667vw, 28px);
}
#sec5 h5 .big {
  font-size: clamp(19px, 5.0666666667vw, 25px);
  font-weight: bold;
}

.back_top {
  position: fixed;
  width: 50px;
  height: 50px;
  color: #000;
  background-color: #fff;
  bottom: 20px;
  right: 0;
  border-radius: 10px 0 0 10px;
  z-index: 10;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.back_top span {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
}
.back_top span::after, .back_top span::before {
  content: "";
  background-color: #000;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 12px;
}
.back_top span::after {
  transform: rotate(35deg);
  left: 35%;
}
.back_top span::before {
  transform: rotate(-35deg);
  right: 0;
}

@media screen and (max-width: 980px) and (min-width: 769px) {
  .pc_flex {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .pc_flex .w_bg:nth-child(4n+2) {
    margin-top: 10% !important;
  }
  .pc_flex .w_bg:nth-child(4n+3) {
    margin-top: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .read .flex {
    flex-wrap: wrap;
  }
  #sec2 .flex_wrap .slider_fade {
    margin-bottom: 20px;
  }
  #sec3 .step_wrap .title .circle {
    max-width: 65px;
    max-height: 65px;
  }
  #sec3 .step_wrap .title .circle span {
    margin-top: clamp(12px, 3.2vw, 15px);
  }
}
@media screen and (min-width: 769px) {
  .staff_container .right {
    line-height: 1.6;
  }
  .staff_container .right .name {
    margin: 7px 0 12px;
  }
  .oshi_li li {
    width: calc(33.3333333333% - clamp(2.5px, 0.6666666667vw, 10px));
  }
  .fv {
    background-image: url(../img/fv_pc.jpg);
    display: flex;
    align-items: center;
  }
  .fv .container {
    margin: 0;
  }
  .fv .title_wrap {
    margin: 0 auto 0 96px;
  }
  .fv .title_wrap h1 {
    width: 100%;
  }
  .fv .left,
  .fv .right {
    top: 30%;
  }
  .fv .left {
    left: -14%;
  }
  .fv .right {
    right: -14% !important;
  }
  .sec h2 {
    margin: 30px auto 50px;
  }
  .sec .text {
    line-height: 2.3;
  }
  .sec .w_bg {
    margin: 0;
  }
  .sec .btn {
    margin: 92px auto 0;
  }
  .pc_flex {
    max-width: 1029px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(0, max-content);
    grid-gap: 10px;
  }
  .pc_flex .w_bg:nth-child(4n+2) {
    grid-row-start: span 2;
    margin-top: 100%; /* カードの半分の高さを調整 */
  }
  .pc_flex .w_bg:nth-child(4n+3) {
    grid-row-start: span 2;
    margin-top: 173px; /* カードの半分の高さを調整 */
  }
  .pc_flex .w_bg:nth-child(2):after {
    content: "";
    background-color: #effac7;
    width: 100%;
    height: 10%;
    position: absolute;
    bottom: 0;
  }
  .pc_flex .w_bg:nth-child(2) .pos2 {
    bottom: 10%;
  }
  #sec2 .inner {
    margin: 0 auto 175px;
  }
  #sec2 .inner:nth-child(odd) {
    margin: 0 auto 175px;
  }
  #sec2 .inner:last-child {
    margin: 0 auto;
  }
  #sec2 .inner1 .heart_wrap {
    right: 80px;
  }
  #sec2 .inner1 .credit_wrap {
    display: flex;
  }
  #sec2 .inner3 .heart_wrap {
    left: 80px;
  }
  #sec2 .circle {
    margin: -32px auto 0;
  }
  #sec2 .flex_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-end;
    gap: 16px;
  }
  #sec2 .flex_wrap .point {
    flex-wrap: wrap;
    align-items: inherit;
  }
  #sec2 .flex_wrap .point .left {
    width: auto;
  }
  #sec2 .flex_wrap .point .point_img {
    right: -56px;
    top: clamp(-117px, -31.2vw, -80px);
  }
  #sec2 .title {
    margin-bottom: 75px;
  }
  .code_li {
    height: 360px;
    overflow-y: scroll;
    padding-right: 60px;
  }
  .code_li::-webkit-scrollbar {
    width: 5px; /* 横幅設定 */
  }
  .code_li::-webkit-scrollbar-thumb {
    background: #a7a7a7; /* ハンドルの色 */
    opacity: 1;
  }
  .back_top {
    transform: scale(1.4);
    right: 10px;
  }
  #sec3 .box {
    margin: 0 auto 95px;
  }
  #sec3 .arrow {
    margin: 52px 0 25px;
  }
  #sec3 .arrow li {
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
    border-top: 19px solid #16968c;
    margin: 0 auto 7px;
  }
  #sec3 .perfect {
    margin-bottom: 33px;
  }
  #sec3 .step_wrap li:nth-child(odd) .title {
    left: -30px;
  }
  #sec3 .step_wrap li:nth-child(odd) .title .circle {
    top: -55px;
    right: 5px;
  }
  #sec3 .step_wrap li:nth-child(even) .title {
    right: -30px;
  }
  #sec3 .step_wrap li:nth-child(even) .title .circle {
    top: -55px;
    left: 5px;
  }
  #sec3 .step_wrap .title {
    margin: 0;
    max-width: 500px;
    top: -10px;
  }
  #sec3 .step_wrap .title .circle span {
    transform: scale(1);
    margin-bottom: -12px;
  }
  #sec5 h5 {
    margin: 0 0 40px;
  }
  .heart_wrap {
    transform: scale(1.5);
  }
}
button {
  color: #000 !important;
  border: 1px solid #000 !important;
  height: 29px !important;
  margin: 35px auto 0 !important;
}

/* パルクロ共通フッター
---------------------------------------------*/
.footerSec {
  background: #fff;
  color: #000000;
}
@media screen and (max-width: 768px) {
  .footerSec {
    padding: 90px 0 40px;
  }
}
@media screen and (min-width: 769px) {
  .footerSec {
    padding: 90px 0 50px;
  }
}
.footerSec ul#footer_snsArea {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .footerSec ul#footer_snsArea {
    margin: 0 auto 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 769px) {
  .footerSec ul#footer_snsArea {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
  }
}
@media screen and (max-width: 768px) {
  .footerSec ul#footer_snsArea li {
    width: 30px;
    margin-right: 22px;
  }
}
@media screen and (min-width: 769px) {
  .footerSec ul#footer_snsArea li {
    margin-right: 20px;
  }
}
@media screen and (min-width: 769px) {
  .footerSec ul#footer_snsArea li a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    color: #333;
  }
}
@media screen and (min-width: 769px) {
  .footerSec ul#footer_snsArea li a img {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .footerSec ul#footer_snsArea li a span.icon {
    display: inline-block;
    margin-right: 10px;
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .footerSec ul#footer_snsArea li a span.icon {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .footerSec ul#footer_snsArea li a span.text {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .footerSec a.foot_logo {
    display: block;
    width: 140px;
    margin: 0 auto 20px;
  }
}
@media screen and (min-width: 769px) {
  .footerSec a.foot_logo {
    width: 150px;
    display: block;
    margin: 0 auto 30px;
  }
}
@media screen and (max-width: 768px) {
  .footerSec p.foot_copy {
    font-size: 10px;
    text-align: center;
  }
}
@media screen and (min-width: 769px) {
  .footerSec p.foot_copy {
    font-size: 10px;
    text-align: center;
    margin: 0 auto;
    width: 100%;
  }
}/*# sourceMappingURL=style.css.map */