@charset "UTF-8";
/* ==========================================
 Layout
============================================*/
/* inner */
.inner {
  width: calc(var(--sz-1200) + 2 * var(--sz-30));
  max-width: 100%;
  padding-inline: var(--sz-30);
  margin-inline: auto;
}
@media screen and (min-width: 992px) {
  .inner {
    width: var(--sz-1320);
    padding-inline: 0;
  }
}

@media screen and (min-width: 992px) {
  :root {
    --min_w1: 992;
    --max_w1: 1320;
    --container-width: 1920;
  }
}
/* ==========================================
 Parts
============================================*/
/* heading */
.section-heading {
  font-size: var(--sz-50);
  font-weight: 500;
  color: var(--color-primary);
}

@media screen and (min-width: 992px) {
  .section-heading {
    font-size: var(--sz-60);
  }
}
/* section name */
[data-section-en] {
  position: relative;
}

[data-section-en]::before {
  content: attr(data-section-en);
  font-family: var(--font-Oswald);
  font-size: var(--sz-150);
  font-weight: 500;
  color: var(--color-primary);
  opacity: 0.5;
  line-height: 1;
  display: block;
}

/* Page Top */
.pagetop {
  font-size: 100%;
}
@media screen and (min-width: 992px) {
  .pagetop {
    font-size: var(--sz-24);
  }
}

/* ==========================================
 FV
============================================*/
.fv {
  padding-block: 0 var(--sz-22);
}

.fv__heading {
  margin-inline: calc(-1 * var(--sz-30));
  margin-bottom: var(--sz-15);
}

.fv__apeal {
  width: var(--sz-663);
  margin-inline: auto;
}

@media screen and (min-width: 992px) {
  .fv {
    padding-block: 0 var(--sz-51);
  }
  .fv__heading {
    margin-inline: calc((100% - 100vw) / 2);
    margin-bottom: var(--sz-26);
  }
  .fv__heading img {
    aspect-ratio: 1920/491;
    -o-object-fit: cover;
       object-fit: cover;
    height: var(--sz-491);
  }
  .fv__apeal {
    width: var(--sz-1187);
  }
}
/* ==========================================
 CTA
============================================*/
.cta__link {
  box-shadow: var(--sz-7) var(--sz-7) var(--sz-10) 0px rgba(0, 0, 0, 0.25);
  border-radius: var(--sz-5);
}
.cta__link.--case {
  border-radius: var(--sz-10);
}

.cta__link + .cta__link {
  margin-top: var(--sz-24);
}

@media screen and (min-width: 992px) {
  .cta__link {
    width: var(--sz-608);
  }
  .cta__link.--case {
    width: var(--sz-552);
  }
  .cta__link + .cta__link {
    margin-top: 0;
  }
  .cta:has(.btn + .btn) .inner {
    display: grid;
    grid-template-columns: 608fr 552fr;
    gap: var(--sz-40);
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
}
/* ==========================================
 Worry
============================================*/
.worry {
  background-image: repeating-linear-gradient(0deg, #f0f0f0 0px, #f0f0f0 1px, transparent 1px, transparent var(--sz-26)), repeating-linear-gradient(90deg, #f0f0f0 0px, #f0f0f0 1px, transparent 1px, transparent var(--sz-26));
  background-size: var(--sz-26);
  padding-block: var(--sz-68) var(--sz-69);
  margin-top: var(--sz-62);
}

.worry__heading {
  text-align: center;
  font-size: var(--sz-50);
  font-weight: 700;
  line-height: var(--sz-90);
  margin-bottom: var(--sz-44);
}

.worry__heading .lg {
  font-size: var(--sz-60);
}

.worry__heading .md {
  font-size: var(--sz-51);
}

.worry__content {
  position: relative;
}

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

.worry__item {
  padding-left: var(--sz-70);
  position: relative;
  font-size: var(--sz-40);
  font-weight: 400;
  line-height: var(--sz-65);
  background: url(../images/sp/icon-check-blue.svg) no-repeat top 0.5em left 0.5em/var(--sz-38);
}

.worry__image {
  width: var(--sz-282);
  position: absolute;
  right: 0;
  top: calc(100% - var(--sz-25));
}

@media screen and (min-width: 992px) {
  .worry {
    padding-block: var(--sz-75) var(--sz-112);
    margin-top: var(--sz-113);
  }
  .worry__heading {
    font-size: var(--sz-45);
    line-height: var(--sz-75);
    margin-bottom: var(--sz-46);
    background: url(../images/pc/pic-worry-mark.webp) no-repeat top left var(--sz-50)/var(--sz-59);
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .worry__heading .lg {
    font-size: var(--sz-55);
  }
  .worry__heading .md {
    font-size: var(--sz-45);
  }
  .worry__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sz-38) var(--sz-90);
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .worry__item {
    padding-left: var(--sz-80);
    font-size: var(--sz-32);
    line-height: var(--sz-50);
    background: url(../images/pc/icon-check-blue.svg) no-repeat top 0.5em left 0.5em/var(--sz-38);
  }
  .worry__image {
    width: var(--sz-273);
    right: 0;
    top: 100%;
  }
}
/* ==========================================
 Resolve
============================================*/
.resolve {
  padding-block: var(--sz-148) var(--sz-87);
  position: relative;
}

.resolve::before {
  content: "";
  background: url(../images/sp/pic-resolve-arrow.webp) no-repeat top left/cover;
  width: var(--sz-45);
  aspect-ratio: 45/119;
  position: absolute;
  top: calc(-1 * var(--sz-20));
  left: 50%;
  translate: -50%;
}

.resolve__heading {
  text-align: center;
  font-size: var(--sz-61);
  font-weight: 700;
  line-height: normal;
  margin-bottom: var(--sz-46);
}

.resolve__heading .lg {
  font-size: var(--sz-67);
  position: relative;
}

.resolve__heading .lg::before {
  content: "";
  background: url(../images/sp/pic-resolve-wave.webp) no-repeat top center/contain;
  aspect-ratio: 164/59;
  width: var(--sz-164);
  position: absolute;
  top: 71%;
  left: 50%;
  translate: -50%;
}

.resolve__lead {
  text-align: center;
  font-size: var(--sz-43);
  font-weight: 500;
  line-height: var(--sz-55);
  margin-bottom: var(--sz-132);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--sz-27);
}

.resolve__lead::before,
.resolve__lead::after {
  content: "";
  width: var(--sz-4);
  height: var(--sz-85);
  background-color: var(--color-default);
  display: block;
}

.resolve__lead::before {
  rotate: -20deg;
  transform-origin: bottom right;
}

.resolve__lead::after {
  rotate: 20deg;
  transform-origin: bottom left;
}

.resolve__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-220);
}

