/* ========================================
カテゴリー・グループ関連
======================================== */

.cg_freespace_01 {
    margin-bottom: 10px;
}

.cg_freespace_02 {
    margin-bottom: 10px;
}


/* ========================================
カテゴリー・グループ共通一覧

PC：3列
======================================== */

.subcategorylist_lists {

    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 12px !important;

    width: 100%;

    box-sizing: border-box;

    margin: 40px 0 0 0 !important;

    padding: 0 !important;

    list-style: none !important;

}


/* ========================================
カテゴリー・グループ共通
オレンジバナー
======================================== */

.subcategorylist_lists > .subcategorylist_list {

    display: flex !important;

    align-items: stretch !important;

    justify-content: stretch !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 76px;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding: 0 !important;

    background-color: #ff9933;

    border-radius: 5px;

    overflow: hidden;

}


/* ========================================
テキストバナー
======================================== */

.subcategorylist_lists > .subcategorylist_list--text > a {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    min-height: 76px;

    box-sizing: border-box;

    /*
    ここが文字の上下余白
    */
    padding: 16px 14px !important;

    color: #fff !important;

    font-size: 16px;

    font-weight: bold;

    line-height: 1.5;

    text-decoration: none !important;

    text-align: center;

}


/* ========================================
グループ画像あり
======================================== */

.subcategorylist_lists > .subcategorylist_list--image {

    display: block !important;

    min-height: 0;

    padding: 0 !important;

    background-color: transparent !important;

    border-radius: 0;

    overflow: hidden;

}


/* 画像リンク */

.subcategorylist_lists > .subcategorylist_list--image > a {

    display: block !important;

    width: 100% !important;

    min-height: 0;

    margin: 0 !important;

    padding: 0 !important;

}


/* グループ画像 */

.subcategorylist_list_img {

    display: block;

    width: 100%;

    height: auto;

    margin: 0;

    padding: 0;

    border: 0;

}


/* ========================================
商品一覧
======================================== */

.productlist_heading {

    margin: 40px 0 20px;

}


.productlist_lists {

    margin-top: 20px;

    font-size: 0.85em;

}


.productlist_list {

    margin-bottom: 40px;

    text-align: center;

    position: relative;

}


.productlist_number {

    float: left;

    line-height: 1.4;

}


.productlist_number span {

    font-size: 1.25em;

    padding: 0 5px;

}


.productlist_sort {

    float: right;

}


.productlist_sort a {

    padding: 0 5px;

}


/* ========================================
pagerlist
======================================== */

.pagerlist {

    position: relative;

    overflow: hidden;

    margin-bottom: 20px;

}


.pagerlist ul {

    text-align: right;

    padding-top: 15px;

}


.pagerlist li {

    text-align: center;

    line-height: 26px;

    display: inline-block;

    *display: inline;

    *zoom: 1;

}


.pagerlist li a,
.pagerlist li span {

    display: block;

    float: left;

    min-width: 26px;

    height: 26px;

    box-sizing: border-box;

    padding: 0 .5em;

}


.pagerlist li a {

    border: 1px solid #333;

    background-color: #fff;

    color: #333;

    text-decoration: none;

}


.pagerlist li a:hover {

    border: 1px solid #333;

    background-color: #333;

    color: #fff;

}


.pagerlist li span {

    border: 1px solid #ccc;

    background-color: #fff;

    color: #ccc;

}


/* ========================================
スマートフォン用ページャー
======================================== */

.pagerlist_sp {

    text-align: center;

}


.pagerlist_sp_top {

    margin: 20px 0 10px 0;

}


.pagerlist_sp_btm {

    margin: -20px 0 60px;

}


.pagerlist_sp ul {

    margin: 0;

}


.pagerlist_sp li {

    display: inline;

    margin: 0 5px;

}


.pagerlist_pos {

    font-size: 0.85em;

    margin: 10px 0;

}


.pagerlist_pos span {

    font-size: 1em;

    padding: 0 5px;

}


/* ========================================
スマートフォン：768px以下
======================================== */

@media (max-width: 768px) {


    .cg_freespace_02 {

        font-size: 0.85em;

        margin-bottom: 60px;

    }


    /* ====================================
       カテゴリー・グループ共通

       スマホ：2列
       ==================================== */

    .subcategorylist_lists {

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        margin-top: 30px !important;

    }


    /*
       スマホ版バナー
    */

    .subcategorylist_lists > .subcategorylist_list {

        min-height: 66px;

    }


    /*
       スマホ版文字バナー
    */

    .subcategorylist_lists > .subcategorylist_list--text > a {

        min-height: 66px;

        padding: 13px 10px !important;

        font-size: 14px;

        line-height: 1.5;

    }


    /*
       グループ画像
    */

    .subcategorylist_lists > .subcategorylist_list--image {

        min-height: 0;

    }


    .subcategorylist_lists > .subcategorylist_list--image > a {

        min-height: 0;

        padding: 0 !important;

    }


    .subcategorylist_list_img {

        width: 100%;

        height: auto;

    }


    /* ====================================
       商品一覧
       ==================================== */

    .productlist_noitem {

        padding: 0 10px 20px;

    }


    .productlist_sort {

        font-size: 0.85em;

        float: none;

        text-align: center;

    }

}

