/* ==========================================
 FV
============================================*/
.fv {
  background: url(../images/pages/top/bg-fv@2x.webp) no-repeat top left/cover;
  padding-block: var(--sz-130) var(--sz-105);
  position: relative;
}

.fv__inner {
  padding-inline: var(--sz-45);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .fv__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.fv__heading {
  font-size: var(--sz-60);
  font-weight: bold;
  text-align: center;
  margin-bottom: var(--sz-110);
}

.fv__heading span {
  font-size: 46%;
}

/* PR */
.pr {
  display: flex;
  flex-direction: column;
  gap: var(--sz-20);
  width: 100%;
  margin-inline: auto;
  margin-bottom: var(--sz-70);
}

.pr__item {
  margin-bottom: 0;
  display: flex;
  align-items: stretch;
  filter: drop-shadow(var(--sz-2) var(--sz-4) var(--sz-6) rgba(0, 0, 0, 0.1));
}

.pr__pic {
  width: var(--sz-160);
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr__pic img {
  padding: 12%;
}

.pr__caption {
  flex: 1;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sz-15) var(--sz-45);
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--sz-25)) 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--sz-25)) 100%, 0 100%);
}

.pr__label {
  font-size: var(--sz-30);
  font-weight: bold;
}

.pr__desc {
  margin-bottom: 0;
  font-size: var(--sz-20);
  font-weight: bold;
}

@media screen and (min-width: 992px) {
  .fv {
    background-image: url(../images/pages/top/bg-fv.webp);
    padding-block: var(--sz-100) var(--sz-70);
  }
  .fv__heading {
    font-size: var(--sz-79);
    margin-bottom: var(--sz-50);
  }
  /* PR */
  .pr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sz-30);
    width: min(75.7%, 1090px);
    margin-bottom: var(--sz-65);
  }
  .pr__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
    border-top-left-radius: var(--sz-20);
    border-bottom-right-radius: var(--sz-20);
    overflow: hidden;
  }
  .pr__pic {
    order: 1;
    width: 100%;
    padding: var(--sz-20) var(--sz-20) var(--sz-40);
  }
  .pr__pic img {
    padding: unset;
    width: auto;
    height: var(--sz-140);
  }
  .pr__caption {
    order: 0;
    padding: var(--sz-40) var(--sz-20) 0;
    text-align: center;
    -webkit-clip-path: unset;
    clip-path: unset;
  }
  .pr__label {
    font-size: var(--sz-26);
  }
  .pr__desc {
    font-size: var(--sz-18);
  }
}
/* ==========================================
 About
============================================*/
.about {
  padding-block: var(--sz-100) var(--sz-80);
}

.about__inner {
  padding-inline: var(--sz-35);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .about__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.about__heading {
  margin-bottom: 0.5em;
}

.about__heading .small {
  font-size: 77.5%;
}

.about__heading .site-name {
  position: relative;
}

.about__heading .site-name img {
  width: var(--sz-360);
  display: inline-block;
}

.about__heading .site-name span {
  display: block;
  font-family: var(--font-default);
  font-size: 45%;
  position: absolute;
  bottom: 81%;
  left: 17%;
}

.about__lead {
  text-align: center;
  margin-bottom: var(--sz-80);
}

.about__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sz-50);
}

.about__label {
  font-size: var(--sz-26);
  text-align: center;
  margin-bottom: 0;
}

.about__desc {
  text-align: center;
  margin-bottom: 0.5em;
}

@media screen and (min-width: 992px) {
  .about {
    padding-block: var(--sz-90) var(--sz-90);
  }
  .about__heading {
    font-size: var(--sz-34);
  }
  .about__heading .site-name img {
    width: var(--sz-279);
  }
  .about__lead {
    margin-bottom: var(--sz-55);
  }
  .about__row {
    gap: var(--sz-35);
  }
  .about__pic {
    width: var(--sz-924);
  }
  .about__label {
    font-size: var(--sz-24);
  }
  .about__desc {
    font-size: var(--sz-18);
  }
}
/* ==========================================
 Problem
============================================*/
.problem {
  padding-block: var(--sz-100) var(--sz-130);
}

.problem__inner {
  padding-inline: var(--sz-75);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .problem__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.problem__heading {
  margin-bottom: var(--sz-60);
}

.problem__list {
  width: 100%;
  margin-inline: auto;
  margin-bottom: var(--sz-35);
}

.problem__item {
  background-color: #edeef3;
  box-shadow: var(--sz-15) var(--sz-17) var(--sz-32) 0px rgba(10, 34, 62, 0.09);
  padding: var(--sz-40) var(--sz-25) var(--sz-35);
  width: var(--sz-310);
  border-radius: var(--sz-16);
}

.problem__item:nth-child(odd) {
  margin-right: auto;
}

.problem__item:nth-child(even) {
  margin-left: auto;
}

.problem__item:not(:last-child) {
  margin-bottom: calc(-1 * var(--sz-105));
}

.problem__pic {
  margin-bottom: var(--sz-25);
  margin-inline: auto;
}

.problem__pic.--1st {
  width: var(--sz-143);
}

.problem__pic.--2nd {
  width: var(--sz-154);
}

.problem__pic.--3rd {
  width: var(--sz-148);
}

.problem__caption {
  font-weight: bold;
  text-align: center;
}

.problem__arrow {
  writing-mode: vertical-lr;
  font-size: 180%;
  margin-block: auto;
  margin-bottom: var(--sz-45);
}

.problem__lead {
  font-size: var(--sz-28);
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
}

.problem__row {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sz-50);
}

