@charset "utf-8";

/** ======================================================== */
/* style_article.css - 記事詳細用 css
/* since 2025.10 - 
/*
/*  - wrapper layout style
/*  - article_header style
/*  - article_main style
/*  - article_footer style
/*    - comment_area
/*  - navigation_area style
/*  - relation_area style
/** ======================================================== */

/** ============================ */
/* 	.wrapper layout style
/** ============================ */

.article_area {
  padding-top: 1em;
}

@media print, screen and (min-width: 740px) { /** PC */
  body {
    background-color: var(--grayBgColor);
  }

  .main {
    margin-block: 0;
    border-top: 2px solid var(--primaryColor);
  }

  .main > :is(.breadcrumbs_area, .article_area, .navigation_area) {
    background-color: var(--bgColor);
    width: min(90%, 1200px);
  }

  .breadcrumbs_area {
    padding-inline: calc((1200px - 1120px) / 2);
  }

  .article_area {
    padding-bottom: 1em;
  }

  .article_area > * {
    margin-inline: auto;
    width: min(85%, 920px);
  }

  .navigation_area {
    margin-top: 0 !important;
    padding-block: 3em 6em;
  }

}


/** ============================ */
/* 	.article_header
/** ============================ */

.article_header {
  margin-bottom: 2em;
}

.article_header .label_area {
  margin-bottom: 1em;
  display: flex;
  align-items: center;
}

.article_header .label_area > *:not(:last-child) {
  margin-right: 1em;
}

.article_header .label_area .label {
  padding: 0.5em 0.75em;
  color: var(--baseColor);
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid var(--baseColor);
  border-radius: 100vmax;
  width: fit-content;
}

.article_header .label_area .tag {
  font-size: 0.75em;
  line-height: 1.2;
}

.article_header .label_area .tag span:not(:last-child) {
  margin-right: 0.5em;
}

.article_header .article_headline {
  margin-bottom: 0.5em;
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.4;
}

.article_header .status .time {
  font-size: 0.85em;
}

@media print, screen and (min-width: 740px) { /** PC */
  .article_header {
    margin-bottom: 3em;
  }

  .article_header .label_area .label {
    font-size: 0.85em;
  }

  .article_header .label_area .tag {
    font-size: 0.85em;
  }

  .article_header .article_headline {
    font-size: 1.75em;
  }
}


/** ============================ */
/* 	.article_main
/*  一部`body:not(.kiso)`でキソのキソでスタイルがあたらないように調整
/** ============================ */

.article_main {
  margin-bottom: 4.5em;
}

.article_main .movie_area {
  margin-inline: auto;
  width: min(100%, 850px);
}
.article_main .movie_area:has(.movie) + .conte_area {
  margin-top: 3.5em;
}
.article_main .conte_area + .movie_area:has(.movie) {
  margin-top: 3.5em;
}
.article_main .movie_area .movie + .movie {
  margin-top: 1.75em;
}

.article_main .conte_area > *:not(:last-child, .article_serif_area) {
  margin-bottom: 1.75em;
}

.article_main :where(ul, ol) {
  margin-left: 1.5em;
}
.article_main ul li {
  list-style: disc;
}
.article_main ol li {
  list-style: decimal;
}

.article_main :where(h2, h3, h4, h5) {
  line-height: 1.4;
}
body:not(.kiso) .article_main :where(h2, h3, h4, h5):not(:first-child) {
  margin-top: 2em;
}

body:not(.kiso) .article_main h2 {
  padding: 1.2em;
  font-size: 1.3em;
  background-color: var(--grayBgColor);
  border-left: 4px solid var(--primaryColor);
}

body:not(.kiso) .article_main h3:not(.column_headline) {
  padding-bottom: 1em;
  font-size: 1.2em;
  border-bottom: 2px solid var(--baseColor);
}

body:not(.kiso) .article_main h4 {
  color: var(--baseColor);
  font-size: 1.2em;
}

body:not(.kiso) .article_main h5 {
  font-size: 1.1em;
}

body:not(.kiso) .article_main figure.image figcaption {
  margin-top: 0.5em;
  font-size: 0.85em;
  display: block;
}


