@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap');

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  border: 0;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

input[type="submit"],
input[type="button"] {
  -webkit-box-sizing: content-box;
  box-sizing: border-box;
  -webkit-appearance: button;
  appearance: button;
  cursor: pointer;
  border: none;
  border-radius: 0;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}

input[type="submit"]:focus,
input[type="button"]:focus {
  outline-offset: -2px;
}

* {
  color: #000;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-display: swap;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.06em;
}

html,
body {
  max-width: 100vw;
  overflow: clip visible;
  background-color: #ffffff;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  cursor: pointer;
}

button {
  cursor: pointer;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
}

.highlight {
  font-weight: 700;
  background:linear-gradient(transparent 50%, #ff6 50%);
}

.header {
  width: 100%;
  background-color: #ffffff;
  height: 17.436vw;

  .header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 4.103vw;

    > a {
      display: block;
    }

    .hakuyosha-logo {
      height: 9.128vw;

      img {
        display: block;
        height: 100%;
      }
    }

    .suloop-logo {
      height: 8.923vw;

      img {
        display: block;
        height: 100%;
      }
    }

    > img {
      height: 7.205vw;
      display: block;
    }
  }
}

.hero {
  width: 100vw;
  height: auto;
  margin: 0 auto;

  img {
    width: 100%;
    height: auto;
    display: block;
  }
}

.case-wrapper {
  width: 100vw;
  margin: 0 auto;

  .issue__inner {
    width: 100%;
    height: auto;
    margin-top: -15.385vw;
    background-color: #D7EBFB;
    padding-bottom: 14.103vw;
    display: flex;
    flex-direction: column;
    row-gap: 6.154vw;

    .issue__title {
      img {
        width: 96.154vw;
        margin: 0 auto;
        height: auto;
        display: block;
      }
    }

    .issue__list {
      width: 91.795vw;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      row-gap: 2.051vw;
      align-items: flex-start;

      li {
        display: flex;
        column-gap: 1.026vw;
        align-items: flex-start;
        font-size: 4.103vw;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.5;
        color: #041627;

        img {
          width: 2.385vw;
          height: auto;
          display: block;
          margin-top: 2.051vw;
        }
      }
    }
  }

  .survey_results {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    row-gap: 6.41vw;
    padding-bottom: 1.282vw;

    > img {
      width: 100%;
      height: auto;
      display: block;
      margin-top: -6.41vw;
    }

    .survey_results__text {
      width: 91.795vw;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      row-gap: 4.103vw;

      > p {
        font-size: 3.59vw;
        line-height: 1.5;

        .asterisk {
          font-size: 2.051vw;
          vertical-align: super;
        }
      }

      > div {
        display: flex;
        column-gap: 1.538vw;
        align-items: flex-start;

        * {
          font-size: 2.821vw;
          line-height: 1.5;
        }
      }
    }
  }

  .solution {
    width: 100%;
    background-color: #5E83C8;
    padding-bottom: 10.256vw;

    > img {
      width: 100%;
      height: auto;
      display: block;
      position: relative;
      top: -0.256vw;
    }

    > div {
      width: 90.513vw;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      row-gap: 5.128vw;

      > img {
        width: 100%;
        height: auto;
        display: block;
      }

      > div {
        display: flex;
        column-gap: 3.59vw;
        align-items: flex-start;

        > img {
          width: 18.462vw;
          height: auto;
          display: block;
        }

        > p {
          font-size: 3.846vw;
          line-height: 1.5;
          font-weight: 500;
          letter-spacing: 0.05em;
          color: #FFFFFF;
        }
      }
    }
  }
}

.trial {
  padding: 10.256vw 0;
  .partner-branding {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 4.103vw;

    > a {
      display: block;
    }

    .hakuyosha-logo {
      height: 9.128vw;

      img {
        display: block;
        height: 100%;
      }
    }

    .suloop-logo {
      height: 8.923vw;

      img {
        display: block;
        height: 100%;
      }
    }

    > img {
      height: 7.205vw;
      display: block;
    }
  }

  .trial_text_img {
    width: 91.282vw;
    height: auto;
    display: block;
    padding: 6.154vw 0;
    margin: 0 auto;
  }

  .trial_coupon {
    width: 91.795vw;
    margin: 40px auto 0;
    background-color: #FBF7EA;
    border: 2px solid #DEB94A;
    border-radius: 4.103vw;
    padding: 0 0 6.154vw;

    > img {
      width: 49.231vw;
      height: auto;
      display: block;
      margin: -42px auto 0;
    }

    .trial_coupon__usage {
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 2.051vw;
      padding: 5.128vw 0;

      > p {
        font-size: 5.128vw;
        border-radius: 5.128vw;
        padding: 1.282vw 0;
        width: 21.795vw;
        text-align: center;
        color: #FFFFFF;
        font-weight: 500;

        &:first-of-type {
          background-color: #004DA0;
        }

        &:last-of-type {
          background-color: #3782D4;
        }
      }

      > span {
        font-size: 5.128vw;
        font-weight: 500;
        color: #000;
      }
    }

    > p {
      font-size: 5.128vw;
      text-align: center;
      font-weight: 700;
      color: #000;
      padding-bottom: 6.154vw;
    }

    .trial_coupon__details {
      display: flex;
      flex-direction: column;
      row-gap: 7.179vw;
      width: 83.59vw;
      margin: 0 auto;

      > div {
        display: flex;
        flex-direction: column;
        row-gap: 4.103vw;
        align-items: center;

        > img {
          width: 100%;
          height: auto;
          display: block;
        }

        > div {
          display: flex;
          column-gap: 1.282vw;
          align-items: center;
          border-radius: 5.128vw;
          padding: 2.051vw 0;
          width: 51.282vw;
          justify-content: center;
          margin-top: -8.718vw;

          > p {
            font-size: 5.128vw;
            color: #FFFFFF;
            font-weight: 500;
          }

          > img {
            width: 8.462vw;
            height: auto;
            display: block;
          }
        }

        > p {
          font-size: 3.846vw;
          text-align: center;
          font-weight: 700;
          color: #000;
        }

        > a {
          font-size: 3.333vw;
          text-align: center;
          font-weight: 700;
          color: #3782D4;
          border-bottom: 1px solid #3782D4;
          display: block;
        }
      }

      .trial_coupon__details_delivery .delivery_title {
        background-color: #004DA0;
      }

      .trial_coupon__details_delivery .visit_title {
        background-color: #3782D4;
      }
    }
  }
}

