@charset "UTF-8";

/* header */
.l-header {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 50px 58px;
}
.l-headerLogo {
  width: 192px;
}
.l-headerLogo a,
.l-headerLogo img {
  display: block;
}
.l-headerCta {
  color: var(--color-text-light);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
  width: fit-content;
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  background-color: var(--color-bg-navy);
  box-shadow: 0 1px 5px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 10%);
  overflow: hidden;
  transition: background-color 0.3s ease;
}
.l-headerCta span {
  position: relative;
  z-index: 1;
}
.l-headerCta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #0250c8 0%, #e252aa 80.77%, #ff5d41 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.l-headerCta::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("../images/icon_finger.svg");
  background-size: contain;
  background-position: center;
  position: relative;
  z-index: 1;
}
.l-headerCta:hover::before {
  opacity: 1;
  z-index: 1;
}
.l-headerCta:hover::after {
  rotate: -9deg;
}
/* @media screen and (max-width: 1280px) {
  .l-header {
    height: 64px;
    min-height: 64px;
    padding-inline: 32px 16px;
  }
  .l-headerLogo {
    width: 170px;
  }
  .l-headerCta {
    font-size: 14px;
    padding-inline: 16px;
    min-height: 40px;
    gap: 12px;
  }
  .l-headerCta::after {
    width: 16px;
    height: 16px;
  }
} */
@media screen and (max-width: 768px) {
  .l-header {
    min-height: 62px;
    padding-inline: 12px;
  }
  .l-headerLogo {
    width: 174px;
  }
  .l-headerCtaWrapper {
    display: none;
  }
}

