@charset "UTF-8";

/* アンカー位置（#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);
  }
}

/* 共通
-----------------------------------------------------------------------*/
.main img {
  vertical-align: top;
}
.main a {
  color: inherit;
}

.main .section1{
margin-top: min(calc(23 / 768 * 100vw), 23px);
}
/* 10/1〜 切り替え後 */
.main .section1.ver_after{
  margin-top: 0;
}
/* 中央寄せの画像セクション */
.main .section1,
.main .section3,
.main .cream,
.main .bnr {
  display: block;
  line-height: 0;
  text-align: center;
}
.main .cream {
  margin: min(calc(40 / 768 * 100vw), 40px) 0 0;
}
.main .bnr {
  margin: min(calc(30 / 768 * 100vw), 30px) 0 0;
}

/* メインビジュアル
-----------------------------------------------------------------------
   mv.webp（768×705）のデザイン位置に、お気に入り・容量価格・カートを重ねる。
   位置は画像内の実測値をそのまま % に換算しているので、画像を差し替えた
   ときは下の数値も合わせて調整すること */
.main .mv {
  position: relative;
  z-index: 0;
}

/* お気に入り　画像内 x688〜744 / y38〜94（56px角） */
.main .mv_like {
  position: absolute;
  z-index: 1;
  top: calc(38 / 705 * 100%);
  right: calc(24 / 768 * 100%);
  line-height: 0;
}
.main .mv_like .i_favorite_btn.ver_variable {
  width: min(calc(56 / 768 * 100vw), 56px);
  height: min(calc(56 / 768 * 100vw), 56px);
}

/* 容量・価格　画像内 x24〜266 / y284〜302 */
.main .mv_price {
  position: absolute;
  z-index: 1;
  top: min(calc(282 / 768 * 100vw), 282px);
  left: calc(24 / 768 * 100%);
  display: flex;
  align-items: baseline;
  color: #444140;
  line-height: 1.2;
  font-size: min(calc(22 / 768 * 100vw), 22px);
}
.main .mv_price {
  font-weight: bold;
}
.main .mv_price .mv_yen {
  margin-left: 1em;
  font-weight: normal;
}
/* 在庫アイコン＋カート＋全成分　画像内 x24〜346 / y330〜483 */
.main .mv_cart {
  position: absolute;
  z-index: 1;
  top: calc(330 / 705 * 100%);
  left: calc(24 / 768 * 100%);
  width:  min(calc(350 / 768 * 100vw), 350px);
}
.main .mv_cart .i_cart101,
.main .mv_cart .i_cart101_empty {
  margin: min(calc(12 / 768 * 100vw), 12px) 0 0;
}

/* 時限切換え（プラチナ先行）
-----------------------------------------------------------------------
   フラグなし（〜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〜）                       … 全員購入可
   ※ common/reserve260829.xhtml のフラグを参照 */
.main .mv_cart .branch_icon_area {
  display: flex;
}
body:has(.is_release_before):has(.is_platinum) .main .mv_cart .branch_icon_area,
body:has(.is_release_after) .main .mv_cart .branch_icon_area {
  display: none;
}
.main .mv_cart .branch_icon_coming {
  color: #fff;
  background-color: #0e6eb8;
  line-height: 1.1;
  text-align: center;
  padding: 0.3em 1em;
}
.main .mv_cart .branch_main_area {
  display: none;
}
body:has(.is_release_before):has(.is_platinum) .main .mv_cart .branch_main_area,
body:has(.is_release_after) .main .mv_cart .branch_main_area {
  display: block;
}

/* 容量・価格　発売前は静的テキスト／購入可期間はebisumartタグ */
.main .mv_price .branch_price_before,
.main .mv_price .branch_price_after {
  align-items: baseline;
}
.main .mv_price .branch_price_before {
  display: flex;
}
.main .mv_price .branch_price_after {
  display: none;
}
body:has(.is_release_before):has(.is_platinum) .main .mv_price .branch_price_before,
body:has(.is_release_after) .main .mv_price .branch_price_before {
  display: none;
}
body:has(.is_release_before):has(.is_platinum) .main .mv_price .branch_price_after,
body:has(.is_release_after) .main .mv_price .branch_price_after {
  display: flex;
}

