:root {
  /* color */
  --demo-color-white: #fff;
  --demo-color-blue: #9fd9f6;
  --demo-color-navy: #1e353e;
  --demo-color-light-gray: #ebeded;

  /* spacing */
  --demo-spacing-10: min(10px, 10 / 768 * 100vw);
  --demo-spacing-8: calc(var(--demo-spacing-10) * 0.8);
  --demo-spacing-20: min(20px, 20 / 768 * 100vw);
  --demo-spacing-30: min(30px, 30 / 768 * 100vw);
  --demo-spacing-40: min(40px, 40 / 768 * 100vw);
  --demo-spacing-50: min(50px, 50 / 768 * 100vw);
  --demo-spacing-56: min(56px, 56 / 768 * 100vw);
  --demo-spacing-64: min(64px, 64 / 768 * 100vw);
  --demo-spacing-80: min(80px, 80 / 768 * 100vw);
  --demo-spacing-112: min(112px, 112 / 768 * 100vw);
  --demo-spacing-inline: 5vw;

  /* font-size */
  --demo-font-size-18: min(3.2vw, 18px);
  --demo-font-size-24: min(4.5vw, 24px);
  --demo-font-size-32: min(5.75vw, 32px);

  /* font-weight */
  --demo-font-weight-bold: 700;

  /* 一旦全消し */
  /* * {
    transition-duration: 0s !important;
    transition-property: none !important;
  } */
}

/*
MARK: common
*/

.dm-container {
  width: min(1100px + 10vw, 100%);
  padding-block: var(--demo-spacing-112) var(--demo-spacing-80);
  margin-inline: auto;
}

.dm-main {
  display: grid;
  gap: var(--demo-spacing-50);
}

@media (width > 1025px) {
  .dm-container {
    padding-inline: var(--demo-spacing-inline);
  }

  .dm-main {
    grid-template-columns: 1fr 360px;
  }
}

.dm-wrapper {
  padding-block: var(--demo-spacing-56) var(--demo-spacing-64);
  padding-inline: var(--demo-spacing-inline);

  &.-problem {
    padding-block: 0;
  }

  &.-overview {
    color: var(--demo-color-white);
    background-color: var(--demo-color-navy);
    border-radius: var(--demo-spacing-10) var(--demo-spacing-10) 0 0;
  }

  &.-experience {
    background-color: var(--demo-color-light-gray);
    border-radius: 0 0 var(--demo-spacing-10) var(--demo-spacing-10);
  }

  &.-confirm {
    margin-block-end: var(--demo-spacing-40);
    background-color: var(--demo-color-light-gray);

    p {
      margin-block-start: 1em;
    }
  }
}

.dm-wrapper-sub {
  padding-inline: var(--demo-spacing-inline);
}

@media (width > 1025px) {
  .dm-wrapper {
    padding-inline: var(--demo-spacing-40);

    &.-problem {
      padding-inline: 0;
    }
  }

  .dm-wrapper-sub {
    padding-inline: 0;
  }
}

.dm-side {
  position: relative;
}

/* 既存打消 */
.demo {
  #header {
    background-color: var(--demo-color-white);
  }

  .flex_ctaArea {
    margin-top: 0;
  }
}

/*
MARK: heading
*/
.dm-heading-plane {
  font-size: var(--demo-font-size-32);
  text-align: center;
}

.dm-heading-border {
  position: relative;
  padding-inline-start: 1em;
  margin-block: var(--demo-spacing-56) 1em;
  font-size: var(--demo-font-size-24);

  &::before {
    position: absolute;
    left: 0;
    width: 6px;
    height: 100%;
    content: "";
    background-image: linear-gradient(180deg, #54c5c7 0%, #3962ad 100%);
    border-radius: 100vmax;
  }
}

/*
MARK: button
*/
.demo .dm-button {
  display: grid;
  gap: 1em;
  text-align: center;

  a {
    width: 100%;
    height: auto;
    padding-block: 1em;
    margin: 0;
    font-size: inherit;
    line-height: inherit;

    &.btn.arrow:after {
      font-size: 1.4em;
    }
  }
}

/*
MARK: media-obj
*/
.dm-media-object {
  display: grid;
  gap: var(--demo-spacing-30);
}

@media (width > 769px) {
  .dm-media-object {
    grid-template-columns: auto 1fr;
  }
}

/*
MARK: fv
*/
.dm-fv {
  display: grid;
  gap: 0;
  margin-block-start: 80px;
}

.dm-fv__image {
  display: grid;
  align-items: end;
  justify-content: end;
  width: 100%;
  padding-block-end: var(--demo-spacing-20);
  padding-inline-end: var(--demo-spacing-40);
  background-image: linear-gradient(
      180deg,
      var(--demo-color-blue) 0%,
      var(--demo-color-white) 40%,
      var(--demo-color-blue) 40%,
      var(--demo-color-white) 100%
  );
}

.dm-fv__container {
  display: grid;
  align-content: center;
  padding-block: var(--demo-spacing-56);
  padding-inline: var(--demo-spacing-inline);
}

.dm-fv-catch {
  margin-block-end: calc(24 / 32 * 1em);
  font-size: var(--demo-font-size-32);
  line-height: 1.4;

  & > span {
    font-size: calc(48 / 32 * 1em);
  }
}

.dm-fv-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  rule: 1px solid var(--demo-color-light-gray);
  margin-block: var(--demo-spacing-30);
  line-height: 1.6;
}

