.dermacept-line {
  padding-bottom: 23.4vw; }

.fv-container .fv-inner {
  position: relative; }

.dermacept-line .sec-lead {
  padding-bottom: 11.7vw; }

.dermacept-line .line-lead-box {
  text-align: center;
  padding-top: 13vw;
  padding-bottom: 5.2vw;
  width: 71vw;
  display: block;
  margin: 0 auto;
  font-size: calc(30 * 100vw / 750);
  font-weight: bold; }
  .dermacept-line .line-lead-box span {
    color: #06c655; }

.dermacept-line .line-btn-box {
  margin-bottom: 13vw; }

.dermacept-line .coupon {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5%; }

.dermacept-line .kome {
  font-size: calc(18 * 100vw / 750); }

.dermacept-line .benefits-bg {
  background-color: #e6edeb;
  padding-top: 10.4vw;
  padding-bottom: 10.4vw; }

.dermacept-line .line-howto {
  margin-top: 15.6vw;
  margin-bottom: 10.4vw; }
  .dermacept-line .line-howto .line-howto__ttl {
    background: #00ad62;
    text-align: center;
    color: #ffffff;
    font-size: 3.90625vw;
    letter-spacing: 0.04em;
    line-height: 1.6;
    font-weight: 600;
    padding: 0.5em 1em;
    position: relative; }
    .dermacept-line .line-howto .line-howto__ttl span {
      font-size: 140%;
      color: #ffffff; }
    .dermacept-line .line-howto .line-howto__ttl:after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      bottom: -2.5vw;
      width: 0;
      height: 0;
      border-style: solid;
      border-right: 2vw solid transparent;
      border-left: 2vw solid transparent;
      border-top: 3vw solid #00ad62;
      border-bottom: 0; }
  .dermacept-line .line-howto .line-howto__list {
    padding-top: 18.2vw;
    padding-bottom: 8vw;
    padding-left: 3.9vw;
    padding-right: 3.9vw;
    background: #f3f2ee;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(235 * 100vw / 750); }
    .dermacept-line .line-howto .line-howto__list li {
      text-align: center;
      background: #ffffff;
      border-radius: calc(20 * 100vw / 750);
      padding-top: 10.4vw;
      padding-bottom: 10.4vw;
      padding-left: 3.9vw;
      padding-right: 3.9vw;
      position: relative; }
      .dermacept-line .line-howto .line-howto__list li::before {
        content: "";
        display: block;
        position: absolute;
        top: -10vw;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        background: #ffffff;
        width: calc(200 * 100vw / 750);
        height: calc(200 * 100vw / 750);
        border-radius: 100000px;
        z-index: 1; }
      .dermacept-line .line-howto .line-howto__list li .line-howto__list__step {
        position: absolute;
        top: -6vw;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        z-index: 3;
        width: calc(66 * 100vw / 750); }
      .dermacept-line .line-howto .line-howto__list li:nth-of-type(2) .line-howto__list__step {
        width: calc(86 * 100vw / 750); }
      .dermacept-line .line-howto .line-howto__list li:nth-of-type(3) .line-howto__list__step {
        width: calc(84 * 100vw / 750); }
      .dermacept-line .line-howto .line-howto__list li:nth-of-type(4) .line-howto__list__step {
        width: calc(87 * 100vw / 750); }
      .dermacept-line .line-howto .line-howto__list li:nth-of-type(5) .line-howto__list__step {
        width: calc(83 * 100vw / 750); }
      .dermacept-line .line-howto .line-howto__list li .line-howto__list__ttl {
        font-size: calc(48 * 100vw / 750);
        font-weight: bold;
        border-bottom: 2px solid #00ad62;
        position: relative;
        z-index: 2;
        padding-bottom: 0.3em;
        margin-bottom: 1em; }
      .dermacept-line .line-howto .line-howto__list li .line-howto__list__kome {
        font-size: calc(18 * 100vw / 750); }
      .dermacept-line .line-howto .line-howto__list li .line-howto__list__txt {
        font-size: calc(26 * 100vw / 750);
        margin-bottom: 2em; }
        .dermacept-line .line-howto .line-howto__list li .line-howto__list__txt.tl {
          text-align: left; }
        .dermacept-line .line-howto .line-howto__list li .line-howto__list__txt .strong {
          font-weight: bold;
          font-size: calc(28 * 100vw / 750); }
      .dermacept-line .line-howto .line-howto__list li .line-btn-box {
        margin-top: 5vw;
        margin-bottom: 0; }
      .dermacept-line .line-howto .line-howto__list li .line-btn-box a {
        width: 100%; }
      .dermacept-line .line-howto .line-howto__list li .fc-brown {
        color: #cfa972; }
      .dermacept-line .line-howto .line-howto__list li .tu-yellow {
        font-weight: bold;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(60%, yellow));
        background: linear-gradient(transparent 70%, yellow 60%); }
      .dermacept-line .line-howto .line-howto__list li::after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        bottom: -14vw;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        width: calc(96 * 100vw / 750);
        height: calc(41 * 100vw / 750);
        background-image: url(../../images/dermacept/line/arrow.png);
        background-size: cover;
        background-repeat: no-repeat; }
      .dermacept-line .line-howto .line-howto__list li:last-of-type {
        margin-bottom: 0; }
        .dermacept-line .line-howto .line-howto__list li:last-of-type:after {
          display: none; }
      .dermacept-line .line-howto .line-howto__list li .step5-img {
        width: 65%;
        margin-left: auto;
        margin-right: auto; }
  .dermacept-line .line-howto .line-howto__cation {
    margin-top: 1.3vw;
    font-size: 2.08333vw;
    letter-spacing: 0.04em;
    line-height: 1.7;
    font-weight: 300; }
  .dermacept-line .line-howto .line-menu__ttl {
    font-size: calc(42 * 100vw / 750);
    text-align: center;
    padding-top: 13vw;
    padding-bottom: 18.2vw; }
    .dermacept-line .line-howto .line-menu__ttl .strong {
      font-weight: bold; }
    .dermacept-line .line-howto .line-menu__ttl .fc-brown {
      color: #9e7f56; }
  .dermacept-line .line-howto .line-menu__list {
    padding-top: 0 !important;
    background: #ffffff;
    gap: calc(160 * 100vw / 750); }
    .dermacept-line .line-howto .line-menu__list li {
      background: #f3f2ee; }
      .dermacept-line .line-howto .line-menu__list li::before {
        background: #f3f2ee; }
      .dermacept-line .line-howto .line-menu__list li .line-howto__list__ttl {
        font-size: calc(36 * 100vw / 750); }
      .dermacept-line .line-howto .line-menu__list li .line-howto__list__txt {
        text-align: left;
        margin-top: 1em;
        margin-bottom: 0; }
      .dermacept-line .line-howto .line-menu__list li:after {
        display: none; }

/*--------------------------



PC



---------------------------*/

@media screen and (min-width: 768px) {
    .dermacept-line {
      padding-bottom: 120px; }
    .dermacept-line .sec-lead {
      padding-bottom: 77px; }
    .dermacept-line .line-lead-box {
      padding-top: 80px; }
    .dermacept-line .line-lead-box {
      padding-bottom: 30px; }
    .dermacept-line .line-lead-box {
      width: auto; }
    .dermacept-line .line-btn-box {
      margin-bottom: 80px; }
    .dermacept-line .benefits-bg {
      padding-top: 40px; }
    .dermacept-line .benefits-bg {
      padding-bottom: 40px; }
  .dermacept-line .benefits-wrap {
    margin: 0 auto; }
    .dermacept-line .line-howto {
      margin-top: 60px; }
    .dermacept-line .line-howto {
      margin-bottom: 60px; }
      .dermacept-line .line-howto .line-howto__ttl {
        font-size: 24px;
        letter-spacing: 0.08em;
        line-height: 1.5;
        font-weight: 600; }
      .dermacept-line .line-howto .line-howto__list {
        padding-top: 124px; }
      .dermacept-line .line-howto .line-howto__list {
        padding-bottom: 50px; }
      .dermacept-line .line-howto .line-howto__list {
        padding-left: 0px; }
      .dermacept-line .line-howto .line-howto__list {
        padding-right: 0px; }
        .dermacept-line .line-howto .line-howto__list li {
          padding-top: 80px; }
        .dermacept-line .line-howto .line-howto__list li {
          padding-bottom: 50px; }
        .dermacept-line .line-howto .line-howto__list li {
          padding-left: 30px; }
        .dermacept-line .line-howto .line-howto__list li {
          padding-right: 30px; }
      .dermacept-line .line-howto .line-howto__cation {
        margin-top: 10px; }
      .dermacept-line .line-howto .line-howto__cation {
        font-size: 15px;
        letter-spacing: 0.08em;
        line-height: 1.6;
        font-weight: 300; }
      .dermacept-line .line-howto .line-menu__ttl {
        padding-top: 75px; }
      .dermacept-line .line-howto .line-menu__ttl {
        padding-bottom: 120px; }
  .fv-container .fv-inner .fv-ttl {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 100%; }
    .fv-container .fv-inner .fv-ttl picture {
      width: 100%;
      max-width: 1018px !important; }
  .fv-container .fv-inner > picture {
    max-width: 100% !important; }
  .fv-container .fv-inner .object-fit {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: bottom center;
       object-position: bottom center;
    font-family: "object-fit: cover; object-position: bottom;";
    height: 360px; }
  .dermacept-line .pdinner_pc {
    max-width: 980px !important; }
  .dermacept-line .line-lead-box {
    font-size: 28px; }
  .dermacept-line .coupon {
    max-width: 327px; }
  .dermacept-line .kome {
    font-size: 14px; }
  .dermacept-line .line-howto {
    margin: 80px auto 60px; }
    .dermacept-line .line-howto .line-howto__ttl:after {
      bottom: -10px;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      border-top: 10px solid #00ad62; }
    .dermacept-line .line-howto .line-howto__list {
      gap: 180px; }
      .dermacept-line .line-howto .line-howto__list li {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 20px; }
        .dermacept-line .line-howto .line-howto__list li::before {
          top: -80px;
          width: 200px;
          height: 200px; }
        .dermacept-line .line-howto .line-howto__list li .line-howto__list__step {
          top: -50px;
          width: 66px; }
        .dermacept-line .line-howto .line-howto__list li:nth-of-type(2) .line-howto__list__step {
          width: 86px; }
        .dermacept-line .line-howto .line-howto__list li:nth-of-type(3) .line-howto__list__step {
          width: 84px; }
        .dermacept-line .line-howto .line-howto__list li:nth-of-type(4) .line-howto__list__step {
          width: 87px; }
        .dermacept-line .line-howto .line-howto__list li:nth-of-type(5) .line-howto__list__step {
          width: 83px; }
        .dermacept-line .line-howto .line-howto__list li .line-howto__list__ttl {
          font-size: 36px;
          border-width: 5px; }
        .dermacept-line .line-howto .line-howto__list li .line-howto__list__kome {
          font-size: 14px; }
        .dermacept-line .line-howto .line-howto__list li .line-howto__list__txt {
          font-size: 18px; }
          .dermacept-line .line-howto .line-howto__list li .line-howto__list__txt .strong {
            font-size: 18px; }
        .dermacept-line .line-howto .line-howto__list li .line-btn-box {
          margin-top: 25px; }
        .dermacept-line .line-howto .line-howto__list li .line-btn-box a {
          width: 335px; }
        .dermacept-line .line-howto .line-howto__list li::after {
          bottom: -74px;
          width: 96px;
          height: 41px; }
        .dermacept-line .line-howto .line-howto__list li .step2-img,
        .dermacept-line .line-howto .line-howto__list li .step3-img,
        .dermacept-line .line-howto .line-howto__list li .step4-img {
          width: 75%;
          margin-left: auto;
          margin-right: auto; }
        .dermacept-line .line-howto .line-howto__list li .step5-img {
          width: 50%; }
    .dermacept-line .line-howto .line-menu__ttl {
      font-size: 24px; }
      .dermacept-line .line-howto .line-menu__ttl .strong {
        font-size: 36px; }
    .dermacept-line .line-howto .line-menu__list {
      gap: 130px; }
      .dermacept-line .line-howto .line-menu__list li .line-howto__list__ttl {
        font-size: 30px; }
      .dermacept-line .line-howto .line-menu__list li .step1-img,
      .dermacept-line .line-howto .line-menu__list li .step2-img,
      .dermacept-line .line-howto .line-menu__list li .step3-img {
        width: 75%;
        margin-left: auto;
        margin-right: auto; }
      .dermacept-line .line-howto .line-menu__list li .step4-img {
        width: 85%; } }