@charset "UTF-8";

html{
  scroll-behavior: smooth;
}
/* アンカー位置（#header の実高さに追従）
-----------------------------------------------------------------------
   module.css の .scroll_adjust は 61px/81px の固定値で、#header（sticky・
   お知らせバー込み）の実高さと合わずヘッダーが被るため、page.js が測った
   --header-h で上書きする。JSが動かない場合は下のフォールバック値を使用 */
.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);
  }
}

/* 時限切換え（プラチナ先行）
-----------------------------------------------------------------------
   フラグなし（〜8/29 0:00）    … 全員 COMING SOON（容量・価格は静的）
   is_release_before + is_platinum（8/29 0:00〜9/1 0:00）… プラチナのみ購入可
   is_release_after（9/1 0:00〜） … 全員購入可 */
.branch_icon_area {
  display: flex;
  justify-content: center;
}
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;
}

/* 容量・価格　COMING SOON期間は静的テキスト／購入可期間はebisumartタグ */
.branch_price_after {
  display: none;
}
body:has(.is_release_before):has(.is_platinum) .branch_price_before {
  display: none;
}
body:has(.is_release_before):has(.is_platinum) .branch_price_after {
  display: block;
}
body:has(.is_release_after) .branch_price_before {
  display: none;
}
body:has(.is_release_after) .branch_price_after {
  display: block;
}

/* 商品
-----------------------------------------------------------------------*/
.main img {
  vertical-align: top;
}

.main .mv {
  padding-bottom: min(calc(50 / 768 * 100vw), 50px);

}
.main .item_sec {
  padding: 0 0 min(calc(50 / 768 * 100vw), 50px);
}
.main .item_fig {
  position: relative;
  z-index: 0;
  line-height: 0;
}
/* お気に入りボタンの位置は画像に合わせて要調整 */
.main .item_like {
  position: absolute;
  z-index: 1;
  top: min(calc(20 / 768 * 100vw), 20px);
  right: min(calc(20 / 768 * 100vw), 20px);
}
.main .item_price {
  display: flex;
  align-items: center;
  color: #d24199;
  font-weight: bold;
  margin: 0.6em 0 0;
  padding-left: min(calc(26 / 768 * 100vw), 26px);

}
.main .item_cart {
  margin: 0.8em auto 0;
}

/* 詳しくはこちら */
.main .item_more {
  display: flex;
  justify-content: flex-end;
  line-height: 0;
  margin: min(calc(14 / 768 * 100vw), 14px) 0 0;
  padding-right: min(calc(25 / 768 * 100vw), 25px);
}

/* バナー
-----------------------------------------------------------------------*/
.main .bnr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(calc(32 / 768 * 100vw), 32px);
  padding: 0 0 min(calc(40 / 768 * 100vw), 40px);
}
.main .bnr_item {
  line-height: 0;
}

/* 注釈・SHOP限定キャンペーン
-----------------------------------------------------------------------*/
.main .note {
  display: flex;
  justify-content: center;
  padding: min(calc(10 / 768 * 100vw), 10px) 0 min(calc(36 / 768 * 100vw), 36px);

}
.main .foot {
  padding-bottom: min(calc(40 / 768 * 100vw), 40px);
}

/* ファッション　モーダル */
.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;
  }
}
/* ファッション　モーダル */