@charset "Shift_JIS";

/* --------------------------------------------------------------------
基本設定CSS
--------------------------------------------------------------------- */

/* ページ内リンクのスクロール用 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

/* フリースペース5【非表示】 */
.contents_ > .free_space5,
.wrapper_:not(:has(.mainframe_)) > .free_space5 {
  display: none;
}

/* 文字数オーバー時に改行させる */
.mainframe_ .inblock,
.wrapper_:not(:has(.mainframe_)) .inblock {
  display: inline-block;
}

/* 【GTM】計測対象の子要素のポインターイベントの無効化 */
.mainframe_ [data-gtm-action] *,
.wrapper_:not(:has(.mainframe_)) [data-gtm-action] * {
  pointer-events: none;
}

/* フォントサイズ（デフォルト） */
#genre_wrap_top,
#genre_wrap_btm {
  font-size: 1.6rem;
  line-height: 1.4;
}

/* アニメーション設定 */
#genre_wrap_top *,
#genre_wrap_btm * {
  transition: opacity 0.3s ease, color 0.3s ease, border 0.3s ease, background 0.3s ease, transform 0.3s ease, background-size 0.3s ease;
}

/* マウスオーバー設定（PCのみ） */
.mainframe_ #genre_wrap_top a:hover,
.mainframe_ #genre_wrap_btm a:hover {
  opacity: .7;
  text-decoration: none;
}

/* 改行切り替え */
.mainframe_ .sp_only {
  display: none; 
}

.wrapper_:not(:has(.mainframe_)) .pc_only {
  display: none; 
}

/* --------------------------------------------------------------------
【PC】「フード・スイーツTOP」ページ用CSS / .mainframe_ #genre_wrap_top.foods_top
--------------------------------------------------------------------- */

/* 初期設定
--------------------------------- */

/* 自動出力エリア：タイトル表示 */
.mainframe_ > .m-title06_ {
  position: relative;
  display: flex;
  justify-content: end;
  align-items: end;
  height: 40px;
  margin: 0 0 20px;
  padding: 3px 5px;
  border-bottom: 1px solid #333;
  font-size: 24px;
  line-height: 1;
  text-align: right;
  color: #000;
  letter-spacing: 0.20rem;
}

.mainframe_ > .m-title06_::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 5px;
  display: block;
  width: auto;
  height: 40px;
  aspect-ratio: 366 / 60;
  background: url("/contents/proper/foods/genre/img/logo.png") 0 0 / contain no-repeat;
}

/* フリースペースの余白 */
.mainframe_ #genre_wrap_top,
.mainframe_ #genre_wrap_btm {
  margin-bottom: 60px;
}

/* 《フード・スイーツ》コンテンツタイトル */
.mainframe_ .title_box {
  margin-bottom: 30px;
  text-align: center;
}

.mainframe_ .title_box .en {
  font-family: '游明朝', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'ＭＳ 明朝', serif;
  font-size: 3.2rem;
  line-height: 1;
  color: #000;
  letter-spacing: 0.1em;
}

.mainframe_ .title_box .ja {
  margin-top: 5px;
  font-size: 1.4rem;
  color: #888;
  letter-spacing: 0.1em;
}

/* 下層カテゴリーのタイトル装飾 */
.mainframe_ .free_block_ .m-title04_ {
  border-top: none;
  border-bottom: 1px solid #ccc;
}

/* 《フード・スイーツ》各セクションの装飾・余白 */
.mainframe_ #genre_wrap_btm.foods_top section:not(:first-of-type) {
  margin-top: 70px;
  padding-top: 70px;
  border-top: 1px solid #111;
}

.mainframe_ #genre_wrap_btm.foods_top section#sns {
  border: none;
}

.mainframe_ #genre_wrap_btm.foods_top section:first-of-type {
  padding-top: 20px;
}

/*  《フード・スイーツ》下層カテゴリー非表示（.free_block_) */
.mainframe_:has(.foods_top) .free_block_ {
  display: none;
}

/*  《フード・スイーツ》ナビメニュー(#navi_menu)
--------------------------------- */
.mainframe_ #genre_wrap_top.foods_top #navi_menu ul {
  display: flex;
  margin: 0;
  padding: 0;
  background: #fff;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  flex-wrap: wrap;
  list-style: none;
}