.resolve__item {
  border-radius: var(--sz-10);
  background-color: rgba(186, 21, 30, 0.1);
  position: relative;
  padding-inline: var(--sz-55);
  text-align: center;
}

.resolve__item p:last-child {
  margin-bottom: 0;
}

.resolve__item .resolve__image {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50%;
}

.resolve__item:nth-child(1) {
  padding-block: var(--sz-158) var(--sz-87);
  font-size: var(--sz-52);
  font-weight: 500;
  line-height: normal;
}

.resolve__item:nth-child(1) .lg {
  font-size: var(--sz-142);
  font-weight: 700;
  line-height: 0;
}

.resolve__item:nth-child(1) .md {
  font-size: var(--sz-59);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.resolve__item:nth-child(1) .resolve__image {
  width: var(--sz-279);
  top: calc(-1 * var(--sz-83));
}

.resolve__item:nth-child(2) {
  padding-block: var(--sz-103) var(--sz-61);
  font-size: var(--sz-36);
  font-weight: 500;
  line-height: normal;
}

.resolve__item:nth-child(2) .lg {
  font-size: var(--sz-60);
  line-height: var(--sz-80);
}

.resolve__item:nth-child(2) .resolve__image {
  width: var(--sz-238);
  top: calc(-1 * var(--sz-179));
}

@media screen and (min-width: 992px) {
  .resolve {
    padding-block: var(--sz-100) var(--sz-100);
  }
  .resolve::before {
    background-image: url(../images/pc/pic-resolve-arrow.webp);
    width: var(--sz-37);
    aspect-ratio: 37/137;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% -50%;
  }
  .resolve__heading {
    font-size: var(--sz-61);
    margin-bottom: var(--sz-34);
  }
  .resolve__heading .lg::before {
    background-image: url(../images/pc/pic-resolve-wave.webp);
    aspect-ratio: 172/62;
    width: var(--sz-172);
  }
  .resolve__heading .lg {
    font-size: var(--sz-72);
  }
  .resolve__lead {
    font-size: var(--sz-43);
    line-height: var(--sz-67);
    margin-bottom: var(--sz-134);
    gap: var(--sz-15);
  }
  .resolve__lead::before,
  .resolve__lead::after {
    width: var(--sz-3);
    height: var(--sz-56);
  }
  .resolve__list {
    display: grid;
    grid-template-columns: var(--sz-480) var(--sz-647);
    gap: var(--sz-33);
    margin-inline: auto;
    width: -moz-fit-content;
    width: fit-content;
  }
  .resolve__item:nth-child(1) {
    padding-block: var(--sz-108) var(--sz-41);
    font-size: var(--sz-35);
  }
  .resolve__item:nth-child(1) .resolve__image {
    width: var(--sz-217);
  }
  .resolve__item:nth-child(1) .lg {
    font-size: var(--sz-145);
    font-weight: 500;
    line-height: 0.7;
  }
  .resolve__item:nth-child(1) .md {
    font-size: var(--sz-60);
  }
  .resolve__item:nth-child(2) {
    padding-block: var(--sz-115) var(--sz-49);
    font-size: var(--sz-28);
  }
  .resolve__item:nth-child(2) .resolve__image {
    width: var(--sz-176);
    top: calc(-1 * var(--sz-115));
  }
  .resolve__item:nth-child(2) .lg {
    font-size: var(--sz-45);
    line-height: var(--sz-60);
  }
}
/* ==========================================
 Solution
============================================*/
.solution {
  padding-block: 0 var(--sz-47);
}

.solution__head {
  margin-inline: calc(-1 * var(--sz-30));
  background-color: #efefef;
  padding-block: var(--sz-61) var(--sz-79);
  margin-bottom: var(--sz-38);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sz-50)), 50% 100%, 0 calc(100% - var(--sz-50)));
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sz-50)), 50% 100%, 0 calc(100% - var(--sz-50)));
}

.solution__heading {
  text-align: center;
  font-size: var(--sz-42);
  font-weight: 700;
  line-height: normal;
}

.solution__heading .lg {
  font-size: var(--sz-60);
  font-weight: 900;
  line-height: var(--sz-80);
}

.solution__heading .md {
  font-size: var(--sz-58);
  line-height: var(--sz-80);
}

.solution__heading .sm {
  font-size: var(--sz-40);
}

.solution__lead {
  text-align: center;
  font-size: var(--sz-32);
  font-weight: 500;
  line-height: var(--sz-52);
  margin-bottom: var(--sz-13);
  --mb-p: var(--sz-30);
}

.solution__lead .lg {
  font-size: var(--sz-70);
}

.solution__lead .md {
  font-size: var(--sz-51);
  line-height: var(--sz-78);
  margin-top: var(--sz-20);
  display: inline-block;
}

.solution__image {
  width: var(--sz-543);
  margin-inline: auto;
}

