@charset "UTF-8";

/* ============================================================
   beautycare2605 / page.css
   ============================================================ */

/* ベースカラー変数 */
:root {
  --bc-color-main: #3d3535; /* メインテキスト */
  --bc-color-accent: #c4017f; /* アクセント */
  --bc-color-bg: #faf6f4; /* セクション背景 */
  --bc-color-box: #f4ece9; /* ボックス背景 */

  --color-light-red-1: #f09f9f;
  --color-white: #ffffff;
  --color-light-red-2: #f0a09f;
  --color-very-dark-gray-1: #333333;
  --color-yellow-1: #bea165;
  --color-very-dark-gray-2: #383838;
  --color-black-1: #080808;
  --color-black-2: #000000;
  --color-very-dark-gray-3: #3a3428;
  --color-yellow-2: #c2a665;
  --color-very-dark-gray-4: #4d4d4d;
  --color-black-3: #11100f;
  --color-blue: #597eff;
  --color-yellow-3: #c2a467;
  --color-very-dark-yellow: #34280d;
  --color-orange: #df873d;
}

/* ============================================================
   共通
   ============================================================ */
.main .fs40vw {
  font-size: min(calc(40 / 768 * 100vw), 40px) !important;
}
.inner_708px {
  width: min(calc(100% - min(calc(60 / 768 * 100vw), 60px)), 708px);
  margin-inline: auto;
}
.d_block {
  display: block;
}
small {
  font-size: min(calc(14 / 768 * 100vw), 14px);
}
/* ============================================================
   イントロテキスト
   ============================================================ */
.head {
  display: grid;
}
.head .contents {
}
.head .contents,
.head img {
  grid-area: 1 / 1;
}
.head .contents .bnr {
  margin-block: min(calc(30 / 768 * 100vw), 30px)
    min(calc(20 / 768 * 100vw), 20px);
}
.main .text-right {
  text-align: right;
}
.intro1_text span {
  color: var(--color-yellow-1);
}
.main .intro1_text {
  font-weight: bold;
  color: var(--color-very-dark-gray-2);
}

.main .intro2_text {
  color: var(--color-black-1);
  margin-top: 10px;
}

/* ============================================================
   ボディテキスト
   ============================================================ */
.main .body_section {
  background-image: url("../img/bg_40th.webp");
  background-size: 100% auto;
  padding-block: min(calc(30 / 768 * 100vw), 30px);
}
.main .body_text {
  color: var(--color-very-dark-gray-2);
}
.main .body_text span {
  color: var(--color-orange);
  font-weight: bold;
}
.text-shadow-white {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 0 3px white) drop-shadow(0 0 6px white);
}
/* ============================================================
   CTAボタン
   ============================================================ */

.main .cta_wrap {
  border-radius: min(calc(10 / 768 * 100vw), 10px);
  box-shadow: max(calc(-10 / 768 * 100vw), -10px)
    min(calc(10 / 768 * 100vw), 10px) 0px 0px rgb(246, 227, 194);
}
.main .cta_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(calc(12 / 768 * 100vw), 12px);
  padding-block: min(calc(10 / 768 * 100vw), 10px);
  border: min(calc(3 / 768 * 100vw), 3px) solid #bf951f;
  text-decoration: none;
  background-image: -moz-linear-gradient(
    0deg,
    rgb(194, 166, 101) 0%,
    rgb(239, 221, 179) 51%,
    rgb(194, 166, 101) 100%
  );
  background-image: -webkit-linear-gradient(
    0deg,
    rgb(194, 166, 101) 0%,
    rgb(239, 221, 179) 51%,
    rgb(194, 166, 101) 100%
  );
  background-image: -ms-linear-gradient(
    0deg,
    rgb(194, 166, 101) 0%,
    rgb(239, 221, 179) 51%,
    rgb(194, 166, 101) 100%
  );
  border-radius: min(calc(10 / 768 * 100vw), 10px);
}