.problem__desc {
  margin-bottom: 0;
}

@media screen and (min-width: 992px) {
  .problem {
    padding-block: var(--sz-35) var(--sz-105);
  }
  .problem__heading {
    margin-bottom: var(--sz-75);
  }
  .problem__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--sz-25);
    margin-bottom: var(--sz-65);
    width: var(--sz-980);
  }
  .problem__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    align-items: center;
    padding: var(--sz-45) var(--sz-35);
    width: auto;
  }
  .problem__item:nth-child(odd) {
    margin-right: 0;
  }
  .problem__item:nth-child(even) {
    margin-left: 0;
  }
  .problem__item:not(:last-child) {
    margin-bottom: 0;
  }
  .problem__pic {
    margin-bottom: var(--sz-35);
  }
  .problem__caption {
    font-size: var(--sz-20);
  }
  .problem__arrow {
    margin-bottom: 0;
  }
  .problem__lead {
    font-size: var(--sz-28);
    text-align: left;
  }
  .problem__row {
    display: grid;
    grid-template-columns: var(--sz-420) 1fr;
    align-items: flex-end;
    gap: var(--sz-45);
    margin-inline: auto;
    width: var(--sz-1200);
  }
}
/* ==========================================
 Reasons
============================================*/
.reasons {
  padding-block: var(--sz-85) var(--sz-130);
  background-color: var(--color-secondary);
}

.reasons__inner {
  padding-inline: var(--sz-80);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .reasons__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.reasons__heading {
  margin-bottom: var(--sz-90);
}

.reasons__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-75);
}

.reason__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sz-55);
}

.reason__txt {
  padding-inline: var(--sz-20);
}

.reason__idx {
  font-size: var(--sz-24);
  color: var(--color-water);
}

.reason__label {
  font-feature-settings: "palt";
  font-size: var(--sz-34);
  line-height: 1.5;
  margin-bottom: var(--sz-15);
  margin-inline: calc(-1 * var(--sz-20));
  padding-inline: var(--sz-20);
  padding-bottom: var(--sz-20);
  border-bottom: 1px solid;
}

.reason__desc {
  margin-bottom: 0;
}

.reason__pic {
  padding-inline: var(--sz-20);
}

.reason__item img {
  border-radius: var(--sz-20);
}

.reason__item:nth-child(2) img {
  box-shadow: var(--sz-15) var(--sz-17) var(--sz-32) 0px rgba(10, 34, 62, 0.09);
}

.reason__item:nth-child(3) img {
  box-shadow: var(--sz-15) var(--sz-17) var(--sz-32) 0px rgba(10, 34, 62, 0.09);
}

.reason__item:nth-child(4) img {
  box-shadow: var(--sz-15) var(--sz-17) var(--sz-32) 0px rgba(10, 34, 62, 0.09);
}

@media screen and (min-width: 992px) {
  .reasons {
    padding-block: var(--sz-90) var(--sz-140);
  }
  .reasons__heading {
    margin-bottom: var(--sz-85);
  }
  .reasons__list {
    gap: var(--sz-70);
    margin-inline: auto;
    width: var(--sz-1200);
  }
  .reason__item {
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--sz-45);
  }
  .reason__item:nth-child(even) {
    flex-direction: row;
  }
  .reason__txt {
    padding-inline: 0;
  }
  .reason__idx {
    margin-bottom: var(--sz-20);
  }
  .reason__idx img {
    height: var(--sz-128);
  }
  .reason__label {
    font-size: var(--sz-34);
    margin-inline: 0;
    margin-bottom: var(--sz-35);
    padding: 0;
    border-bottom: none;
  }
  .reason__item:nth-child(1) .reason__pic {
    flex: 0 0 var(--sz-437);
  }
  .reason__item:nth-child(2) .reason__pic {
    flex: 0 0 var(--sz-540);
  }
  .reason__item:nth-child(3) .reason__pic {
    flex: 0 0 var(--sz-540);
  }
  .reason__item:nth-child(4) .reason__pic {
    flex: 0 0 var(--sz-540);
  }
}
/* ==========================================
 Services
============================================*/
.services {
  padding-block: var(--sz-120) var(--sz-80);
}