.solution__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sz-21) var(--sz-20);
}

.solution__item {
  aspect-ratio: 334/162;
  background-size: contain;
  background-repeat: no-repeat;
  font-size: var(--sz-37);
  font-weight: 500;
  line-height: var(--sz-53);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.solution__item:nth-child(odd) {
  background-image: url(../images/sp/pic-solution-red.svg);
}

.solution__item:nth-child(even) {
  background-image: url(../images/sp/pic-solution-black.svg);
}

@media screen and (min-width: 992px) {
  .solution {
    padding-block: 0 var(--sz-47);
  }
  .solution__head {
    margin-inline: calc((100% - 100vw) / 2);
    padding-block: var(--sz-52) var(--sz-71);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sz-106)), 50% 100%, 0 calc(100% - var(--sz-106)));
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sz-106)), 50% 100%, 0 calc(100% - var(--sz-106)));
    margin-bottom: 0;
  }
  .solution__heading {
    font-size: var(--sz-40);
  }
  .solution__heading .md {
    font-size: var(--sz-55);
  }
  .solution__heading .sm {
    font-size: var(--sz-45);
  }
  .solution__content {
    width: var(--sz-1128);
    margin-inline: auto;
  }
  .solution__lead {
    display: grid;
    grid-template-columns: 1fr var(--sz-438);
    align-items: flex-end;
    gap: var(--sz-9);
    margin-bottom: var(--sz-17);
    --mb-p: var(--sz-15);
    text-align: left;
    font-size: var(--sz-29);
    line-height: normal;
  }
  .solution__image {
    width: var(--sz-438);
    margin-inline: unset;
  }
  .solution__lead .md {
    font-size: var(--sz-52);
    line-height: var(--sz-73);
    margin-top: var(--sz-8);
  }
  .solution__lead .lg {
    font-size: var(--sz-52);
  }
  .solution__list {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sz-13) var(--sz-13);
  }
  .solution__item {
    aspect-ratio: 215/104;
    font-size: var(--sz-24);
    line-height: var(--sz-34);
  }
  .solution__item:nth-child(odd) {
    background-image: url(../images/pc/pic-solution-red.svg);
  }
  .solution__item:nth-child(even) {
    background-image: url(../images/pc/pic-solution-black.svg);
  }
}
/* ==========================================
 Merit
============================================*/
.merit {
  padding-block: var(--sz-171) var(--sz-65);
}

.merit__heading {
  text-align: center;
  font-size: var(--sz-50);
  font-weight: 700;
  line-height: var(--sz-70);
  position: relative;
}

.merit__heading::before {
  content: attr(data-en);
}

.merit__heading::before {
  content: attr(data-en);
  color: var(--color-gray);
  font-family: var(--font-josefin);
  font-size: var(--sz-118);
  font-weight: 700;
  line-height: normal;
  position: absolute;
  top: calc(-1 * var(--sz-47));
  left: 50%;
  translate: -50%;
  white-space: nowrap;
  z-index: -1;
}

.merit__list {
  display: grid;
  margin-bottom: var(--sz-70);
}

.merit__item {
  padding-block: var(--sz-60) var(--sz-50);
  border-width: var(--sz-4) 0 0 0;
  border-style: dashed;
  border-color: #a5a5a5;
  display: grid;
  gap: var(--sz-20);
  grid-template-rows: subgrid;
  grid-row: span 3;
}

.merit__item:first-child {
  border-top: none;
}

.merit__image {
  width: var(--sz-220);
  margin-inline: auto;
}

.merit__title {
  text-align: center;
  font-size: var(--sz-50);
  font-weight: 700;
  line-height: var(--sz-70);
}

.merit__desc {
  font-size: var(--sz-32);
  font-weight: 500;
  line-height: var(--sz-55);
  padding-inline: var(--sz-52);
  --mb-p: 0;
}

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

.merit__follow-image {
  width: var(--sz-656);
  margin-inline: auto;
  margin-bottom: var(--sz-82);
}

.merit__follow-desc {
  text-align: center;
  font-size: var(--sz-35);
  font-weight: 500;
  line-height: var(--sz-60);
}

.merit__follow-desc p:last-child {
  --mb-p: 0;
}

/* before after */
.merit__before-after-list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-53);
}

.merit__before-after-item {
  position: relative;
}

.merit__before-after-desc {
  text-align: center;
  font-size: var(--sz-35);
  font-weight: 500;
  line-height: normal;
  width: 50%;
}

.merit__before-after-desc.--before {
  position: absolute;
  bottom: var(--sz-36);
  left: 0;
}

.merit__before-after-desc.--after {
  position: absolute;
  bottom: var(--sz-36);
  right: 0;
}

