@charset "UTF-8";

/* ==========================================================

title :刀剣広場 イラスト・マンガ投稿／「個別ページ」
scope :刀剣広場 イラスト・マンガ投稿／「個別ページ」

memo：

last modify : 2020/11/02 TCI福岡／WEB2TCI-14309

========================================================== */
/* ------------------------------------ */
/* ▼ ページ全体に影響する共通上書き */
/* ------------------------------------ */
@media (min-width: 768px) {
  .cmn_contents_wrap {
    margin-top: 2rem;
    padding-bottom: 4.5rem;
  }

  .cmn_main_read {
    max-width: 680px;
    word-break: normal;
  }

  .cmn_h1_title01_text {
    letter-spacing: .06em;
  }

  .cmn_related_bnr_wrap {
    margin-top: 7rem;
  }
}

@media only screen and (max-width: 767px) {
  .cmn_h1_title01.has_link.is_cancel {
    padding-top: 4rem;
  }
}

/* ------------------------------------ */
/* ▼ page back link */
/* ------------------------------------ */
.page_back_btn_wrap {
  margin-right: auto;
  margin-left: auto;
  max-width: 860px;
  width: calc(100% - 2rem);
}

@media (min-width: 768px) {
  .page_back_btn_wrap {
    margin-top: 3rem;
  }

  .page_back_btn_wrap a.cmn_h1_link_btn {
    font-weight: 600;
    letter-spacing: .05em;
    padding: .7rem 3.8rem .7rem 2.8rem;
  }
}

@media only screen and (max-width: 767px) {
  .page_back_btn_wrap {
    margin-top: 1.5rem;
    padding: 0 1rem;
  }
}

/* ------------------------------------ */
/* ▼ post detail */
/* ------------------------------------ */
.post_detail_wrap {
  margin-right: auto;
  margin-left: auto;
  max-width: 860px;
  width: 100%;
}

.post_detail_row {
  width: 100%;
}

.post_detail_row:nth-of-type(2) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.post_detail_title {
  font-size: 3rem;
  letter-spacing: .06em;
  line-height: 1.2;
  font-weight: 600;
}

@media (min-width: 768px) {
  .post_detail_wrap {
    background-image:
      url(../image/bg-post-detail-spacer01.png),
      url(../image/bg-post-detail-spacer02.png),
      url(../image/bg-post-detail.jpg);
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: left bottom, right bottom, 0 0;
    padding: 2rem 1.8rem 2.5rem 4rem;
  }

  .post_detail_title_wrap {
    padding-top: 1.8rem;
    width: calc(100% - 14em);
  }

  .post_detail_info_wrap {
    width: 14em;
  }

  .post_detail_info_wrap>dl {
    display: flex;
    flex-wrap: wrap;
    letter-spacing: .06em;
    padding-left: .3em;
    width: 100%;
  }

  .post_detail_info_wrap>dl>dt {
    max-width: 3.9em;
    width: auto;
  }

  .post_detail_info_wrap>dl>dd {
    width: 9.8em;
  }
}

@media only screen and (max-width: 767px) {
  .post_detail_wrap {
    background-image:
      url(../image/bg-post-detail-spacer02.png),
      url(../image/bg-post-detail.jpg);
    background-repeat: no-repeat, repeat;
    background-position: right bottom, 0 0;
    margin-top: 1.5rem;
    padding: 1rem;
    width: calc(100% - 2rem);
  }

  .post_detail_row:nth-of-type(2) {
    flex-direction: column-reverse;
    margin-top: 1rem;
  }

  .post_detail_title_wrap {
    margin-top: .7rem;
    width: 100%;
  }

  .post_detail_title {
    font-size: 2.4rem;
  }

  .post_detail_info_wrap {
    width: 100%;
  }

  .post_detail_info_wrap>dl {
    display: flex;
    flex-wrap: wrap;
    letter-spacing: .06em;
    width: 100%;
  }

  .post_detail_info_wrap>dl>dt {
    width: 4em;
  }

  .post_detail_info_wrap>dl>dd {
    width: calc(100% - 4em);
  }
}

