@charset "UTF-8";
/*リセット*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
p,
form,
select,
div,
span,
label,
input,
textarea,
button,
table,
td,
th,
figure,
nav,
main,
img {
  margin: 0;
  padding: 0; }

html,
body {
  -webkit-text-size-adjust: 100%;
  position: relative; }

html {
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

#jump_1, #jump_2, #jump_3, #jump_4, #jump_5 {
  padding-top: 45px;
  margin-top: -45px; }
  @media screen and (min-width: 960px) {
    #jump_1, #jump_2, #jump_3, #jump_4, #jump_5 {
      padding-top: 70px !important;
      margin-top: -70px !important; } }

body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-top: 67px;
  text-align: justify;
  text-justify: inter-ideograph;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color: #ffffff;
  color: #1a1a1a;
  font-size: 1.4rem;
  line-height: 1.55;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt"; }
  @media screen and (min-width: 736px) {
    body {
      font-size: 1.8rem; } }
  @media screen and (min-width: 960px) {
    body {
      padding-top: 92px !important; } }

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
p,
form,
select,
div,
label,
input,
button,
select,
option,
textarea,
table,
td,
th,
figure,
nav,
main,
address {
  font-weight: inherit;
  font-style: normal; }

a,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
p,
form,
select,
div,
label,
input,
button,
select,
option,
textarea,
button,
table,
td,
th,
figure,
nav,
main,
address {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

*[disabled] {
  opacity: 1;
  cursor: auto; }

table,
td,
th {
  border-spacing: 0; }

th {
  text-align: justify; }

a {
  text-decoration: none;
  outline: none; }

a img {
  border: 0; }

img,
svg {
  vertical-align: bottom; }

li {
  list-style: none; }

input[type="submit"],
input[type="button"],
button,
input[type="radio"] + label,
input[type="checkbox"] + label,
input[type="file"] + label,
a {
  cursor: pointer; }

main {
  display: block; }

/*フォーカス削除*/
a,
button,
input {
  -webkit-tap-highlight-color: transparent; }

/*フォームパーツリセット*/
label,
input,
select,
option,
textarea,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  background: none transparent;
  outline: none; }

select {
  text-indent: 0.01px;
  text-overflow: ""; }

select::-ms-expand {
  display: none; }

input[type="file"],
input[type="checkbox"],
input[type="radio"] {
  display: none; }

input[type="file"] {
  opacity: 0;
  width: 0;
  height: 0; }

.pc-only {
  display: none; }

.sp-only {
  display: none; }

@media screen and (min-width: 736px) {
  .pc-only {
    display: block; } }
@media screen and (max-width: 735px) {
  .sp-only {
    display: block; } }
/***** 全体 *****/
body > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 1180px;
  box-sizing: border-box; }

/***** ヘッダー *****/
.kv {
  position: relative;
  box-shadow: 50vw 0 #aa998d, -50vw 0 #aa998d;
  margin-top: 79px; }
  @media screen and (max-width: 735px) {
    .kv {
      margin-top: 0; } }
  @media screen and (max-width: 735px) {
    .kv h1 {
      margin-bottom: 9%; } }
  .kv h1 img {
    width: 100%; }
  .kv a {
    position: absolute;
    display: block;
    max-width: 390px;
    width: 90%;
    bottom: -9%; }
    .kv a:hover {
      opacity: 1 !important; }
    @media screen and (min-width: 736px) {
      .kv a:hover {
        opacity: 1 !important; } }
    @media screen and (max-width: 735px) {
      .kv a {
        left: 50%;
        transform: translateX(-50%); } }
    @media screen and (min-width: 736px) {
      .kv a {
        width: 40%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%); } }
    .kv a img {
      width: 100%; }
      .kv a img:hover {
        opacity: 1 !important; }
  .kv .kv_btn_now2 {
    width: 50%;
    margin: 0 auto;
    animation: key1 .3s ease infinite alternate; }
@keyframes key1 {
  0% {
    transform: translateY(0px); }
  100% {
    transform: translateY(-10px); } }
