/* reset */
:root { font-size: 100%; }
* { box-sizing: border-box; margin: 0; padding: 0; }
*::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
main { display: flex; flex-direction: column; min-height: 0; }
ul, ol { list-style: none; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace; font-size: 1em; }
a { background-color: transparent; text-decoration: underline; }
a:hover, a:active, a:focus { text-decoration: none; }
abbr[title] { border-bottom: 0; text-decoration: underline dotted; }
b, strong { font-weight: bold; }
em { font-style: normal; font-weight: bold; }
dfn, cite { font-style: normal; }
code, kbd, samp { font-family: monospace; font-size: 1em; }
small { font-size: 100%; }
i { font-style: italic; }
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { max-width: 100%; border-style: none; vertical-align: bottom; }
table { width: 100%; border-collapse: collapse; }
button, input, optgroup, select, textarea { border-radius: 0; font-family: inherit; font-size: 100%; line-height: inherit; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; border: 0; background: none; cursor: pointer; }
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { padding: 0; border-style: none; }
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: none; }
legend { display: table; max-width: 100%; color: inherit; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px; }
[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }

/* tokens */
:root {
  /* color */
  --color-white: #fff;
  --color-gray: #D9D9D9;
  --color-text: #272E33;
  --color-black: #222;
  --color-green: #00a23f;
  --color-blue: #0973CB;
  --color-blue-bright: #1E96FA;
  --color-blue-deep: #0B73C9;
  --color-bg-sp: #F8FBFD;
  --color-kv-from: #F8FCFF;
  --color-kv-to: #CED7DF;
  --color-nav-bg: #F5F8FA;
  --color-border: #CCC;
  --color-border-light: #E4E4E4;
  --color-red: #EA0437;
  --color-red-mid: #D20D39;
  --color-red-hover: #BC0B33;
  --color-teal: #277A80;
  --color-teal-deep: #076268;
  --color-teal-hover: #055E63;
  --color-control: #696D71;
  --color-card-tint: rgba(250, 251, 255, 0.40);
  --color-grad: linear-gradient(180deg, var(--color-blue-bright) 0%, var(--color-blue-deep) 100%);
  --color-grad-red: linear-gradient(90deg, var(--color-red) 0%, var(--color-red-mid) 100%);
  --color-grad-teal: linear-gradient(90deg, var(--color-teal) 0%, var(--color-teal-deep) 100%);
  --color-grad-kv: linear-gradient(180deg, var(--color-kv-from) 45.65%, var(--color-kv-to) 100%);
  --color-grad-card: linear-gradient(270deg, var(--color-card-tint) 0%, rgba(255, 255, 255, 0) 50.48%, var(--color-card-tint) 100%);
  --shadow-inset-highlight: 24px 0 36px 0 rgba(255, 255, 255, 0.10) inset, 8px 0 28px 0 rgba(255, 255, 255, 0.30) inset;
  --shadow-card: 0 16px 40px 0 rgba(177, 199, 221, 0.30), 0 16px 56px 0 rgba(212, 221, 227, 0.60), 0 0 32px 0 rgba(255, 255, 255, 0.70) inset;

  /* fluid */
  --fluid-4-10: clamp(0.25rem, 0.118rem + 0.5634vw, 0.625rem);
  --fluid-8-12: clamp(0.5rem, 0.412rem + 0.3756vw, 0.75rem);
  --fluid-10-24: clamp(0.625rem, -3.75rem + 5.8333vw, 1.5rem);
  --fluid-14-16: clamp(0.875rem, 0.831rem + 0.1878vw, 1rem);
  --fluid-14-18: clamp(0.875rem, 0.787rem + 0.3756vw, 1.125rem);
  --fluid-14-20: clamp(0.875rem, 0.743rem + 0.5634vw, 1.25rem);
  --fluid-16-18: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);
  --fluid-16-24: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
  --fluid-16-32: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);
  --fluid-16-40: clamp(1rem, 0.4718rem + 2.2535vw, 2.5rem);
  --fluid-20-200: clamp(1.25rem, -3.8636rem + 21.8182vw, 12.5rem);
  --fluid-24-40: clamp(1.5rem, 1.0455rem + 1.9394vw, 2.5rem);
  --fluid-24-54: clamp(1.5rem, 0.8398rem + 2.8169vw, 3.375rem);
  --fluid-24-80: clamp(1.5rem, 0.2676rem + 5.2582vw, 5rem);
  --fluid-32-56: clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem);
  --fluid-40-96: clamp(2.5rem, 1.2676rem + 5.2582vw, 6rem);
  --fluid-50-70: clamp(3.125rem, 2.6849rem + 1.8779vw, 4.375rem);
  --fluid-540-696: clamp(33.75rem, -1.0714rem + 37.1429vw, 43.5rem);

  /* layout */
  --lp-header-height: 68px;

  --lp-min-section-height: 680px;
}

