/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 08 2026 | 14:46:52 */
/* ============================================================
   ③ 本文用 — 記事・レス本文まわり
   affinger5-card2-child/style.css
   ※ :root はすべて ①var変数宣言 へ移動済み(このファイルには持たない)
   ※ AAフォント(@font-face aafont)は元ファイルから末尾にコピーすること
   ============================================================ */

#xpost,
#xpost + p {
    display: none;
}

/* ============================================
   画像
   ============================================ */
div.entry-content img {
  max-width: 100% !important;
}

div.entry-content {
  /*border: 1px solid var(--boader-color) !important;*/
}

@media only screen and (min-width: 600px) {
  .entry-content img {
    max-width: 50% !important;
  }
  .entry-content img.image.pict {
    width: 50%;
  }
}

.entry-content .amp-img.image.pict {
  width: 250px;
}


/* ============================================
   目次（TOC）案A：緑ヘッダー付きカード
   ============================================ */
.article-toc {
  margin: 16px 0;
  border: 1px solid var(--boader-color-green);
  overflow: hidden;
  background: #fff;
}

/* ヘッダー「目次」緑バー */
.article-toc .toc-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 12px;
  background: var(--title-stripe), var(--title-header-green-main);
  color: #fff;
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-shadow: var(--text-shadow-edge);
}

.article-toc .toc-title::before {
  content: "\f0ca";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.2rem;
}

/* リスト本体：番号を消してアイコン+テキスト行に */
.article-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.article-toc ol li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #eee;
}

.article-toc ol li:last-child {
  border-bottom: none;
}

.article-toc ol li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: #1565c0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  text-decoration: none;
}

.article-toc ol li a::before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--title-header-green-sub);
  font-size: 1.3rem;
  flex-shrink: 0;
}

.article-toc ol li a:hover {
  background: var(--hover-bg-color);
}

/* ============================================
   前後記事ナビ
   ============================================ */
.prev-next-link {
  display: flex;
  margin: 10px 0;
  border: 2px solid var(--boader-color) !important;
  background-color: #e5e5e5;
  box-shadow: var(--box-shadow-soft);
}

.prev-next-link a {
  display: block;
  width: 50%;
  padding: 10px !important;
  color: #1565c0 !important;
  font-weight: 700;
}

.prev-next-link a:hover {
  background-color: var(--color-hover-bg);
  color: #1a237e;
}

.prev-next-label {
  margin-bottom: 10px;
  color: #fff;
  font-size: var(--font-size-lg) !important;
}

p#prev { color: #1565c0; }
p#next { color: #c62828; text-align: right; }

.prev-link { background: #FEFEFE; }
.next-link { background: #FEFEFE; border-left: 1px solid #ccc; }

.prev-link,
.next-link { background-size: 16px 28px; }

@media (min-width: 600px) {
  .prev-next-link a { flex: 1; border: none !important; }
  .next-link { text-align: right; }
}

/* ============================================
   サムネイルラップ
   ============================================ */
.thumb-wrap {
  display: flex;
}

.thumb-wrap p {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  padding: 0 4px;
  font-size: var(--font-size-lg);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thumb-wrap img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

/* ============================================
   記事ヘッダー(アイキャッチ背景)
   ※ .entry-top の定義はここ1箇所に集約（重複排除）
   ※ 元の「重ね合わせ構造」を維持したまま高さ可変＋視認性強化
   ============================================ */

/* 親：高さ固定をやめ、最小130px・内容に応じて伸びる */
.entry-top {
  position: relative;
  height: auto;
  min-height: 130px;
}

/* 背景画像レイヤーを全面に敷く */
.entry-top > .entry-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.entry-top > .entry-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px);
}

/* オーバーレイ：下半分を濃くするグラデーションで文字視認性UP */
.entry-top > .entry-image::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .20) 0%,
    rgba(0, 0, 0, .55) 55%,
    rgba(0, 0, 0, .80) 100%
  );
}