/***** main *****/
main {
  /*三角*/
  /*Ｄｒ.ハウシュカのスキンケアは...*/
  /*3リスト*/
  /*Dr.ハウシュカのとっても大事なキープランツ*/
  /*スターターセット*/
  /*100%天然由来処方*/
  /*目次*/
  /*main上部*/
  /*「自肌力」を育てる*/
  /*シンプル３ＳＴＥＰ*/
  /*ハウシュカが大切にしている6つのこだわり*/
  /*日中の肌と夜の肌*/
  /*ユーザーボイス*/ }
  main .mk_b {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 15vw;
    max-width: 160px;
    margin-top: 30px;
    margin-bottom: 30px; }
    @media screen and (min-width: 736px) {
      main .mk_b {
        margin-top: 50px; } }
    @media screen and (min-width: 736px) {
      main .mk_b {
        margin-bottom: 50px; } }
  main .mk_b_s {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 5vw;
    max-width: 50px;
    margin-top: 30px;
    margin-bottom: 30px; }
    @media screen and (min-width: 736px) {
      main .mk_b_s {
        margin-top: 50px; } }
    @media screen and (min-width: 736px) {
      main .mk_b_s {
        margin-bottom: 50px; } }
  main .bg_grada {
    position: relative;
    padding: 20px; }
    main .bg_grada::after {
      position: absolute;
      content: "";
      display: block;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 100vw;
      transform: translateX(-50%);
      background: -moz-radial-gradient(center, ellipse cover, rgba(240, 200, 100, 0) 3%, rgba(240, 200, 100, 0.15) 100%);
      background: -webkit-radial-gradient(center, ellipse cover, rgba(240, 200, 100, 0) 3%, rgba(240, 200, 100, 0.15) 100%);
      background: radial-gradient(ellipse at center, rgba(240, 200, 100, 0) 3%, rgba(240, 200, 100, 0.15) 100%);
      z-index: -1; }
    @media screen and (min-width: 736px) {
      main .bg_grada {
        padding: 40px;
        padding-bottom: 100px; } }
  main .hauschka_skincare_txt {
    display: block;
    width: 80%;
    max-width: 562px;
    margin: 0 auto 15px;
    transform: translateY(-30%); }
    @media screen and (min-width: 736px) {
      main .hauschka_skincare_txt {
        margin-bottom: 30px; } }
  main .list_three {
    background-color: rgba(146, 127, 111, 0.1);
    box-shadow: 50vw 0 rgba(146, 127, 111, 0.1), -50vw 0 rgba(146, 127, 111, 0.1);
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 30px; }
    @media screen and (min-width: 736px) {
      main .list_three {
        margin-top: 50px; } }
    @media screen and (min-width: 736px) {
      main .list_three {
        padding-top: 30px;
        padding-bottom: 30px; } }
    main .list_three > li {
      width: 30%;
      max-width: 252px;
      margin: 0 2%; }
  main .herb {
    margin-bottom: 30px; }
    @media screen and (min-width: 736px) {
      main .herb {
        margin-bottom: 50px; } }
    main .herb > div {
      background-color: #ffffff;
      padding-top: 15px; }
      @media screen and (min-width: 736px) {
        main .herb > div {
          padding-top: 30px; } }
      main .herb > div h3 {
        background-color: #f69b0a;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 15px;
        padding-right: 15px; }
        main .herb > div h3 img {
          max-width: 470px;
          vertical-align: middle; }
      main .herb > div > div {
        padding: 15px;
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.07); }
        @media screen and (min-width: 380px) {
          main .herb > div > div {
            display: flex; } }
        @media screen and (min-width: 736px) {
          main .herb > div > div {
            padding: 20px; } }
        main .herb > div > div > img {
          width: 20%; }
          @media screen and (max-width: 379px) {
            main .herb > div > div > img {
              display: block;
              margin: 0 auto 15px; } }
          @media screen and (min-width: 380px) {
            main .herb > div > div > img {
              width: 17%;
              flex: 0 0 17%;
              margin-right: 15px;
              align-self: flex-start; } }
          @media screen and (min-width: 736px) {
            main .herb > div > div > img {
              margin-right: 20px; } }
        @media screen and (min-width: 380px) {
          main .herb > div > div > div {
            flex: 1 1 80%; } }
        main .herb > div > div > div > img {
          max-width: 580px;
          margin-bottom: 0.8em; }
        @media screen and (min-width: 736px) {
          main .herb > div > div > div .herb_column {
            display: flex; } }
        main .herb > div > div > div .herb_column span {
          display: flex;
          align-items: center;
          justify-content: center; }
          @media screen and (min-width: 736px) {
            main .herb > div > div > div .herb_column span {
              width: 45%;
              flex: 0 0 auto;
              margin-left: 30px; } }
          main .herb > div > div > div .herb_column span img {
            width: 50%;
            max-width: 180px; }
    main .herb > p {
      text-align: center;
      margin-top: 1em;
      font-size: 1.2rem; }
      @media screen and (min-width: 736px) {
        main .herb > p {
          font-size: 1.4rem; } }
  main .starter_set {
    border: #f69b0a 1px solid;
    background-color: #ffffff;
    padding: 15px;
    position: relative; }
    @media screen and (max-width: 735px) {
      main .starter_set > *:not(:last-child) {
        margin-bottom: 30px; } }
    @media screen and (min-width: 736px) {
      main .starter_set {
        display: flex;
        flex-wrap: wrap;
        padding: 30px;
        padding-bottom: 100px; }
        main .starter_set > *:nth-child(1n + 3) {
          margin-top: 30px; }
        main .starter_set > img,
        main .starter_set .set_detail {
          width: 42%;
          margin-right: 5%; }
        main .starter_set .set_title,
        main .starter_set .set_price {
          width: 53%; } }
    main .starter_set > img {
      max-width: 100%; }
      @media screen and (min-width: 736px) {
        main .starter_set > img {
          align-self: flex-start; } }
    main .starter_set .set_title h3 {
      font-weight: bold;
      font-size: 2rem; }
      @media screen and (min-width: 736px) {
        main .starter_set .set_title h3 {
          font-size: 3rem; } }
    main .starter_set .set_title ul {
      margin-top: 0.8em; }
      main .starter_set .set_title ul li {
        line-height: 1.2;
        padding-left: 1em;
        text-indent: -1em; }
        main .starter_set .set_title ul li:not(:last-child) {
          margin-bottom: 0.5em; }
        main .starter_set .set_title ul li::before {
          content: "・";
          display: inline-block;
          width: 1em;
          text-indent: 0; }
        main .starter_set .set_title ul li span {
          background: linear-gradient(transparent 60%, rgba(246, 155, 10, 0.3) 0);
          display: inline;
          font-weight: bold; }
    @media screen and (min-width: 1180px) {
      main .starter_set .set_detail {
        display: flex; } }
    main .starter_set .set_detail h4 {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      margin-bottom: 1em; }
      @media screen and (max-width: 1179px) {
        main .starter_set .set_detail h4 {
          background-color: #f69b0a;
          color: #ffffff;
          height: 2em; } }
      @media screen and (min-width: 736px) {
        main .starter_set .set_detail h4 {
          font-size: 1.4rem; } }
      @media screen and (min-width: 1180px) {
        main .starter_set .set_detail h4 {
          border: 1px solid #1a1a1a;
          box-shadow: inset 0 -0.8em 0 #f69b0a;
          width: 6em;
          flex: 0 0 auto;
          margin: 0 1em 0 0; } }
    main .starter_set .set_detail div {
      align-self: center;
      flex: 1 1 60%;
      font-size: 1.3rem; }
      @media screen and (min-width: 736px) {
        main .starter_set .set_detail div {
          font-size: 1.5rem; } }
      main .starter_set .set_detail div h5 {
        display: flex;
        text-align: center;
        justify-content: space-between;
        margin: 0.8em auto;
        letter-spacing: 1%;
        max-width: 22em; }
        main .starter_set .set_detail div h5 > * {
          display: flex;
          justify-content: space-between;
          flex: 1 1 auto; }
        main .starter_set .set_detail div h5 > span {
          color: #f69b0a; }
        main .starter_set .set_detail div h5 > div {
          padding: 0 0.5em; }
      main .starter_set .set_detail div ul {
        max-width: 22em;
        margin: 0 auto; }
        main .starter_set .set_detail div ul li {
          display: flex;
          line-height: 1.2; }
          main .starter_set .set_detail div ul li:not(:last-child) {
            margin-bottom: 0.5em; }
          main .starter_set .set_detail div ul li::before {
            content: "■";
            color: #f69b0a; }
    main .starter_set .set_price {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      align-content: center; }
      main .starter_set .set_price > img {
        width: 75%; }
      main .starter_set .set_price span {
        align-self: flex-end;
        width: 20%;
        margin: 0 0 3% 5%; }
        main .starter_set .set_price span img {
          display: block; }
          main .starter_set .set_price span img:not(:last-child) {
            margin-bottom: 5px; }
            @media screen and (min-width: 736px) {
              main .starter_set .set_price span img:not(:last-child) {
                margin-bottom: 10px; } }
      main .starter_set .set_price a {
        margin-top: 5px;
        width: 100%;
        border-radius: 7px;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); }
        main .starter_set .set_price a:hover {
          opacity: 1 !important; }
        @media screen and (min-width: 736px) {
          main .starter_set .set_price a:hover {
            opacity: 1 !important; } }
        @media screen and (max-width: 735px) {
          main .starter_set .set_price a {
            width: 80%;
            margin: 10px auto 0; } }
        @media screen and (min-width: 736px) {
          main .starter_set .set_price a {
            margin-top: 10px; } }
    main .starter_set .btn1 {
      position: absolute;
      bottom: -60px;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      max-width: 390px;
      width: 100%;
      transition: 1s;
      -webkit-transition: 1s; }
      main .starter_set .btn1:hover {
        opacity: 1 !important; }
      @media screen and (min-width: 736px) {
        main .starter_set .btn1:hover {
          opacity: 1 !important; } }
      main .starter_set .btn1 img {
        width: 100%; }
        main .starter_set .btn1 img:hover {
          opacity: 1 !important; }
  main .natural {
    margin-top: 30px;
    margin-bottom: 30px; }
    @media screen and (min-width: 736px) {
      main .natural {
        margin-top: 50px; } }
    @media screen and (min-width: 736px) {
      main .natural {
        margin-bottom: 50px; } }
    @media screen and (min-width: 736px) {
      main .natural {
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        align-items: center; } }
    @media screen and (max-width: 735px) {
      main .natural {
        margin-top: 30px;
        margin-bottom: 30px;
        margin-top: 100px; } }
  @media screen and (max-width: 735px) and (min-width: 736px) {
    main .natural {
      margin-top: 50px; } }
  @media screen and (max-width: 735px) and (min-width: 736px) {
    main .natural {
      margin-bottom: 50px; } }

    main .natural h3 {
      background-color: #8c6e5a;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 80%; }
      @media screen and (max-width: 735px) {
        main .natural h3 {
          height: 40px;
          max-width: 260px;
          border-radius: 20px;
          margin: 0 auto -20px;
          position: relative;
          z-index: 10; } }
      @media screen and (min-width: 736px) {
        main .natural h3 {
          border-radius: 50%;
          width: 100px;
          height: 100px;
          margin-right: 15px; } }
      @media screen and (min-width: 1024px) {
        main .natural h3 {
          width: 140px;
          height: 140px;
          flex: 0 0 auto; } }
      main .natural h3 img {
        width: 75%;
        margin: 0 auto; }
    @media screen and (min-width: 736px) {
      main .natural div {
        width: 60%;
        flex: 1 1 auto; } }
    main .natural div > span {
      display: block;
      text-align: center;
      background: -moz-radial-gradient(center, ellipse cover, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0.4) 100%);
      background: -webkit-radial-gradient(center, ellipse cover, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0.4) 100%);
      background: radial-gradient(ellipse at center, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0.4) 100%);
      padding-top: 30px;
      padding-bottom: 20px;
      padding-left: 15px;
      padding-right: 15px; }
      @media screen and (min-width: 736px) {
        main .natural div > span {
          padding-top: 5px;
          padding-bottom: 5px; } }
      main .natural div > span img {
        vertical-align: middle;
        max-width: 435px;
        margin: 0 auto; }
        @media screen and (min-width: 736px) {
          main .natural div > span img {
            max-width: 660px; } }
    main .natural div ul {
      display: flex;
      justify-content: center;
      margin: 10px 0;
      padding-left: 15px;
      padding-right: 15px; }
      @media screen and (max-width: 735px) {
        main .natural div ul {
          margin: 20px 0;
          flex-wrap: wrap; } }
      main .natural div ul li {
        box-sizing: border-box;
        width: calc((100% - 1px) / 3);
        padding: 0 15px; }
        @media screen and (max-width: 735px) {
          main .natural div ul li {
            margin: 10px 0; }
            main .natural div ul li:nth-child(3) {
              border-right: none !important; } }
        @media screen and (min-width: 736px) {
          main .natural div ul li {
            width: calc(100% / 5);
            padding: 0 20px; } }
        main .natural div ul li:not(:last-child) {
          border-right: 1px dashed #4d4d4d; }
  main .mokuji {
    padding: 30px;
    padding-left: 40px;
    background-color: #faf6f0;
    max-width: 780px;
    margin: 0 auto;
    margin-top: 100px; }
    main .mokuji__title {
      display: block;
      margin-bottom: 30px; }
    main .mokuji__content::before {
      content: "▶︎";
      color: #f15b24;
      padding-right: 10px;
      line-height: 2em; }
    @media screen and (max-width: 735px) {
      main .mokuji__content {
        font-size: calc(34 / 1200 * 100vw); } }
    main .mokuji a {
      text-decoration: underline;
      color: #826e5a; }
  main > article {
    padding-top: 30px;
    padding-bottom: 30px; }
    @media screen and (min-width: 736px) {
      main > article {
        padding-top: 50px; } }
    @media screen and (min-width: 736px) {
      main > article {
        padding-bottom: 50px; } }
    main > article h2 {
      text-align: center;
      padding-left: 15px;
      padding-right: 15px; }
      main > article h2 img {
        max-width: 970px; }
    main > article .worries_img {
      padding-left: 15px;
      padding-right: 15px; }
      main > article .worries_img img {
        display: block;
        max-width: 100%;
        margin: 15px auto; }
        @media screen and (min-width: 736px) {
          main > article .worries_img img {
            margin: 30px auto; } }
  main #skincare h3 {
    display: flex;
    justify-content: space-between;
    padding-top: 50px; }
    @media screen and (min-width: 736px) {
      main #skincare h3 {
        padding-top: 70px; } }
    main #skincare h3::before, main #skincare h3::after {
      content: "";
      display: block;
      width: 100px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center; }
    main #skincare h3::before {
      background-image: url("../img/bg_skincare_01.png"); }
    main #skincare h3::after {
      background-image: url("../img/bg_skincare_02.png"); }
    main #skincare h3 img {
      max-width: 870px;
      flex: 1 1 auto;
      margin-bottom: 8%;
      margin-top: -15px; }
      @media screen and (max-width: 735px) {
        main #skincare h3 img {
          max-width: 70%; } }
      @media screen and (min-width: 736px) {
        main #skincare h3 img {
          margin-top: -20px; } }
  main #skincare > div {
    padding-bottom: 30px;
    text-align: center;
    background-image: url("../img/bg_skincare.jpg");
    background-size: cover; }
    @media screen and (min-width: 736px) {
      main #skincare > div {
        padding-bottom: 50px; } }
    main #skincare > div .skincare_catch {
      position: relative;
      z-index: 10; }
      main #skincare > div .skincare_catch img {
        width: 65%;
        max-width: 410px; }
    main #skincare > div > img {
      margin-top: -2.5%; }
    main #skincare > div .skincare_txt {
      background-color: #6ea0a0;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 15px;
      padding-right: 15px;
      margin-top: 15px; }
      @media screen and (min-width: 736px) {
        main #skincare > div .skincare_txt {
          padding-top: 15px;
          padding-bottom: 15px; } }
      main #skincare > div .skincare_txt img {
        width: 90%;
        max-width: 970px;
        display: block;
        margin: 0 auto; }
      @media screen and (min-width: 736px) {
        main #skincare > div .skincare_txt {
          margin-top: 30px; } }
  main #skincare > p {
    text-align: center;
    position: relative;
    margin-bottom: 6vw;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px; }
    @media screen and (min-width: 736px) {
      main #skincare > p {
        padding-top: 50px;
        padding-bottom: 50px; } }
    main #skincare > p::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 5vw 6vw 0 6vw;
      border-color: rgba(146, 127, 111, 0.1) transparent transparent transparent;
      position: absolute;
      bottom: -5vw;
      left: 50%;
      transform: translateX(-50%); }
    main #skincare > p img {
      max-width: 750px; }
  main #step h3 {
    text-align: center;
    padding-left: 15px;
    padding-right: 15px; }
    @media screen and (max-width: 735px) {
      main #step h3 {
        margin-bottom: 1em; } }
    main #step h3 img {
      max-width: 1024px; }
  main #step > p {
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px; }
    @media screen and (min-width: 736px) {
      main #step > p {
        margin-bottom: 50px; } }
    main #step > p img {
      max-width: 890px; }
  main #step > dl dt {
    text-align: center;
    background-color: rgba(146, 127, 111, 0.2);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px; }
    main #step > dl dt img {
      background-color: #ffffff;
      max-width: 880px;
      border-radius: 40px; }
  main #step > dl dd {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 30px;
    margin-bottom: 40px; }
    @media screen and (min-width: 736px) {
      main #step > dl dd {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        margin-bottom: 50px; } }
    main #step > dl dd > div {
      box-sizing: border-box;
      padding-right: 15px;
      padding-bottom: 15px;
      background-color: #ffffff;
      position: relative; }
      main #step > dl dd > div::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: -2px;
        bottom: -2px;
        background: -moz-radial-gradient(bottom right, ellipse cover, #faaa32 0%, rgba(250, 170, 50, 0) 75%);
        background: -webkit-radial-gradient(bottom right, ellipse cover, #faaa32 0%, rgba(250, 170, 50, 0) 75%);
        background: radial-gradient(ellipse at bottom right, #faaa32 0%, rgba(250, 170, 50, 0) 75%); }
      @media screen and (max-width: 735px) {
        main #step > dl dd > div:not(:last-child) {
          margin-bottom: 30px; } }
      @media screen and (min-width: 736px) {
        main #step > dl dd > div {
          width: 46%; } }
      main #step > dl dd > div img {
        width: 100%; }
      main #step > dl dd > div p {
        font-size: 1.2rem; }
        @media screen and (min-width: 736px) {
          main #step > dl dd > div p {
            font-size: 1.4rem; } }
    main #step > dl dd.step_union {
      background-color: #ffffff;
      position: relative;
      margin-right: 15px; }
      main #step > dl dd.step_union::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: -2px;
        bottom: -2px;
        background: -moz-radial-gradient(bottom right, ellipse cover, #faaa32 0%, rgba(250, 170, 50, 0) 75%);
        background: -webkit-radial-gradient(bottom right, ellipse cover, #faaa32 0%, rgba(250, 170, 50, 0) 75%);
        background: radial-gradient(ellipse at bottom right, #faaa32 0%, rgba(250, 170, 50, 0) 75%); }
      main #step > dl dd.step_union > div::after {
        content: none; }
      main #step > dl dd.step_union .step_bgimg {
        padding-right: 0; }
        @media screen and (min-width: 736px) {
          main #step > dl dd.step_union .step_bgimg {
            display: flex;
            align-items: center;
            width: 50%; } }
  main .three_chara img {
    width: 100%; }
  main .skincare1 {
    margin: 20px 0; }
    main .skincare1 div {
      margin-bottom: 20px; }
    main .skincare1 img {
      width: 100%; }
  main .arrow1 {
    width: 5%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px; }
  main #commitment {
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px; }
    @media screen and (min-width: 736px) {
      main #commitment {
        margin-top: 50px; } }
    @media screen and (min-width: 736px) {
      main #commitment {
        margin-bottom: 50px; } }
    main #commitment h3 img {
      width: 100%; }
    main #commitment dl {
      background-size: 100%;
      background-image: url("../img/bg_commitment_sp.png");
      padding-bottom: 30px; }
      @media screen and (min-width: 736px) {
        main #commitment dl {
          padding-bottom: 50px; } }
      @media screen and (min-width: 736px) {
        main #commitment dl {
          background-image: url("../img/bg_commitment.png"); } }
      main #commitment dl dt {
        text-align: center; }
        main #commitment dl dt img {
          width: 100%;
          filter: drop-shadow(0 0 50px #ffffff); }
      main #commitment dl dd {
        padding-left: 15px;
        padding-right: 15px; }
        main #commitment dl dd > p {
          text-align: center;
          margin-bottom: 1em; }
        main #commitment dl dd > img {
          display: block;
          width: 100%;
          max-width: 690px;
          margin: 0 auto; }
        main #commitment dl dd .commitment_img_b {
          max-width: 960px; }
        main #commitment dl dd .commitment_point {
          max-width: 960px;
          margin: 1em auto 0;
          background-color: #ffffff; }
          main #commitment dl dd .commitment_point > span {
            display: block;
            position: relative;
            text-align: center;
            padding: 5px 3em;
            background-color: #6ea0a0;
            cursor: pointer; }
            main #commitment dl dd .commitment_point > span:hover {
              opacity: 1 !important; }
            @media screen and (min-width: 736px) {
              main #commitment dl dd .commitment_point > span:hover {
                opacity: 1 !important; } }
            main #commitment dl dd .commitment_point > span::before, main #commitment dl dd .commitment_point > span::after {
              content: "";
              display: block;
              position: absolute;
              top: 50%;
              transform: translateY(-50%); }
            main #commitment dl dd .commitment_point > span::before {
              border-bottom: 1px solid #ffffff;
              right: 15px;
              width: 1em; }
              @media screen and (min-width: 736px) {
                main #commitment dl dd .commitment_point > span::before {
                  width: 1.5em; } }
            main #commitment dl dd .commitment_point > span::after {
              transition: opacity 0.5s;
              border-left: 1px solid #ffffff;
              height: 1em;
              right: calc(15px + 0.45em); }
              @media screen and (min-width: 736px) {
                main #commitment dl dd .commitment_point > span::after {
                  height: 1.5em;
                  right: calc(15px + 0.7em); } }
            main #commitment dl dd .commitment_point > span img {
              max-width: 470px;
              vertical-align: middle; }
          main #commitment dl dd .commitment_point > p,
          main #commitment dl dd .commitment_point > div {
            display: none;
            opacity: 0;
            transition: opacity 0.5s;
            color: #4d4d4d; }
          main #commitment dl dd .commitment_point .sp_menu_op + p, main #commitment dl dd .commitment_point .sp_menu_op + div {
            opacity: 1; }
          main #commitment dl dd .commitment_point .sp_menu_op::after {
            opacity: 0; }
          main #commitment dl dd .commitment_point > p {
            padding: 15px; }
          main #commitment dl dd .commitment_point > div {
            overflow-y: auto; }
            main #commitment dl dd .commitment_point > div ul {
              display: flex;
              padding: 15px 0; }
              main #commitment dl dd .commitment_point > div ul li {
                position: relative;
                text-align: center;
                min-width: 155px;
                flex: 0 0 auto;
                width: calc((100% / 4) - 10px);
                padding: 0 5px;
                font-size: 1.3rem; }
                @media screen and (max-width: 735px) {
                  main #commitment dl dd .commitment_point > div ul li:first-child {
                    padding-left: 15px; }
                  main #commitment dl dd .commitment_point > div ul li:last-child {
                    padding-right: 15px; } }
                @media screen and (min-width: 736px) {
                  main #commitment dl dd .commitment_point > div ul li {
                    width: calc((100% / 4) - 30px);
                    padding: 0 15px;
                    font-size: 1.4rem; } }
                @media screen and (min-width: 1180px) {
                  main #commitment dl dd .commitment_point > div ul li {
                    font-size: 1.6rem; } }
                main #commitment dl dd .commitment_point > div ul li:not(:last-child)::after {
                  content: "";
                  display: block;
                  z-index: 10;
                  background-size: contain;
                  background-repeat: no-repeat;
                  background-position: center center;
                  background-image: url("../img/mk_r.svg");
                  box-sizing: border-box;
                  height: 30px;
                  width: 20px;
                  position: absolute;
                  width: 20px;
                  right: 5px;
                  transform: translateX(50%);
                  top: 22%; }
                  @media screen and (min-width: 736px) {
                    main #commitment dl dd .commitment_point > div ul li:not(:last-child)::after {
                      right: 0; } }
                  @media screen and (min-width: 800px) {
                    main #commitment dl dd .commitment_point > div ul li:not(:last-child)::after {
                      top: 6vw; } }
                  @media screen and (min-width: 1180px) {
                    main #commitment dl dd .commitment_point > div ul li:not(:last-child)::after {
                      top: 30%; } }
                main #commitment dl dd .commitment_point > div ul li img {
                  width: 100%;
                  display: block; }
        main #commitment dl dd .commitment_img_com {
          background-color: #000000;
          color: #ffffff;
          max-width: 690px;
          margin: 0 auto;
          box-sizing: border-box;
          padding: 5px;
          font-size: 1.3rem; }
          @media screen and (min-width: 736px) {
            main #commitment dl dd .commitment_img_com {
              font-size: 1.6rem; } }
        main #commitment dl dd .commitment_herb {
          max-width: 850px;
          margin: 0 auto;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          margin-bottom: 1em; }
          main #commitment dl dd .commitment_herb li {
            box-sizing: border-box;
            max-width: 220px;
            width: calc(100% / 4);
            text-align: center;
            margin: 10px 0;
            font-size: 1.3rem; }
            main #commitment dl dd .commitment_herb li:nth-child(5), main #commitment dl dd .commitment_herb li:nth-child(7) {
              width: calc(100% / 3); }
            @media screen and (max-width: 819px) {
              main #commitment dl dd .commitment_herb li:nth-child(5) {
                padding-left: 6vw; }
              main #commitment dl dd .commitment_herb li:nth-child(7) {
                padding-right: 6vw; } }
            @media screen and (min-width: 736px) {
              main #commitment dl dd .commitment_herb li {
                font-size: 1.6rem; } }
            main #commitment dl dd .commitment_herb li > img {
              width: 100%;
              display: block;
              margin: 0 auto;
              border-radius: 50%;
              max-width: 21vw; }
              @media screen and (min-width: 736px) {
                main #commitment dl dd .commitment_herb li > img {
                  margin-bottom: 0.5em; } }
              @media screen and (min-width: 820px) {
                main #commitment dl dd .commitment_herb li > img {
                  max-width: 160px; } }
        main #commitment dl dd .commitment_aside {
          font-size: 1.2rem;
          margin-bottom: 30px; }
          @media screen and (min-width: 736px) {
            main #commitment dl dd .commitment_aside {
              font-size: 1.4rem;
              margin-bottom: 40px; } }
    main #commitment > img {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%; }
  main #day_night {
    margin-top: 30px; }
    @media screen and (min-width: 736px) {
      main #day_night {
        margin-top: 50px; } }
    main #day_night img {
      width: 100%; }
    main #day_night > div {
      padding-left: 15px;
      padding-right: 15px;
      max-width: 750px;
      margin: 0 auto; }
      @media screen and (max-width: 735px) {
        main #day_night > div {
          margin-top: 1em; } }
  main #voice {
    background-image: url("../img/bg_voice_01.png"), url("../img/bg_voice_02.png"), url("../img/bg_voice_03.png"), url("../img/bg_voice_04.png");
    background-repeat: no-repeat;
    background-position: top left -2.5%, top right -7%, bottom 5% right -4%, bottom left -4%;
    background-size: 10%, 15%, 10%, 15%;
    margin-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px; }
    @media screen and (min-width: 736px) {
      main #voice {
        margin-bottom: 50px; } }
    main #voice h3 {
      text-align: center;
      margin-bottom: 15px; }
      @media screen and (min-width: 736px) {
        main #voice h3 {
          margin-bottom: 30px; } }
      main #voice h3 img {
        max-width: 316px;
        width: 70%;
        margin: 0 auto; }
    @media screen and (min-width: 736px) {
      main #voice ul {
        padding: 0 15px; } }
    main #voice ul li {
      padding: 15px 0; }
      @media screen and (min-width: 736px) {
        main #voice ul li {
          padding: 30px 0;
          display: flex; }
          main #voice ul li:nth-child(odd) {
            flex-direction: row-reverse; }
            main #voice ul li:nth-child(odd) span {
              margin: 0 0 0 2%; } }
      main #voice ul li:not(:last-child) {
        border-bottom: 1px solid #6ea0a0; }
      main #voice ul li span {
        overflow: hidden;
        display: block; }
        main #voice ul li span > img,
        main #voice ul li span > svg {
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
          object-fit: cover;
          font-family: "object-fit: cover;"; }
        @media screen and (max-width: 735px) {
          main #voice ul li span {
            width: 50%;
            height: 0;
            padding-bottom: 60%;
            position: relative;
            margin: 0 auto 10px; }
            main #voice ul li span > img,
            main #voice ul li span > svg {
              position: absolute;
              top: 0;
              left: 0; } }
        @media screen and (min-width: 736px) {
          main #voice ul li span {
            margin-right: 2%;
            width: 28%;
            flex: 0 0 auto; } }
      main #voice ul li div h4 {
        margin-bottom: 0.8em; }
        main #voice ul li div h4 img {
          max-width: 584px; }
      main #voice ul li div > img {
        width: 45%;
        max-width: 182px;
        margin-bottom: 1.5em; }
    main #voice .img_try {
      margin-top: 30px;
      margin-bottom: 30px;
      text-align: center; }
      @media screen and (min-width: 736px) {
        main #voice .img_try {
          margin-top: 50px; } }
      @media screen and (min-width: 736px) {
        main #voice .img_try {
          margin-bottom: 50px; } }
      main #voice .img_try img {
        max-width: 660px; }
  main .end_message {
    padding-left: 15px;
    padding-right: 15px; }
    main .end_message img {
      max-width: 100%; }

header {
  width: 100vw;
  max-width: 100vw; }