/* utility */
.u-gradient {
  background: var(--color-grad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.u-color-blue {
  color: var(--color-blue);
}

.u-font-bold {
  font-weight: bold;
}

.u-only-pc {
  display: block;
}

.u-only-sp {
  display: none;
}

@media (max-width: 1200px) {
  .u-only-pc {
    display: none;
  }

  .u-only-sp {
    display: block;
  }
}

/* layout */
body {
  min-width: 320px;
  background: var(--color-white);
  color: var(--color-text);
  font-family: source-han-sans-japanese, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif;
  font-size: 1.6rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.lp-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

@media (min-width: 1201px) {
  .lp-container {
    height: 100dvh;
    overflow: hidden;
  }
}

.lp-main {
  background: linear-gradient(180deg, #F8FCFF 0%, #F2F9FF 50%, #CED7DF 100%);
}

@media (max-width: 1200px) {
  .lp-main {
    background: var(--color-bg-sp);
    overflow-x: clip;
  }
}

.lp-main__inner {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr auto;
}

.lp-main__inner > .lp-section {
  min-height: 0;
  width: 100%;
}

.lp-main__inner > .lp-nav {
  grid-row: 2;
}

@media (min-width: 1201px) {
  .lp-main__inner > .lp-section {
    grid-area: 1 / 1;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@media (max-width: 1200px) {
  .lp-main__inner {
    display: flex;
    flex-direction: column;
  }

  .lp-main__inner > .lp-section {
    overflow: visible;
  }
}

/* header */
.lp-header {
  position: relative;
  z-index: 99;
  background-color: var(--color-white);
  min-height: var(--lp-header-height);
  border-bottom: 1px solid var(--color-border);
}

.lp-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1440px;
  margin-inline: auto;
  padding: 12px 15px;
}

@media (max-width: 1200px) {
  .lp-header__inner {
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}

.lp-header__logo {
  display: flex;
  align-items: center;
  min-width: 110px;

  & img {
    width: 100%;
  }
}

.lp-textPhone-wrapper .lp-textPhone {
  display: none;
}

@media (max-width: 1200px) {
  .lp-textPhone {
    display: none;
  }

  .lp-textPhone-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .lp-textPhone-wrapper .lp-textPhone {
    display: block;
  }
}

.lp-textPhone__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: currentColor;
}

.lp-textPhone__numberGroup {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-textPhone__number {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}

.lp-textPhone__note {
  display: block;
  font-size: 12px;
  line-height: 1.2;
}

.lp-textPhone__icon {
  width: 36px;
  min-width: 36px;
  height: 20px;
  min-height: 20px;
}

.lp-textPhone__icon .of-iconColor-primary {
  fill: var(--color-green);
}

/* footer */
.lp-footer {
  background-color: var(--color-black);
  color: var(--color-white);
}

.lp-footer__content {
  max-width: 1300px;
  margin: 0 auto;
  padding: 16px 10px;
}

.lp-footer__list {
  display: flex;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

@media (max-width: 1200px) {
  .lp-footer__list {
    row-gap: 8px;
  }
}

.lp-footer__item {
  display: flex;
  gap: 16px;
  justify-content: center;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.18;
}

.lp-footer__copyright {
  text-align: center;
}

.lp-footer__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 100%;
  background-color: var(--color-white);
}

.lp-footer__link {
  text-decoration: none;
  color: var(--color-white);
}

@media (min-width: 1201px) {
  .lp-section {
    opacity: 0;
    visibility: hidden;

    &.is-active {
      opacity: 1;
      visibility: visible;
    }
  }

  .is-tab-ready .lp-section {
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
}


.lp-section__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: 60px 15px 60px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, -2.8333rem + 4.4444vw, 2.5rem);
  min-height: 600px;
}

@media (max-width: 1200px) {
  .lp-section__inner {
    padding-inline: var(--fluid-20-200);
    gap: var(--fluid-24-40);
    padding-bottom: 48px;
    min-height: auto;
  }

  .lp-section:first-child .lp-section__inner {
    background: var(--color-grad-kv);
  }
}

@media (min-width: 1201px) {
  .lp-section__inner--not-padding {
    padding: 0;
  }
}

.lp-section__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

/* nav */
.lp-nav {
  background: var(--color-nav-bg);
  backdrop-filter: blur(10px);
}

@media (min-width: 1201px) {
  .lp-nav-slot {
    display: contents;
  }
}

@media (max-width: 1200px) {
  .lp-nav-slot:has(.lp-nav.is-stuck) {
    height: var(--lp-nav-height, 70px);
  }

  .lp-nav {
    z-index: 99;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .lp-nav.is-stuck {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .lp-nav.is-stuck.is-fading-in {
    animation: lp-fade-in 0.2s ease-in both;
  }

  .lp-nav.is-stuck.is-hiding {
    animation: lp-fade-out 0.2s ease-in both;
  }
}

@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
  .lp-nav.is-stuck.is-fading-in,
  .lp-nav.is-stuck.is-hiding {
    animation: none;
  }
}

.lp-nav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 1426px;
  margin-inline: auto;
}

@media (max-width: 1200px) {
  .lp-nav__list {
    grid-template-columns: repeat(3, 1fr);
  min-height: 70px;
  }

  .lp-nav__item:first-child,
  .lp-nav__item:last-child {
    display: none;
  }

  .lp-nav__item:nth-child(2) {
    border-left: 0;
  }
}

.lp-nav__item {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  padding: 16px var(--fluid-4-10);
  font-size: var(--fluid-14-18);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.lp-nav__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-grad);
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .lp-nav__item:hover {
    color: var(--color-white);
    font-weight: 700;
  }

  .lp-nav__item:hover::before {
    opacity: 1;
  }
}

.lp-nav__item:not(:has(.lp-button)) {
  border-left: 1px solid var(--color-border-light);
}

@media (max-width: 1200px) {
  .lp-nav__item:nth-child(2) {
    border-left: none;
  }
}

.lp-nav__item[data-section-index] {
  cursor: pointer;
}

.lp-nav__item.is-current {
  box-shadow: var(--shadow-inset-highlight);
  color: var(--color-white);
  font-weight: 700;
}

.lp-nav__item.is-current::before {
  opacity: 1;
}

.lp-nav__item .lp-button {
  width: 100%;
  border-radius: 0;
  min-height: 68px;
  height: 100%;
  font-size: inherit;
}

.lp-nav__item:has(.lp-button) {
  padding: 0;
}

/* buttons */
.lp-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: auto;
}

@media (max-width: 1200px) {
  .lp-buttons {
    flex-direction: column;
  }
}

.lp-buttons .lp-button {
  min-width: 300px;
}

.lp-button {
  position: relative;
  isolation: isolate;
  display: flex;
  gap: 10px;
  padding: 10px var(--fluid-10-24);
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--color-white);
  min-height: 60px;
  border-radius: 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  background: var(--color-grad-red);
  box-shadow: var(--shadow-inset-highlight);

  &::before {
    content: "";
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    background-image: url('/img/landing_page/common/icon_btn_dl.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-shrink: 0;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--color-red-hover);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }
}

@media (max-width: 1200px) {
  .lp-button {
    width: 100%;
  }
}

.lp-button__text {
  position: relative;
  z-index: 1;
}

@media (hover: hover) {
  .lp-button:hover::after {
    opacity: 1;
  }
}

.lp-button--secondary {
  background: var(--color-grad-teal);
  box-shadow: var(--shadow-inset-highlight);

  &::before {
    width: 12px;
    height: 14px;
    background: var(--color-white);
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
  }

  &::after {
    background-color: var(--color-teal-hover);
  }
}

/* heading */
.lp-heading {
  font-size: clamp(2.5rem, -1.0714rem + 3.8095vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

@media (max-width: 1200px) {
  .lp-heading {
    font-size: 32px;
  }
}

.lp-content-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: source-han-sans-japanese, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif;
  font-size: clamp(1.25rem, 0.3571rem + 0.9524vw, 1.5rem);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 1200px) {
  .lp-content-title {
    font-size: 24px;
  }
}

.lp-content-title:has(.lp-content-title__label) {
  gap: 8px;
}

.lp-content-title__label {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  padding-right: 8px;
  margin-right: 8px;
  background: linear-gradient(180deg, transparent 0%, var(--color-text) 50%, transparent 100%) right / 1px 100% no-repeat;
}

.lp-content-title__label.u-color-blue {
  background: linear-gradient(180deg, transparent 0%, var(--color-blue) 50%, transparent 100%) right / 1px 100% no-repeat;
}

.lp-content-title > .lp-badge {
  margin-inline-end: 8px;
}

.lp-badge {
  display: flex;
  flex-shrink: 0;
  padding: 8px;
  justify-content: center;
  border: 1px solid var(--color-red);
  align-items: center;
  align-self: start;
  color: var(--color-red);
  font-size: clamp(0.875rem, 0.4286rem + 0.4762vw, 1rem);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1;
}

@media (max-width: 1200px) {
  .lp-badge {
    font-size: 16px;
    align-self: center;
  }
}

.lp-flex {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--fluid-8-12);
}

@media (max-width: 1200px) {
  .lp-flex {
    flex-direction: column;
    align-items: center;
  }
}

.lp-flex--column {
  flex-direction: column;
}

.lp-jumbotron {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  padding-left: 15px;
}

@media (max-width: 1200px) {
  .lp-jumbotron {
    flex-direction: column-reverse;
    align-items: stretch;
    height: auto;
    padding: 0;
  }
}

.lp-jumbotron__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fluid-24-54);
  z-index: 10;
}

.lp-jumbotron__textWrapper {
  display: flex;
  flex-direction: column;
  gap: var(--fluid-16-32);
}

@media (max-width: 1200px) {
  .lp-jumbotron__textWrapper {
    align-items: center;
  }
}

.lp-jumbotron__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  --fluid-16-24: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
  font-size: var(--fluid-16-24);
  font-weight: 700;
  line-height: 1;
  background: #FF194C;
  padding: 8px 16px;
  width: max-content;
  margin-bottom: 8px;
}

@media (max-width: 1200px) {
  .lp-jumbotron__badge {
    margin-inline: auto;
  }
}

.lp-jumbotron__title {
  font-size: var(--fluid-40-96);
  font-weight: 700;
  line-height: 1.1;
}

@media (max-width: 1200px) {
  .lp-jumbotron__title {
    text-align: center;
  }
}

.lp-jumbotron__title-small {
  font-size: var(--fluid-24-80);
}

.lp-jumbotron__title--xs {
  font-size: clamp(1.5rem, 0.7295rem + 3.2877vw, 3.75rem);
}

@media (max-width: 768px) {
  .lp-jumbotron__title--xs {
    font-size: clamp(1.75rem, 1.0344rem + 3.0534vw, 2.5rem);
  }
}

.lp-jumbotron__title--xs .lp-jumbotron__title-small {
  font-size: clamp(1.125rem, 0.6541rem + 2.0091vw, 2.5rem);
 }

.lp-jumbotron__image {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 100%;
  max-width: min(1000px, 74%);
  width: 100%;
  transform: translateX(12%);
  z-index: 1;
}

@media (max-width: 1200px) {
  .lp-jumbotron__image {
    --jumbotron-bleed-inline: 1.25rem;
    --jumbotron-bleed-top: clamp(3.125rem, 1.7045rem + 6.0606vw, 6.25rem);
    --jumbotron-bleed-bottom: clamp(3.125rem, 13.3333vw, 10rem);
    position: relative;
    inset: auto;
    height: auto;
    max-width: none;
    width: calc(100% + (var(--fluid-20-200) + var(--jumbotron-bleed-inline)) * 2);
    margin-inline: calc((var(--fluid-20-200) + var(--jumbotron-bleed-inline)) * -1);
    margin-block: calc(var(--jumbotron-bleed-top) * -1) calc(var(--jumbotron-bleed-bottom) * -1);
    transform: none;
  }
}

.lp-jumbotron__image-item:first-child {
  position: static;
}

.lp-jumbotron__image-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
}

