@charset "utf-8";

.block-howtocare-header {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .block-container {
    position: relative;
  }
}

.block-howtocare-anker {
  background-color: var(--cl-lgn);

  ul {
    display: flex;
    align-items: center;
    justify-content: center;

    li {
      position: relative;

      & + li {
        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 50%;
          width: 1px;
          background-color: #bfccbf;
        }
      }
    }
  }
}

@media all and (min-width: 768px) {
  .block-howtocare-header {
    height: 400px;
    padding-top: 150px;
    background-image: url(../../../img/s/howtocare/mv.jpg);

    &::before {
      left: 50%;
      width: 1920px;
      height: 593px;
      margin-left: -960px;
      background-image: url(../../../img/s/howtocare/mv_leaf.png);
    }

    .ttl-h1 {
      margin-bottom: 34px;
    }

    .item-comment {
      font-size: 1.8rem;
      line-height: 1.777;
    }
  }

  .block-howtocare-anker {
    ul {
      height: 100px;

      li {
        font-size: 1.8rem;

        & + li {
          margin-left: 201px;

          &::before {
            left: -100px;
            height: 30px;
            margin-top: -15px;
          }
        }
      }
    }
  }
}

@media all and (max-width: 767px) {
  .block-howtocare-header {
    padding-top: 54px;
    height: 76.92vw;
    background-image: url(../../../img/s/howtocare/sp/mv.jpg);

    &::before {
      left: 0;
      width: 100vw;
      height: 114.61vw;
      background-image: url(../../../img/s/howtocare/sp/mv_leaf.png);
    }

    .ttl-h1 {
      margin-bottom: 20px;
      line-height: 1.285;
    }

    .item-comment {
      font-size: 1.4rem;
      line-height: 1.571;
    }
  }

  .block-howtocare-anker {
    ul {
      height: 70px;

      li {
        width: 50%;

        & + li {
          &::before {
            left: 0;
            height: 38px;
            margin-top: -19px;
          }
        }

        a {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}

.block-howtocare-article-list-item {
  display: flex;
  position: relative;

  .list-detail {
    position: relative;

    .cl-gn {
      color: var(--cl-gn);
    }

    .list-subttl,
    .list-ttl {
      font-family: var(--ff-serif);
      font-weight: 400;
    }

    .list-subttl {
      display: flex;
      align-items: center;

      .list-step {
        position: relative;
        margin-right: 26px;
        padding-bottom: 2px;
        font-size: 1.6rem;
        font-family: var(--ff-num);
        font-weight: 600;

        &::after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background-color: var(--cl-bk);
        }
      }
    }

    .list-comment {
      line-height: 1.875;

      p + p {
        margin-top: 1.8em;
      }
    }

    .list-prod {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .list-prod-img {
        width: 100px;

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

      .list-prod-detail {
        width: calc(100% - 124px);

        .list-prod-comment-1 {
          font-weight: 700;
          line-height: 1.625;
        }

        .list-prod-comment-2 {
          margin-top: 5px;
          font-size: 1.4rem;
          line-height: 1.571;
        }
      }
    }

    .list-contents {
      display: flex;
      flex-wrap: wrap;
      margin-top: 18px;
      font-size: 1.4rem;
      line-height: 1.571;
    }

    .list-circle {
      position: absolute;

      img {
        display: block;
        width: 120px;
        height: 120px;
        border-radius: 120px;
      }
    }
  }

  .list-img {
    position: relative;

    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      background-image: url(../../../img/s/howtocare/img_bg.png);
      background-position: center;
      background-repeat: no-repeat;
      filter: blur(40px);
    }

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

@media all and (min-width: 768px) {
  .block-howtocare-theory {
    margin-top: 80px;

    .ttl-h2 {
      margin-bottom: 80px;
    }
  }

  .block-howtocare-step {
    margin-top: 180px;
  }

  .block-howtocare-article-list-item {
    justify-content: space-between;

    & + .block-howtocare-article-list-item {
      margin-top: 120px;
    }

    .list-detail {
      width: 540px;
      z-index: 9;

      .list-subttl {
        font-size: 2.4rem;
      }

      .list-ttl {
        margin-top: 5px;
        font-size: 4rem;
      }

      .list-comment {
        margin-top: 24px;
      }

      .list-theory_circle {
        position: absolute;
        top: 178px;
        left: 434px;
        width: 359px;

        img {
          display: block;
          width: 359px;
          height: auto;
        }
      }

      .list-prod {
        margin-top: 33px;
      }

      .list-circle {
        top: 0;
        right: 0;
      }
    }

    .list-img {
      width: 640px;

      &::before {
        right: 15px;
        width: 725px;
        height: 544px;
      }
    }
  }
}

@media all and (max-width: 767px) {
  .block-howtocare-theory {
    margin-top: 48px;
  }

  .block-howtocare-step {
    margin-top: 100px;
  }

  .block-howtocare-article-list-item {
    flex-direction: column-reverse;

    & + .block-howtocare-article-list-item {
      margin-top: 100px;
    }

    .list-img {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: 0 -20px;

      img {
        width: calc(100vw - 40px);
      }

      &::before {
        top: 10.25vw;
        left: 0;
        width: 89.74vw;
        height: 67.43vw;
      }
    }

    .list-detail {
      margin-top: 66px;
      z-index: 9;

      .list-subttl {
        font-size: 2rem;
      }

      .list-ttl {
        margin-top: 4px;
        font-size: 3rem;
      }

      .list-comment {
        margin-top: 30px;
      }

      .list-theory_circle {
        width: 359px;
        margin: 40px auto 0;

        img {
          display: block;
          width: 359px;
          height: auto;
        }
      }

      .list-prod {
        align-items: flex-start;
        margin-top: 33px;

        .list-prod-img {
          width: 80px;
        }

        .list-prod-detail {
          width: calc(100% - 96px);

          .list-prod-comment-1 {
            letter-spacing: 0.04em;
          }
        }

        .list-contents {
          flex-direction: column;
        }
      }

      .list-circle {
        top: -87px;
        right: 0;
      }
    }
  }
}

.block-howtocare-flow-content {
  h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--cl-gn);
    color: #ffffff;
    font-family: var(--ff-serif);
    font-weight: 400;
    text-align: center;
  }

  &.makeup {
    h3 {
      background-color: #d97739;
    }
  }
}

.block-howtocare-flow-content-list {
  h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--cl-gr-1);
    font-family: var(--ff-serif);
    font-weight: 400;
    text-align: center;
  }
}

.block-howtocare-flow-content-list-item .list-flow {
  display: flex;
  align-items: center;

  > div {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: var(--ff-serif);
    text-align: center;
  }
}

.skincare .block-howtocare-flow-content-list-item .list-flow {
  > div,
  > div::after {
    background-color: var(--cl-lgn);
  }
}

.makeup .block-howtocare-flow-content-list-item .list-flow {
  > div,
  > div::after {
    background-color: #fcefdf;
  }
}

@media all and (min-width: 768px) {
  .block-howtocare-flow {
    padding-top: 120px;
    /* margin-top: 120px; */
  }

  .block-howtocare-flow-content {
    margin-top: 80px;

    & + .block-howtocare-flow-content {
      margin-top: 100px;
    }

    h3 {
      height: 100px;
      font-size: 3.4rem;
    }
  }

  .block-howtocare-flow-content-list {
    & + .block-howtocare-flow-content-list {
      margin-top: 80px;
    }

    h4 {
      margin-top: 64px;
      padding-top: 44px;
      font-size: 2.8rem;
    }
  }

  .block-howtocare-flow-content-list-items {
    display: flex;
    flex-wrap: wrap;
    margin-top: -20px;
  }

  .block-howtocare-flow-content-list-item {
    margin-top: 64px;
  }

  .col-5 .block-howtocare-flow-content-list-item {
    .list-prod-container {
      width: 256px;
    }
  }

  .col-4 .block-howtocare-flow-content-list-item {
    .list-prod-container {
      width: 320px;
    }
  }

  .block-howtocare-flow-content-list-item .list-flow {
    width: 100%;
    height: 60px;

    > div {
      width: 100%;
      height: 40px;

      &::after {
        content: none;
      }
    }
  }

  .block-howtocare-flow-content-list-item .list-flow {
    > div.has-arw {
      width: calc(100% - 40px);
      padding-left: 40px;

      &::after {
        content: "";
        display: block;
        position: absolute;
        top: -10px;
        right: -40px;
        width: 40px;
        height: 60px;
        clip-path: polygon(40px 50%, 0% 0%, 0% 60px);
      }
    }
  }

  .col-5 .block-howtocare-flow-content-list-item {
    .list-prod-container a {
      display: block;
      position: relative;
      padding: 31px 28px 56px 36px;
    }
  }

  .col-4 .block-howtocare-flow-content-list-item {
    .list-prod-container a {
      display: block;
      position: relative;
      padding: 35px 40px 56px;
    }
  }

  .block-howtocare-flow-content-list-item {
    .list-prod-container a::before,
    .list-prod-container a::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 21px;
      left: 50%;
      width: 24px;
      height: 24px;
      margin-left: -12px;
      border-radius: 24px;
    }

    .list-prod-container a::before {
      background-color: var(--cl-gn);
      transition: transform 0.3s;
    }

    .list-prod-container a:hover::before {
      transform: scale(1.416);
    }

    .list-prod-container a::after {
      background-image: url(../../../img/common/arw_link_right.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
  }

  .block-howtocare-flow-content-list-item {
    .list-prod-wrapper {
      display: flex;
      position: relative;
      margin-top: 24px;

      &::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top: 1px solid var(--cl-gr-1);
        border-bottom: 1px solid var(--cl-gr-1);
      }

      .list-prod-container {
        position: relative;
        border-left: 1px solid var(--cl-gr-1);

        .list-img {
          width: 192px;
          margin: 0 auto;
          overflow: hidden;

          img {
            display: block;
            width: 100%;
            height: auto;
            transition: transform 0.3s;
          }
        }

        &:hover .list-img img {
          transform: scale(1.07);
        }

        .list-top-txt {
          margin-top: 28px;
        }

        .list-name {
          font-size: 1.8rem;
          font-weight: 500;
          line-height: 1.444;
        }

        .list-icon {
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
          justify-content: flex-start;
          margin-top: 6px;

          > span {
            display: block;
            margin: 0 10px 0 0;

            img {
              display: block;
              height: auto;
            }
          }
        }

        .list-bot {
          margin-top: 12px;
        }

        .list-comment {
          font-size: 1.3rem;
          font-weight: 700;
          line-height: 1.384;
        }

        .list-amount {
          display: flex;
          margin-top: 7px;
          color: var(--cl-bk);

          dt {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 65px;
            height: 20px;
            border: 1px solid var(--cl-bk);
            font-size: 1.1rem;
            line-height: 1;
            letter-spacing: 0;
          }

          dd {
            flex-shrink: 1;
            margin-left: 10px;
            font-size: 1.2rem;
            letter-spacing: 0.04em;
          }
        }

        .list-contents {
          margin-top: 5px;
          color: var(--cl-gr-txt);
          font-size: 1.1rem;
          font-family: var(--ff-num);
          line-height: 1.636;
        }

        .list-space {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          font-size: 1.8rem;
          text-align: center;
          letter-spacing: 0.08em;
        }
      }

      .list-prod-container.has-bdr {
        border-right: 1px solid var(--cl-gr-1);
      }

      .list-prod-container.has-arw::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: -17px;
        width: 19px;
        height: 51px;
        margin-top: -25px;
        background-image: url(../../../img/s/howtocare/content_arw.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 9;
      }
    }
  }
}

@media all and (max-width: 767px) {
  .block-howtocare-flow {
    margin: 100px -20px 0;
  }

  .block-howtocare-flow-content {
    margin-top: 48px;

    & + .block-howtocare-flow-content {
      margin-top: 80px;
    }

    h3 {
      height: 70px;
      font-size: 2.8rem;
    }
  }

  .block-howtocare-flow-content-list {
    & + .block-howtocare-flow-content-list {
      margin-top: 80px;
    }

    h4 {
      margin-top: 48px;
      padding-top: 28px;
      font-size: 2.4rem;
    }
  }

  .block-howtocare-flow-content-list-items {
    margin-top: 40px;
    padding: 0 10px 0 0;
  }

  .block-howtocare-flow-content-list-item {
    display: flex;
    justify-content: space-between;

    .list-flow {
      display: flex;
      justify-content: center;
      position: relative;
      width: 60px;

      > div {
        position: absolute;
        top: 0;
        left: 10px;
        width: 40px;
        height: 100%;
        writing-mode: vertical-rl;
        text-orientation: upright;
        letter-spacing: 0.6em;
      }
    }

    .list-prod-wrapper {
      width: calc(100% - 70px);

      .list-prod-container {
        position: relative;
        border: 1px solid var(--cl-gr-1);
        border-top: none;

        a {
          display: block;
          position: relative;
          padding: 24px 15px;
        }

        a::after {
          content: "";
          display: block;
          position: absolute;
          right: 16px;
          bottom: 24px;
          width: 24px;
          height: 24px;
          border-radius: 24px;
          background-image: url(../../../img/common/arw_link_right.png);
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
        }
      }
    }

    &:first-child {
      .list-prod-wrapper {
        border-top: 1px solid var(--cl-gr-1);
      }
    }

    &:last-child {
      .list-flow {
        > div {
          padding-top: 10px;
          height: calc(100% - 40px);

          &::after {
            content: "";
            display: block;
            position: absolute;
            bottom: -40px;
            left: -10px;
            width: 60px;
            height: 40px;
            clip-path: polygon(50% 40px, 0% 0%, 60px 0%);
          }
        }
      }
    }

    &:not(:last-child) {
      .list-prod-container::after {
        content: "";
        display: block;
        position: absolute;
        bottom: -16px;
        left: 50%;
        width: 51px;
        height: 23px;
        margin-left: -25px;
        background-image: url(../../../img/s/howtocare/sp/content_arw.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 9;
      }
    }

    .list-top {
      display: flex;
      justify-content: space-between;

      .list-img {
        width: 100px;

        img {
          display: block;
          height: auto;
        }
      }

      .list-top-txt {
        width: calc(100% - 116px);
        padding-top: 7px;

        .list-name {
          font-size: 1.8rem;
          line-height: 1.444;
        }

        .list-icon {
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
          justify-content: flex-start;
          margin-top: 12px;

          > span {
            display: block;
            margin: 0 10px 0 0;

            img {
              display: block;
              height: auto;
            }
          }
        }
      }
    }

    .list-bot {
      margin-top: 12px;
    }

    .list-comment {
      font-size: 1.3rem;
      font-weight: 700;
      line-height: 1.384;
    }

    .list-amount {
      display: flex;
      margin-top: 8px;
      color: var(--cl-bk);

      dt {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 65px;
        height: 20px;
        border: 1px solid var(--cl-bk);
        font-size: 1.1rem;
        line-height: 1;
        letter-spacing: 0;
      }

      dd {
        flex-shrink: 1;
        margin-left: 10px;
        font-size: 1.2rem;
        letter-spacing: 0.04em;
      }
    }

    .list-contents {
      margin-top: 8px;
      color: var(--cl-gr-txt);
      font-size: 1.1rem;
      font-family: var(--ff-num);
      line-height: 1.636;
    }

    .list-space {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 98px;
      font-size: 1.8rem;
      text-align: center;
      letter-spacing: 0.08em;
    }
  }
}

@media screen and (max-width: 767px) {
  br.br-pc {
      display: none !important;
  }
} /* max-width: 767px END */

@media screen and (min-width: 768px) {
  br.br-sp {
      display: none !important;
  }
} /* min-width: 768px END */

@media all and (min-width: 768px) {
}

@media all and (max-width: 767px) {
}