/* ========================================
   カテゴリー・グループ一覧の配置を全階層で統一
   ======================================== */
.subcategorylist_lists,
.subcategorylist_lists--category,
.subcategorylist_lists--group {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 12px !important;
  clear: both !important;
  float: none !important;
  position: static !important;
  width: 100% !important;
  margin: 40px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

/* 各カードに残っている旧テンプレートのfloat・位置指定を解除 */
.subcategorylist_lists > li.subcategorylist_list {
  grid-column: auto !important;
  grid-row: auto !important;
  float: none !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* ========================================
   modo旧形式・新形式の両方に対応する最終上書き
   下位階層で旧HTMLが出力された場合にも適用
   ======================================== */

/* Bootstrapのclearfix疑似要素がGridの1マス目を占有するのを防ぐ */
.subcategorylist_lists::before,
.subcategorylist_lists::after {
  display: none !important;
  content: none !important;
}

/* 画像を含まない項目は、class名に関係なく文字ボタンにする */
body .subcategorylist_lists > li.subcategorylist_list:not(:has(img)) {
  display: flex !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  float: none !important;
  clear: none !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 76px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ff9933 !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transform: none !important;
}

body .subcategorylist_lists > li.subcategorylist_list:not(:has(img)) > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  position: static !important;
  width: 100% !important;
  min-height: 76px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 16px 14px !important;
  color: #fff !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* 画像を含む項目は登録画像をそのまま表示 */
body .subcategorylist_lists > li.subcategorylist_list:has(img) {
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  float: none !important;
  clear: none !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transform: none !important;
}

body .subcategorylist_lists > li.subcategorylist_list:has(img) > a {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .subcategorylist_lists > li.subcategorylist_list:has(img) img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

@media (max-width: 768px) {
  body .subcategorylist_lists > li.subcategorylist_list:not(:has(img)),
  body .subcategorylist_lists > li.subcategorylist_list:not(:has(img)) > a {
    min-height: 66px !important;
  }

  body .subcategorylist_lists > li.subcategorylist_list:not(:has(img)) > a {
    padding: 13px 10px !important;
    font-size: 14px !important;
  }
}

/* modo標準CSSの先頭・各行指定を解除し、必ず左から順に配置 */
.subcategorylist_lists > li.subcategorylist_list:first-child,
.subcategorylist_lists > li.subcategorylist_list:nth-child(2n),
.subcategorylist_lists > li.subcategorylist_list:nth-child(2n + 1),
.subcategorylist_lists > li.subcategorylist_list:nth-child(3n),
.subcategorylist_lists > li.subcategorylist_list:nth-child(3n + 1),
.subcategorylist_lists > li.subcategorylist_list:nth-child(3n + 2) {
  grid-column: auto !important;
  grid-row: auto !important;
  float: none !important;
  clear: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  transform: none !important;
}

/* 画像未登録のカテゴリー・グループ：文字ボタン */
.subcategorylist_lists > li.subcategorylist_list--text {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-height: 76px !important;
  background: #ff9933 !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}

.subcategorylist_lists > li.subcategorylist_list--text > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  position: static !important;
  width: 100% !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 16px 14px !important;
  color: #fff !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* 登録画像を読み込めなかった場合も文字ボタンと同じ表示にする */
.subcategorylist_lists > li.subcategorylist_list--text > a.subcategorylist_fallback_link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 16px 14px !important;
  color: #fff !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* 画像登録済みのグループ：登録画像を表示 */
.subcategorylist_lists > li.subcategorylist_list--image {
  display: block !important;
  min-height: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.subcategorylist_lists > li.subcategorylist_list--image > a {
  display: block !important;
  float: none !important;
  position: static !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.subcategorylist_lists > li.subcategorylist_list--image img,
.subcategorylist_list_img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

@media (max-width: 768px) {
  .subcategorylist_lists,
  .subcategorylist_lists--category,
  .subcategorylist_lists--group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 30px !important;
  }

  .subcategorylist_lists > li.subcategorylist_list--text,
  .subcategorylist_lists > li.subcategorylist_list--text > a {
    min-height: 66px !important;
  }

  .subcategorylist_lists > li.subcategorylist_list--text > a {
    padding: 13px 10px !important;
    font-size: 14px !important;
  }

  .subcategorylist_lists > li.subcategorylist_list--text > a.subcategorylist_fallback_link {
    min-height: 66px !important;
    padding: 13px 10px !important;
    font-size: 14px !important;
  }
}