@media (min-width: 1201px) and (max-height: 1000px) {
  .lp-jumbotron__image-item {
    object-fit: cover;
  }
}

@keyframes lp-jumbotron-image-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes lp-jumbotron-translate-y {
  0% {
    animation-timing-function: ease-in;
    translate: 0 -8px;
  }
  100% {
    translate: 0 0;
  }
}

.lp-jumbotron__image-item:nth-child(n + 2) {
  animation: lp-jumbotron-image-in 200ms ease-in 50ms both;
}

.lp-jumbotron__image-item--translate-y:nth-child(n + 2) {
  animation:
    lp-jumbotron-image-in 200ms ease-in 50ms both,
    lp-jumbotron-translate-y 200ms ease-in 50ms both;
}

.lp-jumbotron__image-item:nth-child(3) {
  z-index: 1;
}

.lp-jumbotron__image-item:nth-child(4) {
  animation-delay: 450ms;
}

.lp-jumbotron__image-item:nth-child(5) {
  animation-delay: 750ms;
}

@media (prefers-reduced-motion: reduce) {
  .lp-jumbotron__image-item:nth-child(n + 2) {
    animation: none;
  }
}

.lp-jumbotron__product {
  display: flex;
  flex-direction: column;
  gap: var(--fluid-14-16);
}

