/* =========================================================
   sema-theme single.css（通常投稿の個別記事ページ）
   コンセプト＝「静かな読みものの余白」。本文を主役に、長文でも疲れにくい読み物として組む。
   コラム一覧（静かな編集室）／カテゴリーアーカイブ（ひとつのテーマをたどる余白）とは別シルエット。
   すべてをカードで囲わない／本文全体を一枚のカードで囲わない／黒背景にしない。
   共通変数・コンテナ・書体は base.css を継承（is_singular('post') でのみ読み込む）。
   全クラス sema-single- プレフィックス。
   ========================================================= */

.sema-single{ padding-block:clamp(40px,6vw,72px) clamp(64px,9vw,120px); }

/* 記事の縦軸（読み幅）。ヘッダー・本文・末尾導線を同じ中心線に置く。 */
.sema-single .sema-article{ margin:0 auto; }

/* =========================================================
   記事ヘッダー：タイトルを主役（明朝 h1）に。カテゴリー・日付は控えめ（小ゴシック）。
   ========================================================= */
.sema-single-header{ max-width:42rem; margin:0 auto; }
.sema-single-header__inner{ padding-block:0 clamp(8px,1.4vw,14px); }

.sema-single-meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5em 1.1em;
  font-family:var(--sema-sans); margin:0 0 clamp(16px,2.4vw,26px);
}
.sema-single-cat{
  font-size:.82rem; letter-spacing:.1em; color:var(--sema-sage-deep);
  text-decoration:none; position:relative; padding-left:.95em;
}
.sema-single-cat::before{
  content:""; position:absolute; left:0; top:50%; width:6px; height:1px;
  transform:translateY(-50%); background:var(--sema-bronze);
}
.sema-single-cat:hover{ color:var(--sema-bronze); text-decoration:underline; text-underline-offset:3px; }
.sema-single-date{ font-size:.78rem; letter-spacing:.08em; color:var(--sema-ink-mute); }
.sema-single-updated{ font-size:.76rem; letter-spacing:.06em; color:var(--sema-ink-mute); display:inline-flex; align-items:baseline; gap:.4em; }
.sema-single-updated__label{ color:var(--sema-bronze); }

.sema-single-title{
  font-family:var(--sema-serif); font-weight:700;
  font-size:clamp(1.66rem, 3.6vw, 2.5rem); line-height:1.5; letter-spacing:.06em;
  color:var(--sema-ink); margin:0; text-wrap:balance; overflow-wrap:break-word;
}

/* アイキャッチ：登録時のみ。大きすぎるヒーローにしない・本文幅よりわずかに広い程度に留める。 */
.sema-single-thumb{
  max-width:48rem; margin:clamp(28px,4vw,48px) auto 0; padding:0;
  aspect-ratio:4 / 3; overflow:hidden; background:var(--sema-greige); border:1px solid var(--sema-line);
}
.sema-single-thumb__img{ width:100%; height:100%; object-fit:cover; display:block; }

/* =========================================================
   本文：十分な行間・読み幅。一枚のカードで囲わない（背景・枠・影は付けない）。
   ========================================================= */
.sema-single-content{
  --sema-read-ink:#2c2920; /* 本文＝深い墨色（真っ黒でない・生成り背景に馴染む・視認性を上げる） */
  max-width:38rem; margin:clamp(30px,4.5vw,52px) auto 0;
  font-size:1rem; line-height:2.05; letter-spacing:.04em; color:var(--sema-read-ink);
  /* ★2026-08-24 変更。word-break:break-word は「どこででも折る」指定で、日本語だと
     語の途中で切れる。折り返しは body（.sema-theme）の auto-phrase を継承させ、
     ここは長いURL等がはみ出す場合の安全網だけにする。リンクの指定は下の a 側で継続。 */
  overflow-wrap:break-word;
}
.sema-single-content > :first-child{ margin-top:0; }
.sema-single-content p{ margin:0 0 1.9em; }

/* 導入文（最初の段落）：本文HTMLへ class を足さず、CSSのみで記事の入り口として少し特別に見せる。
   派手なボックスにはせず、細いブロンズの縦線＋わずかに大きめ・濃いめの文字で「読み始めの要約」に。 */
