@charset "Shift_JIS";

.mainframe_ #event_wrapper_top {
 margin-bottom: 40px; }

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top {
 margin-bottom: 20px; }

/* 改行切り替え */
.mainframe_ .sp_only {
 display: none; }

.wrapper_:not(:has(.mainframe_)) .pc_only {
 display: none; }

/* --------------------------------------------------------------------
【PC】「レトルト・インスタント特集」ページ用CSS / .mainframe_ .retortfood
--------------------------------------------------------------------- */

/* 下部回遊エリア
================================================== */

/* コンテンツナビ用ボタン（#content_navi_wrap） */
.mainframe_ #content_navi_wrap {
  position: relative;
  background: #f5f3e4;
  overflow: hidden;
}

.mainframe_ #content_navi_wrap::before,
.mainframe_ #content_navi_wrap::after,
.mainframe_ #content_navi_wrap > .inner::before,
.mainframe_ #content_navi_wrap > .inner::after {
  content: '';
  position: absolute;
  width: 60px;
  height: auto;
}

/* レンジ */
.mainframe_ #content_navi_wrap::before {
  bottom: 40px;
  left: -10px;
  aspect-ratio: 142 / 92;
  background: url("/contents/proper/foods/event/retortfood/img/navi_icon01.png") center center / contain no-repeat;
}

/* 鍋 */
.mainframe_ #content_navi_wrap::after {
  bottom: -20px;
  left: 20px;
  aspect-ratio: 142 / 116;
  background: url("/contents/proper/foods/event/retortfood/img/navi_icon02.png") center center / contain no-repeat;
  transform: rotate(10deg);
}

/* 時計 */
.mainframe_ #content_navi_wrap > .inner::before {
  right: -6px;
  bottom: 50px;
  width: 44px;
  aspect-ratio: 123 / 137;
  background: url("/contents/proper/foods/event/retortfood/img/navi_icon03.png") center center / contain no-repeat;
  transform: rotate(-20deg);
}

/* やかん */
.mainframe_ > #content_navi_wrap > .inner::after {
  right: 20px;
  bottom: -10px;
  aspect-ratio: 143 / 130;
  background: url("/contents/proper/foods/event/retortfood/img/navi_icon04.png") center center / contain no-repeat;
  transform: rotate(10deg);
}

.mainframe_ #content_navi_wrap ul li a:hover {
  border-color: #f2932e;
}


/* --------------------------------------------------------------------
【SP】「レトルト・インスタント特集」ページ用CSS / .wrapper_:not(:has(.mainframe_)) .retortfood
--------------------------------------------------------------------- */

/* 下部回遊エリア
================================================== */

/* コンテンツナビ用ボタン（#content_navi_wrap） */
.wrapper_:not(:has(.mainframe_)) #content_navi_wrap {
  position: relative;
  background: #f5f3e4;
  overflow: hidden;
}

.wrapper_:not(:has(.mainframe_)) #content_navi_wrap > .inner {
  padding: 40px 3% 60px;
}

.wrapper_:not(:has(.mainframe_)) #content_navi_wrap::before,
.wrapper_:not(:has(.mainframe_)) #content_navi_wrap::after,
.wrapper_:not(:has(.mainframe_)) #content_navi_wrap > .inner::before,
.wrapper_:not(:has(.mainframe_)) #content_navi_wrap > .inner::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 58px;
  height: auto;
}

/* レンジ */
.wrapper_:not(:has(.mainframe_)) #content_navi_wrap::before {
  width: 66px;
  aspect-ratio: 142 / 92;
  margin: 0 0 0 -130px;
  background: url("/contents/proper/foods/event/retortfood/img/navi_icon01.png") center center / contain no-repeat;
}

/* 鍋 */
.wrapper_:not(:has(.mainframe_)) #content_navi_wrap::after {
  aspect-ratio: 142 / 116;
  margin: 0 0 0 -50px;
  background: url("/contents/proper/foods/event/retortfood/img/navi_icon02.png") center center / contain no-repeat;
}

/* 時計 */
.wrapper_:not(:has(.mainframe_)) #content_navi_wrap > .inner::before {
  bottom: -8px;
  width: 44px;
  aspect-ratio: 123 / 137;
  margin: 0 0 0 20px;
  background: url("/contents/proper/foods/event/retortfood/img/navi_icon03.png") center center / contain no-repeat;
  transform: rotate(-20deg);
}

/* やかん */
.wrapper_:not(:has(.mainframe_)) #content_navi_wrap > .inner::after {
  bottom: -6px;
  aspect-ratio: 143 / 130;
  margin: 0 0 0 74px;
  background: url("/contents/proper/foods/event/retortfood/img/navi_icon04.png") center center / contain no-repeat;
}
