@charset "UTF-8";
:root {
  --color-blue: #005ae0;
  --color-blue-light: #dce8fc;
  --color-pink: #e80074;
  --color-pink-light: #fce2ef;
  --color-orange: #e87a00;
  --color-orange-light: #fdebd6;
  --color-purple: #7a00e0;
  --color-text: #111111;
  --color-text-muted: #5a6178;
  --color-white: #ffffff;
  --color-bg: #ffffff;
  --color-bg-pale: #f5f8fe;
  --color-line: #e6e8ee;
  --color-glass: rgb(255 255 255 / 64%);
  --color-glass-pale: rgb(245 248 254 / 72%);
  --color-overlay: rgb(17 17 17 / 58%);
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-en: 'Outfit', 'Noto Sans JP', sans-serif;
  --letter-spacing-en: 0.01em;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

strong {
  font-weight: inherit;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 8.8rem;
}
@media (min-width: 1024px) and (max-width: 1439px) {
  html {
    font-size: 0.6944444444vw;
  }
}

html.is-menu-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ja);
  font-size: 1.6rem;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.l-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 7.2rem;
  padding-inline: 2rem;
  background-color: var(--color-white);
}
@media (min-width: 1024px) {
  .l-header {
    height: 8.8rem;
    padding-inline: 4.8rem;
  }
}

.l-header__logo {
  width: 12rem;
}
@media (min-width: 1024px) {
  .l-header__logo {
    width: 16rem;
  }
}
.l-header__logo img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.l-header__logo-link {
  display: block;
}

.l-header__menu-button {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.8rem;
  width: 5.6rem;
  aspect-ratio: 1;
}
@media (min-width: 1024px) {
  .l-header__menu-button {
    display: none;
  }
}

.l-header__menu-icon {
  position: relative;
  width: 2.4rem;
  height: 1rem;
}
.l-header__menu-icon::before, .l-header__menu-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background-color: var(--color-text);
  transition: transform 0.3s var(--ease-out);
}
.l-header__menu-icon::before {
  inset-block-start: 0;
}
.l-header__menu-icon::after {
  inset-block-end: 0;
}

.l-header__menu-button[aria-expanded=true] .l-header__menu-icon::before {
  transform: translateY(0.4rem) rotate(45deg);
}
.l-header__menu-button[aria-expanded=true] .l-header__menu-icon::after {
  transform: translateY(-0.4rem) rotate(-45deg);
}

.l-header__menu-text {
  font-family: var(--font-en);
  letter-spacing: var(--letter-spacing-en);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
}

.l-header__nav {
  position: fixed;
  inset: 7.2rem 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4rem 2rem;
  background-color: var(--color-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.8rem);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out), visibility 0.4s;
}
@media (min-width: 768px) {
  .l-header__nav {
    padding-inline: 4rem;
  }
}
@media (min-width: 1024px) {
  .l-header__nav {
    position: static;
    overflow-y: visible;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
}

.l-header__nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.l-header__nav-inner {
  max-width: 50rem;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .l-header__nav-inner {
    max-width: 68.8rem;
  }
}
@media (min-width: 1024px) {
  .l-header__nav-inner {
    display: flex;
    align-items: center;
    gap: 4rem;
    max-width: none;
  }
}

.l-header__nav-list {
  display: grid;
}
@media (min-width: 1024px) {
  .l-header__nav-list {
    display: flex;
    gap: 4rem;
  }
}

.l-header__nav-link {
  display: block;
  padding-block: 1.2rem;
  padding-inline-start: 1.2rem;
  border-block-end: 1px solid var(--color-line);
  font-size: 1.2rem;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .l-header__nav-link {
    padding-block: 0.4rem;
    border-block-end: none;
  }
}

@media (any-hover: hover) {
  .l-header__nav-link:hover .l-header__nav-en {
    color: var(--color-pink);
  }
}
.l-header__nav-en {
  position: relative;
  display: block;
  font-family: var(--font-en);
  letter-spacing: var(--letter-spacing-en);
  font-size: 2.2rem;
  font-weight: 500;
  transition: color 0.3s;
  line-height: 1.2;
}
.l-header__nav-en::before {
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 0.3rem);
  inset-inline-start: -1.2rem;
  width: 0.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color-pink);
}

.l-header__contact {
  margin-block-start: 3.2rem;
}
@media (min-width: 1024px) {
  .l-header__contact {
    margin-block-start: 0;
  }
}

.l-footer {
  padding-block-start: 6.4rem;
}
@media (min-width: 1024px) {
  .l-footer {
    padding-block-start: 8rem;
  }
}

.l-footer__top {
  display: grid;
  gap: 4.8rem;
}
@media (min-width: 1024px) {
  .l-footer__top {
    display: flex;
    justify-content: space-between;
  }
}

.l-footer__logo {
  display: block;
  width: 100%;
  max-width: 40rem;
}
.l-footer__logo img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.l-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.2rem;
}
@media (min-width: 1024px) {
  .l-footer__nav {
    display: flex;
    gap: 6.4rem;
  }
}

.l-footer__nav-list {
  display: grid;
  align-content: start;
  gap: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .l-footer__nav-list {
    font-size: 1.6rem;
  }
}

.l-footer__nav-link {
  text-underline-offset: 0.4rem;
}
@media (any-hover: hover) {
  .l-footer__nav-link:hover {
    text-decoration: underline;
  }
}

.l-footer__bottom {
  margin-block-start: 6.4rem;
  padding-block: 1.6rem;
  background-color: var(--color-text);
  color: var(--color-white);
}
@media (min-width: 1024px) {
  .l-footer__bottom {
    margin-block-start: 8rem;
    padding-block: 2.4rem;
  }
}

.l-footer__copyright {
  font-size: 1.2rem;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .l-footer__copyright {
    font-size: 1.4rem;
  }
}

.l-inner {
  max-width: 54rem;
  margin-inline: auto;
  padding-inline: 2rem;
}
@media (min-width: 768px) {
  .l-inner {
    max-width: 76.8rem;
    padding-inline: 4rem;
  }
}
@media (min-width: 1024px) {
  .l-inner {
    max-width: 128rem;
  }
}

.c-button {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 5.6rem;
  padding-block: 0.8rem;
  padding-inline: 2.4rem 1.6rem;
  border-radius: 100vmax;
  background-color: var(--button-color);
  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .c-button {
    gap: 2.4rem;
    min-height: 6.4rem;
    padding-inline-start: 3.2rem;
    font-size: 1.6rem;
  }
}
.c-button::after {
  content: "";
  flex-shrink: 0;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-white) var(--button-icon) center/1.6rem no-repeat;
  transition: transform 0.3s var(--ease-out);
}
@media (min-width: 1024px) {
  .c-button::after {
    width: 4.8rem;
    background-size: 2rem;
  }
}
@media (any-hover: hover) {
  .c-button:hover::after {
    transform: translateX(0.8rem);
  }
}

.c-button--pink {
  --button-color: var(--color-pink);
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e80074' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.c-button--blue {
  --button-color: var(--color-blue);
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005ae0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.c-button--orange {
  --button-color: var(--color-orange);
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e87a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

@media (min-width: 1024px) {
  .c-button--small {
    gap: 1.6rem;
    min-height: 5.6rem;
    padding-inline-start: 2.8rem;
    font-size: 1.4rem;
  }
}
@media (min-width: 1024px) {
  .c-button--small::after {
    width: 4rem;
    background-size: 1.6rem;
  }
}

.c-section-title__ja {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .c-section-title__ja {
    font-size: 1.6rem;
  }
}
.c-section-title__ja::before {
  content: "";
  width: 0.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color-pink);
}

.c-section-title__en {
  margin-block-start: 0.8rem;
  font-family: var(--font-en);
  font-size: 5.6rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--letter-spacing-en);
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .c-section-title__en {
    font-size: 9.6rem;
  }
}
.c-section-title__en::first-letter {
  color: var(--color-pink);
}
.c-section-title__en::after {
  content: ".";
  color: var(--color-pink);
}

.c-section-title__en--large {
  font-size: 6.5rem;
  color: var(--color-pink);
}
@media (min-width: 1024px) {
  .c-section-title__en--large {
    font-size: 12rem;
  }
}

.c-section-title__en--plain::first-letter {
  color: inherit;
}

.c-section-title--white {
  color: var(--color-white);
}

.c-section-lead {
  margin-block-start: 3.2rem;
  font-size: 1.6rem;
  line-height: 2;
}
@media (min-width: 1024px) {
  .c-section-lead {
    margin-block-start: 4rem;
    font-size: 1.8rem;
  }
}

