@charset "utf-8";

/* ==========================================
 Common
============================================*/
:root {
  --color-yellow: #e3eb94;
  --color-navy: #043871;
  --color-mark: #fefb00;
}

body {
  font-size: var(--sz-42);
}

.btn {
  display: block;
}

/* ==========================================
 Drawer
============================================*/
.drawer-hamburger {
  background-color: #010103;
}

.drawer-hamburger:hover {
  background-color: #010103;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
  background-color: #fff;
}

.drawer-nav {
  background-color: #010103;
  color: #fff;
}

.drawer-menu {
  padding-block: 1em;
}

.drawer-menu-item {
  color: inherit;
  font-size: 16px;
  padding: 1em 1em;
  position: relative;
  text-decoration: none;
}

.drawer-menu-item::before {
  content: "";
  width: 0;
  height: 1px;
  background-color: #fff;
  display: block;
  opacity: 0;
  transition: 0.5s;
  position: absolute;
  top: 100%;
  left: 1em;
}

.drawer-menu-item:hover {
  color: inherit;
  text-decoration: none;
}

.drawer-menu-item:hover::before {
  width: calc(100% - 2em);
  opacity: 1;
}

/* ==========================================
 Footer
============================================*/
.footer {
  font-weight: normal;
}

.pagetop {
  @media (min-width: 992px) {
    font-size: 74%;
  }
}

/* ==========================================
 Contents
============================================*/

.inner {
  max-width: 1100px;
  margin-inline: auto;
}

/* FV */
.fv {
  background: url(../images/bg-1.webp);
  background-size: cover;
  padding-block: var(--sz-70) var(--sz-140);

  & .page-title {
    margin-bottom: var(--sz-40);
  }

  & .img2 {
    margin-bottom: var(--sz-44);
  }

  & .img3 {
    margin-bottom: var(--sz-56);
  }

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

  & .p1 {
    color: var(--bs-white);
    font-size: var(--sz-52);
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    margin-bottom: var(--sz-30);
    letter-spacing: 0.1em;
  }

  & .row {
    margin-bottom: var(--sz-40);
  }

  & .btn + .btn {
    margin-top: var(--sz-40);
  }
}

.fv__cta {
  background: url(../images/bg-7.webp) no-repeat top left / 100%;
  position: relative;
  padding: var(--sz-30);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1020/ 828;
}

/* PR */
.pr {
  background: url(../images/bg-2.webp) no-repeat;
  background-position: left bottom;
  background-size: cover;
  padding-top: var(--sz-114);
  padding-bottom: var(--sz-110);

  @media (min-width: 992px) {
    background-size: auto 1016px;
  }
}

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

.pr__desc {
  text-align: center;
  text-shadow: 2px 3px 0.5em rgba(255, 255, 255, 0.4), -2px -3px 0.5em rgba(255, 255, 255, 0.4), 2px -3px 0.5em rgba(255, 255, 255, 0.4), -2px 3px 0.5em rgba(255, 255, 255, 0.4);
}

/* before after */
.bf {
  background-color: #010104;
  padding-block: var(--sz-118) var(--sz-160);
  & .img1 {
  }
}

.bf__heading {
  color: #fff;
  font-size: var(--sz-80);
  font-weight: bold;
  line-height: 1.38;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: var(--sz-68);
}

.bf__video {
  width: clamp(calc(1049px * var(--min_w1) / var(--max_w1)), calc(1049vw * 100 / var(--max_w1)), 1049px);
  margin-inline: auto;
  display: block;
  position: relative;
  @media (min-width: 992px) {
    --max_w1: 1920;
  }
}

.bf__video i {
  color: #ff0000;
  font-size: var(--sz-140);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  cursor: pointer;
  z-index: 1;

  &::after {
    content: "";
    background-color: #fff;
    width: 50%;
    height: 50%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    z-index: -1;
  }
}

/* voice */
.voice {
  padding-block: var(--sz-110) var(--sz-110);
}

.voice__heading {
  font-size: var(--sz-90);
  font-weight: bold;
  line-height: 1.23;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: var(--sz-340);
}

.voice__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-338);
}

.voice__item {
  position: relative;
}

.voice__item::before {
  content: "";
  background-color: #c2c2c2;
  width: 100vw;
  height: var(--sz-338);
  position: absolute;
  top: calc(-1 * var(--sz-200));
  left: calc((100% - 100vw) / 2);
  z-index: -1;
}

.voice__box {
  box-shadow: var(--sz-3) var(--sz-3) var(--sz-35) #3a3a3a47;
  border: 1px solid #8b8b8b;
  padding: var(--sz-57) var(--sz-40) var(--sz-57);
  background-color: #fff;
}

.voice__idx {
  font-family: Arial;
  font-size: var(--sz-90);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  margin-bottom: var(--sz-40);
}

.voice__desc {
  font-size: var(--sz-42);
  font-weight: normal;
  line-height: 1.23;
  letter-spacing: 0.1em;
}