.mainframe_ #genre_wrap_top.foods_top #navi_menu ul:has(li:nth-child(5)) li {
  flex-grow: 0;
  border-bottom: 1px solid #ccc;
}

.mainframe_ #genre_wrap_top.foods_top #navi_menu ul:has(li:nth-child(5)) li:nth-child(4n + 1):nth-last-child(-n + 4),
.mainframe_ #genre_wrap_top.foods_top #navi_menu ul:has(li:nth-child(5)) li:nth-child(4n + 1):nth-last-child(-n + 4) ~ li {
  border-bottom: none;
}

.mainframe_ #genre_wrap_top.foods_top #navi_menu ul li {
  position: relative;
  min-width: 0;
  padding: 10px;
  flex: 1 1 25%;
}

.mainframe_ #genre_wrap_top.foods_top #navi_menu ul li::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 10px;
  width: 0;
  border-right: 1px solid #ccc;
}

.mainframe_ #genre_wrap_top.foods_top #navi_menu ul li:nth-child(4n)::after,
.mainframe_ #genre_wrap_top.foods_top #navi_menu ul li:last-child::after {
  display: none;
}

.mainframe_ #genre_wrap_top.foods_top #navi_menu ul li a {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 60px;
  background: #fff;
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
  color: #111;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mainframe_ #genre_wrap_top.foods_top #navi_menu ul li a::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-right: solid 1px #111;
  border-bottom: solid 1px #111;
  transform: translateX(-50%) rotate(45deg);
}

/* マウスオーバー */
.mainframe_ #genre_wrap_top.foods_top #navi_menu ul li a:hover {
  background: #f2ebeb;
  opacity: 1;
}

/* イベント紐づけ（.event_）
--------------------------------- */
.mainframe_ .event_ .m-title04_ {
  border: none;
  font-size: 3rem;
  line-height: 1.2;
}

/* スライダーフリースペース2の非表示 ※非表示にするdivに、クラス「import_hidden」を設置 */
.mainframe_ .event_ .import_hidden {
  display: none;
}

/* 紐づけイベントのボタン */
.mainframe_ .event_ .m-detailbtn01_ {
  margin: 0 0 60px;
  text-align: center;
}

.mainframe_ .event_ .m-detailbtn01_ a {
  display: block;
  width: 400px;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3em;
  color: #383C3B;
}

/*  《フード・スイーツ》各イベントの間隔 */
.mainframe_:has(.foods_top) .event_ .free_space5 ~ .free_space5 > div {
  margin-top: 120px;
}

/* --------------------------------------------------------------------
【PC】下部回遊エリア(フリースペース2・4) / .mainframe_ #genre_wrap_btm.foods_top
--------------------------------------------------------------------- */

/*  《フード・スイーツ》アイテム並び（.item_list） */
.mainframe_ #genre_wrap_btm.foods_top .gallery .item_list > .inner {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
}

.mainframe_ #genre_wrap_btm.foods_top .gallery .item_list > .inner > * {
  width: 100%;
}

.mainframe_ #genre_wrap_btm.foods_top .gallery .item_list > .inner > * img {
  display: block;
  width: 100%;
  height: auto;
}

/*  《フード・スイーツ》特集(#feature)
--------------------------------- */

/* タブ切り替えボタン */
.mainframe_ #genre_wrap_btm.foods_top #features .js-tab-switch button a {
  border-bottom: 4px solid #ccc;
  color: #777;
}

.mainframe_ #genre_wrap_btm.foods_top #features .js-tab-switch button.active-item a {
  color: #333;
  border-color: #333;
}

/* カードの基本デザイン（見出し・本文・画像） */
.mainframe_ #genre_wrap_btm.foods_top #features .item_list > .inner li a img {
  order: 1;
  border: 1px solid #ccc;
}

.mainframe_ #genre_wrap_btm.foods_top #features .item_list > .inner li a .icon {
  order: 2;
  position: static;
  display: inline-flex;
  align-items: center;
  height: 16px;
  margin: 4px 0;
  padding: 0 5px;
  border-left: 4px solid #ceb271;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  color: #8d6404;
  align-self: start;
  align-content: center;
}

.mainframe_ #genre_wrap_btm.foods_top #features .item_list > .inner li a h3 {
  order: 3;
  min-height: calc(1.5rem * 1.6 * 2);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  color: #111;
}

.mainframe_ #genre_wrap_btm.foods_top #features .item_list > .inner li a p:not([class*="icon"]) {
  order: 4;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #555;
}