/* ------------------------------------ */
/* ▼ post category list */
/* ------------------------------------ */
.post_category_list_wrap {
  display: flex;
  max-width: 100%;
}

.post_category_list {
  background-image: url(/app/themes/wp-templ/image-cmn/title/bg-title-pattern01.png);
  background-repeat: repeat;
  background-size: 160px auto;
  display: flex;
  flex-wrap: wrap;
  padding: .25em 1rem;
  width: auto;
}

.post_category_list.is_illust {
  background-color: #cb2929;
}

.post_category_list.is_photo {
  background-color: #9f7943;
}

.post_category_list_tag {
  display: flex;
}

.post_category_list_tag>ul {
  display: flex;
  flex-wrap: wrap;
  width: auto;
}

.post_category_list_title,
.post_category_list_tag>ul>li {
  color: #fff;
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  padding: .25em;
}

.post_category_list_title>span,
.post_category_list_tag>ul>li>span {
  display: inline-block;
  line-height: 1;
}

.post_category_list_title>span {
  letter-spacing: .03em;
  padding: .5rem .8rem .5rem 0;
}

.post_category_list_tag>ul>li>span {
  background-color: #fff;
  border-radius: 25px;
  letter-spacing: .06em;
  padding: .5rem 1.1rem;
}

.post_category_list.is_illust .post_category_list_tag>ul>li {
  color: #e35979;
}

.post_category_list.is_photo .post_category_list_tag>ul>li {
  color: #9f7943;
}

@media only screen and (max-width: 767px) {
  .post_category_list_title,
  .post_category_list_tag>ul>li {
    padding: .25em;
  }

  .post_category_list_title {
    font-size: 1.6rem;
  }

  .post_category_list_tag>ul>li {
    font-size: 1.4rem;
  }
}

/* ------------------------------------ */
/* ▼ post image */
/* ------------------------------------ */
.post_image_wrap {
  margin-right: auto;
  margin-left: auto;
  max-width: 800px;
  width: 100%;
}

.post_image {
  text-align: center;
}

.post_image img {
  border: solid 1px #b28e5f;
}

@media (min-width: 768px) {
  .post_image_wrap {
    margin-top: 2.6rem;
  }
}

@media only screen and (max-width: 767px) {
  .post_image_wrap {
    margin-top: 1.5rem;
    width: calc(100% - 2rem);
  }
}

/* ------------------------------------ */
/* ▼ post image comment */
/* ------------------------------------ */
.post_image_comment_wrap {
  border: solid 1px #b28e5f;
  margin-right: auto;
  margin-left: auto;
  max-width: 800px;
  width: 100%;
}

