@charset "UTF-8";

/* -----------------------------------------------------
共通
----------------------------------------------------- */
main .private_label {
  border: 1px solid var(--gray_color_light);
  padding: 0.2em 0.6em;
  width: fit-content;
  display: inline-block;
}

/* -----------------------------------------------------
一覧
----------------------------------------------------- */
.post_list_wrapper article > a {
  color: inherit;
  text-decoration: none;
  display: flex;
}

.post_list_wrapper .post_list {
  display: flex;
}

.post_list_wrapper article .category {
  border: var(--gray_color_light) 1px solid;
  background-color: var(--gray_color_super_light);
  padding: 0.45em 0.5em;
}
.post_list_wrapper article .category p {
  font-size: 1.3rem;
  width: fit-content;
  margin: 0 auto;
}

/* ----------------------
一覧 UAがスマホ or タブレット
---------------------- */
@media (max-width: 850px) {
  .ua_sp_tab .post_list_wrapper .horizontal_scroll:has(article + article) {
    width: 100vw;
    margin-left: -3.5vw;
    padding-bottom: 16px;
  }
  .ua_sp_tab .post_list_wrapper .horizontal_scroll:has(article + article) .post_list {
    display: flex;
    justify-content: normal;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .ua_sp_tab .post_list_wrapper .horizontal_scroll:has(article + article) .post_list::before,
  .ua_sp_tab .post_list_wrapper .horizontal_scroll:has(article + article) .post_list::after {
    content: '';
    width: calc(3.5vw - 10px);
    flex-shrink: 0;
  }
  .ua_sp_tab .post_list_wrapper .horizontal_scroll:has(article + article) .post_list article {
    width: 280px;
    flex-shrink: 0;
  }
  .ua_sp_tab .post_list_wrapper.staff .horizontal_scroll:has(article + article) .post_list article {
    width: 210px;
  }
}
@media (max-width: 640px) {
  .ua_sp_tab .post_list_wrapper.staff .horizontal_scroll:has(article + article) .post_list article {
    width: 160px;
  }
}


/* -----------------------------------------------------
詳細
----------------------------------------------------- */
.post_detail_wrapper .private_label {
  font-size: 1.8rem;
  margin-bottom: 0.3em;
}

.post_detail_wrapper header .date_category {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.post_detail_wrapper header .date {
  font-size: 1.8rem;
  color: var(--gray_color);
  letter-spacing: 0.05em;
}

.post_detail_wrapper header .category {
  max-width: 50%;
}

.post_detail_wrapper header .category a {
  text-decoration: none;
  display: block;
  width: fit-content;
  font-size: 1.4rem;
  padding: 0.45em 1em;
  background-color: var(--gray_color_dark);
  color: #fff;
  line-height: 1.5;
}

.post_detail_wrapper header .category a:hover {
  background-color: #4e4e4e;
}
.post_detail_wrapper header h1.title {
  font-size: 3.4rem;
  margin: 0;
}

.post_detail_wrapper .entry_content {
  margin-top: 26px;
}
.post_detail_wrapper footer {
  margin-top: 60px;
}
.post_detail_wrapper footer .back_to_list {
  text-align: center;
}
.post_detail_wrapper footer .back_to_list a {
  width: 15em;
}

@media (max-width: 767px) {
  .post_detail_wrapper footer {
    margin-top: 40px;
  }
}

/* -----------------------------------------------------
ループコンテンツ
----------------------------------------------------- */
.loop_content + .loop_content {
  margin-top: 40px;
}
.loop_content.only_naiyo + .loop_content.only_naiyo {
  margin-top: 34px;
}

.loop_content.both .wrap_img_naiyo {
  display: flex;
  gap: 5%;
}

.loop_content .wrap_img {
  display: flex;
}
.loop_content.both .wrap_img {
  flex-flow: column;
  gap: 24px;
  width: 33%;
  flex-shrink: 0;
}
.loop_content.only_img .wrap_img.count_2,
.loop_content.only_img .wrap_img.count_3 {
  justify-content: space-between;
}
.loop_content.only_img .wrap_img.count_1 .img {
  width: 100%;
}
.loop_content.only_img .wrap_img.count_2 .img {
  width: 47.5%;
}
.loop_content.only_img .wrap_img.count_3 .img {
  width: 31.5%;
}
.loop_content .wrap_img .img img {
  width: 100%;
}
.loop_content.both .naiyo {
  flex: 1;
}

@media (max-width: 767px) {
  .loop_content + .loop_content {
    margin-top: 34px;
  }
  .loop_content.both .wrap_img_naiyo {
    flex-flow: column;
    gap: 20px;
  }
  .loop_content.both .wrap_img {
    width: 100%;
  }
}