@charset "Shift_JIS";
/* --------------------------------------------------------------------
「お中元」下層ページCSS
--------------------------------------------------------------------- */
/* 改行切り替え */
.mainframe_ .cgen_itemlist .sp_only { display: none; }
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist .pc_only { display: none; }

/* 基本カラー */
.cgen_itemlist {
  color: #333;
}

/*-----------------------------------------------------------------------------*/
/* 【JS】アクティブボタン用CSS（.js-change-active-area）※active=ON
================================================== */
.cgen_itemlist #title_list.js-change-active-area p { display: none; }
.cgen_itemlist #title_list.js-change-active-area p.active-item { display: block; }

/* 装飾：【JS】アクティブ表示の見出し
================================================== */
.cgen_itemlist #title_list p {
  color: #333;
  font-weight: bold;
  font-size: 2.0rem;
  text-align: center;
  padding: 10px 3%;
  background: #eefcfe;
}

.cgen_itemlist #title_list .mini {
  font-size: 1.6rem;
  line-height: 1;
}

/* SP用上書き */
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist #title_list p {
  line-height: 1;
}


/* 「商品一覧」下部、関連カテゴリーの表示（#title_list）
================================================== */
/* ページごとの出し分け */
.cgen_itemlist #cgen_category_recommend:not(:has(.active-item)) { display: none; }

/* 【JS】アクティブボタン用CSS（.js-change-active-area）※active=ON
================================================== */
.cgen_itemlist #cgen_category_recommend.js-change-active-area ul li { display: none; }
.cgen_itemlist #cgen_category_recommend.js-change-active-area ul li.active-item { display: block; }

/* 見出し */
.cgen_itemlist #cgen_category_recommend p.midashi {
  text-align: center;
  font-size: 2.0rem;
  font-weight: bold;
  padding: 10px 0;
  margin: 40px 0 0 0;
}

/* リスト */
.cgen_itemlist #cgen_category_recommend ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.cgen_itemlist #cgen_category_recommend ul li {
  width: calc((100% - (14px * 1)) / 2);
}

.cgen_itemlist #cgen_category_recommend ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.cgen_itemlist #cgen_category_recommend ul li .img {
  width: 40%;
}

.cgen_itemlist #cgen_category_recommend ul li .img img {
  width: 100%;
  height: auto;
}

.cgen_itemlist #cgen_category_recommend ul li .txt {
  width: 60%;
  font-size: 1.6rem;
  font-weight: bold;
}

.cgen_itemlist #cgen_category_recommend ul li .txt span {
  font-size: 1.4rem;
  font-weight: normal;
}

/* SP用上書き */
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist #cgen_category_recommend ul {
  padding: 0 3%;
}
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist #cgen_category_recommend ul li {
  width: 100%;
}


/*--------------- PC --------------------------------------------------------------*/
/* コメント欄（.top_comment_）
================================================== */
.mainframe_ > .top_comment_ {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 100px;
  padding: 60px 0 0 0;
  background: url("/contents/siblings/cgen/2026/img/itemlist_bg_pc.jpg") center top / 100% auto no-repeat;
  margin-bottom: 20px;
}

.mainframe_ > .top_comment_ span {
  display: block;
  color: #514338;
  font-family: '游明朝', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'ＭＳ 明朝', serif;
  font-weight: 500; /* 機種による文字のかすれ防止 */
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}
.mainframe_ > .top_comment_ > span {
  font-size: 3.6rem;
}
.mainframe_ > .top_comment_ > span > br {
  display: none;
}
.mainframe_ > .top_comment_ span.txt_sub {
  font-size: 2.2rem;
  margin-bottom: 5px;
}

/* 共通：ボタンリスト
================================================== */
.mainframe_ .cgen_itemlist ul.list_btn {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  gap: 3px;
  margin: 10px auto;
  width: 100%;
}

.mainframe_ .cgen_itemlist ul.list_btn li {
  width: calc((100% - (3px * 4)) / 5);
}

/* ボタン文字(サブ) */
.mainframe_ .cgen_itemlist ul.list_btn li a .mini {
  display: block;
  font-size: 1.1rem;
  letter-spacing: -0.12rem;
  padding: 3px 0 0 0;
}