/* 期間限定 */
.mainframe_ #genre_wrap_btm.foods_top #features .item_list > .inner li a .icon.red {
  color: #bf0d0d !important;
  border-color: #bf0d0d !important;
}

/* 「新着」タブは10件まで */
.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button#new.active-item) .item_list .inner li:nth-child(n+11) {
  display: none !important;
}

/* ---------------------------------
  表示切り替え�@：一覧表示（value="content-c"）
--------------------------------- */
.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner {
  gap: 30px 20px;
}

.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner li a {
  display: flex;
  flex-direction: column;
}

.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner li a img {
  order: -1;
  margin-bottom: 8px;
}

.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner li a .icon {
  margin: 0 0 8px;
}

.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner li a h3 {
  margin-top: 0;
}

.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner li:not(:has(.icon)) a h3 {
  margin-top: calc(16px + 8px)
}

.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner li a p:not([class*="icon"]) {
  margin-top: 10px;
}

/* ---------------------------------
  表示切り替え�A：アイコン付き一覧（content-c以外）
--------------------------------- */
.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner {
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}

.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner li {
  position: relative;
  display: flex;
}

.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner li a {
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr;
  grid-template-rows: 24px calc(1.5rem * 1.6 * 2) auto;
  column-gap: 10px;
}

.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner li a img {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
}

.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner li a .icon {
  position: absolute;
  top: 4px;
  left: 0;
  margin: 0;
  grid-column: 2;
  grid-row: 1;
}

.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner li a h3 {
  grid-column: 2;
  grid-row: 2;
}

.mainframe_ #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner li a p:not([class*="icon"]) {
  margin-top: 10px;
  text-align: left;
  grid-column: 2;
  grid-row: 3;
}

/*  《フード・スイーツ》ブランド（#brand_wrap）
--------------------------------- */
.mainframe_ #genre_wrap_btm.foods_top #brand_wrap .item_list > .inner > div {
  aspect-ratio: 5/3;
}

.mainframe_ #genre_wrap_btm.foods_top #brand_wrap .item_list > .inner > div a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: auto;
  background: #fff;
  border: 1px solid #ccc;
  overflow: hidden;
}

.mainframe_ #genre_wrap_btm.foods_top #brand_wrap .item_list > .inner > div a p:not(.rubi) {
  display: none;
}

.mainframe_ #genre_wrap_btm.foods_top #brand_wrap .item_list > .inner > div a p.rubi {
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.mainframe_ #genre_wrap_btm.foods_top #brand_wrap .item_list > .inner > div a p.rubi .icon {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 3px 5px;
  background: #eee;
  font-size: 1.2rem;
  line-height: 1;
  color: #444;
  letter-spacing: 0.08em;
}

/* 要素の表示制限とボタン追加（addShowMoreButton.js） */
.mainframe_ #genre_wrap_btm.foods_top #brand_wrap .js-list-sec:has(.js-toggle-trigger.is-active) .js-toggle-content {
  margin-top: 10px;
}

.mainframe_ #genre_wrap_btm.foods_top #brand_wrap .js-list-sec .js-toggle-button {
  background: #f1f1f1;
}

.mainframe_ #genre_wrap_btm.foods_top #brand_wrap .js-list-sec .js-toggle-trigger .ico_::before,
.mainframe_ #genre_wrap_btm.foods_top #brand_wrap .js-list-sec .js-toggle-trigger .ico_::after {
  background: #222;
}

/*  《フード・スイーツ》カテゴリー（#category）
--------------------------------- */
.mainframe_ #genre_wrap_btm.foods_top #category .item_list ul li a span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 5px;
  background: #fff;
  border: 1px solid #ccc; 
  font-size: 1.5rem; 
  line-height: 1.2; 
  text-align: center; 
  color: #333;
}

/* マウスオーバー */
.mainframe_ #genre_wrap_btm.foods_top #category .item_list ul li:hover a span {
  background: #333;
  color: #fff;
}

.mainframe_ #genre_wrap_btm.foods_top #category .item_list ul li:hover a {
  opacity: 1;
}

/* 画像付きアイテム */
.mainframe_ #genre_wrap_btm.foods_top #category .item_list ul li.item-img a {
  display: flex;
  flex-direction: column;
}

