@charset "utf-8";
.intro {
  position: relative;
}

.intro::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background: url(/system_panel/uploads/images/20260706222317561316.png) no-repeat bottom/contain;
  max-width: 761px;
  width: 48%;
  height: 100%;
}
.intro .inner {
  padding: 64px 0 109px;
  display: flex;
  gap: 5%;
}
.intro .sec-head {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.intro .sec-head .js-split.is-active {
  --y: 0;
}
.intro .sec-head .tit-ja {
  overflow: hidden;
}
.intro .sec-head .js-split .char {
  display: inline-block;
  transform: translateY(var(--y, 250%));
  transition:
    transform 0.8s cubic-bezier(0.16, 0.64, 0.32, 1),
    -webkit-transform 0.8s cubic-bezier(0.16, 0.64, 0.32, 1);
  transition-delay: calc(0.08s * var(--char-index));
  font-family: var(--zenkakunew);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
  line-height: calc(46 / 32);
  letter-spacing: 0.4em;
  color: #401a33;
}
.intro .sec-head .desc p {
  font-family: var(--zenkakunew);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.845rem + 0.13vw, 1rem);
  line-height: 2;
  color: #401a33;
}
.intro .sec-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 547px;
  width: 41%;
}

.intro .sec-body .img01 {
  max-width: 258px;
  width: 48%;
  clip-path: inset(100% 0 0 0);
  transition: 0.8s ease;
}

.intro .sec-body .img01.is-active,
.intro .sec-body .img02.is-active {
  clip-path: inset(0 0 0 0);
}

.intro .sec-body .img02 {
  max-width: 399px;
  margin-left: auto;
  width: 73%;
  clip-path: inset(100% 0 0 0);
  transition: 0.8s ease;
}

.intro .sec-body .img02.is-active {
  transition-delay: 0.2s;
}

.trouble {
  background-color: #f7f4f6;
}

.trouble .inner {
  padding: 44px 0 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.trouble .sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.trouble .sec-head .tit-ja {
  font-family: var(--zenkakunew);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.068rem + 0.78vw, 2rem);
  letter-spacing: 0.1em;
  color: #401a33;
  padding-bottom: 30px;
  position: relative;
}

.trouble .sec-head .tit-ja::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: url(/system_panel/uploads/images/20260706223409657755.svg) no-repeat center/contain;
  width: 100%;
  height: 16px;
}

.trouble .sec-head .desc p {
  font-family: var(--zenkakunew);
  font-weight: 500;
  font-size: clamp(0.75rem, 0.689rem + 0.26vw, 1rem);
  text-align: center;
  color: #401a33;
}

.trouble .list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

.trouble .list .tit-ja {
  font-family: var(--zenkakunew);
  font-weight: 500;
  font-size: clamp(0.625rem, 0.534rem + 0.39vw, 1rem);
  text-align: center;
  color: #401a33;
}

.trouble .list .item {
  max-width: 172px;
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px 0 30px;
}

.trouble .list .item img {
  width: auto;
  height: 88px;
}

.features .inner {
  padding: 80px 0 90px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.features .sec-title,
.service .sec-title,
.faq .sec-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.features .sec-title .tit-en,
.service .sec-title .tit-en,
.faq .sec-title .tit-en {
  font-family: var(--zenkakunew);
  font-weight: 500;
  font-size: clamp(0.625rem, 0.564rem + 0.26vw, 0.875rem);
  letter-spacing: 0.4em;
  text-align: center;
  color: #401a33;
}

.features .sec-title .tit-ja,
.service .sec-title .tit-ja,
.faq .sec-title .tit-ja {
  font-family: var(--zenkakunew);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
  letter-spacing: 0.1em;
  text-align: center;
  color: #401a33;
}

.features .list {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.features .list .item {
  display: flex;
  gap: 7%;
}

.features .list .item:nth-child(2) {
  justify-content: flex-end;
}

.features .list .item:nth-child(1) .sec-img img {
  width: 300px;
  height: auto;
}
.features .list .item:nth-child(2) .sec-img img {
  width: 314px;
  height: auto;
  margin-left: auto;
}

.features .list .item:nth-child(3) .sec-img {
  max-width: 500px;
  width: 100%;
  display: flex;
}

.features .list .item .sec-img iframe {
  width: 448px;
  height: 254px;
  margin: 0 auto;
}

.features .list .item .tit-ja {
  font-family: var(--zenkakunew);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.034rem + 0.39vw, 1.5rem);
  line-height: calc(35 / 24);
  color: #401a33;
}

.features .list .item .sec-text {
  padding-left: 52px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 441px;
  width: 100%;
}
.features .list .item:nth-child(2) .sec-text {
  max-width: 490px;
}
.features .list .item .sec-text::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50px;
  background-color: #872b68;
  position: absolute;
  top: 12px;
  left: 0;
}

