@charset "UTF-8";
html{
  scroll-behavior: smooth;
}
/* アンカー位置（ヘッダー実高さに追従） */
.main .scroll_adjust div {
  padding-top: var(--header-h, 61px);
}
@media screen and (768px <= width) {
  .main .scroll_adjust div {
    padding-top: var(--header-h, 81px);
  }
}

/* 販売期間 出し分け
  10/28〜      : 全員 coming soon
  11/01〜11/04 : プラチナのみ購入可
  11/04〜      : 全員購入可
-----------------------------------------------------------------------*/
.branch_icon_area {
  display: flex;
}
body:has(.is_release_before):has(.is_platinum) .branch_icon_area {
  display: none;
}
body:has(.is_release_after) .branch_icon_area {
  display: none;
}
.branch_icon_coming {
  color: #fff;
  line-height: 1.1;
  background-color: #0e6eb8;
  text-align: center;
  padding: 0.3em 1em;
  font-size: min(calc(24 / 768 * 100vw), 16px); 
}

.branch_main_area {
  display: none;
}
body:has(.is_release_before):has(.is_platinum) .branch_main_area {
  display: block;
}
body:has(.is_release_after) .branch_main_area {
  display: block;
}

.branch_price_after {
  display: none;
}
body:has(.is_release_before):has(.is_platinum) .branch_price_before,
body:has(.is_release_after) .branch_price_before {
  display: none;
}
body:has(.is_release_before):has(.is_platinum) .branch_price_after,
body:has(.is_release_after) .branch_price_after {
  display: inline;
}

/* ON SALE
-----------------------------------------------------------------------*/
.onsale {
  line-height: 0;
}

/* MV
-----------------------------------------------------------------------*/
.mv {
  position: relative;
}
.mv_menu {
  position: absolute;
  top: min(calc(709 / 768 * 100vw), 709px);
  left: min(calc(24 / 768 * 100vw), 24px);
}

/* 共通
-----------------------------------------------------------------------*/
.contents {
  background: #f3ede1 url(../img/bg_stripe.webp) repeat-y center top / 100% auto;
  padding-bottom: min(calc(60 / 768 * 100vw), 60px);
}

/* 商品 */
.item {
  padding: min(calc(34 / 768 * 100vw), 34px) min(calc(24 / 768 * 100vw), 24px) min(calc(50 / 768 * 100vw), 50px);
}
.item_main {
  position: relative;
}
.item_favorite {
  position: absolute;
  top: min(calc(20 / 768 * 100vw), 20px);
  right: min(calc(10 / 768 * 100vw), 10px);
}
.item02 .item_favorite {
  top: min(calc(40 / 768 * 100vw), 40px);
  right: auto;
  left: min(calc(4 / 768 * 100vw), 4px);
}
.item_lead {
  font-weight: bold;
  line-height: 1.75;
  margin-top: min(calc(18 / 768 * 100vw), 18px);
}
.item_price {
  margin-top: min(calc(26 / 768 * 100vw), 26px);
}
.item_price_tax {
  font-size: 60%;
}
.item_cart {
  margin-top: min(calc(10 / 768 * 100vw), 10px);
}
.item_set {
  text-align: center;
  margin-top: min(calc(46 / 768 * 100vw), 46px);
}