.mainframe_ .cgen_itemlist ul.list_btn li a {
  position: relative;
  display: flex;
  align-items: center;
  color: #111;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;
  width: 100%;
  height: 50px;
  padding: 0 20px 0 5px;
  background: #fff;
  border: 1px solid #ccc;
}

.mainframe_ .cgen_itemlist ul.list_btn li a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  width: 8px;
  height: 8px;
  border-right: solid 1px #111;
  border-bottom: solid 1px #111;
  transform: translateY(-50%) rotate(-45deg);
}

/* マウスオーバー */
.mainframe_ .cgen_itemlist ul.list_btn li a:hover {
  opacity: 1;
  border-color: #0B4380;
  text-decoration: none;
}

.mainframe_ .cgen_itemlist ul.list_btn li a:hover::after {
  border-color: #0B4380;
}

/* 近畿限定送料
================================================== */
.mainframe_ .cgen_itemlist.kinkisoryo .area {
  text-align: center;
}

/* アイコン説明 */
.mainframe_ .cgen_itemlist.kinkisoryo ul.att {
  text-align: left;
  margin: 5px 0 0 0;
}

.mainframe_ .cgen_itemlist.kinkisoryo ul.att li {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
}

.mainframe_ .cgen_itemlist.kinkisoryo ul.att img {
  width: 44px;
  height: auto;
}

.mainframe_ .cgen_itemlist.kinkisoryo ul.att .txt {
  text-align: left;
  padding: 0 0 0 5px;
}


/* ベストギフト（.bestgift）
================================================== */
/* アイコン説明 */
.mainframe_ .cgen_itemlist.bestgift .target_item_info {
  background: #fff9dc;
  padding: 3px 0;
}

.mainframe_ .cgen_itemlist.bestgift .target_item_info .inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 5px 0;
}

.mainframe_ .cgen_itemlist.bestgift .target_item_info p:not(.att) {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  line-height: 1;
  margin: 0 10px;
}

.mainframe_ .cgen_itemlist.bestgift .target_item_info p:not(.att) img {
  width: 40px;
  height: 40px;
  margin: 0 5px 0 0;
}

.mainframe_ .cgen_itemlist.bestgift .target_item_info p:not(.att) span.red {
  color: #bf280d;
  font-size: 2.6rem;
  font-weight: bold;
  margin: 3px 0 0 0;
}

.mainframe_ .cgen_itemlist.bestgift .target_item_info p:not(.att) span.red > span {
  font-size: 3.6rem;
  letter-spacing: -0.25rem;
  margin: 0 3px 0 0;
}

.mainframe_ .cgen_itemlist.bestgift .target_item_info p.att {
  position: absolute;
  bottom: 10px;
  right: 40px;
  font-size: 1.1rem;
}

/* 全国一律送料ギフト（.ichiritsu）
================================================== */
/* アイコン説明 */
.mainframe_ .cgen_itemlist.ichiritsu .target_item_info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  line-height: 1.2;
  width: 100%;
  background: #fff9dc;
  height: 50px;
}
.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p.gentei + p { width: 40%; }
.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p:not(.gentei) { justify-content: center; }

.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p.gentei {
  width: calc(60% - 5px);
  margin: 0 5px 0 0;
  background: #fff9dc;
  border: 1px solid #dd7118;
}

.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p img {
  width: 40px;
  height: 40px;
  margin: 5px;
}

.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p span.txt span.red {
  color: #a40000;
  font-weight: bold;
}
.mainframe_ .cgen_itemlist.ichiritsu .target_item_info > p.gentei span.txt span.red { color: #a40000; }

.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p span.txt span.red > span {
  font-size: 3.6rem;
  letter-spacing: -0.25rem;
  margin: 0 3px 0 0;
}

.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p span.txt {
  position: relative;
  margin: 6px 0 0 0;
  font-size: 1.6rem;
  color: #0a0a0a;
  line-height: 1;
}

.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p span.txt > span:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.2rem;
}

.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p.gentei .deadline {
  background: #dd7118;
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0 20px 0 0;
}