@media (max-width: 1200px) {
  .lp-jumbotron__product {
    align-items: center;
  }
}

.lp-jumbotron__release {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
  color: var(--color-blue);
  font-size: var(--fluid-16-24);
  font-weight: 700;
  line-height: 1.3;

  &::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: linear-gradient(270deg, transparent 0%, var(--color-blue) 25%, var(--color-blue) 75%, transparent 100%);
  }
}

@media (max-width: 1200px) {
  .lp-jumbotron__release {
    align-self: center;
  }
}

.lp-jumbotron__name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-jumbotron__series {
  font-size: var(--fluid-14-20);
  font-weight: 400;
  line-height: 1.3;
}

/* comparison */
.lp-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, clamp(25rem, 12.5rem + 13.3333vw, 28.5rem)));
  justify-content: center;
  gap: var(--fluid-16-40);
}

@media (max-width: 1200px) {
  .lp-comparison {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lp-comparison--arrow-icon {
  gap: var(--fluid-50-70);
}

.lp-comparison__image {
  display: flex;
  align-items: center;
  justify-content: center;

  & img {
    width: 100%;
  }
}

.lp-comparison__image--maxwidth {
  width: calc(100% + var(--fluid-16-24) * 2);
  margin-inline: calc(var(--fluid-16-24) * -1);
}

.lp-comparison__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px var(--fluid-16-24);
  border-radius: 8px;
  background: var(--color-grad-card);
  box-shadow: var(--shadow-card);
}

.lp-comparison--arrow-icon .lp-comparison__item {
  position: relative;
}

.lp-comparison--arrow-icon .lp-comparison__item:first-child::after {
  --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='38' viewBox='0 0 18 38' fill='none'%3E%3Cpath d='M18 19L0 38V0L18 19Z' fill='url(%23arrow-grad)'/%3E%3Cdefs%3E%3ClinearGradient id='arrow-grad' x1='0' y1='19' x2='18' y2='19' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%231E96FA' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%230B73C9'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + var(--fluid-50-70) / 2);
  z-index: 1;
  width: 40px;
  height: 38px;
  background-image: var(--arrow-icon), var(--arrow-icon);
  background-repeat: no-repeat;
  background-size: 18px 38px;
  background-position: 0 50%, 22px 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

@media (max-width: 1200px) {
  .lp-comparison--arrow-icon .lp-comparison__item:first-child::after {
    top: calc(100% + var(--fluid-50-70) / 2);
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    background-image: var(--arrow-icon);
    background-position: center;
  }
}

@keyframes lp-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes lp-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (min-width: 1201px) {
  .lp-comparison.is-intro .lp-comparison__item {
    animation: lp-fade-in 200ms ease-in 250ms both;
  }

  .lp-comparison.is-intro:not(.lp-comparison--arrow-icon) .lp-comparison__item:last-child {
    animation-delay: 700ms;
  }

  .lp-comparison--arrow-icon.is-intro .lp-comparison__item:first-child::after {
    animation: lp-fade-in 200ms ease-in 600ms both;
  }

  .lp-comparison--arrow-icon.is-intro .lp-comparison__item:last-child {
    animation-delay: 1000ms;
  }
}

@media (min-width: 1201px) and (prefers-reduced-motion: reduce) {
  .lp-comparison.is-intro .lp-comparison__item,
  .lp-comparison--arrow-icon.is-intro .lp-comparison__item:first-child::after {
    animation: none;
  }
}

.lp-comparison__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-comparison__body--small {
  gap: 4px;
}


.lp-check-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lp-check-list__item {
  display: flex;
  align-items: flex-start;
  font-size: clamp(0.875rem, -0.0179rem + 0.9524vw, 1.125rem);
  line-height: 1.5;
}

@media (max-width: 1200px) {
  .lp-check-list__item {
    font-size: 16px
  }
}

.lp-check-list__item::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  margin-block-start: calc((1lh - 16px) / 2);
  margin-inline-end: 8px;
  width: 18px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16' fill='none'%3E%3Cpath d='M0.707031 7.5L6.20703 13L16.707 2.5' stroke='url(%23check-grad)' stroke-width='2'/%3E%3Cdefs%3E%3ClinearGradient id='check-grad' x1='16.207' y1='2.5' x2='5.70703' y2='13' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2356BDFF'/%3E%3Cstop offset='1' stop-color='%230B73C9'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain;
}