.c-breadcrumb {
  border-block-end: 1px solid var(--color-line);
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding-block: 1.2rem;
  font-size: 1.2rem;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .c-breadcrumb__list {
    padding-block: 1.6rem;
    font-size: 1.4rem;
  }
}

.c-breadcrumb__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 0.6rem;
  aspect-ratio: 1;
  margin-inline-start: 0.8rem;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: translateY(-0.2rem) rotate(45deg);
}

.c-breadcrumb__link {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.c-price {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}

.c-price__num {
  font-family: var(--font-en);
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-en);
}
@media (min-width: 1024px) {
  .c-price__num {
    font-size: 4.8rem;
  }
}

.c-price__tax {
  margin-inline-start: 0.4rem;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  font-weight: 400;
}

.c-pagination {
  margin-block-start: 4.8rem;
}
.c-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}
.c-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 4.8rem;
  height: 4.8rem;
  padding-inline: 1.6rem;
  border: 2px solid var(--color-blue);
  border-radius: 100vmax;
  color: var(--color-blue);
  font-family: var(--font-en);
  font-weight: 600;
}
.c-pagination .page-numbers.current {
  background-color: var(--color-blue);
  color: var(--color-white);
}
.c-pagination .page-numbers.dots {
  border-color: transparent;
}

.p-page-header {
  position: relative;
  overflow: hidden;
  padding-block: 6.4rem 7.2rem;
  background-color: var(--color-bg-pale);
}
@media (min-width: 1024px) {
  .p-page-header {
    padding-block: 12rem 12.8rem;
  }
}
.p-page-header::before, .p-page-header::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-style: solid;
  border-radius: 50%;
}
.p-page-header::before {
  inset-block-start: -8rem;
  inset-inline-end: -4.8rem;
  width: 19.2rem;
  border-width: 2.8rem;
  border-color: var(--color-pink);
}
@media (min-width: 768px) {
  .p-page-header::before {
    inset-block-start: -12rem;
    inset-inline-end: 4rem;
    width: 32rem;
    border-width: 4.8rem;
  }
}
@media (min-width: 1024px) {
  .p-page-header::before {
    inset-block-start: -20rem;
    inset-inline-end: 8rem;
    width: 48rem;
    border-width: 6.4rem;
  }
}
.p-page-header::after {
  inset-block-start: 4rem;
  inset-inline-end: -8rem;
  width: 17.2rem;
  border-width: 2.8rem;
  border-color: var(--color-blue);
}
@media (min-width: 768px) {
  .p-page-header::after {
    inset-block-start: 4rem;
    inset-inline-end: -8rem;
    width: 28.8rem;
    border-width: 4.8rem;
  }
}
@media (min-width: 1024px) {
  .p-page-header::after {
    inset-block-start: 8rem;
    inset-inline-end: -16rem;
    width: 43.2rem;
    border-width: 6.4rem;
  }
}

.p-page-header__title {
  position: relative;
  z-index: 1;
}

.p-page-header__title > * {
  animation: page-header-in 0.9s var(--ease-out) both;
}

.p-page-header__title > :nth-child(2) {
  animation-delay: 0.15s;
}

@keyframes page-header-in {
  from {
    opacity: 0;
    transform: translateY(2.4rem);
  }
}
.p-page-links {
  padding-block: 4.8rem 8rem;
}
@media (min-width: 1024px) {
  .p-page-links {
    padding-block: 5.6rem 12rem;
  }
}

.p-page-links__lead {
  font-size: 1.6rem;
  line-height: 2;
}
@media (min-width: 1024px) {
  .p-page-links__lead {
    font-size: 1.8rem;
  }
}

.p-page-links__list {
  display: grid;
  gap: 1.6rem;
  margin-block-start: 3.2rem;
}
@media (min-width: 1024px) {
  .p-page-links__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    margin-block-start: 4rem;
  }
}

.p-page-links__link {
  display: grid;
  grid-template-areas: "num arrow" "text arrow";
  grid-template-columns: 1fr auto;
  align-items: center;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
  padding: 1.6rem 1.6rem 1.6rem 2.4rem;
  border: 4px solid var(--link-color);
  border-radius: 2rem;
  background-color: var(--color-white);
}
@media (min-width: 1024px) {
  .p-page-links__link {
    -moz-column-gap: 2.4rem;
         column-gap: 2.4rem;
    padding: 2.4rem 2.4rem 2.4rem 3.2rem;
  }
}
.p-page-links__link::before {
  content: attr(data-num);
  grid-area: num;
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-en);
  color: var(--link-color);
}
@media (min-width: 1024px) {
  .p-page-links__link::before {
    font-size: 3.2rem;
    line-height: 1.2;
  }
}
.p-page-links__link::after {
  content: "";
  grid-area: arrow;
  width: 3.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--link-light) var(--link-icon) center/1.6rem no-repeat;
  transition: transform 0.3s var(--ease-out);
}
@media (min-width: 1024px) {
  .p-page-links__link::after {
    width: 4.8rem;
    background-size: 2rem;
  }
}
@media (any-hover: hover) {
  .p-page-links__link:hover::after {
    transform: translateY(0.8rem);
  }
}

.p-page-links__link--make {
  --link-color: var(--color-pink);
  --link-light: var(--color-pink-light);
  --link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e80074' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
}

.p-page-links__link--support {
  --link-color: var(--color-blue);
  --link-light: var(--color-blue-light);
  --link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005ae0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
}

.p-page-links__link--tools {
  --link-color: var(--color-orange);
  --link-light: var(--color-orange-light);
  --link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e87a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
}

.p-page-links__text {
  grid-area: text;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-page-links__text {
    margin-block-start: 0.4rem;
    font-size: 1.8rem;
  }
}

.p-banner-links {
  padding-block: 8rem;
}
@media (min-width: 1024px) {
  .p-banner-links {
    padding-block: 12rem;
  }
}

.p-banner-links__list {
  display: grid;
  gap: 1.6rem;
}
@media (min-width: 1024px) {
  .p-banner-links__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
  }
}

.p-banner-links__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 2.4rem;
  border: 4px solid var(--color-blue);
  border-radius: 2rem;
  background-color: var(--color-white);
}
@media (min-width: 1024px) {
  .p-banner-links__link {
    padding: 4rem 3.2rem 4rem 4rem;
  }
}
.p-banner-links__link::after {
  content: "";
  flex-shrink: 0;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-blue-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005ae0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/1.6rem no-repeat;
  transition: transform 0.3s var(--ease-out);
}
@media (min-width: 1024px) {
  .p-banner-links__link::after {
    width: 4.8rem;
    background-size: 2rem;
  }
}
@media (any-hover: hover) {
  .p-banner-links__link:hover::after {
    transform: translateX(0.8rem);
  }
}

.p-banner-links__en {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-en);
  color: var(--color-blue);
}

.p-banner-links__title {
  display: block;
  margin-block-start: 0.4rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-banner-links__title {
    font-size: 3.2rem;
    line-height: 1.5;
  }
}

.p-cta {
  padding-block: 6.4rem;
  background-color: var(--color-blue);
}
@media (min-width: 1024px) {
  .p-cta {
    padding-block: 8rem;
  }
}

.p-cta__card {
  padding: 4.8rem 2.4rem;
  border-radius: 2.4rem;
  background-color: var(--color-white);
}
@media (min-width: 1024px) {
  .p-cta__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7.2rem 6.4rem;
    border-radius: 4rem;
  }
}

@media (min-width: 1024px) {
  .p-cta__heading {
    width: 52%;
  }
}

.p-cta__en {
  font-family: var(--font-en);
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--letter-spacing-en);
}
@media (min-width: 1024px) {
  .p-cta__en {
    font-size: 8rem;
    white-space: nowrap;
  }
}
.p-cta__en::first-letter {
  color: var(--color-pink);
}
.p-cta__en::after {
  content: ".";
  color: var(--color-pink);
}