/* POINT アコーディオン
-----------------------------------------------------------------------
   point_bg.webp（768×2244）は幅100%・上寄せで敷き、足りない分は
   画像下端と同じ色で埋めるのでアコーディオンの開閉で高さが変わっても崩れない */
.main .point_sec {
  background-color: #dceffd;
  background-image: url(../img/point_bg.webp);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding: min(calc(40 / 768 * 100vw), 40px) 0 min(calc(60 / 768 * 100vw), 60px);
}
.main .point_ttl {
  line-height: 0;
  text-align: center;
}
.main .point {
  width: min(calc(700 / 768 * 100vw), 700px);
  margin: min(calc(40 / 768 * 100vw), 40px) auto 0;
}
.main .point_label {
  line-height: 0;
  text-align: center;
}

/* 開閉ボタン（＋／−） */
.main .drw_btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(calc(96 / 768 * 100vw), 96px);
  text-align: center;
  border-radius: 10px;
  padding: 0.8em min(calc(70 / 768 * 100vw), 70px);
  cursor: pointer;
  border-bottom: 1px dashed rgb(184, 217, 241);

}
.main .drw_btn .drw_btn_text{
  display: flex;
  align-items: center;
  gap: min(calc(20 / 768 * 100vw), 20px);
}
.main .drw_btn_text {
  letter-spacing: 0;
}
.main .point_lead {
  display: block;
  color: #1c34a6;
  line-height: 1.3;
  font-size: min(calc(26 / 768 * 100vw), 26px);
  text-decoration: underline;
}
.main .point_head {
  display: block;
  color: #403d3c;
  font-weight: bold;
  line-height: 1.3;
  font-size: min(calc(27 / 768 * 100vw), 27px);
}
.main .drw_btn_icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: min(calc(24 / 768 * 100vw), 24px);
  width: min(calc(33 / 768 * 100vw), 33px);
  height: min(calc(33 / 768 * 100vw), 33px);
  border-radius: 50%;
  margin: auto;
}
.main .drw_btn_icon::before,
.main .drw_btn_icon::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #403d3c;
  margin: auto;
}
.main .drw_btn_icon::before {
  /* width: min(calc(18 / 768 * 100vw), 18px); */
  height: 2px;
}
.main .drw_btn_icon::after {
  width: 2px;
  /* height: min(calc(18 / 768 * 100vw), 18px); */
}
/* 開いているときは「−」 */
.main .active .drw_btn_icon::after {
  display: none;
}

/* 開いた中身（画像） */
.main .drw_target {
  display: none;
}
.main .drw_target.open {
  display: block;
}
.main .drw_target_in {
  line-height: 0;
  text-align: center;
  padding: min(calc(30 / 768 * 100vw), 30px) 0 0;
}

/* その他リンク
-----------------------------------------------------------------------*/
.main .other_link {
  display: flex;
  justify-content: flex-end;
  margin: min(calc(20 / 768 * 100vw), 20px) 0 min(calc(40 / 768 * 100vw), 40px);
  padding: 0 min(calc(24 / 768 * 100vw), 24px);
}
.main .other_link a {
  display: flex;
  align-items: center;
  gap: 0 5px;
  color: #403d3c;
  text-decoration: underline;
  font-size: min(calc(24 / 768 * 100vw), 24px);
  font-weight: bold;
}
.main .other_link a::before {
  content: "";
  width: 0.5em;
  height: 0.6em;
  background-color: #403d3c;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

/* モーダル内の画像
-----------------------------------------------------------------------*/
.main .zoom_fig {
  line-height: 0;
  text-align: center;
}
.main .zoom_fig img {
  width: 100%;
  height: auto;
}

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