.lp-check-list__item-text {
  display: inline-block;
  font-weight: 400;
}

.lp-check-list--cross-mark .lp-check-list__item::before {
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1 1L15 15' stroke='url(%23cross-grad-1)' stroke-width='2'/%3E%3Cpath d='M1 15L15 1' stroke='url(%23cross-grad-2)' stroke-width='2'/%3E%3Cdefs%3E%3ClinearGradient id='cross-grad-1' x1='15' y1='15' x2='1' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ACB5BB'/%3E%3Cstop offset='0.504808' stop-color='%2333424C'/%3E%3Cstop offset='1' stop-color='%23ACB5BB'/%3E%3C/linearGradient%3E%3ClinearGradient id='cross-grad-2' x1='15' y1='0.999999' x2='1' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ACB5BB'/%3E%3Cstop offset='0.504808' stop-color='%2333424C'/%3E%3Cstop offset='1' stop-color='%23ACB5BB'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain;
}

/* video */
.lp-video {
  display: grid;
  grid-template-columns: minmax(0, var(--fluid-540-696)) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  gap: 20px var(--fluid-16-32);
  border-radius: 8px;
  background: var(--color-grad-card);
  box-shadow: var(--shadow-card);
  max-width: 1096px;
  margin-inline: auto;
  padding: 24px var(--fluid-16-24);
}