.p-cta__title {
  margin-block-start: 2.4rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media (min-width: 1024px) {
  .p-cta__title {
    margin-block-start: 3.2rem;
    font-size: 3.2rem;
  }
}

.p-cta__body {
  margin-block-start: 3.2rem;
}
@media (min-width: 1024px) {
  .p-cta__body {
    width: 42%;
    margin-block-start: 0;
  }
}

.p-cta__text {
  font-size: 1.6rem;
  line-height: 2;
}

.p-cta__button {
  margin-block-start: 3.2rem;
}
@media (min-width: 1024px) {
  .p-cta__button {
    margin-block-start: 4rem;
  }
}

.p-faq {
  padding-block: 8rem;
  background-color: var(--color-glass);
}
@media (min-width: 1024px) {
  .p-faq {
    padding-block: 11.2rem 12rem;
  }
}

@media (min-width: 1024px) {
  .p-faq__contents {
    display: grid;
    grid-template-areas: "head list" "button list";
    grid-template-columns: 34% 60%;
    grid-template-rows: auto 1fr;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .p-faq__head {
    grid-area: head;
  }
}

.p-faq__list {
  margin-block-start: 4.8rem;
  border-block-start: 1px solid var(--color-line);
}
@media (min-width: 1024px) {
  .p-faq__list {
    grid-area: list;
    margin-block-start: 0;
  }
}

.p-faq__button {
  margin-block-start: 4rem;
}
@media (min-width: 1024px) {
  .p-faq__button {
    grid-area: button;
    align-self: start;
    justify-self: start;
  }
}

.p-faq__item {
  padding-block: 2.4rem;
  border-block-end: 1px solid var(--color-line);
}
@media (min-width: 1024px) {
  .p-faq__item {
    padding-block: 3.2rem;
  }
}

.p-faq__question,
.p-faq__answer {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
}
@media (min-width: 1024px) {
  .p-faq__question,
  .p-faq__answer {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
}
.p-faq__question::before,
.p-faq__answer::before {
  font-family: var(--font-en);
  letter-spacing: var(--letter-spacing-en);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
}

.p-faq__question {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.7;
}
@media (min-width: 1024px) {
  .p-faq__question {
    font-size: 1.8rem;
  }
}
.p-faq__question::before {
  content: "Q";
  content: "Q"/"質問";
  color: var(--color-pink);
}

.p-faq__answer {
  margin-block-start: 1.6rem;
  font-size: 1.6rem;
  line-height: 2;
}
.p-faq__answer::before {
  content: "A";
  content: "A"/"回答";
  color: var(--color-blue);
}

.p-entry {
  padding-block: 6.4rem 8rem;
}
@media (min-width: 1024px) {
  .p-entry {
    padding-block: 8rem 12rem;
  }
}

.p-entry__date {
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-en);
  font-size: 1.4rem;
  letter-spacing: var(--letter-spacing-en);
}

.p-entry__content {
  max-width: 80rem;
  margin-inline: auto;
}
.p-entry__content > * + * {
  margin-block-start: 2.4rem;
}
.p-entry__content h2 {
  margin-block-start: 6.4rem;
  padding-block-end: 0.8rem;
  border-block-end: 2px solid var(--color-line);
  font-size: 2.4rem;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-entry__content h2 {
    font-size: 2.8rem;
  }
}
.p-entry__content h3 {
  margin-block-start: 4.8rem;
  font-size: 2rem;
  line-height: 1.6;
}
.p-entry__content ul {
  padding-inline-start: 2.4rem;
  list-style: disc;
}
.p-entry__content ol {
  padding-inline-start: 2.4rem;
  list-style: decimal;
}
.p-entry__content a {
  color: var(--color-blue);
  text-decoration: underline;
}
.p-entry__content img {
  height: auto;
}

.p-post-list {
  padding-block: 6.4rem 8rem;
}
@media (min-width: 1024px) {
  .p-post-list {
    padding-block: 8rem 12rem;
  }
}

.p-post-list__list {
  border-block-start: 1px solid var(--color-line);
}

.p-post-list__item {
  border-block-end: 1px solid var(--color-line);
}

.p-post-list__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.6rem;
  padding-block: 2.4rem;
}
@media (any-hover: hover) {
  .p-post-list__link:hover .p-post-list__title {
    text-decoration: underline;
  }
}

.p-post-list__date {
  font-family: var(--font-en);
  font-size: 1.4rem;
  letter-spacing: var(--letter-spacing-en);
}

.p-post-list__category {
  padding: 0 1.2rem;
  border-radius: 100vmax;
  background-color: var(--color-pink-light);
  font-size: 1.2rem;
}

.p-post-list__title {
  width: 100%;
  font-weight: 500;
}

.p-works-list {
  display: grid;
  gap: 3.2rem;
  margin-block-start: 4.8rem;
}
@media (min-width: 768px) {
  .p-works-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .p-works-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem 3.2rem;
    margin-block-start: 8rem;
  }
}

.p-works-list__card {
  display: block;
  height: 100%;
  padding: 1.6rem 1.6rem 3.2rem;
  border: 4px solid var(--color-blue);
  border-radius: 2rem;
  background-color: var(--color-white);
}

.p-works-list__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 760/440;
  border-radius: 1.2rem;
}
.p-works-list__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.p-works-list__thumb::before {
  content: "詳しく見る";
  content: "詳しく見る"/"";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding-inline-end: 6.4rem;
  background-color: var(--color-overlay);
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.p-works-list__thumb::after {
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 2.4rem);
  inset-inline-start: calc(50% + 2.4rem);
  z-index: 3;
  width: 4.8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e80074' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/2rem no-repeat;
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
}

@media (any-hover: hover) {
  .p-works-list__card:hover .p-works-list__thumb img {
    transform: scale(1.2);
  }
  .p-works-list__card:hover .p-works-list__thumb::before,
  .p-works-list__card:hover .p-works-list__thumb::after {
    opacity: 1;
  }
  .p-works-list__card:hover .p-works-list__thumb::after {
    transform: none;
  }
}
.p-works-list__status {
  position: absolute;
  inset-block-end: 1.2rem;
  inset-inline-start: 1.2rem;
  z-index: 1;
  padding: 0.4rem 1.2rem;
  border-radius: 100vmax;
  background-color: var(--color-white);
  font-family: var(--font-en);
  letter-spacing: var(--letter-spacing-en);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6;
}

.p-works-list__category {
  display: inline-block;
  margin-block-start: 2.4rem;
  margin-inline: 0.8rem;
  padding: 0.4rem 1.6rem;
  border: 2px solid var(--color-blue);
  border-radius: 100vmax;
  color: var(--color-blue);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-works-list__title {
  margin-block-start: 1.6rem;
  margin-inline: 0.8rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-works-list__meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-block-start: 1.6rem;
  margin-inline: 0.8rem;
  font-size: 1.4rem;
}

.p-works-list__meta-term {
  padding: 0.2rem 1.2rem;
  border-radius: 100vmax;
  background-color: var(--color-text);
  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-works-list__meta-desc {
  font-weight: 500;
}

.p-works-list__note {
  margin-block-start: 6.4rem;
  font-size: 1.4rem;
  text-align: center;
  color: var(--color-text-muted);
}

.p-works-archive {
  padding-block: 6.4rem 8rem;
}
@media (min-width: 1024px) {
  .p-works-archive {
    padding-block: 8rem 12rem;
  }
}

.p-rings {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.p-rings__deco {
  position: sticky;
  inset-block-start: 0;
  z-index: -1;
  height: 100lvh;
  margin-block-end: -100lvh;
  overflow: hidden;
  filter: blur(2.4rem);
  pointer-events: none;
}
.p-rings__deco.p-rings--faq::before, .p-rings__deco.p-rings--faq::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-style: solid;
  border-radius: 50%;
}
.p-rings__deco.p-rings--faq::before {
  inset-block-end: -35rem;
  inset-inline-start: -35rem;
  width: 75rem;
  border-width: 8.2rem;
  border-color: var(--color-pink);
  z-index: 1;
}
@media (min-width: 1024px) {
  .p-rings__deco.p-rings--faq::before {
    inset-block-start: -21rem;
    inset-inline-end: auto;
    inset-inline-start: -15rem;
    width: 72rem;
    border-width: 9.4rem;
  }
}
.p-rings__deco.p-rings--faq::after {
  inset-block-start: -21rem;
  inset-inline-end: -18rem;
  width: 38.6rem;
  border-width: 4.2rem;
  border-color: var(--color-blue);
  z-index: 0;
}
@media (min-width: 768px) {
  .p-rings__deco.p-rings--faq::after {
    inset-block-start: -15rem;
    inset-inline-end: -10rem;
  }
}
@media (min-width: 1024px) {
  .p-rings__deco.p-rings--faq::after {
    inset-block-start: 27rem;
    inset-inline-end: auto;
    inset-inline-start: -24rem;
    width: 50.4rem;
    border-width: 8.4rem;
  }
}

.p-top-rings__deco--left {
  transform: scaleX(-1);
}

.p-top-fv {
  position: sticky;
  inset-block-start: var(--fv-sticky-top, auto);
  overflow: hidden;
  padding-block: 4.8rem 11.2rem;
  background-color: var(--color-bg);
}
@media (min-width: 1024px) {
  .p-top-fv {
    padding-block: 9.6rem 16rem;
  }
}
.p-top-fv::before, .p-top-fv::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-style: solid;
  border-radius: 50%;
}
.p-top-fv::before {
  inset-block-start: -7rem;
  inset-inline-end: -7rem;
  width: 28rem;
  border-width: 4rem;
  border-color: var(--color-pink);
}
@media (min-width: 768px) {
  .p-top-fv::before {
    inset-block-start: -14.4rem;
    inset-inline-end: -9.2rem;
    width: 43.2rem;
    border-width: 5.6rem;
  }
}
@media (min-width: 1024px) {
  .p-top-fv::before {
    inset-block-start: -21rem;
    inset-inline-end: -9rem;
    width: 56rem;
    border-width: 7.4rem;
  }
}
.p-top-fv::after {
  inset-block-start: 8rem;
  inset-inline-end: -8rem;
  width: 24rem;
  border-width: 4rem;
  border-color: var(--color-blue);
}
@media (min-width: 768px) {
  .p-top-fv::after {
    inset-block-start: 11.4rem;
    inset-inline-end: -14.4rem;
    width: 38.8rem;
    border-width: 5.6rem;
  }
}
@media (min-width: 1024px) {
  .p-top-fv::after {
    inset-block-start: 11rem;
    inset-inline-end: -18rem;
    width: 50.4rem;
    border-width: 7.4rem;
  }
}

.p-top-fv__contents {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column-reverse;
  gap: 4rem;
}
@media (min-width: 1024px) {
  .p-top-fv__contents {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .p-top-fv__body {
    width: 52%;
  }
}

.p-top-fv__title {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .p-top-fv__title {
    font-size: 4.2rem;
  }
}
@media (min-width: 1024px) {
  .p-top-fv__title {
    font-size: 6.4rem;
    white-space: nowrap;
  }
}

.p-top-fv__title--small {
  font-size: 2rem;
}
@media (min-width: 768px) {
  .p-top-fv__title--small {
    font-size: 3.2rem;
  }
}
@media (min-width: 1024px) {
  .p-top-fv__title--small {
    font-size: 4rem;
  }
}

.p-top-fv__title-accent {
  color: var(--color-pink);
}

.p-top-fv__lead {
  margin-block-start: 2.4rem;
  font-size: 1.6rem;
  line-height: 2;
}
@media (min-width: 768px) {
  .p-top-fv__lead {
    font-size: 1.8rem;
  }
}
@media (min-width: 1024px) {
  .p-top-fv__lead {
    margin-block-start: 3.2rem;
  }
}

.p-top-fv__lead-marker {
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--color-blue-light) 62%);
}

