* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  body {
    font-family: "Noto Sans JP", sans-serif;
    background: #fff;
  }

  .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
  
  :root {
    --toptext-top: 0%;
    --toptext-left: 40%;
    --toptext-w: 75%;
    --toptext-h: auto;
  
    --h1-top: 25%;
    --h1-left: 40%;
    --h1-w: 70%;
    --h1-h: auto;
  
    --ribbon-top: 50%;
    --ribbon-left: 50%;
    --ribbon-w: 100%;
    --ribbon-h: auto;
  
    --beforeafter-top: 68%;
    --beforeafter-left: 50%;
    --beforeafter-w: 100%;
    --beforeafter-h: auto;
  
    --second-h2-top: 6%;
    --second-h2-left: 50%;
    --second-h2-w: 70%;
    --second-h2-h: auto;
  
    --second-text-top: 55%;
    --second-text-left: 50%;
    --second-text-w: 90%;
    --second-text-h: auto;
  
    --new-h2-top: 1%;
    --new-h2-left: 47.5%;
    --new-h2-w: 95%;
    --new-h2-h: auto;
  
    --new-text-top: 8%;
    --new-text-left: 50%;
    --new-text-w: 85%;
    --new-text-h: auto;
  
    --new-back-top: 0%;
    --new-back-left: 50%;
    --new-back-w: 100%;
    --new-back-h: auto;
  
    --service-01-top: 21%;
    --service-01-left: 50%;
    --service-01-w: 100%;
    --service-01-h: auto;
  
    --service-02-top: 42%;
    --service-02-left: 50%;
    --service-02-w: 100%;
    --service-02-h: auto;
  
    --service-03-top: 62%;
    --service-03-left: 50%;
    --service-03-w: 100%;
    --service-03-h: auto;
  
    --service-04-top: 84.2%;
    --service-04-left: 50%;
    --service-04-w: 100%;
    --service-04-h: auto;
  
    --flow-h2-top: 2%;
    --flow-h2-left: 50%;
    --flow-h2-w: 80%;
    --flow-h2-h: auto;
  
    --flow-step01-top: 7.5%;
    --flow-step01-left: 50%;
    --flow-step01-w: 92%;
    --flow-step01-h: auto;
  
    --flow-step02-top: 26%;
    --flow-step02-left: 50%;
    --flow-step02-w: 92%;
    --flow-step02-h: auto;
  
    --flow-step03-top: 46%;
    --flow-step03-left: 50%;
    --flow-step03-w: 92%;
    --flow-step03-h: auto;
  
    --flow-step04-top: 66%;
    --flow-step04-left: 50%;
    --flow-step04-w: 92%;
    --flow-step04-h: auto;
  
    --flow-text-top: 81%;
    --flow-text-left: 50%;
    --flow-text-w: 100%;
    --flow-text-h: auto;
  
    --beforeafter-h2-top: 3%;
    --beforeafter-h2-left: 50%;
    --beforeafter-h2-w: 88%;
    --beforeafter-h2-h: auto;
  
    --beforeafter-text-top: 93%;
    --beforeafter-text-left: 50%;
    --beforeafter-text-w: 92%;
    --beforeafter-text-h: auto;
  
    --beforeafter-01-top: 15%;
    --beforeafter-01-left: 50%;
    --beforeafter-01-w: 92%;
    --beforeafter-01-h: auto;
  
    --beforeafter-02-top: 55%;
    --beforeafter-02-left: 50%;
    --beforeafter-02-w: 92%;
    --beforeafter-02-h: auto;
  
    --compare-h2-top: 0%;
    --compare-h2-left: 50%;
    --compare-h2-w: 100%;
    --compare-h2-h: auto;
  
    --compare-table-top: 26%;
    --compare-table-w: 850px;
    --compare-table-h: auto;
  
    --compare-text-top: 20%;
    --compare-text-left: 50%;
    --compare-text-w: 100%;
    --compare-text-h: auto;
  
    --campaign-h2-top: 13%;
    --campaign-h2-left: 50%;
    --campaign-h2-w: 100%;
    --campaign-h2-h: auto;
  
    --campaign-text-top: 65%;
    --campaign-text-left: 50%;
    --campaign-text-w: 100%;
    --campaign-text-h: auto;
  
    --campaign-h3-top: 35%;
    --campaign-h3-left: 50%;
    --campaign-h3-w: 85%;
    --campaign-h3-h: auto;
  
    --campaign-bg-overlap: -63px;
    --campaign-cta-gap: 16px;
  
    --campaign-cta1-top: 80%;
    --campaign-cta1-left: 50%;
    --campaign-cta1-w: 100%;
    --campaign-cta1-h: auto;
  
    --campaign-cta2-top: 94%;
    --campaign-cta2-left: 50%;
    --campaign-cta2-w: 100%;
    --campaign-cta2-h: auto;
  
    --faq-h2-top: 0%;
    --faq-h2-left: 50%;
    --faq-h2-w: 100%;
    --faq-h2-h: auto;
  
    --faq-qa-top: 23%;
    --faq-qa-left: 50%;
    --faq-qa-w: 90%;
    --faq-qa-h: auto;
  }
  
  .fv {
    position: relative;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  @media (min-width: 376px) {
    .fv {
      max-width: 430px;
    }
  }
  
  .fv-inner {
    position: relative;
  }
  
  .fv-bg {
    width: 100%;
  }
  
  .fv-toptext,
  .fv-ribbon,
  .fv-h1,
  .fv-beforeafter {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
  }
  
  .fv-toptext {
    top: var(--toptext-top);
    left: var(--toptext-left);
    width: var(--toptext-w);
    height: var(--toptext-h);
  }
  
  .fv-h1 {
    top: var(--h1-top);
    left: var(--h1-left);
    width: var(--h1-w);
    height: var(--h1-h);
  }
  
  .fv-ribbon {
    top: var(--ribbon-top);
    left: var(--ribbon-left);
    width: var(--ribbon-w);
    height: var(--ribbon-h);
  }
  
  .fv-beforeafter {
    top: var(--beforeafter-top);
    left: var(--beforeafter-left);
    width: var(--beforeafter-w);
    height: var(--beforeafter-h);
  }
  
  .fv-beforeafter img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .cta {
    background: #fff;
    padding: 10px 10px;
    text-align: center;
  }
  
  .cta-inner {
    max-width: 375px;
    margin: 0 auto;
  }
  
  @media (min-width: 376px) {
    .cta-inner {
      max-width: 430px;
    }
  }
  
  .cta-btn {
    display: block;
    margin-bottom: 16px;
  }
  
  .cta-btn img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .second {
    position: relative;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  @media (min-width: 376px) {
    .second {
      max-width: 430px;
    }
  }
  
  .second-inner {
    position: relative;
  }
  
  .second-bg {
    width: 100%;
  }
  
  .second-h2,
  .second-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
  }
  
  .second-h2 {
    top: var(--second-h2-top);
    left: var(--second-h2-left);
    width: var(--second-h2-w);
    height: var(--second-h2-h);
  }
  
  .second-text {
    top: var(--second-text-top);
    left: var(--second-text-left);
    width: var(--second-text-w);
    height: var(--second-text-h);
  }
  
  .new {
    position: relative;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  @media (min-width: 376px) {
    .new {
      max-width: 430px;
    }
  }
  
  .new-inner {
    position: relative;
  }
  
  .new-bg {
    width: 100%;
  }
  
  .new-h2,
  .new-text,
  .new-back {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
  }
  
  .new-h2 {
    top: var(--new-h2-top);
    left: var(--new-h2-left);
    width: var(--new-h2-w);
    height: var(--new-h2-h);
    z-index: 20;
  }
  
  .new-text {
    top: var(--new-text-top);
    left: var(--new-text-left);
    width: var(--new-text-w);
    height: var(--new-text-h);
    z-index: 20;
  }
  
  .new-back {
    top: var(--new-back-top);
    left: var(--new-back-left);
    width: var(--new-back-w);
    height: var(--new-back-h);
    z-index: 10;
  }
  
  .service-inner {
    position: absolute;
    inset: 0;
    max-width: inherit;
    margin: 0 auto;
    pointer-events: none;
  }
  
  .service-01,
  .service-02,
  .service-03,
  .service-04 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
  }
  
  .service-01 {
    top: var(--service-01-top);
    left: var(--service-01-left);
    width: var(--service-01-w);
    height: var(--service-01-h);
    z-index: 9;
  }
  
  .service-02 {
    top: var(--service-02-top);
    left: var(--service-02-left);
    width: var(--service-02-w);
    height: var(--service-02-h);
    z-index: 8;
  }
  
  .service-03 {
    top: var(--service-03-top);
    left: var(--service-03-left);
    width: var(--service-03-w);
    height: var(--service-03-h);
    z-index: 7;
  }
  
  .service-04 {
    top: var(--service-04-top);
    left: var(--service-04-left);
    width: var(--service-04-w);
    height: var(--service-04-h);
    z-index: 6;
  }
  
  .flow {
    position: relative;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  @media (min-width: 376px) {
    .flow {
      max-width: 430px;
    }
  }
  
  .flow-inner {
    position: relative;
  }
  
  .flow-bg01,
  .flow-bg02 {
    width: 100%;
    display: block;
  }
  
  .flow-bg01 {
    position: relative;
    z-index: 1;
  }
  
  .flow-bg02 {
    position: relative;
    z-index: 0;
    margin-top: -85px;
  }
  
  .flow-h2,
  .flow-step01,
  .flow-step02,
  .flow-step03,
  .flow-step04,
  .flow-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 2;
  }
  
  .flow-h2 {
    top: var(--flow-h2-top);
    width: var(--flow-h2-w);
    height: var(--flow-h2-h);
  }
  
  .flow-step01 {
    top: var(--flow-step01-top);
    width: var(--flow-step01-w);
    height: var(--flow-step01-h);
  }
  
  .flow-step02 {
    top: var(--flow-step02-top);
    width: var(--flow-step02-w);
    height: var(--flow-step02-h);
  }
  
  .flow-step03 {
    top: var(--flow-step03-top);
    width: var(--flow-step03-w);
    height: var(--flow-step03-h);
  }
  
  .flow-step04 {
    top: var(--flow-step04-top);
    width: var(--flow-step04-w);
    height: var(--flow-step04-h);
  }
  
  .flow-text {
    top: var(--flow-text-top);
    width: var(--flow-text-w);
    height: var(--flow-text-h);
  }
  
  .beforeafter {
    position: relative;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  @media (min-width: 376px) {
    .beforeafter {
      max-width: 430px;
    }
  }
  
  .beforeafter-inner {
    position: relative;
  }
  
  .beforeafter-bg {
    width: 100%;
  }
  
  .beforeafter-h2,
  .beforeafter-text,
  .beforeafter-01,
  .beforeafter-02 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 2;
  }
  
  .beforeafter-h2 {
    top: var(--beforeafter-h2-top);
    left: var(--beforeafter-h2-left);
    width: var(--beforeafter-h2-w);
    height: var(--beforeafter-h2-h);
  }
  
  .beforeafter-text {
    top: var(--beforeafter-text-top);
    left: var(--beforeafter-text-left);
    width: var(--beforeafter-text-w);
    height: var(--beforeafter-text-h);
  }
  
  .beforeafter-01 {
    top: var(--beforeafter-01-top);
    left: var(--beforeafter-01-left);
    width: var(--beforeafter-01-w);
    height: var(--beforeafter-01-h);
    z-index: 3;
  }
  
  .beforeafter-02 {
    top: var(--beforeafter-02-top);
    left: var(--beforeafter-02-left);
    width: var(--beforeafter-02-w);
    height: var(--beforeafter-02-h);
    z-index: 1;
  }
  
  .compare {
    position: relative;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  @media (min-width: 376px) {
    .compare {
      max-width: 430px;
    }
  }
  
  .compare-inner {
    position: relative;
    min-height: var(--compare-min-h);
  }
  
  .compare-bg {
    width: 100%;
  }
  
  .compare-h2,
  .compare-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 2;
  }
  
  .compare-h2 {
    top: var(--compare-h2-top);
    left: var(--compare-h2-left);
    width: var(--compare-h2-w);
    height: var(--compare-h2-h);
  }
  
  .compare-text {
    top: var(--compare-text-top);
    left: var(--compare-text-left);
    width: var(--compare-text-w);
    height: var(--compare-text-h);
  }
  
  .compare-table-scroller {
    position: absolute;
    top: var(--compare-table-top);
    left: 0;
    right: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 2;
    padding-bottom: 8px;
  }
  
  .compare-table {
    display: block;
    width: var(--compare-table-w);
    height: auto;
    max-width: none;
  }
  
  .compare {
    position: relative;
    z-index: 0;
  }
  
  :root {
    --campaign-bg-overlap: -63px;
  }
  
  @media (min-width: 376px) {
    :root {
      --campaign-bg-overlap: -75px;
    }
  }
  
  .campaign {
    position: relative;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    overflow: visible;
    z-index: 5;
  }
  
  @media (min-width: 376px) {
    .campaign {
      max-width: 430px;
    }
  }
  
  .campaign-inner {
    position: relative;
  }
  
  .campaign-bg {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
    margin-top: var(--campaign-bg-overlap);
  }
  
  .campaign-h2 {
    position: absolute;
    top: calc(var(--campaign-h2-top) + var(--campaign-bg-overlap));
    left: var(--campaign-h2-left);
    width: var(--campaign-h2-w);
    height: var(--campaign-h2-h);
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 2;
  }
  
  .campaign-text {
    position: absolute;
    top: calc(var(--campaign-text-top) + var(--campaign-bg-overlap));
    left: var(--campaign-text-left);
    width: var(--campaign-text-w);
    height: var(--campaign-text-h);
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 2;
  }
  
  .campaign-h3 {
    position: absolute;
    top: calc(var(--campaign-h3-top) + var(--campaign-bg-overlap));
    left: var(--campaign-h3-left);
    width: var(--campaign-h3-w);
    height: var(--campaign-h3-h);
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 2;
  }
  
  .campaign-cta-inner {
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    z-index: 3;
    pointer-events: none;
  }
  
  .campaign-cta-inner .campaigncta-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    pointer-events: auto;
  }
  
  .campaign-cta-inner .campaigncta-btn:nth-child(1) {
    top: calc(var(--campaign-cta1-top) + var(--campaign-bg-overlap));
    left: var(--campaign-cta1-left);
    width: var(--campaign-cta1-w);
    height: var(--campaign-cta1-h);
  }
  
  .campaign-cta-inner .campaigncta-btn:nth-child(2) {
    top: calc(var(--campaign-cta2-top) + var(--campaign-bg-overlap));
    left: var(--campaign-cta2-left);
    width: var(--campaign-cta2-w);
    height: var(--campaign-cta2-h);
  }
  
  .campaign-cta-inner .campaigncta-btn img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .campaigncta-btn img {
    padding: 10px;
  }

  .faq {
    position: relative;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  @media (min-width: 376px) {
    .faq {
      max-width: 430px;
    }
  }
  
  .faq-inner {
    position: relative;
  }
  
  .faq-bg {
    width: 100%;
  }
  
  .faq-h2,
  .faq-qa {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 2;
  }
  
  .faq-h2 {
    top: var(--faq-h2-top);
    left: var(--faq-h2-left);
    width: var(--faq-h2-w);
    height: var(--faq-h2-h);
  }
  
  .faq-qa {
    top: var(--faq-qa-top);
    left: var(--faq-qa-left);
    width: var(--faq-qa-w);
    height: var(--faq-qa-h);
  }
  
  .footer {
    position: relative;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  @media (min-width: 376px) {
    .footer {
      max-width: 430px;
    }
  }
  
  .footer-inner {
    position: relative;
  }
  
  .footer-img {
    width: 100%;
    display: block;
    height: auto;
  }