.services__inner {
  padding-inline: var(--sz-65);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .services__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.services__heading {
  margin-bottom: var(--sz-60);
}

.services__step {
  padding-bottom: var(--sz-40);
  margin-right: calc(-1 * var(--sz-65));
}

.services__pic {
  width: min(192vw, 1443px);
}

@media screen and (min-width: 992px) {
  .services {
    padding-block: var(--sz-115) var(--sz-40);
  }
  .services__heading {
    margin-bottom: var(--sz-45);
  }
  .services__heading img {
    width: var(--sz-533);
  }
  .services__step {
    width: var(--sz-1208);
    margin-inline: auto;
    padding-bottom: 0;
  }
  .services__pic {
    width: 100%;
  }
}
/* ==========================================
 Insight
============================================*/
.insight {
  padding-block: var(--sz-100) var(--sz-140);
}

.insight__inner {
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .insight__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.insight__heading {
  font-size: var(--sz-32);
  margin-bottom: var(--sz-120);
}

.insight__heading span:nth-of-type(2),
.insight__heading span:nth-of-type(3) {
  color: #fff;
  background-color: var(--color-primary);
  display: inline-block;
  margin-top: 0.35em;
  padding: 0.2em 1em 0.3em;
}

.insight__arrow {
  writing-mode: vertical-lr;
  font-size: 180%;
  margin-block: auto;
  margin-bottom: var(--sz-30);
}

.insight__lead {
  font-size: var(--sz-32);
  text-align: center;
  margin-bottom: 0;
  background-image: url(../images/pages/top/pic-insight3@2x.webp), url(../images/pages/top/bg-insight.svg);
  background-position: bottom center, top center;
  background-repeat: no-repeat;
  background-size: var(--sz-714), 100%;
  padding-bottom: var(--sz-150);
  margin-bottom: var(--sz-60);
}

.insight__lead > span {
  font-size: 150%;
  display: block;
  line-height: 1;
  padding-bottom: var(--sz-200);
}

.insight__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-45);
  margin-bottom: var(--sz-35);
}

.insight__item {
  background-color: #fff;
  border-radius: var(--sz-20);
  box-shadow: var(--sz-15) var(--sz-17) var(--sz-32) 0px rgba(10, 34, 62, 0.09);
  border-radius: var(--sz-20);
  width: var(--sz-497);
  margin-inline: auto;
  overflow: hidden;
}

.insight__fig {
  margin-bottom: 0;
  padding: var(--sz-40) var(--sz-40) 0;
}

.insight__pic {
  padding: var(--sz-35) 16%;
}

.insight__label {
  font-size: var(--sz-40);
  font-weight: bold;
  text-align: center;
}

.insight__desc {
  background-color: var(--color-secondary);
  font-size: var(--sz-24);
  margin-bottom: 0;
  padding: var(--sz-30) var(--sz-35);
}

.insight__summary {
  font-size: var(--sz-32);
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--sz-60);
}

@media screen and (min-width: 992px) {
  .insight {
    padding-block: var(--sz-100) var(--sz-60);
  }
  /*.insight__heading {
    margin-bottom: var(--sz-30);
  }
  .insight__heading span:nth-of-type(2),
  .insight__heading span:nth-of-type(3) {
    color: inherit;
    background-color: unset;
    display: revert;
    margin: unset;
    padding: unset;
  }
*/
  .insight__heading {
    font-size: var(--sz-32);
    margin-bottom: var(--sz-120);
  }

  .insight__heading span:nth-of-type(2),
  .insight__heading span:nth-of-type(3) {
    color: #fff;
    background-color: var(--color-primary);
    display: inline-block;
    margin-top: 0.35em;
    padding: 0.2em 1em 0.3em;
  }

  .insight__arrow {
    margin-bottom: var(--sz-25);
  }
  .insight__lead {
    font-size: var(--sz-22);
    width: var(--sz-648);
    margin-inline: auto;
    margin-bottom: calc(-1 * var(--sz-250));
    padding-bottom: 0;
    background: url(../images/pages/top/bg-insight.svg) no-repeat bottom center/cover;
  }
  .insight__lead > span {
    padding-bottom: var(--sz-260);
  }
  .insight__lead .small {
    font-size: 64.1%;
  }
  .insight__list {
    display: grid;
    grid-template-columns: repeat(2, var(--sz-340));
    justify-content: center;
    width: min(93%, 1000px);
    gap: 0 var(--sz-316);
    margin-inline: auto;
    margin-bottom: var(--sz-20);
  }
  .insight__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    width: auto;
  }
  .insight__pic {
    padding-block: 7%;
  }
  .insight__label {
    font-size: var(--sz-28);
  }
  .insight__desc {
    font-size: var(--sz-18);
  }
  .insight__summary {
    font-size: var(--sz-24);
    margin-bottom: var(--sz-70);
  }
}
/* ==========================================
 construction
============================================*/
.construction {
  padding-block: var(--sz-100) var(--sz-140);
  background-color: var(--color-secondary);
}

.construction__inner {
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .construction__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.construction__heading {
  margin-bottom: var(--sz-55);
}

.construction__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sz-50) var(--sz-25);
  margin-bottom: var(--sz-130);
}