/* main visual */
.p-mainVisual {
  background-image: url("../images/bg_mv.png");
  background-size: cover;
  background-position: center;
  background-color: #0250c8;
  height: 46.875vw;
  position: relative;
  overflow: hidden;
}
@supports (background-image: url("../images/bg_mv.webp")) {
  .p-mainVisual {
    background-image: url("../images/bg_mv.webp");
  }
}
.webp .p-mainVisual {
  background-image: url("../images/bg_mv.webp");
}
.p-mainVisual__logo,
.p-mainVisual__device,
.p-mainVisual__person {
  width: auto;
  position: absolute;
  top: 0;
  left: 50%;
}
.p-mainVisual__logo {
  z-index: 2;
  transform: translateX(-50%) scale(0.3);
  transition: none;
}
.p-mainVisual__logo.--animate {
  transform: translateX(-50%) scale(1);
  transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p-mainVisual__device {
  z-index: 1;
  transform: translateX(-50%) translateY(100%);
  transition: none;
}
.p-mainVisual__device.--animate {
  transform: translateX(-50%) translateY(0);
  transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.75s;
}
.p-mainVisual__person {
  z-index: 0;
  transform: translateX(-50%) translateY(100%);
  transition: none;
}
.p-mainVisual__person.--animate {
  transform: translateX(-50%) translateY(0);
  transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p-mainVisual__logo img,
.p-mainVisual__device img,
.p-mainVisual__person img {
  width: auto;
  height: 46.875vw;
  max-width: none;
  aspect-ratio: 1920 / 900;
}
@media screen and (max-width: 768px) {
  .p-mainVisual {
    background-image: url("../images/bg_mv_sp.png");
    height: 189.23vw;
  }
  @supports (background-image: url("../images/bg_mv_sp.webp")) {
    .p-mainVisual {
      background-image: url("../images/bg_mv_sp.webp");
    }
  }
  .webp .p-mainVisual {
    background-image: url("../images/bg_mv_sp.webp");
  }
  .p-mainVisual__logo,
  .p-mainVisual__device,
  .p-mainVisual__person {
    width: 100%;
    height: 100%;
    left: 0;
  }
  .p-mainVisual__logo {
    transform: scale(0.3);
    transition: none;
  }
  .p-mainVisual__logo.--animate {
    transform: scale(1);
    transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .p-mainVisual__device {
    transform: translateY(100%);
    transition: none;
  }
  .p-mainVisual__device.--animate {
    transform: translateY(0);
    transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.75s;
  }
  .p-mainVisual__person {
    transform: translateY(100%);
    transition: none;
  }
  .p-mainVisual__person.--animate {
    transform: translateY(0);
    transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .p-mainVisual__logo img,
  .p-mainVisual__device img,
  .p-mainVisual__person img {
    width: 100%;
    max-width: inherit;
    height: 100%;
    aspect-ratio: 780 / 1476;
    object-fit: cover;
    object-position: center;
  }
}

/* trouble */
.p-trouble {
  padding-top: 44px;
  background-image: url("../images/bg_trouble.png");
  background-size: cover;
  background-position: top center;
  overflow: hidden;
}
@supports (background-image: url("../images/bg_trouble.webp")) {
  .p-trouble {
    background-image: url("../images/bg_trouble.webp");
  }
}
.webp .p-trouble {
  background-image: url("../images/bg_trouble.webp");
}
.p-troubleList {
  max-width: 1200px;
  padding-inline: 40px;
  margin-inline: auto;
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.p-troubleItem {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.p-troubleItem.--animate {
  opacity: 1;
  transform: translateY(0);
}
.p-troubleItem img {
  width: 100%;
}
.p-troubleItem:first-child {
  width: 32.33%;
}
.p-troubleItem:nth-child(2) {
  width: 31.83%;
}
.p-troubleItem:last-child {
  width: 31.5%;
  margin-block: auto 0;
}
@media screen and (max-width: 1100px) {
  .p-trouble {
    padding-top: 2.29vw;
  }
  .p-troubleList {
    width: 76.82vw;
    padding-inline: 0;
    margin-inline: 10.57vw auto;
  }
  .p-troubleItem:first-child {
    width: 26.09vw;
    margin-right: 0.21vw;
  }
  .p-troubleItem:nth-child(2) {
    width: 25.42vw;
    margin-right: 0.78vw;
  }
  .p-troubleItem:last-child {
    width: 24.38vw;
    margin-block: auto 0;
  }
}
@media screen and (max-width: 768px) {
  .p-trouble {
    padding-top: 5.64vw;
  }
  .p-troubleList {
    width: 100%;
    margin-inline: auto;
    flex-direction: column;
    gap: 5vw;
  }
  .p-troubleItem:first-child {
    width: 87.18vw;
    margin-inline: auto;
  }
  .p-troubleItem:nth-child(2) {
    width: 87.18vw;
    margin-inline: auto;
  }
  .p-troubleItem:last-child {
    width: 87.18vw;
    margin-inline: auto;
  }
}
.p-troubleConclusion {
  padding-block: 36px 29.64vw;
  position: relative;
}
.p-troubleConclusion::before {
  content: "";
  display: inline-block;
  width: 1180px;
  height: 628px;
  background-color: #284056;
  border-radius: 50%;
  filter: blur(70px);
  position: absolute;
  top: 100px;
  left: 50%;
  translate: -50% 0;
  z-index: 0;
}
.p-troubleConclusion::after {
  content: "";
  display: block;
  width: 100%;
  padding-top: 24.74vw;
  background-image: url("../images/bg_trouble_bottom.png");
  background-size: cover;
  background-position: bottom center;
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 5;
}
@supports (background-image: url("../images/bg_trouble_bottom.webp")) {
  .p-troubleConclusion::after {
    background-image: url("../images/bg_trouble_bottom.webp");
  }
}
.webp .p-troubleConclusion::after {
  background-image: url("../images/bg_trouble_bottom.webp");
}
.p-troubleConclusion__text {
  color: var(--color-text-light);
  font-size: 44px;
  font-weight: 800;
  text-align: center;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 5;
}
.p-troubleConclusion__text .--sp {
  display: none;
}
.p-troubleConclusion__dx {
  width: 802px;
  margin-top: -24px;
  margin-inline: auto;
  translate: 16px 0;
  position: relative;
  z-index: 5;
}
.p-troubleConclusion__image {
  width: 578px;
  position: absolute;
  top: 478px;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, 0) scale(0);
  transition: transform 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p-troubleConclusion__image.--animate {
  transform: translate(-50%, 0) scale(1);
}
.p-troubleConclusion__left {
  width: 740px;
  position: absolute;
  top: -140px;
  left: calc(50% - 430px);
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, 100px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.p-troubleConclusion__left.--animate {
  opacity: 1;
  animation: bounceUpLeft 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
@keyframes bounceUpLeft {
  0% {
    transform: translate(-50%, 100px);
  }
  50% {
    transform: translate(-50%, -25px);
  }
  70% {
    transform: translate(-50%, 10px);
  }
  85% {
    transform: translate(-50%, -5px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
.p-troubleConclusion__right {
  width: 597px;
  position: absolute;
  top: -72px;
  left: calc(50% + 472px);
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, 100px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.p-troubleConclusion__right.--animate {
  opacity: 1;
  animation: bounceUpRight 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
@keyframes bounceUpRight {
  0% {
    transform: translate(-50%, 100px);
  }
  50% {
    transform: translate(-50%, -25px);
  }
  70% {
    transform: translate(-50%, 10px);
  }
  85% {
    transform: translate(-50%, -5px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes bounceUp {
  0% {
    transform: translateY(100px);
  }
  50% {
    transform: translateY(-25px);
  }
  70% {
    transform: translateY(10px);
  }
  85% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}
@media screen and (max-width: 1400px) {
  .p-troubleConclusion {
    padding-block: 0.73vw 29.64vw;
  }
  .p-troubleConclusion::before {
    width: 75.68vw;
    height: 40.26vw;
    top: 1.67vw;
    left: 17.29vw;
    translate: inherit;
  }
  .p-troubleConclusion__text {
    font-size: 2.29vw;
  }
  .p-troubleConclusion__dx {
    width: 51.51vw;
    margin-top: -2.08vw;
    margin-inline: 26.09vw auto;
    translate: 0 0;
  }
  .p-troubleConclusion__image {
    width: 37.08vw;
    top: 27vw;
  }
  .p-troubleConclusion__left {
    width: 47.24vw;
    top: -9.74vw;
    left: 22.74vw;
  }
  .p-troubleConclusion__right {
    width: 38.49vw;
    top: -6.35vw;
    left: 81vw;
  }
}
@media screen and (max-width: 768px) {
  .p-troubleConclusion {
    padding-top: 1.28vw;
    padding-bottom: 105.9vw;
  }
  .p-troubleConclusion::before {
    width: 77.44vw;
    height: 93.33vw;
    top: 37.18vw;
    left: 50%;
    translate: -50% 0;
    filter: blur(15px);
  }
  .p-troubleConclusion::after {
    padding-top: 24.87vw;
    background-image: url("../images/bg_trouble_bottom_sp.png");
  }
  @supports (background-image: url("../images/bg_trouble_bottom_sp.webp")) {
    .p-troubleConclusion::after {
      background-image: url("../images/bg_trouble_bottom_sp.webp");
    }
  }
  .webp .p-troubleConclusion::after {
    background-image: url("../images/bg_trouble_bottom_sp.webp");
  }
  .p-troubleConclusion__text {
    font-size: 7.18vw;
  }
  .p-troubleConclusion__text .--sp {
    display: block;
  }
  .p-troubleConclusion__dx {
    width: 82.56vw;
    margin-top: 2.31vw;
    margin-inline: 6.92vw auto;
  }
  .p-troubleConclusion__left {
    width: 75.9vw;
    top: 54.79vw;
    left: 35.67vw;
  }
  .p-troubleConclusion__right {
    width: 70vw;
    top: 58.56vw;
    left: 62vw;
  }
  .p-troubleConclusion__image {
    width: 70.77vw;
    top: 121.41vw;
  }
}

/* solution */
.p-solution {
  background-image: url("../images/bg_solution.png");
  background-size: cover;
  background-position: top center;
}
@supports (background-image: url("../images/bg_solution.webp")) {
  .p-solution {
    background-image: url("../images/bg_solution.webp");
  }
}
.webp .p-solution {
  background-image: url("../images/bg_solution.webp");
}
.p-solutionHeading {
  width: 1200px;
  max-width: 100%;
  padding-inline: 40px;
  margin-inline: auto;
  margin-bottom: 24px;
}
.p-solutionCards {
  max-width: 1200px;
  padding-inline: 40px;
  margin-inline: auto;
  margin-bottom: 0.42vw;
}
.p-solutionDx {
  overflow: hidden;
  padding-block: 3.75vw 1.88vw;
}
.p-solutionDxImageWrapper {
  width: 855px;
  margin-inline: auto;
  position: relative;
}
.p-solutionDxMainImage {
  position: relative;
}
.p-solutionDxImage {
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p-solutionDxImage.--animate {
  transform: scale(1);
}
.p-solutionDxApp {
  width: 200px;
  position: absolute;
  opacity: 0;
  transition: top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    right 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.4s;
}
.p-solutionDxApp.--01 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.p-solutionDxApp.--01.--animate {
  top: -55px;
  left: -73px;
  transform: translate(0, 0);
  opacity: 1;
}
.p-solutionDxApp.--02 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.p-solutionDxApp.--02.--animate {
  top: 216px;
  left: -200px;
  transform: translate(0, 0);
  opacity: 1;
}
.p-solutionDxApp.--03 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.p-solutionDxApp.--03.--animate {
  top: 520px;
  left: -160px;
  transform: translate(0, 0);
  opacity: 1;
}
.p-solutionDxApp.--04 {
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}
.p-solutionDxApp.--04.--animate {
  top: -56px;
  right: -168px;
  transform: translate(0, 0);
  opacity: 1;
}
.p-solutionDxApp.--05 {
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}
.p-solutionDxApp.--05.--animate {
  top: 168px;
  right: -268px;
  transform: translate(0, 0);
  opacity: 1;
}
.p-solutionDxApp.--06 {
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}
.p-solutionDxApp.--06.--animate {
  top: 534px;
  right: -204px;
  transform: translate(0, 0);
  opacity: 1;
}
.p-solutionDxDevice {
  width: 390px;
  position: absolute;
  right: -54px;
  bottom: -52px;
  z-index: 1;
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p-solutionDxDevice.--animate {
  transform: scale(1);
}
.p-solutionDxLogo {
  width: 930px;
  margin-inline: auto;
  margin-top: 8px;
  position: relative;
  left: 40px;
}
@media screen and (max-width: 1300px) {
  .p-solutionDxImageWrapper {
    width: 60.99vw;
  }
  .p-solutionDxApp {
    width: 14.22vw;
  }
  .p-solutionDxApp.--01.--animate {
    top: -3.75vw;
    left: -9.38vw;
  }
  .p-solutionDxApp.--02.--animate {
    top: 15.42vw;
    left: -14.32vw;
  }
  .p-solutionDxApp.--03.--animate {
    top: 36.93vw;
    left: -11.46vw;
  }
  .p-solutionDxApp.--04.--animate {
    top: -3.75vw;
    right: -11.93vw;
  }
  .p-solutionDxApp.--05.--animate {
    top: 11.98vw;
    right: -19.06vw;
  }
  .p-solutionDxApp.--06.--animate {
    top: 38.18vw;
    right: -14.48vw;
  }
  .p-solutionDxDevice {
    width: 27.86vw;
    right: -3.8vw;
    bottom: -3.7vw;
  }
  .p-solutionDxLogo {
    width: 66.25vw;
    margin-inline: 20.68vw auto;
    margin-top: 0.47vw;
    position: static;
  }
}
@media screen and (max-width: 1100px) {
  .p-solutionHeading {
    width: 62.5vw;
    padding-inline: 0;
    margin-bottom: 2.5vw;
  }
  .p-solutionCards {
    width: 83.14vw;
    padding-inline: 0;
  }
}
@media screen and (max-width: 880px) {
  .p-solution {
    padding-top: 8.21vw;
    background-image: url("../images/bg_solution_sp.png");
  }
  @supports (background-image: url("../images/bg_solution_sp.webp")) {
    .p-solution {
      background-image: url("../images/bg_solution_sp.webp");
    }
  }
  .webp .p-solution {
    background-image: url("../images/bg_solution_sp.webp");
  }
  .p-solutionCards {
    width: 99.2vw;
  }
}
@media screen and (max-width: 768px) {
  .p-solutionHeading {
    width: 86.41vw;
  }
  .p-solutionDx {
    padding-top: 8.21vw;
    padding-bottom: 31.28vw;
    display: flex;
    flex-direction: column-reverse;
    gap: 23.59vw;
  }
  .p-solutionDxLogo {
    width: 96.41vw;
    margin-inline: auto 0;
  }
  .p-solutionDxImageWrapper {
    width: 89.23vw;
  }
  .p-solutionDxDevice {
    width: 49.49vw;
    top: 39.49vw;
    right: 50%;
    transform: translate(50%, 0) scale(0);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .p-solutionDxDevice.--animate {
    transform: translate(50%, 0) scale(1);
  }
  .p-solutionDxApp {
    width: 24.62vw;
  }
  .p-solutionDxApp.--01.--animate {
    top: -17.18vw;
    left: 25.38vw;
  }
  .p-solutionDxApp.--02.--animate {
    top: -28.72vw;
    left: 0;
  }
  .p-solutionDxApp.--03.--animate {
    top: -17.69vw;
    left: 49.74vw;
  }
  .p-solutionDxApp.--04.--animate {
    top: -25.9vw;
    right: -5.38vw;
  }
  .p-solutionDxApp.--05.--animate {
    top: 51.28vw;
    right: -7.95vw;
  }
  .p-solutionDxApp.--06.--animate {
    top: 46.67vw;
    right: 66.15vw;
  }
}
@media screen and (max-width: 480px) {
  .p-solutionCards {
    width: 99.23vw;
  }
}

.p-centerCta {
  padding-block: 42px 116px;
  background-image: url("../images/bg_cta.png");
  background-size: cover;
  background-position: top center;
  position: relative;
  z-index: 1;
}
@supports (background-image: url("../images/bg_cta.webp")) {
  .p-centerCta {
    background-image: url("../images/bg_cta.webp");
  }
}
.webp .p-centerCta {
  background-image: url("../images/bg_cta.webp");
}
.p-centerCtaText {
  color: var(--color-text-light);
  font-size: 40px;
  font-weight: 900;
  line-height: 1.5;
  text-align: right;
  transform: skewX(-5deg);
  width: 1000px;
  max-width: 90%;
  margin-inline: auto;
}
.p-ctaActions {
  width: 1000px;
  max-width: 90%;
  margin-top: 40px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 48px;
}
.p-ctaItem {
  width: 450px;
  position: relative;
}
.p-ctaButton {
  color: var(--color-text-blue);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  background-color: var(--color-bg-white);
  width: 100%;
  height: 88px;
  box-shadow: 0 3px 3px rgb(0 0 0 / 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  transition: var(--hover);
  overflow: hidden;
}
.p-ctaButton span {
  display: block;
  z-index: 1;
}
.p-ctaButton svg {
  width: 100%;
}
.p-ctaButton__icon {
  width: 48px;
  position: absolute;
  top: 50%;
  right: 20px;
  translate: 0 -50%;
}
.p-ctaButton__book {
  width: 90px;
  position: absolute;
  top: -32px;
  left: -16px;
  z-index: 1;
  transition: transform 0.3s ease;
}
.p-ctaItem:hover .p-ctaButton__book {
  transform: rotate(8deg);
}
.p-ctaButton__icon,
.p-ctaButton__iconBackground,
.p-ctaButton__text30 {
  transition: var(--hover);
}
.p-ctaButton.--download {
  width: 100%;
  margin-inline: auto 0;
}
.p-ctaButton.--download .--upper {
  font-size: 20px;
}
.p-ctaButton.--download .--upper,
.p-ctaButton.--download .--bottom {
  text-indent: -18px;
  position: relative;
}
.p-ctaButton.--trial .--upper,
.p-ctaButton.--trial .--bottom {
  text-indent: -18px;
  position: relative;
}
.p-ctaButton.--trial .--upper svg {
  width: 104px;
  height: fit-content;
}
.p-ctaButton::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #0250c8 0%, #e252aa 80.77%, #ff5d41 100%);
  opacity: 0.3;
  position: absolute;
  inset: 0;
  translate: -100% 0;
  transition: var(--hover-fast);
  z-index: 0;
}
.p-ctaButton:hover {
  color: var(--color-bg-darkNavy);
}
.p-ctaButton:hover::after {
  translate: 0 0;
}
.p-ctaButton:hover .p-ctaButton__iconBackground,
.p-ctaButton:hover .p-ctaButton__text30 {
  fill: var(--color-bg-darkNavy);
}
.p-ctaButton:hover .p-ctaButton__icon {
  rotate: -9deg;
}
.p-centerCtaPersons {
  width: 800px;
  position: absolute;
  bottom: 0;
  left: calc(50% - 320px);
  z-index: -1;
  transform: translate(-50%, 100px);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p-centerCtaPersons.--animate {
  transform: translate(-50%, 0);
}
@media screen and (max-width: 1100px) {
  .p-centerCta {
    padding-block: 2.19vw 6.04vw;
  }
  .p-centerCtaText {
    font-size: 2.5vw;
    width: fit-content;
    margin-inline: auto 16.61vw;
  }
  .p-ctaActions {
    width: 27.6vw;
    margin-top: 3.54vw;
    margin-inline: auto 18.65vw;
    gap: 4.17vw;
  }
  .p-ctaItem {
    width: 100%;
  }
  .p-centerCtaPersons {
    width: 50.1vw;
    left: 5.63vw;
    transform: translateY(100px);
  }
  .p-centerCtaPersons.--animate {
    transform: translateY(0);
  }
  .p-ctaButton {
    font-size: 1.25vw;
    height: 5.21vw;
    gap: 0.42vw;
  }
  .p-ctaButton__icon {
    width: 2.81vw;
    right: 1.25vw;
  }
  .p-ctaButton__book {
    width: 5.31vw;
    top: -1.98vw;
    left: -1.04vw;
  }
  .p-ctaButton.--download .--upper {
    font-size: 1.67vw;
  }
  .p-ctaButton.--download .--upper,
  .p-ctaButton.--download .--bottom {
    text-indent: -3vw;
  }
  .p-ctaButton.--trial .--upper,
  .p-ctaButton.--trial .--bottom {
    text-indent: -2.6vw;
  }
  .p-ctaButton.--trial .--upper svg {
    width: 6.15vw;
    height: 1.88vw;
  }
}
@media screen and (max-width: 768px) {
  .p-centerCta {
    padding-block: 8.21vw 60vw;
    background-image: url("../images/bg_cta_sp.png");
  }
  @supports (background-image: url("../images/bg_cta_sp.webp")) {
    .p-centerCta {
      background-image: url("../images/bg_cta_sp.webp");
    }
  }
  .webp .p-centerCta {
    background-image: url("../images/bg_cta_sp.webp");
  }
  .p-centerCtaText {
    font-size: 7.18vw;
    margin-inline: auto;
  }
  .p-ctaActions {
    width: 88.46vw;
    margin-top: 11.03vw;
    margin-inline: auto;
    gap: 6.15vw;
  }
  .p-ctaButton,
  .p-ctaButton.--download .--upper {
    font-size: 4.62vw;
    gap: 1.54vw;
  }
  .p-ctaButton.--download,
  .p-ctaButton.--trial {
    width: calc(100% - 2.56vw);
    height: 17.18vw;
    margin-inline: auto 0;
  }
  .p-ctaButton.--trial .--upper svg {
    width: 19.23vw;
    height: 5.9vw;
  }
  .p-ctaButton__book {
    width: 16.92vw;
    top: -6.15vw;
    left: -3.33vw;
  }
  .p-ctaButton__icon {
    width: 8.97vw;
    right: 3.59vw;
  }
  .p-centerCtaPersons {
    width: 85.64vw;
    left: 50%;
    transform: translate(-50%, 100px);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .p-centerCtaPersons.--animate {
    transform: translate(-50%, 0);
  }
}

.p-ctaBottomLine {
  color: var(--color-text-light);
  padding-block: 100px 30px;
  background-image: url("../images/bg_grad_blue.png");
  background-size: cover;
  position: relative;
  z-index: 1;
}
@supports (background-image: url("../images/bg_grad_blue.webp")) {
  .p-ctaBottomLine {
    background-image: url("../images/bg_grad_blue.webp");
  }
}
.webp .p-ctaBottomLine {
  background-image: url("../images/bg_grad_blue.webp");
}
.p-ctaBottomIllustLeft {
  width: 600px;
  position: absolute;
  left: calc(50% - 360px);
  translate: -50% 0;
  top: -80px;
}
.p-ctaBottomIllustRight {
  width: 170px;
  position: absolute;
  top: -105px;
  left: calc(50% + 530px);
  translate: -50% 0;
}
.p-ctaBottomSlider {
  overflow: hidden;
  white-space: nowrap;
}
.p-ctaBottomTextWrapper {
  display: inline-flex;
  align-items: center;
  animation: scrollText 15s linear infinite;
}
.p-ctaBottomText {
  font-weight: 900;
  display: flex;
  align-items: center;
  transform: skewX(-5deg);
  white-space: nowrap;
}
.p-ctaBottomText .--normal {
  font-size: 40px;
}
.p-ctaBottomText .--large {
  font-size: 48px;
}
@keyframes scrollText {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.333%);
  }
}
@media screen and (max-width: 1280px) {
  .p-ctaBottomIllustLeft {
    left: 0;
    translate: 0 0;
  }
  .p-ctaBottomIllustRight {
    left: auto;
    right: 24px;
    translate: 0 0;
  }
}
@media screen and (max-width: 1100px) {
  .p-ctaBottomLine {
    padding-block: 6.82vw 2.81vw;
  }
  .p-ctaBottomIllustLeft {
    width: 35.21vw;
    left: 11.77vw;
    top: -4.64vw;
  }
  .p-ctaBottomIllustRight {
    width: 10.68vw;
    top: -7.55vw;
    right: 8.54vw;
  }
  .p-ctaBottomText .--normal {
    font-size: 2.5vw;
  }
  .p-ctaBottomText .--large {
    font-size: 3.13vw;
  }
}
@media screen and (max-width: 768px) {
  .p-ctaBottomLine {
    padding-block: 35.13vw 8.72vw;
    background-image: url("../images/bg_grad_blue_sp.png");
  }
  @supports (background-image: url("../images/bg_grad_blue_sp.webp")) {
    .p-ctaBottomLine {
      background-image: url("../images/bg_grad_blue_sp.webp");
    }
  }
  .webp .p-ctaBottomLine {
    background-image: url("../images/bg_grad_blue_sp.webp");
  }
  .p-ctaBottomIllustLeft {
    width: 55.13vw;
    top: -8.97vw;
    left: 3.59vw;
  }
  .p-ctaBottomIllustRight {
    width: 30.51vw;
    top: -9.74vw;
    right: 12.31vw;
  }
  .p-ctaBottomText .--normal {
    font-size: 5.13vw;
  }
  .p-ctaBottomText .--large {
    font-size: 6.67vw;
  }
}

.p-achievements {
  padding-block: 72px 10px;
  background-image: url("../images/bg_grad_blue_lg.png");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: repeat-y;
}
@supports (background-image: url("../images/bg_grad_blue_lg.webp")) {
  .p-achievements {
    background-image: url("../images/bg_grad_blue_lg.webp");
  }
}
.webp .p-achievements {
  background-image: url("../images/bg_grad_blue_lg.webp");
}
.p-achievementsImage {
  width: 1326px;
  max-width: 90%;
  margin-top: 32px;
  margin-inline: auto;
}
.p-achievementsList {
  list-style: none;
  width: fit-content;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  transform: scale(0);
  transform-origin: top center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p-achievementsList.--animate {
  transform: scale(1);
  opacity: 1;
}
.p-achievementsList__item {
  width: 350px;
}
@media screen and (max-width: 1100px) {
  .p-achievements {
    padding-block: 6.82vw 0.99vw;
  }
  .p-achievementsImage {
    max-width: 100%;
    width: 90.63vw;
    margin-top: 3.02vw;
  }
  .p-achievementsList {
    gap: 1.88vw;
  }
  .p-achievementsList__item {
    width: 24.17vw;
  }
}
@media screen and (max-width: 768px) {
  .p-achievements {
    padding-block: 8.21vw;
    background-image: url("../images/bg_grad_blue_lg_sp.png");
  }
  @supports (background-image: url("../images/bg_grad_blue_lg_sp.webp")) {
    .p-achievements {
      background-image: url("../images/bg_grad_blue_lg_sp.webp");
    }
  }
  .webp .p-achievements {
    background-image: url("../images/bg_grad_blue_lg_sp.webp");
  }
  .p-achievementsList {
    flex-direction: column;
    gap: 6.15vw;
  }
  .p-achievementsList__item {
    width: 68.21vw;
  }
}

.p-result {
  padding-block: 80px;
  background-image: url("../images/bg_grad_blue_lg.png");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: repeat-y;
}
@supports (background-image: url("../images/bg_grad_blue_lg.webp")) {
  .p-result {
    background-image: url("../images/bg_grad_blue_lg.webp");
  }
}
.webp .p-result {
  background-image: url("../images/bg_grad_blue_lg.webp");
}
.p-resultHeading {
  width: 720px;
  margin-inline: auto;
  margin-bottom: 24px;
}
.p-cardSlider {
  position: relative;
}
.p-cardSlider__container {
  overflow: hidden;
  position: relative;
}
.p-cardSlider__wrapper {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  align-items: center;
  padding-block: 32px 40px;
}
.p-cardSlider__item {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 24px;
}
.p-card {
  display: block;
  width: 330px;
  padding-block: 32px;
  padding-inline: 32px;
  border-radius: 19px;
  background-image: url("../images/bg_card_gray.png");
  box-shadow: 0 4px 4px 0 rgba(0 0 0 / 25%);
  transition: transform 0.5s ease, background-image 0.3s ease, height 0.3s ease;
}
@supports (background-image: url("../images/bg_card_gray.webp")) {
  .p-card {
    background-image: url("../images/bg_card_gray.webp");
  }
}
.webp .p-card {
  background-image: url("../images/bg_card_gray.webp");
}
.p-cardSlider__item.--active .p-card {
  transform: scale(1.1);
}
.p-card:hover {
  background-image: url("../images/bg_card_pink.png");
  transform: translateY(10px);
}
@supports (background-image: url("../images/bg_card_pink.webp")) {
  .p-card:hover {
    background-image: url("../images/bg_card_pink.webp");
  }
}
.webp .p-card:hover {
  background-image: url("../images/bg_card_pink.webp");
}
.p-cardSlider__item.--active .p-card:hover {
  transform: scale(1.1) translateY(10px);
}
.p-cardSlider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.p-cardSlider__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #fff;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.3s ease;
}
.p-cardSlider__dot.--active {
  background-color: #f8422a;
}
.p-cardTitle {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.p-cardImage {
  width: 100%;
  margin-bottom: 16px;
}
.p-cardText {
  font-size: 14px;
  line-height: 1.7;
}
.p-cardTag {
  color: var(--color-bg-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  background-color: var(--color-bg-white);
  padding: 3px 5px;
  display: block;
  width: fit-content;
  margin-top: 16px;
}
.p-cardCompanyName {
  color: var(--color-text-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.1;
  display: block;
  width: fit-content;
  background-color: var(--color-bg-blue);
  padding: 3px 5px;
  margin-top: 10px;
}
.p-cardCompanyName.--small {
  font-size: 11px;
  white-space: nowrap;
}
@media screen and (max-width: 1100px) {
  .p-result {
    padding-block: 5.21vw;
  }
  .p-resultHeading {
    width: 54.17vw;
    margin-bottom: 1.67vw;
  }
  .p-cardSlider__item {
    padding-inline: 1.56vw;
  }
}
@media screen and (max-width: 768px) {
  .p-result {
    padding-block: 8.21vw;
    background-image: url("../images/bg_grad_blue_lg_sp.png");
  }
  @supports (background-image: url("../images/bg_grad_blue_lg_sp.webp")) {
    .p-result {
      background-image: url("../images/bg_grad_blue_lg_sp.webp");
    }
  }
  .webp .p-result {
    background-image: url("../images/bg_grad_blue_lg_sp.webp");
  }
  .p-resultHeading {
    width: 83.85vw;
    margin-bottom: 4.1vw;
  }
  .p-card:hover {
    transform: translateY(0);
  }
  .p-cardSlider__item.--active .p-card:hover {
    transform: scale(1) translateY(0);
  }
  .p-cardSlider {
    margin-bottom: 6.15vw;
  }
  .p-cardSlider__container {
    padding-inline: 15.9vw;
  }
  .p-cardSlider__wrapper {
    padding-block: 0;
    gap: 3.59vw;
  }
  .p-cardSlider__item {
    width: 68.21vw;
    padding-inline: 0;
  }
  .p-cardSlider__item.--active .p-card {
    transform: none;
  }
  .p-card {
    width: 100%;
  }
  .p-cardTitle {
    font-size: 3.31vw;
  }
  .p-cardText {
    font-size: 2.89vw;
  }
  .p-cardTag,
  .p-cardCompanyName {
    font-size: 2.48vw;
  }
  .p-cardCompanyName.--small {
    font-size: 2.3vw;
  }
  .p-cardSlider__dots {
    gap: 1.54vw;
    margin-top: 4.1vw;
  }
  .p-cardSlider__dot {
    width: 8px;
    height: 8px;
    gap: 8px;
  }
}

.p-movie {
  padding-block: 64px 56px;
  background-color: #005faf;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.p-movieHeading {
  color: var(--color-text-light);
  font-size: 56px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 4px 4px rgba(0 0 0/ 25%);
  line-height: 1;
  transform: skewX(-5deg);
  margin-bottom: 40px;
}
.p-movieHeading strong {
  font-size: 72px;
  font-weight: 900;
  display: inline-block;
  margin-right: 4px;
}
.p-movieList {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 1120px;
  max-width: 90%;
  margin-inline: auto;
}
.p-movieItem {
  width: 100%;
}
.p-movieItem {
  width: 100%;
}
.p-movieItem a {
  display: block;
  box-shadow: 0 4px 20px rgb(255 255 255 / 80%);
  transition: 0.3s all ease-in-out;
}
.p-movieItem a:hover {
  transform: translateY(10px);
}
.p-movieCopy {
  color: var(--color-text-light);
  font-size: 20px;
  font-weight: 900;
  transform: skewX(-5deg);
  text-shadow: 0 4px 4px rgba(0 0 0/ 25%);
  max-width: 1040px;
  margin-top: 64px;
  margin-inline: auto;
}
.p-personIntroduction {
  width: 420px;
  position: absolute;
  bottom: -66px;
  left: calc(50% - 280px);
  transform: translate(-50%, 100%);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p-personIntroduction.--animate {
  transform: translate(-50%, 0);
}
.p-introductionWrapper {
  width: 1120px;
  max-width: 90%;
  margin-inline: auto;
}
.p-introduction {
  padding-block: 32px;
  padding-inline: 40px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f5f9fd 0%, rgba(232, 239, 252, 0.8) 100%);
  width: 600px;
  margin-top: 48px;
  margin-inline: auto 0;
}
.p-introductionTitle {
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-bottom: 24px;
}
.p-introductionTitle strong {
  font-size: 24px;
}
.p-introductionText {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 1px;
}
@media screen and (max-width: 1100px) {
  .p-movie {
    padding-block: 3.8vw 7.55vw;
  }
  .p-movieHeading {
    font-size: 3.59vw;
    margin-bottom: 3.96vw;
  }
  .p-movieHeading strong {
    font-size: 5vw;
  }
  .p-movieList {
    width: fit-content;
    max-width: 100%;
  }
  .p-movieItem {
    width: 22.97vw;
  }
  .p-movieCopy {
    font-size: 1.25vw;
    margin-top: 3.33vw;
    margin-inline: 13.54vw auto;
  }
  .p-introductionWrapper {
    width: 100%;
    max-width: 100%;
  }
  .p-introduction {
    padding-block: 2.08vw;
    padding-inline: 2.6vw;
    border-radius: 0.99vw;
    width: 41.98vw;
    margin-top: 2.86vw;
    margin-inline: auto 12.97vw;
  }
  .p-introductionTitle {
    font-size: 1.3vw;
    gap: 2.08vw;
    margin-bottom: 1.88vw;
  }
  .p-introductionTitle strong {
    font-size: 1.67vw;
  }
  .p-introductionText {
    font-size: 0.83vw;
  }
  .p-personIntroduction {
    width: 30.73vw;
    left: 12.92vw;
    transform: translateY(100%);
  }
  .p-personIntroduction.--animate {
    transform: translateY(0);
  }
}
@media screen and (max-width: 768px) {
  .p-movie {
    padding-block: 10.26vw 8.21vw;
  }
  .p-movieHeading {
    font-size: 7.18vw;
    margin-bottom: 6.15vw;
  }
  .p-movieHeading strong {
    font-size: 10.26vw;
  }
  .p-movieList {
    flex-direction: column;
    gap: 6.15vw;
  }
  .p-movieItem {
    width: 88.46vw;
  }
  .p-movieCopy {
    font-size: 7.18vw;
    text-align: center;
    margin-top: 12.05vw;
    margin-inline: auto;
  }
  .p-personIntroduction {
    width: 88.46vw;
    left: 4.87vw;
    bottom: 78.15vw;
    z-index: -1;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .p-introduction {
    width: 87.69vw;
    padding-block: 4.1vw 6.15vw;
    padding-inline: 6.15vw;
    margin-top: 76.41vw;
    margin-inline: auto;
    border-radius: 4.87vw;
  }
  .p-introductionTitle {
    font-size: 6.15vw;
    line-height: 1.3;
    flex-direction: column;
    gap: 2.05vw;
    margin-bottom: 4.1vw;
  }
  .p-introductionTitle strong {
    font-size: 6.15vw;
  }
  .p-introductionText {
    font-size: 4.1vw;
  }
}

.p-footerUpperLine {
  color: #cacaca;
  padding-block: 100px 30px;
  background-color: #e6e6e6;
  position: relative;
  z-index: 1;
}
.p-footerUpperLineImage {
  width: 600px;
  position: absolute;
  top: -80px;
  left: calc(50% + 280px);
  translate: -50% 0;
}
@media screen and (max-width: 1200px) {
  .p-footerUpperLineImage {
    left: inherit;
    translate: 0 0;
    right: 40px;
  }
}
@media screen and (max-width: 1100px) {
  .p-footerUpperLine {
    padding-block: 6.82vw 2.81vw;
  }
  .p-footerUpperLineImage {
    width: 35.21vw;
    top: -5.42vw;
    right: 17.71vw;
  }
}
@media screen and (max-width: 768px) {
  .p-footerUpperLine {
    padding-block: 36.41vw 3.85vw;
  }
  .p-footerUpperLineImage {
    width: 86.92vw;
    top: -2.82vw;
    right: 9.49vw;
  }
}

.l-footer {
  padding-block: 45px 120px;
  padding-inline: 1em;
  background-color: #3350a2;
  position: relative;
}
.p-pageTop {
  width: 86px;
  position: absolute;
  top: -29px;
  left: calc(50% + 480px);
  translate: -50% 0;
  z-index: 1;
}
.l-footerProducts {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 96px;
}
.l-footerProductLogo {
  color: var(--color-text-light);
  width: 288px;
  position: relative;
}
.l-footerProductLogo figcaption {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  top: calc(96px + 9px);
  translate: -50% 0;
}
.l-footerBottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 2em;
  max-width: 1056px;
  margin-top: 75px;
  margin-inline: auto;
}
.l-footerSnsHeading {
  color: var(--color-text-light);
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 16px;
}
.l-footerSns {
  display: flex;
  align-items: center;
  gap: 16px;
}
.l-footerSnsList {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.l-footerSnsItem {
  width: 27px;
}
.l-footerSnsItem a,
.l-footerSnsItem img {
  display: block;
}
.l-footerCopyright {
  color: var(--color-text-light);
  font-size: 12px;
  letter-spacing: 3px;
}
@media screen and (max-width: 1100px) {
  .p-pageTop {
    left: auto;
    right: 40px;
    translate: 0 0;
  }
}
@media screen and (max-width: 768px) {
  .l-footer {
    padding-block: 80px 32px;
  }
  .p-pageTop {
    top: -16px;
    right: 0;
  }
  .l-footerProducts {
    flex-direction: column;
    gap: 24px;
  }
  .l-footerProductLogo {
    width: 100%;
  }
  .l-footerProductLogo img {
    display: block;
    width: 288px;
    margin-inline: auto;
  }
  .l-footerProductLogo figcaption {
    font-size: 14px;
    white-space: normal;
    position: static;
    text-align: center;
    translate: inherit;
    margin-top: 11px;
  }
  .l-footerBottom {
    margin-top: 24px;
    justify-content: center;
  }
  .l-footerCopyright {
    font-size: 14px;
    text-align: center;
  }
}

.p-floating {
  width: 100%;
  height: 90px;
  padding-top: 10px;
  background-image: url("../images/bg_floating_pc.png");
  background-size: cover;
  background-position: top center;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
}
@supports (background-image: url("../images/bg_floating_pc.webp")) {
  .p-floating {
    background-image: url("../images/bg_floating_pc.webp");
  }
}
.webp .p-floating {
  background-image: url("../images/bg_floating_pc.webp");
}
.js-floating {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.js-floating.--visible {
  opacity: 1;
  visibility: visible;
}
.p-floatingMovieButton {
  width: 110px;
  position: absolute;
  top: -50px;
  left: calc(50% + 510px);
  translate: -50% 0;
  transition: var(--hover-fast);
}
.p-floatingMovieButton a {
  display: block;
}
.p-floatingMovieButton a:hover {
  translate: 0 10px;
}
.p-floatingActions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 1000px;
  margin-inline: auto;
}
.p-floatingActions .p-ctaButton {
  height: 70px;
  font-size: 16px;
  gap: 6px;
}
.p-floatingActions .p-ctaButton__book {
  width: 78px;
  top: -22px;
  left: -30px;
}
.p-floatingActions .p-ctaButton__icon {
  width: 32px;
}
.p-floatingActions .p-ctaItem:has(.--download) {
  width: 320px;
}
.p-floatingActions .p-ctaItem:has(.--trial) {
  width: 320px;
}
.p-floatingPersonLeft {
  width: 112px;
  position: absolute;
  left: calc(50% - 492px);
  translate: 0 0;
  bottom: 0;
}
.p-floatingPersonRight {
  width: 130px;
  position: absolute;
  left: calc(50% + 312px);
  translate: 0 0;
  bottom: 0;
}
@media screen and (max-width: 1300px) {
  .p-floating {
    height: 7.26vw;
    padding-top: 1vw;
    border-radius: 0.21vw;
  }
  .p-floatingMovieButton {
    width: 9.85vw;
    top: -4.75vw;
    left: auto;
    right: 5.07vw;
    translate: 0 0;
  }
  .p-floatingActions {
    gap: 2.08vw;
    justify-content: inherit;
    margin-inline: 20.42vw auto;
  }
  .p-floatingActions .p-ctaItem:has(.--download) {
    width: 27.6vw;
  }
  .p-floatingActions .p-ctaItem:has(.--trial) {
    width: 25.89vw;
  }
  .p-floatingActions .p-ctaButton {
    font-size: 1.25vw;
    height: 5.21vw;
    gap: 0.42vw;
  }
  .p-floatingActions .p-ctaButton__icon {
    width: 2.81vw;
    right: 1.25vw;
  }
  .p-floatingActions .p-ctaButton__book {
    width: 6.31vw;
    top: -1.5vw;
    left: -2.04vw;
  }
  .p-floatingActions .p-ctaButton.--download .--upper {
    font-size: 1.67vw;
  }
  .p-floatingActions .p-ctaButton.--download .--upper,
  .p-floatingActions .p-ctaButton.--download .--bottom {
    text-indent: -3vw;
  }
  .p-floatingActions .p-ctaButton.--trial .--upper,
  .p-floatingActions .p-ctaButton.--trial .--bottom {
    text-indent: -2.6vw;
  }
  .p-floatingActions .p-ctaButton.--trial .--upper svg {
    width: 6.15vw;
    height: 1.88vw;
  }
  .p-floatingPersonLeft {
    width: 9.02vw;
    left: 8.47vw;
  }
  .p-floatingPersonRight {
    width: 10.67vw;
    right: 16.2vw;
    left: auto;
  }
}
@media screen and (max-width: 960px) {
  .p-floatingMovieButton {
    top: -6vw;
  }
}
@media screen and (max-width: 768px) {
  .p-floating {
    background-image: url("../images/bg_floating_sp.png");
  }
  @supports (background-image: url("../images/bg_floating_sp.webp")) {
    .p-floating {
      background-image: url("../images/bg_floating_sp.webp");
    }
  }
  .webp .p-floating {
    background-image: url("../images/bg_floating_sp.webp");
  }
  .p-floating.--pc {
    display: none;
  }
}

/* sp */
.p-floating.--sp {
  display: none;
  width: 100%;
  height: 24.1vw;
  padding-top: 3.85vw;
}
@media screen and (max-width: 768px) {
  .p-floating.--sp {
    display: block;
  }
  .p-floatingMovie {
    padding-top: 64px;
    width: 21.54vw;
    position: absolute;
    right: 3.08vw;
    bottom: 3.33vw;
  }
  .p-floatingActions {
    margin-inline: 4.1vw auto;
  }
  .p-floatingActions .p-ctaButton,
  .p-floatingActions .p-ctaButton.--download .--upper {
    font-size: 4.62vw;
    gap: 1.54vw;
  }
  .p-floatingActions .p-ctaButton.--download {
    width: calc(100% - 2.56vw);
    height: 17.18vw;
    margin-inline: auto 0;
  }
  .p-floatingActions .p-ctaButton.--trial .--upper svg {
    width: 19.23vw;
    height: 5.9vw;
  }
  .p-floatingActions .p-ctaButton__book {
    width: 16.92vw;
    top: -6.15vw;
    left: -3.33vw;
  }
  .p-floatingActions .p-ctaButton__icon {
    width: 8.97vw;
    right: 3.59vw;
  }
  .p-floatingActions .p-ctaItem:has(.--download) {
    width: 67.69vw;
  }
  .p-floatingActions .p-ctaItem .p-ctaButton {
    padding-left: 22.56vw;
    width: 100%;
    align-items: flex-start;
  }
  .p-floatingActions .p-ctaItem .p-ctaButton__book {
    width: 16.15vw;
    position: absolute;
    top: -1.56vw;
    left: 2.82vw;
  }
  .p-floatingActions .p-ctaItem .p-ctaButton .--upper,
  .p-floatingActions .p-ctaItem .p-ctaButton .--bottom {
    text-indent: inherit;
  }
}

/* movie modal */
.p-movieModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.p-movieModal.--open {
  display: flex;
}
.p-movieModal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
.p-movieModal__content {
  position: relative;
  max-width: 50rem;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  width: 90%;
  z-index: 1;
}
.p-movieModal__close {
  position: absolute;
  top: -48px;
  right: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: opacity 0.3s ease;
}
.p-movieModal__close:hover {
  opacity: 0.7;
}
.p-movieModal__iframeWrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
.p-movieModal__iframe {
  width: 100%;
  height: 100%;
  border: none;
}
@media screen and (max-width: 768px) {
  .p-movieModal__content {
    width: 95%;
  }
  .p-movieModal__close {
    top: -40px;
    font-size: 28px;
    width: 28px;
    height: 28px;
  }
}