.features .list .item .desc p {
  font-size: clamp(0.75rem, 0.689rem + 0.26vw, 1rem);
  line-height: calc(24 / 16);
  letter-spacing: 0.1em;
  color: #401a33;
}

.service {
  background: #f7f4f6;
}

.service .inner {
  padding: 80px 0 120px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.service .sec-title {
  align-items: flex-start;
}

.service .sec-body > .item {
  background: #fff;
  border-top: 8px solid #401a33;
}

.service .item .box-inner {
  padding: 48px 0;
  margin: 0 auto;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.service .item-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.service .item-head .tit-sub {
  font-family: var(--zenkakunew);
  font-weight: 700;
  font-size: clamp(0.75rem, 0.644rem + 0.45vw, 1.188rem);
  color: #401a33;
}

.service .item-head .tit-main {
  font-family: var(--zenkakunew);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
  color: #401a33;
}

.service .item-head .desc p {
  font-size: clamp(0.875rem, 0.845rem + 0.13vw, 1rem);
  line-height: calc(24 / 16);
  letter-spacing: 0.1em;
  color: #401a33;
}

.service .item-body > .label p {
  font-family: var(--zenkakunew);
  font-weight: 700;
  font-size: clamp(0.75rem, 0.659rem + 0.39vw, 1.125rem);
  color: #fff;
  padding: 0 24px;
  border-radius: 50px;
  background-color: #401a33;
  display: inline-block;
}

.service .item-body > .label {
  position: relative;
  margin-bottom: 50px;
}

.service .item-body > .label::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  width: 80%;
  height: 1px;
  background-color: #401a33;
}

.service .item-body .list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-bottom: 40px;
  margin-bottom: 32px;
  border-bottom: 1px solid #401a33;
}

.service .item-body .list .item {
  display: flex;
  gap: 5%;
  align-items: flex-start;
}

.service .item-body .list .item .num {
  width: 43px;
  aspect-ratio: 1/1;
  background: #fff;
  border: 2px solid #401a33;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.service .item-body .list .item .num::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 12px solid #401a33;
  border-bottom: 0;
}
.service .item-body .list .item .num p {
  font-family: var(--zenkakunew);
  font-weight: 700;
  font-size: clamp(1rem, 0.894rem + 0.45vw, 1.438rem);
  color: #401a33;
}

.service .item-body .list .item .column {
  display: flex;
  gap: 4%;
  align-items: flex-start;
}
.service .item-body .list .item .column .sec-img {
  max-width: 297px;
  width: 39%;
}

.service .item-body .list .item .column .desc {
  width: 60%;
}

.service .item-body .list .item .column .desc p {
  font-size: clamp(0.75rem, 0.689rem + 0.26vw, 1rem);
  line-height: calc(24 / 16);
  letter-spacing: 0.1em;
  color: #401a33;
}

.service .item-body .list .item .sec-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service .item-body .list .item .sec-text .tit-ja {
  font-family: var(--zenkakunew);
  font-weight: 700;
  font-size: clamp(1rem, 0.879rem + 0.52vw, 1.5rem);
  color: #401a33;
}

.service .price .column {
  display: flex;
  align-items: center;
}

.service .price .column .label {
  font-family: var(--zenkakunew);
  font-weight: 500;
  font-size: clamp(0.75rem, 0.538rem + 0.91vw, 1.625rem);
  text-align: center;
  color: #fff;
  background-color: #401a33;
  padding: 5px 34px;
  margin-right: 34px;
}

.service .price .column .f-49 {
  font-family: var(--zenkakunew);
  font-weight: 700;
  font-size: clamp(2rem, 1.742rem + 1.1vw, 3.063rem);
  color: #401a33;
  margin-right: 17px;
}

.service .price .column .f-31 {
  font-family: var(--zenkakunew);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.083rem + 0.71vw, 1.938rem);
  color: #401a33;
  margin-top: auto;
}

.service .price .kome p {
  font-family: var(--zenkakunew);
  font-weight: 400;
  font-size: clamp(0.75rem, 0.689rem + 0.26vw, 1rem);
  line-height: calc(24 / 16);
  color: #000;
}