.main .cta_icon {
  position: relative;
  width: min(calc(35 / 768 * 100vw), 35px);
  height: min(calc(35 / 768 * 100vw), 35px);
  border-radius: 50%;
  background: #fff;
}
.main .cta_icon::before {
  content: "";
  position: absolute;
  background-color: #bf951f;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  width: min(calc(13 / 768 * 100vw), 13px);
  height: min(calc(15 / 768 * 100vw), 15px);
  top: 50%;
  left: calc(50% + min(calc(2 / 768 * 100vw), 2px));
  transform: translate(-50%, -50%);
}
.main .cta_text {
  color: #fff;
  text-shadow: 0px 0px 4.55px rgba(217, 164, 71, 0.95);
  font-weight: bold;
}

/* ============================================================
   キャッチコピー
   ============================================================ */
.main .catch {
  background-image: -moz-linear-gradient(
    176deg,
    rgb(230, 167, 107) 2%,
    rgb(223, 135, 61) 23%,
    rgb(223, 135, 61) 78%,
    rgb(233, 185, 131) 100%
  );
  background-image: -webkit-linear-gradient(
    176deg,
    rgb(230, 167, 107) 2%,
    rgb(223, 135, 61) 23%,
    rgb(223, 135, 61) 78%,
    rgb(233, 185, 131) 100%
  );
  background-image: -ms-linear-gradient(
    176deg,
    rgb(230, 167, 107) 2%,
    rgb(223, 135, 61) 23%,
    rgb(223, 135, 61) 78%,
    rgb(233, 185, 131) 100%
  );
  border-top: min(calc(6 / 768 * 100vw), 6px) solid var(--color-yellow-1);
  border-bottom: min(calc(6 / 768 * 100vw), 6px) solid #fff;
}
.main .catch_text {
  text-align: center;
  color: #fff;
  font-weight: bold;
}

/* ============================================================
   商品共通
   ============================================================ */
.main .product_name {
  color: rgb(190, 161, 101);
}

/* ============================================================
   フェイスマスク
   ============================================================ */

.main .product1 .contents {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.main .product1 {
  display: grid;
  padding-bottom: min(min(45 / 768 * 100vw), 45px);
}
.main .product1 .contents,
.main .product1 img {
  grid-area: 1 / 1;
}

.main .product1 .contents .bottom{
      position: relative;
    top: min(min(45 / 768 * 100vw), 45px);
}
.main .product1_desc {
  color: var(--color-black-2);
}
.main .btn_more {
  margin-inline: auto;
  width: min(calc(265 / 768 * 100vw), 265px);
}
/* ============================================================
   セラム
   ============================================================ */
.main .product2 {
  background-color: #fff;
}
.main .product2 {
  display: grid;
}
.main .product2 .contents,
.main .product2 img {
  grid-area: 1 / 1;
}
.main .product2_head {
  display: flex;
  flex-direction: column;
  align-items: end;
}
.main .product2_head .product_name {
  text-align: right;
}
/* 医薬部外品バッジ */
.main .badge_iyakubu {
  display: inline-block;
  padding-inline: min(calc(5 / 768 * 100vw), 5px);
  border: 1px solid var(--color-very-dark-gray-3);
  color: var(--color-very-dark-gray-3);
  font-weight: bold;
  background: var(--color-white);
}

.main .hanbaisya {
  color: var(--color-very-dark-gray-3);
  text-align: right;
}

/* ============================================================
   機能バッジ（サークル）
   ============================================================ */
.main .feature_badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: min(calc(10 / 768 * 100vw), 10px);
}
.main .badge_row {
  display: flex;
  justify-content: center;
  gap: min(calc(10 / 768 * 100vw), 10px);
}

.main .badge_row_center {
  justify-content: center;
}