@media screen and (min-width: 992px) {
  .merit {
    padding-block: var(--sz-140) var(--sz-62);
  }
  .merit__heading {
    font-size: var(--sz-40);
    line-height: var(--sz-58);
    margin-bottom: var(--sz-49);
  }
  .merit__heading::before {
    font-size: var(--sz-100);
  }
  .merit__list {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: var(--sz-45);
  }
  .merit__item {
    padding-block: var(--sz-25) var(--sz-66);
    gap: 0;
    border-width: 0 var(--sz-3) var(--sz-3) 0;
    position: relative;
  }
  .merit__image {
    width: var(--sz-143);
    margin-bottom: var(--sz-10);
  }
  .merit__title {
    font-size: var(--sz-30);
    line-height: var(--sz-49);
    align-self: center;
    margin-bottom: var(--sz-8);
  }
  .merit__desc {
    font-size: var(--sz-22);
    line-height: var(--sz-38);
    padding-inline: var(--sz-48);
  }
  /* padding */
  .merit__item:nth-child(3n+1) .merit__desc {
    padding-left: 0;
  }
  .merit__item:nth-child(3n) .merit__desc {
    padding-right: 0;
  }
  /* border */
  .merit__item:nth-child(3n) {
    border-right: none;
  }
  .merit__item:nth-last-child(-n+3) {
    border-bottom: none;
  }
  .merit__item::after {
    content: "";
    width: var(--sz-66);
    height: var(--sz-66);
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    top: 100%;
    left: 100%;
    translate: -50% -50%;
    z-index: 1;
  }
  /* before after */
  .merit__follow {
    margin-bottom: var(--sz-93);
  }
  .merit__follow-image {
    width: var(--sz-956);
    margin-bottom: var(--sz-65);
  }
  .merit__follow-desc {
    font-size: var(--sz-30);
    line-height: var(--sz-45);
  }
  .merit__before-after-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sz-48) var(--sz-50);
  }
  .merit__before-after-desc {
    font-size: var(--sz-27);
  }
  .merit__before-after-desc.--before {
    bottom: var(--sz-40);
  }
  .merit__before-after-desc.--after {
    bottom: var(--sz-40);
  }
}
/* ==========================================
 Reason
============================================*/
.reason {
  padding-block: var(--sz-195) var(--sz-57);
}

.reason__heading {
  text-align: center;
  font-size: var(--sz-50);
  font-weight: 700;
  line-height: var(--sz-70);
  position: relative;
  margin-bottom: var(--sz-10);
}

.reason__heading::before {
  content: attr(data-en);
  color: var(--color-gray);
  font-family: var(--font-josefin);
  font-size: var(--sz-118);
  font-weight: 700;
  line-height: normal;
  position: absolute;
  top: calc(-1 * var(--sz-47));
  left: 50%;
  translate: -50%;
  white-space: nowrap;
  z-index: -1;
}

.reason__list {
  display: flex;
  flex-direction: column;
  counter-reset: count;
}

.reason__item {
  border-top: 1px dashed var(--color-default);
  counter-increment: count;
  padding-block: var(--sz-58);
}

.reason__item:first-child {
  border-top: none;
}

.reason__title {
  position: relative;
  padding-left: var(--sz-165);
  font-feature-settings: "palt";
  font-size: var(--sz-37);
  font-weight: 700;
  line-height: var(--sz-60);
  display: flex;
  align-items: center;
}

.reason__title::before {
  content: counter(count, decimal-leading-zero);
  color: var(--color-red);
  font-size: var(--sz-88);
  font-weight: 700;
  line-height: var(--sz-108);
  display: flex;
  align-items: center;
  position: absolute;
  left: var(--sz-10);
  border-right: var(--sz-5) solid;
  width: var(--sz-130);
  height: var(--sz-114);
}

.reason__desc {
  font-size: var(--sz-32);
  font-style: normal;
  font-weight: 500;
  line-height: var(--sz-55);
  --mb-p: var(--sz-29);
}

/* item1 */
.reason__item:nth-child(1) .reason__title {
  margin-bottom: var(--sz-63);
}

.reason__item:nth-child(1) .reason__image {
  margin-bottom: var(--sz-37);
}

.reason__item:nth-child(1) .reason__desc {
  font-weight: 400;
  line-height: normal;
  text-align: center;
  --mb-p: 0;
}

/* item2 */
.reason__item:nth-child(2) .reason__title {
  margin-bottom: var(--sz-23);
}

/* item3 */
.reason__item:nth-child(3) {
  padding-bottom: 0;
}

.reason__item:nth-child(3) .reason__title {
  margin-bottom: var(--sz-65);
}

/* timeline */
.reason__timeline {
  display: flex;
  flex-direction: column;
  gap: var(--sz-88);
}

.reason__timeline-item {
  position: relative;
}

.reason__timeline-item:not(:last-child)::before {
  content: "";
  aspect-ratio: 21/86;
  width: var(--sz-21);
  background: url(../images/sp/pic-reason-arrow.webp) no-repeat top left/contain;
  position: absolute;
  top: calc(100% - var(--sz-10));
  left: 50%;
  translate: -50%;
}

.reason__timeline-head {
  border-radius: var(--sz-10) var(--sz-10) 0px 0px;
  background: #515151;
  padding: var(--sz-22) var(--sz-45);
  color: #fff;
  font-size: var(--sz-35);
  font-weight: 700;
  line-height: var(--sz-45);
}

.reason__timeline-body {
  border-radius: 0 0 var(--sz-10) var(--sz-10);
  background: #f1f1f1;
  padding: var(--sz-28) var(--sz-45);
}

.reason__timeline-desc {
  --mb-p: 0;
  font-size: var(--sz-30);
  font-weight: 500;
  line-height: var(--sz-50);
}

.reason__timeline-image {
  position: absolute;
}

.reason__timeline-item:nth-child(1) .reason__timeline-image {
  width: var(--sz-213);
  top: calc(-1 * var(--sz-57));
  right: var(--sz-47);
}

.reason__timeline-item:nth-child(2) .reason__timeline-image {
  width: var(--sz-227);
  top: calc(-1 * var(--sz-55));
  right: var(--sz-43);
}

.reason__timeline-item:nth-child(3) .reason__timeline-image {
  width: var(--sz-243);
  top: calc(-1 * var(--sz-59));
  right: var(--sz-34);
}