/* タイトル＋カテゴリを前面に重ねる */
.entry-top > header {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 8px 0;
}

/* カテゴリバッジを画像上に置いたときの視認性 */
.entry-top > header > .st-catgroup {
  position: relative;
  z-index: 2;
  margin: 0 0 4px;
  padding: 0 8px;
}

/* タイトル：3行クランプ・下寄せ・濃い影で視認性確保 */
.entry-top > header > .entry-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: none;
  color: #fff;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.7);
}

@media (max-width: 25.875em) {
  .entry-top > header > .entry-title {
    font-size: 1.8rem !important;
  }
}

/* タイトル見出しの基本スタイル（元の inline-block を維持） */
h1.entry-title,
h2.entry-title {
  position: relative;
  display: inline-block;
  padding: 0.5em;
  color: #fff !important;
  font-family: 'Noto Sans JP';
  line-height: 1.5;
  text-shadow: var(--text-shadow-edge);
}

/* ============================================
   レスリスト構造
   ============================================ */
.res_heading { display: none; }
figure#res_list { margin: 0 !important; }

.res_item {
  padding-bottom: 4px;
}

.res_footer {
  margin-bottom: 12px;
}

/* ============================================
   レスヘッダー(名前・日付・ID行)
   ============================================ */
.t_h,
.res_header {
  border-left: 5px solid #7db4e6;
}

div.entry-content div.t_h,
div.entry-content div.t_h span,
div.entry-content div.res_header,
div.entry-content div.res_header span,
div.entry-content div[style^="margin-bottom: 40px"],
div.entry-content div[style^="margin-bottom"] > strong:nth-of-type(2),
p > b:nth-of-type(2),
div.entry-content div[style^="margin-bottom"] > div:not([class]) > strong:nth-of-type(2),
div.entry-content > div:not([class]) label:first-child,
div.entry-content > div:not([class]) > div:not([class]) label:first-child,
div.entry-content > div:not([class]) > p label:first-child,
div.entry-content > div:not([class]) > p > div:not([class]) label:first-child {
  width: 90%;
  margin: 20px 0 0 0;
  color: #999;
  font-size: var(--font-size-xs);
}

span.th_name,
span.res_name {
  color: var(--color-name) !important;
  font-weight: 600;
}

span.res_date {
  color: var(--color-date) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 400 !important;
}

/* ============================================
   レス番号
   ============================================ */
.res_no {
  padding: 0 6px 0 8px;
  color: var(--color-res-no);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: center;
}

/* ============================================
   アンカー(>>番号)
   ============================================ */