.voice__img {
  position: absolute;
  top: calc(-1 * var(--sz-260));
  right: var(--sz-30);
}

/* Service */
.service {
  background: url(../images/bg-3.webp);
  background-size: cover;
  padding-block: var(--sz-83) var(--sz-100);

  & .p1 {
    width: fit-content;
    text-align: left;
    margin-inline: auto;
  }

  & .btn + .btn {
    margin-top: var(--sz-35);
  }
}

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

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

.service__item {
  border: var(--sz-4) solid #c9c9c9;
  padding: var(--sz-98) var(--sz-35) var(--sz-90);
  background-color: var(--bs-white);
}

.service__head {
  margin-bottom: var(--sz-53);
}

.service__body {
  text-align: center;
}

/* Reason */
.reason {
  background: #0e2547;
  padding-top: var(--sz-116);
  padding-bottom: var(--sz-112);
}

.reason__heading {
  margin-bottom: var(--sz-75);
}

.reason__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-48);
  counter-reset: count;
}

.reason__item {
  box-shadow: 0 0 2px 2px rgb(0 0 0 / 53%);
  counter-increment: count;
  padding: var(--sz-45);
  background-color: #000000;
  position: relative;
  border-radius: var(--sz-20);
  color: var(--bs-white);
}

.reason__head {
  padding-left: var(--sz-145);
  color: var(--bs-white);
  font-size: var(--sz-67);
  font-weight: bold;
  display: flex;
  align-items: flex-end;
  min-height: var(--sz-130);
  margin-bottom: var(--sz-50);
}

.reason__item::before {
  content: "reason";
  position: absolute;
  top: var(--sz-45);
  left: var(--sz-45);
  font-size: var(--sz-30);
  border-bottom: 1px solid;
  line-height: 1;
}

.reason__item::after {
  content: counter(count, decimal-leading-zero);
  position: absolute;
  top: var(--sz-75);
  left: var(--sz-45);
  font-size: var(--sz-96);
  line-height: 1;
}

.reason__body {
  font-size: 90.47%;
}

/* CTA */
.cta {
  background: url(../images/bg-4.webp);
  background-size: cover;
  padding-top: var(--sz-100);
  padding-bottom: var(--sz-100);
  color: var(--bs-white);
  text-align: center;

  & .inner {
    background: url(../images/bg-5.webp);
    background-size: cover;
    padding-top: var(--sz-95);
    padding-bottom: var(--sz-85);
  }

  & .btn + .btn {
    margin-top: var(--sz-35);
  }
}

.cta__heading {
  color: var(--bs-white);
  font-size: var(--sz-52);
  font-weight: bold;
  margin-bottom: var(--sz-50);
}

/* Price */
.price {
  padding-top: var(--sz-112);
  padding-bottom: var(--sz-95);

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

  & .p2 {
    line-height: 1;
  }
}

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

.price__list {
  display: flex;
  flex-wrap: wrap;
  --gap: var(--sz-45);
  gap: var(--gap);
}

.price__item {
  width: calc((100% - var(--gap)) / 2);
  background-color: #585858;
  text-align: center;
  padding: var(--sz-60) var(--sz-50);
  color: var(--bs-white);
}

.price__item:nth-child(2),
.price__item:nth-child(3) {
  background-color: #212121;
}

.price__item:nth-child(4) {
}

.price__head {
  font-size: var(--sz-64);
  margin-bottom: var(--sz-45);
}

.price__body {
  font-size: var(--sz-64);
}

/* Access */
.access {
  background-color: #010103;
  padding-top: var(--sz-120);
  padding-bottom: var(--sz-120);
}

.access__heading {
  margin-bottom: var(--sz-80);
}

/* QA */
.qa {
  background-color: #f0f0f0;
  padding-top: var(--sz-110);
  padding-bottom: var(--sz-110);
}

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

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

.qa__item {
  background-color: var(--bs-white);
  margin-bottom: 0;
}

.qa__term {
  background-color: #d8d8d8;
  position: relative;
  font-size: var(--sz-38);
  padding: var(--sz-40);
  padding-left: var(--sz-155);
  min-height: var(--sz-190);
  display: flex;
  align-items: center;
}

.qa__term::before {
  content: "Q";
  font-size: var(--sz-100);
  font-weight: bold;
  color: #7e90a8;
  line-height: 1;
  position: absolute;
  top: var(--sz-40);
  left: var(--sz-40);
}

.qa__data {
  margin-bottom: 0;
  position: relative;
  font-size: var(--sz-38);
  padding: var(--sz-40);
  padding-left: var(--sz-155);
}

.qa__data::before {
  content: "A";
  font-size: var(--sz-100);
  font-weight: bold;
  color: #033a70;
  line-height: 1;
  position: absolute;
  left: var(--sz-40);
}

.campaignimg{
  padding-bottom: 40px;
}