.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p.gentei .deadline > span {
  position: relative;
  color: #fff;
  font-weight: bold;
  padding: 0 5px;
}

.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p.gentei .deadline > span::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -32px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 15px solid #dd7118;
  transform: translateY(-50%) rotate(-90deg);
}

.mainframe_ .cgen_itemlist.ichiritsu .target_item_info p.gentei .deadline > span > span {
  color: #fff799;
}

/* アイコン説明 */
.mainframe_ .cgen_itemlist.ichiritsu .target_item_info .sp_only {
  display: none;
}

/* 注釈 */
.mainframe_ .cgen_itemlist.ichiritsu ul.att {
  text-align: left !important;
}

.mainframe_ .cgen_itemlist.ichiritsu ul.att li {
  display: inline-block;
  font-size: 1.2rem;
  text-align: left;
}

.mainframe_ .cgen_itemlist.ichiritsu ul.att img {
  width: 26px;
  height: auto;
  margin: 0 3px;
}


/*--------------- SP --------------------------------------------------------------*/
/* コメント欄（.l-column01_）
================================================== */
.wrapper_ > .l-column01_ {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 12% 0 0 0;
  background: url("/contents/siblings/cgen/2026/img/itemlist_bg_sp.jpg") center top / 100% auto no-repeat;
  margin-bottom: 10px;
}