@media screen and (min-width: 992px) {
  .reason {
    padding-block: var(--sz-145) var(--sz-90);
  }
  .reason__heading {
    font-size: var(--sz-40);
    margin-bottom: var(--sz-23);
  }
  .reason__heading::before {
    font-size: var(--sz-100);
  }
  .reason__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--sz-124);
  }
  .reason__item {
    padding-block: 0 var(--sz-106);
    width: calc((100% - var(--sz-124)) / 2);
  }
  .reason__title {
    padding-left: var(--sz-150);
    font-size: var(--sz-32);
    line-height: var(--sz-50);
  }
  .reason__title::before {
    font-size: var(--sz-80);
    line-height: var(--sz-100);
    width: var(--sz-120);
    height: var(--sz-104);
    justify-content: flex-start;
  }
  .reason__desc {
    font-size: var(--sz-25);
    line-height: var(--sz-43);
    --mb-p: var(--sz-33);
  }
  /* item1 */
  .reason__item:nth-child(1) .reason__title {
    margin-bottom: var(--sz-74);
  }
  .reason__item:nth-child(1) .reason__image {
    margin-bottom: var(--sz-43);
    width: var(--sz-577);
    margin-inline: auto;
  }
  /* item2 */
  .reason__item:nth-child(2) {
    border-top: none;
  }
  .reason__item:nth-child(2) .reason__title {
    margin-bottom: var(--sz-13);
  }
  .reason__item:nth-child(2) .reason__image {
    width: var(--sz-464);
    margin-inline: auto;
  }
  /* item3 */
  .reason__item:nth-child(3) {
    width: 100%;
    padding-block: var(--sz-70) 0;
  }
  /* timeline */
  .reason__item:nth-child(3) .reason__title {
    margin-bottom: var(--sz-54);
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .reason__timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sz-28);
  }
  .reason__timeline-item:not(:last-child)::before {
    aspect-ratio: 81/21;
    width: var(--sz-81);
    background-image: url(../images/pc/pic-reason-arrow.webp);
    top: 62%;
    left: 100%;
    translate: -33%;
    z-index: 1;
  }
  .reason__timeline-head {
    padding: var(--sz-15) var(--sz-45);
    font-size: var(--sz-30);
    line-height: normal;
    text-align: center;
  }
  .reason__timeline-body {
    padding: var(--sz-26) var(--sz-20);
    aspect-ratio: 421/298;
  }
  .reason__timeline-desc {
    font-size: var(--sz-24);
    line-height: var(--sz-42);
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .reason__timeline-image {
    right: unset;
    left: 50%;
    translate: -50%;
  }
  .reason__timeline-item:nth-child(1) .reason__timeline-image {
    width: var(--sz-190);
    top: 55%;
  }
  .reason__timeline-item:nth-child(2) .reason__timeline-image {
    width: var(--sz-200);
    top: 58%;
  }
  .reason__timeline-item:nth-child(3) .reason__timeline-image {
    width: var(--sz-206);
    top: 62%;
  }
  .reason__timeline-item:nth-child(3) .reason__timeline-body {
    padding-inline: var(--sz-38);
  }
}
/* ==========================================
 Introduction
============================================*/
.introduction {
  padding-block: var(--sz-117) 0;
}

.introduction__heading {
  text-align: center;
  font-size: var(--sz-50);
  font-weight: 700;
  line-height: var(--sz-70);
  position: relative;
  margin-bottom: var(--sz-124);
}

.introduction__heading::before {
  content: attr(data-en);
  color: var(--color-gray);
  font-family: var(--font-josefin);
  font-size: var(--sz-80);
  font-weight: 700;
  line-height: normal;
  position: absolute;
  top: calc(-1 * var(--sz-30));
  left: 50%;
  translate: -50%;
  white-space: nowrap;
  z-index: -1;
}

.introduction__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-136);
}

.introduction__item {
  border-radius: 0px var(--sz-10) var(--sz-10) var(--sz-10);
  border: var(--sz-5) solid var(--color-dark);
  background-color: #fff;
  position: relative;
  padding: var(--sz-54) var(--sz-40) var(--sz-50);
}

.introduction__item-label {
  border-radius: var(--sz-10) var(--sz-10) 0px 0px;
  background: var(--color-dark);
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  bottom: 100%;
  left: calc(-1 * var(--sz-5));
  color: #fff;
  font-size: var(--sz-30);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 0.5em 1em;
}

.introduction__item-head {
  margin-bottom: var(--sz-31);
  display: grid;
  grid-template-columns: var(--sz-191) 1fr;
  align-items: center;
  gap: var(--sz-28);
}

.introduction__item-title {
  font-feature-settings: "palt";
  font-size: var(--sz-40);
  font-weight: 700;
  line-height: normal;
}

.introduction__item:nth-child(2) .introduction__item-title {
  font-size: var(--sz-35);
  line-height: var(--sz-48);
}

.introduction__item-title > small {
  font-size: var(--sz-35);
  font-weight: 400;
  margin-top: var(--sz-10);
  display: block;
}

.introduction__item-skill {
  padding-bottom: var(--sz-34);
  margin-bottom: var(--sz-34);
  border-bottom: var(--sz-3) dashed;
  font-size: var(--sz-30);
  font-weight: 500;
  line-height: var(--sz-48);
}

.introduction__item-desc {
  font-size: var(--sz-30);
  font-weight: 400;
  line-height: var(--sz-50);
}