.anchor {
  color: var(--color-anchor) !important;
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================
   引用(blockquote)
   ============================================ */
.post blockquote {
  margin: 16px 0 !important;
  padding: 36px 12px 12px !important;
  border-left: 4px solid #90a4ae;
  background-color: var(--color-blockquote);
  color: #111 !important;
  font-size: var(--font-size-sm) !important;
}

.post blockquote p {
  margin: 8px 0 !important;
  font-family: 'Noto Sans JP';
  font-size: var(--font-size-sm) !important;
  line-height: 1.75;
}

/* ============================================
   レス本文(t_b / res_content)
   ============================================ */
div.entry-content div.t_b,
div.res_content {
  margin: 0 !important;
  padding: 12px 12px 12px 14px !important;
  border: 2px dashed rgba(0, 0, 0, 0);
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.2s ease;
}

div.entry-content div.t_b,
div.entry-content div.t_b p,
div.res_content,
div.res_content p,
div.entry-content > div:not([class]) div[style*="color"],
div.entry-content > div:not([class]) div[style*="margin-top: 20px"] {
  font-family: 'Noto Sans JP';
  color: var(--color-text);
  line-height: var(--line-height-lg);
  letter-spacing: var(--letter-spacing);
}

div.entry-content div.t_b:hover,
div.entry-content div.res_content:hover {
  background-color: var(--color-hover-bg);
}

/* ============================================
   強調レス(res_emphasis = 採用レスから2回以上アンカーされた人気レス)
   ============================================ */
article.res_item.res_emphasis .res_content {
  border-left: 4px solid #e53935;
  background-color: #fff8f8;
  font-weight: 700;
}

article.res_item.res_emphasis .res_header {
  border-left: 5px solid #e53935;
}

.entry-content p {
  padding: 6px 8px;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
  font-family: 'Noto Sans JP';
}

/* ============================================
   強調レス(t_e / res_emphasis)
   ============================================ */
div.entry-content div.t_e > .t_b.t_i,
div.entry-content div.res_emphasis > .res_content.t_i {
  margin: 8px !important;
  padding: 16px 12px !important;
  border-left: 8px solid #b01eb2;
  background-color: #f6eef6;
  font-family: 'Noto Serif JP';
  font-weight: 700;
}

div.entry-content div.t_e div.t_b,
div.entry-content div.res_emphasis div.res_content {
  color: #dd4b39;
}

div.entry-content .t_b.t_i,
div.entry-content .res_content.t_i {
  margin: 8px !important;
}

/* ============================================
   5・7の倍数レス カラー強調
   ============================================ */
div.entry-content .t_b:nth-of-type(5n-1),
div.entry-content .t_b:nth-of-type(5n-1) p,
div.entry-content .res_content:nth-of-type(5n-1),
div.entry-content .res_content:nth-of-type(5n-1) p,
div.entry-content .t_b:nth-child(5n-1),
div.entry-content .t_b:nth-child(5n-1) p,
div.entry-content .res_content:nth-child(5n-1),
div.entry-content .res_content:nth-child(5n-1) p,
figure:nth-of-type(5n-1) .t_b,
figure:nth-of-type(5n-1) .res_content {
  color: var(--color-emphasis) !important;
  font-weight: 700;
}

figure:nth-of-type(7n-1) .t_b,
figure:nth-of-type(7n-1) .res_content {
  color: var(--color-accent) !important;
  font-weight: 700;
}

/* ============================================
   横スクロール(AA用)
   ============================================ */
.np {
  height: auto;
  font-family: "aafont" !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  overflow-x: scroll;
}

.np::before {
  content: '※ 横にスクロールできます';
  display: flex;
  margin-bottom: 10px;
  background-color: #ffffff !important;
  color: var(--color-accent) !important;
}

/* ============================================
   コメント数バッジ
   ============================================ */
.comments-count {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin: 10px 5px;
  padding: 6px;
  border: 0 solid #87D37C;
  background: var(--base-color-red);
  box-shadow: var(--box-shadow-soft);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: center;
  text-shadow: var(--text-shadow-soft);
  vertical-align: middle;
}

.comments-count::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 5%;
  border: 15px solid transparent;
  z-index: 0;
}

.comments-count#single::before {
  top: 25px;
  border-top: 15px solid var(--base-color-red);
  z-index: 0;
}

.fa-comments-o::before {
  content: "\f075";
  color: #fff;
}

.comments-count a {
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 700;
}

/* ============================================
   コメント0件バッジ — 緑に変更
   ============================================ */
.comments-count.comments-count--zero {
  background: var(--boader-color-green) !important;
  box-shadow: none;
}

.comments-count.comments-count--zero::before {
  border-top-color: var(--boader-color-green) !important;
}

.comments-count.comments-count--zero a {
  color: #fff;
}


/* ============================================
   ツールチップ
   ============================================ */
.tooltip {
  position: absolute;
  z-index: 9999;
  display: none;
  max-width: 360px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  white-space: normal;
}


/* ============================================================
   スマホ(max-width: 499px)
   ============================================================ */