.lp-video__item {
  grid-column: 2;
  grid-row: 2;
}

.lp-video__player {
  position: relative;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  cursor: pointer;
}

.lp-video__media {
  width: min(100%, var(--fluid-540-696));
  height: auto;
  display: block;
}

@media (max-width: 1200px) {
  .lp-video__media {
    width: 100%;
  }
}

.lp-video__button {
  --pause-bar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='16' viewBox='0 0 4 16' fill='none'%3E%3Cpath d='M2 0V16' stroke='white' stroke-width='4'/%3E%3C/svg%3E");
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  width: 40px;
  height: 40px;
  padding: 12px 0;
  justify-content: center;
  align-items: center;
  gap: 4px;
  aspect-ratio: 1/1;
  border-radius: 100%;
  background: var(--color-control);
}

@media (max-width: 1200px) {
  .lp-video__button {
    width: 48px;
    height: 48px;
    right: 8px;
    bottom: 8px;
  }
}

.lp-video__button:not(.is-paused)::before,
.lp-video__button:not(.is-paused)::after {
  content: "";
  width: 4px;
  height: 16px;
  background: var(--pause-bar) no-repeat center / contain;
}

.lp-video__button.is-paused::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 2px;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent white;
}

.lp-video__buttonText {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lp-video > .lp-check-list {
  grid-column: 2;
  grid-row: 3;
}

@media (max-width: 1200px) {
  .lp-video {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 16px;
  }

  .lp-video__item,
  .lp-video__player,
  .lp-video > .lp-check-list {
    grid-column: auto;
    grid-row: auto;
  }
}