.dm-fv-info__icon {
  margin-block-end: 0.5em;
  margin-inline: auto;
}

@media (width > 769px) {
  .dm-fv {
    margin-block-start: 100px;
  }

  .dm-fv__image {
    grid-area: 1 / 1 / 2 / 2;
    padding-block-start: var(--demo-spacing-64);

    img {
      width: calc(902 / 1440 * 100vw);
    }
  }

  .dm-fv__container {
    grid-area: 1 / 1 / 2 / 2;
    width: max(480px, 640 / 1440 * 100vw);
    padding-inline-start: calc(50 / 1440 * 100vw);
    background-image: linear-gradient(
      90deg,
      var(--demo-color-white) 0%,
      var(--demo-color-white) 84%,
      transparent 100%
    );
  }
}

/*
MARK: problem
*/
.dm-problem {
  display: block;
  margin-block-start: var(--demo-spacing-30);
}

/*
MARK: recommend
*/
.dm-recommend {
  padding: var(--demo-spacing-30);
  margin-block-end: var(--demo-spacing-30);
  color: var(--demo-color-navy);
  background-color: var(--demo-color-white);
  border-radius: var(--demo-spacing-10);
}

.dm-recommend__heading {
  margin-block-end: 0.5em;
  font-size: var(--demo-font-size-24);
}

.dm-recommend__item {
  display: flex;
  gap: 0.666em;
  align-items: baseline;

  & + .dm-recommend__item {
    margin-block-start: 0.4em;
  }
}

.dm-recommend__check {
  flex-shrink: 0;
  width: calc(20 / 16 * 1em);
  aspect-ratio: 1;
  fill: currentcolor;
  translate: 0 0.125lh;
}

/*
MARK: overview
*/
.dm-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(100%,180px),1fr));
  gap: var(--demo-spacing-30) var(--demo-spacing-20);
  margin-block-start: var(--demo-spacing-30);
  counter-reset: demoOverview;
}

.dm-overview__item {
  display: grid;
  gap: var(--demo-spacing-20);
  align-content: start;
}

.dm-overview__text {
  display: flex;
  gap: var(--demo-spacing-10);
  align-items: baseline;

  &::before {
    display: grid;
    flex-shrink: 0;
    place-content: center;
    width: calc(32 / 14 * 1em);
    aspect-ratio: 1;
    font-size: calc(14 / 16 * 1em);
    color: var(--demo-color-navy);
    content: counter(demoOverview);
    counter-increment: demoOverview;
    background-color: var(--demo-color-white);
    border-radius: 50%;
  }
}

/*
MARK: review
*/
.dm-review {
  margin-block: var(--demo-spacing-30);
}