.construction__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-areas: "pic" "label" "desc";
  grid-row: span 3;
  row-gap: var(--sz-10);
  background-color: #fff;
  border-radius: var(--sz-20);
  box-shadow: var(--sz-15) var(--sz-17) var(--sz-32) 0px rgba(10, 34, 62, 0.09);
  padding: var(--sz-35) var(--sz-20);
}

.construction__pic {
  grid-area: pic;
}

.construction__pic.--1st {
  padding-inline: 20%;
}

.construction__pic.--2nd {
  padding-inline: 16%;
}

.construction__pic.--3rd {
  padding-inline: 20%;
}

.construction__pic.--4th {
  padding-inline: 17%;
}

.construction__pic.--5th {
  padding-inline: 20%;
}

.construction__pic.--6th {
  padding-inline: 15%;
}

.construction__label {
  grid-area: label;
  font-size: var(--sz-24);
  font-weight: bold;
  text-align: center;
  margin-bottom: var(--sz-10);
}

.construction__desc {
  grid-area: desc;
  font-size: var(--sz-24);
  margin-bottom: 0;
}

@media screen and (min-width: 992px) {
  .construction {
    padding-block: var(--sz-60) var(--sz-85);
  }
  .construction__heading {
    margin-bottom: var(--sz-45);
  }
  .construction__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: var(--sz-1030);
    margin-inline: auto;
    gap: var(--sz-35) var(--sz-20);
    margin-bottom: var(--sz-70);
  }
  .construction__item {
    row-gap: var(--sz-15);
    padding: var(--sz-65) var(--sz-25) var(--sz-50);
  }
  .construction__pic {
    grid-area: pic;
    height: var(--sz-100);
  }
  .construction__pic.--1st {
    padding-inline: 0;
  }
  .construction__pic.--2nd {
    padding-inline: 0;
  }
  .construction__pic.--3rd {
    padding-inline: 0;
  }
  .construction__pic.--4th {
    padding-inline: 0;
  }
  .construction__pic.--5th {
    padding-inline: 0;
  }
  .construction__pic.--6th {
    padding-inline: 0;
  }
  .construction__label {
    font-size: var(--sz-24);
    margin-bottom: 0;
  }
  .construction__desc {
    font-size: var(--sz-18);
  }
}
/* ==========================================
 System
============================================*/
.system {
  padding-block: var(--sz-115) var(--sz-130);
}

.system__inner {
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .system__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.system__heading {
  margin-bottom: var(--sz-25);
}

.system__lead {
  font-size: 91%;
  font-weight: normal;
  text-align: center;
  line-height: 1.3;
  margin-bottom: var(--sz-60);
}

.system__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-80);
}

.system__item {
  background-color: #efefef;
  padding: var(--sz-75) var(--sz-30) var(--sz-55);
  position: relative;
  box-shadow: var(--sz-15) var(--sz-17) var(--sz-32) 0px rgba(10, 34, 62, 0.09);
}

.system__label {
  background-color: #fff;
  font-size: var(--sz-28);
  font-weight: bold;
  padding: 0.5em var(--sz-80) 0.5em var(--sz-30);
  border-radius: 0 100vh 100vh 0;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  top: 0;
  left: 0;
  translate: 0 -25%;
}

.system__row {
  display: flex;
  flex-direction: column;
  gap: var(--sz-25);
}

.system__desc {
  margin-bottom: 0;
  font-size: var(--sz-24);
  font-weight: 500;
}

@media screen and (min-width: 992px) {
  .system {
    padding-block: var(--sz-70) var(--sz-85);
  }
  .system__heading {
    margin-bottom: var(--sz-15);
  }
  .system__heading::before {
    font-size: var(--sz-40);
  }
  .system__lead {
    font-size: var(--sz-14);
    margin-bottom: var(--sz-50);
  }
  .system__lead small {
    font-size: 71.4%;
  }
  .system__list {
    gap: var(--sz-55);
    width: min(64%, 926px);
    margin-inline: auto;
  }
  .system__item {
    padding: var(--sz-45) var(--sz-45) var(--sz-50) var(--sz-45);
    background-color: var(--color-secondary);
  }
  .system__label {
    font-size: var(--sz-24);
    padding: 0.5em var(--sz-65) 0.5em var(--sz-45);
  }
  .system__row {
    gap: var(--sz-20);
  }
  .system__pic {
    margin-inline: auto;
  }
  .system__item:nth-child(1) .system__pic {
    width: 78%;
  }
  .system__item:nth-child(2) .system__pic {
    width: 89%;
  }
  .system__item:nth-child(3) .system__pic {
    width: 78%;
  }
  .system__desc {
    font-size: var(--sz-18);
  }
}
/* ==========================================
 Flow
============================================*/
.flow {
  background-color: var(--color-secondary);
  padding-block: var(--sz-120) var(--sz-95);
}

.flow__inner {
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .flow__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.flow__heading {
  font-size: var(--sz-49);
  margin-bottom: var(--sz-15);
}

.flow__lead {
  font-size: 118%;
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--sz-90);
}

