@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_ .coolsweets, .wrapper_:not(:has(.mainframe_)) .coolsweets {
  /* カラー設定 */
  --color-cyan: #68c7ed;
  --color-cyan-light: #d7f1f7;
  --color-dark-blue: #111;
  --color-c-set1: #0152ad;
  --color-c-set2: #33cea5;
}

.mainframe_ .coolsweets .c_set1 ,
.wrapper_:not(:has(.mainframe_)) .coolsweets .c_set1 {
  color: var(--color-c-set1);
}

.mainframe_ .coolsweets .c_set2 ,
.wrapper_:not(:has(.mainframe_)) .coolsweets .c_set2 {
  color: var(--color-c-set2);
}

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

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

/* --------------------------------------------------------------------
【PC】「ひんやりスイーツ特集」ページ用CSS / .mainframe_ .coolsweets
--------------------------------------------------------------------- */

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

/*  画像見出し（.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;
}

/* リンク：掲載商品一覧 */
.mainframe_ .coolsweets .head {
  position: relative;
}

.mainframe_ .coolsweets .head .btn {
  position: absolute;
  right: 5px;
  bottom: 5px;
}

.mainframe_ .coolsweets .head .btn a {
  display: inline-block;
  padding: 5px 10px;
  background: rgb(255, 255, 255, 85%);
  font-size: 1.3rem;
  color: #1a0dab;
}

.mainframe_ .coolsweets .head .btn a::after {
  content: ' ＞';
  display: inline;
}

/* マウスオーバー */
.mainframe_ .coolsweets .head .btn a:hover {
  opacity: 1;
  text-decoration: underline !important;
}

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

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

.mainframe_ .coolsweets #navi_menu.js-change-active-area ul li a:hover {
  background: var(--color-cyan-light);
}

.mainframe_ .coolsweets #navi_menu.js-change-active-area ul li.active-item a {
  background: var(--color-cyan);
  border-color: var(--color-cyan);
  color: var(--color-dark-blue);
}

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

/* //PC ここまで */

/* --------------------------------------------------------------------
【SP】「ひんやりスイーツ特集」ページ用CSS / .mainframe_ .coolsweets
--------------------------------------------------------------------- */

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

/* 下層カテゴリー非表示（.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_)) .coolsweets .head .btn {
  background: var(--color-cyan-light);
  text-align: center;
}

.wrapper_:not(:has(.mainframe_)) .coolsweets .head .btn a {
  font-size: 1.3rem;
  color: #1a0dab;
}

.wrapper_:not(:has(.mainframe_)) .coolsweets .head .btn a::after {
  content: ' ＞';
  display: inline;
}

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

.wrapper_:not(:has(.mainframe_)) .coolsweets #navi_menu.js-change-active-area ul li.active-item a {
  background: var(--color-cyan);
  border-color: var(--color-cyan);
  color: var(--color-dark-blue);
}

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

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

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

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

/* //PC ここまで */