@charset "UTF-8";

/* --------------------------------------------------------------------
  カテゴリ一覧　共通
--------------------------------------------------------------------- */
h1.category_name_,
h1.genre_name_ {
  position: relative;
  margin: 0 0 16px;
  padding: 11px 20px;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.3;
  background: var(--bgColor);
}

h1.category_name_::before,
h1.genre_name_::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 24px;
  margin: auto;
  background: var(--themeColor);
}

h1.category_name_img_ {
  margin-bottom: 10px;
}

div.comment_middle_ {
  margin: 0 0 22px;
  font-weight: 400;
  line-height: 1.714;
}

/* --------------------------------------------------------------------
  カテゴリ一覧
-------------------------------------------------------------------- */
div.sub_category_ {
  display: none;
  margin: 32px 0 40px;
  padding: 16px;
  background: var(--bgColor);
}

div.sub_category_ .CategoryStyleG_Title_ {
  margin: 0 0 10px;
  font-weight: bold;
  font-size: 18px;
}

div.sub_category_ .CategoryStyleG_ {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

div.sub_category_ .CategoryStyleG_ .CategoryStyleG_Item_ {
  width: calc((100% - 8px)/2);
}

div.sub_category_ .CategoryStyleG_ .CategoryStyleG_Item_:has(.img_) {
  width: 100%;
}

div.sub_category_ .CategoryStyleG_ .category_link_,
div.sub_category_ .CategoryStyleG_ .category_nolink_ {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--borderColor);
  border-radius: 4px;
}

div.sub_category_ .CategoryStyleG_ .CategoryStyleG_Item_:has(.img_) .category_link_,
div.sub_category_ .CategoryStyleG_ .CategoryStyleG_Item_:has(.img_) .category_nolink_ {
  align-items: flex-start;
}

div.sub_category_ .CategoryStyleG_ .img_frame_ .img_ {
  margin: 0 0 8px;
  text-align: center;
}

div.sub_category_ .CategoryStyleG_ .img_frame_ .name_ {
  position: relative;
  padding: 0 0 0 11px;
}

div.sub_category_ .CategoryStyleG_ .img_frame_ .name_::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 4px;
  height: 8px;
  margin: auto;
  background: var(--themeColor);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

div.sub_category_ .CategoryStyleG_ .comment_frame_ {
  width: calc(100% - 128px);
  margin-left: 8px;
  flex-shrink: 0;
  word-break: break-all;
}

/* --------------------------------------------------------------------
  ジャンル一覧
-------------------------------------------------------------------- */
div.genre_list_ {
  display: none;
  margin: 32px 0 40px;
  padding: 16px;
  background: var(--bgColor);
}

div.genre_list_ .GenreStyle_Title_ {
  margin: 0 0 10px;
  font-weight: bold;
  font-size: 18px;
}

div.genre_list_ .GenreStyle_ {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

div.genre_list_ .GenreStyle_ .genre_list_block_ {
  width: calc((100% - 8px)/2);
}

div.genre_list_ .GenreStyle_ .genre_list_block_:has(.img_) {
  width: 100%;
}

div.genre_list_ .GenreStyle_ .genre_link_,
div.genre_list_ .GenreStyle_ .genre_nolink_ {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--borderColor);
  border-radius: 4px;
}

div.genre_list_ .GenreStyle_ .genre_list_block_:has(.img_) .category_link_,
div.genre_list_ .GenreStyle_ .genre_list_block_:has(.img_) .category_nolink_ {
  align-items: flex-start;
}

div.genre_list_ .GenreStyle_ .img_frame_ .img_ {
  margin: 0 0 8px;
  text-align: center;
}

div.genre_list_ .GenreStyle_ .img_frame_ .name_ {
  position: relative;
  padding: 0 0 0 11px;
}

div.genre_list_ .GenreStyle_ .img_frame_ .name_::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 4px;
  height: 8px;
  margin: auto;
  background: var(--themeColor);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

div.genre_list_ .GenreStyle_ .comment_frame_ {
  width: calc(100% - 128px);
  margin-left: 8px;
  flex-shrink: 0;
  word-break: break-all;
}