@charset "utf-8";

/**
 * @title Top
 * @description Top
 * * @date 2025-10-07
 * @version 1.0.0
 */

/*common*/

.c-contact-btn {
  font-family: var(--font-inter);
  font-weight: 700;
  display: inline-block;
  position: relative;
  width: calc(196 * var(--u));
  background: var(--black);
  color: var(--white);
  text-align: center;
  border-radius: 50vh;
  text-transform: capitalize;
  line-height: 1;
  letter-spacing: 0.08em;
  padding: calc(13 * var(--u)) calc(5 * var(--u));
  font-size: calc(12 * var(--u));
}

.c-contact-btn::after {
  content: '';
  position: absolute;
  display: inline-block;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  background: var(--oragne);
  border-radius: 50%;
}
@media screen and (min-width: 48rem) {
  .c-contact-btn {
    width: 211px;
    font-size: 18px;
    padding: 17.5px 8px;
    transition: all 0.3s ease;
  }
  .c-contact-btn::after {
    width: 10px;
    height: 10px;
    left: 19px;
    transition: all 0.3s ease;
  }
}

@media (any-hover: hover) {
  .c-contact-btn:hover {
    background: var(--oragne);
    color: var(--white);
  }
  .c-contact-btn:hover::after {
    background: var(--white);
  }
}

.l-inner {
  padding: 0 calc(15 * var(--u));
  margin: 0 auto;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .l-inner {
    padding: 0 calc(25 * var(--u));

  }
}

.sec-ttl {
  font-size: calc(22 * var(--u));
  font-weight: 700;
  letter-spacing: 0.17em;
  position: relative;
  z-index: 1;
  line-height: 100%;
  text-align: center;
  width: fit-content;
  margin-inline: auto;
  margin: calc(60 * var(--u)) auto;
  padding-left: calc(30 * var(--u));
}
@media screen and (min-width: 48rem) {
  .sec-ttl {
    font-size: calc(28 * var(--u));
    margin: calc(92.5 * var(--u)) auto;
  }
  .sec-ttl.sec-ttl--left {
    text-align: left;
    margin-inline: 0;
  }
}