.p-top-fv__button {
  margin-block-start: 3.2rem;
}
@media (min-width: 1024px) {
  .p-top-fv__button {
    margin-block-start: 4.8rem;
  }
}

.p-top-fv__slider {
  position: relative;
  align-self: center;
  width: min(100%, 50rem);
  aspect-ratio: 1536/1024;
}
@media (min-width: 1024px) {
  .p-top-fv__slider {
    width: 55%;
    margin-inline-end: -6vw;
  }
}

.p-top-fv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.p-top-fv__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1.08);
  transition: transform 6s linear;
}

.p-top-fv__slide.is-active {
  opacity: 1;
}
.p-top-fv__slide.is-active img {
  transform: scale(1);
}

.p-top-fv__scroll {
  display: none;
}
@media (min-width: 1024px) {
  .p-top-fv__scroll {
    position: absolute;
    inset-block-end: 4rem;
    inset-inline-start: 4.8rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    font-family: var(--font-en);
    letter-spacing: var(--letter-spacing-en);
    font-size: 1.2rem;
    writing-mode: vertical-rl;
    color: var(--color-text);
  }
}
.p-top-fv__scroll::after {
  content: "";
  width: 1px;
  height: 8rem;
  background: linear-gradient(var(--color-blue) 50%, var(--color-line) 50%) 0 0/100% 200%;
  animation: fv-scroll 2s ease-in-out infinite;
}

@keyframes fv-scroll {
  from {
    background-position: 0 100%;
  }
  to {
    background-position: 0 -100%;
  }
}
.p-top-loop {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 0;
  overflow-x: clip;
  pointer-events: none;
}

.p-top-loop__track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: loop-text 45s linear infinite;
}

.p-top-loop__text {
  padding-inline-end: 5rem;
  font-family: var(--font-en);
  letter-spacing: var(--letter-spacing-en);
  font-size: 10.6rem;
  font-weight: 300;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-blue-light);
  mix-blend-mode: overlay;
}
@media (min-width: 1024px) {
  .p-top-loop__text {
    padding-inline-end: 10rem;
    font-size: 20.8rem;
  }
}

@keyframes loop-text {
  to {
    transform: translateX(-50%);
  }
}
.p-top-why {
  position: relative;
  z-index: 1;
  padding-block: 10.2rem 8rem;
  background-color: var(--color-blue);
  color: var(--color-white);
}
@media (min-width: 1024px) {
  .p-top-why {
    padding-block: 19rem 9.6rem;
  }
}