.flow__list {
  width: var(--sz-580);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sz-60);
  margin-bottom: var(--sz-30);
}

.flow__item {
  background-color: #fff;
  padding: var(--sz-40) var(--sz-50);
  position: relative;
  border-top-left-radius: var(--sz-20);
}

.flow__idx {
  width: var(--sz-55);
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
}

.flow__row {
  display: flex;
  gap: var(--sz-25);
  align-items: center;
}

.flow__pic {
  width: 20%;
  margin: 0;
}

.flow__label {
  font-size: var(--sz-32);
  font-weight: bold;
  margin-bottom: var(--sz-10);
}

.flow__desc {
  font-size: var(--sz-20);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 0;
}

.flow__summary {
  font-size: var(--sz-20);
  font-weight: 400;
  text-align: center;
  margin-bottom: var(--sz-110);
}

@media screen and (min-width: 992px) {
  .flow {
    padding-block: var(--sz-55) var(--sz-75);
  }
  .flow::before {
    font-size: var(--sz-259);
    line-height: 0.6;
  }
  .flow__heading {
    margin-bottom: var(--sz-15);
  }
  .flow__lead {
    font-size: var(--sz-18);
    margin-bottom: var(--sz-75);
  }
  .flow__list {
    width: min(62%, 893px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 var(--sz-10);
    margin-bottom: var(--sz-35);
  }
  .flow__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    padding: var(--sz-45) var(--sz-15) var(--sz-25);
  }
  .flow__idx {
    width: var(--sz-70);
  }
  .flow__row {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: var(--sz-10);
  }
  .flow__pic {
    width: 40%;
    margin-inline: auto;
  }
  .flow__txt {
    text-align: center;
  }
  .flow__label {
    font-size: var(--sz-18);
    margin-bottom: var(--sz-10);
  }
  .flow__desc {
    font-size: var(--sz-14);
  }
  .flow__summary {
    font-size: var(--sz-18);
    margin-bottom: var(--sz-35);
  }
}
/* ==========================================
 Cases
============================================*/
.cases {
  padding-block: 0 var(--sz-50);
}

.cases__inner {
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .cases__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.cases__heading {
  padding: var(--sz-63);
  margin-bottom: var(--sz-80);
  background: url(../images/pages/top/bg-cases@2x.webp) no-repeat center center/cover;
}

.cases__heading[data-ruby]::before {
  background-color: transparent;
  margin-bottom: 0;
}

.cases__list {
  margin-inline: auto;
}

.cases__list.slick-slider {
  margin-bottom: var(--sz-100);
}

.cases__item {
  background-color: #fff;
  box-shadow: var(--sz-15) var(--sz-17) var(--sz-32) 0px rgba(10, 34, 62, 0.09);
}

.cases__pic {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cases__txt {
  padding: var(--sz-25) var(--sz-30) var(--sz-50);
}

.cases__tag {
  border: 1px solid var(--color-primary);
  font-size: var(--sz-21);
  font-weight: 500;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 1em;
  padding: 0.2em 0.5em;
  border-radius: var(--sz-4);
}

.cases__name {
  font-size: var(--sz-18);
  font-weight: normal;
  border-bottom: 1px solid;
  margin-bottom: 0.66em;
}

.cases__label {
  font-size: var(--sz-30);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 1em;
}

.cases__desc {
  display: flex;
  flex-direction: column;
  gap: var(--sz-25);
}

.cases__def {
  font-size: var(--sz-21);
  margin-bottom: 0;
}

.cases__term {
  color: #fff;
  background-color: var(--color-primary);
  font-weight: 500;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.2em 2em 0.2em 1em;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 1em) 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1em) 100%, 0 100%);
  margin-bottom: 0.5em;
}

.cases__data {
  font-weight: normal;
}

/* slider */
:where(.cases) .slick-slide {
  padding: var(--sz-32);
}

:where(.cases) .slick-dots li {
  width: var(--sz-10);
  height: var(--sz-10);
}

:where(.cases) .slick-dots {
  display: flex;
  justify-content: center;
  gap: var(--sz-15);
}

:where(.cases) .slick-dots li button:before {
  font-size: var(--sz-20);
  color: var(--color-primary);
}

:where(.cases) .slick-dots li.slick-active button:before {
  color: var(--color-primary);
  opacity: 1;
}

:where(.cases) :is(.slick-arrow, .slick-arrow:focus) {
  width: var(--sz-62);
  height: var(--sz-62);
  background-size: contain;
  z-index: 1;
}

:where(.cases) .slick-arrow::before {
  visibility: hidden;
}

:where(.cases) :is(.slick-prev, .slick-prev:focus) {
  background-image: url(../images/common/icon-prev.svg);
  left: 0;
}

:where(.cases) :is(.slick-next, .slick-next:focus) {
  background-image: url(../images/common/icon-next.svg);
  right: 0;
}