@media only screen and (max-width: 499px) {
  div.entry-content div.t_b,
  div.entry-content div.t_b p,
  div.entry-content div.res_content,
  div.entry-content div.res_content p {
    padding: 10px 8px 10px 10px !important;
    font-size: var(--font-size-lg);
  }

  div.entry-content div.t_h,
  div.entry-content div.t_h span,
  div.entry-content div.res_header,
  div.entry-content div.res_header span,
  div.entry-content div[style^="margin-bottom: 40px"],
  div.entry-content div[style^="margin-bottom"] > strong:nth-of-type(2),
  p > b:nth-of-type(2),
  div.entry-content div[style^="margin-bottom"] > div:not([class]) > strong:nth-of-type(2),
  div.entry-content > div:not([class]) label:first-child,
  div.entry-content > div:not([class]) > div:not([class]) label:first-child,
  div.entry-content > div:not([class]) > p label:first-child,
  div.entry-content > div:not([class]) > p > div:not([class]) label:first-child {
    height: auto;
    margin: 5px 0px;
    font-size: var(--font-size-sm) !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  div.entry-content div.t_h,
  div.entry-content div.t_h span,
  div.entry-content div.res_header,
  div.entry-content div.res_header span {
    padding: 2px 4px;
    background: var(--color-header-bg);
    white-space: nowrap;
    width: 96%;
  }
}

p.source-link {
    border-top-style: ridge;
}

/* ============================================
   投稿日エリア コンパクト化
   ============================================ */
.blogbox {
  padding: 2px 8px !important;
  margin: 0 !important;
}

.blogbox p {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
}

.kdate {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
  font-size: 1.1rem !important;
  color: #555 !important;
}

.kdate-item {
  white-space: nowrap !important;
}

.blogbox .fas {
  font-size: 1.1rem !important;
  color: #aaa !important;
  flex-shrink: 0 !important;
}

/* ============================================
   パンくず スマホ非表示
   ============================================ */
@media (max-width: 599px) {
  #breadcrumb {
    display: none !important;
  }
}

/* ============================================
   wpDiscuz コメントエリア — サイトカラー調整
   （#wpdcom スコープ＝コメント欄限定）
   ============================================ */

/* コメント1件ずつをカード風に区切る */
#wpdcom .wpd-comment .wpd-comment-right {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-left: 3px solid var(--boader-color-green);
  border-radius: 4px;
  background: #fff;
}

/* コメント間の余白 */
#wpdcom .wpd-comment {
  margin-bottom: 10px;
}

/* 投稿者名：サイトカラーの緑で統一 */
#wpdcom .wpd-comment-author,
#wpdcom .wpd-comment-author a {
  color: var(--title-header-green-sub) !important;
  font-weight: 700;
}

/* 日付：控えめなグレー */
#wpdcom .wpd-comment-date {
  color: #999;
  font-size: var(--font-size-xs);
}

/* コメント本文：読みやすく */
#wpdcom .wpd-comment-text {
  margin-top: 4px;
  color: var(--color-text);
  line-height: 1.7;
}

#wpdcom .wpd-comment-text p {
  padding: 0;
  font-size: var(--font-size-sm);
}

/* 「コメントを書く」入力欄 */
#wpdcom .wpd-field-comment .wpd-textarea-wrap textarea {
  border: 1px solid var(--boader-color-green);
  border-radius: 4px;
}

/* 書き込むボタン：サイトカラーの緑 */
#wpdcom .wpd-prim-button {
  background: var(--main-bg-color) !important;
  border-radius: 4px;
  font-weight: 700;
}

/* コメント件数の見出し */
#wpdcom .wpd-thread-info {
  border-bottom: 2px solid var(--boader-color-green);
  color: var(--title-header-green-sub);
  font-weight: 700;
}

/* フィルター/ソートボタンのアクティブ色 */
#wpdcom .wpdiscuz-sort-button-active {
  color: var(--title-header-green-sub);
  font-weight: 700;
}

/* ============================================
   AAフォント定義
   ※ 元 style.css の @font-face { font-family: "aafont"; ... }
     をここにそのままコピー（このコメント以下に貼り付け）
   ============================================ */