/* CH-856 「対応できること」からリンクしている記事（投稿の種類 news）の見た目。
   読むのは news の 1 本ずつのページだけ（inc/fsc-news.php の fsc_news_enqueue）。
   本文の中（.entry-content）と記事の上のアイキャッチだけに効かせる。色はサイトの紺と緑（assets/css/fsc-chrome.css の --fsh-*）にそろえる。 */

.single-news {
  --fsn-ink: #14202B;
  --fsn-text: #3A4754;
  --fsn-mute: #5A6672;
  --fsn-line: #DDE1DC;
  --fsn-bg: #F3F4F1;
  --fsn-green: #0B6E5A;
  --fsn-green-dark: #08503F;
  --fsn-green-thin: #E6F1EE;
}

/* 記事の上のアイキャッチ：幅いっぱい・縦横の比は画像のまま */
.single-news .eye-catch-wrap .eye-catch img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.single-news .entry-content {
  color: var(--fsn-text);
  overflow-wrap: anywhere;
}

.single-news .entry-content img {
  max-width: 100%;
  height: auto;
}

/* 見出し（h2 だけを使う・Cocoon の目次が拾う） */
.single-news .article .entry-content h2 {
  font-size: 21px;
  line-height: 1.4;
  color: var(--fsn-ink);
  background: none;
  border-radius: 0;
  border-left: 5px solid var(--fsn-green);
  padding: 4px 0 4px 14px;
  margin: 2.2em 0 1em;
}

.single-news .entry-content strong {
  color: var(--fsn-ink);
  background: linear-gradient(transparent 62%, var(--fsn-green-thin) 62%);
}

.single-news .entry-content > ul,
.single-news .entry-content > ol {
  padding-left: 1.4em;
}

.single-news .entry-content > :is(ul, ol) > li + li {
  margin-top: .35em;
}

/* 進め方（番号つき） */
.single-news .entry-content > ol {
  list-style: none;
  counter-reset: fsn-step;
  padding-left: 0;
}

.single-news .entry-content > ol > li {
  counter-increment: fsn-step;
  position: relative;
  padding: .2em 0 .2em 2.4em;
}

.single-news .entry-content > ol > li::before {
  content: counter(fsn-step);
  position: absolute;
  left: 0;
  top: .15em;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--fsn-green);
  color: #fff;
  font-size: .85em;
  font-weight: 700;
  line-height: 1.7em;
  text-align: center;
}

/* 要点の札 */
.single-news .fsc-news-summary {
  background: #fff;
  border: 1px solid var(--fsn-line);
  border-top: 4px solid var(--fsn-green);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 0 0 2em;
}

.single-news .entry-content .fsc-news-summary p {
  margin: 0;
}

.single-news .fsc-news-summary__group a {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--fsn-green);
  text-decoration: none;
  letter-spacing: .04em;
}

.single-news .entry-content .fsc-news-summary__lead {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--fsn-ink);
}

.single-news .fsc-news-summary__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 0;
}

.single-news .fsc-news-summary__facts > div {
  background: var(--fsn-bg);
  border-radius: 8px;
  padding: 10px 12px;
}

.single-news .fsc-news-summary__facts dt {
  font-size: 12px;
  font-weight: 400;
  color: var(--fsn-mute);
  margin: 0;
}

.single-news .fsc-news-summary__facts dd {
  font-size: 17px;
  font-weight: 700;
  color: var(--fsn-ink);
  margin: 2px 0 0;
}

.single-news .entry-content .fsc-news-summary__note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--fsn-mute);
  line-height: 1.6;
}

.single-news .entry-content .fsc-news-summary__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.single-news .fsc-news-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.single-news .fsc-news-btn--main {
  background: var(--fsn-green);
  color: #fff;
}

.single-news .fsc-news-btn--main:hover {
  background: var(--fsn-green-dark);
  color: #fff;
}

.single-news .fsc-news-btn--sub {
  border: 1px solid var(--fsn-ink);
  color: var(--fsn-ink);
  background: #fff;
}

/* よくある質問（畳む形） */
.single-news .fsc-news-faq {
  border: 1px solid var(--fsn-line);
  border-radius: 8px;
  margin: 0 0 10px;
  background: #fff;
}

.single-news .fsc-news-faq summary {
  cursor: pointer;
  padding: 12px 40px 12px 14px;
  font-weight: 700;
  color: var(--fsn-ink);
  position: relative;
  list-style: none;
}

.single-news .fsc-news-faq summary::-webkit-details-marker {
  display: none;
}

.single-news .fsc-news-faq summary::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--fsn-green);
}

.single-news .fsc-news-faq[open] summary::after {
  content: "−";
}

.single-news .fsc-news-faq__body {
  padding: 0 14px 12px;
}

.single-news .entry-content .fsc-news-faq__body p {
  margin: 0;
}

/* 同じまとまりのほかの対応 */
.single-news .fsc-news-related {
  background: var(--fsn-bg);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 2.4em 0 0;
}

.single-news .entry-content .fsc-news-related p {
  margin: 0;
}

.single-news .fsc-news-related__title {
  font-weight: 700;
  color: var(--fsn-ink);
}

.single-news .entry-content .fsc-news-related ul {
  margin: 8px 0 0;
}

.single-news .fsc-news-related a {
  color: var(--fsn-green);
}

.single-news .entry-content .fsc-news-related__more {
  margin-top: 10px;
  font-weight: 700;
}

@media screen and (max-width: 600px) {
  .single-news .entry-content .alignleft,
  .single-news .entry-content .alignright {
    float: none;
    display: block;
    margin: 0 auto 1em;
  }

  .single-news .fsc-news-summary__facts {
    grid-template-columns: 1fr;
  }

  .single-news .fsc-news-btn {
    width: 100%;
  }
}