@media screen and (min-width: 992px) {
  .cases {
    padding-block: 0 var(--sz-30);
  }
  .cases::before {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sz-560)), 0 calc(100% - var(--sz-320)));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sz-560)), 0 calc(100% - var(--sz-320)));
  }
  .cases__heading {
    margin-bottom: var(--sz-85);
    background-image: url(../images/pages/top/bg-cases.webp);
  }
  .cases__list {
    width: min(82.8%, 1590px);
    margin-inline: auto 0;
  }
  .cases__list.slick-slider {
    margin-bottom: var(--sz-200);
    translate: var(--sz-70);
  }
  .cases__list.no-slide {
    display: flex;
    gap: var(--sz-14);
    margin-inline: auto;
    margin-bottom: var(--sz-70);
    width: min(79%, 1140px);
  }
  :where(.no-slide) .cases__item {
    width: var(--sz-368);
  }
  .cases__txt {
    padding: var(--sz-25) var(--sz-25) var(--sz-30);
  }
  .cases__tag {
    font-size: var(--sz-14);
  }
  .cases__name {
    font-size: var(--sz-12);
  }
  .cases__label {
    font-size: var(--sz-20);
  }
  .cases__desc {
    gap: var(--sz-15);
  }
  .cases__def {
    font-size: var(--sz-14);
  }
  /* slider */
  :where(.cases) .slick-track {
    display: flex !important;
    align-items: stretch !important;
  }
  :where(.cases) .slick-slide > div {
    display: flex !important;
    height: auto;
  }
  :where(.cases) .slick-slide {
    padding: var(--sz-12);
    display: flex !important;
    width: var(--sz-535);
    height: auto;
  }
  :where(.cases) .slick-dots {
    bottom: calc(-1 * var(--sz-60));
    translate: calc(-1 * (100vw - 100%) / 2 - var(--sz-80));
  }
  :where(.cases) :is(.slick-arrow, .slick-arrow:focus) {
    width: var(--sz-70);
    height: var(--sz-70);
  }
  :where(.cases) :is(.slick-prev, .slick-prev:focus) {
    left: calc(-1 * var(--sz-110));
  }
  :where(.cases) :is(.slick-next, .slick-next:focus) {
    right: var(--sz-80);
  }
}
/* ==========================================
 Comparison
============================================*/
.comparison {
  padding-block: var(--sz-85) var(--sz-150);
}

.comparison__inner {
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .comparison__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.comparison__heading {
  margin-bottom: var(--sz-85);
}

.comparison__table {
  padding-bottom: var(--sz-35);
  margin-bottom: var(--sz-150);
}

.comparison__pic {
  width: min(148.9vw, 1117px);
}

.comparison__caption {
  font-size: var(--sz-32);
  font-weight: bold;
  text-align: center;
  margin-bottom: var(--sz-40);
}

.comparison__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-40);
}

.comparison__item {
  background-color: #efefef;
  border-radius: var(--sz-20);
  padding: var(--sz-30) var(--sz-35);
}

.comparison__label {
  font-size: var(--sz-38);
  font-weight: 500;
  text-align: center;
  margin-bottom: 0.4em;
}

.comparison__desc {
  font-size: var(--sz-24);
  font-weight: normal;
  margin-bottom: 0;
}

@media screen and (min-width: 992px) {
  .comparison {
    padding-block: var(--sz-70) var(--sz-115);
  }
  .comparison__heading {
    margin-bottom: var(--sz-40);
  }
  .comparison__table {
    padding-bottom: 0;
    margin-bottom: var(--sz-80);
  }
  .comparison__pic {
    width: var(--sz-873);
    margin-inline: auto;
  }
  .comparison__caption {
    font-size: var(--sz-24);
    margin-bottom: var(--sz-20);
  }
  .comparison__list {
    width: min(69%, 996px);
    margin-inline: auto;
    gap: var(--sz-10);
  }
  .comparison__item {
    border-radius: var(--sz-20);
    padding: var(--sz-15) 0;
    display: flex;
    align-items: center;
  }
  .comparison__label {
    font-size: var(--sz-24);
    flex: 0 0 21.8%;
    margin-bottom: 0;
  }
  .comparison__desc {
    flex: 1;
    font-size: var(--sz-18);
    padding-inline: var(--sz-30) var(--sz-60);
    border-left: 2px dotted;
  }
}
/* ==========================================
 Price
============================================*/
.price {
  background-color: var(--color-secondary);
  padding-block: var(--sz-85) var(--sz-105);
}

.price__inner {
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .price__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.price__heading {
  margin-bottom: var(--sz-15);
}

.price__lead {
  font-size: var(--sz-22);
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 0.3em;
}

.price__desc {
  font-size: var(--sz-18);
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--sz-35);
}

.price__box {
  width: min(93%, 647px);
  margin-inline: auto;
  background-color: #fff;
  box-shadow: var(--sz-15) var(--sz-17) var(--sz-32) 0px rgba(10, 34, 62, 0.09);
  padding: var(--sz-45) var(--sz-30);
  border-radius: var(--sz-20);
  overflow: hidden;
  position: relative;
}