@media screen and (min-width: 992px) {
  .introduction {
    padding-block: var(--sz-126) 0;
  }
  .introduction__heading {
    font-size: var(--sz-40);
    line-height: normal;
    margin-bottom: var(--sz-106);
  }
  .introduction__heading::before {
    font-size: var(--sz-64);
  }
  .introduction__list {
    display: grid;
    grid-template-columns: repeat(2, var(--sz-552));
    gap: var(--sz-65);
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .introduction__item {
    border-radius: 0px var(--sz-8) var(--sz-8) var(--sz-8);
    border-width: var(--sz-4);
    padding: var(--sz-42) var(--sz-36) var(--sz-32);
  }
  .introduction__item-label {
    border-radius: var(--sz-8) var(--sz-8) 0px 0px;
    left: calc(-1 * var(--sz-3));
    font-size: var(--sz-24);
  }
  .introduction__item-head {
    margin-bottom: var(--sz-25);
    grid-template-columns: var(--sz-154) 1fr;
    gap: var(--sz-22);
  }
  .introduction__item-title {
    font-size: var(--sz-32);
  }
  .introduction__item-title > small {
    font-size: var(--sz-28);
    margin-top: var(--sz-8);
  }
  .introduction__item:nth-child(2) .introduction__item-title {
    font-size: var(--sz-28);
    line-height: var(--sz-38);
  }
  .introduction__item-skill {
    font-size: var(--sz-24);
    line-height: var(--sz-38);
    padding-bottom: var(--sz-32);
    margin-bottom: var(--sz-32);
    border-bottom-width: var(--sz-2);
  }
  .introduction__item-desc {
    font-size: var(--sz-24);
    line-height: var(--sz-40);
  }
}
/* ==========================================
 Case
============================================*/
.case {
  padding-block: var(--sz-192) var(--sz-51);
}

.case__heading {
  text-align: center;
  font-size: var(--sz-65);
  font-weight: 700;
  line-height: normal;
  position: relative;
  margin-bottom: var(--sz-217);
}

.case__heading::before {
  content: attr(data-en);
  color: var(--color-gray);
  font-family: var(--font-josefin);
  font-size: var(--sz-150);
  font-weight: 700;
  line-height: normal;
  position: absolute;
  top: calc(-1 * var(--sz-60));
  left: 50%;
  translate: -50%;
  white-space: nowrap;
  z-index: -1;
}

.case__list {
  display: grid;
  gap: var(--sz-220);
}

.case__item {
  background-color: #f7f7f7;
  padding-block: var(--sz-163) var(--sz-51);
  position: relative;
}

.case__item:nth-child(1) {
  padding-block-start: var(--sz-163);
}

.case__item:nth-child(2) {
  padding-block-start: var(--sz-118);
}

.case__item-image {
  position: absolute;
  left: 50%;
  translate: -50%;
}

.case__item:nth-child(1) .case__item-image {
  width: var(--sz-215);
  top: calc(-1 * var(--sz-146));
}

.case__item:nth-child(2) .case__item-image {
  width: var(--sz-191);
  top: calc(-1 * var(--sz-178));
}

.case__item-title {
  text-align: center;
  font-size: var(--sz-38);
  font-weight: 700;
  line-height: var(--sz-62);
  margin-bottom: var(--sz-31);
}

.case__item-label {
  background-color: var(--color-dark);
  color: #fff;
  font-size: var(--sz-40);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.1em;
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--sz-7) var(--sz-68) var(--sz-7) var(--sz-45);
  -webkit-clip-path: polygon(0 0, calc(100% - var(--sz-31)) 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - var(--sz-31)) 0, 100% 100%, 0 100%);
  margin-bottom: var(--sz-19);
}

.case__item-desc {
  padding-inline: var(--sz-45);
  font-size: var(--sz-30);
  font-weight: 500;
  line-height: var(--sz-50);
}

.case__item-desc:last-child {
  --mb-p: 0;
}

.case__item-resources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sz-16) var(--sz-13);
  margin-top: var(--sz-38);
}

.case__item-resource {
  border-radius: 100vh;
  border: var(--sz-3) solid var(--color-red);
  background-color: #fff;
  aspect-ratio: 314/121;
  width: calc((100% - var(--sz-13)) / 2);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-red);
  text-align: center;
  font-size: var(--sz-32);
  font-weight: 500;
  line-height: var(--sz-42);
}

@media screen and (min-width: 992px) {
  .case {
    padding-block: var(--sz-150) var(--sz-54);
  }
  .case__heading {
    font-size: var(--sz-45);
    margin-bottom: var(--sz-171);
  }
  .case__heading::before {
    font-size: var(--sz-100);
    top: calc(-1 * var(--sz-50));
  }
  .case__list {
    grid-template-columns: repeat(2, var(--sz-588));
    gap: var(--sz-56);
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .case__item {
    padding-block: var(--sz-101) var(--sz-68);
  }
  .case__item:nth-child(1) {
    padding-block-start: var(--sz-101);
  }
  .case__item:nth-child(2) {
    padding-block-start: var(--sz-101);
  }
  .case__item:nth-child(1) .case__item-image {
    width: var(--sz-172);
    top: calc(-1 * var(--sz-140));
  }
  .case__item:nth-child(2) .case__item-image {
    width: var(--sz-166);
    top: calc(-1 * var(--sz-140));
  }
  .case__item-title {
    font-size: var(--sz-30);
    line-height: var(--sz-49);
    margin-bottom: var(--sz-22);
  }
  .case__item-label {
    font-size: var(--sz-30);
    padding: var(--sz-7) var(--sz-56) var(--sz-7) var(--sz-36);
    -webkit-clip-path: polygon(0 0, calc(100% - var(--sz-20)) 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, calc(100% - var(--sz-20)) 0, 100% 100%, 0 100%);
    margin-bottom: var(--sz-14);
  }
  .case__item-desc {
    font-feature-settings: "palt";
    padding-inline: var(--sz-36);
    font-size: var(--sz-23);
    line-height: var(--sz-45);
  }
  .case__item-resources {
    gap: var(--sz-12) var(--sz-10);
    margin-top: var(--sz-24);
  }
  .case__item-resource {
    aspect-ratio: 252/96;
    font-size: var(--sz-23);
    line-height: var(--sz-33);
  }
}
/* ==========================================
 HowTo
============================================*/
.howto {
  padding-block: var(--sz-159) var(--sz-110);
  position: relative;
}

.howto::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #f3f3f3;
  aspect-ratio: 374/1065;
  width: var(--sz-374);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
          clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: -1;
}