.sema-single-content > p:first-child{
  font-size:1.08rem; line-height:2.1; color:var(--sema-ink);
  margin-bottom:2.3em; padding:.1em 0 .1em 1.1em;
  border-left:2px solid var(--sema-bronze-soft);
}

/* 見出し：明朝。h2＝深緑の控えめな下罫／h3＝短いブロンズの左罫／h4＝色面で囲わない小強調。 */
.sema-single-content h2{
  font-family:var(--sema-serif); font-weight:700;
  font-size:clamp(1.42rem, 3vw, 1.82rem); line-height:1.5; letter-spacing:.045em; color:var(--sema-ink);
  margin:3.2em 0 1.1em; padding:.1em 0 .5em .7em;
  border-left:4px solid var(--sema-sage);        /* 深緑の左アクセント＝セクションの起点 */
  border-bottom:1px solid var(--sema-sage-weak);  /* 控えめな下罫（カード化しない） */
}
.sema-single-content h3{
  font-family:var(--sema-serif); font-weight:700;
  font-size:clamp(1.16rem, 2.1vw, 1.34rem); line-height:1.55; letter-spacing:.04em; color:var(--sema-ink);
  margin:2.5em 0 .85em; padding-left:.9em; position:relative;
}
.sema-single-content h3::before{
  content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px; background:var(--sema-bronze); border-radius:1px;
}
.sema-single-content h4{
  font-family:var(--sema-serif); font-weight:600;
  font-size:1.04rem; line-height:1.65; letter-spacing:.03em; color:var(--sema-ink-soft);
  margin:1.8em 0 .6em;
}
/* 見出しが連続した場合に不自然な余白を作らない */
.sema-single-content h2 + h3,
.sema-single-content h3 + h4{ margin-top:1em; }

/* リンク：色だけに依存せず下線を付ける。長いURLでも横スクロールを出さない。 */
.sema-single-content a{
  color:var(--sema-sage-deep); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1.5px; text-decoration-color:var(--sema-bronze-soft); /* 本文から浮かせず・見つけやすく */
  /* ★2026-08-24 変更。word-break:break-word を外した。リンク文字は日本語の語句なので、
     これが残っていると「どこまでできるのかをまとめた記事」のような文言が途中で切れる。
     長いURLがはみ出さないための安全網は overflow-wrap:anywhere だけで足りる。 */
  overflow-wrap:anywhere;
}
.sema-single-content a:hover{ color:var(--sema-bronze); text-decoration-color:var(--sema-bronze); }

/* 強調：太字を過剰に強くしない */
.sema-single-content strong,
.sema-single-content b{ font-weight:700; color:var(--sema-ink); }
.sema-single-content em,
.sema-single-content i{ font-style:italic; }

/* リスト：インデントは浅め・マーカーはブロンズ */
.sema-single-content ul,
.sema-single-content ol{ margin:0 0 1.7em; padding-left:1.35em; }
.sema-single-content li{ margin-bottom:.6em; }
.sema-single-content li::marker{ color:var(--sema-bronze); }
.sema-single-content li > ul,
.sema-single-content li > ol{ margin:.6em 0 .2em; }

/* 引用：大きな吹き出しにしない。左の細い罫線のみで静かに。 */
.sema-single-content blockquote{
  margin:1.9em 0; padding:.2em 0 .2em 1.3em; border-left:2px solid var(--sema-sage-weak);
  color:var(--sema-ink-soft); font-style:normal;
}
.sema-single-content blockquote p:last-child{ margin-bottom:0; }
.sema-single-content blockquote cite{ display:block; margin-top:.6em; font-family:var(--sema-sans); font-size:.82rem; font-style:normal; color:var(--sema-ink-mute); }

/* 画像・図：本文幅を超えない。キャプションは小ゴシックで控えめ。 */
.sema-single-content img{ max-width:100%; height:auto; display:block; }
.sema-single-content figure{ margin:1.9em 0; }
.sema-single-content figure img{ margin-inline:auto; }
.sema-single-content figcaption,
.sema-single-content .wp-element-caption,
.sema-single-content .wp-caption-text{
  font-family:var(--sema-sans); font-size:.8rem; line-height:1.7; letter-spacing:.03em;
  color:var(--sema-ink-mute); margin-top:.7em; text-align:center;
}
.sema-single-content .wp-caption{ max-width:100%; height:auto; }

