@charset "Shift_JIS";

/* --------------------------------------------------------------------
設定
--------------------------------------------------------------------- */
:root {
  --allbg-color : #fffdf9; /* 全体背景の色 */
  --border-color: #F9D78B; /* ボーダーの色 */
  --btn-color   : #BF4A2B; /* ボタンの色 */
  --shadow      : rgb(212, 199, 169, 50%); /* カタログ画像のドロップシャドウ */
}

/* --------------------------------------------------------------------
【PC】「パーソナルギフト」ページ用CSS / .mainframe_ #personal_gift
--------------------------------------------------------------------- */

/* 該当エリアの画像・背景・ボーダー */
.mainframe_ #personal_gift {
  background: url("/contents/proper/gift/event/personal_gift/26aw/img/bg.png") top left / auto no-repeat,
    url("/contents/proper/gift/event/personal_gift/26aw/img/bg02.png") bottom right / auto no-repeat, var(--allbg-color);
  border-color: var(--border-color);
}

/* カタログ画像のドロップシャドウ */
.mainframe_ #personal_gift #personal_gift_search_catalog .img_catalog .img {
  box-shadow: 2px 2px 6px 0 var(--shadow);
}

/* ボタンの色 */
.mainframe_ #personal_gift .personal_gift_btn_all a {
  background: var(--btn-color);
  border-color: var(--btn-color);
}

/* --------------------------------------------------------------------
【PC】「パーソナルギフト 全商品一覧」ページ用CSS / .mainframe_ #personal_gift_itemlist
--------------------------------------------------------------------- */

/* タイトル下の線 */
.mainframe_ #personal_gift_itemlist #title_list {
  border-top-color: var(--border-color);
}

/* カタログ画像のドロップシャドウ */
.mainframe_ #personal_gift_itemlist #personal_gift .personal_gift_head .img {
  box-shadow: 2px 2px 6px 0 var(--shadow);
}


/* --------------------------------------------------------------------
【SP】「パーソナルギフト」ページ用CSS / .wrapper_:not(:has(.mainframe_)) #personal_gift
--------------------------------------------------------------------- */

/* 該当エリアの画像・背景・ボーダー */
.wrapper_:not(:has(.mainframe_)) #personal_gift {
  background: url("/contents/proper/gift/event/personal_gift/26aw/img/bg.png") top left / 160px auto no-repeat,
    url("/contents/proper/gift/event/personal_gift/26aw/img/bg02.png") bottom right / 160px auto no-repeat,var(--allbg-color);
  border-color: var(--border-color);
}

/* カタログ画像のドロップシャドウ */
.wrapper_:not(:has(.mainframe_)) #personal_gift #personal_gift_search_catalog .img_catalog .img {
  box-shadow: 2px 2px 6px 0 var(--shadow);
}

/* ボタンの色 */
.wrapper_:not(:has(.mainframe_)) #personal_gift .personal_gift_btn_all a {
  background: var(--btn-color);
  border-color: var(--btn-color);
}

/* --------------------------------------------------------------------
【SP】「パーソナルギフト 全商品一覧」ページ用CSS / .wrapper_:not(:has(.mainframe_)) #personal_gift_itemlist
--------------------------------------------------------------------- */

/* タイトル下の線 */
.wrapper_:not(:has(.mainframe_)) #personal_gift_itemlist #title_list {
  border-color: var(--border-color);
}

/* カタログ画像のドロップシャドウ */
.wrapper_:not(:has(.mainframe_)) #personal_gift_itemlist #personal_gift .personal_gift_head .img {
  box-shadow: 2px 2px 6px 0 var(--shadow);
}