.article_main .article_column_area { /** 投稿_コラム枠 */
  padding: 1.5em;
}
.article_main .article_column_area:not(.headline) {
  background-color: var(--grayBgColor);
}
.article_main .article_column_area.headline {
  border: 1px solid var(--baseColor);
}
.article_main .article_column_area > *:not(:last-child) {
  margin-bottom: 1.75em;
}
.article_main .article_column_area .column_headline {
  font-size: 1.2em;
}

.article_main .article_talk_area { /** 投稿_トーク枠 */
  display: flex;
}
.article_main .article_talk_area .box_img {
  padding-top: 1em;
  text-align: center;
  width: 80px;
  flex-shrink: 0;
}
.article_main .article_talk_area.right .box_img {
  order: 1;
}
.article_main .article_talk_area .box_img img {
  object-fit: cover;
  background-color: var(--grayBgColor);
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.article_main .article_talk_area .box_img figcaption {
  margin-top: 0.5em;
  font-size: 0.9em;
  display: block;
}
.article_main .article_talk_area .txt_area {
  padding: 1.25em;
  background-color: var(--bgColor);
  border: 1px solid var(--baseColor);
  border-radius: 5px;
  width: calc(100% - 1em - 80px);
  position: relative;
  display: flex;
  align-items: center;
}
.article_main .article_talk_area.left .txt_area {
  margin-left: 1em;
}
.article_main .article_talk_area.right .txt_area {
  margin-right: 1em;
}
.article_main .article_talk_area .txt_area::before,
.article_main .article_talk_area .txt_area::after {
  content: '';
  width: 15px;
  height: calc(15px / 2 * tan(60deg));
  position: absolute;
  top: 3em;
  display: inline-block;
}
.article_main .article_talk_area.left .txt_area::before {
  background-color: var(--baseColor);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  left: -15px;
}
.article_main .article_talk_area.left .txt_area::after {
  background-color: var(--bgColor);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  left: -13px;
}
.article_main .article_talk_area.right .txt_area::before {
  background-color: var(--baseColor);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  right: -15px;
}
.article_main .article_talk_area.right .txt_area::after {
  background-color: var(--bgColor);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  right: -13px;
}

.article_main .article_serif_area { /** 投稿_ふきだし枠 */
  margin-bottom: 3em;
  padding: 1.25em;
  background-color: var(--bgColor);
  border: 1px solid var(--baseColor);
  border-radius: 5px;
  position: relative;
}
.article_main .article_serif_area::before,
.article_main .article_serif_area::after {
  content: '';
  width: 15px;
  height: calc(15px / 2 * tan(60deg));
  position: absolute;
  left: 2em;
  display: inline-block;
}
.article_main .article_serif_area::before {
  background-color: var(--baseColor);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  bottom: -14px;
}
.article_main .article_serif_area::after {
  background-color: var(--bgColor);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  bottom: -12px;
}

.article_main .article_accordion_area { /** 投稿_開閉式コンテンツ */
  background-color: var(--grayBgColor);
}
.article_main .article_accordion_area .summary {
  padding: 1.25em 3em 1.25em 1.25em;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.4;
  background-color: var(--bgColor);
  border: 1px solid var(--baseColor);
  position: relative;
  cursor: pointer;
}
.article_main .article_accordion_area .summary:hover {
  opacity: 0.85;
}
.article_main .article_accordion_area .summary::before,
.article_main .article_accordion_area .summary::after {
  content: '';
  margin-block: auto;
  position: absolute;
  inset-block: 0;
  display: inline-block;
}
.article_main .article_accordion_area .summary::before {
  border: 1px solid var(--baseColor);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  right: 1em;
}
.article_main .article_accordion_area .summary::after {
  background: url('../images/icon_arrow_bottom.svg') no-repeat center center;
  background-size: contain;
  width: 17px;
  height: 10px;
  filter: brightness(0) saturate(100%);
  right: calc(1em + ((25px - 17px) / 2));
}
.article_main .article_accordion_area.open .summary::before {
  background-color: var(--baseColor);
}
.article_main .article_accordion_area.open .summary::after {
  background-image: url('../images/icon_arrow_top.svg');
  filter: brightness(0) saturate(100%) invert(99%) sepia(7%) saturate(1%) hue-rotate(70deg) brightness(123%) contrast(99%);
}
.article_main .article_accordion_area .inner_conte {
  display: none;
}
.article_main .article_accordion_area.open .inner_conte {
  margin-top: 0;
  padding: 1.5em;
  display: block;
}
.article_main .article_accordion_area .btn_close {
  margin-top: 1.5em;
}
.article_main .article_accordion_area .btn_close {
  color: #666;
  border: 1px solid #666;
}
.article_main .article_accordion_area .btn_close::after {
  filter: brightness(0) saturate(100%) invert(42%) sepia(8%) saturate(16%) hue-rotate(5deg) brightness(91%) contrast(88%);
}


@media screen and (max-width: 739px) { /** SP */
  body:not(.kiso) .article_main img.mt-image-left,
  body:not(.kiso) .article_main img.mt-image-right {
    margin: 0 !important;
    float: none !important;
  }

  body:not(.kiso) .article_main img.mt-image-center {
    margin: 0 auto !important;
  }
}

@media print, screen and (min-width: 740px) { /** PC */
  .article_main {
    margin-bottom: 5.5em;
  }

  body:not(.kiso) .article_main p img.mt-image-left {
    margin: 0 2em 1.5em 0 !important;
    float: left;
  }
  body:not(.kiso) .article_main p img.mt-image-right {
    margin: 0 0 1.5em 2em !important;
    float: right;
  }
  body:not(.kiso) .article_main p img.mt-image-center {
    margin: 0 auto !important;
  }

  body:not(.kiso) .article_main h2 {
    font-size: 1.35em;
  }

  body:not(.kiso) .article_main h3:not(.column_headline) {
    font-size: 1.25em;
  }

  body:not(.kiso) .article_main h4 {
    font-size: 1.25em;
  }

  body:not(.kiso) .article_main h5 {
    font-size: 1.15em;
  }

  body:not(.kiso) .article_main figure.image:has(img.mt-image-left) {
    margin: 0 2em 1.5em 0;
    width: fit-content;
    float: left;
  }
  body:not(.kiso) .article_main figure.image:has(img.mt-image-right) {
    margin: 0 0 1.5em 2em;
    width: fit-content;
    float: right;
  }
  body:not(.kiso) .article_main figure.image:has(img.mt-image-center) {
    margin: 0 auto;
    width: fit-content;
  }


  .article_main .article_column_area { /** 投稿_コラム枠 */
    padding: 2em;
  }
  .article_main .article_column_area .column_headline {
    font-size: 1.25em;
  }

  /*.article_main .article_talk_area { ** 投稿_トーク枠 } */
  .article_main .article_talk_area .box_img {
    width: 130px;
  }
  .article_main .article_talk_area .box_img img {
    width: 120px;
    height: 120px;
  }
  .article_main .article_talk_area .txt_area {
    padding: 1.75em;
    border-radius: 7.5px;
    width: calc(100% - 1em - 120px);
  }

  .article_main .article_serif_area { /** 投稿_ふきだし枠 */
    padding: 1.75em;
    border-radius: 7.5px;
  }

  /* .article_main .article_accordion_area { ** 投稿_開閉式コンテンツ } */
  .article_main .article_accordion_area .summary {
    font-size: 1.25em;
  }
  .article_main .article_accordion_area .inner_conte {
    padding: 1.75em;
  }
  .article_main .article_accordion_area .btn_close {
    margin-top: 1.75em;
  }
}


/** ============================ */
/* 	.article_footer
/** ============================ */

.stamp_area .stamp_icon .btn_stamp i.stamp::before {
  filter: brightness(0) saturate(100%) invert(40%) sepia(36%) saturate(7498%) hue-rotate(348deg) brightness(101%) contrast(83%);
}

.stamp_area .stamp_icon span {
  color: var(--grayColor);
}

/**
  * .comment_area
  */
.comment_area {
  margin-top: 2.5em;
}

.comment_area .btn_link a::after,
.comment_area .btn_form::after {
  display: none;
}

.comment_area .btn_link i,
.comment_area .btn_form i {
  margin-right: 5px;
  position: relative;
}

.comment_area .btn_link i::before,
.comment_area .btn_form i::before {
  content: '';
  background: url('../images/icon_comment.svg') no-repeat center center;
  background-size: contain;
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(8%) sepia(1%) saturate(3958%) hue-rotate(251deg) brightness(94%) contrast(82%);
  display: inline-block;
}
.comment_area .btn_link a:hover i::before,
.comment_area .btn_form:hover i::before {
  filter: brightness(0) saturate(100%) invert(99%) sepia(7%) saturate(1%) hue-rotate(70deg) brightness(123%) contrast(99%);
}

.comment_area .comment_headline {
  margin-block: 3em 1.5em;
  padding: 1em 1.2em;
  font-size: 1.3em;
  line-height: 1.4;
  background-color: var(--grayBgColor);
  border-left: 4px solid var(--primaryColor);
}

@media print, screen and (min-width: 740px) { /** PC */
  .comment_area .comment_headline {
    margin-top: 4.5em;
    font-size: 1.35em;
  }
}

/** .comment_post_area */
.comment_post_area {
  margin-bottom: 3em;
}

.comment_post_area p {
  font-size: 0.85em;
}
.comment_post_area p em {
  color: var(--attentionColor);
}

.comment_post_area #comment-form-reply {
  display: flex;
  align-items: center;
}
.comment_post_area #comment-form-reply input[type="checkbox"] {
  margin-right: 5px;
  border: 1px solid var(--baseColor); 
  width: 14px;
  height: 14px;
}
.comment_post_area #comment-form-reply input[type="checkbox"]:checked {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
}