.history {
  background-color: #FFFFFF;
  width: 100vw;
  margin: 0 auto;

  .history_title {
    background-image: url("../images/history_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 48.718vw;

    > img {
      width: 80.256vw;
      margin: 0 auto;
      display: block;
      height: auto;

      &:first-of-type {
        padding: 11.205vw 0 5.128vw;
      }
    }
  }

  .history_img {
    width: 100vw;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    row-gap: 10.256vw;

    > img {
      height: auto;
      display: block;

      &:first-of-type {
        width: 61.795vw;
        margin: 0 auto;
      }

      &:last-of-type {
        width: 100%;
      }
    }
  }

  .secret-of-beauty {
    width: 91.795vw;
    margin: 0 auto;
    padding: 6.154vw 4.103vw;
    background-color: #D7EBFB;

    > p {
      font-size: 3.59vw;
      line-height: 1.5;
      color: #041627;
    }

    > h2 {
      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }

    > div {
      display: flex;
      flex-direction: column;
      row-gap: 10.256vw;
      align-items: center;
      width: 100%;
      padding: 10.256vw 0;

      > div {
        display: flex;
        width: 100%;
        flex-direction: column;
        background-color: #FFFFFF;
        border-radius: 10.256vw 10.256vw 0 0 ;

        > h3 {
          width: 42.051vw;
          margin: -30px auto 0;

          img {
            width: 100%;
            height: auto;
            display: block;
          }
        }

        > h4 {
          margin: 0 auto;
          padding: 3.846vw 0 5.128vw;

          img {
            width: 100%;
            height: auto;
            display: block;
          }
        }

        > img {
          width: 83.846vw;
          margin: 0 auto;
          height: auto;
          display: block;
        }

        > p {
          font-size: 3.333vw;
          line-height: 1.5;
          color: #041627;
          padding: 5.128vw 4.103vw;
        }
      }

      .secret-of-beauty_step1 {
        h4 {
          width: 48.205vw;
        }
      }

      .secret-of-beauty_step2 {
        h4 {
          width: 79.231vw;
        }
		
		> p {
        font-size: 3.59vw;
        line-height: 1.5;

        .asterisk {
          font-size: 2.051vw;
          vertical-align: super;
        }
      }

       > div {
        display: flex;
        column-gap: 1.538vw;
        align-items: flex-start;
		padding: 0 4.103vw 5.128vw;

         * {
          font-size: 2.821vw;
          line-height: 1.5;
          }
        }
      }
    }
  }
}

.delivery_flow {
  background-color: #FFFFFF;
  border-radius: 12.821vw 12.821vw 0 0;
  scroll-margin-top: 12.821vw;

  .delivery_flow__top_bg {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    top: -0.256vw;
  }

  .delivery_flow__white_bear-yosha {
    width: 19.231vw;
    height: auto;
    display: block;
    margin: -60px auto 20px;
    position: relative;
    z-index: 1;
  }

  > h2 {
    width: 76.923vw;
    margin: 0 auto;

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  ul {
    width: 91.795vw;
    margin: 24px auto 40px;
    display: flex;
    flex-direction: column;
    row-gap: 7.692vw;
    background-image: url("../images/delivery_flow_bg.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    li:not(:nth-of-type(4)) {
      display: flex;
      column-gap: 4.103vw;
      align-items: center;
      background-color: #D7EBFB;
      border-radius: 2.564vw;
      padding: 2.564vw;

      > img {
        width: 18.974vw;
        height: auto;
        display: block;
      }

      > div {
        display: flex;
        flex-direction: column;
        row-gap: 2.051vw;

        > h3 {
          font-size: 4.615vw;
          color: #004DA0;
          font-weight: 700;
        }

        > p {
          font-size: 3.077vw;
          line-height: 1.5;
          color: #041627;
        }

        .delivery_flow_contact {
          background-color: #3782D4;
          border-radius: 5.333vw;
          font-size: 3.2vw;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 2.133vw 0;
          width: 70%;
          text-align: center;
          color: #FFFFFF;
          font-weight: 700;

          img {
            width: 4.267vw;
            margin-left: 1.067vw;
          }
        }
      }
    }

    li:nth-of-type(4) {
      width: 100%;

      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }
  }
}

.usage-status {
  display: flex;
  flex-direction: column;
  row-gap: 6.154vw;
  width: 100vw;
  margin: 0 auto;
  padding-bottom: 7.692vw;

  > img {
    width: 100%;
    height: auto;
    display: block;
  }

  > div {
    background-image: url("../images/usage-status_bg.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
/*     width: 76.923vw; */
/*     margin: 0 auto; */
    display: flex;
    flex-direction: column;
    row-gap: 2.051vw;

    > p {
      font-size: 4.103vw;
      line-height: 1.5;
      font-weight: 700;
      text-align: center;
		
	  .asterisk {
       	font-size: 2.051vw;
       	vertical-align: super;
        }
    }

    > h2 {
      width: 74.103vw;
      margin: 0 auto;

      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }

    > span {
      font-size: 3.077vw;
      text-align: right;
      width: 76.923vw;
	  margin: 0 auto;
    }
  }
}

.sustainable {
  width: 100vw;
  margin: 0 auto;
  background-color: #D7EBFB;

  .sustainable__top_bg {
    transform: rotate(180deg);
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    top: -0.256vw;
  }

  .sustainable__white_bear-yosha {
    width: 16.667vw;
    height: auto;
    display: block;
    margin: -30px auto 20px;
    position: relative;
    z-index: 1;
  }

  > h2 {
    width: 72.308vw;
    margin: 0 auto;

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  .sustainable__img {
    width: 53.333vw;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 6.154vw 0;
  }

  > p {
    font-size: 3.59vw;
    line-height: 1.5;
    color: #041627;
    width: 91.795vw;
    margin: 0 auto;
    padding-bottom: 10.256vw;
  }
}

.question {
  width: 100vw;
  margin: 0 auto;
  background-color: #5E83C8;
  padding-bottom: 10.256vw;

  .question__top_bg {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    top: -0.256vw;
  }

  .question__white_bear-yosha {
    width: 18.974vw;
    height: auto;
    display: block;
    margin: -30px auto 20px;
    position: relative;
    z-index: 1;
  }

  > h2 {
    width: 38.974vw;
    margin: 0 auto;

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  > ul {
    display: flex;
    flex-direction: column;
    padding-top: 6.154vw;
    row-gap: 4.103vw;
    width: 91.795vw;
    margin: 0 auto 0;

    li {
      display: flex;
      flex-direction: column;
      row-gap: 2.051vw;
      padding: 4.103vw;
      background-color: #FFFFFF;
      border-radius: 2.564vw;

      h3 {
        display: flex;
        align-items: center;
        column-gap: 2.051vw;
        font-size: 3.846vw;
        color: #041627;
        font-weight: 700;
        line-height: 1.5;

        img {
          width: 5.385vw;
          height: auto;
          display: block;
        }
      }

      p {
        display: flex;
        align-items: center;
        column-gap: 2.051vw;
        font-size: 3.333vw;
        color: #041627;
        line-height: 1.5;

        img {
          width: 5.128vw;
          height: auto;
          display: block;
        }
      }
    }
  }
}

.footer {
  width: 100%;
  background-color: #fff;
  padding: 10.256vw 0 25.769vw;

  .footer_inner {
    width: 91.795vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    row-gap: 10.256vw;

    > a {
      display: block;
      width: 61.795vw;
      margin: 0 auto;

      > img {
        height: auto;
        display: block;
        width: 100%;
      }
    }

    > div {
      display: flex;
      flex-direction: column;
      row-gap: 3.333vw;
      align-items: center;

      .contact_coupon {
        background-color: #3782D4;
        border-radius: 12.821vw;
        width: 100%;
        box-sizing: border-box;
        padding: 4.103vw 6.154vw;
        font-size: 3.846vw;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;

        img {
          width: 8.205vw;
          height: auto;
          display: block;
        }
      }
    }
  }
}

.cta_coupon_acquire {
  z-index: 10;
  position: fixed;
  bottom: 3.846vw;
  left: 50%;
  transform: translateX(-50%);
  background-color: #004DA0;
  border-radius: 12.821vw;
  width: 91.795vw;
  box-sizing: border-box;
  padding: 4.103vw 6.154vw;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 2.564vw;

  img {
    height: auto;
    display: block;

    &:first-of-type {
      width: 19.231vw;
    }

    &:last-of-type {
      width: 48.205vw;
    }
  }
}

.delivery_flow_contact {
  background-color: #3782D4;
  border-radius: 5.333vw;
  font-size: 3.2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.133vw 0;
  width: 70%;
  text-align: center;
  color: #FFFFFF;
  font-weight: 700;
    img {
      width: 4.267vw;
      margin-left: 1.067vw;
    }
  }