@media (min-width: 1024px) {
  .p-top-why__contents {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .p-top-why__body {
    width: 40%;
    margin-block-start: 5rem;
  }
}

.p-top-why__text {
  margin-block-start: 2.4rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
}
@media (min-width: 1024px) {
  .p-top-why__text {
    margin-block-start: 3.2rem;
    font-size: 1.8rem;
  }
}

.p-top-why__circles {
  margin-block-start: 4.8rem;
}
@media (min-width: 768px) {
  .p-top-why__circles {
    position: relative;
    aspect-ratio: 1;
    margin-block-start: 7.8rem;
  }
}
@media (min-width: 1024px) {
  .p-top-why__circles {
    width: 56%;
    margin-block-start: 0;
  }
}
@media (min-width: 768px) {
  .p-top-why__circles::before {
    content: "";
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
  }
}

.p-top-why__list {
  display: grid;
  gap: 1.6rem;
}
@media (min-width: 768px) {
  .p-top-why__list {
    display: block;
  }
}

.p-top-why__item {
  --q-color: var(--color-pink);
  --x: 0%;
  --y: -32%;
  display: grid;
  justify-items: center;
  align-content: center;
  justify-self: center;
  width: min(100%, 32rem);
  aspect-ratio: 1;
  padding: 3.2rem;
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: 0 2rem 4rem rgba(0, 30, 90, 0.18);
  color: var(--color-text);
  text-align: center;
}
@media (min-width: 768px) {
  .p-top-why__item {
    position: absolute;
    inset-block-start: calc(50% + var(--y));
    inset-inline-start: calc(50% + var(--x));
    width: 46%;
    transform: translate(-50%, -50%);
  }
}

.p-top-why__item--quest {
  --q-color: var(--color-purple);
  --x: -27.7%;
  --y: 16%;
}

.p-top-why__item--quality {
  --q-color: var(--color-orange);
  --x: 27.7%;
  --y: 16%;
}

.p-top-why__en {
  font-family: var(--font-en);
  letter-spacing: var(--letter-spacing-en);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
}
@media (min-width: 1024px) {
  .p-top-why__en {
    font-size: 4rem;
  }
}
.p-top-why__en::first-letter {
  color: var(--q-color);
}

.p-top-why__item-title {
  margin-block-start: 1.6rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
@media (min-width: 1024px) {
  .p-top-why__item-title {
    font-size: 2rem;
  }
}

.p-top-why__item-text {
  max-width: 26rem;
  margin-block-start: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.8;
  text-align: start;
  text-align: justify;
}

.p-top-concern {
  padding-block: 8rem;
  background-color: var(--color-bg-pale);
}
@media (min-width: 1024px) {
  .p-top-concern {
    padding-block: 11.2rem;
  }
}

.p-top-concern__lead {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-top-concern__lead {
    font-size: 1.8rem;
  }
}

.p-top-concern__title {
  margin-block-start: 1.6rem;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media (min-width: 1024px) {
  .p-top-concern__title {
    font-size: 4rem;
  }
}

.p-top-concern__list {
  display: grid;
  gap: 4rem;
  margin-block-start: 4.8rem;
}
@media (min-width: 1024px) {
  .p-top-concern__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 3.2rem;
    margin-block-start: 6.4rem;
  }
}

.p-top-concern__bubble {
  position: relative;
  display: grid;
  align-content: center;
  padding: 2.4rem;
  border-radius: 1.6rem;
  background-color: var(--color-blue-light);
}
@media (min-width: 1024px) {
  .p-top-concern__bubble {
    padding: 3.2rem 2.4rem;
  }
}
.p-top-concern__bubble::after {
  content: "";
  position: absolute;
  inset-block-end: -1.5rem;
  inset-inline-end: 6rem;
  width: 3.2rem;
  height: 1.6rem;
  background-color: var(--color-blue-light);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.p-top-concern__voice {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-top-concern__voice {
    font-size: 2rem;
  }
}

.p-top-concern__accent {
  color: var(--color-blue);
}

.p-top-concern__text {
  margin-block-start: 3.2rem;
  padding-inline: 0.8rem;
  font-size: 1.6rem;
  line-height: 1.9;
}

.p-top-concern__img {
  width: 28rem;
  max-width: 80%;
  margin-inline: auto;
  aspect-ratio: 1;
}
.p-top-concern__img img {
  -o-object-fit: contain;
     object-fit: contain;
}

.p-top-service {
  overflow: hidden;
  padding-block: 8rem;
  background-color: var(--color-glass);
}
@media (min-width: 1024px) {
  .p-top-service {
    padding-block: 11.2rem 0;
  }
}

.p-top-service__catch {
  margin-block-start: 3.2rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
@media (min-width: 1024px) {
  .p-top-service__catch {
    margin-block-start: 4rem;
    font-size: 2.4rem;
  }
}

.p-top-service__lead {
  margin-block-start: 1.6rem;
}
@media (min-width: 1024px) {
  .p-top-service__lead {
    margin-block-start: 1.6rem;
  }
}

.p-top-service__wheel {
  position: relative;
  margin-block-start: 8rem;
  padding-block-start: 20rem;
}
@media (min-width: 1024px) {
  .p-top-service__wheel {
    height: 100rem;
    margin-block-start: 0;
    padding-block-start: 0;
  }
}

.p-top-service__images {
  position: absolute;
  inset-block-start: 4rem;
  inset-inline-start: 50%;
  width: 80rem;
  aspect-ratio: 1;
  border: 7rem solid var(--color-blue-light);
  border-radius: 50%;
  translate: -50% 0;
}
@media (min-width: 1024px) {
  .p-top-service__images {
    inset-block-start: 16rem;
    width: 128rem;
    border-width: 14rem;
  }
}

.p-top-service__image {
  --x: 0%;
  --y: -57%;
  --scale: 1;
  position: absolute;
  inset-block-start: calc(50% + var(--y));
  inset-inline-start: calc(50% + var(--x));
  width: 35rem;
  aspect-ratio: 400/267;
  transform: translate(-50%, -50%) scale(var(--scale));
}
@media (min-width: 1024px) {
  .p-top-service__image {
    width: 60rem;
  }
}
.p-top-service__image:not(:first-child) {
  opacity: 0;
}
.p-top-service__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-top-service__controls {
  position: absolute;
  inset-block-start: 20.8rem;
  inset-inline: 2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 32rem;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .p-top-service__controls {
    inset-block-start: 44rem;
    inset-inline: 0;
    justify-content: center;
    gap: 2.4rem;
    max-width: none;
  }
}

.p-top-service__arrow {
  --arrow-color: var(--current-color, var(--color-pink));
  --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  position: relative;
  width: 4.8rem;
  aspect-ratio: 1;
  border: 2px solid var(--arrow-color);
  border-radius: 50%;
  background-color: var(--color-white);
  transition: background-color 0.3s, border-color 0.3s;
}
@media (min-width: 1024px) {
  .p-top-service__arrow {
    width: 6.4rem;
  }
}
.p-top-service__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 2rem;
  aspect-ratio: 1;
  margin: auto;
  background-color: var(--arrow-color);
  -webkit-mask: var(--arrow-icon) center/contain no-repeat;
          mask: var(--arrow-icon) center/contain no-repeat;
  transition: background-color 0.3s;
}
@media (min-width: 1024px) {
  .p-top-service__arrow::before {
    width: 2.4rem;
  }
}
@media (any-hover: hover) {
  .p-top-service__arrow:hover {
    background-color: var(--arrow-color);
  }
  .p-top-service__arrow:hover::before {
    background-color: var(--color-white);
  }
}

.p-top-service__arrow--prev {
  rotate: 180deg;
}

.p-top-service__dots {
  display: none;
}
@media (min-width: 1024px) {
  .p-top-service__dots {
    display: flex;
    gap: 0.8rem;
  }
}

.p-top-service__dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 100vmax;
  background-color: var(--color-line);
  transition: width 0.3s, background-color 0.3s;
}

.p-top-service__dot.is-active {
  width: 2.4rem;
  background-color: var(--current-color, var(--color-pink));
}

.p-top-service__items {
  position: relative;
  display: grid;
  gap: 6.4rem;
  text-align: center;
}
@media (min-width: 768px) {
  .p-top-service__items {
    width: 50rem;
    margin-inline: auto;
  }
}
@media (min-width: 1024px) {
  .p-top-service__items {
    position: absolute;
    inset-block-start: 52.4rem;
    inset-inline-start: 50%;
    width: 66rem;
    translate: -50% 0;
  }
}

.p-top-service__item {
  --service-color: var(--color-pink);
  --service-light: var(--color-pink-light);
}

.p-top-service__item.is-active {
  animation: service-fade 0.5s ease;
}

.p-top-service__item--support {
  --service-color: var(--color-blue);
  --service-light: var(--color-blue-light);
}

.p-top-service__item--branding {
  --service-color: var(--color-orange);
  --service-light: var(--color-orange-light);
}

.p-top-service__number {
  font-family: var(--font-en);
  letter-spacing: var(--letter-spacing-en);
  font-size: 6.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--service-color);
}
@media (min-width: 1024px) {
  .p-top-service__number {
    font-size: 8.8rem;
  }
}

.p-top-service__title {
  margin-block-start: 1.6rem;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .p-top-service__title {
    font-size: 3.2rem;
  }
}

.p-top-service__text {
  margin-block-start: 1.6rem;
  font-size: 1.6rem;
  line-height: 2;
}

.p-top-service__note {
  margin-block-start: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.p-top-service__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-block-start: 2.4rem;
}

.p-top-service__tag {
  padding: 0.4rem 1.2rem;
  border-radius: 100vmax;
  background-color: var(--service-light);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
}

.p-top-service__button {
  margin-block-start: 3.2rem;
}

@keyframes service-fade {
  from {
    opacity: 0;
    transform: translateY(1.6rem);
  }
}
.p-top-feature {
  padding-block: 8rem;
  background-color: var(--color-glass-pale);
  position: relative;
  z-index: 0;
}
@media (min-width: 1024px) {
  .p-top-feature {
    padding-block: 11.2rem 12rem;
  }
}
.p-top-feature .l-inner {
  z-index: 1;
}

.p-top-feature__list {
  display: grid;
  gap: 6.4rem;
  margin-block-start: 6.4rem;
  counter-reset: feature;
}
@media (min-width: 1024px) {
  .p-top-feature__list {
    gap: 9.6rem;
    margin-block-start: 9.6rem;
  }
}

.p-top-feature__item {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  counter-increment: feature;
}
@media (min-width: 1024px) {
  .p-top-feature__item {
    flex-direction: row;
    align-items: center;
    gap: 7.2rem;
  }
}
@media (min-width: 1024px) {
  .p-top-feature__item:nth-child(even) {
    flex-direction: row-reverse;
  }
}

.p-top-feature__image {
  aspect-ratio: 4/3;
  width: 80%;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .p-top-feature__image {
    width: 38%;
    flex-shrink: 0;
  }
}
.p-top-feature__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-top-feature__body {
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  padding-block-end: 4rem;
  border-block-end: 1px solid var(--color-line);
}
@media (min-width: 1024px) {
  .p-top-feature__body {
    -moz-column-gap: 2.8rem;
         column-gap: 2.8rem;
  }
}
.p-top-feature__body::before {
  content: counter(feature, decimal-leading-zero);
  grid-row: 1/4;
  font-family: var(--font-en);
  letter-spacing: var(--letter-spacing-en);
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-pink);
  margin-block-start: -0.5rem;
}
@media (min-width: 1024px) {
  .p-top-feature__body::before {
    font-size: 6.4rem;
    margin-block-start: -1rem;
  }
}

.p-top-feature__label {
  justify-self: start;
  padding: 0.4rem 1.6rem;
  border-radius: 100vmax;
  background-color: var(--color-pink-light);
  color: var(--color-pink);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-top-feature__label {
    font-size: 1.4rem;
  }
}