.howto__heading {
  text-align: center;
  font-size: var(--sz-60);
  font-weight: 700;
  line-height: normal;
  position: relative;
  margin-bottom: var(--sz-51);
}

.howto__heading::before {
  content: attr(data-en);
  color: var(--color-gray);
  font-family: var(--font-josefin);
  font-size: var(--sz-118);
  font-weight: 700;
  line-height: normal;
  position: absolute;
  top: calc(-1 * var(--sz-50));
  left: 50%;
  translate: -50%;
  white-space: nowrap;
  z-index: -1;
}

.howto__list {
  display: grid;
  gap: var(--sz-45);
}

.howto__item {
  display: grid;
  grid-template-columns: var(--sz-196) 1fr;
  align-items: center;
  gap: var(--sz-30);
}

.howto__item-image {
  position: relative;
}

.howto__item:not(:last-child) .howto__item-image::before {
  content: "";
  border-right: var(--sz-3) dashed;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50%;
}

.howto__item-label {
  color: var(--color-red);
  font-size: var(--sz-50);
  font-weight: 700;
  line-height: var(--sz-90);
}

.howto__item-desc {
  --mb-p: 0;
  font-size: var(--sz-40);
  font-weight: 500;
  line-height: normal;
}

@media screen and (min-width: 992px) {
  .howto {
    padding-block: var(--sz-165) var(--sz-94);
  }
  .howto::before {
    aspect-ratio: 1522/280;
    width: var(--sz-1522);
  }
  .howto__heading {
    font-size: var(--sz-45);
    margin-bottom: var(--sz-40);
  }
  .howto__heading::before {
    font-size: var(--sz-100);
    top: calc(-1 * var(--sz-45));
  }
  .howto__list {
    gap: var(--sz-62);
    grid-template-columns: repeat(4, 1fr);
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .howto__item {
    grid-template-columns: unset;
    gap: var(--sz-20);
  }
  .howto__item-image {
    width: var(--sz-164);
    order: 1;
    margin-inline: auto;
  }
  .howto__item:not(:last-child) .howto__item-image::before {
    border-right: none;
    border-bottom: var(--sz-3) dashed #666;
    height: auto;
    width: 100%;
    top: 50%;
    left: 100%;
    translate: unset;
  }
  .howto__item-body {
    display: contents;
  }
  .howto__item-label {
    order: 0;
    font-size: var(--sz-40);
    line-height: normal;
    text-align: center;
  }
  .howto__item-desc {
    order: 1;
    font-size: var(--sz-32);
    text-align: center;
  }
}
/* ==========================================
 FAQ
============================================*/
.faq {
  padding-block: var(--sz-154) var(--sz-89);
}

.faq__heading {
  text-align: center;
  font-size: var(--sz-55);
  font-weight: 700;
  line-height: normal;
  position: relative;
  margin-bottom: var(--sz-49);
}

.faq__heading::before {
  content: attr(data-en);
  color: var(--color-gray);
  font-family: var(--font-josefin);
  font-size: var(--sz-118);
  font-weight: 700;
  line-height: normal;
  position: absolute;
  top: calc(-1 * var(--sz-50));
  left: 50%;
  translate: -50%;
  white-space: nowrap;
  z-index: -1;
}

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

.faq__item {
  border: var(--sz-2) solid var(--color-red);
  font-size: var(--sz-30);
  font-weight: 500;
  line-height: var(--sz-45); /* 150% */
}

.faq__term {
  padding: var(--sz-25) var(--sz-102) var(--sz-25) var(--sz-107);
  font-feature-settings: "palt";
  position: relative;
  min-height: var(--sz-139);
  display: flex;
  align-items: center;
}

.faq__term::before {
  content: "Q";
  color: var(--color-red);
  font-size: var(--sz-70);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  position: absolute;
  top: 50%;
  left: var(--sz-28);
  translate: 0 -60%;
}

.faq__term::after {
  content: "+";
  color: var(--color-red);
  font-size: var(--sz-57);
  font-weight: 700;
  line-height: normal;
  position: absolute;
  top: 50%;
  right: var(--sz-44);
  translate: 0 -50%;
}

.active > .faq__term::after {
  content: "−";
}

.faq__data {
  padding: var(--sz-27) var(--sz-70);
  position: relative;
  display: none;
}

.faq__data::after {
  content: "";
  width: calc(100% - 2 * var(--sz-70));
  border-top: var(--sz-3) dashed var(--color-red);
  display: block;
  position: absolute;
  top: 0;
  left: var(--sz-70);
}

@media screen and (min-width: 992px) {
  .faq {
    padding-block: var(--sz-147) var(--sz-120);
  }
  .faq__heading {
    font-size: var(--sz-45);
    margin-bottom: var(--sz-70);
  }
  .faq__heading::before {
    font-size: var(--sz-100);
    top: calc(-1 * var(--sz-56));
  }
  .faq__list {
    width: var(--sz-1072);
    margin-inline: auto;
    gap: var(--sz-20);
  }
  .faq__item {
    font-size: var(--sz-28);
    line-height: var(--sz-48);
  }
  .faq__term {
    padding: var(--sz-25) var(--sz-196) var(--sz-25) var(--sz-153);
    font-feature-settings: unset;
    min-height: var(--sz-145);
  }
  .faq__term::before {
    left: var(--sz-63);
  }
  .faq__term::after {
    right: var(--sz-77);
  }
}
/* ==========================================
 Entry
============================================*/
.entry {
  padding-block: 0 var(--sz-91);
}

.entry__lead {
  margin-bottom: var(--sz-24);
  text-align: center;
  font-size: var(--sz-35);
  font-weight: 500;
  line-height: var(--sz-55);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--sz-16);
}