.service .t_camp .inner {
  padding: 64px 0 120px;
  gap: 0;
}

.service02 {
  margin-bottom: 120px;
}

.faq .inner {
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  gap: 53px;
}

.faq .sec-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.faq .qa-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 32px;
  border-bottom: 1px solid #401a33;
}

.faq .qa-item .q-item,
.faq .qa-item .a-item {
  display: flex;
  align-items: center;
  gap: 30px;
}

.faq .qa-item .a-item {
  align-items: flex-start;
}

.faq .qa-item .q-item .q-tit {
  width: 41px;
  height: 41px;
  background-color: #401a33;
  font-family: var(--zenkakunew);
  font-weight: 700;
  font-size: clamp(0.938rem, 0.755rem + 0.78vw, 1.688rem);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq .qa-item .q-item .tit-ja {
  font-family: var(--zenkakunew);
  font-weight: 700;
  font-size: clamp(0.875rem, 0.784rem + 0.39vw, 1.25rem);
  color: #401a33;
}

.faq .qa-item .a-item .a-tit {
  width: 41px;
  height: 41px;
  background: transparent;
  border: 1px solid #401a33;
  font-family: var(--zenkakunew);
  font-weight: 700;
  font-size: clamp(0.938rem, 0.755rem + 0.78vw, 1.688rem);
  color: #401a33;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq .qa-item .a-item .desc,
.faq .qa-item .q-item .tit-ja {
  width: 80%;
}
.faq .qa-item .a-item .desc p {
  font-size: clamp(0.75rem, 0.689rem + 0.26vw, 1rem);
  letter-spacing: 0.1em;
  color: #401a33;
}

@media (max-width: 1023px) {
  .intro .inner {
    flex-direction: column;
    gap: 40px;
  }
  .intro .inner {
    width: 80%;
  }
  .intro .sec-body {
    max-width: none;
    width: 100%;
  }
  .intro .sec-head {
    width: 90%;
    margin: 0 auto;
    gap: 40px;
  }
  .trouble .inner {
    padding: 60px 0 53px;
    gap: 30px;
  }
  .trouble .sec-head {
    gap: 30px;
  }
  .trouble .sec-head .tit-ja {
    padding-bottom: 24px;
  }
  .trouble .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 35px;
  }
  .trouble .sec-body {
    width: 60%;
    margin: 0 auto;
  }
  .features .inner {
    padding: 80px 0;
    gap: 46px;
  }
  .features .list {
    gap: 70px;
  }
  .features .list .item {
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

  .service .inner {
    padding: 48px 0 28px;
    gap: 38px;
    width: 90%;
  }
  .service .sec-head {
    width: 90%;
    margin: 0 auto;
  }
  .service .item .box-inner {
    width: 93%;
    gap: 32px;
  }
  .intro .sec-head .js-split .char {
    letter-spacing: 0.2em;
  }
}

@media (max-width: 767px) {
  .intro .inner {
    width: 90%;
  }
  .intro .sec-head {
    width: 95%;
  }
  .trouble .sec-body {
    width: 85%;
  }
  .features .list .item .sec-text {
    padding-left: 20px;
  }
  .features .list .item .sec-text::before {
    width: 9px;
    height: 9px;
  }
  .features .list .item .sec-img iframe {
    height: 167px;
  }
  .service .item-body .list .item .column {
    flex-direction: column;
    gap: 14px;
    width: 90%;
  }
  .service .item-body .list .item .column .sec-img,
  .service .item-body .list .item .column .desc {
    max-width: none;
    width: 100%;
  }
  .service .item-body .list .item .num {
    width: 28px;
  }
  .service .item-body .list .item .sec-text {
    width: 90%;
  }
  .service .item-body .list .item .num::after {
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 8px solid #555555;
  }
  .service02 {
    margin-bottom: 60px;
  }
  .service .sec-body > .item {
    border-width: 4px;
  }
  .faq .inner {
    padding: 52px 0 80px;
    gap: 36px;
  }
  .faq .qa-item .q-item .q-tit,
  .faq .qa-item .a-item .a-tit {
    width: 24px;
    height: 24px;
  }
  .faq .qa-item .q-item,
  .faq .qa-item .a-item {
    gap: 11px;
  }
}

.gjs-dashed .intro .sec-body .img01,
.gjs-dashed .intro .sec-body .img02 {
  clip-path: inset(0 0 0 0);
}