.p-top-feature__title {
  margin-block-start: 1.6rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-top-feature__title {
    font-size: 2.8rem;
  }
}

.p-top-feature__text {
  margin-block-start: 2rem;
  font-size: 1.6rem;
  line-height: 2;
}

.p-top-feature__deco-img {
  position: absolute;
  inset-block-start: 2rem;
  inset-inline-end: 1rem;
  width: 13rem;
  aspect-ratio: 700/901;
  z-index: -1;
  display: none;
}
@media (min-width: 1024px) {
  .p-top-feature__deco-img {
    width: 45rem;
    display: block;
  }
}
.p-top-feature__deco-img img {
  -o-object-fit: contain;
     object-fit: contain;
}

.p-top-works {
  padding-block: 8rem;
  background-color: var(--color-glass);
}
@media (min-width: 1024px) {
  .p-top-works {
    padding-block: 11.2rem 12rem;
  }
}

.p-top-works__more {
  margin-block-start: 6.4rem;
  text-align: center;
}

.p-top-flow {
  padding-block: 8rem;
  background-color: var(--color-glass-pale);
}
@media (min-width: 1024px) {
  .p-top-flow {
    padding-block: 11.2rem 12rem;
  }
}

.p-top-flow__contents {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-block-start: 4.8rem;
}
@media (min-width: 1024px) {
  .p-top-flow__contents {
    margin-block-start: 8rem;
  }
}

.p-top-flow__side {
  position: sticky;
  inset-block-start: 8.8rem;
  width: 24%;
}
@media (min-width: 1024px) {
  .p-top-flow__side {
    inset-block-start: 12rem;
    width: 36%;
  }
}

.p-top-flow__current {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}
@media (min-width: 1024px) {
  .p-top-flow__current {
    gap: 1.6rem;
  }
}
.p-top-flow__current {
  font-family: var(--font-en);
  letter-spacing: var(--letter-spacing-en);
  font-weight: 500;
  line-height: 1;
}

.p-top-flow__current-number {
  font-size: 4rem;
}
@media (min-width: 1024px) {
  .p-top-flow__current-number {
    font-size: 14.4rem;
  }
}

.p-top-flow__current-total {
  font-size: 1.4rem;
  color: var(--color-text-muted);
}
@media (min-width: 1024px) {
  .p-top-flow__current-total {
    font-size: 3.2rem;
  }
}

.p-top-flow__steps {
  --step-gap: 2.4rem;
  display: grid;
  gap: var(--step-gap);
  width: 72%;
  counter-reset: flow;
}
@media (min-width: 1024px) {
  .p-top-flow__steps {
    width: 56%;
  }
}

.p-top-flow__step {
  --line-from: var(--color-purple);
  --line-to: var(--color-purple);
  --circle-center: 2rem;
  position: relative;
  display: grid;
  grid-template-columns: 4rem 1fr;
  -moz-column-gap: 1.2rem;
       column-gap: 1.2rem;
  counter-increment: flow;
}
@media (min-width: 1024px) {
  .p-top-flow__step {
    --circle-center: 3rem;
    grid-template-columns: 6rem 1fr;
    -moz-column-gap: 3.2rem;
         column-gap: 3.2rem;
  }
}
.p-top-flow__step::after {
  content: "";
  position: absolute;
  inset-block-start: var(--circle-center);
  inset-block-end: calc(-1 * (var(--step-gap) + var(--circle-center)));
  inset-inline-start: var(--circle-center);
  width: 1px;
  background: linear-gradient(var(--line-from), var(--line-to));
}
.p-top-flow__step:last-child::after {
  content: none;
}
.p-top-flow__step::before {
  content: counter(flow, decimal-leading-zero);
  position: relative;
  z-index: 1;
  grid-row: 1/3;
  display: grid;
  place-items: center;
  width: 4rem;
  aspect-ratio: 1;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background-color: var(--color-white);
  font-family: var(--font-en);
  letter-spacing: var(--letter-spacing-en);
  font-size: 1.4rem;
  font-weight: 500;
  transition: background-color 0.6s, border-color 0.6s, color 0.6s;
}
@media (min-width: 1024px) {
  .p-top-flow__step::before {
    width: 6rem;
    font-size: 2rem;
  }
}
.p-top-flow__step:last-child::before {
  border-color: var(--color-line);
  background-color: var(--color-text);
  color: var(--color-white);
}

.p-top-flow__step:nth-child(1) {
  --line-from: var(--color-pink);
  --line-to: color-mix(in srgb, var(--color-pink), var(--color-blue) 33%);
}

.p-top-flow__step:nth-child(2) {
  --line-from: color-mix(in srgb, var(--color-pink), var(--color-blue) 33%);
  --line-to: color-mix(in srgb, var(--color-pink), var(--color-blue) 67%);
}

.p-top-flow__step:nth-child(3) {
  --line-from: color-mix(in srgb, var(--color-pink), var(--color-blue) 67%);
  --line-to: var(--color-blue);
}

.p-top-flow__step:nth-child(4) {
  --line-from: var(--color-blue);
  --line-to: color-mix(in srgb, var(--color-blue), var(--color-purple) 33%);
}

.p-top-flow__step:nth-child(5) {
  --line-from: color-mix(in srgb, var(--color-blue), var(--color-purple) 33%);
  --line-to: color-mix(in srgb, var(--color-blue), var(--color-purple) 67%);
}

.p-top-flow__step:nth-child(6) {
  --line-from: color-mix(in srgb, var(--color-blue), var(--color-purple) 67%);
  --line-to: var(--color-purple);
}

.p-top-flow__step.is-active::before {
  border-color: var(--color-pink);
  background-color: var(--color-pink);
  color: var(--color-white);
}

.p-top-flow__step.is-active:last-child::before {
  background-color: var(--color-text);
}

.p-top-flow__step-title {
  padding-block-start: 0.4rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-top-flow__step-title {
    font-size: 2.4rem;
  }
}

.p-top-flow__step-text {
  margin-block-start: 0.8rem;
  padding-block-end: 2.4rem;
  border-block-end: 1px solid var(--color-line);
  font-size: 1.4rem;
  line-height: 1.9;
}
@media (min-width: 1024px) {
  .p-top-flow__step-text {
    margin-block-start: 1.2rem;
    padding-block-end: 4rem;
    font-size: 1.6rem;
  }
}

.p-top-flow__step-link {
  color: var(--color-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}
@media (any-hover: hover) {
  .p-top-flow__step-link:hover {
    text-decoration: none;
  }
}

.p-top-about {
  padding-block: 8rem;
  background-color: var(--color-glass-pale);
}
@media (min-width: 1024px) {
  .p-top-about {
    padding-block: 11.2rem 12rem;
  }
}

.p-top-about__contents {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  margin-block-start: 4.8rem;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1024px) {
  .p-top-about__contents {
    flex-direction: row;
    align-items: flex-start;
    gap: 9.6rem;
    margin-block-start: 8rem;
  }
}

.p-top-about__photo {
  overflow: hidden;
  aspect-ratio: 2956/3102;
  width: 80%;
  max-width: 45rem;
}
@media (min-width: 1024px) {
  .p-top-about__photo {
    width: 40%;
    flex-shrink: 0;
  }
}
.p-top-about__photo img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-top-about__catch {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media (min-width: 1024px) {
  .p-top-about__catch {
    font-size: 3.6rem;
  }
}

.p-top-about__text {
  margin-block-start: 2.4rem;
  font-size: 1.6rem;
  line-height: 2;
}
@media (min-width: 1024px) {
  .p-top-about__text {
    margin-block-start: 3.2rem;
  }
}

.p-top-about__text + .p-top-about__text {
  margin-block-start: 2.4rem;
}

.p-top-about__points {
  margin-block-start: 4rem;
  border-block-start: 1px solid var(--color-line);
}

.p-top-about__point {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 2rem 0.4rem;
  border-block-end: 1px solid var(--color-line);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.75;
}
.p-top-about__point::before {
  content: "";
  flex-shrink: 0;
  width: 0.8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color-pink);
}

.p-top-about__signature {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  margin-block-start: 6.4rem;
}
.p-top-about__role {
  font-size: 1.6rem;
  font-weight: 400;
}
@media (min-width: 1024px) {
  .p-top-about__role {
    font-size: 2rem;
  }
}

.p-top-about__name {
  width: 20rem;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 1024px) {
  .p-top-about__name {
    width: 25rem;
  }
}
.p-top-about__name img {
  display: block;
}

.p-service-head__num {
  font-family: var(--font-en);
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--letter-spacing-en);
  color: var(--service-color);
}
@media (min-width: 1024px) {
  .p-service-head__num {
    font-size: 5.6rem;
  }
}