.price__box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--sz-12);
  background-color: var(--color-primary);
}

.price__label {
  font-feature-settings: "palt";
  font-size: var(--sz-27);
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  margin-bottom: var(--sz-25);
}

.price__label span {
  font-weight: bold;
}

.price__data {
  display: flex;
  justify-content: center;
  align-items: baseline;
  background-image: linear-gradient(82deg, #0a223e, #17b8d2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.price__prefix {
  grid-area: prefix;
  font-size: var(--sz-30);
  font-weight: 500;
}

.price__value {
  grid-area: value;
  font-family: var(--font-barlow);
  font-size: var(--sz-108);
  font-style: italic;
  font-weight: bold;
}

.price__unit {
  grid-area: unit;
  font-size: var(--sz-57);
  font-weight: bold;
}

.price__suffix {
  grid-area: suffix;
  font-size: var(--sz-25);
  font-weight: 500;
}

.price__box2 {
  background-color: #fff;
  border-radius: var(--sz-25);
  border: var(--sz-2) dashed;
  padding: var(--sz-35);
  width: min(93%, 647px);
  margin-inline: auto;
}

.price__box2-inner {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}

.price__box2 .fa-check {
  margin-right: 1em;
}

.price__box2-note {
  margin-top: var(--sz-30);
  margin-bottom: 0;
  font-size: var(--sz-18);
  text-align: center;
}

@media screen and (min-width: 992px) {
  .price {
    padding-block: var(--sz-55) var(--sz-75);
  }
  .price__heading {
    margin-bottom: var(--sz-15);
  }
  .price__desc {
    font-size: var(--sz-14);
    margin-bottom: var(--sz-45);
  }
  .price__box {
    width: min(52.7%, 760px);
  }
  .price__label {
    font-size: var(--sz-27);
  }
  .price__box2 {
    width: min(52.7%, 760px);
  }
  .price__box2-note {
    font-size: var(--sz-14);
  }
}
/* ==========================================
 profile
============================================*/
.profile {
  padding-block: var(--sz-105) var(--sz-30);
}

.profile__inner {
  padding-inline: var(--sz-70);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .profile__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.profile__txt {
  margin-bottom: var(--sz-50);
}

.profile__heading2 {
  margin-bottom: var(--sz-30);
}

.profile__lead2 {
  font-size: var(--sz-40);
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: var(--sz-20);
}

.profile__image {
  margin-bottom: var(--sz-70);
}

.profile__heading {
  font-size: var(--sz-34);
  font-weight: bold;
  margin-bottom: var(--sz-30);
}

.profile__movie {
  width: min(100%, 670px);
  margin-bottom: var(--sz-55);
  --ring-color-red: var(--color-red);
}

.profile__lead {
  font-size: var(--sz-24);
  margin-bottom: var(--sz-40);
}

.profile__company {
  display: block;
}

.profile__title {
  font-size: 80.9%;
  margin-right: 0.5em;
}

.history__label {
  font-size: var(--sz-28);
  border: 1px solid;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.3em 1em;
  margin-bottom: 1em;
}

.history__table {
  --bs-table-color: var(--color-primary);
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: var(--sz-50);
}

.history__table > :not(caption) > * > * {
  font-size: var(--sz-24);
  font-weight: normal;
  padding: 0.3em 0.75em;
  line-height: 1.5;
}

.history__table th {
  white-space: nowrap;
}

.history__desc {
  font-size: var(--sz-24);
  font-weight: normal;
  margin-bottom: 0;
}

@media screen and (min-width: 992px) {
  .profile {
    padding-block: var(--sz-130) var(--sz-65);
  }
  .profile__inner {
    width: min(60%, 1155px);
  }
  .profile__lead2 {
    font-size: var(--sz-34);
  }
  .profile__desc {
    font-size: var(--sz-18);
    margin-bottom: 0;
  }
  .profile__lower {
    --bs-gutter-y: 0;
  }
  .profile__lower > *:nth-child(1) {
    width: 59%;
  }
  .profile__lower > *:nth-child(2) {
    flex: 1;
  }
  .profile__heading {
    grid-area: heading;
    font-size: var(--sz-34);
  }
  .profile__movie {
    grid-area: video;
    margin-bottom: 0;
  }
  .profile__lead {
    grid-area: lead;
    font-size: var(--sz-24);
    margin-bottom: var(--sz-45);
  }
  .profile__company {
    display: block;
  }
  .profile__title {
    font-size: 100%;
    margin-right: 0.8em;
  }
  .history {
    /* width: min(84%, 1210px); */
    /* margin-inline: auto; */
  }
  .history__table {
    margin-bottom: var(--sz-85);
  }
  .history__table > :not(caption) > * > * {
    font-size: var(--sz-18);
  }
  .history__desc {
    font-size: var(--sz-18);
  }
}
/* ==========================================
 QA
============================================*/
.qa {
  padding-block: var(--sz-100) var(--sz-105);
}

.qa__inner {
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .qa__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.qa__heading {
  margin-bottom: var(--sz-45);
}

.qa__heading::before {
  content: attr(data-ruby);
  color: var(--color-yellow);
  font-family: var(--font-barlow);
  font-size: var(--sz-40);
  font-weight: 600;
  font-style: italic;
  display: block;
  margin-bottom: var(--sz-15);
}

.qa__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-10);
}

.qa__term {
  font-size: var(--sz-28);
  font-weight: bold;
  padding: 1em var(--sz-90);
  line-height: 1.5;
  position: relative;
  border-bottom: var(--sz-2) solid;
  cursor: pointer;
}

.qa__term::before {
  content: "Q";
  position: absolute;
  top: 50%;
  left: var(--sz-25);
  translate: 0 -50%;
  font-family: var(--font-Figtree);
  font-size: var(--sz-48);
  font-weight: 500;
  line-height: 1;
}

.qa__term::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: var(--sz-25);
  translate: 0 -50%;
  font-size: var(--sz-48);
  font-weight: 900;
  line-height: 1;
  font-family: "Font Awesome 6 Free";
}

