@charset "Shift_JIS";

.mainframe_, .wrapper_:not(:has(.mainframe_)) {
  /* フォントサイズ（基本） */
  --fontsize-3xs: 1rem;
  --fontsize-2xs: 1.2rem;
  --fontsize-1xs: 1.4rem;
  --fontsize-s: 1.5rem;
  --fontsize-m: 1.6rem;
  --fontsize-l: 1.8rem;
  --fontsize-1xl: 2rem;
  --fontsize-2xl: 2.2rem;
  --fontsize-3xl: 2.4rem;
  --fontsize-4xl: 2.6rem;
  --fontsize-5xl: 2.8rem;
  --fontsize-6xl: 3rem;
  --fontsize-7xl: 3.2rem;
}

.mainframe_ .soumen, .wrapper_:not(:has(.mainframe_)) .soumen {
  /* カラー設定 */
  --color-brown: #35271f;
  --color-soft-brown: #efe5d8;
}

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

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

/* --------------------------------------------------------------------
【PC】「素麺特集」ページ用CSS / .mainframe_ .soumen
--------------------------------------------------------------------- */

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

/*  画像見出し（.m-titleimg_） */
.mainframe_ .m-titleimg_ {
  margin-bottom: 10px;
}

/* 下層カテゴリー非表示（.free_block_) */
.mainframe_ .free_block_ {
  display: none;
}

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

/* ナビメニュー（#navi_menu）
--------------------------------- */
.mainframe_ .soumen #navi_menu.js-change-active-area ul li a {
  background: #fff;
  color: var(--color-brown);
  border-color: var(--color-brown);
} 

.mainframe_ .soumen #navi_menu.js-change-active-area ul li.active-item a {
  background: var(--color-brown);
  color: #fff;
  border-color: var(--color-brown);
}

.mainframe_ .soumen #navi_menu.js-change-active-area ul:has(li.active-item) {
  border-bottom: 5px solid var(--color-brown);
}

.mainframe_ .soumen #navi_menu.js-change-active-area ul li a:hover {
  background: var(--color-soft-brown);
}

/* タイトル（#title_list）
--------------------------------- */
.mainframe_ .soumen #title_list.js-change-active-area p {
  color: var(--color-dark-brown);
}

/* //PC ここまで */

/* --------------------------------------------------------------------
【SP】「素麺特集」ページ用CSS / .mainframe_ .soumen
--------------------------------------------------------------------- */

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

/* 下層カテゴリー非表示（.m-catlist_) */
.wrapper_:not(:has(.mainframe_)) .m-catlist_ {
  display: none;
}

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

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm {
  margin: 30px 0;
}

/* リード文センター寄せ */
.wrapper_:not(:has(.mainframe_)) .soumen > .txt p + p {
  text-align: center;
}

/* ナビメニュー（#navi_menu）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) .soumen #navi_menu.js-change-active-area ul li a {
  background: #fff;
  color: var(--color-brown);
  border-color: var(--color-brown);
}

.wrapper_:not(:has(.mainframe_)) .soumen #navi_menu.js-change-active-area ul li.active-item a {
  background: var(--color-brown);
  color: #fff;
  border-color: var(--color-brown);
}

.wrapper_:not(:has(.mainframe_)) .soumen #navi_menu.js-change-active-area ul li.active-item a::after {
  border-color: #fff;
}

.wrapper_:not(:has(.mainframe_)) .soumen #navi_menu.js-change-active-area ul li a::after {
  border-color: var(--color-brown);
}

/* タイトル（#title_list）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) .soumen #title_list.js-change-active-area {
  border-color: var(--color-brown);
}

.wrapper_:not(:has(.mainframe_)) .soumen #title_list.js-change-active-area p {
  color: var(--color-brown);
}

/* //SP ここまで */