.mainframe_ #genre_wrap_btm.foods_top #category .item_list ul li.item-img a::before {
  content: '';
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: no-repeat center center / 100%;
  transition: background-size 0.3s ease, opacity 0.3s ease;
}

/* マウスオーバー */
.mainframe_ #genre_wrap_btm.foods_top #category .item_list ul li.item-img:hover a span {
  background: #fff;
  color: #222;
  text-decoration: underline;
}

.mainframe_ #genre_wrap_btm.foods_top #category .item_list ul li.item-img:hover a::before {
  background-size: 110%;
  opacity: 0.7;
}

.mainframe_ #genre_wrap_btm.foods_top #category .item_list ul li.item-img a[href*="/shop/r/r2020/"]::before {
  background-image: url("/img/genre/1/2020.jpg");
}

.mainframe_ #genre_wrap_btm.foods_top #category .item_list ul li.item-img a[href*="/shop/r/r2010/"]::before {
  background-image: url("/img/genre/1/2010.jpg");
}

.mainframe_ #genre_wrap_btm.foods_top #category .item_list ul li.item-img a[href*="/shop/r/r2060/"]::before {
  background-image: url("/img/genre/1/2060.jpg");
}

.mainframe_ #genre_wrap_btm.foods_top #category .item_list ul li.item-img a[href*="/shop/r/r2040/"]::before {
  background-image: url("/img/genre/1/2040.jpg");
}

.mainframe_ #genre_wrap_btm.foods_top #category .item_list ul li.item-img a span {
  border: none;
}

/* ボタン：すべての商品を見る */
.mainframe_ #genre_wrap_btm.foods_top #category .btn_all {
  margin-top: 20px;
}

.mainframe_ #genre_wrap_btm.foods_top #category .btn_all a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  max-width: 400px;
  margin: 0 auto;
  background: #111;
  border: 1px solid #111;
  border-radius: 60px;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.mainframe_ #genre_wrap_btm.foods_top #category .btn_all a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: translateY(-50%) rotate(-45deg);
}

/* マウスオーバー */
.mainframe_ #genre_wrap_btm.foods_top #category .btn_all a:hover {
  background: #fff !important;
  color: #111;
  opacity: 1;
}

.mainframe_ #genre_wrap_btm.foods_top #category .btn_all a:hover::after {
  border-color: #111;
}