:where(.open) > .qa__term::after {
  content: "\f068";
}

.qa__data {
  font-size: var(--sz-22);
  font-weight: normal;
  padding: var(--sz-25) var(--sz-45) var(--sz-25) var(--sz-90);
  margin-bottom: 0;
  line-height: 1.5;
  position: relative;
  display: none;
}

.qa__data::before {
  content: "A";
  position: absolute;
  top: var(--sz-25);
  left: var(--sz-25);
  font-family: var(--font-Figtree);
  font-size: var(--sz-48);
  font-weight: 500;
  line-height: 1;
}

@media screen and (min-width: 992px) {
  .qa {
    padding-block: var(--sz-100) var(--sz-75);
  }
  .qa__inner {
    width: min(52%, 1000px);
  }
  .qa__heading {
    margin-bottom: 0;
  }
  .qa__term {
    font-size: var(--sz-20);
    padding: 1em var(--sz-80);
  }
  .qa__term::before {
    font-size: var(--sz-34);
    left: var(--sz-30);
  }
  .qa__term::after {
    font-size: var(--sz-34);
  }
  .qa__data {
    font-size: var(--sz-18);
    padding: 1em var(--sz-80);
  }
  .qa__data::before {
    font-size: var(--sz-34);
    left: var(--sz-30);
  }
}
/* ==========================================
 Company
============================================*/
.company {
  padding-block: var(--sz-65) var(--sz-85);
  background-color: #e4e9ef;
}

.company__inner {
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .company__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.company__heading {
  background-color: #fff;
  padding: 0.5em 1em;
  font-weight: 500;
}

.company__row {
  display: flex;
  flex-direction: column;
  gap: var(--sz-35);
  align-items: center;
}

.company__pic {
  width: var(--sz-133);
}

.company__table {
  margin-bottom: 0;
  --bs-table-color: var(--color-primary);
  --bs-table-border-color: var(--color-primary);
  --bs-table-bg: transparent;
  width: 85%;
}

.company__table :is(th, td) {
  padding: 0.7em 1em;
  position: relative;
  vertical-align: middle;
  line-height: 1.5;
}

.company__table :where(th, td)::before {
  content: "";
  height: 1px;
  width: 100%;
  background-color: var(--color-primary);
  position: absolute;
  top: 100%;
  left: 0;
  translate: 0 -50%;
  display: block;
  z-index: 1;
}

.company__term::before {
  height: var(--sz-4);
}

.company__term {
  font-size: var(--sz-22);
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
}

.company__data {
  font-size: var(--sz-26);
  font-weight: 500;
}

@media screen and (min-width: 992px) {
  .company {
    padding-block: var(--sz-60) var(--sz-85);
  }
  .company__inner {
    width: min(52%, 1000px);
  }
  .company__row {
    flex-direction: row;
    justify-content: space-between;
  }
  .company__heading {
    flex: 0 0 var(--sz-200);
    padding: 0.2em;
  }
  .company__pic {
    flex: 0 0 var(--sz-110);
  }
  .company__table {
    flex: 0 0 var(--sz-480);
  }
  .company__term {
    font-size: var(--sz-20);
  }
  .company__data {
    font-size: var(--sz-22);
  }
}
/* ==========================================
 Contact
============================================*/
.contact {
  padding-block: var(--sz-70) var(--sz-115);
}

.contact__inner {
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .contact__inner {
    padding-inline: 0;
    width: min(75%, 1440px);
  }
}

.contact__heading {
  margin-bottom: var(--sz-55);
}

.contact__form {
  width: var(--sz-655);
  margin-inline: auto;
}

@media screen and (min-width: 992px) {
  .contact {
    padding-block: var(--sz-100) var(--sz-95);
  }
  .contact__heading {
    margin-bottom: var(--sz-50);
  }
  .contact__form {
    width: min(48.61%, 600px);
  }
}