.p-service-head__title {
  margin-block-start: 1.6rem;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.4;
}
@media (min-width: 1024px) {
  .p-service-head__title {
    font-size: 4.8rem;
  }
}

.p-service-head__lead {
  margin-block-start: 2.4rem;
  font-size: 1.6rem;
  line-height: 2;
}
@media (min-width: 1024px) {
  .p-service-head__lead {
    margin-block-start: 3.2rem;
    font-size: 1.8rem;
  }
}

.p-service-subtitle {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-service-subtitle {
    font-size: 2.4rem;
  }
}
.p-service-subtitle::before {
  content: "";
  width: 0.4rem;
  height: 2.4rem;
  border-radius: 100vmax;
  background-color: var(--service-color);
}
@media (min-width: 1024px) {
  .p-service-subtitle::before {
    height: 2.8rem;
  }
}

.p-service-menu {
  margin-block-start: 5.6rem;
}
@media (min-width: 1024px) {
  .p-service-menu {
    margin-block-start: 8rem;
  }
}

.p-service-menu__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-block-start: 2rem;
}

.p-service-menu__tag {
  padding: 0.2rem 1.4rem;
  border: 2px solid var(--service-color);
  border-radius: 100vmax;
  background-color: var(--color-white);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8;
}

.p-service-make {
  --service-color: var(--color-pink);
  --service-light: var(--color-pink-light);
  padding-block: 8rem;
  background-color: var(--color-bg-pale);
}
@media (min-width: 1024px) {
  .p-service-make {
    padding-block: 12.8rem;
  }
}

.p-service-make__singles {
  display: grid;
  gap: 4rem;
  margin-block-start: 8rem;
}

.p-service-plan {
  margin-block-start: 6.4rem;
}
@media (min-width: 1024px) {
  .p-service-plan {
    margin-block-start: 8rem;
  }
}

.p-service-plan__cards {
  display: grid;
  gap: 4rem;
  margin-block-start: 3.2rem;
}
@media (min-width: 1024px) {
  .p-service-plan__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 2.4rem;
    margin-block-start: 4.8rem;
  }
}

.p-service-plan__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3.2rem 2.4rem;
  border: 4px solid var(--color-white);
  border-radius: 2rem;
  background-color: var(--color-white);
}
@media (min-width: 1024px) {
  .p-service-plan__card {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    align-content: start;
    padding: 4rem 3.2rem;
  }
}

.p-service-plan__card--recommend {
  border-color: var(--service-color);
}

.p-service-plan__badge {
  position: absolute;
  inset-block-start: -1.6rem;
  inset-inline-start: 2.4rem;
  padding: 0.2rem 1.6rem;
  border-radius: 100vmax;
  background-color: var(--service-color);
  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-service-plan__name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-service-plan__name {
    font-size: 2.4rem;
  }
}

.p-service-plan__price {
  margin-block-start: 0.8rem;
}

.p-service-plan__text {
  margin-block-start: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-plan__text {
    font-size: 1.6rem;
  }
}

.p-service-plan__period {
  margin-block-start: 2.4rem;
  padding: 0.8rem 1.6rem;
  border-radius: 0.8rem;
  background-color: var(--service-light);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-plan__period {
    font-size: 1.6rem;
  }
}

.p-service-plan__list {
  display: grid;
  flex-grow: 1;
  align-content: start;
  gap: 0.8rem;
  margin-block-start: 2.4rem;
  padding-block-start: 2.4rem;
  border-block-start: 1px solid var(--color-line);
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-plan__list {
    font-size: 1.6rem;
  }
}

.p-service-plan__item {
  position: relative;
  padding-inline-start: 1.6rem;
}
.p-service-plan__item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.9em;
  inset-inline-start: 0;
  width: 0.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--service-color);
  transform: translateY(-50%);
}

.p-service-plan__button {
  align-self: flex-start;
  margin-block-start: 3.2rem;
  white-space: nowrap;
}

.p-service-plan__included {
  margin-block-start: 4rem;
  padding: 3.2rem 2.4rem;
  border-radius: 2rem;
  background-color: var(--color-white);
}
@media (min-width: 1024px) {
  .p-service-plan__included {
    padding: 4rem;
  }
}

.p-service-plan__included-title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-service-plan__included-title {
    font-size: 2rem;
  }
}

.p-service-plan__included-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-block-start: 2rem;
}

.p-service-plan__included-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 1.6rem 0.4rem 1.2rem;
  border-radius: 2rem;
  background-color: var(--service-light);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8;
}
.p-service-plan__included-item::before {
  content: "";
  flex-shrink: 0;
  width: 1.6rem;
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e80074' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;
}

.p-service-plan__notes {
  display: grid;
  gap: 0.4rem;
  margin-block-start: 2.4rem;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-plan__notes {
    font-size: 1.4rem;
  }
}

.p-service-single {
  padding: 3.2rem 2.4rem;
  border-radius: 2rem;
  background-color: var(--color-white);
}
@media (min-width: 1024px) {
  .p-service-single {
    display: grid;
    grid-template-areas: "head detail" "button detail";
    grid-template-columns: 44% 48%;
    grid-template-rows: 1fr auto;
    justify-content: space-between;
    padding: 4.8rem;
  }
}

@media (min-width: 1024px) {
  .p-service-single__head {
    grid-area: head;
  }
}

.p-service-single__name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-service-single__name {
    font-size: 2.4rem;
  }
}

.p-service-single__price {
  margin-block-start: 0.8rem;
}

.p-service-single__text {
  margin-block-start: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-single__text {
    font-size: 1.6rem;
  }
}

.p-service-single__period {
  margin-block-start: 1.6rem;
  padding: 0.8rem 1.6rem;
  border-radius: 0.8rem;
  background-color: var(--service-light);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-single__period {
    font-size: 1.6rem;
  }
}

.p-service-single__detail {
  margin-block-start: 2.4rem;
  padding-block-start: 2.4rem;
  border-block-start: 1px solid var(--color-line);
}
@media (min-width: 1024px) {
  .p-service-single__detail {
    grid-area: detail;
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: none;
  }
}

.p-service-single__list {
  display: grid;
  gap: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-single__list {
    font-size: 1.6rem;
  }
}

.p-service-single__item {
  position: relative;
  padding-inline-start: 1.6rem;
}
.p-service-single__item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.9em;
  inset-inline-start: 0;
  width: 0.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--service-color);
  transform: translateY(-50%);
}

.p-service-single__notes {
  display: grid;
  gap: 0.4rem;
  margin-block-start: 1.6rem;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-single__notes {
    font-size: 1.4rem;
  }
}

.p-service-single__button {
  margin-block-start: 2.4rem;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .p-service-single__button {
    grid-area: button;
    justify-self: start;
  }
}

.p-service-option {
  margin-block-start: 8rem;
  padding: 3.2rem 2.4rem;
  border: 2px dashed var(--service-color);
  border-radius: 2rem;
  background-color: var(--color-white);
}
@media (min-width: 1024px) {
  .p-service-option {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 4.8rem;
  }
}

@media (min-width: 1024px) {
  .p-service-option__body {
    width: 64%;
  }
}