/* 区切り */
.sema-single-content hr{ border:0; border-top:1px solid var(--sema-line); margin:2.6em 0; }

/* 表：スマホで画面外へはみ出す場合は、その要素内スクロールに閉じ込める（ページ全体は横スクロールしない）。 */
.sema-single-content figure.wp-block-table{ margin:1.9em 0; overflow-x:auto; }
.sema-single-content table{
  display:block; width:max-content; max-width:100%; overflow-x:auto;
  border-collapse:collapse; font-family:var(--sema-sans); font-size:.9rem; line-height:1.7;
}
.sema-single-content th,
.sema-single-content td{
  border:1px solid var(--sema-line-2); padding:.6em .9em; text-align:left; vertical-align:top;
}
.sema-single-content th{ background:var(--sema-paper); font-weight:600; color:var(--sema-ink); }

/* コード（本文に混じった場合の最低限） */
.sema-single-content code,
.sema-single-content kbd{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9em;
  background:var(--sema-paper); padding:.1em .4em; border-radius:2px;
}
.sema-single-content pre{
  margin:1.7em 0; padding:1em 1.1em; background:var(--sema-paper); border:1px solid var(--sema-line);
  border-radius:2px; overflow-x:auto;
}
.sema-single-content pre code{ background:none; padding:0; }

/* 埋め込み（iframe 等）：本文幅を超えない */
.sema-single-content iframe,
.sema-single-content embed,
.sema-single-content object,
.sema-single-content video{ max-width:100%; }
.sema-single-content .wp-block-embed{ margin:1.9em 0; }
.sema-single-content .wp-block-embed iframe{ width:100%; }

/* ブロックエディター由来の配置クラス（本文幅内で破綻させない） */
.sema-single-content .aligncenter{ margin-inline:auto; }
.sema-single-content figure.aligncenter{ display:table; }
.sema-single-content .alignleft{ float:left; margin:.4em 1.4em 1.1em 0; max-width:50%; }
.sema-single-content .alignright{ float:right; margin:.4em 0 1.1em 1.4em; max-width:50%; }
.sema-single-content .alignwide,
.sema-single-content .alignfull{ max-width:100%; }
.sema-single-content::after{ content:""; display:block; clear:both; }

/* 複数ページ投稿のページ送り（通常記事では出ない） */
.sema-single-pagelinks{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5em; margin-top:2.4em; padding-top:1.4em;
  border-top:1px solid var(--sema-line); font-family:var(--sema-sans); font-size:.86rem; color:var(--sema-ink-mute);
}
.sema-single-pagelinks__label{ letter-spacing:.1em; }
.sema-single-pagelinks a,
.sema-single-pagelinks .sema-single-pagelinks__num{
  display:inline-flex; align-items:center; justify-content:center; min-width:2.1em; padding:.35em .6em;
  border:1px solid var(--sema-line-2); border-radius:2px; text-decoration:none; color:var(--sema-sage-deep);
}
.sema-single-pagelinks a:hover{ border-color:var(--sema-sage); background:var(--sema-paper); }

/* =========================================================
   記事末尾の導線：静かに。大きなCTAカード・急かす表現は使わない。
   ========================================================= */
.sema-single-footer{ max-width:38rem; margin:clamp(48px,7vw,84px) auto 0; padding-top:clamp(26px,3.6vw,38px); border-top:1px solid var(--sema-line); }
.sema-single-back__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1em; }
.sema-single-back__item{ margin:0; }
.sema-single-back__link{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sema-sans); font-size:.94rem; letter-spacing:.05em;
  color:var(--sema-sage-deep); text-decoration:none;
}
.sema-single-back__arrow::after{ content:"\2192"; color:var(--sema-bronze); transition:margin .25s var(--sema-ease); }
.sema-single-back__link:hover{ color:var(--sema-bronze); text-decoration:underline; text-underline-offset:3px; }
.sema-single-back__link:hover .sema-single-back__arrow::after{ margin-left:.3em; }

/* =========================================================
   スマホ（≤767px）：PC版の縮小にしない。タイトルを小さくしすぎず、左右余白を確保。
   画像・表・長いURLで横スクロールを出さない。末尾導線は押しやすく。
   ========================================================= */
