@charset "UTF-8";
.custom-col_GLD {
  color: #C6AC62 !important;
}

@media screen and (max-width: 992px) {
  .custom-kv .cmd-modal-video_txtarea {
    margin: auto;
    position: absolute;
    top: 20vw;
    left: 0;
    right: 0;
    z-index: 10;
  }
}
@media screen and (max-width: 767px) {
  .custom-kv + .cmd-title-section._h2 {
    margin-top: 40px;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .custom-box_container .cmd-box_container .box:nth-child(n+2) {
    margin-top: 50px !important;
  }
}
@media screen and (max-width: 767px) {
  .custom-box_container .cmd-box_container .box:nth-child(n+2) {
    margin-top: 30px !important;
  }
}

.custom-wide_container {
  background: #C6AC62;
}
@media screen and (min-width: 768px) {
  .custom-wide_container {
    padding-bottom: 100px;
  }
  .custom-wide_container .cmd-title-section._h2 {
    margin-top: -120px;
  }
}
@media screen and (max-width: 767px) {
  .custom-wide_container {
    padding-bottom: 80px;
  }
  .custom-wide_container .cmd-title-section._h2 {
    margin-top: -15vw;
  }
}

@media screen and (min-width: 768px) {
  .custom-table {
    padding-left: 200px;
    justify-content: space-between;
  }
  .custom-table.cmd-box_container.box-md-2 > .box {
    padding: 0 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  .custom-table {
    padding-left: 120px;
  }
  .custom-table.cmd-box_container.box-md-2 > .box {
    padding: 0 30px;
  }
}

.custom-table_head .cmd-col-card_link > .thumb {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .custom-table_head {
    padding-bottom: 20px;
  }
  .custom-table_head .cmd-col-card_link > .thumb img {
    max-width: 350px;
  }
}
@media screen and (max-width: 767px) {
  .custom-table_head .cmd-col-card_link > .thumb img {
    max-width: 100%;
  }
  .custom-table_head [class^="custom-feature"],
  .custom-table_head [class^="custom-benefits"] {
    text-align: left;
    position: relative;
    margin-top: 0 !important;
    padding-top: 0;
  }
  .custom-table_head [class^="custom-feature"]::before,
  .custom-table_head [class^="custom-benefits"]::before {
    content: "";
    border-top: 1px solid #fff;
    background: transparent;
    font-size: 2.2rem;
    color: #fff;
    text-align: center;
    margin: auto;
    padding: 30px 0 20px;
    display: block;
    width: 130px;
    height: auto;
    position: static;
    transform: unset;
    -webkit-transform: unset;
    -moz-transform: unset;
    -ms-transform: unset;
    -o-transform: unset;
  }
  .custom-table_head [class^="custom-feature"]::before {
    content: "Features";
    margin-top: 40px;
  }
  .custom-table_head [class^="custom-benefits"]::before {
    content: "Benefits";
    margin-top: 0;
  }
}

.custom-table_body {
  border-top: 1px solid #fff;
  padding-top: 30px;
}
.custom-table_body .cmd-col-card_txt .cmd-visual_card {
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .custom-table_body.custom-table_features, .custom-table_body.custom-table_benefits {
    align-items: center;
    position: relative;
  }
  .custom-table_body.custom-table_features::before, .custom-table_body.custom-table_benefits::before {
    color: #fff;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
  }
  .custom-table_body.custom-table_features::before {
    content: "คุณสมบัติ";
  }
  .custom-table_body.custom-table_benefits::before {
    content: "คุณประโยชน์";
  }
}
@media screen and (max-width: 767px) {
  .custom-table_body {
    display: none;
  }
}

.custom-chart_container {
  /*
  &.is-fixed {
      overflow-y: auto;
  }
  */
}

.custom-chart_container {
  background: url("../images/bg.jpg") no-repeat top center/cover;
  background-attachment: fixed;
}
.custom-chart_container [class^="custom-chart_step"] {
  background: rgba(255, 255, 255, 0.7);
}
.custom-chart_container [class^="custom-chart_step"].custom-chart_step-additional {
  border: 1px solid #C6AC62;
  background: #fff;
}
.custom-chart_container [class^="custom-chart_step"].custom-chart_step-additional .cmd-products_card > a {
  padding-bottom: 0;
}
.custom-chart_container [class^="custom-chart_step"].custom-chart_step-additional .cmd-products_card .thumb img {
  max-width: 110px;
}
.custom-chart_container [class^="custom-chart_step"].custom-chart_step-additional .cmd-products_card .item-name {
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-chart_container [class^="custom-chart_step"].custom-chart_step-additional .cmd-products_card .item-name_sub {
  font-size: 1.1rem;
}
.custom-chart_container [class^="custom-chart_step"].custom-chart_step04 .cmd-products_card_submit {
  margin: auto;
  width: 260px;
}
.custom-chart_container [class^="custom-chart_step"].custom-chart_step04 .cmd-products_card_submit a {
  width: 100%;
}
.custom-chart_container [class^="custom-chart_step"] .cmd-products_card > a {
  padding-bottom: 30px;
}
.custom-chart_container [class^="custom-chart_step"] .cmd-products_card .thumb img {
  max-width: 120px;
}
.custom-chart_container .custom-chart_step01:not(.custom-chart_step-additional) .cmd-title-section::before,
.custom-chart_container .custom-chart_step02:not(.custom-chart_step-additional) .cmd-title-section::before {
  content: "";
  background: url("../images/step/icon_both.svg") no-repeat center center/contain;
  display: block;
  margin: auto;
  height: 20px;
  width: 40px;
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
}
.custom-chart_container .custom-chart_step04 [class^="custom-icon_"]::before {
  content: "";
  display: block;
  margin: auto;
  height: 20px;
  width: 20px;
}
.custom-chart_container .custom-chart_step04 .custom-icon_morning::before {
  background: url("../images/step/icon_morning.svg") no-repeat center center/contain;
}
.custom-chart_container .custom-chart_step04 .custom-icon_night::before {
  background: url("../images/step/icon_night.svg") no-repeat center center/contain;
}
@media screen and (min-width: 768px) {
  .custom-chart_container [class^="custom-chart_step"] {
    margin-top: 30px;
    padding: 40px !important;
  }
  .custom-chart_container [class^="custom-chart_step"].custom-chart_step03 .cmd-title-section + .custom-chart {
    margin-top: 80px;
  }
  .custom-chart_container [class^="custom-chart_step"].custom-chart_step-additional {
    margin-top: 80px;
  }
  .custom-chart_container [class^="custom-chart_step"] .cmd-visual_container .cmd-visual_txt {
    padding: 0;
  }
}
@media screen and (min-width: 993px) and (max-width: 1270px) {
  .custom-chart_container [class^="custom-chart_step"].custom-chart_step03 {
    max-width: calc( 100% - 80px );
  }
  .custom-chart_container [class^="custom-chart_step"].custom-chart_step03 .cmd-title-section + .custom-chart {
    margin-top: 20px;
  }
  .custom-chart_container [class^="custom-chart_step"].custom-chart_step-additional {
    margin-top: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  .custom-chart_container [class^="custom-chart_step"].custom-chart_step03 {
    max-width: calc( 100% - 40px );
  }
  .custom-chart_container [class^="custom-chart_step"].custom-chart_step03 .cmd-title-section + .custom-chart {
    margin-top: 60px;
  }
}
@media screen and (max-width: 767px) {
  .custom-chart_container {
    padding: 80px 0 !important;
  }
  .custom-chart_container [class^="custom-chart_step"] {
    padding: 30px 15px !important;
  }
  .custom-chart_container [class^="custom-chart_step"].custom-chart_step03 {
    max-width: calc( 100% - 30px );
  }
  .custom-chart_container [class^="custom-chart_step"].custom-chart_step03 .custom-chart {
    margin-top: 30px !important;
  }
}

.custom-slider .slick-track {
  justify-content: space-around;
}
@media screen and (min-width: 993px) {
  .custom-slider .slick-track {
    width: 100% !important;
  }
}
.custom-chart_step-additional .custom-slider {
  margin-top: -10px !important;
}
.custom-chart_step-additional .custom-slider .cmd-slide {
  padding-top: 12px;
}
.custom-chart_step-additional .custom-slider .item-name_sub.fontSS {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
}
@media screen and (max-width: 992px) {
  .custom-chart_step04 .custom-slider .cmd-slide:nth-child(n+2) {
    margin-top: 30px !important;
  }
}

.custom-chart {
  background: url("../images/bg_arrow.png") no-repeat center center/cover;
  height: 565px;
  position: relative;
}
.custom-chart [class^="custom-chart_label-"] {
  font-size: 1.6rem;
  margin: 0;
  position: absolute;
}
.custom-chart .custom-chart_label-top {
  top: -40px;
  left: 0;
  right: 0;
  text-align: center;
}
.custom-chart .custom-chart_label-bottom {
  bottom: -40px;
  left: 0;
  right: 0;
  text-align: center;
}
.custom-chart .custom-chart_label-left {
  top: 50%;
  left: -120px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
.custom-chart .custom-chart_label-right {
  top: 50%;
  right: -120px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
.custom-chart [class^="custom-chart_item"] {
  text-align: center;
  position: absolute;
}
.custom-chart [class^="custom-chart_item"] a {
  text-decoration: none;
}
.custom-chart [class^="custom-chart_item"] .thumb {
  margin: auto;
  width: 110px;
}
.custom-chart [class^="custom-chart_item"] .txt {
  font-size: 1.4rem;
}
.custom-chart [class^="custom-chart_item"] .txt.fontSS {
  color: #C6AC62;
  font-size: 1.1rem !important;
}
.custom-chart [class^="custom-chart_item"] .txt_sub {
  color: #C6AC62;
  font-size: 1.2rem;
}
.custom-chart .custom-chart_item01 {
  top: 0;
  left: 0;
}
.custom-chart .custom-chart_item02 {
  top: -17px;
  left: 150px;
}
.custom-chart .custom-chart_item03 {
  /*top: 40px;*/
  right: 230px;
}
.custom-chart .custom-chart_item04 {
  top: 0;
  right: 0;
}
.custom-chart .custom-chart_item05 {
  bottom: 30px;
  left: 150px;
}
@media screen and (min-width: 993px) and (max-width: 1270px) {
  .custom-chart {
    transform: scale(0.82);
    -webkit-transform: scale(0.82);
    -moz-transform: scale(0.82);
    -ms-transform: scale(0.82);
    -o-transform: scale(0.82);
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  .custom-chart.cmd-section.cmd-mini_container {
    height: calc((80vw - 120px) / 1.46);
    width: calc(80vw - 120px) !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .custom-chart .custom-chart_label-top,
  .custom-chart .custom-chart_label-bottom {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
  }
  .custom-chart .custom-chart_label-left,
  .custom-chart .custom-chart_label-right {
    transform: translateY(-50%) scale(0.8);
    -webkit-transform: translateY(-50%) scale(0.8);
    -moz-transform: translateY(-50%) scale(0.8);
    -ms-transform: translateY(-50%) scale(0.8);
    -o-transform: translateY(-50%) scale(0.8);
  }
  .custom-chart .custom-chart_label-top {
    top: -30px;
  }
  .custom-chart .custom-chart_label-bottom {
    bottom: -30px;
  }
  .custom-chart .custom-chart_label-left {
    left: -100px;
  }
  .custom-chart .custom-chart_label-right {
    right: -100px;
  }
  .custom-chart [class^="custom-chart_item"] {
    /*
    transform: scale( 0.8 );
    -webkit-transform: scale( 0.8 );
    -moz-transform: scale( 0.8 );
    -ms-transform: scale( 0.8 );
    -o-transform: scale( 0.8 );
    */
  }
  .custom-chart [class^="custom-chart_item"] .thumb {
    width: 10vw;
  }
  .custom-chart [class^="custom-chart_item"] .txt {
    font-size: 1.25vw;
  }
  .custom-chart [class^="custom-chart_item"] .txt.fontSS {
    font-size: 1vw !important;
    margin-top: 0 !important;
  }
  .custom-chart [class^="custom-chart_item"] .txt_sub {
    font-size: 1.1vw;
  }
  .custom-chart [class^="custom-chart_item"].custom-chart_item01 {
    top: -2%;
    left: -2%;
  }
  .custom-chart [class^="custom-chart_item"].custom-chart_item02 {
    top: -5.4%;
    left: 15%;
  }
  .custom-chart [class^="custom-chart_item"].custom-chart_item03 {
    top: 5%;
    right: 25%;
  }
  .custom-chart [class^="custom-chart_item"].custom-chart_item04 {
    top: -2%;
    right: -2%;
  }
  .custom-chart [class^="custom-chart_item"].custom-chart_item05 {
    bottom: 5%;
    left: 15%;
  }
}
@media screen and (max-width: 767px) {
  .custom-chart {
    background: none;
  }
  .custom-chart .custom-chart_icon {
    display: block;
    position: absolute;
    bottom: 50px;
    right: 20px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
  }
  .custom-chart .custom-chart_icon.is-show {
    opacity: 7;
  }
}

#zoom {
  position: relative;
  overflow: hidden;
  touch-action: none;
  /* タッチジェスチャーを有効にする */
  width: 100%;
  height: auto;
  height: 80vw;
}

#image {
  display: block;
  width: 100%;
  /* 初期は親要素の幅に合わせる */
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  cursor: grab;
  /* ドラッグ操作のためのポインター */
}

/*# sourceMappingURL=gold-vitality-serum.css.map */