.entry__lead::before,
.entry__lead::after {
  content: "";
  width: var(--sz-4);
  height: var(--sz-90);
  background-color: var(--color-default);
  display: block;
}

.entry__lead::before {
  rotate: -20deg;
  transform-origin: bottom right;
}

.entry__lead::after {
  rotate: 20deg;
  transform-origin: bottom left;
}

.entry__lead .lg {
  font-size: var(--sz-38);
}

.entry__heading {
  margin-bottom: var(--sz-40);
  color: var(--color-red);
  text-align: center;
  font-size: var(--sz-58);
  font-weight: 700;
  line-height: var(--sz-86);
}

.entry__heading .lg {
  font-size: var(--sz-63);
  letter-spacing: 0.03em;
}

@media screen and (min-width: 992px) {
  .entry {
    padding-block: 0 var(--sz-144);
  }
  .entry__lead {
    margin-bottom: var(--sz-13);
    font-size: var(--sz-28);
    line-height: normal;
    gap: var(--sz-16);
  }
  .entry__lead::before,
  .entry__lead::after {
    width: var(--sz-3);
    height: var(--sz-82);
  }
  .entry__lead .lg {
    font-size: var(--sz-32);
  }
  .entry__heading {
    font-size: var(--sz-55);
    line-height: normal;
    margin-bottom: var(--sz-57);
  }
  .entry__heading .lg {
    font-size: inherit;
  }
  /**/
  .entry {
    padding-block: 0 var(--sz-86);
  }
}
/* ==========================================
 Form
============================================*/
.form a {
  color: #67c5eb;
}

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

.form-label {
  display: flex;
  align-items: center;
  gap: var(--sz-20);
  font-size: var(--sz-33);
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.05em;
  margin-bottom: var(--sz-16);
}

.form-label .required {
  border-radius: var(--sz-10);
  background-color: var(--color-red);
  color: #fff;
  font-size: var(--sz-31);
  font-weight: 500;
  line-height: var(--sz-42);
  letter-spacing: 0.05em;
  padding: var(--sz-6) var(--sz-20);
  align-self: stretch;
}

.form-control,
.form-select {
  border-radius: var(--sz-10);
  border: var(--sz-4) solid #6b6b6b;
  font-size: var(--sz-37);
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.05em;
  padding: var(--sz-20) var(--sz-37);
}

:where([id=company_name]).form-control,
:where([id=your_name]).form-control {
  width: var(--sz-470);
}

.form__note {
  margin-block: var(--sz-40) var(--sz-35);
  text-align: center;
  font-size: var(--sz-30);
  font-weight: 400;
  line-height: var(--sz-50);
}

.form__submit {
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #cf1a24;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #cf1a24;
  border-radius: var(--sz-10);
  background-color: #cf1a24;
  box-shadow: var(--sz-7) var(--sz-7) var(--sz-10) 0px rgba(0, 0, 0, 0.25);
  width: 100%;
  aspect-ratio: 690/125;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: var(--sz-40);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.03em;
  position: relative;
}

.form__submit:hover {
  filter: brightness(1.2);
}

.form__submit .fa-angle-right {
  position: absolute;
  top: 50%;
  right: var(--sz-49);
  translate: 0 -50%;
}

.invalid-feedback {
  font-size: var(--sz-32);
}

@media screen and (min-width: 992px) {
  .form {
    width: var(--sz-939);
    margin-inline: auto;
  }
  .form__row {
    margin-bottom: var(--sz-32);
  }
  .form-label {
    gap: var(--sz-22);
    font-size: var(--sz-28);
    letter-spacing: 0.02em;
    margin-bottom: var(--sz-9);
  }
  .form-label .required {
    border-radius: var(--sz-3);
    font-size: var(--sz-22);
    line-height: normal;
    letter-spacing: 0.02em;
    padding: var(--sz-3) var(--sz-10);
  }
  .form-control,
  .form-select {
    border-radius: var(--sz-6);
    border-width: var(--sz-3);
    font-size: var(--sz-28);
    padding: var(--sz-20) var(--sz-32);
    width: 100%;
  }
  :where([id=your_post]).form-select {
    width: var(--sz-487);
  }
  .form__note {
    margin-block: var(--sz-71) var(--sz-67);
    font-size: var(--sz-28);
  }
  .form__submit {
    border-radius: var(--sz-8);
    aspect-ratio: 553/94;
    width: var(--sz-553);
    font-size: var(--sz-32);
  }
  .form__submit .fa-angle-right {
    right: var(--sz-37);
  }
  .invalid-feedback {
    font-size: var(--sz-28);
  }
  /**/
  .form {
    width: var(--sz-600);
  }
  .form-label {
    font-size: var(--sz-16);
  }
  .form-label .required {
    font-size: var(--sz-14);
  }
  .form-control,
  .form-select {
    font-size: var(--sz-16);
    padding: 1em 1.5em;
  }
  .form__note {
    margin-block: var(--sz-30) var(--sz-30);
    font-size: var(--sz-16);
  }
  .form__submit {
    width: var(--sz-400);
    font-size: var(--sz-18);
  }
  .invalid-feedback {
    font-size: var(--sz-14);
  }
}
/* ==========================================
 Footer
============================================*/
.footer {
  padding-block: var(--sz-76);
  font-size: var(--sz-30);
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.05em;
}

.footer__menu {
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sz-60);
}

@media screen and (min-width: 992px) {
  .footer {
    padding-block: var(--sz-73) var(--sz-87);
    font-size: var(--sz-30);
  }
  .footer__menu {
    margin-bottom: var(--sz-40);
  }
  /**/
  .footer {
    padding-block: var(--sz-30) var(--sz-30);
    font-size: var(--sz-16);
  }
  .footer__menu {
    margin-bottom: var(--sz-20);
  }
}/*# sourceMappingURL=style.css.map */