@charset "UTF-8";

/* 00 ブランドトップ
--------------------------------------------------------------------*/

ul.promotion-menu-list {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 20px;
}

.promotion-menu-list li img {
    height: 50px; /* Matches the button height in your HTML */
    display: block;
    cursor: pointer;
}

/* wazzupのボタン自体を画像に置き換える */
.w-topic button.w_topic_button {
    /* 画像を背景に設定 */
    background-image: url("/static/full/images/wazzup/bn_line.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important; /* 背景色を透過 */

    /* 元のテキストを消す */
    color: transparent !important;

    /* 枠線や影などのデザインをリセット */
    border: none !important;
    box-shadow: none !important;
    outline: none !important;

    /* サイズ指定（画像の比率に合わせる） */
    width: 250px !important;
    height: 50px !important;
    cursor: pointer !important;
    padding: 0 !important;
}

/* 01 商品詳細
--------------------------------------------------------------------*/

/* 親要素：3列×2段のグリッド */
.shopping_area .choose_item dl {
  display: grid !important;
  grid-template-columns: 150px 220px 30px;
  grid-template-areas:
    "size  cart      heart"    /* 上段 */
    "size  restock   favorite"; /* 下段 */
  gap: 12px 15px;
}

/* サイズ・在庫 */
.shopping_area .choose_item dt { grid-area: size; margin: 0; }

/* カートに入れる */
.shopping_area .addCart { grid-area: cart; }

/* 6. 入荷お知らせ (カートの下) */
/* クラス名の中身を見て確実に「入荷お知らせ」をカートの下に配置 */
.shopping_area .wazzup:has(.w-shop-rearrival) { grid-area: restock; }

/* 5. ハートボタン (右側上段) */
.shopping_area .favorite { grid-area: heart; }

/* 4. お気に入り登録 (ハートの下) */
/* クラス名の中身を見て確実に「お気に入り登録」をハートの下に配置 */
.shopping_area .wazzup:has(.w-product-topic) { grid-area: favorite; }


/* --- ボタンのサイズと見た目の統一 --- */

/* 入荷通知のボタン */
.shopping_area button.w_shop_rearrival_button {
  width: 210px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  font-size: 0px !important;
  text-decoration: none;
  box-sizing: border-box;
  margin: 0 !important;
  background: rgb(6, 199, 85) url("/static/full/images/wazzup/line_icon.svg") 36px 9px / 24px no-repeat;
}

.shopping_area button.w_shop_rearrival_button::after {
    content: "入荷お知らせLINE" !important;
    font-size: 12px !important;
    display: inline-block;
    margin: 0 0 0 29px;
}

/* 吹き出し（バルーン）が位置ズレしないための対策 */
.shopping_area .favorite {
  position: relative;
}


/* ボタン自体のスタイルを画像に置き換え */
.shopping_area button.w_product_topic_button {
    background-image: url("/static/full/images/detail/wazz_fav.svg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    width: 28px !important;
    min-width: 28px;
    height: 39px !important;
    padding: 0px!important;
    margin: 0px !important;
}

.shopping_area dd.wazzup {
    padding: 0;
}

  /* 全体のコンテナ */
  .notification-container {
	display: flex;
	align-items: center; /* ベルと吹き出しを中央揃え */
	gap: 12px;           /* アイコンと吹き出しの隙間 */
	/* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; */
	width: 506px;
	margin: 10px auto 20px;
	}

  /* SVGアイコンのサイズ制御 */
  .notification-container .bell-icon {
	width: 22px;  /* サイズは適宜調整してください */
	height: auto;
	flex-shrink: 0;
	}

  /* 吹き出し本体 */
  .notification-container .speech-bubble {
	position: relative;
	padding: 6px 10px;
	border: 2px solid #d1d1d1;
	border-radius: 10px;
	background-color: #ffffff;
	color: #333;
	font-size: 14px;
	line-height: 1.2;
	/* font-weight: 500; */
	}

  /* 吹き出しのしっぽ（外枠線） */
  .notification-container .speech-bubble::before {
	content: "";
	position: absolute;
	left: -9px;
	top: 50%;
	transform: translateY(-50%);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 9px solid #d1d1d1;
  }
  /* 吹き出しのしっぽ（内側の白塗り） */
  .notification-container .speech-bubble::after {
	content: "";
	position: absolute;
	left: -7px;
	top: 50%;
	transform: translateY(-50%);
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 8px solid #ffffff;
  }