.wrapper_ > .l-column01_ p {
  color: #514338;
  font-family: '游明朝', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'ＭＳ 明朝', serif;
  font-weight: 500; /* 機種による文字のかすれ防止 */
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

.wrapper_ > .l-column01_ span {
  display: block;
}
.wrapper_ > .l-column01_ p > span {
  font-size: 2.4rem;
}
.wrapper_ > .l-column01_ p span.txt_sub {
  font-size: 1.6rem;
  margin-bottom: 5px;
}

/* 近畿限定送料
================================================== */
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.kinkisoryo .area {
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: bold;
  padding: 5px 0 0 0;
}

/* アイコン説明 */
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.kinkisoryo ul.att {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 3%;
  margin-top: 10px;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.kinkisoryo ul.att li {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  text-align: left;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.kinkisoryo ul.att img {
  width: 44px;
  height: auto;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.kinkisoryo ul.att .txt {
  text-align: left;
  padding: 0 0 0 5px;
}

/* ベストギフト（.bestgift）
================================================== */
/* アイコン説明 */
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.bestgift .target_item_info {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 3% 15px 3%;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.bestgift .target_item_info .inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  background: #fff9dc;
  padding: 3% 1%;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.bestgift .target_item_info p:not(.att) {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.3rem;
  line-height: 1;
  width: calc((100% - 5px) / 2);
}
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.bestgift .target_item_info p:first-of-type { margin-right: 5px; }

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.bestgift .target_item_info p:not(.att) img {
  width: 30px;
  height: 30px;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.bestgift .target_item_info p:not(.att) span.red {
  color: #c7000b;
  font-size: 1.6rem;
  font-weight: bold;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.bestgift .target_item_info p:not(.att) span.red > span {
  font-size: 2.8rem;
  letter-spacing: -0.25rem;
  margin: 0 3px 0 0;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.bestgift .target_item_info p.att {
  width: 100%;
  font-size: 1.1rem;
  text-align: right;
  margin: 5px 0 0 0;
}

/* 全国一律送料ギフト（.ichiritsu）
================================================== */
/* アイコン説明 */
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info {
  font-size: 1.4rem;
  line-height: 1.2;
  padding: 10px 3%;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p {
  width: 100%;
  background: #fff9dc;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p + p { margin: 10px 0 0 0; }

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p.gentei {
  position: relative;
  background: #fff9dc;
  padding: 20px 0 0 0;
  border: 1px solid #dd7118;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p img {
  width: 40px;
  height: 40px;
  margin: 5px;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p span.txt {
  position: relative;
  margin: 6px 0 0 0;
  color: #0a0a0a;
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: bold;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p span.txt > span:not(.red) {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.3rem;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p span.txt span.red {
  color: #a40000;
  font-weight: bold;
}
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info > p.gentei span.txt span.red { color: #a40000; }

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p span.txt span.red > span {
  font-size: 3.0rem;
  letter-spacing: -0.25rem;
  margin: 0 3px 0 0;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p.gentei .deadline {
  position: absolute;
  top: -10px;
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p.gentei .deadline br {
  display: none;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p.gentei .deadline > span {
  position: relative;
  display: block;
  width: 90%;
  background: #dd7118;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  padding: 3px;
  margin: 0 auto;
  border-radius: 60px;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p.gentei .deadline > span::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 20px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #dd7118;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu .target_item_info p.gentei .deadline > span > span {
  color: #fff799;
  padding: 0 5px 0 0;
}

/* 注釈 */
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu ul.att {
  margin: 0 3%;
  padding: 10px 0 !important;
  text-align: left !important;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu ul.att li {
  font-size: 1.2rem;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist.ichiritsu ul.att img {
  width: 30px;
  height: auto;
  margin: 0 3px;
}


/* アコーディオンの装飾（.js-accordion.js_on）（JS連動コンテンツ）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) .js-accordion.js_on .js-accordion_header {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 15px 3%;
}

.wrapper_:not(:has(.mainframe_)) .js-accordion.js_on .js-accordion_header span {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: left;
  color: #111;
}

.wrapper_:not(:has(.mainframe_)) .js-accordion.js_on .js-accordion_header i.icon {
  position: relative;
  display: block;
  width: auto;
  height: 70%;
  aspect-ratio: 1;
  background: #0B4380;
}

.wrapper_:not(:has(.mainframe_)) .js-accordion.js_on .js-accordion_header i.icon::before,
.wrapper_:not(:has(.mainframe_)) .js-accordion.js_on .js-accordion_header i.icon::after {
  content: '';
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  inset: 0;
  margin: auto;
  background-color: #fff;
}

.wrapper_:not(:has(.mainframe_)) .js-accordion.js_on .js-accordion_header i.icon::before {
  transform: rotate(90deg);
}

/* ＋アイコン動作用 */
.wrapper_:not(:has(.mainframe_)) .js-accordion.js_on .js-accordion_header.opening-accordion i.icon::before {
  background-color: transparent;
}

/* 開く時 */
.wrapper_:not(:has(.mainframe_)) .js-accordion.js_on .opening-accordion,
.wrapper_:not(:has(.mainframe_)) .js-accordion.js_on .js-accordion_header.opening-accordion span,
.wrapper_:not(:has(.mainframe_)) .js-accordion.js_on .opening-accordion + .js-accordion_content {
  background: #eefcfe;
}

.wrapper_:not(:has(.mainframe_)) .js-accordion.js_on .js-accordion_header.opening-accordion span {
  font-weight: bold;
}

/* 中枠 */
.wrapper_:not(:has(.mainframe_)) .js-accordion.js_on .js-accordion_content_inner {
}

/* カテゴリ―開閉ボタン（.cgen_search_category）
================================================== */
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist #cgen_search_category {
  padding: 0 3%;
  margin: 10px 0 0 0;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist #cgen_search_category .js-accordion.js_on {
  border: 2px solid #0B4380;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist #cgen_search_category ul.list > li .box {
  background: #fff;
}

/* 共通：ボタンリスト
================================================== */
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist ul.list_btn {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  width: 100%;
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist ul.list_btn li {
  width: calc((100% - (0px * 1)) / 2);
}

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist ul.list_btn li a {
  position: relative;
  display: flex;
  align-items: center;
  color: #111;
  font-size: 1.4rem;
  line-height: 1.2;
  width: 100%;
  height: 70px;
  padding: 0 20px 0 5px;
  background: #fff;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist ul.list_btn li:nth-child(2n+1) a { border-left: none; }

.wrapper_:not(:has(.mainframe_)) .cgen_itemlist ul.list_btn li a::after {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #1785c2;
}

/* ボタン文字(サブ) */
.wrapper_:not(:has(.mainframe_)) .cgen_itemlist ul.list_btn li a .mini {
  display: block;
  font-size: 1.1rem;
  letter-spacing: -0.12rem;
  padding: 3px 0 0 0;
}