@charset "UTF-8";
html {
  color: #000;
  background: #FFF;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, xmp {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before, q:after {
  content: "";
}

abbr, acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-size: 100%;
}

legend {
  color: #000;
}

#yui3-css-stamp.cssreset {
  display: none;
}

input, select, textarea, button {
  outline: none;
}

* {
  box-sizing: border-box;
}

body {
  color: #333;
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

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

a, button {
  cursor: pointer;
  border: none;
  background-color: transparent;
}

:root {
  --primaryColor: #0ad;
  --secondaryColor: #028;
  --tertiaryColor: #66f;
  --ashColor: #5D667A;
  --darkColor: #09152F;
  --lightColor: #F8F9FA;
  --lightColor2: #E2E7F0;
}

:root {
  --font-size-h1: 3rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 2rem;
  --font-size-h4: 1.75rem;
  --font-size-body: 1rem;
  --font-size-xl: 1.5rem;
  --font-size-lg: 1.25rem;
  --font-size-md: 1.125rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.8125rem;
  --font-size-2xs: 0.75rem;
  --font-size-3xs: 0.625rem;
}
@media (width <= 900px) {
  :root {
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --font-size-body: 1rem;
  }
}
@media (width <= 600px) {
  :root {
    --font-size-h1: 2rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.25rem;
    --font-size-body: 1rem;
  }
}

:root {
  --space-2xl: 7.5rem;
  --space-xl: 5rem;
  --space-lg: 4rem;
  --space-md: 2.5rem;
  --space-sm: 1.5rem;
  --space-xs: 1rem;
  --space-2xs: 0.5rem;
}

:root {
  --radius-lg: 40px;
  --radius-md: 24px;
  --radius-sm: 16px;
  --radius-xs: 8px;
  --radius-2xs: 4px;
}

.p-priceNormal__price, .p-priceLimited__price, .p-pricesDetail__benefits, .p-flowCard::before, .p-hirocodeData__count, .p-struggle__item p, .p-cardNav__card::before, .p-cardNav__label, .p-hero__tool span, .p-hero__title, .c-heading__title, .c-skill__title, .c-heading--sm .c-heading__title, .p-priceLimited__title, .p-flowSupport__title, .p-skills__title,
.p-work__title,
.p-about__title, .p-entryCard__title, .p-libraries__subcopy, .p-learningCard__title, .p-cta__copy, .p-works__copy, .p-flowCard__title, .p-libraries__copy, .p-contents__title, .p-strength__title, .p-feature__head::before, .p-feature__title, .p-about__copy, .p-struggle__title,
.p-hiro__copy {
  transform: skew(-8deg);
}
.c-heading--sm .c-heading__title img, .p-libraries__copy img {
  transform: skew(8deg);
}

.c-skill__title, .p-cta__copy, .p-works__copy, .p-flowCard__title, .p-flowSupport__title, .p-libraries__subcopy, .p-libraries__copy, .p-contents__title, .p-strength__subtitle, .p-strength__title, .p-feature__head::before, .p-feature__title, .p-skills__title, .p-about__copy {
  rotate: -6.18deg;
}
.p-libraries__copy img {
  rotate: 6.18deg;
}

.c-skill__description, .c-gotop__button span, .c-ctaButton small, .c-voices__description, .p-mobileMenu__nav a, .p-priceContent__description, .p-pricesDetail__description, .p-learningCard__title span, .p-learningCard__description, .p-hiro__description, .c-heading__description, .p-faq__fukidashi, .p-libraries__description, .p-skills__description,
.c-voices__title,
.c-heading--sm .c-heading__description,
.p-priceContent__title,
.p-flowCard__description,
.p-contents__description,
.p-hirocodeData__label,
.p-strength__description,
.p-feature__description,
.p-about__description {
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.c-heading__description, .p-faq__fukidashi, .p-libraries__description, .p-skills__description {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.c-voices__description, .p-mobileMenu__nav a, .p-priceContent__description, .p-pricesDetail__description, .p-learningCard__title span, .p-learningCard__description, .p-hiro__description {
  font-size: var(--font-size-sm);
}

.c-gotop__button span, .c-ctaButton small {
  font-size: var(--font-size-xs);
}

.p-entryCard__title, .p-libraries__subcopy, .p-learningCard__title, .p-cta__copy, .p-works__copy, .p-flowCard__title, .p-libraries__copy, .p-contents__title, .p-strength__title, .p-feature__head::before, .p-feature__title, .p-about__copy, .p-struggle__title,
.p-hiro__copy {
  font-size: var(--font-size-h3);
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
.p-cta__copy, .p-works__copy, .p-flowCard__title, .p-libraries__copy, .p-contents__title, .p-strength__title, .p-feature__head::before, .p-feature__title, .p-about__copy, .p-struggle__title {
  font-size: var(--font-size-h1);
}
.p-learningCard__title {
  font-size: var(--font-size-h4);
}
.p-entryCard__title, .p-libraries__subcopy {
  font-size: var(--font-size-lg);
}

.c-heading__title, .c-skill__title, .c-heading--sm .c-heading__title, .p-priceLimited__title, .p-flowSupport__title, .p-skills__title,
.p-work__title,
.p-about__title {
  font-size: var(--font-size-h2);
  font-weight: 800;
  line-height: 1.5;
}
.c-heading__title strong, .c-skill__title strong, .c-heading--sm .c-heading__title strong, .p-priceLimited__title strong, .p-flowSupport__title strong, .p-skills__title strong,
.p-work__title strong,
.p-about__title strong {
  font-size: 1.2em;
  font-weight: 800;
  display: inline-flex;
  margin-inline: 0.1em;
}
.p-skills__title {
  font-size: var(--font-size-h1);
}
.c-skill__title, .c-heading--sm .c-heading__title, .p-priceLimited__title, .p-flowSupport__title {
  font-size: var(--font-size-h3);
}

.c-ctaButton__button, .p-cta__button, .p-footer__button, .p-header__action > a {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1em;
  padding-block: 1.1em;
  padding-inline: 3.2em 1.6em;
  border-radius: 100px;
  width: min(100%, 480px);
  --color: #FF8800;
  background-blend-mode: multiply;
  background: linear-gradient(to bottom, #FF8800, #f85600);
  background-size: 200% 100%;
  animation: shine 4s infinite;
  animation-delay: 0s;
  animation-timing-function: linear;
  transition: transform 0.4s cubic-bezier(0.722, 0.057, 0.018, 1.982);
  position: relative;
  cursor: url(../images/cta/cursor.svg), auto;
}
@container (width <= 600px) {
  .c-ctaButton__button, .p-cta__button, .p-footer__button, .p-header__action > a {
    font-size: 20px;
    gap: 0.6em;
    padding-block: 1.1em;
    padding-inline: 2em 1.6em;
  }
}
@container (width <= 400px) {
  .c-ctaButton__button, .p-cta__button, .p-footer__button, .p-header__action > a {
    font-size: 18px;
    gap: 0.4em;
    padding-inline: 1.2em 1em;
  }
}
.c-ctaButton__button .shine, .p-cta__button .shine, .p-footer__button .shine, .p-header__action > a .shine {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 100px;
  background-blend-mode: multiply;
  background: linear-gradient(-38deg, transparent 50%, rgba(255, 255, 255, 0.5) 60%, transparent 70%);
  background-size: 200% 100%;
  animation: shine 2s infinite;
  animation-delay: 4s;
  animation-timing-function: linear;
  transition: transform 0.4s cubic-bezier(0.722, 0.057, 0.018, 1.982);
}
@keyframes shine {
  0% {
    background-position-x: 100%;
  }
  50% {
    background-position-x: -100%;
  }
  100% {
    background-position-x: -100%;
  }
}
.c-ctaButton__button:hover, .p-cta__button:hover, .p-footer__button:hover, .p-header__action > a:hover {
  transform: translateY(-0.5em) scale(1.1);
}
.c-ctaButton__button::after, .p-cta__button::after, .p-footer__button::after, .p-header__action > a::after {
  content: "";
  display: block;
  width: 1.2em;
  aspect-ratio: 1;
  background: url('data:image/svg+xml;utf8,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12.5H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 5.5L19 12.5L12 19.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}
.p-footer__button, .p-header__action > a {
  width: max-content;
  font-size: 14px;
  padding-block: 0.8em;
  padding-inline: 2em 1.4em;
}

@font-face {
  font-family: "LINE Seed JP";
  src: url("../fonts/LINESeedJP_OTF_Th.woff2") format("woff2"), url("../fonts/LINESeedJP_OTF_Th.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "LINE Seed JP";
  src: url("../fonts/LINESeedJP_OTF_Rg.woff2") format("woff2"), url("../fonts/LINESeedJP_OTF_Rg.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "LINE Seed JP";
  src: url("../fonts/LINESeedJP_OTF_Bd.woff2") format("woff2"), url("../fonts/LINESeedJP_OTF_Bd.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "LINE Seed JP";
  src: url("../fonts/LINESeedJP_OTF_Eb.woff2") format("woff2"), url("../fonts/LINESeedJP_OTF_Eb.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}
:root {
  --family: "LINE Seed JP","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --maxBodyWidth: 2100px;
}

html {
  background-color: #212529;
}
@media (width <= 768px) {
  html:has(.is-showBurger) {
    overflow: hidden;
  }
}

body {
  container-type: inline-size;
  color: #212529;
  font-family: var(--family);
  font-size: var(--font-size-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
  min-height: 100dvh;
  width: min(100%, var(--maxBodyWidth));
  margin-inline: auto;
  background-color: var(--lightColor);
  overflow: auto;
}

strong {
  font-weight: 700;
  font-size: 1.1em;
}

small {
  font-size: var(--font-size-3xs);
  letter-spacing: 0.08em;
}

main {
  container-type: inline-size;
}
main > section {
  padding-block: var(--space-xl);
}
@media (width <= 768px) {
  main > section {
    padding-block: var(--space-lg);
  }
}
@media (width <= 600px) {
  main > section {
    padding-block: var(--space-md);
  }
}

.l-container, .l-container--wide {
  --min: 1080px;
  width: min(var(--min), 100% - 3rem);
  margin-inline: auto;
}
.l-container--wide {
  --min: 1280px;
}

.p-header {
  container-type: inline-size;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
  transition: translate 0.4s ease-in-out, top 0.4s ease-in-out, position 0.4s ease-in-out;
}
.is-scroll-100dvh .p-header {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.p-header__container {
  --headerSpaceInline: 2rem;
  display: grid;
  align-items: center;
  gap: 0 2rem;
  grid-template: "logo copy nav action" auto/auto auto 1fr auto;
  padding-block: 0.5rem;
  padding-inline: var(--headerSpaceInline);
}
@container (width <= 1366px) {
  .p-header__container {
    grid-template: "logo copy action" auto "nav nav nav" auto/auto auto 1fr;
    padding-block: 0;
  }
}
@container (width <= 768px) {
  .p-header__container {
    --headerSpaceInline: 1rem;
    gap: 0 1rem;
  }
}
@container (width <= 600px) {
  .p-header__container {
    --headerSpaceInline: .5rem;
    gap: 0 0.5rem;
  }
}
.p-header__logo {
  grid-area: logo;
  padding-block: 0.5rem;
}
.p-header__logo a {
  display: flex;
  width: max-content;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border: 1px solid transparent;
  border-radius: 12px;
}
.p-header__logo a:hover {
  border-color: var(--secondaryColor);
}
@container (width <= 600px) {
  .p-header__logo a {
    padding-inline: 0.25rem;
  }
}
.p-header__logo img {
  height: 3rem;
  transition: height 0.4s ease;
}
@container (width <= 600px) {
  .p-header__logo img {
    height: 2.5rem;
  }
}
.p-header__copy {
  grid-area: copy;
  font-size: var(--font-size-2xs);
  font-weight: 400;
  letter-spacing: 0.08em;
}
@container (width <= 768px) {
  .p-header__copy {
    font-size: var(--font-size-3xs);
  }
}
@container (width <= 600px) {
  .p-header__copy {
    display: none;
  }
}
.p-header__nav {
  grid-area: nav;
}
@container (width <= 1366px) {
  .p-header__nav {
    border-block: 1px solid var(--lightColor2);
    margin-inline: calc(var(--headerSpaceInline) * -1);
    padding-block: 0.5rem;
  }
}
@container (width <= 768px) {
  .p-header__nav {
    display: none;
  }
}
.p-header__nav ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
}
@container (width <= 1366px) {
  .p-header__nav ul {
    justify-content: center;
    padding-block: 0.5rem;
  }
}
.p-header__nav ul a {
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: block;
  letter-spacing: 0.04em;
  transition: font-size 0.4s ease, color 0.1s ease-in, translate 0.1s ease-in;
}
.p-header__nav ul a:hover {
  color: var(--primaryColor);
  translate: 0 -4px;
}
.p-header__action {
  grid-area: action;
  display: flex;
  justify-content: flex-end;
}
.p-header__burger {
  margin-inline: 0.5rem 0;
  width: 3rem;
  aspect-ratio: 1;
  display: none;
}
@container (width <= 768px) {
  .p-header__burger {
    display: block;
  }
}

.p-burger {
  --icon: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  display: none;
  place-items: center;
  width: var(--headerHeight);
  height: var(--headerHeight);
  position: fixed;
  inset: 0 0 auto auto;
  z-index: 21;
}
@container (width <= 768px) {
  .p-burger {
    display: grid;
  }
}
.p-burger__button {
  display: block;
  width: 44px;
  aspect-ratio: 1;
  background: var(--icon) no-repeat center center/20px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.p-burger__button:hover {
  background-color: var(--lightColor);
  border-color: var(--lightColor2);
}
.p-burger__button:focus-visible {
  outline: 2px solid var(--secondaryColor);
}
.is-showBurger .p-burger__button {
  --icon: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 6L18 18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.p-burger__menu {
  position: absolute;
  inset: 0 auto auto 0;
  visibility: hidden;
}

.p-hero {
  --inlineSpace: calc((min(100dvw, var(--maxBodyWidth)) - 1080px) / 2);
  container-type: inline-size;
  position: sticky;
  top: var(--headerHeight);
  z-index: 0;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.is-scroll-100dvh .p-hero {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.p-hero__container {
  display: grid;
  grid-template-columns: var(--inlineSpace) 1fr 1fr var(--inlineSpace);
  background: #fff url(../images/logos/logo-mark-light.svg) no-repeat right 64dvw bottom -120px/600px;
  padding-block: 0 5rem;
  position: relative;
  z-index: 1;
}
@container (width <= 600px) {
  .p-hero__container {
    grid-template-columns: var(--inlineSpace) 8rem 1fr var(--inlineSpace);
  }
}
@container (width <= 400px) {
  .p-hero__container {
    grid-template-columns: var(--inlineSpace) 5rem 1fr var(--inlineSpace);
  }
}
.p-hero__texts {
  display: grid;
  align-content: center;
  grid-column: 2/span 2;
  grid-row: 1;
  padding-block: 0 var(--space-sm);
  padding-inline: 2.5rem 0;
}
@container (width <= 600px) {
  .p-hero__texts {
    padding-inline: 8dvw;
    padding-block: var(--space-xs) var(--space-md);
  }
}
@container (width <= 400px) {
  .p-hero__texts {
    padding-inline: 1rem;
  }
}
.p-hero__tools {
  display: flex;
  gap: 1.5rem;
  margin-block: 0 2.5rem;
}
@container (width <= 768px) {
  .p-hero__tools {
    gap: 0.5rem;
    margin-block: 0 1.5rem;
  }
}
.p-hero__tool {
  display: flex;
  align-items: center;
  gap: 0.64rem;
}
@container (width <= 768px) {
  .p-hero__tool {
    gap: 0.25rem;
  }
}
.p-hero__tool--coming-soon span {
  position: relative;
}
.p-hero__tool--coming-soon span::after {
  content: "COMING SOON";
  font-size: 10px;
  font-weight: 400;
  display: block;
  width: max-content;
  position: absolute;
  inset: auto auto 0 50%;
  translate: -50% 80%;
  scale: 0.8;
}
@container (width <= 600px) {
  .p-hero__tool--coming-soon span::after {
    scale: 0.6;
  }
}
.p-hero__tool img {
  display: block;
  width: 1.5rem;
  aspect-ratio: 1;
}
@container (width <= 600px) {
  .p-hero__tool img {
    width: 1.125rem;
  }
}
.p-hero__tool span {
  font-size: 14px;
  letter-spacing: 0.02em;
  font-weight: 600;
}
@container (width <= 768px) {
  .p-hero__tool span {
    font-size: 12px;
  }
}
@container (width <= 600px) {
  .p-hero__tool span {
    font-size: 10px;
  }
}
.p-hero__title {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.4;
}
@container (width <= 768px) {
  .p-hero__title {
    font-size: 2.5rem;
  }
}
@container (width <= 600px) {
  .p-hero__title {
    font-size: 2.2rem;
  }
}
@container (width <= 400px) {
  .p-hero__title {
    font-size: 2rem;
  }
}
.p-hero__title br:nth-of-type(2) {
  display: none;
}
@container (width <= 768px) {
  .p-hero__title br:nth-of-type(2) {
    display: block;
  }
}
.p-hero__description {
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.9;
  margin: 1rem 0 0;
}
@container (width <= 600px) {
  .p-hero__description {
    font-size: 0.75rem;
  }
}
.p-hero__description br:nth-child(1) {
  display: none;
}
@container (width <= 600px) {
  .p-hero__description br:nth-child(1) {
    display: block;
  }
}
@container (width <= 600px) {
  .p-hero__description br:nth-child(2) {
    display: none;
  }
}
.p-hero__features {
  display: grid;
  width: max-content;
  position: absolute;
  inset: 50% auto auto 50%;
  translate: 16dvw -2rem;
  rotate: -16deg;
}
@container (width <= 768px) {
  .p-hero__features {
    scale: 0.9;
    translate: 20dvw -3rem;
  }
}
@container (width <= 600px) {
  .p-hero__features {
    position: relative;
    inset: 0 auto auto 50%;
    translate: -50% 0;
  }
}
.p-hero__features img:nth-child(1) {
  translate: -2.5rem 0;
}
@container (width <= 600px) {
  .p-hero__features img:nth-child(1) {
    translate: -6rem 0;
  }
}
.p-hero__features img:nth-child(3) {
  translate: 2.5rem 0;
}
@container (width <= 600px) {
  .p-hero__features img:nth-child(3) {
    translate: 6rem 0;
  }
}
.p-hero__action {
  width: min(100%, 480px);
  margin: 2.5rem 0 0;
}
.p-hero__action small {
  display: block;
  text-align: center;
  margin: 1.5rem 0 0;
}
.p-hero__image {
  height: 520px;
  grid-column: 3/span 2;
  grid-row: 1;
  position: relative;
  z-index: -1;
}
@container (width <= 600px) {
  .p-hero__image {
    height: 390px;
  }
}
@container (width <= 400px) {
  .p-hero__image {
    height: 325px;
  }
}
.p-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
@container (width <= 600px) {
  .p-hero__image img {
    object-position: 20% top;
    translate: 0 5rem;
  }
}
@container (width <= 400px) {
  .p-hero__image img {
    object-position: 5% top;
  }
}

.p-cardNav {
  --translate: rotate(-2deg) translateX(-1rem);
  container-type: inline-size;
  overflow-x: clip;
  background-color: transparent;
  position: relative;
  z-index: 11;
}
.p-cardNav__container {
  margin: -180px 0 0;
}
@container (width <= 600px) {
  .p-cardNav__container {
    margin: -160px 0 0;
  }
}
.p-cardNav__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  height: 320px;
  counter-reset: number 0;
  position: relative;
  z-index: 1;
}
@container (width <= 768px) {
  .p-cardNav__list {
    width: min(480px, 100%);
    height: 460px;
    grid-template-columns: 1fr 1fr;
    margin-inline: auto;
  }
}
.p-cardNav__list li {
  counter-increment: number 1;
  position: relative;
}
@container (width <= 768px) {
  .p-cardNav__list li:nth-of-type(1) {
    --translate: rotate(-2deg) translateX(0rem);
  }
}
.p-cardNav__list li:nth-of-type(2) {
  --translate: rotate(4deg) translateY(1rem);
  z-index: 1;
}
@container (width <= 768px) {}
.p-cardNav__list li:nth-of-type(3) {
  --translate: translateX(0.5rem);
}
@container (width <= 768px) {
  .p-cardNav__list li:nth-of-type(3) {
    --translate: rotate(4deg) translateX(0.5rem) translateY(-1rem);
    z-index: 2;
  }
}
.p-cardNav__list li:nth-of-type(4) {
  --translate: rotate(-8deg) translateX(-.5rem) translateY(1rem);
}
@container (width <= 768px) {
  .p-cardNav__list li:nth-of-type(4) {
    --translate: rotate(-4deg) translateX(-.5rem) translateY(0rem);
    z-index: 3;
  }
}
.p-cardNav__card {
  display: grid;
  justify-items: center;
  background-color: #fff;
  width: min(280px, 100%);
  padding: 2rem 1.5rem 1rem;
  border: 2px solid var(--ashColor);
  border-radius: 24px;
  box-shadow: 0px 12px 16px -1px rgba(0, 0, 0, 0.12);
  position: absolute;
  inset: 0 auto auto 50%;
  translate: -50% 0;
  transform: translate(0, 100px);
  animation: showCard 0.8s cubic-bezier(1, -0.01, 0.47, 1.67) forwards;
  position: relative;
  animation-fill-mode: forwards;
  transition: transform 0.4s linear(0, 0.402 7.4%, 0.711 15.3%, 0.929 23.7%, 1.008 28.2%, 1.067 33%, 1.099 36.9%, 1.12 41%, 1.13 45.4%, 1.13 50.1%, 1.111 58.5%, 1.019 83.2%, 1.004 91.3%, 1);
  will-change: transform;
}
@container (width <= 900px) {
  .p-cardNav__card {
    width: auto;
    margin-right: -0.5rem;
  }
}
@container (width <= 768px) {
  .p-cardNav__card {
    width: auto;
    margin-right: -1rem;
    padding: 1.5rem 1rem 0.5rem;
  }
}
@keyframes showCard {
  to {
    transform: var(--translate);
  }
}
.p-cardNav__card.is-shown {
  animation: none;
  transform: var(--translate);
}
.p-cardNav__card.is-shown:hover {
  transform: translate(0, -2rem);
}
@container (width <= 768px) {
  .p-cardNav__card.is-shown:hover {
    transform: translate(0, -0.5rem);
  }
}
.p-cardNav__card::before {
  content: counter(number, decimal-leading-zero);
  color: #002881;
  font-size: 1.5rem;
  font-weight: 800;
  position: absolute;
  inset: 1rem auto auto 1.4rem;
}
.p-cardNav__card > a {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.p-cardNav__card img {
  display: block;
  width: 4rem;
  aspect-ratio: 1;
}
@container (width <= 768px) {
  .p-cardNav__card img {
    width: 3rem;
  }
}
.p-cardNav__label {
  font-size: 2rem;
  font-weight: 800;
  margin: 0.75rem 0 0;
}
@container (width <= 768px) {
  .p-cardNav__label {
    font-size: 1.5rem;
  }
}
.p-cardNav__label span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  display: inline-block;
  width: max-content;
  position: absolute;
  inset: 0 auto auto 0;
  translate: -80% -40%;
  rotate: -8deg;
  transform: skew(6deg);
}
@container (width <= 400px) {
  .p-cardNav__label span {
    translate: -72% -40%;
  }
}
.p-cardNav__label span::before, .p-cardNav__label span::after {
  content: "/";
  font-weight: 300;
  display: inline-block;
  margin-inline: 0.25em;
  rotate: 2deg;
}
.p-cardNav__label span::before {
  scale: -1 1;
}
.p-cardNav__description {
  font-size: 13px;
  letter-spacing: 0.04em;
  margin: 0.5rem 0 0;
}
@container (width <= 768px) {
  .p-cardNav__description {
    font-size: 12px;
  }
}
.p-cardNav__detail {
  color: var(--secondaryColor);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 4000000;
  display: grid;
  place-items: center;
  margin: 1rem 0 0;
}
@container (width <= 768px) {
  .p-cardNav__detail {
    font-size: 11px;
  }
}
.p-cardNav__detail::after {
  content: "";
  display: block;
  width: 1.5em;
  aspect-ratio: 1;
  mask: url('data:image/svg+xml;utf8,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.80762 9.80786L12.8076 15.8079L18.8076 9.80786" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
  background-color: currentColor;
}
.p-cardNav__ad .c-textAd {
  position: absolute;
  inset: 60px auto auto 50%;
  translate: -50%;
  rotate: -5deg;
}
@container (width <= 768px) {
  .p-cardNav__ad .c-textAd {
    inset: 80px auto auto 50%;
  }
}
.p-cardNav__ad .c-textAd:nth-child(2) {
  rotate: 1deg;
  background-color: #00AAD4;
  top: 70px;
  z-index: -1;
}
@container (width <= 768px) {
  .p-cardNav__ad .c-textAd:nth-child(2) {
    top: 90px;
  }
}

.p-struggle {
  padding-block: calc(var(--space-xl) * 1.2) calc(var(--space-xl) * 3);
  background: linear-gradient(to bottom, #002881, #001D5E);
  overflow-x: clip;
  position: relative;
}
@container (width <= 768px) {
  .p-struggle {
    padding-block: calc(var(--space-xl) * 0.8) calc(var(--space-xl) * 2);
  }
}
.p-struggle::before {
  content: "";
  display: block;
  width: calc(min(100dvw, var(--maxBodyWidth)) * 2);
  height: 80px;
  background-image: url(../images/struggles/wave.svg);
  background-repeat: repeat-x;
  position: absolute;
  inset: 0 auto auto 0;
  translate: var(--struggle-translate) calc(-100% + 1px);
  will-change: translate; /* パフォーマンス向上のために追加 */
  transition: translate ease-out 0.2s;
}
.p-struggle::after {
  content: "";
  --color: var(--lightColor);
  display: block;
  height: 80px;
  width: 100dvw;
  background: linear-gradient(to right, var(--color) calc(50% - 38px), transparent calc(50% - 38px), transparent calc(50% + 38px), var(--color) calc(50% + 38px)), url(../images/struggles/drop.svg) no-repeat center/80px;
  position: absolute;
  inset: auto auto -1px 50%;
  translate: -50% 0;
}
.p-struggle__title {
  color: #fff;
  filter: blur(4px);
  opacity: 0;
  transition: filter 1.2s ease, opacity 0.8s ease;
  word-break: keep-all;
}
@container (width <= 900px) {
  .p-struggle__title {
    font-size: 5.5cqw;
  }
}
@container (width <= 600px) {
  .p-struggle__title {
    font-size: min(8.5cqw, 40px);
  }
}
.p-struggle__title.is-appear {
  filter: blur(0);
  opacity: 1;
}
.p-struggle__list {
  --fukidshi: url(../images/struggles/fukidashi-01.svg);
  --iconInset: 50% auto auto 0;
  --iconTranslate: -50% -50%;
  --animation: none;
  --delay: 0;
  --tilt: 6deg;
  --afterOpacity: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-block: var(--space-2xl) 0;
  pointer-events: none;
}
@container (width <= 900px) {
  .p-struggle__list {
    grid-template-columns: repeat(2, 1fr);
    width: min(100%, 560px);
    margin-inline: auto;
  }
}
@container (width <= 600px) {
  .p-struggle__list {
    width: min(100%, 370px);
  }
}
.p-struggle__list.is-appear {
  --animation:
    fukidashiShow .8s cubic-bezier(1, -0.433, 0.335, 1.582) forwards,
    fukidashiTilt .8s cubic-bezier(1, -0.433, 0.335, 1.582) forwards ;
}
.p-struggle__list li {
  position: relative;
}
.p-struggle__list li:nth-child(1) {
  translate: 0 2rem;
  --delay: .1s, .5s;
  --tilt: -6deg;
  --afterOpacity: .5;
}
.p-struggle__list li:nth-child(2) {
  --fukidshi: url(../images/struggles/fukidashi-02.svg);
  translate: 0 -2rem;
  --iconInset: 15% auto auto 50%;
  --iconTranslate: -50% -50%;
  --delay: 0s, .4s;
}
@container (width <= 600px) {
  .p-struggle__list li:nth-child(2) {
    translate: -2rem -3rem;
  }
}
.p-struggle__list li:nth-child(3) {
  --fukidshi: url(../images/struggles/fukidashi-03.svg);
  translate: 0 2rem;
  --iconInset: auto auto 20% 65%;
  --iconTranslate: -50% 50%;
  --delay: .3s, .7s;
  --tilt: -6deg;
  --afterOpacity: .5;
}
.p-struggle__list li:nth-child(4) {
  --fukidshi: url(../images/struggles/fukidashi-04.svg);
  translate: 0 -2rem;
  --iconInset: 30% 0 auto auto;
  --iconTranslate: -10% -90%;
  --delay: .2s, .8s;
}
@container (width <= 600px) {
  .p-struggle__list li:nth-child(4) {
    translate: -1rem -3.5rem;
  }
}
@keyframes fukidashiShow {
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes fukidashiTilt {
  to {
    rotate: var(--tilt);
  }
}
.p-struggle__item {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  z-index: 1;
  animation: var(--animation);
  animation-delay: var(--delay);
  opacity: 0;
  scale: 0.8;
}
@container (width <= 900px) {
  .p-struggle__item {
    aspect-ratio: 4/3;
  }
}
@container (width <= 600px) {
  .p-struggle__item {
    aspect-ratio: 1;
  }
}
.p-struggle__item::before {
  content: "";
  display: block;
  width: 320px;
  aspect-ratio: 1;
  background: var(--fukidshi) no-repeat center/contain;
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  z-index: 2;
}
@container (width <= 600px) {
  .p-struggle__item::before {
    width: 240px;
  }
}
.p-struggle__item img {
  width: 5rem;
  aspect-ratio: 1;
  position: absolute;
  inset: var(--iconInset);
  translate: var(--iconTranslate);
  z-index: 3;
}
@container (width <= 600px) {
  .p-struggle__item img {
    width: 3.5rem;
  }
}
.p-struggle__item p {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  width: max-content;
  z-index: 4;
}
@container (width <= 600px) {
  .p-struggle__item p {
    font-size: 1.2rem;
  }
}
.p-struggle__ripple {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  opacity: var(--afterOpacity);
}
.p-struggle__ripple .inner {
  width: 800px;
  aspect-ratio: 1;
  position: relative;
}
.p-struggle__ripple span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 1px solid white;
  border-radius: 50%;
  opacity: 0;
}
.p-struggle__ripple span:nth-child(1) {
  animation: ripple 4.5s infinite -1s;
}
.p-struggle__ripple span:nth-child(2) {
  animation: ripple 4.5s infinite -0.2s;
}
.p-struggle__ripple span:nth-child(3) {
  animation: ripple 4.5s infinite 0.6s;
}
.p-struggle__ripple span:nth-child(4) {
  animation: ripple 4.5s infinite 1.4s;
  border-width: 1.5px;
}
@keyframes ripple {
  0% {
    width: 20px;
    height: 20px;
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  100% {
    width: 320px;
    height: 320px;
    opacity: 0;
  }
}

.p-about {
  overflow-x: clip;
  padding-block-start: var(--space-md);
}
@container (width <= 600px) {
  .p-about {
    padding-block: var(--space-md) var(--space-lg);
  }
}
.p-about__head {
  display: grid;
  place-items: center;
}
.p-about__head img {
  width: 200px;
}
@container (width <= 600px) {
  .p-about__head img {
    width: 160px;
  }
}
.p-about__copy {
  margin-block: 1.5em;
  translate: 0 2rem;
  opacity: 0;
  filter: blur(4px);
  scale: 0.8;
  transition: opacity 0.4s cubic-bezier(0.39, -0.01, 0.6, 1.37), translate 0.4s cubic-bezier(0.39, -0.01, 0.6, 1.37), filter 0.4s cubic-bezier(0.39, -0.01, 0.6, 1.37), scale 0.4s cubic-bezier(0.39, -0.01, 0.6, 1.37);
  position: relative;
  z-index: 1;
}
@container (width <= 768px) {
  .p-about__copy {
    font-size: min(6cqw, 40px);
  }
}
.p-about__copy.is-appear {
  translate: 0;
  opacity: 1;
  filter: blur(0px);
  scale: 1;
}
.p-about__marker {
  display: block;
  position: absolute;
  inset: 32% auto auto 40%;
  translate: -50% -54%;
  rotate: 7deg;
  mix-blend-mode: multiply;
  pointer-events: none;
  scale: 1.1;
}
@container (width <= 900px) {
  .p-about__marker svg {
    width: 100%;
  }
}
.p-about__marker.is-appear path {
  transition: stroke-dashoffset 1.2s ease-out 0.1s;
  stroke-dashoffset: 0;
}
.p-about__explain {
  --inlineSpace: calc((min(100dvw, var(--maxBodyWidth)) - 1200px) / 2);
  display: grid;
  align-items: center;
  grid-template-columns: var(--inlineSpace) 1fr 1fr var(--inlineSpace);
  gap: var(--space-lg);
  margin-block: -4rem 0;
  mix-blend-mode: multiply;
  position: relative;
  z-index: 1;
}
@container (width <= 768px) {
  .p-about__explain {
    --inlineSpace: 1.5rem;
    gap: 4rem 0;
    grid-template-columns: var(--inlineSpace) 1fr var(--inlineSpace);
    margin-block: -2rem 0;
  }
}
.p-about__texts {
  display: grid;
  align-content: center;
  grid-column: 3/4;
  grid-row: 1;
  align-self: stretch;
  padding-block: 0 var(--space-lg);
  background: url(../images/logos/logo-mark-light.svg) no-repeat center 10%/contain;
}
@container (width <= 768px) {
  .p-about__texts {
    grid-column: 2/3;
    grid-row: 2;
    padding-block: var(--space-md) var(--space-xl);
  }
}
.p-about__title {
  margin-block: 0 0.5em;
  width: max-content;
}
.p-about__description + .p-about__description {
  margin-block: 1em 0;
}
.p-about__image {
  height: 560px;
  grid-row: 1;
  grid-column: 1/3;
  position: relative;
  z-index: -1;
}
@container (width <= 768px) {
  .p-about__image {
    height: auto;
    grid-column: 1/4;
    margin-block: -12cqw;
    z-index: -1;
  }
}
.p-about__image picture,
.p-about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
@container (width <= 768px) {
  .p-about__image picture,
  .p-about__image img {
    border-radius: 0;
  }
}
.p-about__gallery {
  height: 400px;
  margin-block: calc(var(--space-xl) * -1.25) -13rem;
  position: relative;
  z-index: 2;
}
@container (width <= 768px) {
  .p-about__gallery {
    margin-block: calc(var(--space-xl) * -1) -13rem;
  }
}
.p-about__gallery .c-gallery {
  rotate: -6.18deg;
}
.p-about__ad {
  position: relative;
  z-index: 1;
}
.p-about__ad .c-textAd {
  rotate: -6.18deg;
  position: absolute;
  inset: 0 auto auto 50%;
  translate: -50% 0;
}

.p-skills {
  padding-block-end: var(--space-md);
}
.p-skills__container {
  margin-block: var(--space-xl) 0;
  position: relative;
}
.p-skills__container::before {
  content: "";
  display: block;
  width: 80%;
  aspect-ratio: 1;
  pointer-events: none;
  background: url(../images/logos/logo-mark-white.svg) no-repeat center/contain;
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
}
.p-skills__head {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.p-skills__title {
  position: relative;
  -webkit-text-stroke: 18px var(--lightColor);
  paint-order: stroke;
}
.p-skills__title::before {
  content: attr(data-english);
  color: transparent;
  font-size: 3em;
  position: absolute;
  inset: 0 auto auto 50%;
  translate: -50% -64%;
  -webkit-text-stroke: 4px var(--secondaryColor);
  paint-order: stroke;
  z-index: -1;
}
.p-skills__description {
  text-align: center;
  margin-block: 2em 0;
}
@container (width <= 900px) {
  .p-skills__description {
    font-size: var(--font-size-sm);
    font-weight: 500;
  }
}
@container (width <= 900px) {
  .p-skills__description br {
    display: none;
  }
}
.p-skills__list {
  --x: 0;
  --y: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-block: calc(var(--space-xl) + var(--space-md)) 0;
  position: relative;
}
@container (width <= 1120px) {
  .p-skills__list {
    width: min(800px, 100%);
    margin-inline: auto;
  }
}
@container (width <= 768px) {
  .p-skills__list {
    width: min(510px, 100%);
    grid-template-columns: 1fr;
    margin-block: var(--space-xl) 0;
  }
}
@container (width <= 600px) {
  .p-skills__list {
    margin-block-start: var(--space-md);
    gap: var(--space-md);
  }
}
.p-skills__list li {
  translate: var(--x) var(--y);
  --x: 1rem;
  opacity: 0;
  filter: blur(1rem);
  transform: translate(-15rem, 4rem);
  scale: 0.5;
}
.p-skills__list li:nth-child(odd) {
  --y: -2rem;
}
@container (width <= 768px) {
  .p-skills__list li:nth-child(odd) {
    --y: 0;
  }
}
.p-skills__list li:nth-child(4n-1), .p-skills__list li:nth-child(4n) {
  --x: -1rem;
}
@container (width <= 1000px) {
  .p-skills__list li:nth-child(4n-1), .p-skills__list li:nth-child(4n) {
    --x: 0;
  }
}
.p-skills__list.is-appear li {
  animation: appearSkill 0.4s cubic-bezier(1, -0.433, 0.335, 1.582) forwards;
}
@keyframes appearSkill {
  to {
    opacity: 1;
    transform: translate(0, 0);
    filter: none;
    scale: 1;
  }
}
.p-skills__list.is-appear li:nth-child(2) {
  animation-delay: 0.1s;
}
.p-skills__list.is-appear li:nth-child(3) {
  animation-delay: 0.3s;
}
.p-skills__list.is-appear li:nth-child(4) {
  animation-delay: 0.5s;
}
.p-skills__list.is-appear li:nth-child(5) {
  animation-delay: 0.7s;
}
.p-skills__list.is-appear li:nth-child(6) {
  animation-delay: 0.9s;
}
.p-skills__list.is-appear li:nth-child(7) {
  animation-delay: 0.13s;
}

.p-features {
  --unit: calc(min(100dvw, var(--maxBodyWidth)) * 0.1082);
  padding-block-start: 0;
  counter-reset: number 0;
}
.p-features__inner {
  background-color: var(--lightColor2);
  padding-block: calc(var(--unit) + var(--space-md)) calc(var(--unit) + var(--space-2xl) * 2);
  clip-path: polygon(0 var(--unit), 100% 0, 100% calc(100% - var(--unit)), 0 100%);
}
.p-features__list {
  margin-block: var(--space-lg) 0;
}
@container (width <= 900px) {
  .p-features__list {
    margin-block: var(--space-2xl) var(--space-lg);
  }
}
@container (width <= 600px) {
  .p-features__list {
    margin-block-start: var(--space-md);
  }
}

.p-feature {
  --textOrder: 0;
  --imageOrder: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0 var(--space-md);
  counter-increment: number 1;
}
@container (width <= 900px) {
  .p-feature {
    grid-template-columns: 1fr;
    width: min(100%, 640px);
    margin-inline: auto;
  }
}
.p-feature--inverse {
  --textOrder: 1;
  --imageOrder: 0;
}
@container (width <= 900px) {
  .p-feature--inverse {
    --textOrder: 0;
  }
}
.p-feature + .p-feature {
  margin-top: var(--space-md);
}
@container (width <= 900px) {
  .p-feature + .p-feature {
    margin-top: var(--space-xl);
  }
}
.p-feature__texts {
  order: var(--textOrder);
}
.p-feature__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2em;
  align-items: flex-end;
  width: max-content;
  padding-block: var(--space-lg) 0;
  margin-block: 0 var(--space-md);
}
@container (width <= 900px) {
  .p-feature__head {
    margin-inline: auto;
    padding-inline: 0 4rem;
  }
}
@container (width <= 600px) {
  .p-feature__head {
    gap: 0.5em;
    padding-inline: 0;
  }
}
.p-feature__head::before {
  content: counter(number) ".";
  color: var(--tertiaryColor);
  font-size: 5em;
}
@container (width <= 600px) {
  .p-feature__head::before {
    font-size: 3em;
    margin-left: -1.5rem;
  }
}
.p-feature__title {
  position: relative;
  -webkit-text-stroke: 16px var(--lightColor2);
  paint-order: stroke;
}
.p-feature__title::before {
  content: attr(data-text);
  color: #fff;
  font-size: 3em;
  width: max-content;
  padding: 0.5em;
  position: absolute;
  inset: 0 auto auto 50%;
  translate: -50% -62%;
  -webkit-text-stroke: 10px var(--tertiaryColor);
  paint-order: stroke;
  z-index: -1;
  clip-path: inset(0 99.9999% 0 0);
  filter: blur(4px);
  opacity: 0;
}
.p-feature__title.is-appear::before {
  animation: appear-cover 0.8s cubic-bezier(0.93, 0, 0, 0.99) forwards;
}
@keyframes appear-cover {
  to {
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    opacity: 1;
  }
}
.p-feature__description + .p-feature__description {
  margin-top: 1em;
}
.p-feature__image {
  order: var(--imageOrder);
  position: relative;
}
@container (width <= 900px) {
  .p-feature__image {
    width: min(560px, 100%);
    margin-inline: auto;
  }
}
.p-feature__image::before {
  content: "";
  display: block;
  width: 120%;
  aspect-ratio: 1;
  background: url(../images/logos/logo-mark-light.svg) no-repeat center/contain;
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  z-index: -1;
}
.p-feature__image img {
  animation: floating-image 8s ease-in-out infinite;
}
@keyframes floating-image {
  0% {
    translate: 0 -1rem;
  }
  50% {
    translate: 0 1rem;
  }
  100% {
    translate: 0 -1rem;
  }
}

.p-strengths {
  overflow-x: clip;
}
.p-strength {
  --textOrder: 0;
  --imageOrder: 1;
  --imageBalance: -40%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0 var(--space-md);
}
@container (width <= 900px) {
  .p-strength {
    --textOrder: 1;
    --imageOrder: 0;
  }
}
@container (width <= 900px) {
  .p-strength {
    grid-template-columns: 1fr;
  }
}
.p-strength--inverse {
  --textOrder: 1;
  --imageOrder: 0;
  --imageBalance: -60%;
}
.p-strength + .p-strength {
  margin-top: var(--space-lg);
}
.p-strength__texts {
  order: var(--textOrder);
}
@container (width <= 900px) {
  .p-strength__texts {
    margin-top: -3rem;
  }
}
.p-strength__head {
  display: grid;
  gap: 2em;
  padding-block: var(--space-lg) 0;
  margin-block: 0 var(--space-md);
}
.p-strength__subtitle {
  font-size: var(--font-size-md);
  font-weight: 800;
  text-align: center;
}
.p-strength__title {
  width: max-content;
  margin-inline: auto;
  position: relative;
}
.p-strength__marker {
  display: block;
  position: absolute;
  translate: -50% -54%;
  rotate: 7deg;
  mix-blend-mode: multiply;
}
@container (width <= 900px) {
  .p-strength__marker {
    scale: 0.8;
  }
}
@container (width <= 600px) {
  .p-strength__marker {
    scale: 0.7;
  }
}
.p-strength__marker.is-appear path {
  transition: stroke-dashoffset 2s ease-out 0.1s;
  stroke-dashoffset: 0;
}
.p-strength__marker--1 {
  inset: 55% auto auto 47%;
}
.p-strength__marker--2 {
  inset: 100% auto auto 25%;
  rotate: 5deg;
}
.p-strength__marker--3 {
  inset: 50% auto auto 44%;
  rotate: 5deg;
}
.p-strength__description + .p-strength__description {
  margin-top: 1em;
}
.p-strength__description .line-through {
  text-decoration: line-through;
}
.p-strength__image {
  order: var(--imageOrder);
  position: relative;
  aspect-ratio: 4/3;
}
@container (width <= 900px) {
  .p-strength__image {
    aspect-ratio: auto;
  }
}
.p-strength__image img {
  display: block;
  width: 40rem;
  position: absolute;
  inset: 50% auto auto 50%;
  translate: var(--imageBalance) -50%;
  max-width: none;
}
@container (width <= 900px) {
  .p-strength__image img {
    width: min(600px, 100%);
    margin-inline: auto;
    inset: inherit;
    translate: 0;
    position: relative;
  }
}

.p-hirocode {
  overflow-x: clip;
  padding-block-end: 0;
}
.p-hirocode__container {
  padding-block: var(--space-2xl) var(--space-xl);
  padding-inline: var(--space-lg);
  background-color: #fff;
  border: 2px solid var(--darkColor);
  border-radius: var(--radius-lg);
  position: relative;
}
@container (width <= 900px) {
  .p-hirocode__container {
    padding-block: var(--space-2xl) var(--space-lg);
    padding-inline: var(--space-md);
  }
}
@container (width <= 768px) {
  .p-hirocode__container {
    padding-block: var(--space-xl) var(--space-sm);
    margin-inline: -1rem;
    border-radius: var(--radius-md);
  }
}
@container (width <= 600px) {
  .p-hirocode__container {
    padding-block: var(--space-lg) var(--space-xs);
    padding-inline: var(--space-sm);
  }
}
.p-hirocode__logo {
  width: 8rem;
  border: 2px solid var(--darkColor);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: absolute;
  inset: 0 auto auto 50%;
  translate: -50% -50%;
}
@container (width <= 768px) {
  .p-hirocode__logo {
    width: 6rem;
  }
}
.p-hirocode__logo img {
  display: block;
  aspect-ratio: 1;
}
.p-hirocode__arrow {
  position: absolute;
  inset: 0 auto auto 50%;
  translate: -80% -130%;
  rotate: 7deg;
  scale: 1.1;
  mix-blend-mode: multiply;
}
@container (width <= 900px) {
  .p-hirocode__arrow {
    translate: -29% -109%;
    scale: 0.8;
    rotate: 30deg;
  }
}
.p-hirocodeData {
  margin-block: 4rem 0;
}
.p-hirocodeData__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md) var(--space-xs);
}
@container (width <= 900px) {}
@container (width <= 768px) {
  .p-hirocodeData__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.p-hirocodeData__item {
  display: grid;
  justify-items: center;
}
.p-hirocodeData__label {
  font-weight: 800;
  position: relative;
  z-index: 1;
}
@container (width <= 900px) {
  .p-hirocodeData__label {
    font-size: var(--font-size-sm);
  }
}
.p-hirocodeData__count {
  font-size: var(--font-size-h1);
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  position: relative;
}
.p-hirocodeData__count .unit {
  font-size: 0.6em;
  width: max-content;
}
.p-hirocodeData.is-appear path {
  transition: stroke-dashoffset 1.2s ease-out 0.1s;
  stroke-dashoffset: 0;
}
.p-hirocodeData__circle {
  display: block;
  position: absolute;
  inset: 55% auto auto 47%;
  translate: -50% -54%;
  rotate: 7deg;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@container (width <= 1000px) {
  .p-hirocodeData__circle {
    scale: 0.9;
  }
}
@container (width <= 600px) {
  .p-hirocodeData__circle {
    scale: 0.8;
  }
}
.p-hirocodeData__circle--2 path {
  transition-delay: 0.4s !important;
}
.p-hirocodeData__circle--3 path {
  transition-delay: 0.8s !important;
}
.p-hirocodeData__circle--4 path {
  transition-delay: 1.2s !important;
}
.p-hirocodeData small {
  display: block;
  margin-block: 3em 0;
}
.p-hirocodeProfile {
  margin-block: 3rem 0;
}
.p-hirocodeProfile__text {
  border-radius: var(--radius-sm);
  padding: 2rem;
  border: 1px solid var(--lightColor2);
  background-color: var(--lightColor);
}
.p-hirocodeProfile__account {
  display: grid;
  grid-template: "avatar name" auto "avatar handle" auto/64px 1fr;
  align-items: center;
  gap: 0 1.5rem;
}
@container (width <= 768px) {
  .p-hirocodeProfile__account {
    grid-template-columns: 48px 1fr;
    gap: 0 1rem;
  }
}
.p-hirocodeProfile__avatar {
  grid-area: avatar;
}
.p-hirocodeProfile__avatar img {
  border-radius: 100%;
}
.p-hirocodeProfile__name {
  grid-area: name;
  font-size: var(--font-size-md);
  font-weight: 800;
  align-self: end;
}
.p-hirocodeProfile__handle {
  grid-area: handle;
  font-size: var(--font-size-sm);
  font-weight: 600;
  align-self: start;
}
.p-hirocodeProfile__description {
  font-size: var(--font-size-xs);
  margin-block: 1em 0;
}
.p-hirocode__voices {
  margin-block: var(--space-xl) 0;
}

:root {
  --face-1: url('data:image/svg+xml;utf8,<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M32.0002 58.6667C28.3557 58.6667 24.9113 57.9662 21.6668 56.5653C18.4224 55.1644 15.5895 53.2533 13.1682 50.832C10.7468 48.4107 8.83572 45.5778 7.43483 42.3333C6.03394 39.0889 5.3335 35.6444 5.3335 32C5.3335 28.3111 6.03394 24.8444 7.43483 21.6C8.83572 18.3556 10.7468 15.5333 13.1682 13.1333C15.5895 10.7333 18.4224 8.83378 21.6668 7.43467C24.9113 6.03556 28.3557 5.33511 32.0002 5.33334C35.6891 5.33334 39.1557 6.03378 42.4002 7.43467C45.6446 8.83556 48.4668 10.7351 50.8668 13.1333C53.2668 15.5316 55.1673 18.3538 56.5682 21.6C57.9691 24.8462 58.6686 28.3129 58.6668 32C58.6668 35.6444 57.9664 39.0889 56.5655 42.3333C55.1646 45.5778 53.2651 48.4116 50.8668 50.8347C48.4686 53.2578 45.6464 55.1689 42.4002 56.568C39.1539 57.9671 35.6873 58.6667 32.0002 58.6667ZM32.0002 53.3333C37.9557 53.3333 43.0117 51.2444 47.1682 47.0667C51.3246 42.8889 53.3797 37.8222 53.3335 31.8667V31.7333H46.3335L41.0668 21.3333H23.0002L17.7335 31.7333H10.6668V31.9333C10.6668 37.8889 12.7451 42.9449 16.9015 47.1013C21.0579 51.2578 26.0908 53.3351 32.0002 53.3333ZM24.0002 38C23.0668 38 22.2775 37.6773 21.6322 37.032C20.9868 36.3867 20.6651 35.5982 20.6668 34.6667C20.6686 33.7351 20.9913 32.9458 21.6348 32.2987C22.2784 31.6516 23.0668 31.3298 24.0002 31.3333C24.9335 31.3369 25.7228 31.6596 26.3682 32.3013C27.0135 32.9431 27.3353 33.7316 27.3335 34.6667C27.3317 35.6018 27.0091 36.3911 26.3655 37.0347C25.7219 37.6782 24.9335 38 24.0002 38ZM40.0002 38C39.0668 38 38.2775 37.6773 37.6322 37.032C36.9868 36.3867 36.6651 35.5982 36.6668 34.6667C36.6686 33.7351 36.9913 32.9458 37.6348 32.2987C38.2784 31.6516 39.0668 31.3298 40.0002 31.3333C40.9335 31.3369 41.7228 31.6596 42.3682 32.3013C43.0135 32.9431 43.3353 33.7316 43.3335 34.6667C43.3317 35.6018 43.0091 36.3911 42.3655 37.0347C41.7219 37.6782 40.9335 38 40.0002 38Z" fill="black"/></svg>');
  --face-2: url('data:image/svg+xml;utf8,<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.2666 5.33301C15.6219 5.33301 17.7891 5.90016 19.7676 7.03418C21.7462 8.1684 23.335 9.73518 24.5332 11.7334C25.6887 11.3778 26.9004 11.1114 28.168 10.9336C29.4355 10.7558 30.7129 10.667 32 10.667C35.6889 10.667 39.1559 11.3667 42.4004 12.7676C45.6447 14.1684 48.4663 16.0687 50.8662 18.4668C53.2662 20.865 55.1675 23.6874 56.5684 26.9336C57.9691 30.1796 58.6687 33.6462 58.667 37.333C58.6652 41.0201 57.9645 44.4872 56.5654 47.7334C55.1663 50.9796 53.2662 53.802 50.8662 56.2002C48.4664 58.5982 45.6446 60.4988 42.4004 61.9014C39.1559 63.304 35.6889 64.0036 32 64C28.3111 64 24.8441 63.2993 21.5996 61.8984C18.3555 60.4976 15.5336 58.5982 13.1338 56.2002C10.7338 53.802 8.83368 50.9796 7.43457 47.7334C6.03546 44.4872 5.33479 41.0201 5.33301 37.333C5.33302 36.0442 5.42185 34.7666 5.59961 33.501C5.77739 32.2353 6.04486 31.0235 6.40039 29.8662C4.48928 28.7107 2.94447 27.1449 1.76758 25.168C0.59077 23.1911 0.00177772 21.0013 0 18.5996C8.98306e-05 14.911 1.28874 11.7778 3.86621 9.2002C6.44397 6.62243 9.57774 5.33302 13.2666 5.33301ZM26 22.1338C24.5778 25.6003 22.5448 28.6116 19.9014 31.168C17.2579 33.7244 14.1798 35.6465 10.667 36.9336V37.333C10.667 43.2885 12.733 48.3335 16.8662 52.4668C20.9995 56.6001 26.0444 58.667 32 58.667C37.9556 58.667 43.0005 56.6001 47.1338 52.4668C51.267 48.3335 53.333 43.2885 53.333 37.333C53.333 36.2665 53.2671 35.2334 53.1338 34.2344C53.0004 33.2353 52.7559 32.268 52.4004 31.333C51.4671 31.5552 50.5329 31.723 49.5996 31.835C48.6665 31.9469 47.6889 32.0018 46.667 32C42.6227 32 38.8001 31.1336 35.2002 29.4004C31.6003 27.6671 28.5333 25.2448 26 22.1338ZM24 36.667C24.9333 36.6705 25.7228 36.993 26.3682 37.6348C27.0134 38.2765 27.3348 39.065 27.333 40C27.3312 40.9351 27.0088 41.7246 26.3652 42.3682C25.7217 43.0116 24.9333 43.333 24 43.333C23.0667 43.333 22.2772 43.0106 21.6318 42.3652C20.9866 41.7199 20.6652 40.9315 20.667 40C20.6688 39.0684 20.9912 38.2789 21.6348 37.6318C22.2783 36.9848 23.0667 36.6634 24 36.667ZM40 36.667C40.9333 36.6705 41.7228 36.993 42.3682 37.6348C43.0134 38.2765 43.3348 39.065 43.333 40C43.3312 40.9351 43.0088 41.7246 42.3652 42.3682C41.7217 43.0116 40.9333 43.333 40 43.333C39.0667 43.333 38.2772 43.0106 37.6318 42.3652C36.9866 41.7199 36.6652 40.9315 36.667 40C36.6688 39.0684 36.9912 38.2789 37.6348 37.6318C38.2783 36.9848 39.0667 36.6634 40 36.667ZM21.5332 18.7334C19.2666 20.0223 17.2885 21.689 15.5996 23.7334C13.9109 25.7777 12.6442 28.0665 11.7998 30.5996C14.0665 29.3107 16.0445 27.644 17.7334 25.5996C19.4222 23.5553 20.6888 21.2666 21.5332 18.7334ZM32 16C31.3778 16 30.7779 16.034 30.2002 16.1016C29.6225 16.1691 29.0225 16.2459 28.4004 16.333C30.2671 19.4441 32.8 21.9452 36 23.835C39.2 25.7247 42.7559 26.6688 46.667 26.667C47.2891 26.667 47.8891 26.633 48.4668 26.5654C49.0445 26.4979 49.6444 26.4201 50.2666 26.333C48.4 23.2221 45.8667 20.7229 42.667 18.835C39.467 16.947 35.9111 16.0018 32 16ZM13.2666 10.667C11.0444 10.667 9.16604 11.4336 7.63184 12.9678C6.0977 14.5019 5.33132 16.3793 5.33301 18.5996C5.33301 19.8885 5.62242 21.0671 6.2002 22.1338C6.77791 23.2002 7.53366 24.1108 8.4668 24.8662C9.71121 22.5108 11.2783 20.3889 13.168 18.501C15.0577 16.6131 17.1795 15.046 19.5332 13.7998C18.7777 12.8666 17.8664 12.1109 16.7998 11.5332C15.7332 10.9555 14.5554 10.667 13.2666 10.667Z" fill="black"/></svg>');
  --face-3: url('data:image/svg+xml;utf8,<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.0002 38C23.0668 38 22.2775 37.6773 21.6322 37.032C20.9868 36.3867 20.6651 35.5982 20.6668 34.6667C20.6686 33.7351 20.9913 32.9458 21.6348 32.2987C22.2784 31.6516 23.0668 31.3298 24.0002 31.3333C24.9335 31.3369 25.7228 31.6596 26.3682 32.3013C27.0135 32.9431 27.3353 33.7316 27.3335 34.6667C27.3317 35.6018 27.0091 36.3911 26.3655 37.0347C25.7219 37.6782 24.9335 38 24.0002 38ZM40.0002 38C39.0668 38 38.2775 37.6773 37.6322 37.032C36.9868 36.3867 36.6651 35.5982 36.6668 34.6667C36.6686 33.7351 36.9913 32.9458 37.6348 32.2987C38.2784 31.6516 39.0668 31.3298 40.0002 31.3333C40.9335 31.3369 41.7228 31.6596 42.3682 32.3013C43.0135 32.9431 43.3353 33.7316 43.3335 34.6667C43.3317 35.6018 43.0091 36.3911 42.3655 37.0347C41.7219 37.6782 40.9335 38 40.0002 38ZM32.0002 53.3333C37.9557 53.3333 43.0002 51.2667 47.1335 47.1333C51.2668 43 53.3335 37.9556 53.3335 32C53.3335 30.9333 53.2668 29.9004 53.1335 28.9013C53.0002 27.9022 52.7557 26.9351 52.4002 26C51.4668 26.2222 50.5335 26.3893 49.6002 26.5013C48.6668 26.6133 47.6891 26.6684 46.6668 26.6667C42.6224 26.6667 38.8002 25.8 35.2002 24.0667C31.6002 22.3333 28.5335 19.9111 26.0002 16.8C24.5779 20.2667 22.5451 23.2782 19.9015 25.8347C17.2579 28.3911 14.1797 30.3129 10.6668 31.6V32C10.6668 37.9556 12.7335 43 16.8668 47.1333C21.0002 51.2667 26.0446 53.3333 32.0002 53.3333ZM32.0002 58.6667C28.3113 58.6667 24.8446 57.9671 21.6002 56.568C18.3557 55.1689 15.5335 53.2685 13.1335 50.8667C10.7335 48.4649 8.83394 45.6427 7.43483 42.4C6.03572 39.1573 5.33528 35.6907 5.3335 32C5.33172 28.3093 6.03217 24.8427 7.43483 21.6C8.8375 18.3573 10.7371 15.5351 13.1335 13.1333C15.5299 10.7316 18.3522 8.832 21.6002 7.43467C24.8482 6.03733 28.3148 5.33689 32.0002 5.33333C35.6855 5.32978 39.1522 6.03022 42.4002 7.43467C45.6482 8.83911 48.4704 10.7387 50.8668 13.1333C53.2633 15.528 55.1637 18.3502 56.5682 21.6C57.9726 24.8498 58.6722 28.3164 58.6668 32C58.6615 35.6836 57.9611 39.1502 56.5655 42.4C55.1699 45.6498 53.2704 48.472 50.8668 50.8667C48.4633 53.2613 45.6411 55.1618 42.4002 56.568C39.1593 57.9742 35.6926 58.6738 32.0002 58.6667Z" fill="black"/></svg>');
  --face-4: url('data:image/svg+xml;utf8,<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M32.0002 58.6667C28.3557 58.6667 24.9113 57.9662 21.6668 56.5653C18.4224 55.1644 15.5895 53.2533 13.1682 50.832C10.7468 48.4107 8.83572 45.5778 7.43483 42.3333C6.03394 39.0889 5.3335 35.6444 5.3335 32C5.3335 28.3111 6.03394 24.8444 7.43483 21.6C8.83572 18.3556 10.7468 15.5333 13.1682 13.1333C15.5895 10.7333 18.4224 8.83378 21.6668 7.43467C24.9113 6.03556 28.3557 5.33511 32.0002 5.33334C35.6891 5.33334 39.1557 6.03378 42.4002 7.43467C45.6446 8.83556 48.4668 10.7351 50.8668 13.1333C53.2668 15.5316 55.1673 18.3538 56.5682 21.6C57.9691 24.8462 58.6686 28.3129 58.6668 32C58.6668 35.6444 57.9664 39.0889 56.5655 42.3333C55.1646 45.5778 53.2651 48.4116 50.8668 50.8347C48.4686 53.2578 45.6464 55.1689 42.4002 56.568C39.1539 57.9671 35.6873 58.6667 32.0002 58.6667ZM32.0002 10.6667C27.0668 10.6667 22.7113 12.1449 18.9335 15.1013C15.1557 18.0578 12.6446 21.824 11.4002 26.4H14.4668L19.7335 16H44.3335L49.6002 26.4H52.6002C51.3557 21.8222 48.8562 18.056 45.1015 15.1013C41.3468 12.1467 36.9797 10.6684 32.0002 10.6667ZM32.0002 53.3333C37.9557 53.3333 43.0117 51.2444 47.1682 47.0667C51.3246 42.8889 53.3797 37.8222 53.3335 31.8667V31.7333H46.3335L41.0668 21.3333H23.0002L17.7335 31.7333H10.6668V31.9333C10.6668 37.8889 12.7451 42.9449 16.9015 47.1013C21.0579 51.2578 26.0908 53.3351 32.0002 53.3333ZM24.0002 38C23.0668 38 22.2775 37.6773 21.6322 37.032C20.9868 36.3867 20.6651 35.5982 20.6668 34.6667C20.6686 33.7351 20.9913 32.9458 21.6348 32.2987C22.2784 31.6516 23.0668 31.3298 24.0002 31.3333C24.9335 31.3369 25.7228 31.6596 26.3682 32.3013C27.0135 32.9431 27.3353 33.7316 27.3335 34.6667C27.3317 35.6018 27.0091 36.3911 26.3655 37.0347C25.7219 37.6782 24.9335 38 24.0002 38ZM40.0002 38C39.0668 38 38.2775 37.6773 37.6322 37.032C36.9868 36.3867 36.6651 35.5982 36.6668 34.6667C36.6686 33.7351 36.9913 32.9458 37.6348 32.2987C38.2784 31.6516 39.0668 31.3298 40.0002 31.3333C40.9335 31.3369 41.7228 31.6596 42.3682 32.3013C43.0135 32.9431 43.3353 33.7316 43.3335 34.6667C43.3317 35.6018 43.0091 36.3911 42.3655 37.0347C41.7219 37.6782 40.9335 38 40.0002 38Z" fill="black"/></svg>');
  --face-5: url('data:image/svg+xml;utf8,<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 43.3333C23.0667 43.3333 22.2773 43.0107 21.632 42.3653C20.9867 41.72 20.6649 40.9316 20.6667 40C20.6684 39.0684 20.9911 38.2791 21.6347 37.632C22.2782 36.9849 23.0667 36.6631 24 36.6667C24.9333 36.6702 25.7227 36.9929 26.368 37.6347C27.0133 38.2764 27.3351 39.0649 27.3333 40C27.3316 40.9351 27.0089 41.7244 26.3653 42.368C25.7218 43.0116 24.9333 43.3333 24 43.3333ZM40 43.3333C39.0667 43.3333 38.2773 43.0107 37.632 42.3653C36.9867 41.72 36.6649 40.9316 36.6667 40C36.6684 39.0684 36.9911 38.2791 37.6347 37.632C38.2782 36.9849 39.0667 36.6631 40 36.6667C40.9333 36.6702 41.7227 36.9929 42.368 37.6347C43.0133 38.2764 43.3351 39.0649 43.3333 40C43.3316 40.9351 43.0089 41.7244 42.3653 42.368C41.7218 43.0116 40.9333 43.3333 40 43.3333ZM32 58.6667C37.9556 58.6667 43 56.6 47.1333 52.4667C51.2667 48.3333 53.3333 43.2889 53.3333 37.3333C53.3333 36.2667 53.2667 35.2338 53.1333 34.2347C53 33.2356 52.7556 32.2684 52.4 31.3333C51.4667 31.5556 50.5333 31.7227 49.6 31.8347C48.6667 31.9467 47.6889 32.0018 46.6667 32C42.6222 32 38.8 31.1333 35.2 29.4C31.6 27.6667 28.5333 25.2444 26 22.1333C24.5778 25.6 22.5449 28.6116 19.9013 31.168C17.2578 33.7244 14.1796 35.6462 10.6667 36.9333V37.3333C10.6667 43.2889 12.7333 48.3333 16.8667 52.4667C21 56.6 26.0444 58.6667 32 58.6667ZM32 64C28.3111 64 24.8444 63.3004 21.6 61.9013C18.3556 60.5022 15.5333 58.6018 13.1333 56.2C10.7333 53.7982 8.83378 50.976 7.43467 47.7333C6.03556 44.4907 5.33511 41.024 5.33333 37.3333C5.33333 36.0444 5.42222 34.7671 5.6 33.5013C5.77778 32.2356 6.04444 31.024 6.4 29.8667C4.48889 28.7111 2.94489 27.1449 1.768 25.168C0.591111 23.1911 0.00177778 21.0018 0 18.6C0 14.9111 1.28889 11.7778 3.86667 9.2C6.44444 6.62223 9.57778 5.33334 13.2667 5.33334C15.6222 5.33334 17.7893 5.90045 19.768 7.03467C21.7467 8.16889 23.3351 9.73511 24.5333 11.7333C25.6889 11.3778 26.9004 11.1111 28.168 10.9333C29.4356 10.7556 30.7129 10.6667 32 10.6667C35.6889 10.6667 39.1556 11.3671 42.4 12.768C45.6444 14.1689 48.4667 16.0684 50.8667 18.4667C53.2667 20.8649 55.1671 23.6871 56.568 26.9333C57.9689 30.1796 58.6684 33.6462 58.6667 37.3333C58.6649 41.0204 57.9644 44.4871 56.5653 47.7333C55.1662 50.9796 53.2667 53.8018 50.8667 56.2C48.4667 58.5982 45.6444 60.4987 42.4 61.9013C39.1556 63.304 35.6889 64.0036 32 64Z" fill="black"/></svg>');
  --face-6: url('data:image/svg+xml;utf8,<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M32.0002 16C31.6446 16 31.3335 15.8667 31.0668 15.6C30.8002 15.3333 30.6668 15.0222 30.6668 14.6667C30.6668 14.3111 30.8002 14 31.0668 13.7333C31.3335 13.4667 31.6446 13.3333 32.0002 13.3333C32.3557 13.3333 32.6668 13.4667 32.9335 13.7333C33.2002 14 33.3335 14.3111 33.3335 14.6667C33.3335 15.0222 33.2002 15.3333 32.9335 15.6C32.6668 15.8667 32.3557 16 32.0002 16ZM37.3335 16C36.9779 16 36.6668 15.8667 36.4002 15.6C36.1335 15.3333 36.0002 15.0222 36.0002 14.6667C36.0002 14.3111 36.1335 14 36.4002 13.7333C36.6668 13.4667 36.9779 13.3333 37.3335 13.3333C37.6891 13.3333 38.0002 13.4667 38.2668 13.7333C38.5335 14 38.6668 14.3111 38.6668 14.6667C38.6668 15.0222 38.5335 15.3333 38.2668 15.6C38.0002 15.8667 37.6891 16 37.3335 16ZM26.6668 16C26.3113 16 26.0002 15.8667 25.7335 15.6C25.4668 15.3333 25.3335 15.0222 25.3335 14.6667C25.3335 14.3111 25.4668 14 25.7335 13.7333C26.0002 13.4667 26.3113 13.3333 26.6668 13.3333C27.0224 13.3333 27.3335 13.4667 27.6002 13.7333C27.8668 14 28.0002 14.3111 28.0002 14.6667C28.0002 15.0222 27.8668 15.3333 27.6002 15.6C27.3335 15.8667 27.0224 16 26.6668 16ZM45.3335 18.6667C44.9779 18.6667 44.6668 18.5333 44.4002 18.2667C44.1335 18 44.0002 17.6889 44.0002 17.3333C44.0002 16.9778 44.1335 16.6667 44.4002 16.4C44.6668 16.1333 44.9779 16 45.3335 16C45.6891 16 46.0002 16.1333 46.2668 16.4C46.5335 16.6667 46.6668 16.9778 46.6668 17.3333C46.6668 17.6889 46.5335 18 46.2668 18.2667C46.0002 18.5333 45.6891 18.6667 45.3335 18.6667ZM24.0002 18.6667C23.6446 18.6667 23.3335 18.5333 23.0668 18.2667C22.8002 18 22.6668 17.6889 22.6668 17.3333C22.6668 16.9778 22.8002 16.6667 23.0668 16.4C23.3335 16.1333 23.6446 16 24.0002 16C24.3557 16 24.6668 16.1333 24.9335 16.4C25.2002 16.6667 25.3335 16.9778 25.3335 17.3333C25.3335 17.6889 25.2002 18 24.9335 18.2667C24.6668 18.5333 24.3557 18.6667 24.0002 18.6667ZM18.6668 18.6667C18.3113 18.6667 18.0002 18.5333 17.7335 18.2667C17.4668 18 17.3335 17.6889 17.3335 17.3333C17.3335 16.9778 17.4668 16.6667 17.7335 16.4C18.0002 16.1333 18.3113 16 18.6668 16C19.0224 16 19.3335 16.1333 19.6002 16.4C19.8668 16.6667 20.0002 16.9778 20.0002 17.3333C20.0002 17.6889 19.8668 18 19.6002 18.2667C19.3335 18.5333 19.0224 18.6667 18.6668 18.6667ZM29.3335 18.6667C28.9779 18.6667 28.6668 18.5333 28.4002 18.2667C28.1335 18 28.0002 17.6889 28.0002 17.3333C28.0002 16.9778 28.1335 16.6667 28.4002 16.4C28.6668 16.1333 28.9779 16 29.3335 16C29.6891 16 30.0002 16.1333 30.2668 16.4C30.5335 16.6667 30.6668 16.9778 30.6668 17.3333C30.6668 17.6889 30.5335 18 30.2668 18.2667C30.0002 18.5333 29.6891 18.6667 29.3335 18.6667ZM34.6668 18.6667C34.3113 18.6667 34.0002 18.5333 33.7335 18.2667C33.4668 18 33.3335 17.6889 33.3335 17.3333C33.3335 16.9778 33.4668 16.6667 33.7335 16.4C34.0002 16.1333 34.3113 16 34.6668 16C35.0224 16 35.3335 16.1333 35.6002 16.4C35.8668 16.6667 36.0002 16.9778 36.0002 17.3333C36.0002 17.6889 35.8668 18 35.6002 18.2667C35.3335 18.5333 35.0224 18.6667 34.6668 18.6667ZM40.0002 18.6667C39.6446 18.6667 39.3335 18.5333 39.0668 18.2667C38.8002 18 38.6668 17.6889 38.6668 17.3333C38.6668 16.9778 38.8002 16.6667 39.0668 16.4C39.3335 16.1333 39.6446 16 40.0002 16C40.3557 16 40.6668 16.1333 40.9335 16.4C41.2002 16.6667 41.3335 16.9778 41.3335 17.3333C41.3335 17.6889 41.2002 18 40.9335 18.2667C40.6668 18.5333 40.3557 18.6667 40.0002 18.6667ZM32.0002 21.3333C31.6446 21.3333 31.3335 21.2 31.0668 20.9333C30.8002 20.6667 30.6668 20.3556 30.6668 20C30.6668 19.6444 30.8002 19.3333 31.0668 19.0667C31.3335 18.8 31.6446 18.6667 32.0002 18.6667C32.3557 18.6667 32.6668 18.8 32.9335 19.0667C33.2002 19.3333 33.3335 19.6444 33.3335 20C33.3335 20.3556 33.2002 20.6667 32.9335 20.9333C32.6668 21.2 32.3557 21.3333 32.0002 21.3333ZM37.3335 21.3333C36.9779 21.3333 36.6668 21.2 36.4002 20.9333C36.1335 20.6667 36.0002 20.3556 36.0002 20C36.0002 19.6444 36.1335 19.3333 36.4002 19.0667C36.6668 18.8 36.9779 18.6667 37.3335 18.6667C37.6891 18.6667 38.0002 18.8 38.2668 19.0667C38.5335 19.3333 38.6668 19.6444 38.6668 20C38.6668 20.3556 38.5335 20.6667 38.2668 20.9333C38.0002 21.2 37.6891 21.3333 37.3335 21.3333ZM42.6668 21.3333C42.3113 21.3333 42.0002 21.2 41.7335 20.9333C41.4668 20.6667 41.3335 20.3556 41.3335 20C41.3335 19.6444 41.4668 19.3333 41.7335 19.0667C42.0002 18.8 42.3113 18.6667 42.6668 18.6667C43.0224 18.6667 43.3335 18.8 43.6002 19.0667C43.8668 19.3333 44.0002 19.6444 44.0002 20C44.0002 20.3556 43.8668 20.6667 43.6002 20.9333C43.3335 21.2 43.0224 21.3333 42.6668 21.3333ZM26.6668 21.3333C26.3113 21.3333 26.0002 21.2 25.7335 20.9333C25.4668 20.6667 25.3335 20.3556 25.3335 20C25.3335 19.6444 25.4668 19.3333 25.7335 19.0667C26.0002 18.8 26.3113 18.6667 26.6668 18.6667C27.0224 18.6667 27.3335 18.8 27.6002 19.0667C27.8668 19.3333 28.0002 19.6444 28.0002 20C28.0002 20.3556 27.8668 20.6667 27.6002 20.9333C27.3335 21.2 27.0224 21.3333 26.6668 21.3333ZM21.3335 21.3333C20.9779 21.3333 20.6668 21.2 20.4002 20.9333C20.1335 20.6667 20.0002 20.3556 20.0002 20C20.0002 19.6444 20.1335 19.3333 20.4002 19.0667C20.6668 18.8 20.9779 18.6667 21.3335 18.6667C21.6891 18.6667 22.0002 18.8 22.2668 19.0667C22.5335 19.3333 22.6668 19.6444 22.6668 20C22.6668 20.3556 22.5335 20.6667 22.2668 20.9333C22.0002 21.2 21.6891 21.3333 21.3335 21.3333ZM24.0002 24C23.6446 24 23.3335 23.8667 23.0668 23.6C22.8002 23.3333 22.6668 23.0222 22.6668 22.6667C22.6668 22.3111 22.8002 22 23.0668 21.7333C23.3335 21.4667 23.6446 21.3333 24.0002 21.3333C24.3557 21.3333 24.6668 21.4667 24.9335 21.7333C25.2002 22 25.3335 22.3111 25.3335 22.6667C25.3335 23.0222 25.2002 23.3333 24.9335 23.6C24.6668 23.8667 24.3557 24 24.0002 24ZM18.6668 24C18.3113 24 18.0002 23.8667 17.7335 23.6C17.4668 23.3333 17.3335 23.0222 17.3335 22.6667C17.3335 22.3111 17.4668 22 17.7335 21.7333C18.0002 21.4667 18.3113 21.3333 18.6668 21.3333C19.0224 21.3333 19.3335 21.4667 19.6002 21.7333C19.8668 22 20.0002 22.3111 20.0002 22.6667C20.0002 23.0222 19.8668 23.3333 19.6002 23.6C19.3335 23.8667 19.0224 24 18.6668 24ZM29.3335 24C28.9779 24 28.6668 23.8667 28.4002 23.6C28.1335 23.3333 28.0002 23.0222 28.0002 22.6667C28.0002 22.3111 28.1335 22 28.4002 21.7333C28.6668 21.4667 28.9779 21.3333 29.3335 21.3333C29.6891 21.3333 30.0002 21.4667 30.2668 21.7333C30.5335 22 30.6668 22.3111 30.6668 22.6667C30.6668 23.0222 30.5335 23.3333 30.2668 23.6C30.0002 23.8667 29.6891 24 29.3335 24ZM34.6668 24C34.3113 24 34.0002 23.8667 33.7335 23.6C33.4668 23.3333 33.3335 23.0222 33.3335 22.6667C33.3335 22.3111 33.4668 22 33.7335 21.7333C34.0002 21.4667 34.3113 21.3333 34.6668 21.3333C35.0224 21.3333 35.3335 21.4667 35.6002 21.7333C35.8668 22 36.0002 22.3111 36.0002 22.6667C36.0002 23.0222 35.8668 23.3333 35.6002 23.6C35.3335 23.8667 35.0224 24 34.6668 24ZM40.0002 24C39.6446 24 39.3335 23.8667 39.0668 23.6C38.8002 23.3333 38.6668 23.0222 38.6668 22.6667C38.6668 22.3111 38.8002 22 39.0668 21.7333C39.3335 21.4667 39.6446 21.3333 40.0002 21.3333C40.3557 21.3333 40.6668 21.4667 40.9335 21.7333C41.2002 22 41.3335 22.3111 41.3335 22.6667C41.3335 23.0222 41.2002 23.3333 40.9335 23.6C40.6668 23.8667 40.3557 24 40.0002 24ZM45.3335 24C44.9779 24 44.6668 23.8667 44.4002 23.6C44.1335 23.3333 44.0002 23.0222 44.0002 22.6667C44.0002 22.3111 44.1335 22 44.4002 21.7333C44.6668 21.4667 44.9779 21.3333 45.3335 21.3333C45.6891 21.3333 46.0002 21.4667 46.2668 21.7333C46.5335 22 46.6668 22.3111 46.6668 22.6667C46.6668 23.0222 46.5335 23.3333 46.2668 23.6C46.0002 23.8667 45.6891 24 45.3335 24ZM13.3335 24C12.9779 24 12.6668 23.8667 12.4002 23.6C12.1335 23.3333 12.0002 23.0222 12.0002 22.6667C12.0002 22.3111 12.1335 22 12.4002 21.7333C12.6668 21.4667 12.9779 21.3333 13.3335 21.3333C13.6891 21.3333 14.0002 21.4667 14.2668 21.7333C14.5335 22 14.6668 22.3111 14.6668 22.6667C14.6668 23.0222 14.5335 23.3333 14.2668 23.6C14.0002 23.8667 13.6891 24 13.3335 24ZM16.0002 21.3333C15.6446 21.3333 15.3335 21.2 15.0668 20.9333C14.8002 20.6667 14.6668 20.3556 14.6668 20C14.6668 19.6444 14.8002 19.3333 15.0668 19.0667C15.3335 18.8 15.6446 18.6667 16.0002 18.6667C16.3557 18.6667 16.6668 18.8 16.9335 19.0667C17.2002 19.3333 17.3335 19.6444 17.3335 20C17.3335 20.3556 17.2002 20.6667 16.9335 20.9333C16.6668 21.2 16.3557 21.3333 16.0002 21.3333ZM21.3335 16C20.9779 16 20.6668 15.8667 20.4002 15.6C20.1335 15.3333 20.0002 15.0222 20.0002 14.6667C20.0002 14.3111 20.1335 14 20.4002 13.7333C20.6668 13.4667 20.9779 13.3333 21.3335 13.3333C21.6891 13.3333 22.0002 13.4667 22.2668 13.7333C22.5335 14 22.6668 14.3111 22.6668 14.6667C22.6668 15.0222 22.5335 15.3333 22.2668 15.6C22.0002 15.8667 21.6891 16 21.3335 16ZM24.0002 13.3333C23.6446 13.3333 23.3335 13.2 23.0668 12.9333C22.8002 12.6667 22.6668 12.3556 22.6668 12C22.6668 11.6444 22.8002 11.3333 23.0668 11.0667C23.3335 10.8 23.6446 10.6667 24.0002 10.6667C24.3557 10.6667 24.6668 10.8 24.9335 11.0667C25.2002 11.3333 25.3335 11.6444 25.3335 12C25.3335 12.3556 25.2002 12.6667 24.9335 12.9333C24.6668 13.2 24.3557 13.3333 24.0002 13.3333ZM29.3335 13.3333C28.9779 13.3333 28.6668 13.2 28.4002 12.9333C28.1335 12.6667 28.0002 12.3556 28.0002 12C28.0002 11.6444 28.1335 11.3333 28.4002 11.0667C28.6668 10.8 28.9779 10.6667 29.3335 10.6667C29.6891 10.6667 30.0002 10.8 30.2668 11.0667C30.5335 11.3333 30.6668 11.6444 30.6668 12C30.6668 12.3556 30.5335 12.6667 30.2668 12.9333C30.0002 13.2 29.6891 13.3333 29.3335 13.3333ZM34.6668 13.3333C34.3113 13.3333 34.0002 13.2 33.7335 12.9333C33.4668 12.6667 33.3335 12.3556 33.3335 12C33.3335 11.6444 33.4668 11.3333 33.7335 11.0667C34.0002 10.8 34.3113 10.6667 34.6668 10.6667C35.0224 10.6667 35.3335 10.8 35.6002 11.0667C35.8668 11.3333 36.0002 11.6444 36.0002 12C36.0002 12.3556 35.8668 12.6667 35.6002 12.9333C35.3335 13.2 35.0224 13.3333 34.6668 13.3333ZM40.0002 13.3333C39.6446 13.3333 39.3335 13.2 39.0668 12.9333C38.8002 12.6667 38.6668 12.3556 38.6668 12C38.6668 11.6444 38.8002 11.3333 39.0668 11.0667C39.3335 10.8 39.6446 10.6667 40.0002 10.6667C40.3557 10.6667 40.6668 10.8 40.9335 11.0667C41.2002 11.3333 41.3335 11.6444 41.3335 12C41.3335 12.3556 41.2002 12.6667 40.9335 12.9333C40.6668 13.2 40.3557 13.3333 40.0002 13.3333ZM42.6668 16C42.3113 16 42.0002 15.8667 41.7335 15.6C41.4668 15.3333 41.3335 15.0222 41.3335 14.6667C41.3335 14.3111 41.4668 14 41.7335 13.7333C42.0002 13.4667 42.3113 13.3333 42.6668 13.3333C43.0224 13.3333 43.3335 13.4667 43.6002 13.7333C43.8668 14 44.0002 14.3111 44.0002 14.6667C44.0002 15.0222 43.8668 15.3333 43.6002 15.6C43.3335 15.8667 43.0224 16 42.6668 16ZM48.0002 21.3333C47.6446 21.3333 47.3335 21.2 47.0668 20.9333C46.8002 20.6667 46.6668 20.3556 46.6668 20C46.6668 19.6444 46.8002 19.3333 47.0668 19.0667C47.3335 18.8 47.6446 18.6667 48.0002 18.6667C48.3557 18.6667 48.6668 18.8 48.9335 19.0667C49.2002 19.3333 49.3335 19.6444 49.3335 20C49.3335 20.3556 49.2002 20.6667 48.9335 20.9333C48.6668 21.2 48.3557 21.3333 48.0002 21.3333ZM50.6668 24C50.3113 24 50.0002 23.8667 49.7335 23.6C49.4668 23.3333 49.3335 23.0222 49.3335 22.6667C49.3335 22.3111 49.4668 22 49.7335 21.7333C50.0002 21.4667 50.3113 21.3333 50.6668 21.3333C51.0224 21.3333 51.3335 21.4667 51.6002 21.7333C51.8668 22 52.0002 22.3111 52.0002 22.6667C52.0002 23.0222 51.8668 23.3333 51.6002 23.6C51.3335 23.8667 51.0224 24 50.6668 24ZM24.0002 38C23.0668 38 22.2775 37.6773 21.6322 37.032C20.9868 36.3867 20.6651 35.5982 20.6668 34.6667C20.6686 33.7351 20.9913 32.9458 21.6348 32.2987C22.2784 31.6516 23.0668 31.3298 24.0002 31.3333C24.9335 31.3369 25.7228 31.6596 26.3682 32.3013C27.0135 32.9431 27.3353 33.7316 27.3335 34.6667C27.3317 35.6018 27.0091 36.3911 26.3655 37.0347C25.7219 37.6782 24.9335 38 24.0002 38ZM40.0002 38C39.0668 38 38.2775 37.6773 37.6322 37.032C36.9868 36.3867 36.6651 35.5982 36.6668 34.6667C36.6686 33.7351 36.9913 32.9458 37.6348 32.2987C38.2784 31.6516 39.0668 31.3298 40.0002 31.3333C40.9335 31.3369 41.7228 31.6596 42.3682 32.3013C43.0135 32.9431 43.3353 33.7316 43.3335 34.6667C43.3317 35.6018 43.0091 36.3911 42.3655 37.0347C41.7219 37.6782 40.9335 38 40.0002 38ZM32.0002 58.6667C28.3557 58.6667 24.9113 57.9662 21.6668 56.5653C18.4224 55.1644 15.5895 53.2533 13.1682 50.832C10.7468 48.4107 8.83572 45.5778 7.43483 42.3333C6.03394 39.0889 5.3335 35.6444 5.3335 32C5.3335 28.3111 6.03394 24.8444 7.43483 21.6C8.83572 18.3556 10.7468 15.5333 13.1682 13.1333C15.5895 10.7333 18.4224 8.83378 21.6668 7.43467C24.9113 6.03556 28.3557 5.33511 32.0002 5.33334C35.6891 5.33334 39.1557 6.03378 42.4002 7.43467C45.6446 8.83556 48.4668 10.7351 50.8668 13.1333C53.2668 15.5316 55.1673 18.3538 56.5682 21.6C57.9691 24.8462 58.6686 28.3129 58.6668 32C58.6668 35.6444 57.9664 39.0889 56.5655 42.3333C55.1646 45.5778 53.2651 48.4116 50.8668 50.8347C48.4686 53.2578 45.6464 55.1689 42.4002 56.568C39.1539 57.9671 35.6873 58.6667 32.0002 58.6667ZM32.0002 53.3333C37.9557 53.3333 43.0002 51.256 47.1335 47.1013C51.2668 42.9467 53.3335 37.9129 53.3335 32C53.3335 26.0444 51.2668 21 47.1335 16.8667C43.0002 12.7333 37.9557 10.6667 32.0002 10.6667C26.0891 10.6667 21.0553 12.7333 16.8988 16.8667C12.7424 21 10.6651 26.0444 10.6668 32C10.6668 37.9111 12.7451 42.9449 16.9015 47.1013C21.0579 51.2578 26.0908 53.3351 32.0002 53.3333Z" fill="black"/></svg>');
}

.p-voices__examples {
  height: 20rem;
  position: relative;
}
.p-voices__example {
  width: 120dvw;
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
}
.p-voices__example:nth-child(1) {
  rotate: -12.18deg;
  translate: -50% -60%;
  z-index: 3;
}
.p-voices__example:nth-child(1) .c-voices__card:nth-of-type(2) {
  --face: var(--face-1);
}
.p-voices__example:nth-child(1) .c-voices__card:nth-of-type(2) {
  --face: var(--face-2);
}
.p-voices__example:nth-child(1) .c-voices__card:nth-of-type(3) {
  --face: var(--face-3);
}
.p-voices__example:nth-child(1) .c-voices__card:nth-of-type(4) {
  --face: var(--face-4);
}
.p-voices__example:nth-child(1) .c-voices__card:nth-of-type(5) {
  --face: var(--face-5);
}
.p-voices__example:nth-child(1) .c-voices__card:nth-of-type(6) {
  --face: var(--face-6);
}
.p-voices__example:nth-child(2) {
  rotate: 4deg;
  translate: -50% -100%;
  z-index: 2;
}
.p-voices__example:nth-child(2) .c-voices__card:nth-of-type(1) {
  --face: var(--face-4);
}
.p-voices__example:nth-child(2) .c-voices__card:nth-of-type(2) {
  --face: var(--face-5);
}
.p-voices__example:nth-child(2) .c-voices__card:nth-of-type(3) {
  --face: var(--face-6);
}
.p-voices__example:nth-child(2) .c-voices__card:nth-of-type(4) {
  --face: var(--face-1);
}
.p-voices__example:nth-child(2) .c-voices__card:nth-of-type(5) {
  --face: var(--face-2);
}
.p-voices__example:nth-child(2) .c-voices__card:nth-of-type(6) {
  --face: var(--face-3);
}
.p-voices__example:nth-child(3) {
  rotate: 1deg;
  translate: -50% 10%;
  z-index: 1;
}
.p-voices__example:nth-child(3) .c-voices__card:nth-of-type(1) {
  --face: var(--face-5);
}
.p-voices__example:nth-child(3) .c-voices__card:nth-of-type(2) {
  --face: var(--face-6);
}
.p-voices__example:nth-child(3) .c-voices__card:nth-of-type(3) {
  --face: var(--face-1);
}
.p-voices__example:nth-child(3) .c-voices__card:nth-of-type(4) {
  --face: var(--face-2);
}
.p-voices__example:nth-child(3) .c-voices__card:nth-of-type(5) {
  --face: var(--face-3);
}
.p-voices__example:nth-child(3) .c-voices__card:nth-of-type(6) {
  --face: var(--face-4);
}

.p-hiro {
  --hiroPositionY: 100%;
  --animationName: none;
}
.p-hiro.is-appear {
  --hiroPositionY: 0;
  --animationName: changeImages;
}
.p-hiro__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--darkColor);
  padding-block: var(--space-md);
  padding-inline: var(--space-lg);
  margin-block: 8rem 0;
  border-radius: var(--radius-md);
  position: relative;
  z-index: 1;
}
@container (width <= 768px) {
  .p-hiro__container {
    grid-template-columns: 1fr;
    margin-block: 16rem 0;
    margin-inline: -1rem;
    padding-inline: var(--space-sm);
  }
}
@container (width <= 400px) {
  .p-hiro__container {
    margin-block: 12rem 0;
  }
}
.p-hiro__texts {
  color: #fff;
}
.p-hiro__copy {
  text-align: left;
}
.p-hiro__position {
  font-size: var(--font-size-body);
  font-weight: 600;
  margin-block: 1em 0;
}
.p-hiro__position strong {
  font-size: 1.2em;
  font-weight: 800;
}
.p-hiro__description {
  margin-block: 1em 0;
}
.p-hiro__image {
  position: relative;
}
@container (width <= 768px) {
  .p-hiro__image {
    order: -1;
    translate: 0 calc(var(--space-md) * -1);
  }
}
.p-hiro__imageCropper {
  width: 100%;
  aspect-ratio: 1;
  position: absolute;
  inset: auto auto 0 0;
  overflow: hidden;
}
.p-hiro img {
  display: block;
  width: 20rem;
  aspect-ratio: 1;
  position: absolute;
  inset: auto auto -2rem 50%;
  translate: -50% var(--hiroPositionY);
  transition: translate 0.4s ease-out;
}
@container (width <= 768px) {
  .p-hiro img {
    width: 16rem;
  }
}
@container (width <= 400px) {
  .p-hiro img {
    width: 14rem;
  }
}

.p-contents {
  overflow-y: clip;
  position: relative;
  z-index: 1;
  counter-reset: number 0;
}
.p-contents__head {
  counter-increment: number 1;
  color: #fff;
  text-align: center;
  background-color: var(--primaryColor);
  padding-block: var(--space-lg) calc(var(--space-xl) * 2);
  position: relative;
  overflow-x: clip;
}
@container (width <= 600px) {
  .p-contents__head {
    padding-block: var(--space-lg) calc(var(--space-xl) * 1.5);
  }
}
.p-contents__head::before, .p-contents__head::after {
  content: "";
  display: block;
  width: min(101dvw, var(--maxBodyWidth));
  aspect-ratio: 5/1;
  background: url('data:image/svg+xml;utf8,<svg width="1440" height="288" viewBox="0 0 1440 288" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1440 0C772.5 326.5 165.5 326.5 0 122.5V288H1440V0Z" fill="%230ad"/></svg>') no-repeat center/contain;
  position: absolute;
  z-index: -1;
  inset: 0 auto auto 50%;
  translate: -50% -99%;
  pointer-events: none;
}
.p-contents__head::after {
  inset: auto auto 0 50%;
  translate: -50% 99%;
  scale: -1 -1;
}
.p-contents__head--secondary {
  background-color: var(--secondaryColor);
}
.p-contents__head--secondary::before, .p-contents__head--secondary::after {
  background: url('data:image/svg+xml;utf8,<svg width="1440" height="288" viewBox="0 0 1440 288" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1440 0C772.5 326.5 165.5 326.5 0 122.5V288H1440V0Z" fill="%23028"/></svg>') no-repeat center/contain;
}
.p-contents__badge {
  width: 7.5rem;
  aspect-ratio: 1;
  margin-block: 0 var(--space-lg);
  animation: pulse 1s linear infinite;
}
@container (width <= 1000px) {
  .p-contents__badge {
    width: 5rem;
  }
}
@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
.p-contents__title {
  position: relative;
}
@container (width <= 400px) {
  .p-contents__title {
    font-size: 1.8rem;
  }
}
.p-contents__title::before {
  content: counter(number);
  color: transparent;
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke;
  font-size: 10em;
  position: absolute;
  inset: 0 auto auto 50%;
  translate: calc(-50% - 1.1em) -50%;
  opacity: 0.2;
}
@container (width <= 1000px) {
  .p-contents__title::before {
    font-size: 6em;
  }
}
@container (width <= 600px) {
  .p-contents__title::before {
    font-size: 5.5em;
  }
}
.p-contents__title::after {
  content: attr(data-english);
  font-size: 3em;
  position: absolute;
  inset: 0 auto auto 50%;
  translate: -50% -62%;
  opacity: 0.2;
}
@container (width <= 1000px) {
  .p-contents__title::after {
    font-size: 2em;
  }
}
@container (width <= 600px) {
  .p-contents__title::after {
    font-size: 1.6em;
  }
}
.p-contents__description {
  font-weight: 600;
  margin-block: 2.5em 0;
  padding-inline: 1.5rem;
}

.p-learning {
  padding-block: 0 calc(var(--space-xl) + var(--space-xl));
}
@container (width <= 600px) {
  .p-learning {
    padding-block: 0 var(--space-xl);
  }
}
.p-learning__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl) var(--space-md);
  margin-block: calc(var(--space-lg) * -1) 0;
}
@container (width <= 1000px) {
  .p-learning__list {
    gap: var(--space-lg) var(--space-sm);
  }
}
@container (width <= 768px) {
  .p-learning__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@container (width <= 600px) {
  .p-learning__list {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-xs);
  }
}
.p-learningCard {
  display: grid;
  place-items: center;
  background-color: #fff;
  border-radius: var(--radius-lg);
  padding-block: var(--space-md);
  padding-inline: var(--space-md);
  box-shadow: 0px 4px 8px -1px rgba(0, 0, 0, 0.2);
  opacity: 0;
  translate: 0 3rem;
}
@container (width <= 600px) {
  .p-learningCard {
    grid-template: " image title " auto " desc desc " auto/auto 1fr;
    padding-block: var(--space-sm);
    padding-inline: var(--space-sm);
    border-radius: var(--radius-md);
  }
}
.p-learningCard.is-appear {
  animation: appearCard 0.4s cubic-bezier(1, -0.433, 0.335, 1.582) forwards;
}
@keyframes appearCard {
  to {
    opacity: 1;
    translate: 0;
    rotate: 0deg;
  }
}
.p-learningCard:nth-child(1) {
  rotate: 8deg;
}
.p-learningCard:nth-child(2) {
  rotate: -4deg;
  animation-delay: 0.1s;
}
.p-learningCard:nth-child(3) {
  rotate: -8deg;
  animation-delay: 0.2s;
}
.p-learningCard:nth-child(4) {
  rotate: -6deg;
}
.p-learningCard:nth-child(5) {
  rotate: 4deg;
  animation-delay: 0.1s;
}
.p-learningCard:nth-child(6) {
  rotate: 12deg;
  animation-delay: 0.2s;
}
.p-learningCard__image {
  width: 6rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--darkColor);
  border-radius: var(--radius-md);
  margin-block: calc((var(--space-md) + 3rem) * -1) var(--space-sm);
  background-color: #fff;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.1);
  position: relative;
}
@container (width <= 600px) {
  .p-learningCard__image {
    grid-area: image;
    width: 4rem;
    border-radius: var(--radius-sm);
    margin-block: 0;
  }
}
.p-learningCard__image img {
  display: block;
  width: 4rem;
}
@container (width <= 600px) {
  .p-learningCard__image img {
    width: 2.4rem;
  }
}
.p-learningCard__badge {
  display: block;
  width: 4rem;
  aspect-ratio: 1;
}
.p-learningCard__title {
  display: grid;
  place-items: center;
  translate: -0.1em 0;
}
@container (width <= 600px) {
  .p-learningCard__title {
    grid-area: title;
  }
}
.p-learningCard__title span {
  font-weight: 600;
  letter-spacing: 0.12em;
  translate: 0.5em 0;
}
.p-learningCard__description {
  margin-block: 1.5em 0;
}
@container (width <= 600px) {
  .p-learningCard__description {
    grid-area: desc;
  }
}
.p-learningCard small {
  display: block;
  margin-block: 0.5em 0;
}
.p-learning__hint {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: min(100%, 1024px);
  margin-inline: auto;
  margin-block: 3rem 6rem;
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--lightColor2);
}
@container (width <= 600px) {
  .p-learning__hint {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}
.p-learning__hintTexts {
  padding: var(--space-xs);
}
@container (width <= 600px) {
  .p-learning__hintTexts {
    padding: 0;
  }
}
.p-learning__hint p {
  word-break: break-all;
  font-size: var(--font-size-sm);
}
.p-learning__hint p + p {
  margin-block: 0.5em 0;
}
.p-learning__hint img {
  display: block;
  width: 120px;
  margin-inline: auto;
}
@container (width <= 600px) {
  .p-learning__hint img {
    width: 100px;
    order: -1;
  }
}

.p-libraries {
  overflow-x: clip;
  --content: "Design.";
}
.p-libraries__gallery {
  margin-block: calc((var(--space-xl) + var(--space-md)) * -1) 0;
  translate: 0 3rem;
  opacity: 0;
}
.p-libraries__gallery.is-appear {
  animation: appearGallery 0.8s cubic-bezier(1, -0.433, 0.335, 1.582) forwards;
}
@keyframes appearGallery {
  to {
    opacity: 1;
    translate: 0;
  }
}
.p-libraries__texts {
  padding-block: var(--space-2xl) var(--space-lg);
  display: grid;
  place-items: center;
}
@container (width <= 768px) {
  .p-libraries__texts {
    padding-block: var(--space-xl);
    padding-inline: 1.5rem;
  }
}
.p-libraries__subcopy {
  margin-block: 0 2em;
}
.p-libraries__copy {
  display: inline-block;
}
.p-libraries__copy .break-mobile {
  display: none;
}
@container (width <= 768px) {
  .p-libraries__copy .break-mobile {
    display: block;
  }
}
.p-libraries__copy img {
  display: inline-block;
  width: 1.6em;
}
.p-libraries__description {
  text-align: center;
  font-weight: 600;
  margin-block: 2.5em 0;
}
.p-libraries__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
@container (width <= 768px) {
  .p-libraries__images {
    grid-template-columns: 1fr;
    width: min(600px, 100%);
    margin-inline: auto;
  }
}
.p-libraries__images img {
  display: block;
}
.p-libraries__design, .p-libraries__code {
  container-type: inline-size;
  aspect-ratio: 880/520;
  border: 2px solid var(--darkColor);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  rotate: 6.18deg;
}
.p-libraries__design::before, .p-libraries__code::before {
  content: var(--content);
  color: #fff;
  font-size: 10cqw;
  font-weight: 900;
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
}
.p-libraries__design {
  translate: -100% 0;
}
.p-libraries__code {
  --content: "Code.";
  translate: 100% 0;
}
.p-libraries .c-contents {
  margin-block-start: var(--space-2xl);
}
@container (width <= 768px) {
  .p-libraries .c-contents {
    margin-block-start: var(--space-xl);
  }
}

.p-flow {
  background-color: #fff;
  position: relative;
  overflow: hidden;
  padding-block-start: var(--space-2xl);
  padding-block-end: 0;
}
@container (width <= 768px) {
  .p-flow {
    padding-block-start: var(--space-xl);
  }
}
.p-flow::before {
  content: "";
  display: block;
  width: calc(min(100dvw, var(--maxBodyWidth)) * 2);
  height: 56px;
  background-size: 56px auto;
  background-image: url(../images/flow/wave.svg);
  background-repeat: repeat-x;
  position: absolute;
  inset: 0 auto auto 0;
  translate: calc(var(--flow-translate) * 2) 0; /* *4 を付与して、より大きく動くように*/
  will-change: translate; /* パフォーマンス向上のために追加 */
  transition: translate ease-out 0.2s;
}
@container (width <= 768px) {
  .p-flow::before {
    height: 48px;
    background-size: 48px auto;
  }
}
.p-flow > .c-heading {
  position: relative;
  z-index: 2;
  background-color: #fff; /* 背景色を指定 */
  padding-inline: 1.5rem;
  margin-block-end: var(--space-sm);
}
.p-flow__wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.p-flow__list {
  counter-reset: number 0;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px; /* リスト項目間の間隔 */
  width: fit-content; /* コンテンツ幅に合わせる */
  padding-inline: 20dvw;
}
@container (width <= 768px) {
  .p-flow__list {
    padding-inline: 5dvw;
  }
}
.p-flow__item {
  --backgroundImage: url(../images/flow/background-01.png);
  counter-increment: number 1;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 60dvw;
  padding-inline: var(--space-md);
  position: relative;
}
@container (width <= 768px) {
  .p-flow__item {
    width: 90dvw;
    padding-inline: var(--space-2xs);
  }
}
.p-flow__item:nth-of-type(2) {
  --backgroundImage: url(../images/flow/background-02.png);
}
.p-flow__item:nth-of-type(3) {
  --backgroundImage: url(../images/flow/background-03.png);
}
.p-flow__item::before {
  content: "";
  display: block;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 100%;
  position: absolute;
  inset: 4rem auto auto 50%;
  z-index: 1;
  translate: -50% -50%;
  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L9 17L4 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/1.6rem 1.6rem, var(--secondaryColor);
}
.p-flow__item::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--secondaryColor);
  position: absolute;
  inset: 4rem auto auto 50%;
}
.p-flow__item:last-child::after {
  content: none;
}
.p-flowCard {
  display: grid;
  place-items: center;
  width: min(100%, 800px);
  padding-block: calc(var(--space-2xl) + var(--space-md)) var(--space-2xl);
  position: relative;
}
.p-flowCard::before {
  content: counter(number, decimal-leading-zero) "";
  color: var(--lightColor2);
  font-size: 7em;
  font-weight: 800;
  position: absolute;
  inset: 60% auto auto 0;
  z-index: -1;
  translate: 0 -100%;
  rotate: -8deg;
}
.p-flowCard::after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 2/1;
  background: var(--backgroundImage) no-repeat center center/contain;
  position: absolute;
  inset: 100% auto auto 50%;
  translate: -50% -50%;
}
.p-flowCard img {
  display: block;
  width: 5rem;
  aspect-ratio: 1;
}
.p-flowCard__title {
  margin-block: 1em;
}
@container (width <= 768px) {
  .p-flowCard__title {
    font-size: min(1.8rem, 6.5cqw);
  }
}
.p-flowSupport {
  display: grid;
  grid-template: "image title desc" auto/120px auto 1fr;
  gap: 2rem;
  align-items: center;
  background-color: #fff;
  border: 2px solid var(--secondaryColor);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: #fff;
  box-shadow: 0px 8px 12px -4px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
}
@container (width <= 1000px) {
  .p-flowSupport {
    grid-template-columns: 100px auto 1fr;
  }
}
@container (width <= 768px) {
  .p-flowSupport {
    grid-template: "image title" auto "desc desc" auto/80px 1fr;
    gap: 1rem;
  }
}
@container (width <= 600px) {
  .p-flowSupport {
    grid-template-columns: 64px 1fr;
    padding: var(--space-md) var(--space-sm);
  }
}
@container (width <= 400px) {
  .p-flowSupport {
    margin-inline: -1rem;
  }
}
.p-flowSupport__image {
  grid-area: image;
  position: relative;
}
.p-flowSupport__image::before {
  content: "";
  display: block;
  width: 2rem;
  aspect-ratio: 1;
  background: url(../images/logos/tools/discord.svg) no-repeat center/contain;
  position: absolute;
  inset: 0 0 auto auto;
  translate: 30% -30%;
}
.p-flowSupport__title {
  grid-area: title;
  text-align: center;
}
.p-flowSupport__description {
  grid-area: desc;
}

.pin-spacer {
  pointer-events: none;
}

.p-works {
  padding-block: var(--space-2xl) 0;
  position: relative;
}
.p-works::after {
  content: "";
  display: block;
  width: 100dvw;
  height: 20dvw;
  background-color: var(--lightColor);
  position: absolute;
  inset: auto auto 0 0;
  z-index: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.p-works > .c-heading {
  margin-block-end: var(--space-md);
}
.p-works > .c-heading img {
  margin-block: 0 1rem;
  clip-path: inset(0 99.9999% 0 0);
  filter: blur(4px);
  opacity: 0;
  translate: -6rem 4rem;
}
.p-works > .c-heading img.is-appear {
  animation: appear-image 0.8s cubic-bezier(0.93, 0, 0, 0.99) forwards;
}
@keyframes appear-image {
  to {
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    opacity: 1;
    translate: 0;
  }
}
.p-works__copy {
  font-size: min(48px, 6.5cqw) !important;
  position: relative;
  word-break: keep-all;
}
@container (width <= 768px) {
  .p-works__copy {
    font-size: min(48px, 8cqw) !important;
  }
}
.p-works__copy::before {
  content: attr(data-text);
  position: absolute;
  inset: 0 auto auto 0;
  font-size: 1.5rem;
  translate: -30% -110%;
  letter-spacing: 0.12em;
}
@container (width <= 768px) {
  .p-works__copy::before {
    translate: 30% -110%;
  }
}

.p-work {
  --delay: 0s;
  --unit: calc(min(100dvw, var(--maxBodyWidth)) * 0.1082);
  --order: 2;
  --imageTranslate: 0;
  --backgroudColor: var(--primaryColor);
  --textPaddingBlock: 0 var(--space-md);
  --filter: none;
}
.p-work--inverse {
  --order: -1;
  --imageTranslate: calc(var(--space-md) * -1) 0;
  --textPaddingBlock: var(--space-lg) 0;
}
@container (width <= 768px) {
  .p-work--inverse {
    --order: 2;
  }
}
.p-work:nth-of-type(2) {
  --delay: .3s;
  --backgroudColor: #FF6791;
}
.p-work:nth-of-type(3) {
  --delay: .6s;
  --backgroudColor: var(--tertiaryColor);
}
.p-work:nth-of-type(4) {
  --delay: .9s;
  --backgroudColor: var(--secondaryColor);
}
.p-work + .p-work {
  margin-block: -12dvw 0;
  --filter: drop-shadow(0 -4px 8px rgba(0, 0, 0, .08));
}
.p-work__inner {
  filter: var(--filter);
  position: relative;
  z-index: 1;
}
.p-work__inner::before {
  content: "";
  display: block;
  background-color: var(--backgroudColor);
  clip-path: polygon(0 var(--unit), 100% 0, 100% calc(100% - var(--unit)), 0 100%);
  position: absolute;
  inset: 0;
  z-index: -1;
}
.p-work__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@container (width <= 768px) {
  .p-work__container {
    grid-template-columns: 1fr;
  }
}
.p-work__image {
  translate: var(--imageTranslate);
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  animation: float 8s ease-in-out infinite;
  animation-delay: var(--delay);
  transform-origin: 50% 50%;
}
@container (width <= 768px) {
  .p-work__image {
    width: min(400px, 100%);
    margin-inline: auto;
    margin-block: -4rem 0;
  }
}
@container (width <= 400px) {
  .p-work__image {
    width: min(280px, 100%);
  }
}
.p-work__image.is-appear {
  opacity: 1;
}
@keyframes float {
  0% {
    translate: 0 1rem;
    rotate: -4deg;
  }
  25% {
    rotate: 4deg;
  }
  50% {
    translate: 0 -1rem;
    rotate: -4deg;
  }
  75% {
    rotate: -8deg;
  }
  100% {
    translate: 0 1rem;
    rotate: -4deg;
  }
}
.p-work__texts {
  color: #fff;
  order: var(--order);
  display: grid;
  align-content: center;
  gap: 0.8rem;
  padding-block: var(--textPaddingBlock);
  padding-inline: var(--space-md);
}
@container (width <= 768px) {
  .p-work__texts {
    width: min(100%, 480px);
    margin-inline: auto;
    padding-block: 0 var(--space-2xl);
    padding-inline: 0;
  }
}
.p-work__title {
  width: max-content;
}
@container (width <= 768px) {
  .p-work__description {
    font-size: var(--font-size-sm);
  }
}

.p-prices {
  padding-block-start: var(--space-md);
}
@container (width <= 768px) {
  .p-prices {
    padding-block-start: var(--space-lg);
  }
}
.p-priceNormal {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  background-color: #fff;
  border: 1px solid var(--ashColor);
  border-radius: var(--radius-sm);
  margin-block: 0 var(--space-md);
  padding: var(--space-md);
  width: min(800px, 100%);
  margin-inline: auto;
}
@container (width <= 600px) {
  .p-priceNormal {
    padding: var(--space-sm);
  }
}
.p-priceNormal__title {
  font-size: var(--font-size-body);
  font-weight: 600;
}
.p-priceNormal__price {
  font-size: var(--font-size-h3);
  font-weight: 600;
  position: relative;
}
.p-priceNormal__price::before, .p-priceNormal__price::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  rotate: -8deg;
}
.p-priceNormal__price:after {
  rotate: 8deg;
}
.p-priceNormal__price .unit {
  font-size: var(--font-size-body);
  font-weight: 500;
}
.p-priceNormal__price--division {
  font-size: var(--font-size-h４);
  font-weight: 600;
}
.p-priceNormal__price--division::before, .p-priceNormal__price--division::after {
  content: none;
}
.p-priceLimited {
  --border-radius: 24px;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0px 8px 12px -2px rgba(0, 0, 0, 0.16);
  position: relative;
  z-index: 1;
}
@container (width <= 768px) {
  .p-priceLimited {
    margin-inline: -1rem;
  }
}
.p-priceLimited__container {
  background: linear-gradient(#fff, #fff) padding-box transparent;
  border-radius: 7px;
  border: 6px solid transparent;
  border-radius: var(--border-radius);
}
.p-priceLimited__background {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #66f;
  border-radius: var(--border-radius);
}
.p-priceLimited__background .pointer {
  width: 5rem;
  aspect-ratio: 1;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  offset-path: border-box;
  offset-anchor: 100% 50%;
  animation: trail 8s infinite linear;
}
.p-priceLimited__background .pointer:nth-of-type(2) {
  animation-delay: -4s;
}
@keyframes trail {
  to {
    offset-distance: 100%;
  }
}
.p-priceLimited__head {
  background-color: var(--tertiaryColor);
  padding: var(--space-sm);
  display: flex;
  justify-content: center;
  border-radius: calc(var(--border-radius) - 7px) calc(var(--border-radius) - 7px) 0 0;
}
.p-priceLimited__title {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.p-priceLimited__title::before, .p-priceLimited__title::after {
  content: "";
  display: block;
  width: 1em;
  aspect-ratio: 4/6;
  background: url('data:image/svg+xml;utf8,<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M38.7763 51.4411C36.4801 51.09 34.2324 50.4736 32.0783 49.6043C34.1045 47.4565 35.2252 44.6105 35.2072 41.6578C35.1893 38.7051 34.0342 35.8728 31.9821 33.7497C29.9343 35.7313 28.6959 38.4031 28.5075 41.2465C28.319 44.0898 29.194 46.9017 30.9625 49.1362C28.2879 47.9381 25.8022 46.3566 23.5838 44.4415C22.1697 43.214 20.8718 41.8588 19.7063 40.3932C22.2469 39.1697 24.2488 37.0546 25.3309 34.4506C26.4129 31.8466 26.4995 28.9356 25.5742 26.2719C23.1965 27.1015 21.1572 28.6893 19.7701 30.791C18.3829 32.8927 17.7248 35.392 17.8968 37.9044C15.6011 34.344 14.0903 30.3354 13.465 26.1456C16.3286 25.5813 18.8698 23.9475 20.5718 21.5765C22.2738 19.2054 23.0088 16.2751 22.6273 13.3815C20.4381 13.6731 18.3794 14.5901 16.6982 16.0224C15.0171 17.4547 13.7847 19.3416 13.149 21.4567C13.1662 19.3434 13.4039 17.2376 13.8585 15.1737C15.9519 13.3496 17.3139 10.829 17.6925 8.0783C18.0711 5.32755 17.4407 2.53277 15.9178 0.210938C13.8134 1.59798 12.2234 3.63858 11.393 6.0183C10.5625 8.39802 10.5377 10.9848 11.3223 13.38C10.889 15.0822 10.5894 16.8155 10.4262 18.5644C9.59282 16.4662 8.15978 14.6601 6.30602 13.3715C4.45226 12.083 2.25996 11.3692 0.002915 11.3192C-0.0619944 14.2015 0.959142 17.0029 2.86366 19.1673C4.76817 21.3317 7.41685 22.701 10.284 23.0034C10.4204 26.5638 11.1384 30.0779 12.4094 33.4065C11.0651 31.6565 9.2452 30.3306 7.16732 29.5875C5.08944 28.8443 2.84149 28.7154 0.692245 29.216C1.38514 32.1785 3.22488 34.7453 5.80786 36.3531C8.39083 37.9609 11.5061 38.4785 14.4702 37.7924C15.6084 39.8103 16.9562 41.7025 18.4913 43.4377C16.5362 42.6791 14.4107 42.4701 12.3452 42.8333C10.2797 43.1966 8.35312 44.1183 6.77415 45.4985C8.68449 47.6769 11.3474 49.0531 14.2294 49.3514C17.1114 49.6497 19.9997 48.848 22.3157 47.1069C24.4333 48.8557 26.7604 50.3338 29.2435 51.5072C26.7904 51.3992 24.3673 52.0801 22.3294 53.4499C20.2915 54.8197 18.7461 56.8063 17.9198 59.1185C20.6802 60.1047 23.7133 59.9975 26.3972 58.8188C29.0811 57.6402 31.2124 55.4794 32.3541 52.7796C34.3002 53.4699 36.3072 53.9748 38.3484 54.2875C38.4196 54.2989 38.4916 54.3046 38.5638 54.3047C38.9262 54.3047 39.2753 54.1677 39.5409 53.9211C39.8066 53.6745 39.9691 53.3366 39.996 52.9752C40.0229 52.6137 39.9122 52.2555 39.6859 51.9723C39.4597 51.6891 39.1348 51.5019 38.7763 51.4483V51.4411Z" fill="white"/></svg>') no-repeat center/contain;
}
.p-priceLimited__title::after {
  scale: -1 1;
}
.p-priceLimited label {
  color: var(--tertiaryColor);
  font-size: var(--font-size-md);
  font-weight: 600;
  letter-spacing: 0.12em;
  display: block;
  text-align: center;
  margin-block: 0 1em;
}
.p-priceLimited__price {
  font-size: var(--font-size-h1);
  font-weight: 600;
  letter-spacing: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.p-priceLimited__price .unit {
  font-size: var(--font-size-body);
  font-weight: 500;
}
.p-priceLimited__body {
  padding-block: var(--space-md);
  padding-inline: var(--space-lg);
}
@container (width <= 600px) {
  .p-priceLimited__body {
    padding-inline: var(--space-sm);
  }
}
.p-priceLimited__contents {
  margin-block: var(--space-md);
  padding-block: var(--space-md);
  border-block: 1px dotted var(--ashColor);
}
.p-priceLimitedInstallment {
  display: grid;
  place-items: center;
  margin-block: 0 var(--space-md);
}
.p-priceLimitedInstallment__button {
  color: var(--secondaryColor);
  background-color: #fff;
  border: 1px solid var(--secondaryColor);
  padding: 1em 1.5em;
  border-radius: 100px;
  transition-property: color, background-color;
  transition-duration: 0.4s;
}
.p-priceLimitedInstallment__button:hover {
  color: #fff;
  background-color: var(--secondaryColor);
}
.p-priceLimited small {
  display: block;
  font-size: var(--font-size-xs);
  text-align: center;
}
.p-priceLimited small + small {
  margin-top: 1.5em;
}
.p-priceLimited .c-ctaButton {
  margin-block: var(--space-lg);
  margin-inline: -1rem;
  width: auto;
}
.p-pricesDetail {
  width: min(100%, 880px);
  margin-block: var(--space-xl) 0;
  margin-inline: auto;
}
.p-pricesDetail > .c-heading {
  margin-block-end: var(--space-md);
}
.p-pricesDetail__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}
@container (width <= 768px) {
  .p-pricesDetail__list {
    grid-template-columns: 1fr;
  }
}
.p-pricesDetail__list li {
  display: grid;
}
.p-pricesDetail__list li.double {
  grid-column: span 2;
}
@container (width <= 768px) {
  .p-pricesDetail__list li.double {
    grid-column: span 1;
  }
}
.p-pricesDetail__card {
  padding: var(--space-md);
  background-color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0px 1px 12px -2px rgba(0, 0, 0, 0.16);
}
@container (width <= 600px) {
  .p-pricesDetail__card {
    padding-inline: var(--space-sm);
  }
}
.p-pricesDetail__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.p-pricesDetail__title img {
  display: block;
  width: 1.5em;
  aspect-ratio: 1;
}
.p-pricesDetail__description {
  margin-block: 1em 0;
}
.p-pricesDetail__description + .p-pricesDetail__description {
  margin-block: 0.75em 0;
}
.p-pricesDetail__description strong {
  font-weight: 600;
}
.p-pricesDetail__description a {
  color: var(--secondaryColor);
  text-decoration: underline;
}
.p-pricesDetail__emphasize {
  border: 2px solid var(--secondaryColor);
  margin-block: var(--space-sm) 0;
  padding: var(--space-sm);
  border-radius: 6px;
}
.p-pricesDetail__benefits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1em 2em;
}
.p-pricesDetail__benefits label {
  font-size: var(--font-size-md);
  font-weight: 700;
  text-align: center;
  display: block;
}
@container (width <= 600px) {
  .p-pricesDetail__benefits label {
    width: 100%;
  }
}
.p-pricesDetail__benefits p {
  text-align: center;
}
.p-pricesDetail__benefits p .line-through {
  text-decoration: line-through;
}
.p-pricesDetail__benefits p b {
  color: var(--secondaryColor);
  display: block;
  font-size: 2em;
  line-height: 1.1;
  background: linear-gradient(transparent 80%, #0cf 80%);
}

.p-priceContents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md) var(--space-md);
}
.p-priceContent__title {
  line-height: 1.4;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 1em;
}
@container (width <= 768px) {
  .p-priceContent__title {
    width: min(240px, 100%);
    margin-inline: auto;
  }
}
.p-priceContent__title img {
  display: block;
  width: 3em;
  aspect-ratio: 1;
}
.p-priceContent__description {
  margin-block: 0.5em 0;
}

.p-entry {
  background-color: #fff;
}
.p-entry__list {
  counter-reset: number 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
@container (width <= 1000px) {
  .p-entry__list {
    grid-template-columns: repeat(2, 1fr);
    width: min(600px, 100%);
    margin-inline: auto;
    gap: var(--space-xs);
  }
}
@container (width <= 600px) {
  .p-entry__list {
    grid-template-columns: 1fr;
  }
}
.p-entryCard {
  --imageSize: 72px;
  counter-increment: number 1;
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  gap: var(--space-sm);
  padding: 1rem;
  border: 2px solid var(--lightColor2);
  border-radius: var(--radius-sm);
  position: relative;
  opacity: 0;
  translate: 0 4rem;
  transition: opacity 0.8s ease-out, filter 0.8s ease-out, translate 0.8s ease-out;
}
@container (width <= 1000px) {
  .p-entryCard {
    --imageSize: 64px;
    gap: var(--space-xs);
    padding-block: 1.5rem;
  }
}
.p-entryCard:nth-of-type(2) {
  transition-delay: 0.1s;
}
.p-entryCard:nth-of-type(3) {
  transition-delay: 0.3s;
}
.p-entryCard:nth-of-type(4) {
  transition-delay: 0.6s;
}
.is-appear .p-entryCard {
  opacity: 1;
  filter: blur(0);
  translate: 0;
}
.p-entryCard img {
  display: block;
  width: var(--imageSize);
  aspect-ratio: 1;
}
@container (width <= 600px) {
  .p-entryCard__title br {
    display: none;
  }
}
.p-entryCard::before {
  content: counter(number, decimal-leading-zero) "";
  color: #fff;
  font-size: 1.2em;
  font-weight: 800;
  background-color: var(--secondaryColor);
  width: 3rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 100%;
  position: absolute;
  inset: 0 auto auto 0;
  translate: -20% -20%;
}
@container (width <= 600px) {
  .p-entryCard::before {
    font-size: 1em;
    width: 2.5rem;
  }
}
.p-entryCard::after {
  content: "";
  display: block;
  width: 1.25rem;
  aspect-ratio: 1;
  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9999 12.038C11.9999 12.278 11.9281 12.5179 11.796 12.6979L5.79595 21.6979C5.57996 22.022 5.22004 22.238 4.79993 22.238H1.19993C0.540088 22.238 0 21.6979 0 21.038C0 20.7979 0.0720703 20.5579 0.203906 20.378L5.75991 12.038L0.203906 3.69788C0.0720703 3.51792 0 3.27798 0 3.03804C0 2.37798 0.540088 1.83789 1.19993 1.83789H4.79993C5.22004 1.83789 5.57996 2.05388 5.79595 2.37798L11.796 11.378C11.9281 11.5579 11.9999 11.7979 11.9999 12.038Z" fill="%235D667A"/><path d="M24.0001 12.038C24.0001 12.278 23.9281 12.5179 23.796 12.6979L17.7962 21.6979C17.5802 22.022 17.22 22.238 16.8001 22.238H13.2001C12.5401 22.238 12 21.6979 12 21.038C12 20.7979 12.0721 20.5579 12.2041 20.378L17.7601 12.038L12.2041 3.69788C12.0721 3.51792 12 3.27798 12 3.03804C12 2.37798 12.5401 1.83789 13.2001 1.83789H16.8001C17.22 1.83789 17.5802 2.05388 17.7962 2.37798L23.796 11.378C23.9281 11.5579 24.0001 11.7979 24.0001 12.038Z" fill="%235D667A"/></svg>') no-repeat center/contain;
  position: absolute;
  inset: 50% calc(var(--space-md) / 2 * -1 - 2px) auto auto;
  translate: 50% -50%;
}
@container (width <= 1000px) {
  .p-entryCard::after {
    content: none;
  }
}
.p-entryCard:last-of-type::after {
  content: none;
}

.p-faq {
  --icon: url(../images/faq/user-01.png);
  --hiro: url(../images/faq/hiro/normal.svg);
  background-color: var(--tertiaryColor);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@container (width <= 768px) {
  .p-faq {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
}
.p-faq .c-heading {
  color: #fff;
}
.p-faq__list {
  display: grid;
  gap: var(--space-md);
}
.p-faq__item:nth-child(3n+2) {
  --icon: url(../images/faq/user-02.png);
  --hiro: url(../images/faq/hiro/hint.svg);
}
.p-faq__item:nth-child(3n+3) {
  --icon: url(../images/faq/user-03.png);
  --hiro: url(../images/faq/hiro/fight.svg);
}
.p-faq__layout {
  display: grid;
  grid-template: "icon fukidashi space" auto/5rem 1fr 8rem;
  gap: var(--space-xs);
  position: relative;
}
@container (width <= 900px) {
  .p-faq__layout {
    grid-template-columns: 4rem 1fr 7rem;
    gap: 0.5rem;
  }
}
@container (width <= 768px) {
  .p-faq__layout {
    display: flex;
  }
}
.p-faq__layout::before {
  grid-area: icon;
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: var(--icon) no-repeat center/contain;
}
@container (width <= 768px) {
  .p-faq__layout::before {
    width: 3rem;
    aspect-ratio: 1;
    position: absolute;
    inset: 0 auto auto 0;
    translate: 20% -50%;
  }
}
@container (width <= 600px) {
  .p-faq__layout::before {
    translate: 20% -70%;
  }
}
.p-faq__layout::after {
  grid-area: space;
  content: "";
  display: block;
  aspect-ratio: 1;
}
@container (width <= 768px) {
  .p-faq__layout::after {
    content: none;
  }
}
.p-faq__layout--answer {
  margin-top: calc(var(--space-xs) * -1);
  grid-template: "space fukidashi icon" auto/8rem 1fr 7rem;
  gap: var(--space-2xs);
  position: relative;
  z-index: 1;
}
@container (width <= 900px) {
  .p-faq__layout--answer {
    grid-template-columns: 6rem 1fr 6rem;
    gap: 0.5rem;
  }
}
@container (width <= 768px) {
  .p-faq__layout--answer {
    margin-top: -0.5rem;
  }
}
.p-faq__layout--answer::before {
  background-image: var(--hiro);
  aspect-ratio: 80/104;
}
@container (width <= 768px) {
  .p-faq__layout--answer::before {
    width: 4rem;
    position: absolute;
    inset: 0 0 auto auto;
    translate: 0% -40%;
  }
}
.p-faq__layout--answer .p-faq__fukidashi {
  font-size: var(--font-size-body);
  font-weight: 600;
}
@container (width <= 600px) {
  .p-faq__layout--answer .p-faq__fukidashi {
    font-size: var(--font-size-sm);
  }
}
.p-faq__layout--answer .p-faq__fukidashi::before {
  content: "A.";
  color: var(--tertiaryColor);
}
.p-faq__fukidashi {
  grid-area: fukidashi;
  font-weight: 600;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 var(--space-sm);
  padding-block: var(--space-md);
  padding-inline: var(--space-sm);
  background-color: #fff;
  border: 2px solid var(--darkColor);
  border-radius: var(--radius-lg);
  box-shadow: 0px 1px 8px -1px rgba(0, 0, 0, 0.2);
}
@container (width <= 900px) {
  .p-faq__fukidashi {
    padding-block: var(--space-xs);
  }
}
@container (width <= 768px) {
  .p-faq__fukidashi {
    width: 100%;
    border-radius: var(--radius-md);
    grid-template-columns: 1fr;
    padding-block: var(--space-2xs) var(--space-sm);
    padding-inline: var(--space-md);
  }
}
@container (width <= 600px) {
  .p-faq__fukidashi {
    font-size: var(--font-size-sm);
    padding-inline: var(--space-sm);
  }
}
.p-faq__fukidashi::before {
  content: "Q.";
  color: var(--secondaryColor);
  font-size: var(--font-size-h2);
  font-weight: 800;
  display: block;
  width: 3rem;
  aspect-ratio: 1;
}
@container (width <= 900px) {
  .p-faq__fukidashi::before {
    font-size: var(--font-size-h3);
    width: 2rem;
  }
}

.p-cta {
  container-type: inline-size;
  background-color: var(--tertiaryColor);
  padding-block: 0 var(--space-md);
}
.p-cta--horizontal {
  background-color: transparent;
  margin-top: -400px;
  position: relative;
  z-index: 1;
}
.p-cta__container {
  display: grid;
  justify-items: center;
  background-color: #fff;
  border-radius: 2.5rem;
  padding-block: var(--space-xl);
  padding-inline: var(--space-md);
  box-shadow: 0px 6px 8px -1px rgba(0, 0, 0, 0.2);
}
@container (width <= 1000px) {
  .p-cta__container {
    padding-block: var(--space-lg);
  }
}
@container (width <= 768px) {
  .p-cta__container {
    margin-inline: -1rem;
    padding-inline: 1.5rem;
  }
}
@container (width <= 600px) {
  .p-cta__container {
    padding-block: var(--space-md);
  }
}
.p-cta--horizontal .p-cta__container {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem 1rem;
}
@container (width <= 1000px) {
  .p-cta--horizontal .p-cta__container {
    grid-template-columns: 1fr;
  }
}

.p-cta__logo img {
  width: 200px;
}
@container (width <= 768px) {
  .p-cta__logo img {
    width: 160px;
  }
}
@container (width <= 600px) {
  .p-cta__logo img {
    width: 120px;
  }
}
.p-cta__texts {
  display: grid;
  justify-items: center;
  text-align: center;
}
.p-cta__copy {
  margin-block: var(--space-md);
  word-break: keep-all;
}
@container (width <= 1000px) {
  .p-cta__copy {
    font-size: 4cqw;
  }
}
@container (width <= 768px) {
  .p-cta__copy {
    font-size: min(40px, 7.5cqw);
  }
}
@container (width <= 768px) {
  .p-cta__description br {
    display: none;
  }
}
.p-cta__action {
  width: 100%;
  display: grid;
  place-items: center;
  margin-block: 4rem 0;
}
.p-cta--horizontal .p-cta__action {
  margin-block: 0;
}

.p-footer {
  container-type: inline-size;
  color: #fff;
  background-color: var(--darkColor);
  padding-block: 5rem 1.5rem;
}
@container (width <= 600px) {
  .p-footer {
    padding-block: 3rem 1.5rem;
  }
}
.p-footer__head {
  display: flex;
  align-items: center;
  gap: 2rem 0;
  margin-block: 0 2.5rem;
}
@container (width <= 768px) {
  .p-footer__head {
    flex-direction: column;
    align-items: center;
    margin-block: 0 4rem;
  }
}
.p-footer__brand {
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
}
@container (width <= 1000px) {
  .p-footer__brand {
    flex-direction: column;
    align-items: flex-start;
  }
}
@container (width <= 768px) {
  .p-footer__brand {
    align-items: center;
    width: min(440px, 100%);
  }
}
.p-footer__logo a {
  display: block;
  translate: -0.5rem 0;
}
.p-footer__logo img {
  height: 64px;
}
.p-footer__copy {
  font-size: 13px;
}
@container (width <= 768px) {
  .p-footer__copy br {
    display: none;
  }
}
.p-footer__action {
  margin-left: auto;
}
@container (width <= 768px) {
  .p-footer__action {
    margin-inline: auto;
  }
}
.p-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.p-footer__nav ul a {
  font-size: 14px;
  font-weight: 600;
}
.p-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-block: 2.5rem 0;
  padding-block: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 0;
}
.p-footer__bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}
.p-footer__bottom ul a {
  font-size: 12px;
}
.p-footer__bottom ul a[target=_blank]::after {
  content: "";
  display: inline-flex;
  inline-size: 1em;
  margin-inline: 0.25em 0;
  aspect-ratio: 1;
  align-self: center;
  background-color: currentColor;
  mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 13V19C18 19.5304 17.7893 20.0391 17.4142 20.4142C17.0391 20.7893 16.5304 21 16 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H11" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 3H21V9" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 14L21 3" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
}
.p-footer__copyright {
  font-size: 11px;
  margin-left: auto;
  opacity: 0.6;
}

.p-mobileMenu {
  display: grid;
  position: fixed;
  width: 100dvw;
  height: 100svh;
  z-index: 20;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
@container (width <= 768px) {
  .is-showBurger .p-mobileMenu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
  }
}
.p-mobileMenu__container {
  background-color: #fff;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.p-mobileMenu__head {
  --headerSpaceInline: 2rem;
  padding-inline: var(--headerSpaceInline);
}
@container (width <= 768px) {
  .p-mobileMenu__head {
    --headerSpaceInline: 1rem;
  }
}
@container (width <= 600px) {
  .p-mobileMenu__head {
    --headerSpaceInline: .5rem;
  }
}
.p-mobileMenu__logo {
  padding-block: 0.5rem;
}
.p-mobileMenu__logo a {
  display: flex;
  width: max-content;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border: 1px solid transparent;
  border-radius: 12px;
}
.p-mobileMenu__logo a:hover {
  border-color: var(--secondaryColor);
}
@container (width <= 600px) {
  .p-mobileMenu__logo a {
    padding-inline: 0.25rem;
  }
}
.p-mobileMenu__logo img {
  height: 3rem;
  transition: height 0.4s ease;
}
@container (width <= 600px) {
  .p-mobileMenu__logo img {
    height: 2.5rem;
  }
}
.p-mobileMenu__body {
  padding-inline: 1.5rem;
}
.p-mobileMenu__nav {
  margin-block: var(--space-xs);
}
.p-mobileMenu__nav ul {
  display: grid;
}
.p-mobileMenu__nav a {
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 1.25em;
  border-radius: var(--radius-xs);
}
.p-mobileMenu__nav a::after {
  content: "";
  display: block;
  width: 1em;
  aspect-ratio: 1;
  background: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 15L12.5 10L7.5 5" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}
.p-mobileMenu__nav a:hover {
  background-color: var(--lightColor2);
}
.p-mobileMenu__action {
  margin-top: var(--space-md);
  margin-inline: -1rem;
}
.p-mobileMenu__foot {
  padding: 2rem;
}
.p-mobileMenu__foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.5em;
  list-style-type: none;
}
.p-mobileMenu__foot a {
  font-size: var(--font-size-3xs);
  display: block;
  padding: 0.2em;
}
.p-mobileMenu__foot a[target=_blank]::after {
  content: "";
  display: inline-flex;
  inline-size: 1em;
  margin-inline: 0.25em 0;
  aspect-ratio: 1;
  align-self: center;
  background-color: currentColor;
  mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 13V19C18 19.5304 17.7893 20.0391 17.4142 20.4142C17.0391 20.7893 16.5304 21 16 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H11" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 3H21V9" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 14L21 3" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
}

.c-pageWrapper {
  overflow-x: clip;
}

.c-heading {
  display: grid;
  justify-items: center;
  margin-block: 0 var(--space-lg);
}
@container (width <= 900px) {
  .c-heading {
    margin-block: 0 var(--space-md);
  }
}
.c-heading__badge {
  width: 5rem;
  margin-block: 0 var(--space-sm);
}
@container (width <= 768px) {
  .c-heading__badge {
    width: 4rem;
  }
}
.c-heading--sm .c-heading__badge {
  width: 4rem;
  margin-left: auto;
}

.c-heading__title {
  font-size: var(--font-size-h2);
  font-weight: 800;
  display: flex;
  align-items: baseline;
}
.c-heading--sm .c-heading__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.c-heading--sm .c-heading__title img {
  width: 3.5rem;
  margin-left: -0.4em;
  margin-block: 0;
}

.c-heading__description {
  margin-block: var(--space-sm) 0;
  font-weight: 600;
  text-align: center;
}
@container (width <= 900px) {
  .c-heading__description {
    font-size: var(--font-size-sm);
    font-weight: 500;
  }
}
@container (width <= 900px) {
  .c-heading__description br {
    display: none;
  }
}
.c-heading--sm .c-heading__description {
  font-weight: 600;
}
@container (width <= 900px) {
  .c-heading--sm .c-heading__description {
    font-size: var(--font-size-sm);
  }
}

.c-heading__description a {
  text-decoration: underline;
}
.c-heading__description a[target=_blank]::after {
  content: "";
  display: inline-flex;
  inline-size: 1em;
  margin-inline: 0.25em 0;
  aspect-ratio: 1;
  align-self: center;
  background-color: currentColor;
  mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 13V19C18 19.5304 17.7893 20.0391 17.4142 20.4142C17.0391 20.7893 16.5304 21 16 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H11" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 3H21V9" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 14L21 3" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
}

.c-ctaButton {
  container-type: inline-size;
  width: 100%;
  display: grid;
  place-items: center;
}
.c-ctaButton__button {
  width: min(480px, 100%);
  position: relative;
  box-shadow: 0px 15px 8px -2px rgba(183, 101, 0, 0.12);
}
.c-ctaButton__button span:not(.shine) {
  font-size: var(--font-size-body);
  color: #002881;
  width: max-content;
  translate: -50% -60%;
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke;
  position: absolute;
  inset: 0 auto auto 50%;
  z-index: 2;
}
.c-ctaButton__button span:not(.shine)::before, .c-ctaButton__button span:not(.shine)::after {
  content: "|";
  font-size: 1.5em;
  font-weight: 320;
  display: inline-block;
  rotate: 20deg;
  translate: 0 0.1em;
  margin-inline: 0.5em;
  -webkit-text-stroke: 1px #002881;
}
.c-ctaButton__button span:not(.shine)::before {
  rotate: -20deg;
}
.c-ctaButton small {
  font-weight: 500;
  letter-spacing: 0.04em;
  display: block;
  text-align: center;
  margin-block: 1.2em 0;
}

.c-textAd {
  width: 110%;
  display: flex;
  background-color: #002881;
  padding-block: 0.75em;
  overflow: hidden;
}
.c-textAd__inner {
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  justify-items: center;
  animation: scrollTextAd 30s linear infinite;
  gap: 1.5rem;
}
.c-textAd__inner div {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  min-width: max-content;
}
.c-textAd__inner div::after {
  content: "";
  display: block;
  width: 1em;
  aspect-ratio: 1;
  background: url(../images/logos/logo-mark-light2.svg) no-repeat center center/contain;
  margin-left: 1.5rem;
  opacity: 0.72;
}

@keyframes scrollTextAd {
  to {
    translate: -100em;
  }
}
.c-skill {
  container-type: inline-size;
}
.c-skill__head {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  width: max-content;
  gap: var(--space-md);
}
@container (width <= 768px) {
  .c-skill__head {
    margin-inline: auto;
    translate: -5% 0;
  }
}
@container (width <= 600px) {
  .c-skill__head {
    grid-template-columns: 56px 1fr;
    gap: var(--space-sm);
  }
}
.c-skill__image img {
  display: block;
}
.c-skill__title {
  text-align: center;
}
@container (width <= 600px) {
  .c-skill__title {
    font-size: var(--font-size-xl);
  }
}
.c-skill__description {
  margin-block: 2em 0;
}
@container (width <= 600px) {
  .c-skill__description {
    font-size: var(--font-size-sm);
    margin-block: 1.5em 0;
  }
}

.c-voices {
  width: 110%;
  display: flex;
  padding-block: 0.75em;
  overflow: hidden;
}
.c-voices__inner {
  display: grid;
  grid-auto-columns: 20em;
  grid-auto-flow: column;
  justify-items: center;
  animation: scrollVoices 30s linear infinite;
}
@container (width <= 768px) {
  .c-voices__inner {
    grid-auto-columns: 16em;
  }
}
.c-voices__card {
  --face: var(--face-1);
  display: grid;
  place-items: center;
  padding-block: var(--space-sm);
  padding-inline: var(--space-sm);
  border: 1px solid var(--ashColor);
  border-radius: var(--radius-md);
  background-color: #fff;
  box-shadow: 0px 8px 6px -1px rgba(0, 0, 0, 0.2);
  scale: 0.96;
}
@container (width <= 768px) {
  .c-voices__card {
    padding-block: var(--space-sm);
    padding-inline: var(--space-sm);
  }
}
.c-voices__cardInner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
}
.c-voices__cardInner::before {
  content: "";
  display: block;
  width: 2rem;
  aspect-ratio: 1;
  background-color: currentColor;
  mask: var(--face) no-repeat center/contain;
}
.c-voices__title {
  font-weight: 500;
}
@container (width <= 768px) {
  .c-voices__title {
    font-size: var(--font-size-sm);
  }
}
.c-voices__description {
  margin-block: 0.5em 0;
}

@keyframes scrollVoices {
  to {
    translate: -100em;
  }
}
.c-contents {
  margin-block: var(--space-lg) 0;
}
.c-contents__scrollHint {
  min-width: max-content;
}
.c-contents__scrollHint__wrapper {
  position: relative;
}
.c-contents__scrollHint__wrapper::before, .c-contents__scrollHint__wrapper::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 100%;
  position: absolute;
  inset: 0 auto auto 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--lightColor) 100%, transparent), color-mix(in srgb, var(--lightColor) 0%, transparent));
  translate: -100% 0;
  z-index: 1;
}
.c-contents__scrollHint__wrapper::after {
  inset: 0 0 auto auto;
  translate: 100% 0;
  scale: -1 1;
}
.c-contents__scrollHint__outer {
  margin-inline: -1.5rem;
  padding-inline: 1.5rem;
}
.c-contents__list {
  display: grid;
  grid-auto-flow: column;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px dashed #aaa;
  border-radius: var(--radius-sm);
  min-width: max-content;
}
.c-contents__list > li {
  width: 300px;
}
.c-contents__course + .c-contents__course {
  margin-block: var(--space-lg);
}
.c-contents__head {
  margin-block: 0 var(--space-sm);
}
.c-contents__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-block: 0 0.75em;
}
.c-contents__title--sm {
  font-size: var(--font-size-sm);
  margin-block: 0 0.25em;
}
.c-contents__title img {
  display: block;
  width: 2em;
  aspect-ratio: 1;
}
.c-contents__description {
  font-size: var(--font-size-sm);
}
.c-contents__module {
  display: grid;
  gap: var(--space-sm);
}
.c-contents__module:has(> img) {
  grid-template-columns: 2rem 1fr;
}
.c-contents__module + .c-contents__module {
  margin-block: var(--space-sm) 0;
}
.c-contents__module li {
  font-size: var(--font-size-xs);
  padding-left: 1em;
  position: relative;
}
.c-contents__module li::before {
  content: "・";
  position: absolute;
  inset: 0 auto auto 0;
}
.c-contents__module small {
  font-size: var(--font-size-2xs);
}
.c-contents__dotList {
  display: grid;
  gap: 8px;
}
.c-contents__dotList li {
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.c-contents__dotList li small {
  font-size: var(--font-size-3xs);
  font-weight: 400;
  letter-spacing: 0.08em;
}
.c-contents__functions {
  margin: 2rem 0 0;
}
.c-contents__functions .c-pickup {
  background-color: #fff;
  margin-block: 0 0.5rem;
  padding-block: var(--space-md);
  padding-inline: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 2px solid var(--darkColor);
  box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.2);
}
@container (width <= 900px) {
  .c-contents__functions .c-pickup {
    padding-block: var(--space-sm);
    padding-inline: var(--space-sm);
    border-radius: var(--radius-md);
  }
}

.c-pickup__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}
@container (width <= 900px) {
  .c-pickup__list {
    gap: var(--space-sm);
  }
}
.c-pickup__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-block: 0 0.75em;
}
.c-pickup__title img {
  height: 2.5em;
}
.c-pickup__description {
  font-size: var(--font-size-sm);
}

.c-gotop {
  position: fixed;
  left: calc(50% + min(100dvw, var(--maxBodyWidth)) / 2);
  bottom: 3rem;
  translate: -100% 0;
  z-index: 19;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
@media (width <= 768px) {
  .c-gotop {
    left: auto;
    right: 0;
    translate: 0;
  }
}
.c-gotop.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.c-gotop__button {
  --textWidth: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
  border: 1px solid #fff;
  border-right: 0;
  background-color: var(--primaryColor);
  box-shadow: 0px 8px 4px -2px rgba(0, 0, 0, 0.08);
}
.c-gotop__button:hover {
  --textWidth: 4em;
}
.c-gotop__button i {
  display: block;
  width: 44px;
  aspect-ratio: 1;
  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 19V5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 12L12 5L19 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/16px;
}
.c-gotop__button span {
  display: grid;
  place-items: center;
  width: var(--textWidth);
  color: #fff;
  font-weight: 500;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  align-self: stretch;
  transition: width 0.2s ease;
}

.c-gallery {
  --cardWidth: 15rem;
  display: flex;
  padding-block: 0.75em;
}
.c-gallery--services {
  --cardWidth: 18rem;
  translate: 0 -1.8rem;
}
@container (width <= 768px) {
  .c-gallery--services {
    translate: 0 2.2rem;
  }
}
.c-gallery__inner {
  display: grid;
  grid-auto-columns: var(--cardWidth);
  grid-auto-flow: column;
  justify-items: center;
  animation: scrollGallery 30s linear infinite;
}
@container (width <= 768px) {
  .c-gallery__inner {
    --cardWidth: 12rem;
  }
}
.c-gallery__inner img {
  scale: 0.92;
  border: 1px solid var(--darkColor);
  border-radius: var(--radius-2xs);
  box-shadow: 0px 8px 8px -1px rgba(0, 0, 0, 0.16);
  transition: scale 0.8s ease-in-out;
  transform-origin: center bottom;
}
.c-gallery__inner img:nth-child(odd) {
  translate: 0 2rem;
}
.c-gallery__inner img:hover {
  scale: 1.2;
  transition: scale 0.4s ease-out;
}

@keyframes scrollGallery {
  to {
    translate: calc(var(--cardWidth) * -8);
  }
}/*# sourceMappingURL=style.css.map */