.comment_post_area dl {
  margin-block: 1em;
}

.comment_post_area dt {
  margin-bottom: 0.25em;
}
.comment_post_area dd + dt {
  margin-top: 1em;
}

.comment_post_area dd :where(input, textarea) {
  background-color: var(--grayBgColor);
  border: 1px solid var(--grayColor);
  border-radius: 5px;
  width: 100%;
}
.comment_post_area dd textarea {
  height: 6em;
}

.comment_post_area .btn_form {
  margin-top: 1.5em;
}
.comment_area .btn_form i::before {
  filter: brightness(0) saturate(100%) invert(99%) sepia(7%) saturate(1%) hue-rotate(70deg) brightness(123%) contrast(99%);
}
.comment_area .btn_form:hover i::before {
  filter: brightness(0) saturate(100%) invert(8%) sepia(1%) saturate(3958%) hue-rotate(251deg) brightness(94%) contrast(82%);
}

@media print, screen and (min-width: 740px) { /** PC */
  .comment_post_area {
    margin-bottom: 4.5em;
    padding-inline: 2em;
  }
  
  .comment_post_area dd input {
    width: 300px;
  }
  
  .comment_post_area dd textarea {
    height: 8em;
  }
}


/** .comment_view_area */

.comment_view_area > ul {
  border-top: 1px solid var(--grayColor);
}