.main .badge_circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(calc(100 / 768 * 100vw), 100px);
  height: min(calc(100 / 768 * 100vw), 100px);
  border-radius: 50%;
  background-color: rgb(194, 166, 101);
  color: #fff;
  text-align: center;
  line-height: 1.3;
  font-weight: bold;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 各バッジのカラー */
.main .badge_row:nth-child(1) .badge_circle:nth-child(1),
.main .badge_row:nth-child(1) .badge_circle:nth-child(2),
.main .badge_row:nth-child(1) .badge_circle:nth-child(3) {
  background-image: -moz-linear-gradient(
    63deg,
    rgb(223, 135, 61) 0%,
    rgb(233, 185, 131) 100%
  );
  background-image: -webkit-linear-gradient(
    63deg,
    rgb(223, 135, 61) 0%,
    rgb(233, 185, 131) 100%
  );
  background-image: -ms-linear-gradient(
    63deg,
    rgb(223, 135, 61) 0%,
    rgb(233, 185, 131) 100%
  );
}

/* ============================================================
   セラム 商品説明テキスト
   ============================================================ */
.main .product2_desc {
  color: var(--color-black-2);
  margin-top: min(calc(126 / 768 * 100vw), 126px);
}

/* ============================================================
   ナイアシンアミド説明ボックス
   ============================================================ */
.main .ingredient_box {
  background-color: #f0ebdf;
  padding-bottom: 1em;
}
.ingredient_box .bgwhite {
  background: #fff;

  border: 1px solid rgb(221, 221, 221);
  margin-inline: 2%;
  padding: 3%;
}
.main .ingredient_ttl {
  font-weight: bold;
  color: var(--color-yellow-2);
  margin-inline: 2%;
}

.main .ingredient_lead {
  color: var(--bc-color-main);
  margin-bottom: min(calc(20 / 768 * 100vw), 20px);
  font-weight: bold;
}

/* 3カラム画像 */
.main .ingredient_features {
  display: flex;
  justify-content: space-between;
  gap: 1%;
}
.ingredient_item .thumb {
  height: min(calc(239 / 768 * 100vw), 239px);
  display: flex;
  align-items: flex-end;
}

.ingredient_item p > span {
  color: #777;
  font-size: min(calc(14 / 768 * 100vw), 14px);
}

.main .ingredient_item {
  text-align: center;
}
.main .ingredient_item p {
  color: var(--bc-color-main);
  font-weight: bold;
}

/* ============================================================
   脚注
   ============================================================ */
.main .footnote {
}
.footnote .note_text {
  color: var(--color-very-dark-gray-4);
  border-top: min(calc(6 / 768 * 100vw), 6px) solid var(--color-yellow-1);
}
.bnr_list li:not(:last-child) {
  margin-bottom: 3%;
}

/* ファッション　モーダル */
.main .js_fashion_modal .modal_modmicro_overlay {
  padding: 20px 0;
}
@media screen and (768px <= width) {
  .main .js_fashion_modal .modal_modmicro_overlay {
    padding: 20px 20px;
  }
}
.main .js_fashion_modal .swiper {
  --swiper-pagination-bullet-inactive-color: #b4b4b4;
  --swiper-pagination-color: #000;
  padding: 0 0 10px;
}
.main .js_fashion_modal .modal_modmicro_container {
  max-width: 800px;
}
.main .js_fashion_modal .swiper-slide {
  text-align: center;
}
.main .js_fashion_modal .swiper-slide img {
  width: 100% !important;
  max-width: none;
}
.main .js_fashion_modal .swiper-pagination {
  position: static;
  margin: 10px 0 0;
}
.main .js_fashion_modal .swiper-button-next,
.main .js_fashion_modal .swiper-button-prev {
  display: none;
}
@media screen and (992px <= width) {
  .main .js_fashion_modal .swiper-button-next,
  .main .js_fashion_modal .swiper-button-prev {
    display: block;
    color: #000;
  }
}