.dm-review__label {
  position: relative;
  width: fit-content;
  padding: 0.25em 1em;
  margin-block-end: var(--demo-spacing-20);
  color: var(--demo-color-white);
  background-color: var(--demo-color-navy);
  border-radius: var(--demo-spacing-8);

  &::after {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 1em;
    width: var(--demo-spacing-20);
    aspect-ratio: 2 / 1;
    content: "";
    background-color: var(--demo-color-navy);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
}

@media (width > 769px) {
  .dm-review__image {
    width: min(285px, 285 / 768 * 100vw);
  }
}

/*
MARK: flow
*/
.dm-flow {
  position: relative;
  counter-reset: demoFlow;

  &::before {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    z-index: 1;
    width: 1px;
    margin: auto;
    content: "";
    background-color: var(--demo-color-navy);
  }
}

.dm-flow__item {
  position: relative;
  z-index: 2;
  padding: var(--demo-spacing-20);
  background-color: var(--demo-color-light-gray);

  & + .dm-flow__item {
    margin-block-start: var(--demo-spacing-20);
  }
}

.dm-flow__container {
  &::before {
    display: inline-block;
    padding-inline: 1em;
    font-weight: var(--demo-font-weight-bold);
    color: var(--demo-color-white);
    content: "STEP " counter(demoFlow, decimal-leading-zero);
    counter-increment: demoFlow;
    background-color: var(--demo-color-navy);
    border-radius: 100vmax;
  }
}

.dm-flow__heading {
  margin-block: var(--demo-spacing-10);
  font-size: var(--demo-font-size-18);
}

@media (width > 769px) {
  .dm-flow__thumb {
    width: min(200px, 200 / 768 * 100vw);
  }
}

/*
MARK: faq
*/
.dm-faq {
  border-block-start: 1px solid;
}

.dm-faq__container {
  display: grid;
  gap: calc(var(--demo-spacing-10) * 1.5);
  padding-block: var(--demo-spacing-20) var(--demo-spacing-30);
  border-block-end: 1px solid;
}

.dm-faq__term,
.dm-faq__answer {
  display: flex;
  gap: var(--demo-spacing-10);
  align-items: baseline;

  &::before {
    display: grid;
    flex-shrink: 0;
    place-content: center;
    width: var(--demo-spacing-40);
    aspect-ratio: 1;
    border: 1px solid var(--demo-color-navy);
    border-radius: 50%;
  }
}

.dm-faq__term {
  &::before {
    color: var(--demo-color-white);
    content: "Q";
    background-color: var(--demo-color-navy);
  }
}

.dm-faq__answer {
  &::before {
    content: "A";
  }
}

/*
MARK: form
*/
.dm-form {
  position: sticky;
  top:  0;
  padding-block: var(--demo-spacing-40);
  padding-inline: min(var(--demo-spacing-30), var(--demo-spacing-inline));
  background-color: var(--demo-color-white);
}

.dm-form-heading {
  margin-block-end: var(--demo-spacing-30);
}

.dm-shipping-address {
  margin-block-start: var(--demo-spacing-10);
  margin-inline-start: 1rem;
  font-size: 0.9em;
}

.dm-note {
  font-size: 0.75em;
}

@media (width > 1025px) {
  .dm-form {
    margin-block-start: calc(var(--demo-spacing-112) * 1.5 * -1);
    border-radius: 8px;
    box-shadow: 0 0 10px oklch(0% 0 0deg / 10%);
  }
}

/* 既存CSS上書き */
.dm-main {
  .inner02 {
    max-width: 460px;
  }
}

.dm-container {
  .inner02 {
    width: 100%;

    & > .dm-note:last-child {
      margin-block-start: var(--demo-spacing-40);
    }
  }

  .contact {
    input[type="date"] {
      margin-block-start: var(--demo-spacing-10);
      color-scheme: light;
    }

    textarea {
      height: calc(5em * 1.8 + 1.2em);
    }

    .form-group {
      padding: 0;
      border-width: 0;

      & + .form-group {
        margin-block-start: var(--demo-spacing-30);
      }
    }

    .form_flex {
      flex-direction: column;

      .ask {
        gap: 1em;
        justify-content: flex-start;
        min-width: 100%;
        padding-block-start: 0;
        padding-inline: 0;
      }
    }

    .box02 {
      min-width: 100%;

      p {
        margin-block-start: var(--demo-spacing-10);
      }
    }

    .btn {
      width: 100%;
      margin: 0;
      font-size: inherit;
    }

    /* cf7 */
    .wpcf7-list-item {
      display: block;
      margin: 0;

      & + .wpcf7-list-item {
        margin-block-start: 0.2em;
      }
    }
  }
}


/*
MARK: Utility
*/
.u-dm-width-100 {
  width: 100%;
}

.u-dm-radius {
  border-radius: var(--demo-spacing-8);
}

.u-dm-bold {
  font-weight: var(--demo-font-weight-bold);
}

.u-dm-center {
  text-align: center;
}

.u-dm-disc {
  & > li {
    margin-inline-start: 1.5em;
    list-style-type: disc;

    & + li {
      margin-block-start: 0.333em;
    }
  }
}

.u-dm-margin-b-s {
  margin-block-start: 1em;
}