@media (max-width:767px){
  .sema-single-header,
  .sema-single-content,
  .sema-single-footer{ max-width:none; }
  .sema-single-thumb{ max-width:none; aspect-ratio:4 / 3; margin-top:clamp(20px,5vw,30px); }
  .sema-single-title{ font-size:clamp(1.4rem, 6vw, 1.85rem); letter-spacing:.04em; line-height:1.55; }
  .sema-single-content{ font-size:1rem; line-height:1.95; }
  .sema-single-content > p:first-child{ font-size:1.05rem; line-height:2; padding-left:.9em; margin-bottom:2em; }
  .sema-single-content h2{ font-size:1.34rem; margin-top:2.6em; padding-left:.6em; line-height:1.5; }
  .sema-single-content h3{ font-size:1.18rem; margin-top:2.2em; }
  .sema-single-content h4{ font-size:1.02rem; }
  /* スマホでは回り込みを解除して画像が窮屈にならないようにする */
  .sema-single-content .alignleft,
  .sema-single-content .alignright{ float:none; max-width:100%; margin-inline:auto; }
  .sema-single-back__list{ gap:1.2em; }
  .sema-single-back__link{ font-size:1rem; }
}

@media (prefers-reduced-motion:reduce){
  .sema-single-back__link:hover .sema-single-back__arrow::after{ transition:none; }
}

/* =========================================================
   記事本文の装飾（post_content 内で使用・sema-article- プレフィックス）
   既存の h2/h3・リンク・明朝デザインは変更しない。カード/黒箱/蛍光は使わない。
   ========================================================= */

/* 控えめなマーカー風の強調。リンク（ブロンズ下線）とは明確に別の見た目（sage系の淡い帯）。 */
.sema-single-content .sema-article-emphasis{
  background-image:linear-gradient(transparent 62%, var(--sema-sage-weak) 62%);
  padding:0 .06em .02em; font-weight:500; color:inherit;
  text-decoration:none;                 /* リンクと誤認させない（下線は付けない） */
  border-radius:1px;
}

/* 補足ブロック：静かな囲み。左に細いブロンズ罫＋生成りの淡い面。強い角丸カードにしない。 */
.sema-single-content .sema-article-note{
  margin:2em 0; padding:1em 1.15em;
  background:var(--sema-paper); border-left:3px solid var(--sema-bronze-soft);
  border-radius:2px;
}
.sema-single-content .sema-article-note > :first-child{ margin-top:0; }
.sema-single-content .sema-article-note > :last-child{ margin-bottom:0; }
.sema-single-content .sema-article-note p{ margin:0 0 .6em; }
.sema-single-content .sema-article-note-label{
  font-family:var(--sema-sans); font-size:.82rem; letter-spacing:.08em; font-weight:600;
  color:var(--sema-sage-deep); margin:0 0 .5em;
}

/* 本文リスト（既存 ul のブロンズ・マーカーを継承しつつ、行間をやや詰める） */
.sema-single-content .sema-article-list{ margin:0 0 1.8em; }
.sema-single-content .sema-article-list li{ margin-bottom:.45em; }

@media (max-width:767px){
  .sema-single-content .sema-article-note{ padding:.9em 1em; margin:1.7em 0; }
}

/* =========================================================
   目次（inc/article-enhance.php が本文先頭に自動挿入）
   最初の h2 の直前＝導入文を読み終えた位置に置く。
   ========================================================= */