.post_image_comment_title {
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.post_image_comment_title>span {
  display: inline-block;
  padding: 0 1.5em;
  position: relative;
}

.post_image_comment_title>span::before,
.post_image_comment_title>span::after {
  background-image: url(../image/ico-flower01.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  content: "";
  display: block;
  height: 19px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
}

.post_image_comment_title>span::before {
  left: 0;
}

.post_image_comment_title>span::after {
  right: 0;
}

@media (min-width: 768px) {
  .post_image_comment_wrap {
    margin-top: 3rem;
    padding: 1.7rem 2.9rem 1.8rem;
  }

  .post_image_comment_title {
    font-size: 2rem;
  }

  .post_image_comment_text {
    letter-spacing: .05em;
    margin-top: 1.3rem;
  }
}

@media only screen and (max-width: 767px) {
  .post_image_comment_wrap {
    margin-top: 1rem;
    padding: 1.5rem 1rem 1rem;
    width: calc(100% - 2rem);
  }

  .post_image_comment_title {
    font-size: 1.6rem;
  }

  .post_image_comment_title>span::before,
  .post_image_comment_title>span::after {
    height: 17px;
    width: 18px;
  }

  .post_image_comment_text {
    margin-top: 1rem;
  }
}

/* ------------------------------------ */
/* ▼ comment area */
/* ------------------------------------ */
.comment_sec {
  margin-right: auto;
  margin-left: auto;
  max-width: 860px;
  width: 100%;
}

.comment_order {
  display: inline-block;
}

@media (min-width: 768px) {
  .comment_sec {
    margin-top: 6rem;
  }

  .comment_order {
    margin-left: 2rem;
  }
}

@media only screen and (max-width: 767px) {
  .comment_sec {
    margin-top: 3rem;
  }

  .comment_order {
    margin-left: .5rem;
  }
}

/* ------------------------------------ */
/* ▼ form post */
/* ------------------------------------ */
.post_new_comments_nickname {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}

.post_new_comments_nickname .cmn_terms_service_checkbox+label::before {
  background-color: #fff;
}

.post_new_comments_nickname .cmn_terms_service_checkbox+label::after {
  top: calc(50% - .5em);
}

.user_comment_confirm_btn_wrap {
  margin: 3rem auto 0;
  max-width: 210px;
}

.user_comment_confirm_btn_wrap .cmn_normal_btn_text {
  letter-spacing: 0;
  padding: 0 3.2rem 0 2.2rem;
}

@media (min-width: 768px) {
  .post_new_comments .cmn_form_table_wrap {
    margin-top: 3rem;
  }

  .post_new_comments_nickname .cmn_text_input_wrap {
    width: calc(100% - 13.9em - 1.7rem);
  }

  .post_new_comments_nickname .cmn_terms_service_checkbox_wrap {
    max-width: none;
    margin: 0 0 0 1rem;
    text-align: left;
    width: 13.9em;
  }

  .post_new_comments_nickname .cmn_terms_service_checkbox+label::after {
    top: calc(50% - .5em);
  }

  .user_comment_confirm_btn_wrap .cmn_normal_btn_inner {
    padding: .6rem .2rem;
  }

  .user_comment_confirm_btn_wrap .cmn_normal_btn_text::after {
    right: 1.4rem;
  }
}

@media only screen and (max-width: 767px) {
  .post_new_comments .cmn_form_table_wrap {
    margin-top: 2rem;
  }

  .post_new_comments_nickname .cmn_text_input_wrap {
    width: 100%;
  }

  .post_new_comments_nickname .cmn_terms_service_checkbox_wrap {
    margin: 1rem 0 0 0;
    max-width: none;
    text-align: left;
    width: 100%;
  }

  .post_new_comments_nickname .cmn_terms_service_checkbox+label::after {
    top: calc(50% - .6em);
  }

  .user_comment_confirm_btn_wrap {
    margin-top: 2rem;
    max-width: 160px;
  }
}

/* ぱんくず追加 2023/12 WEB2TCI-39116
=========================================================== ======================== */
.illust_breadcrumbs{
  margin: 0 auto;
  max-width: 1024px;
}
.breadcrumbs {
  width: 100%;
  font-size: 0;
  margin: 15px auto 36px;
  font-feature-settings: normal;
}
.breadcrumbs li {
  color: #000;
  display: inline-block;
  font-size: 16px;
  letter-spacing: normal;
  vertical-align: top;
  font-weight: 600;
}
.breadcrumbs li a {
  color: #0d53de;
  position: relative;
}
.breadcrumbs li a br{
  display: none;
}
.breadcrumbs li a::after {
  color: #000;
  content: "＞";
  margin: 0 3px;
}
@media (max-width: 767px){
  .breadcrumbs {
    margin-bottom: 15px;
    max-width: 85%;
    overflow-x: scroll;
    white-space: nowrap;
  }
  .breadcrumbs li {
    font-size: 14px;
  }
}