.comment_view_area > ul > li {
  padding-block: 2em;
  border-bottom: 1px solid var(--grayColor);
  display: flex;
  flex-wrap: wrap;
}

.comment_view_area > ul > li .avatar {
  margin-right: 1em;
  width: 50px;
  flex-shrink: 0;
}
.comment_view_area > ul > li > dl {
  width: calc(100% - 1em - 50px);
}

.comment_view_area dt {
  margin-bottom: 0.5em;
  font-size: 0.9em;
}

.comment_view_area dt time {
  color: var(--grayColor);
}

.comment_view_area dd {
  font-size: 0.9em;
}

.comment_view_area .stamp_area {
  margin-top: 1em;
  width: 100%;
}

.comment_view_area .reply_area {
  margin-top: 1.5em;
  width: 100%;
}

.comment_view_area .reply_area li:not(:last-child) {
  margin-bottom: 1.5em;
}

.comment_view_area .reply_area dl {
  margin-left: 1.5em;
  padding-left: 1em;
  border-left: 2px solid var(--baseColor);
  position: relative;
}
.comment_view_area .reply_area dl::before {
  content: '';
  margin-block: auto;
  background: url('../images/icon_arrow_reply.svg') no-repeat center center;
  background-size: contain;
  width: 12px;
  height: 14px;
  position: absolute;
  inset-block: 0;
  left: -1.5em;
  display: inline-block;
}