.p-service-option__label {
  display: inline-block;
  padding: 0.2rem 1.2rem;
  border-radius: 100vmax;
  background-color: var(--service-light);
  color: var(--service-color);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-service-option__title {
  margin-block-start: 1.2rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-service-option__title {
    font-size: 2.4rem;
  }
}

.p-service-option__text {
  margin-block-start: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-option__text {
    font-size: 1.6rem;
    line-height: 2;
  }
}

.p-service-option__link {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin-block-start: 2.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
@media (min-width: 1024px) {
  .p-service-option__link {
    margin-block-start: 0;
  }
}
.p-service-option__link::after {
  content: "";
  flex-shrink: 0;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-orange-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e87a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center/1.6rem no-repeat;
  transition: transform 0.3s var(--ease-out);
}
@media (any-hover: hover) {
  .p-service-option__link:hover::after {
    transform: translateY(0.8rem);
  }
}

.p-service-support {
  --service-color: var(--color-blue);
  --service-light: var(--color-blue-light);
  padding-block: 8rem;
  background-color: var(--color-bg-pale);
}
@media (min-width: 1024px) {
  .p-service-support {
    padding-block: 12.8rem;
  }
}

.p-service-spot {
  margin-block-start: 6.4rem;
  padding: 3.2rem 2.4rem;
  border-radius: 2rem;
  background-color: var(--color-white);
}
@media (min-width: 1024px) {
  .p-service-spot {
    display: grid;
    grid-template-areas: "head guide" "button guide";
    grid-template-columns: 44% 48%;
    grid-template-rows: 1fr auto;
    justify-content: space-between;
    margin-block-start: 8rem;
    padding: 4.8rem;
  }
}

@media (min-width: 1024px) {
  .p-service-spot__head {
    grid-area: head;
  }
}

.p-service-spot__name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-service-spot__name {
    font-size: 2.4rem;
  }
}

.p-service-spot__price {
  margin-block-start: 0.8rem;
}

.p-service-spot__text {
  margin-block-start: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-spot__text {
    font-size: 1.6rem;
  }
}

.p-service-spot__guide {
  margin-block-start: 2.4rem;
  padding: 2.4rem;
  border-radius: 1.6rem;
  background-color: var(--color-bg-pale);
}
@media (min-width: 1024px) {
  .p-service-spot__guide {
    grid-area: guide;
    margin-block-start: 0;
    padding: 3.2rem;
  }
}

.p-service-spot__guide-title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-service-spot__guide-list {
  margin-block-start: 0.8rem;
}

.p-service-spot__guide-row {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  padding-block: 1.2rem;
  border-block-end: 1px solid var(--color-line);
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-spot__guide-row {
    font-size: 1.6rem;
  }
}

.p-service-spot__guide-price {
  flex-shrink: 0;
  font-weight: 700;
}

.p-service-spot__button {
  margin-block-start: 2.4rem;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .p-service-spot__button {
    grid-area: button;
    justify-self: start;
  }
}

.p-service-monthly {
  margin-block-start: 8rem;
}

.p-service-monthly__list {
  display: grid;
  gap: 2.4rem;
  margin-block-start: 3.2rem;
}
@media (min-width: 1024px) {
  .p-service-monthly__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 2.4rem;
    margin-block-start: 4.8rem;
  }
}

.p-service-monthly__card {
  display: flex;
  flex-direction: column;
  padding: 3.2rem 2.4rem;
  border-radius: 2rem;
  background-color: var(--color-white);
}
@media (min-width: 1024px) {
  .p-service-monthly__card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    align-content: start;
    padding: 4rem;
  }
}

.p-service-monthly__name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-service-monthly__name {
    font-size: 2.4rem;
  }
}

.p-service-monthly__price {
  margin-block-start: 0.8rem;
}

.p-service-monthly__text {
  margin-block-start: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-monthly__text {
    font-size: 1.6rem;
  }
}

.p-service-monthly__items {
  display: grid;
  flex-grow: 1;
  align-content: start;
  gap: 0.8rem;
  margin-block-start: 2.4rem;
  padding-block-start: 2.4rem;
  border-block-start: 1px solid var(--color-line);
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-monthly__items {
    font-size: 1.6rem;
  }
}

.p-service-monthly__item {
  position: relative;
  padding-inline-start: 1.6rem;
}
.p-service-monthly__item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.9em;
  inset-inline-start: 0;
  width: 0.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--service-color);
  transform: translateY(-50%);
}

.p-service-monthly__button {
  align-self: flex-start;
  margin-block-start: 3.2rem;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .p-service-monthly__button {
    justify-self: start;
  }
}

.p-service-monthly__notes {
  display: grid;
  gap: 0.4rem;
  margin-block-start: 2.4rem;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-monthly__notes {
    font-size: 1.4rem;
  }
}

.p-service-agency {
  margin-block-start: 8rem;
  padding: 3.2rem 2.4rem;
  border: 2px dashed var(--service-color);
  border-radius: 2rem;
  background-color: var(--color-white);
}
@media (min-width: 1024px) {
  .p-service-agency {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4.8rem;
  }
}

@media (min-width: 1024px) {
  .p-service-agency__head {
    width: 48%;
  }
}

.p-service-agency__title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-service-agency__title {
    font-size: 2.4rem;
  }
}

.p-service-agency__text {
  margin-block-start: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-agency__text {
    font-size: 1.6rem;
    line-height: 2;
  }
}

.p-service-agency__note {
  margin-block-start: 0.8rem;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-agency__note {
    font-size: 1.4rem;
  }
}

.p-service-agency__price {
  margin-block-start: 2.4rem;
}
@media (min-width: 1024px) {
  .p-service-agency__price {
    width: 44%;
    margin-block-start: 0;
  }
}

.p-service-agency__price-title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-service-agency__list {
  margin-block-start: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .p-service-agency__list {
    font-size: 1.6rem;
  }
}

.p-service-agency__row {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  padding-block: 1.2rem;
  border-block-end: 1px solid var(--color-line);
}

.p-service-agency__amount {
  flex-shrink: 0;
  font-weight: 700;
}

.p-service-tools {
  --service-color: var(--color-orange);
  --service-light: var(--color-orange-light);
  padding-block: 8rem;
}
@media (min-width: 1024px) {
  .p-service-tools {
    padding-block: 12.8rem;
  }
}

.p-service-tools__list {
  display: grid;
  gap: 2.4rem;
  margin-block-start: 4.8rem;
}
@media (min-width: 1024px) {
  .p-service-tools__list {
    grid-template-columns: repeat(3, 1fr);
    margin-block-start: 6.4rem;
  }
}

.p-service-tools__card {
  overflow: hidden;
  border-radius: 2rem;
  background-color: var(--color-bg-pale);
}

.p-service-tools__image {
  aspect-ratio: 12/5;
  background-color: var(--service-light);
}
.p-service-tools__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-service-tools__name {
  padding: 2rem 2.4rem 2.4rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .p-service-tools__name {
    padding: 2.4rem 3.2rem 3.2rem;
    font-size: 2rem;
  }
}

.p-service-tools__button-wrap {
  margin-block-start: 4.8rem;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-service-tools__button-wrap {
    margin-block-start: 6.4rem;
  }
}

.p-service-tools__button {
  white-space: nowrap;
}

.u-visually-hidden,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.u-skip-link {
  position: absolute;
  inset-block-start: -10rem;
  inset-inline-start: 1.6rem;
  z-index: 100;
  padding: 0.8rem 1.6rem;
  background-color: var(--color-white);
}
.u-skip-link:focus {
  inset-block-start: 1.6rem;
}

.u-pc-only {
  display: none;
}
@media (min-width: 1024px) {
  .u-pc-only {
    display: inline;
  }
}

@media (min-width: 1024px) {
  .u-sp-only {
    display: none;
  }
}

.is-motion .u-blur {
  opacity: 0;
  filter: blur(2.4rem);
  transition: opacity 0.7s ease, filter 0.7s ease;
}

.is-motion .u-blur.is-visible {
  opacity: 1;
  filter: none;
}

.is-motion .u-fade {
  opacity: 0;
  transition: opacity 1s ease;
}

.is-motion .u-fade.is-visible {
  opacity: 1;
}

.is-motion .u-fade-up {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 1s ease, transform 1s var(--ease-out);
}

.is-motion .u-fade-up--strong {
  transform: translateY(5rem);
}

.is-motion .u-fade-up.is-visible {
  opacity: 1;
  transform: none;
}

.is-motion .u-fade-left,
.is-motion .u-fade-right {
  opacity: 0;
  transition: opacity 1s ease, transform 1s var(--ease-out);
}

.is-motion .u-fade-left {
  transform: translateX(-10rem);
}

.is-motion .u-fade-right {
  transform: translateX(10rem);
}

.is-motion .u-fade-left.is-visible,
.is-motion .u-fade-right.is-visible {
  opacity: 1;
  transform: none;
}

.is-motion .u-flip-left {
  opacity: 0;
  transform: translate(-2rem, 6rem) rotate(-10deg);
  transition: opacity 1s ease, transform 1s var(--ease-out);
}

.is-motion .u-flip-left.is-visible {
  opacity: 1;
  transform: none;
}

.is-motion .u-rotate-y {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: opacity 1s ease, transform 1s ease;
}

.is-motion .u-rotate-y.is-visible {
  opacity: 1;
  transform: rotateY(-360deg);
}

.is-motion .u-fade-up-gsap {
  opacity: 0;
  transform: translateY(3rem);
}

.u-kira {
  position: relative;
  overflow: hidden;
}
.u-kira::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
  pointer-events: none;
}

@media (any-hover: hover) and (prefers-reduced-motion: no-preference) {
  .u-kira:hover::before {
    animation: u-kira 0.75s;
  }
}
@keyframes u-kira {
  to {
    inset-inline-start: 120%;
  }
}