/*  《フード・スイーツ》SNS訴求（#sns）
--------------------------------- */
.mainframe_ #genre_wrap_btm.foods_top #sns > div {
  position: relative;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div .desc {
  position: absolute;
  top: -20px;
  left: 50%;
  z-index: 1;
  width: auto;
  padding: 10px;
  background: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  color : #000;
  transform: translate(-50%, -0);
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 80%;
  margin: auto;
  padding: 40px;
  border: 1px solid #ccc;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li .inner {
  display: flex;
  align-items: center;
  gap: 30px;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li .inner .accountInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li .inner .accountInfo .icon {
  width: 120px;
  padding: 6px;
  border: 4px solid transparent;
  border-radius: 999px;
  overflow: hidden;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li .inner .accountInfo .icon img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid #888;
  border-radius: 999px;
  box-shadow: 0 0 4px 0 rgb(61, 61, 61, 15%);
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li .inner .accountInfo p {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #222;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li .inner .accountInfo p > span.sns_name {
  font-size: 1.4rem;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li .inner .accountInfo p > span.account-id {
  font-size: 1.8rem;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li .inner .btn {
  flex-grow: 1;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li .inner .btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  margin-top: 10px;
  background: #222;
  border: 1px solid #222;
  border-radius: 999px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li .inner .btn:hover a {
  background: #fff;
  color: #222;
}

/* インスタグラム（.instagram） */
.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li.instagram .inner .accountInfo .icon {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, rgb(247, 207, 0, 70%), rgb(246, 37, 2, 70%) 45%, rgb(182, 47, 82, 70%) 75%, rgb(113, 58, 166, 70%)) border-box;;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li.instagram .inner p > span.sns_name {
  color: #cf2f93;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li.instagram .inner .btn a {
  background: #cf2f93;
  border: 1px solid #cf2f93;
  color: #fff;
}

.mainframe_ #genre_wrap_btm.foods_top #sns > div ul li.instagram .inner .btn:hover a {
  background: #fff;
  color: #cf2f93;
}

/* //PC ここまで */

/* --------------------------------------------------------------------
【SP】「フード・スイーツTOP」ページ用CSS / .wrapper_:not(:has(.mainframe_)) #genre_wrap_top
--------------------------------------------------------------------- */

/* 初期設定
--------------------------------- */

/* 自動出力エリア：タイトル表示 */
.wrapper_:not(:has(.mainframe_)) > .m-title03_ {
  position: relative;
  display: flex;
  justify-content: end;
  align-items: end;
  height: 30px;
  margin: 0 0 12px;
  padding: 3px 1% 3px 38%;
  border-top: 2px solid #0a0a0a;
  border-bottom: 1px solid #333;
  font-family: initial;
  font-size: 1.2rem;
  line-height: 1;
  text-align: right;
  color: #000;
  flex-wrap: wrap;
}

.wrapper_:not(:has(.mainframe_)) > .m-title03_::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1%;
  display: block;
  width: auto;
  height: 20px;
  aspect-ratio: 366 / 60;
  margin: 10px 0 0;
  background: url("/contents/proper/foods/genre/img/logo.png") 0 0 / contain no-repeat;
}

/* フリースペースの余白 */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_top {
  margin-bottom: 30px;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm {
  margin-bottom: 50px;
}

/* 《フード・スイーツ》コンテンツタイトル */
.wrapper_:not(:has(.mainframe_)) .title_box {
  margin-bottom: 30px;
  text-align: center;
}

.wrapper_:not(:has(.mainframe_)) .title_box .en {
  font-family: '游明朝', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'ＭＳ 明朝', serif;
  font-size: 3.0rem;
  line-height: 1;
  color: #000;
  letter-spacing: 0.1em;
}

.wrapper_:not(:has(.mainframe_)) .title_box .ja {
  margin-top: 5px;
  font-size: 1.6rem;
  color: #888;
  letter-spacing: 0.1em;
}

/* 《フード・スイーツ》各セクションの装飾・余白 */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top section:not(:first-of-type) {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid #111;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top section#sns {
  border: none;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top section:first-of-type {
  padding-top: 20px;
}

/* 《フード・スイーツ》下層カテゴリー非表示（.m-catlist_) */
.wrapper_:not(:has(.mainframe_)) .m-catlist_ {
  display: none;
}

/* 《フード・スイーツ》ナビメニュー(#navi_menu)
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_top.foods_top #navi_menu ul {
  display: flex;
  margin: 0;
  padding: 0;
  background: #fff;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  flex-wrap: wrap;
  list-style: none;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_top.foods_top #navi_menu ul:has(li:nth-child(5)) li {
  flex-grow: 0;
  border-bottom: 1px solid #ccc;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_top.foods_top #navi_menu ul:has(li:nth-child(5)) li:nth-child(4n + 1):nth-last-child(-n + 4),
.wrapper_:not(:has(.mainframe_)) #genre_wrap_top.foods_top #navi_menu ul:has(li:nth-child(5)) li:nth-child(4n + 1):nth-last-child(-n + 4) ~ li {
  border-bottom: none;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_top.foods_top #navi_menu ul li {
  position: relative;
  min-width: 0;
  padding: 10px;
  flex: 1 1 25%;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_top.foods_top #navi_menu ul li::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 10px;
  width: 0;
  border-right: 1px solid #ccc;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_top.foods_top #navi_menu ul li:nth-child(4n)::after,
.wrapper_:not(:has(.mainframe_)) #genre_wrap_top.foods_top #navi_menu ul li:last-child::after {
  display: none;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_top.foods_top #navi_menu ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 60px;
  background: #fff;
  font-size: 1.4rem;
  line-height: 1.2;
  text-align: center;
  color: #111;
  flex-wrap: wrap;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_top.foods_top #navi_menu ul li a::after {
  content: '';
  position: absolute;
  top: 80%;
  right: 50%;
  width: 6px;
  height: 6px;
  border-right: solid 1px #111;
  border-bottom: solid 1px #111;
  transform: translateY(-50%) translateX(50%) rotate(45deg);
}

/* イベント紐づけ（.event_）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) .event_ .m-title01_ {
  position: relative;
  margin-bottom: 30px;
  padding: 20px 120px 0 10px;
  background: none;
  border: none;
  font-size: 2.4rem;
}

.wrapper_:not(:has(.mainframe_)) .event_ .m-title01_ .ttl {
  padding: 0;
}

.wrapper_:not(:has(.mainframe_)) .event_ .m-title01_ .detail {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  background: #FFF;
  border: 1px solid #ccc;
  border-radius: 5em;
}

.wrapper_:not(:has(.mainframe_)) .event_ .m-title01_ .detail a {
  display: block;
  padding: 15px 10px;
  color: #3d3d3d;
}

/* スライダーフリースペース2の非表示 ※非表示にするdivに、クラス「import_hidden」を設置 */
.wrapper_:not(:has(.mainframe_)) .event_ .import_hidden {
  display: none;
}

/* 《フード・スイーツ》各イベントの間隔 */
.wrapper_:not(:has(.mainframe_)):has(.foods_top) .event_ .free_space5 ~ .free_space5 > div {
  margin-top: 60px;
}

/* --------------------------------------------------------------------
【SP】下部回遊エリア(フリースペース2・4) / .wrapper_:not(:has(.mainframe_)) #genre_wrap_btm
--------------------------------------------------------------------- */

/* 《フード・スイーツ》アイテム並び（.item_list） */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top .gallery .item_list > .inner {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  padding: 0 3%;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top .gallery .item_list > .inner > * {
  width: 100%;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top .gallery .item_list > .inner > * img {
  display: block;
  width: 100%;
  height: auto;}

/* 《フード・スイーツ》特集(#feature)
--------------------------------- */

/* タブ切り替えボタン */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features .js-tab-switch button a {
  border-bottom: 4px solid #ccc;
  color: #777;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features .js-tab-switch button.active-item a {
  color: #333;
  border-color: #333;
}

/* カードの基本デザイン（見出し・本文・画像） */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features .item_list > .inner li a img {
  order: 1;
  border: 1px solid #ccc;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features .item_list > .inner li a .icon {
  order: 2;
  display: inline-flex;
  align-items: center;
  grid-column: 2;
  align-self: start;
  height: 14px;
  margin: 2px 0;
  padding: 4px;
  border-left: 4px solid #ceb271;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  color: #8d6404;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features .item_list > .inner li a h3 {
  order: 3;
  min-height: calc(1.5rem * 1.6 * 2);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  color: #111;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features .item_list > .inner li a p:not([class*="icon"]) {
  order: 4;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #555;
}

/* 期間限定 */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features .item_list > .inner li a .icon.red {
  color: #bf0d0d !important; 
  border-color: #bf0d0d !important;
}

/* 「新着」タブは10件まで */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button#new.active-item) .item_list .inner li:nth-child(n+11) {
  display: none !important;
}

/* ---------------------------------
  表示切り替え�@：一覧表示（value="content-c"）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner {
  gap: 30px 4%;
  grid-template-columns: repeat(2, 1fr);
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner li a {
  display: flex;
  flex-direction: column;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner li img {
  order: -1;
  margin-bottom: 6px;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner li .icon {
  margin: 0 0 8px;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner li a h3 {
  margin-top: 0;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner li:not(:has(.icon)) a h3 {
  margin-top: calc(14px + 8px);
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button[value="content-c"].active-item) .item_list .inner li a p:not([class*="icon"]) {
  margin-top: 10px;
}

/* ---------------------------------
  表示切り替え�A：アイコン付き一覧（content-c以外）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner {
  gap: 20px;
  grid-template-columns: repeat(1, 1fr);
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner li {
  display: flex;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner li a {
  display: grid;
  grid-template-columns: min(150px, 40%) 1fr;
  align-content: center;
  column-gap: 10px;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner li a img {
  grid-column: 1;
  grid-row: 1 / span 4;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner li a .icon {
  margin: 0;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner li a h3 {
  margin-top: 10px;
  grid-column: 2;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #features:has(.js-tab-switch button:not([value="content-c"]).active-item) .item_list .inner li a p:not([class*="icon"]) {
  margin: 0;
}

/* 《フード・スイーツ》ブランド（#brand_wrap）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #brand_wrap .item_list > .inner > div {
  aspect-ratio: 5/3;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #brand_wrap .item_list > .inner > div a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: auto;
  background: #fff;
  border: 1px solid #ccc;
  overflow: hidden;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #brand_wrap .item_list > .inner > div a p:not(.rubi) {
  display: none;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #brand_wrap .item_list > .inner > div a p.rubi {
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #brand_wrap .item_list > .inner > div a p.rubi .icon {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 3px 5px;
  background: #eee;
  font-size: 1.2rem;
  line-height: 1;
  color: #444;
  letter-spacing: 0.08em;
}

/* 要素の表示制限とボタン追加（addshowmorebutton.js） */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #brand_wrap .js-list-sec:has(.js-toggle-trigger.is-active) .js-toggle-content {
  margin-top: 10px;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #brand_wrap .js-list-sec .js-toggle-button {
  background: #f1f1f1;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #brand_wrap .js-list-sec .js-toggle-trigger .ico_::before,
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #brand_wrap .js-list-sec .js-toggle-trigger .ico_::after {
  background: #222;
}

/* 《フード・スイーツ》カテゴリー（#category）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .item_list ul li a span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 10px; 
  background: #fff;
  border: 1px solid #ccc;
  font-size: 1.4rem;
  line-height: 1.2; 
  text-align: center; 
  color: #333;
}

/* 画像付きアイテム */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .item_list ul li.item-img a {
  display: flex;
  flex-direction: column;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .item_list ul li.item-img a::before {
  content: '';
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: no-repeat center center / 100%;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .item_list ul li.item-img a[href*="/shop/r/r2020/"]::before {
  background-image: url("/img/genre/1/2020.jpg");
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .item_list ul li.item-img a[href*="/shop/r/r2010/"]::before {
  background-image: url("/img/genre/1/2010.jpg");
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .item_list ul li.item-img a[href*="/shop/r/r2060/"]::before {
  background-image: url("/img/genre/1/2060.jpg");
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .item_list ul li.item-img a[href*="/shop/r/r2040/"]::before {
  background-image: url("/img/genre/1/2040.jpg");
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .item_list ul li.item-img a span {
  height: 50px;
  padding: 0;
  border: none;
}

/* 5つ目のアイテム以降は1カラム＋矢印 */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .item_list ul li:nth-child(n+5) {
  position: relative;
  grid-column: span 2;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .item_list ul li:nth-child(n+5)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #222;
  border-bottom: solid 1px #222;
  transform: translateY(-50%) rotate(-45deg);
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .item_list ul li:nth-child(n+5) a span {
  align-items: flex-start;
}

/* 6つ目以降は余白無し */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .item_list ul li:nth-child(n+6) {
  margin-top: -11px;
}

/* ボタン：すべての商品を見る */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .btn_all {
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .btn_all a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  margin-top: 20px;
  background: #111;
  border: 1px solid #111;
  border-radius: 60px;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #category .btn_all a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: translateY(-50%) rotate(-45deg);
}

/* 《フード・スイーツ》SNS訴求（#sns）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div {
  position: relative;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div .desc {
  position: absolute;
  top: -20px;
  left: 50%;
  z-index: 1;
  width: auto;
  padding: 10px 20px;
  background: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  color: #000;
  white-space: nowrap;
  transform: translate(-50%, -0);
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div ul {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0 3%;
  padding: 30px 3%;
  border: 1px solid #ccc;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div ul li .inner .accountInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div ul li .inner .accountInfo .icon {
  width: 30%;
  min-width: 100px;
  aspect-ratio: 1;
  padding: 4px;
  border: 4px solid transparent;
  border-radius: 999px;
  overflow: hidden;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div ul li .inner .accountInfo .icon img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid #888;
  border-radius: 999px;
  box-shadow: 0 0 4px 0 rgb(61, 61, 61, 15%);
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div ul li .inner .accountInfo p {
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
  color: #222;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div ul li .inner .accountInfo p > span.sns_name {
  font-size: 1.5rem;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div ul li .inner .accountInfo p > span.account-id {
  font-size: 1.8rem;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div ul li .inner .btn {
  width: 70%;
  margin: 0 auto;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div ul li .inner .btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  margin-top: 10px;
  background: #222;
  border: 1px solid #222;
  border-radius: 999px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

/* インスタグラム（.instagram） */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div ul li.instagram .inner .accountInfo .icon {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, rgb(160, 145, 72, 70%), rgb(246, 37, 2, 70%) 45%, rgb(182, 47, 82, 70%) 75%, rgb(113, 58, 166, 70%)) border-box;;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div ul li.instagram .inner p > span.sns_name {
  color: #cf2f93;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm.foods_top #sns > div ul li.instagram .inner .btn a {
  background: #cf2f93;
  border: 1px solid #cf2f93;
  color: #fff;
}

/* //SP ここまで */