.sema-toc{
  background:var(--sema-paper); border:1px solid var(--sema-line);
  padding:1.5em 1.7em 1.6em; margin:2.6em 0 3em;
}
.sema-toc__title{
  font-family:var(--sema-serif); font-weight:700; font-size:1.02rem;
  letter-spacing:.12em; color:var(--sema-sage-deep); margin:0 0 .9em;
  display:flex; align-items:center;
}
.sema-toc__title::before{
  content:""; display:inline-block; width:22px; height:1px;
  background:var(--sema-bronze); margin-right:.8em;
}
.sema-toc__list{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.sema-toc__item{
  position:relative; padding:.5em 0 .5em 2.2em; margin:0;
  border-top:1px solid var(--sema-line);
}
.sema-toc__item:first-child{ border-top:none; }
.sema-toc__item::before{
  counter-increment:toc; content:counter(toc,decimal-leading-zero);
  position:absolute; left:0; top:.62em;
  font-size:.72rem; font-weight:700; color:var(--sema-bronze); letter-spacing:.08em;
}
.sema-toc a{
  color:var(--sema-ink); text-decoration:none; line-height:1.6;
  border-bottom:1px solid transparent; transition:border-color .2s var(--sema-ease), color .2s var(--sema-ease);
}
.sema-toc a:hover{ color:var(--sema-sage); border-bottom-color:var(--sema-sage-weak); }
.sema-toc__item > a{ font-family:var(--sema-serif); font-weight:600; font-size:1rem; letter-spacing:.03em; }

/* 小見出しの開閉ボタン（h3 を持つ項目にだけ出る）。
   h2 のリンクとは別要素にして、ジャンプと開閉が衝突しないようにしている。 */
.sema-toc__toggle{
  appearance:none; -webkit-appearance:none; background:none; border:none;
  cursor:pointer; padding:.35em .5em; margin-left:.3em; line-height:1;
  color:var(--sema-ink-mute); vertical-align:middle;
}
.sema-toc__toggle-label{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.sema-toc__toggle::before{
  content:""; display:inline-block; width:7px; height:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .22s var(--sema-ease);
}
.sema-toc__toggle[aria-expanded="true"]::before{ transform:rotate(-135deg) translate(-2px,-2px); }
.sema-toc__toggle:hover{ color:var(--sema-sage); }
.sema-toc__toggle:focus-visible{ outline:2px solid var(--sema-focus); outline-offset:2px; }

.sema-toc__sub{ list-style:none; margin:.5em 0 0; padding:0; }
.sema-toc__sub[hidden]{ display:none; }
.sema-toc__subitem{ position:relative; padding:.3em 0 .3em 1.1em; }
.sema-toc__subitem::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:6px; height:1px; background:var(--sema-line-strong);
}
.sema-toc__subitem > a{ font-size:.92rem; color:var(--sema-ink-soft); }

/* 見出しへジャンプしたとき、追従ヘッダーの下に隠れないようにする */
.sema-single-content h2,
.sema-single-content h3{ scroll-margin-top:calc(var(--sema-header-h) + 18px); }

/* =========================================================
   関連記事カード（ショートコード [sema_related]）
   文中に置いたリンクが「別記事へ飛ぶ」と一目で分かるようにする。
   ========================================================= */
.sema-related{
  display:grid; grid-template-columns:112px 1fr; column-gap:16px; align-items:center;
  text-decoration:none; color:var(--sema-ink);
  border:1px solid var(--sema-line); background:var(--sema-surface);
  padding:14px 18px 14px 14px; margin:2.2em 0;
  transition:border-color .2s var(--sema-ease), background .2s var(--sema-ease);
}
.sema-related:hover{ border-color:var(--sema-sage-weak); background:var(--sema-paper); }
.sema-related__thumb{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--sema-greige); border:1px solid var(--sema-line);
}
.sema-related__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sema-related__body{ display:block; min-width:0; }
.sema-related__label{
  display:flex; align-items:center; font-size:.68rem; font-weight:700;
  letter-spacing:.14em; color:var(--sema-bronze); margin-bottom:.5em;
}
.sema-related__label::before{
  content:""; display:inline-block; width:16px; height:1px;
  background:var(--sema-bronze); margin-right:.6em;
}
.sema-related__title{
  display:block; font-family:var(--sema-serif); font-weight:600;
  font-size:1.02rem; line-height:1.5; letter-spacing:.03em;
}
.sema-related:hover .sema-related__title{ color:var(--sema-sage); }
.sema-related__title .sema-title__sub{ font-size:.76em; margin-top:.35em; line-height:1.5; }

@media (max-width:767px){
  .sema-toc{ padding:1.3em 1.2em 1.4em; margin:2.2em 0 2.6em; }
  .sema-toc__item{ padding-left:2em; }
  .sema-toc__item > a{ font-size:.96rem; }
  .sema-toc__subitem > a{ font-size:.88rem; }
  .sema-related{ grid-template-columns:88px 1fr; column-gap:13px; padding:12px 14px 12px 12px; }
  .sema-related__title{ font-size:.96rem; }
}