.sec-ttl::before{
  content: '';
  position: absolute;
  display: inline-block;
  width: calc(23 * var(--u));
  height: calc(21 * var(--u));
  top: 50%;
  left:0;
  transform: translateY(-50%);
  background-image: url(../img/top/icon_ttl.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.sec-ttl::after{
  content: attr(data-en);
  position: absolute;
  display: inline-block;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  text-transform: capitalize;
  font-size: calc(120 * var(--u));
  color: var(--l-gray);
  letter-spacing: 0.08em;
  z-index: -1;
  font-family: var(--font-inter);
  line-height: 1;
}
.sec-ttl.sec-ttl--wh::after {
  color: var(--white);
}
@media screen and (min-width: 48rem) {
  .sec-ttl::after {
    font-size: calc(185 * var(--u));
    letter-spacing: 0.1em;
  }
  .sec-ttl.sec-ttl--left::after {
    transform: translate(0,-50%);
    left:0;
  }
}


/*s-mv*/
.s-mv {
  padding-top: calc(34 * var(--u));
  padding-bottom: calc(50 * var(--u));
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  contain: layout style paint;
}
@media screen and (min-width: 48rem) {
  .s-mv {
    padding-top: calc(68 * var(--u));
    padding-bottom: calc(100 * var(--u));
  }
}
@media screen and (min-width: 64rem) {
  .s-mv {
    min-height: calc(100vh - 100px);
  }
}
@media screen and (min-width: 80rem) {
  .s-mv {
    padding-bottom: 0;
    min-height: 100vh;
  }
}

.s-mv__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.s-mv__bg picture,
.s-mv__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-mv__inner {
  max-width: 1024px;
}
@media screen and (min-width: 64rem) {
  .s-mv__inner {
    max-width: calc(1386 * var(--u));
  }
}

.s-mv__wrapper {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 64rem) {
  .s-mv__wrapper {
    flex-direction: row;
    justify-content: center;
    margin-top: calc(136 * var(--u));
  }
}
@media screen and (min-width: 80rem) {
  .s-mv__wrapper {
    max-width: calc(705 * var(--u));
    justify-content: flex-start;
  }
}


.s-mv__content {
  display: contents;
}
@media screen and (min-width: 64rem) {
  .s-mv__content {
    display: flex;
    flex-direction: column;
    max-width: 510px;
    width: 80%;
    margin-right: -5%;
  }
}
@media screen and (min-width: 64rem) {
  .s-mv__content {
    width: 510px;

    margin-right: -5%;
  }
}
@media screen and (min-width: 80rem) {
  .s-mv__content {
    max-width: unset;
    width: calc(693 * var(--u));
    flex-shrink: 0;
    margin-right: 0;
  }
}

.s-mv__txt-wrap {
  order: 4;
  text-align: center;
  margin-top: calc(-15 * var(--u));
}
@media screen and (min-width: 64rem) {
  .s-mv__txt-wrap {
    text-align: left;
    margin-top: 0;
  }
}

.s-mv__logo {
  width: calc(269 * var(--u));
  margin: calc(15 * var(--u)) auto 0;
  order: 2;
  display: block;
}
@media screen and (min-width: 48rem) {
  .s-mv__logo {
    width: calc(300 * var(--u));
    margin: calc(30 * var(--u)) auto 0;
  }
}
@media screen and (min-width: 64rem) {
  .s-mv__logo {
    display: none;
  }
}

.s-mv__copy {
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  padding: calc(7 * var(--u)) calc(15 * var(--u));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.04em;
  order: 1;
  position: relative;
  z-index: 1;
  height: fit-content;
}
@media screen and (min-width: 48rem) {
  .s-mv__copy {
    font-size: calc(23 * var(--u));
    padding: calc(12.5 * var(--u)) calc(10 * var(--u));
    line-height: 1;
  }
}
@media screen and (min-width: 64rem) {
  .s-mv__copy {
    margin: 0;
  }
}

.s-mv__copy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  opacity: 0.33;
  z-index: -1;
}

.s-mv__ttl {
  font-size: calc(28 * var(--u));
  letter-spacing: 0.025em;
  font-weight: 700;
  line-height: calc(38/28);
}
@media screen and (min-width: 48rem) {
  .s-mv__ttl {
    font-size: calc(46 * var(--u));
  }
}
@media screen and (min-width: 64rem) {
  .s-mv__ttl {
    font-size: calc(47 * var(--u));
    margin-top: calc(27 * var(--u));
  }
}
@media screen and (min-width: 80rem) {
  .s-mv__ttl {
    font-size: calc(55 * var(--u));
    line-height: calc(75/55);
    letter-spacing: 0.05em;
  }
}

.s-mv__lead {
  font-size: calc(15 * var(--u));
  font-weight: 500;
  margin-top: calc(15 * var(--u));
  line-height: calc(27/15);
  letter-spacing: 0.01em;
  text-align: center;
}
@media screen and (min-width: 48rem) {
  .s-mv__lead {
    text-align: left;
    font-size: calc(24 * var(--u));
    max-width: calc(835 * var(--u));
    width: 100%;
    margin-inline: auto;
  }
}
@media screen and (min-width: 64rem) {
  .s-mv__lead {
    font-size: calc(24 * var(--u));
    line-height: calc(40/24);
    margin: 0;
    margin-top: calc(25 * var(--u));
    max-width: calc(676 * var(--u));
    width: 100%;
  }
}

.s-mv__btn {
  margin: calc(30 * var(--u)) auto 0;
}
@media screen and (min-width: 48rem) {
  .s-mv__btn {
    margin: calc(56 * var(--u)) 0 0;
  }
}

.s-mv__img {
  width: calc(383 * var(--u));
  margin-inline: auto;
  order: 3;
  right: calc(23 * var(--u));
  top: calc(-9 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-mv__img {
    width: calc(700 * var(--u));
    right: calc(-36 * var(--u));
    top: calc(-18 * var(--u));
  }
}
@media screen and (min-width: 64rem) {
  .s-mv__img {
    margin: 0;
    max-width: calc(650 * var(--u));
    width: 53%;
  }
}
@media screen and (min-width: 80rem) {
  .s-mv__img {
    min-width: calc(909 * var(--u));
    margin-left: calc(-100 * var(--u));
    margin-top: calc(-7 * var(--u));
  }
}

/*******************
* Issue
*******************/

.s-issue {
  padding-top: calc(88 * var(--u));
  overflow: hidden;
}
@media screen and (min-width: 64rem) {
  .s-issue {
    overflow: visible;
    padding-top: calc(70 * var(--u));
  }
}

.s-issue__inner {
  padding: 0 calc(15 * var(--u)) 0 calc(7 * var(--u));
  position: relative;
  z-index: 5;
}
@media screen and (min-width: 64rem) {
  .s-issue__inner {
    padding: 0;
    max-width: calc(1076 * var(--u));
    margin-top: calc(143 * var(--u));
  }
}
.s-issue__content-inner::before {
  content: '';
  position: absolute;
  left: calc(-41 * var(--u));
  top: calc(141 * var(--u));
  display: block;
  width:  calc(718 * var(--u));
  height:  calc(122 * var(--u));
  background-image: url(../img/top/bg_wave01.png);
  background-image: image-set(
    url(../img/top/bg_wave01.webp) type("image/webp"),
    url(../img/top/bg_wave01.png) type("image/png")
  );
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
}

@media screen and (min-width: 64rem) {
  .s-issue__content-inner::before {
    width:  calc(1672 * var(--u));
    height: calc(285 * var(--u));
    top: unset;
    bottom: calc(-189 * var(--u));
    left: -248%;
    bottom: -35.9%;
    left: 23.8%;
  }
}

@media screen and (min-width: 64rem) {
  .s-issue__ttl.sec-ttl.sec-ttl {
      text-align: left;
      margin-inline: 0;
    }
  }
  @media screen and (min-width: 64rem) {
    .s-issue__ttl.sec-ttl::after {
    transform: translate(0,-50%);
    left: 0;
    letter-spacing: 0.08em;
  }
}

.s-issue__img {
  width: calc(162 * var(--u));
  margin: calc(-25 * var(--u)) auto 0;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 48rem) {
  .s-issue__img {
    width: calc(259 * var(--u));
    margin: calc(-5 * var(--u)) auto 0;
    position: relative;
  }
}
@media screen and (min-width: 64rem) {
  .s-issue__img {
    position: absolute;
    bottom: calc(23 * var(--u));
    right: calc(-40 * var(--u));
  }
}

.s-issue__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 162 / 197;
}

.s-issue__content-inner {
padding: 0 calc(11 * var(--u));
}
@media screen and (min-width: 64rem) {
  .s-issue__content-inner {
    padding: 0;
    display: flex;
    flex-direction: row-reverse;
    max-width: calc(1113 * var(--u));
    margin-inline: auto;
  }
}

.s-issue__list {
  margin: calc(65 * var(--u)) auto 0;
  max-width: calc(700 * var(--u));
  width: 100%;
}
@media screen and (min-width: 48rem) {
  .s-issue__list {
    max-width: calc(875 * var(--u));
    padding: 0 calc(15 * var(--u));
  }
}
@media screen and (min-width: 64rem) {
  .s-issue__list {
    margin: 0 0 0;
    margin-right: auto;
  }
}

.s-issue__item {
  width: 100%;
}
.s-issue__item::before {
  content: '';
  background-image: url(../img/top/line-sp.png);
  background-position: left;
  background-repeat: repeat-x;
  background-size: contain;
  display: block;
  width: 100%;
  height: 4px;
}
@media screen and (min-width: 48rem) {
  .s-issue__item::before {
    background-image: url(../img/top/line-pc.png);
    height: calc(6 * var(--u));
    height: 7px;
  }
}
.s-issue__item:last-of-type:after {
  content: '';
  background-image: url(../img/top/line-sp.png);
  background-position: left;
  background-repeat: repeat-x;
  background-size: contain;
  display: block;
  width: 100%;
  height: 4px;
}
@media screen and (min-width: 48rem) {
  .s-issue__item:last-of-type:after {
    background-image: url(../img/top/line-pc.png);
    height: 7px;
  }
}
@media screen and (min-width: 64rem) {
  .s-issue__item:nth-of-type(3)::before {
    width: 90%;
  }
  .s-issue__item:nth-of-type(4)::before {
    width: 96%;
  }
  .s-issue__item:nth-of-type(5)::before {
    width: 86%;
  }
}

.s-issue__item p {
  display: flex;
  gap: calc(5.6 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 500;
  line-height: calc(30/18);
  letter-spacing: 0.1em;
  padding: calc(27 * var(--u)) calc(12 * var(--u)) calc(21* var(--u));
}
@media screen and (min-width: 48rem) {
  .s-issue__item p {
    font-size: calc(24 * var(--u));
    gap: calc(11.5 * var(--u));
    align-items: center;
    padding: calc(22* var(--u)) 0;
  }
}

.s-issue__item p::before {
  content: '';
  background-image: url(../img/top/icon_check.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  width: calc(25 * var(--u));
  height: calc(22 * var(--u));
  flex-shrink: 0;
  margin-top: 5px;
}
@media screen and (min-width: 48rem) {
  .s-issue__item p::before {
    margin-top: 0;
  }
}

/*******************
* Support
*******************/
.s-support {
  padding-top: calc(94 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-support {
    padding-top: calc(200 * var(--u));
  }
}
@media screen and (min-width: 64rem) {
  .s-support {
    padding-top: calc(266 * var(--u));
  }
}

.s-support__top-wrapper {
  position: relative;
  max-width: calc(400 * var(--u));
  width: 100%;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: 64rem) {
  .s-support__top-wrapper::before {
    content: '';
    background-image: url(../img/top/support_deco01.png);
    position: absolute;
    display: block;
    width: calc(168 * var(--u));
    height: calc(172 * var(--u));
    top: -50%;
    right: 12.3%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 1;
    }
  .s-support__top-wrapper::after {
    content: '';
    background-image: url(../img/top/support_deco02.png);
    position: absolute;
    display: block;
    width: calc(149 * var(--u));
    height: calc(111 * var(--u));
    bottom: -90%;
    left: 12.3%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 5;
  }
}
@media screen and (min-width: 80rem) {
  .s-support__top-wrapper::before {
    width: calc(193 * var(--u));
    height: calc(197 * var(--u));
    top: 0%;
    right: 12.3%;
  }
  .s-support__top-wrapper::after {
    width: calc(171 * var(--u));
    height: calc(127 * var(--u));
    bottom: -40%;
    left: 12.3%;
  }
}

@media screen and (min-width: 48rem) {
  .s-support__top-wrapper {
    max-width: calc(800 * var(--u));
  }
}
@media screen and (min-width: 64rem) {
.s-support__top-wrapper {
    max-width: unset;
    margin-left: 0;
  }
}

.s-support__copy {
  font-family: var(--font-lobster);
  color: var(--font-gray);
  font-size: calc(64 * var(--u));
  line-height: calc(79 * var(--u));
  white-space: nowrap;
  position: relative;
  left: -3%;
  letter-spacing: 0;
}
@media screen and (min-width: 48rem) {
  .s-support__copy {
    left: 0;
    font-size: calc(100 * var(--u));
    line-height: 1;
  }
}
@media screen and (min-width: 64rem) {
  .s-support__copy {
    font-size: calc(150 * var(--u));
    line-height: calc(190 * var(--u));
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}

@media screen and (min-width: 80rem) {
  .s-support__copy {
    font-size: calc(185 * var(--u));
    line-height: calc(419 * var(--u));
  }
}

.s-support__top-img {
  max-width: calc(288 * var(--u));
  width: 100%;
  margin-inline: auto;
  position: absolute;
  top:-25%;
  left: 60%;
  transform: translateX(-50%);
  z-index: 1;
}
@media screen and (min-width: 48rem) {
  .s-support__top-img {
    max-width: calc(358 * var(--u));
    left: 50%;
    top: -100%;
  }
}
@media screen and (min-width: 64rem) {
  .s-support__top-img {
    max-width: calc(500 * var(--u));
    width: 100%;
    top: -50%;
    left: 47%;
  }
}
@media screen and (min-width: 80rem) {
  .s-support__top-img {
    max-width: calc(588 * var(--u));
    top: 0;
  }
}

.s-support__inner {
  padding: 0 calc(14 * var(--u));
  margin-inline: auto;
}
@media screen and (min-width: 48rem) {
  .s-support__inner {
    padding: 0 calc(25 * var(--u));
  }
}


.s-support__ttl {
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: calc(42/28);
  max-width: calc(700 * var(--u));
  width: 100%;
  margin: calc(102 * var(--u)) auto 0;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 48rem) {
  .s-support__ttl {
    font-size: max(calc(48 * var(--u)), 28px);
    line-height: calc(81/48);
    margin-top: calc(241 * var(--u));
    white-space: nowrap;
    text-align: center;
    max-width: unset;
  }
}

.s-support__ttl::before {
  content: '';
  position: absolute;
  display: block;
  background-image: url(../img/top/bg_wave02.png);
  background-image: image-set(
    url(../img/top/bg_wave02.webp) type("image/webp"),
    url(../img/top/bg_wave02.png) type("image/png")
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(525 * var(--u));
  height: calc(273 * var(--u));
  top: -57.5%;
  left: -51.2%;
  z-index: -1;
}
@media screen and (min-width: 48rem) {
  .s-support__ttl::before {
    width: calc(1443 * var(--u));
    height: calc(751 * var(--u));
    top: -95.8%;
    left: -24.2%;
  }
}

.s-support__lead {
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: calc(24/14);
  letter-spacing: 0.08em;
  max-width: calc(664 * var(--u));
  width: 100%;
  margin-inline: auto;
  margin-top: calc(10 * var(--u));
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 48rem) {
  .s-support__lead {
    font-size: max(calc(18 * var(--u)), 14px);
    line-height: calc(30/18);
    max-width: calc(985 * var(--u));
    letter-spacing: 0.08em;
    margin-top: calc(36 * var(--u));
  }
}
.s-support__lead::before {
  content: '';
  position: absolute;
  display: block;
  background-image: url(../img/top/bg_wave03.png);
  background-image: image-set(
    url(../img/top/bg_wave03.webp) type("image/webp"),
    url(../img/top/bg_wave03.png) type("image/png")
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(282 * var(--u));
  height: calc(282 * var(--u));
  bottom: -100%;
  right: -11%;
  z-index: -1;
}
@media screen and (min-width: 48rem) {
  .s-support__lead::before {
    width: calc(600 * var(--u));
    height: calc(600 * var(--u));
    bottom: -187%;
    right: -28%;
    bottom: -150px;
  }
}
@media screen and (min-width: 64rem) {
  .s-support__lead::before {
    width: calc(1067 * var(--u));
    height: calc(1067 * var(--u));
    bottom: -544%;
    right: -88%;
  }
}


.s-support__list {
  margin-top: calc(21 * var(--u));
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(10 * var(--u));
  max-width: calc(700 * var(--u));
  width: 100%;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 48rem) {
  .s-support__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(14 * var(--u)) calc(37 * var(--u));
    max-width: calc(980 * var(--u));
    margin-top: calc(64 * var(--u));

  }
}
.s-support__item {
  background-color: var(--oragne);
  color: var(--white);
  padding: calc(6.5 * var(--u)) calc(14 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: 1;
  font-weight: 700;
  border-radius: 50vh;
  text-align: center;
}

.s-support__item span {
  display: none;
}

@media screen and (min-width: 48rem) {
  .s-support__item {
    width: calc(297 * var(--u));
    font-size: max(calc(17 * var(--u)), 12px);
    padding: calc(14.5 * var(--u)) calc(14 * var(--u));
    border-radius: calc(10 * var(--u));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.08em;
  }
  .s-support__item span {
    display: inline-block;
  }
  .s-support__item:has(span) {
    letter-spacing: 0;
  }
}

/*******************
* Feature
*******************/
.s-feature {
  padding-top: calc(76 * var(--u));
  padding-bottom: calc(130 * var(--u));
  background: var(--l-gray);
  background-image: url("../img/top/bg_feature-sp.png");
  background-image: image-set(
  url("../img/top/bg_feature-sp.webp") type("image/webp"),
  url("../img/top/bg_feature-sp.png") type("image/png")
);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 48rem) {
  .s-feature {
    background-image: url("../img/top/bg_feature.png");
    background-image: image-set(
    url("../img/top/bg_feature.webp") type("image/webp"),
    url("../img/top/bg_feature.png") type("image/png")
  );
  padding-top: calc(300 * var(--u));
    padding-bottom: calc(184 * var(--u));
  }
}
@media screen and (min-width: 64rem) {
  .s-feature {
    padding-top: calc(322 * var(--u));
    padding-bottom: calc(177 * var(--u));
  }
}

.s-feature::before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: calc(81 * var(--u));
  top: -2px;
  left: 0;
  background: url(../img/top/bg_balloon-sp.png) no-repeat;
  background-size: 100% calc(81 * var(--u));
  background-position: bottom;
}
@media screen and (min-width: 48rem) {
  .s-feature::before {
    height: calc(353 * var(--u));
    background: url(../img/top/bg_balloon.png) center / auto calc(353 * var(--u)) no-repeat;
    top: -2.2%;
  }
}
@media screen and (min-width: 1681px) {
  .s-feature::before {
    background-size: cover;
    height: calc(400 * var(--u));
  }
}

.s-feature__ttl.sec-ttl::after {
 font-size: calc(82 * var(--u));
}
@media screen and (min-width: 64rem) {
  .s-feature__ttl.sec-ttl::after {
    font-size: calc(185* var(--u));
  }
}

.s-feature__item:not(:first-of-type) {
  margin-top: calc(51 * var(--u));
}

@media screen and (min-width: 48rem) {
  .s-feature__item.--item1 {
    margin-top: calc(207 * var(--u));
  }
  .s-feature__item.--item2 {
    margin-top: calc(103 * var(--u));
  }
  .s-feature__item.--item3 {
    margin-top: calc(147 * var(--u));
  }
  .s-feature__item.--item4 {
    margin-top: calc(89 * var(--u));
  }
  .s-feature__item.--item5 {
    margin-top: calc(148 * var(--u));
  }
}

.s-feature__wrapper {
  display: flex;
  flex-direction: column;
  max-width: calc(700 * var(--u));
  width: 100%;
  margin-inline: auto;;
}
@media screen and (min-width: 48rem) {
  .s-feature__wrapper {
    flex-direction: row;
    max-width: calc(1080 * var(--u));
    justify-content: space-between;
  }
}
@media screen and (min-width: 48rem) {
  .s-feature__item:nth-of-type(even) .s-feature__wrapper {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 48rem) {
  .s-feature__item:nth-of-type(2) .s-feature__wrapper {
    max-width: calc(1087 * var(--u));
  }
}

.s-feature__body {
  display: contents;
}
@media screen and (min-width: 48rem) {
  .s-feature__body {
    display: flex;
    flex-direction: column;
    max-width: calc(540 * var(--u));
    width: 100%;
    flex-shrink: 0;
  }
}

.s-feature__num {
  font-size: calc(12 * var(--u));
  font-weight: 700;
  font-family: var(--font-inter);
  line-height: 1;
  font-size: calc(26 * var(--u));
  color: var(--oragne);
  width: calc(65 * var(--u));
  height: calc(65 * var(--u));
  border-radius: 50%;
  background-image: url(../img/top/feature_num.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  order: 1;
  z-index: 2;
}
@media screen and (min-width: 48rem) {
  .s-feature__num {
    width: calc(96 * var(--u));
    height: calc(96 * var(--u));
    margin-left: 0;
    font-size: calc(38 * var(--u));
  }
}
.s-feature__heading {
  font-size: min(calc(28 * var(--u)), 30px);
  font-weight: 700;
  line-height: calc(40/28);
  color: var(--oragne);
  letter-spacing: 0.08em;
  margin-top: calc(18 * var(--u));
  order: 2;
  z-index: 2;
}
@media screen and (min-width: 48rem) {
  .s-feature__heading {
    font-size: calc(38 * var(--u));
    line-height: calc(64/38);
    margin-top: calc(16 * var(--u));
    letter-spacing: 0;
    white-space: nowrap;
  }
}
.--item4 .s-feature__heading {
  letter-spacing: 0.03em;
}
@media screen and (min-width: 48rem) {
  .--item4 .s-feature__heading {
    letter-spacing: 0;
  }
}

.--item5 .s-feature__heading {
  letter-spacing: 0;
}

.s-feature__lead {
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: calc(24/14);
  color: var(--black);
  letter-spacing: 0.08em;
  margin-top: calc(14 * var(--u));
  order: 4;
  z-index: 2;
}
@media screen and (min-width: 48rem) {
  .s-feature__lead {
    font-size: max(calc(18 * var(--u)), 12px);
    line-height: calc(30/18);
    margin-top: calc(16 * var(--u));
  }
}

.--item2 .s-feature__lead {
  margin-top: calc(24 * var(--u));
}
.--item3 .s-feature__lead {
  margin-top: calc(10 * var(--u));
}

.s-feature__img-wrapper {
  order: 3;
  position: relative;
  z-index: 1;
}

.s-feature__img::before {
  content: '';
  position: absolute;
  right: calc(-321 * var(--u));
  top: calc(-279 * var(--u));
  width: calc(1056 * var(--u));
  height: calc(601 * var(--u));
  background-image: url(../img/top/feature_bg-01.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

.s-feature__item.--item2 .s-feature__img::before {
  right: calc(-339 * var(--u));
  top: calc(-313 * var(--u));
}

.s-feature__item.--item3 .s-feature__img::before {
  right: calc(-251 * var(--u));
  top: calc(-323 * var(--u));
}

.s-feature__item.--item5 .s-feature__img::before {
  right: calc(-343 * var(--u));
  top: calc(-308 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-feature__item.--item1 .s-feature__img::before {
    width: calc(1714 * var(--u));
    height: calc(1050 * var(--u));
    right: calc(-487 * var(--u));
    top: calc(-315 * var(--u));
  }
  .s-feature__item.--item2 .s-feature__img::before {
    background-image: url(../img/top/feature_bg-02.png);
    width: calc(1379 * var(--u));
    height: calc(558 * var(--u));
    right: calc(-517 * var(--u));
    top: calc(-91 * var(--u));
  }
  .s-feature__item.--item3 .s-feature__img::before {
    background-image: url(../img/top/feature_bg-03.png);
    width: calc(1684 * var(--u));
    height: calc(1030 * var(--u));
    right: calc(-485 * var(--u));
    top: calc(-295 * var(--u));
  }
  .s-feature__item.--item4 .s-feature__img::before {
    background-image: url(../img/top/feature_bg-04.png);
    width: calc(1685 * var(--u));
    height: calc(971 * var(--u));
    right: calc(-748 * var(--u));
    top: calc(-349 * var(--u));
  }
  .s-feature__item.--item5 .s-feature__img::before {
    background-image: url(../img/top/feature_bg-05.png);
    width: calc(1685 * var(--u));
    height: calc(948 * var(--u));
    right: calc(-417 * var(--u));
    top: calc(-181 * var(--u));
  }
}

.s-feature__img {
  width: 100%;
  position: relative;
}

.s-feature__img img {
  width: 100%;
  height: 100%;
}

.--item1 .s-feature__img {
  max-width: calc(306* var(--u));
  margin-inline: auto;
  left: calc(12 * var(--u));
}

.--item1 .s-feature__img img {
  width: calc(306 * var(--u));
}

.--item2 .s-feature__img {
  max-width: calc(289* var(--u));
  margin-inline: auto;
  margin-top: calc(8 * var(--u));
}

.--item3 .s-feature__img {
  max-width: calc(325* var(--u));
  margin-top: calc(-31 * var(--u));
  margin-bottom: calc(-100 * var(--u));
  margin-inline: auto;
  left: calc(34 * var(--u));
}

.--item4 .s-feature__img {
  max-width: calc(282* var(--u));
  margin-inline: auto;
  margin-top: calc(25 * var(--u));
}

.--item5 .s-feature__img {
  max-width: calc(245* var(--u));
  margin-inline: auto;
}

.--item5 .s-feature__img img {
  margin-left: auto;
  margin-right: calc(-15 * var(--u));
  display: block;

}

@media screen and (min-width: 48rem) {
  .--item1 .s-feature__img {
    max-width: calc(430 * var(--u));
    margin-inline: auto;
    left: calc(12 * var(--u));
    top: calc(-73 * var(--u));
    margin-top: 0;
  }
  .--item1 .s-feature__img img {
    width: 100%;
    margin-top: 0;
  }

  .--item2 .s-feature__img{
    max-width: calc(506 * var(--u));
    margin-inline: auto;
    left: calc(-33 * var(--u));
    top: calc(43 * var(--u));
  }

  .--item3 .s-feature__img {
    max-width: calc(622 * var(--u));
    left: calc(41 * var(--u));
    top: calc(29 * var(--u));
    margin-top: 0;
  }
  .--item3 .s-feature__img img{
   width: calc(622 * var(--u));
  }

  .--item4 .s-feature__img {
    max-width: calc(511 * var(--u));
    left: calc(-9 * var(--u));
    top: calc(117 * var(--u));
    margin-top: 0;
  }

  .--item4 .s-feature__img img{
    width: calc(513 * var(--u));
  }

  .--item5 .s-feature__img{
    max-width: calc(404 * var(--u));
    margin-inline: auto;
    left: calc(0 * var(--u));
    top: calc(-43 * var(--u));
  }

  .--item5 .s-feature__img img {
    margin-left: auto;
    margin-right: 0;
    max-width: calc(404 * var(--u));
  }
}

.swiper-pagination-bullet {
  width: .625rem;
  height: .625rem;
  background: #fff;
  border: .063rem solid #333;
  opacity: 1
}

.swiper-pagination-bullet-active {
  background: #333
}

/* ========================================
Member Section
======================================== */

.s-member {
  padding: calc(80 * var(--u)) 0;
  overflow: hidden;
}
@media screen and (min-width: 48rem) {
  .s-member {
    padding-top: calc(120 * var(--u));
    padding-bottom: calc(150 * var(--u));
  }
}

.s-member__ttl::after {
  font-size: calc(82 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-member__ttl::after {
    font-size: calc(185 * var(--u));
  }
}

.s-member__top-inner {
  max-width: calc(1130 * var(--u));
  padding: 0 calc(15 * var(--u));
  margin: 0 auto;
}
@media screen and (min-width: 64rem) {
  .s-member__top-inner {
    max-width: calc(1130 * var(--u));
    padding: 0 calc(25 * var(--u));
    margin: 0 auto;
  }
}

.s-member__sub-ttl {
  font-size: calc(28 * var(--u));
  line-height: calc(40/28);
  font-weight: 700;
}
@media screen and (min-width: 48rem) {
  .s-member__sub-ttl {
    font-size: calc(38 * var(--u));
    line-height: calc(64/38);
    margin-top: calc(102 * var(--u));
  }
}

.s-member__txt {
  font-size: calc(16 * var(--u));
  line-height: calc(24/16);
  letter-spacing: 0.08em;
  margin-top: calc(10 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-member__txt {
    font-size: calc(18 * var(--u));
    line-height: calc(30/18);
    margin-top: calc(7 * var(--u));
  }
}

.s-member__swiper-inner {
  margin-inline: auto;

  overflow: hidden;
  margin-top: calc(30 * var(--u));
}

.s-member__swiper-inner .swiper-container {
  padding-right: calc(28.5 * var(--u));
}

.s-member__inner {
  margin: calc(36 * var(--u)) auto 0;
  max-width: calc(1130 * var(--u));
  gap: calc(40 * var(--u));
  padding-left: calc(15 * var(--u));
  position: relative;
  z-index: 1;
}

.s-member__inner::before,
.s-member__inner::after {
  content: '';
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

.s-member__inner::before{
  background-image: url("../img/top/bg_member-sp.png");
  background-image: image-set(
    url("../img/top/bg_member-sp.webp") type("image/webp"),
    url("../img/top/bg_member-sp.png") type("image/png")
  );
  width: calc(824 * var(--u));
  height: calc(712 * var(--u));
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (min-width: 48rem) {
  .s-member__inner::before {
    top: -17%;
    left: -81%;
    width: calc(1747 * var(--u));
    height: calc(3112 * var(--u));
    background-color: transparent;
    background-image: url(../img/top/bg_member01.png);
    background-image: image-set(
      url(../img/top/bg_member01.png) type("image/png"),
      url(../img/top/bg_member01.webp) type("image/webp")
    );
    transform: translateX(0);
  }

  .s-member__inner::after {
    top: -26%;
    right: -87%;
    width: calc(1349 * var(--u));
    height: calc(3193 * var(--u));
    background-image: url(../img/top/bg_member02.png);
    background-image: image-set(
      url(../img/top/bg_member02.png) type("image/png"),
      url(../img/top/bg_member02.webp) type("image/webp")
    );
  }
}

@media screen and (min-width: 48rem) {
  .s-member__swiper-inner {
    margin-top: calc(66 * var(--u));
  }
}

.s-member__role {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: calc(10 * var(--u));
  line-height: calc(12/10);
}
@media screen and (min-width: 48rem) {
  .s-member__role {
    font-size: max(calc(15 * var(--u)), 12px);
    line-height: calc(23/15);
  }
}

.s-member__en-name {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: calc(27 * var(--u));
  line-height: calc(34/27);
}
@media screen and (min-width: 48rem) {
  .s-member__en-name {
    font-size: max(calc(41 * var(--u)), 27px);
    line-height: calc(60/41);
  }
}

.s-member__ja-name {
  font-size: calc(12 * var(--u));
  letter-spacing: 0.1em;
  line-height: 1;
  font-weight: 500;
}
@media screen and (min-width: 48rem) {
  .s-member__ja-name {
    font-size: max(calc(18 * var(--u)), 12px);
    letter-spacing: 0.1em;
    line-height: 1;
  }
}

.s-member__item-text {
  margin-top: calc(18 * var(--u));
  font-size: calc(14 * var(--u));
  letter-spacing: 0.08em;
  line-height: calc(23/14);
}
@media screen and (min-width: 48rem) {
  .s-member__item-text {
    margin-top: calc(20 * var(--u));
    font-size: max(calc(15 * var(--u)), 12px);
    letter-spacing: 0.08em;
    line-height: calc(27/15);
  }
}

@media screen and (min-width: 48rem) {
  .member-slider ul .swiper-slide:nth-of-type(1) .s-member__item-text {
    letter-spacing: 0.05em;
  }
}

.s-member__item-content {
  margin-top: calc(15 * var(--u));
}
@media screen and (min-width: 64rem) {
  .s-member__item-content {
    margin-top: calc(20 * var(--u));
  }
}

.s-member__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(10 * var(--u));
}

.member-slider {
  height: 100%;
}
@media screen and (min-width: 64rem) {
  .member-slider {
    background: transparent;
    overflow: visible;
    display: contents;
  }
}

.member-slider ul {
  padding-bottom: 0;
  align-items: stretch;
  padding-left: 0 !important;
}
@media screen and (min-width: 48rem) {
  .member-slider ul.swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: calc(34 * var(--u)) calc(28 * var(--u));
    padding-bottom: 0;
    transform: none !important;
  }
}

.member-slider ul .swiper-slide {
  height: auto;
  background-color: var(--l-gray);
  border-radius: calc(20 * var(--u));
  padding: calc(10 * var(--u));
  /* width: min(calc(318 * var(--u)) , 500px) !important; */
  width: calc(318 * var(--u)) !important;
}
@media screen and (min-width: 48rem) {
  .member-slider ul .swiper-slide {
    padding: calc(20 * var(--u));
    max-width: calc(520 * var(--u)) !important;
    width: 100% !important;
    overflow: hidden;
    backface-visibility: hidden;
    border-radius: calc(30 * var(--u));
    height: auto;
    display: block;
    flex-direction: initial;
  }
}

.member-slider ul .swiper-slide .inner {
  padding: calc(17 * var(--u));
  border-radius: calc(20 * var(--u));
  background-color: var(--l-gray);
  height: calc(635 * var(--u));
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--black);
}
@media screen and (min-width: 48rem) {
  .member-slider ul .swiper-slide .inner {
    height: 100%;
  }
}
@media screen and (min-width: 64rem) {
  .member-slider ul .swiper-slide .inner {
    padding: calc(30 * var(--u)) calc(29 * var(--u));
    border-radius: 1.875rem;
    overflow: hidden;
    border-radius: calc(30 * var(--u));
    background-color: var(--l-gray);
    display: flex;
    flex-direction: column;
    border: 1px dashed var(--black);
  }
}

/* ========================================
Case Section
======================================== */
.s-case {
  overflow: hidden;
  padding-top: calc(48 * var(--u));
  background: var(--l-gray);
  background-image: url("../img/top/bg_feature-sp.png");
  background-image: image-set(
  url("../img/top/bg_feature-sp.webp") type("image/webp"),
  url("../img/top/bg_feature-sp.png") type("image/png")
);
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 48rem) {
  .s-case {
    padding-top: calc(96 * var(--u));
    padding-bottom: calc(130 * var(--u));
    background-image: url("../img/top/bg_feature.png");
    background-image: image-set(
    url("../img/top/bg_feature.webp") type("image/webp"),
    url("../img/top/bg_feature.png") type("image/png")
  );
  }
}

.s-case__top-inner {
  max-width: calc(1100 * var(--u));
  padding: 0 calc(15 * var(--u));
  margin: 0 auto;
}

.s-case__wrapper {
  padding-left: calc(15 * var(--u));
  margin-top: calc(91 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-case__wrapper {
    margin-top: calc(155 * var(--u));
    /* 768px〜1023px → 50px固定 */
    margin-left: 50px;
    overflow: hidden;
  }
}

@media screen and (min-width: 64rem) {
  .s-case__wrapper {
    /* 1024px→50px、1680px→300px、1681px以上も画面幅に応じて増加 */
    margin-left: calc(50px + (100vw - 1024px) * 0.381);
  }
}

.s-case__wrapper .swiper-content {
  position: relative;
}

.s-case__wrapper .swiper-container {
  padding-bottom: calc(35 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-case__wrapper .swiper-container {
    padding-bottom: calc(100 * var(--u));
  }
}


.case-slider ul .swiper-slide {
  width: calc(318 * var(--u)) !important;
  height: auto;
}
@media screen and (min-width: 48rem) {
  .case-slider ul .swiper-slide {
    width: calc(530 * var(--u)) !important;
  }
}

.case-slider ul .swiper-slide .inner {
  height: 100%;
  margin: 0;
  background: #fff;
  border-radius: calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  padding: calc(30 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
}
@media screen and (min-width: 48rem) {
  .case-slider ul .swiper-slide .inner {
    display: flex;
    align-items: stretch;
    padding: calc(44 * var(--u)) calc(38 * var(--u)) calc(25 * var(--u));
    border-radius: calc(20 * var(--u));
  }
}

.s-case__item-ttl {
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: calc(26/18);
  letter-spacing: 0.06em;
  margin-top: calc(20 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-case__item-ttl {
    font-size: calc(24* var(--u));
    line-height: calc(32/24);
    margin-top: calc(39 * var(--u));
  }
}

.s-case__item-text {
  font-size: calc(14 * var(--u));
  line-height: calc(23/14);
  letter-spacing: 0.08em;
  margin-top: calc(18 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-case__item-text {
    font-size: calc(16 * var(--u));
    line-height: calc(27/16);
    letter-spacing: 0.08em;
    margin-top: calc(25 * var(--u));
  }
}

.case-slider ul .swiper-slide .inner .image-content  {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  height: calc(65 * var(--u));
}
@media screen and (min-width: 48rem) {
  .case-slider ul .swiper-slide .inner .image-content {
    width: 100%;
    height: calc(87 * var(--u));
  }
}

.case-slider ul .swiper-slide .inner .image-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.case-slider ul .swiper-slide .inner .image-content.icon01 img{
  max-width: calc(237 * var(--u));
}
.case-slider ul .swiper-slide .inner .image-content.icon02 img {
  max-width: calc(181 * var(--u));
}
.case-slider ul .swiper-slide .inner .image-content.icon03 img {
  max-width: calc(424 * var(--u));
}

.s-case__wrapper .swiper-pagination {
  max-width: calc(750* var(--u));
  width: 100%;
  padding: 0 calc(15 * var(--u)) !important;;
  bottom: 0 !important;
  display: flex;
  gap: 0;
}
@media screen and (min-width: 48rem) {
  .s-case__wrapper .swiper-pagination {
    max-width: calc(1100 * var(--u));
    padding: 0 !important;
  }
}


@keyframes bulletScaleX {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes lineExpand {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.s-case__wrapper .swiper-pagination-bullet::before,
.s-case__wrapper .swiper-pagination-bullet::after {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  content: '';
}

.s-case__wrapper .swiper-pagination-bullet::before {
  width: 100%;
  height: 0.5px;
  background: transparent;
}

.s-case__wrapper .swiper-pagination-bullet::after {
  width: 0;
  height: 0;
  background: transparent;
}


.s-case__wrapper .swiper-pagination-bullet {
  position: relative;
  flex: 1;
  width: calc(360 * var(--u)) !important;
  height: 0.5px;
  background: var(--border);
  opacity: 1;
  margin: 0;
  border-radius: 0;
  transition: background-color 0.3s ease;
  border: none;
}

.s-case__wrapper .swiper-pagination-bullet-active {
  transform-origin: left;
  animation: bulletScaleX 0.8s cubic-bezier(0, 0.55, 0.45, 1) forwards;
  position: relative;
  width: auto !important;
  bottom: 3px;
  background: var(--black);
  width: auto;
  height: 7px;
  border-radius: 3.5px;
}

.s-case__wrapper .swiper-pagination-bullet-active::before {
  background: var(--border);
  height: 0.5px;
}

.s-case__wrapper .swiper-pagination-bullet-active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 7px;
  background: var(--black);
  border-radius: 3.5px;
  animation: lineExpand 0.55s cubic-bezier(0, 0.55, 0.45, 1) forwards;
}

/* ========================================
Flow Section
======================================== */
.s-flow {
  overflow: hidden;
  padding-top: calc(80 * var(--u));
  padding-bottom: calc(80 * var(--u));
  background: var(--l-gray);
  background-image: url("../img/top/bg_feature-sp.png");
  background-image: image-set(
  url("../img/top/bg_feature-sp.webp") type("image/webp"),
  url("../img/top/bg_feature-sp.png") type("image/png")
);
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 48rem) {
  .s-flow {
    padding-top: 0;
    padding-bottom: calc(183 * var(--u));
    background-image: url("../img/top/bg_feature.png");
    background-image: image-set(
    url("../img/top/bg_feature.webp") type("image/webp"),
    url("../img/top/bg_feature.png") type("image/png")
  );
  }
}
.s-flow__inner {
  padding: 0 calc(15 * var(--u));
  margin: 0 auto;
}
@media screen and (min-width: 48rem) {
  .s-flow__inner {
    max-width: calc(1130 * var(--u));
    padding: 0 calc(25 * var(--u)) ;
  }
}

.s-flow__box {
  background: var(--white);
  border-radius: calc(20 * var(--u));
  padding: calc(30 * var(--u)) calc(15 * var(--u));
  margin-top: calc(-30 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-flow__box {
    margin-top: calc(-40 * var(--u));
    padding: calc(70 * var(--u)) calc(20 * var(--u)) calc(80 * var(--u));
  }
}

.s-flow__content {
  max-width: calc(770 * var(--u));
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 48rem) {
  .s-flow__content {
    max-width: calc(924 * var(--u));
  }
}
.s-flow__item {
  display: flex;
  gap: calc(15 * var(--u));
  position: relative;
  height: 100%;
}

@media screen and (min-width: 48rem) {
  .s-flow__item {
    align-items: center;
    gap: calc(42 * var(--u));
  }
}
.s-flow__item::before {
  content: '';
  background-image: url(../img/top/line-orange.png);
  background-size: calc(5 * var(--u)) auto;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: calc(30 * var(--u));
  left: calc(24 * var(--u));
  width: calc(5 * var(--u));
  height: 100%;
}
@media screen and (min-width: 48rem) {
  .s-flow__item::before {
    background-size: calc(7 * var(--u)) auto;
    width: calc(7 * var(--u));
    top: calc(95 * var(--u));
    left: calc(44 * var(--u));
  }
}

.s-flow__item:last-of-type::before {
  display: none;
}

.s-flow__item:not(:first-of-type) {
  margin-top: calc(30* var(--u));
}
@media screen and (min-width: 48rem) {
  .s-flow__item:not(:first-of-type) {
    margin-top: calc(47 * var(--u));
  }
}

.s-flow__item-number {
  font-size: calc(18 * var(--u));
  line-height: 1;
  font-weight: 700;
  color: var(--white);
  background-color: var(--oragne);
  border-radius: 50%;
  width: calc(55 * var(--u));
  height: calc(55 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-inter);
  flex-shrink: 0;
}

@media screen and (min-width: 48rem) {
  .s-flow__item-number {
    font-size: calc(25 * var(--u));
    width: calc(96 * var(--u));
    height: calc(96 * var(--u));
  }
}

.s-flow__item-ttl {
  color: var(--oragne);
  font-weight: 700;
  font-size: calc(20* var(--u));
  line-height: 1.25;
}
@media screen and (min-width: 48rem) {
  .s-flow__item-ttl {
    font-size: calc(28 * var(--u));
  }
}

.s-flow__item-txt {
  margin-top: calc(8 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: calc(27/15);
  letter-spacing: 0.08em;
  font-weight: 500;
}
@media screen and (min-width: 48rem) {
  .s-flow__item-txt {
    font-size: calc(18 * var(--u));
    line-height: calc(30/18);
    margin-top: calc(12 * var(--u));
  }
}

/* ========================================
FAQ Section
======================================== */
.s-faq {
  padding-top: calc(80 * var(--u));
  padding-bottom: calc(80 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-faq {
    padding-top: calc(103 * var(--u));
    padding-bottom: calc(163 * var(--u));
  }
}

.s-faq__inner {
  max-width: calc(1130 * var(--u));
}

.s-faq__wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 calc(10 * var(--u));
  position: relative;
}
@media screen and (min-width: 48rem) {
  .s-faq__wrapper {
    display: flex;
    gap: calc(17 * var(--u));
  }
}

.s-faq__content {
 margin-top: calc(30 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-faq__content {
    margin-top: calc(120 * var(--u));
  }
}

.s-faq__item-wrapper {
  display: contents;
}
@media screen and (min-width: 48rem) {
  .s-faq__item-wrapper {
    display: block;
  }
}

.s-faq__wrapper:not(:first-of-type)::before {
    content: '';
    background-image: url(../img/top/line-sp.png);
    background-position: left;
    background-repeat: repeat-x;
    background-size: contain;
    display: block;
    width: 100%;
    height: 4px;
    position: absolute;
    top: 0;
    left: 0;
  }
  @media screen and (min-width: 48rem) {
    .s-faq__wrapper::before {
      background-image: url(../img/top/line-pc.png);
      height: calc(6 * var(--u));
      height: 7px;
    }
  }

.s-faq__wrapper+.s-faq__wrapper {
  margin-top: calc(25 * var(--u));
  padding-top: calc(25 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-faq__wrapper+.s-faq__wrapper {
    margin-top: calc(30 * var(--u));
    padding-top: calc(30 * var(--u));
  }
}

.s-faq__item-q {
  width: calc(45 * var(--u));
  height: calc(45 * var(--u));
  line-height: 1;
  font-weight: 700;
  font-size: calc(20 * var(--u));
  background-image: url(../img/top/feature_num.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oragne);
  flex-shrink: 0;
  font-family: var(--font-inter);
  grid-column: 1 / 2;
  align-self: start;
}
@media screen and (min-width: 48rem) {
  .s-faq__item-q {
    width: calc(60 * var(--u));
    height: calc(60 * var(--u));
    font-size: calc(31 * var(--u));
    grid-column: auto;
  }
}

.s-faq__item-ttl {
  color: var(--oragne);
  font-weight: 700;
  font-size: calc(22 * var(--u));
  line-height: 1.25;
  letter-spacing: 0;
  grid-column: 2 / 3;
}
@media screen and (min-width: 48rem) {
  .s-faq__item-ttl {
    letter-spacing: 0.1em;
    line-height: 1;
    font-size: calc(28 * var(--u));
    margin-top: calc(20 * var(--u));
    grid-column: auto;
  }
}

.s-faq__A-wrapper {
  display: flex;
  flex-direction: column;
  grid-column: 1 / 3;
  margin-left: 0.5em;
}
@media screen and (min-width: 48rem) {
  .s-faq__A-wrapper {
    grid-column: auto;
    margin-left: 0;
  }
}

.s-faq__item-Awrapper {
  display: flex;
  gap: calc(8 * var(--u));
  margin-top: calc(10 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-faq__item-Awrapper {
    align-items: center;
    gap: calc(10 * var(--u));
    margin-top: calc(20 * var(--u));
  }
}

.s-faq__item-a {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  line-height: 1;
  font-weight: 700;
  font-size: calc(12 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background-color: var(--black);
  border-radius: 50%;
  flex-shrink: 0;
  font-family: var(--font-inter);
}
@media screen and (min-width: 48rem) {
  .s-faq__item-a {
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    font-size: max(calc(14 * var(--u)), 12px);
  }
}

.s-faq__item-top-txt {
  font-size: calc(18 * var(--u));
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0;
}
@media screen and (min-width: 48rem) {
  .s-faq__item-top-txt {
    font-size: calc(22 * var(--u));
    line-height: calc(30/22);
    letter-spacing: 0.08em;
  }
}

.s-faq__item-txt {
  max-width: calc(770 * var(--u));
  width: 100%;
  margin-top: calc(8 * var(--u));
  letter-spacing: 0.08em;
  font-size: calc(14 * var(--u));
  line-height: calc(24/14);
}
@media screen and (min-width: 48rem) {
  .s-faq__item-txt {
    font-size: calc(16 * var(--u));
    line-height: calc(27/16);
  }
}

@media screen and (min-width: 48rem) {
  .s-faq__item-list li {
    display: flex;
  }
}


.s-result {
  overflow: hidden;
  padding: calc(35 * var(--u)) 0 calc(35 * var(--u));
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.s-result ul {
  display: flex;
  gap: 0;
  width: calc(5000 * var(--u));

}
.s-result ul:nth-child(2) {
  margin-left: 26dvw;

}

.s-result ul li {
  animation: itemslider-desktop 25s linear infinite;
  max-width: calc(220 * var(--u));
  max-height: calc(95 * var(--u));
}

@keyframes itemslider-desktop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-300dvw); }
}

/* Mobile specific adjustments for SP */
@media screen and (max-width: 767px) {
  .s-result ul {
    width: 100%;
    animation: itemslider-mobile 25s linear infinite;
  }
  
  .s-result ul:nth-child(2) {
    margin-left: 0;
  }
  
  .s-result ul li {
    animation: none;
    flex-shrink: 0;
    min-width: calc(220 * var(--u));
  }
  
  @keyframes itemslider-mobile {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-220 * var(--u) * 6)); }
  }
}

@media screen and (min-width: 48rem) {
  .s-result {
    overflow: hidden;
    padding: calc(127 * var(--u)) 0 0;
  }

  .s-result ul {
    display: flex;
    gap: 20px;
    width: 354dvw;
    animation: itemslider-desktop 25s linear infinite;
  }
  .s-result ul:nth-child(2) {
    margin-left: 8dvw;
  }

  .s-result ul li {
    animation: none;
    max-height: unset;
    max-width: unset;
  }

  @keyframes itemslider-desktop {
    0% { transform: translateX(0); }
    100% { transform: translateX(-118dvw); }
  }

}

.s-result ul li img {
  width: 120%;
}
@media screen and (min-width: 48rem) {
  .s-result ul li img {
    width: 100%;
  }
}

.s-contact {
  padding: calc(80 * var(--u)) 0;
  background-color: var(--oragne);
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 48rem) {
  .s-contact {
    padding: calc(150 * var(--u)) 0;
  }
}

.s-contact::before {
  content: '';
  position: absolute;
  display: block;
  background-image: url(../img/top/bg_noise-sp.png);
  background-image: image-set(
    url(../img/top/bg_noise-sp.webp) type("image/webp"),
    url(../img/top/bg_noise-sp.png) type("image/png")
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
@media screen and (min-width: 48rem) {
  .s-contact::before {
    background-image: url(../img/top/bg_noise.png);
    background-image: image-set(
      url(../img/top/bg_noise.webp) type("image/webp"),
      url(../img/top/bg_noise.png) type("image/png")
    );
  }
}

.s-contact__inner {
  padding: 0 calc(15 * var(--u));
  margin: 0 auto;
}
@media screen and (min-width: 48rem) {
  .s-contact__inner {
    max-width: calc(1130 * var(--u));
    padding: 0 calc(25 * var(--u));

  }
}

.s-contact  .sec-ttl {
  margin: calc(40 * var(--u)) auto;
}
.s-contact .sec-ttl::after {
 font-size: calc(75 * var(--u));
}
@media screen and (min-width: 48rem) {

  .s-contact  .sec-ttl::after {
    font-size: calc(126 * var(--u));
  }
}

.contact-form .contact-form__content{
  background-color: var(--bg-contact);
}

.s-contact .p-txt {
  text-align: center;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: calc(24 /16);
  letter-spacing: 0.08em;
  margin-top: calc(14 * var(--u));
  margin: calc(30 * var(--u)) 0;
}
@media screen and (min-width: 48rem) {
  .s-contact .p-txt {
    font-size: calc(18 * var(--u));
    line-height: calc(30 /18);
    margin: calc(55 * var(--u)) 0;
  }
}

.s-contact__top {
  position: absolute;
  bottom: calc(20 * var(--u));
  right: calc(20 * var(--u));
  display: block;
  z-index: 100;
}
.s-contact__top img {
  width: calc(100 * var(--u));
}
@media screen and (min-width: 48rem) {
  .s-contact__top {
    bottom: calc(60 * var(--u));
    right: 2.5%;
  }
  .s-contact__top img {
    width: calc(133 * var(--u));
  }
}
@media screen and (min-width: 87.5rem) {
  .s-contact__top {
    right: 5%;
  }
}
@media screen and (min-width: 105rem) {
  .s-contact__top {
    right: calc((100vw - 1680px) / 2 + 80px);
  }
}

.s-contact .contact-form {
  margin-top: 0;
  max-width: calc(1090 * var(--u));
}