@charset "UTF-8";
@font-face {
  font-family: 'Kizuna FV Title';
  src: url('fonts/fv-title.woff2') format('woff2');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Kizuna FV Price';
  src: url('fonts/fv-price.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.hero {
  overflow: hidden;
  background: #f9f5ee url('images/hero-background.webp') center/cover no-repeat;
}
.hero-content {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: min(1000px, calc(100% - 48px));
  aspect-ratio: 1000 / 648;
  margin-inline: auto;
  color: #1e2767;
  line-height: 1.4;
}
.fv-background {
  position: absolute;
  z-index: -1;
  left: 1.5%;
  top: 4.0123%;
  width: 97.2%;
  height: 89.6605%;
  background: rgba(255, 255, 255, 0.96);
  filter: blur(2.16cqw);
}
.fv-worker {
  position: absolute;
  left: 42.9%;
  top: 9.2593%;
  width: 40.9%;
}
.fv-soft-light {
  display: none;
}
.fv-tagline {
  position: absolute;
  left: 36.5%;
  top: 4.4753%;
  width: 24.8416%;
  height: 14.86%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1923cqw;
  font-weight: 700;
  white-space: nowrap;
}
.fv-tagline p {
  transform: rotate(8.3deg);
}
.fv-underline {
  position: absolute;
  left: 36.9134%;
  top: 12.6435%;
  width: 23.6%;
}
.fv-title {
  position: absolute;
  left: 1.5%;
  top: 2.1605%;
  width: 44.7924%;
  height: 29.352%;
  font-family: 'Kizuna FV Title', 'Noto Sans JP', sans-serif;
  font-weight: 900;
  color: #000;
  transform-origin: 45% 55%;
}
.fv-title span,
.fv-title strong {
  position: absolute;
  white-space: nowrap;
  font-weight: 900;
}
.fv-title span {
  left: 0;
  top: 0;
  font-size: 7.1475cqw;
  letter-spacing: -0.09em;
}
.fv-title strong {
  left: 26.1035%;
  top: 39.0118%;
  font-size: 8.2642cqw;
  color: #fc1201;
}
.fv-claim {
  position: absolute;
  left: 1.5%;
  top: 30.0926%;
  width: 44.9%;
  height: 14.736%;
  font-size: 3.6591cqw;
  font-weight: 900;
  transform-origin: 25% 50%;
}
.fv-claim > span {
  display: block;
  color: #000;
  letter-spacing: -0.1235em;
  white-space: nowrap;
}
.fv-claim > strong {
  position: absolute;
  left: 0;
  top: 46.59%;
  color: #fc1201;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.fv-mobile-break {
  display: none;
}
.fv-promise {
  position: absolute;
  left: 77%;
  top: 5.2469%;
  width: 17.1914%;
  height: 22.6989%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:
    'Tsukushi A Round Gothic', '筑紫A丸ゴシック', 'Hiragino Maru Gothic ProN', 'Noto Sans JP',
    sans-serif;
  font-size: 1.9236cqw;
  font-weight: 700;
  line-height: 1.22;
  text-align: center;
  color: #001a56;
  white-space: nowrap;
}
.fv-promise p {
  transform: rotate(-11deg) skewX(-8deg) scaleY(0.99);
}
.fv-certificate {
  position: absolute;
  left: 81.5%;
  top: 25.463%;
  width: 17.7%;
  aspect-ratio: 177 / 156;
}
.fv-certificate picture {
  position: absolute;
  left: 6.2147%;
  top: 0;
  width: 88.1356%;
}
.fv-certificate > img {
  position: absolute;
  left: 0;
  top: 10.2564%;
  width: 100%;
}
.fv-price {
  position: absolute;
  left: 0.3%;
  top: 45.3704%;
  width: 50.4%;
  aspect-ratio: 504 / 90;
  container-type: inline-size;
}
.fv-price-frame {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}
.fv-price-frame img {
  position: absolute;
  max-width: none;
  height: 100.18%;
  top: -0.09%;
}
.fv-price-frame-start {
  left: 0;
  width: 91.0714%;
}
.fv-price-frame-start img {
  left: 0;
  width: 124.4%;
}
.fv-price-frame-end {
  left: 88.4921%;
  width: 11.5079%;
}
.fv-price-frame-end img {
  left: -884.48%;
  width: 984.48%;
}
.fv-price-label {
  position: absolute;
  left: 4.9603%;
  top: 20%;
  width: 39.6825%;
  height: 61.1111%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.3889cqw;
  background: #044425;
  color: #fff;
  font-size: 6.0347cqw;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.fv-price-value {
  position: absolute;
  left: 46.627%;
  top: 14.4444%;
  width: 50.1984%;
  height: 71.1111%;
  font-family: 'Kizuna FV Price', 'Noto Sans JP', sans-serif;
  color: #fb1303;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.fv-price-digits {
  font-size: 12.6653cqw;
  line-height: 1;
}
.fv-price-digits > span {
  font-size: 6.4835cqw;
}
.fv-price-value small {
  position: absolute;
  left: 71.5415%;
  top: 9.375%;
  font-size: 2.35cqw;
  line-height: 1.4;
}
.fv-price-currency {
  position: absolute;
  left: 71.1462%;
  top: 20.3125%;
  font-size: 7.2575cqw;
  line-height: 1.4;
}
.fv-services,
.fv-benefits {
  position: absolute;
  display: grid;
  padding: 0;
  margin: 0;
  list-style: none;
}
.fv-services {
  left: 0.7%;
  top: 60.4938%;
  width: 97.1%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7cqw;
}
.fv-services > li {
  aspect-ratio: 156 / 152;
  padding: 0.5cqw 0.5cqw 0;
  text-align: center;
  background: #fff;
  border-radius: 1cqw;
  box-shadow: 0 0 0.94cqw #0000002e;
}
.fv-services img {
  width: 100%;
  aspect-ratio: 146 / 69;
  object-fit: cover;
  border-radius: 0.7cqw;
}
.fv-services h2 {
  margin-top: 0.2cqw;
  font-size: 2.0308cqw;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.fv-services p {
  margin-top: 0.157cqw;
  font-size: 1.4cqw;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.fv-benefits {
  left: 0.7%;
  top: 86.2654%;
  width: 97.1%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4333cqw;
}
.fv-benefits > li {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 232 / 77;
  background: #fff;
  border-radius: 1cqw;
  box-shadow: 0 0 0.94cqw #0000002e;
}
.fv-benefits img {
  position: absolute;
  left: 3.0172%;
  top: 12.987%;
  width: 23.2759%;
}
.fv-benefits p,
.fv-benefits strong {
  position: absolute;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transform: skewX(-12deg) scaleY(0.98);
}
.fv-benefits p {
  left: 32.7543%;
  top: 7.7922%;
  font-size: 7.2405cqw;
}
.fv-benefits strong {
  left: 34.06%;
  top: 24.6753%;
  font-size: 16.3978cqw;
  color: #fc1201;
}
.fv-benefit-speed img {
  left: 16.8103%;
}
.fv-benefit-speed p {
  left: 44.3966%;
}
.fv-benefit-speed strong {
  left: 47.0978%;
  font-size: 18.1987cqw;
}
.fv-benefit-speed strong span {
  font-size: 13.7931cqw;
}
.fv-benefit-estimate img {
  left: 14.2241%;
}
.fv-benefit-estimate p {
  left: 43.1034%;
}
.fv-benefit-estimate strong {
  left: 44.0806%;
}
.fv-benefit-fees img {
  left: 2.5862%;
  width: 25%;
}
.fv-benefit-fees strong {
  left: 33.6291%;
}

/* The five stages share one timeline; each group has an independent transform. */
.fv-motion-ready .fv-pop,
.fv-motion-ready .fv-fade {
  opacity: 0;
}
.fv-playing .fv-pop {
  animation: fv-impact 0.72s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.fv-playing .fv-title {
  animation-delay: 0.2s;
}
.fv-playing .fv-claim {
  animation-delay: 1s;
}
.fv-playing .fv-fade {
  animation: fv-fade-in 0.5s ease-out both;
}
.fv-playing .fv-price {
  animation-delay: 1.8s;
}
.fv-playing .fv-services {
  animation-delay: 2.35s;
}
.fv-playing .fv-benefits {
  animation-delay: 2.9s;
}
@keyframes fv-impact {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  8% {
    opacity: 1;
  }
  24% {
    opacity: 1;
    transform: scale(1.18);
  }
  59% {
    opacity: 1;
    transform: scale(0.97);
  }
  80% {
    opacity: 1;
    transform: scale(1.025);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fv-fade-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 767px) {
  .hero {
    background: #fff;
  }
  .hero-content {
    width: 100%;
    aspect-ratio: 828 / 1596;
  }
  .fv-background {
    left: 0;
    top: 0.3133%;
    width: 100%;
    height: 42.3559%;
    background: url('images/fv-background_sp.webp') center/cover no-repeat;
    filter: none;
  }
  .fv-worker {
    left: 36.2319%;
    top: 6.7669%;
    width: 61.1111%;
  }
  .fv-soft-light {
    display: block;
    position: absolute;
    left: -1.4493%;
    top: 0.3133%;
    width: 55.7971%;
    height: 38.1579%;
    background: #fffffffa;
    filter: blur(2.6087cqw);
  }
  .fv-soft-light::after {
    content: '';
    position: absolute;
    top: 84.8933%;
    left: 0;
    width: 117.0996%;
    height: 15.1067%;
    background: #fffffffa;
  }
  .fv-tagline {
    left: 2.349%;
    top: 1.6065%;
    width: 40.3633%;
    height: 7.4363%;
    font-size: 3.5801cqw;
  }
  .fv-tagline p {
    transform: rotate(-6.54deg);
  }
  .fv-underline {
    left: 4.0713%;
    top: 5.7561%;
    width: 38.5389%;
    transform: rotate(-14.84deg);
  }
  .fv-title {
    left: 3.2609%;
    top: 9.1479%;
    width: 52.089%;
    height: 15.6512%;
    transform-origin: 30% 55%;
  }
  .fv-title span {
    left: 0.3007%;
    font-size: 11.1874cqw;
  }
  .fv-title strong {
    left: 0;
    top: 39.9502%;
    font-size: 12.9355cqw;
  }
  .fv-claim {
    left: 3.3816%;
    top: 24.7494%;
    width: 59.7826%;
    height: 12.8655%;
    font-size: 5.5168cqw;
  }
  .fv-claim > span {
    letter-spacing: -0.09em;
  }
  .fv-claim-first {
    letter-spacing: -0.13em;
  }
  .fv-mobile-break {
    display: block;
  }
  .fv-claim > strong {
    top: 62.0129%;
    font-size: 6.6949cqw;
  }
  .fv-promise {
    left: 77.2947%;
    top: 1.2531%;
    width: 20.7626%;
    height: 9.2161%;
    font-size: 2.3232cqw;
    text-shadow:
      0 0 0.5cqw #fff,
      0 0 0.5cqw #fff,
      0 0 0.5cqw #fff;
  }
  .fv-certificate {
    left: 72.6775%;
    top: 28.0075%;
    width: 24.6656%;
  }
  .fv-price {
    left: 3.9855%;
    top: 39.2857%;
    width: 91.8972%;
  }
  .fv-services {
    left: 3.744%;
    top: 48.6216%;
    width: 92.3372%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.341cqw;
    row-gap: 2.8736cqw;
  }
  .fv-services > li {
    padding: 0.9579cqw 0.9579cqw 0;
    border-radius: 1.9157cqw;
    box-shadow: 0 0 1.8007cqw #0000002e;
  }
  .fv-services img {
    border-radius: 1.341cqw;
  }
  .fv-services h2 {
    margin-top: 0.3831cqw;
    font-size: 3.8903cqw;
  }
  .fv-services p {
    margin-top: 0.2995cqw;
    font-size: 2.682cqw;
  }
  .fv-benefits {
    left: 2.6273%;
    top: 81.1404%;
    width: 93.386%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.7351cqw;
    row-gap: 3.1259cqw;
  }
  .fv-benefits > li {
    border-radius: 1.9536cqw;
    box-shadow: 0 0 1.8365cqw #0000002e;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .fv-pop,
  .hero .fv-fade {
    animation: none;
    opacity: 1;
    transform: none;
  }
}