.comment_view_area .btn_link {
  margin-top: 1.5em;
}

@media screen and (max-width: 739px) { /** SP */
  .comment_view_area > ul > li > .stamp_area,
  .comment_view_area .reply_area {
    padding-left: calc(1em + 50px);
  }
}

@media print, screen and (min-width: 740px) { /** PC */
  .comment_view_area {
    padding-inline: 2em;
  }

  .comment_view_area > ul > li {
    padding-block: 2.5em;
  }

  .comment_view_area > ul > li .avatar {
    margin-right: 2em;
  }
  .comment_view_area > ul > li > dl {
    width: calc(100% - 2em - 50px);
  }
  .comment_view_area .reply_area {
    padding-left: calc(2em + 50px);
  }

  .comment_view_area .stamp_area {
    justify-content: flex-end;
  }
}


/** ============================ */
/* 	.navigation_area
/** ============================ */

.navigation_area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.navigation_area .btn_link {
  margin-bottom: 1.5em;
}

.navigation_area .btn_link a {
  color: var(--baseColor);
  background-color: var(--bgColor);
  border-color: var(--grayColor);
}
.navigation_area .btn_link a::after {
  filter: brightness(0) saturate(100%) invert(8%) sepia(1%) saturate(3958%) hue-rotate(251deg) brightness(94%) contrast(82%);
}
.navigation_area .btn_link a:hover {
  background-color: var(--grayBgColor);
  border-color: var(--baseColor);
}

.navigation_area .nav_link {
  width: 48%;
}

.navigation_area .nav_link a {
  color: var(--baseColor);
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.navigation_area .nav_link.prev a {
  padding-left: 1em;
}
.navigation_area .nav_link.next a {
  padding-right: 1em;
}
.navigation_area .nav_link.prev a::before,
.navigation_area .nav_link.next a::after {
  content: '';
  margin-block: auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 10px;
  height: 17px;
  filter: brightness(0) saturate(100%) invert(8%) sepia(1%) saturate(3958%) hue-rotate(251deg) brightness(94%) contrast(82%);
  position: absolute;
  inset-block: 0;
  display: inline-block;
}
.navigation_area .nav_link.prev a::before {
  background-image: url('../images/icon_arrow_left.svg');
  left: 0;
}
.navigation_area .nav_link.next a::after {
  background-image: url('../images/icon_arrow_right.svg');
  right: 0;
}
.navigation_area .nav_link a:hover {
  color: var(--grayColor);
}
.navigation_area .nav_link.prev a:hover::before,
.navigation_area .nav_link.next a:hover::after {
  filter: brightness(0) saturate(100%) invert(86%) sepia(7%) saturate(0%) hue-rotate(148deg) brightness(97%) contrast(85%);
}

.navigation_area .nav_link a em {
  font-size: 1.1em;
  display: block;
}


@media print, screen and (min-width: 740px) { /** PC */
  .navigation_area {
    padding-inline: calc((100% - 1000px) / 2);
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
  }

  .navigation_area .btn_link {
    margin: 0 3em;
    width: 360px;
    flex-shrink: 0;
    order: 1;
  }
  .navigation_area .nav_link.prev {
    order: 0;
  }
  .navigation_area .nav_link.next {
    order: 2;
  }

  .navigation_area .nav_link {
    width: calc((100% - 360px) / 2);
  }
}


/** ============================ */
/* 	.relation_area
/** ============================ */

@media print, screen and (min-width: 740px) { /** PC */
  .relation_area {
    padding-block: 3.5em 4.5em;
    position: relative;
  }
  .relation_area::before {
    content: '';
    background-color: var(--bgColor);
    border-top: 2px solid var(--primaryColor);
    width: 150vw;
    height: 100%;
    position: absolute;
    inset: 0 -25vw;
    display: inline-block;
    z-index: -1;
  }

  .relation_headline {
    margin-bottom: 1em;
    font-size: 1.5em;
    text-align: center;
  }

  .list_articles.list_clm li {
    border-bottom: none;
  }

  .list_articles.list_clm li:last-child a::after {
    display: none;
  }
}