/* 詳しい商品特長はこちら */
.detail_link {
  display: inline-flex;
  align-items: center;
  gap: 0 0.5em;
  color: #000;
  font-weight: bold;
  background: #f3ede1;
  border: min(calc(2 / 768 * 100vw), 2px) solid #000;
  border-radius: 2em;
  padding: 0.3em 1.4em;
  margin-top: min(calc(20 / 768 * 100vw), 20px);
}
.detail_link::before {
  content: "";
  width: 0.5em;
  height: 0.6em;
  background-color: #000;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

/* 商品詳細
-----------------------------------------------------------------------*/
.detail {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  padding: min(calc(60 / 768 * 100vw), 60px) min(calc(24 / 768 * 100vw), 24px) min(calc(60 / 768 * 100vw), 60px);
}
.detail_toneup {
  background-image: url(../img/bg_toneup.webp);
}
.detail_handcare {
  background-image: url(../img/bg_handcare.webp);
}

.detail_block {
  display: flex;
  align-items: center;
  gap: 0 min(calc(16 / 768 * 100vw), 16px);
}
.detail_block + .detail_block {
  margin-top: min(calc(50 / 768 * 100vw), 50px);
}
.detail_text {
  flex: 1;
  min-width: 0;
}
.detail_img {
  flex-shrink: 0;
  text-align: center;
}
.detail_ttl {
  margin-left: max(calc(-24 / 768 * 100vw), -24px);
}
.detail_name {
  white-space: nowrap;
  font-weight: bold;
  margin-top: min(calc(8 / 768 * 100vw), 8px);
}
.detail_desc {
  line-height: 1.75;
  margin-top: min(calc(14 / 768 * 100vw), 14px);
}
.detail_note {
  font-size: 60%;
}
.detail_point {
  display: inline-block;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  background: #fef6d4;
  padding: 0.5em 1.6em;
  margin-top: min(calc(20 / 768 * 100vw), 20px);
}
.detail_size {
  display: flex;
  align-items: center;
  gap: 0 min(calc(24 / 768 * 100vw), 24px);
  margin-top: min(calc(24 / 768 * 100vw), 24px);
}
.detail_size dd {
  white-space: nowrap;
}
.detail_size dt {
  font-weight: bold;
  background: #fff;
  text-align: center;
  width: min(calc(100 / 768 * 100vw), 100px);
  padding: 0.2em 0;
}

/* モイスチャー アイケア スティック */
.ver_eyecare .detail_text {
  padding-left: min(calc(28 / 768 * 100vw), 28px);
}
.ver_eyecare .detail_img {
  padding-right: min(calc(30 / 768 * 100vw), 30px);
}

/* ルース フェイス パウダー */
.ver_powder {
  align-items: flex-start;
}
.ver_powder .detail_img {
  margin-left: max(calc(-24 / 768 * 100vw), -24px);
}
.ver_powder .detail_ttl {
  margin-left: max(calc(-34 / 768 * 100vw), -34px);
}

/* プルタブデザイン ポーチ */
.ver_pouch .detail_text {
  padding-left: min(calc(28 / 768 * 100vw), 28px);
}
.ver_pouch .detail_img {
  position: relative;
  width: min(calc(310 / 768 * 100vw), 310px);
  --swiper-navigation-size: min(calc(16 / 768 * 100vw), 16px);
  --swiper-navigation-color: #fff;
}
.js_pouch_swiper .swiper-slide img {
  width: 100% !important;
  height: auto;
}
.ver_pouch .swiper-button-prev,
.ver_pouch .swiper-button-next {
  width: min(calc(40 / 768 * 100vw), 40px);
  height: min(calc(40 / 768 * 100vw), 40px);
  margin-top: max(calc(-20 / 768 * 100vw), -20px);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
}
.ver_pouch .swiper-button-prev {
  left: max(calc(-18 / 768 * 100vw), -18px);
}
.ver_pouch .swiper-button-next {
  right: max(calc(-6 / 768 * 100vw), -6px);
}

/* ハンドクリーム */
.handcream {
  display: flex;
}
.handcream_col {
  flex: 1;
  min-width: 0;
  padding: 0 min(calc(12 / 768 * 100vw), 12px);
}
.handcream_col + .handcream_col {
  border-left: min(calc(4 / 768 * 100vw), 4px) dotted #fff;
}
.handcream .detail_ttl {
  margin-left: max(calc(-12 / 768 * 100vw), -12px);
}
.handcream .detail_name {
  padding-left: min(calc(24 / 768 * 100vw), 24px);
}
.handcream_scent {
  text-align: center;
  line-height: 1.4;
  background: #fff;
  border-radius: min(calc(12 / 768 * 100vw), 12px);
  padding: 0.6em 0.2em;
  margin-top: min(calc(14 / 768 * 100vw), 14px);
}
.handcream_scent_name {
  font-weight: bold;
}
.handcream_scent_name.ver_sr {
  color: #e8b23a;
}
.handcream_scent_name.ver_pv {
  color: #ef8a94;
}
.handcream_img {
  text-align: center;
  margin-top: min(calc(24 / 768 * 100vw), 24px);
}
.handcream .detail_desc {
  padding-left: min(calc(12 / 768 * 100vw), 12px);
  margin-top: min(calc(24 / 768 * 100vw), 24px);
}
.handcream .detail_link {
  margin-left: min(calc(42 / 768 * 100vw), 42px);
}

/* アイスクリームデザイン ハンキーズ */
.ver_hankies {
  margin-top: min(calc(50 / 768 * 100vw), 50px);
}
.ver_hankies .detail_text {
  padding-left: min(calc(36 / 768 * 100vw), 36px);
}
.ver_hankies .detail_name {
  letter-spacing: -0.05em;
}
.detail_zoom {
  display: block;
  position: relative;
  width: min(calc(316 / 768 * 100vw), 316px);
}
.detail_zoom img {
  width: 100% !important;
  height: auto;
}
.detail_zoom::after {
  content: "";
  position: absolute;
  right: min(calc(6 / 768 * 100vw), 6px);
  bottom: min(calc(6 / 768 * 100vw), 6px);
  width: min(calc(30 / 768 * 100vw), 30px);
  height: min(calc(30 / 768 * 100vw), 30px);
  border-radius: 50%;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15l5 5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 60% auto;
}
.js_zoom_modal .modal_modmicro_container {
  max-width: 600px;
}
.js_zoom_modal .modal_modmicro_content img {
  width: 100% !important;
  height: auto;
}

/* パッケージ
-----------------------------------------------------------------------*/
.package {
  text-align: center;
  padding-top: min(calc(30 / 768 * 100vw), 30px);
}
.package_note {
  text-align: right;
  padding-right: min(calc(24 / 768 * 100vw), 24px);
  margin-top: min(calc(6 / 768 * 100vw), 6px);
}

/* バナー・コピーライト
-----------------------------------------------------------------------*/
.bnr {
  text-align: center;
  padding: min(calc(20 / 768 * 100vw), 20px) min(calc(24 / 768 * 100vw), 24px) 0;
}
.bnr a {
  display: block;
}
.copyright {
  text-align: center;
  margin-top: min(calc(56 / 768 * 100vw), 56px);
}
.handcream .detail_desc {
  letter-spacing: -0.04em;
}