@charset "Shift_JIS";
/* --------------------------------------------------------------------
「パーソナルギフトセレクション」CSS（PC・SP） / #personal_gift
更新用
--------------------------------------------------------------------- */
/* --------------------------------------------------------------------
設定
--------------------------------------------------------------------- */
#personal_gift {
  --allbg-color: #fdf8f0; /* 全体背景の色 */
  --border-color: #b71253; /* ボーダーの色 */
  --arrow-color: #cc5d17; /* 矢印の色 */
  --btn-color: #cc5d17; /* ボタンの色 */
}

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

/* ボタン矢印カラー */
.mainframe_ #personal_gift ul li a::after {
  border-right-color: var(--arrow-color);
  border-bottom-color: var(--arrow-color);
}

/* ボタンのカタログ表紙の設置用 */
.mainframe_ #personal_gift .personal_gift_btn_catalog a::before {
  display: block;
  content: '';
  width: 60px;
  height: 85px;
  background: #fff url("/contents/proper/gift/event/personal_gift/25aw/img/catalog_cover.jpg") no-repeat center center / contain;
  position: absolute;
  top: -20px;
  left: 30px;
  transform: rotate(-10deg);
  box-shadow: 0px 1px 3px .2px rgba(66, 66, 66, 1);
}

/* ボタンのカタログ表紙の設置用（文字位置調節用の余白） */
.mainframe_ #personal_gift .personal_gift_btn_catalog a span {
  padding-left: 20px;
}

/* ボタン：すべての商品を見る */
.mainframe_ #personal_gift .personal_gift_btn_all a {
  background: var(--btn-color);
}

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

/* ボタン矢印カラー */
.wrapper_:not(:has(.mainframe_)) #personal_gift ul li a::after {
  border-right-color: var(--arrow-color);
  border-bottom-color: var(--arrow-color);
}

/* ボタンのカタログ表紙の設置用 */
.wrapper_:not(:has(.mainframe_)) #personal_gift .personal_gift_btn_catalog a::before {
  display: block;
  content: '';
  width: 60px;
  height: auto;
  aspect-ratio: 200 / 283;
  background: url("/contents/proper/gift/event/personal_gift/25aw/img/catalog_cover.jpg") no-repeat center center / 100% auto;
  position: absolute;
  top: -20%;
  left: 6%;
  box-shadow: 1px 1px 3px 0.15px rgba(67, 67, 63, .7);
  transform: rotate(-10deg);
}

/* ボタンのカタログ表紙の設置用（文字位置調節用の余白） */
.wrapper_:not(:has(.mainframe_)) #personal_gift .personal_gift_btn_catalog a span {
  padding-left: 40px;
}

/* ボタン：すべての商品を見る */
.wrapper_:not(:has(.mainframe_)) #personal_gift .personal_gift_btn_all a {
  background: var(--btn-color);
}