/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応
Version: 20210719
*/

/* =========================================================
   Affinger / 記事本文 可読性スタイル
   2025-09  shikaku-portal.jp
   変更しやすいようCSS変数で管理
========================================================= */
:root{
  --sp-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --sp-font-head: inherit;
  --sp-text: #0f172a;            /* 本文色 */
  --sp-muted: #475569;           /* 補足・注記 */
  --sp-line: #e5e7eb;            /* 枠線 */
  --sp-bg-soft: #fafafa;         /* 薄背景 */
  --sp-accent: #2563eb;          /* アクセント（青） */
  --sp-accent-2: #16a34a;        /* CTA系の緑 */
  --sp-radius: 12px;
  --sp-anchor-offset: 80px;      /* 固定ヘッダーの高さに合わせて調整 */
}

/* 本文ベース */
.entry-content{
  font-family: var(--sp-font-body);
  color: var(--sp-text);
  font-size: 16.5px;
  line-height: 1.85;
  word-break: break-word;
}

/* セクション間余白 */
.entry-content > * + *{
  margin-top: 1.05rem;
}

/* 見出し（階層差を明確化） */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4{
  font-family: var(--sp-font-head);
  font-weight: 800;
  line-height: 1.35;
  scroll-margin-top: var(--sp-anchor-offset);
}

/* H1：ページタイトル想定（本文内にある場合） */
.entry-content h1{
  font-size: clamp(1.65rem, 2.4vw, 2.1rem);
  margin: 1.2rem 0 .8rem;
}

/* H2：大見出し（左アクセント＋下ボーダー） */
.entry-content h2{
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  padding: .2rem .4rem .4rem .8rem;
  border-left: 6px solid var(--sp-accent);
  border-bottom: 1px solid var(--sp-line);
  margin: 1.6rem 0 .9rem;
}

/* H3：中見出し（下線） */
.entry-content h3{
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  padding-bottom: .25rem;
  border-bottom: 1px dashed var(--sp-line);
  margin: 1.2rem 0 .6rem;
}

/* H4：小見出し（薄色） */
.entry-content h4{
  font-size: 1.05rem;
  color: var(--sp-muted);
  margin: 1rem 0 .4rem;
}

/* 段落・小文字 */
.entry-content p{ margin: .6rem 0; }
.entry-content small, .entry-content .note{
  color: var(--sp-muted);
  font-size: .92em;
}

/* リストの読みやすさ */
.entry-content ul, .entry-content ol{
  padding-left: 1.25rem;
  margin: .6rem 0;
}
.entry-content li{ margin: .25rem 0; }

/* リンク（アクセシブルなフォーカス） */
.entry-content a{
  color: var(--sp-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.entry-content a:focus-visible{
  outline: 2px solid var(--sp-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 目次（details/summary：本文内にインラインCSSを置かなくてOK） */
.entry-content .toc-box details{
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-bg-soft);
}
.entry-content .toc-box summary{
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  padding: .9rem 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.entry-content .toc-box summary::-webkit-details-marker{ display:none; }
.entry-content .toc-box .toc-body{ padding: .2rem 1rem 1rem 1.2rem; }
.entry-content .toc-box ul{ margin: .25rem 0 .5rem 1rem; }
.entry-content .toc-box a{ text-decoration: none; }
.entry-content .toc-box a:hover{ text-decoration: underline; }

/* アンカーずれ補正（固定ヘッダーあり想定） */
.entry-content :target::before{
  content: ""; display: block;
  height: var(--sp-anchor-offset);
  margin-top: calc(var(--sp-anchor-offset) * -1);
  visibility: hidden;
}

/* テーブル（横スクロール対応の汎用スタイル） */
.entry-content .table-scroll{
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
}
.entry-content table{
  width: 100%;
  border-collapse: collapse;
}
.entry-content th, .entry-content td{
  border-bottom: 1px solid #f1f5f9;
  padding: .7rem .6rem;
  vertical-align: top;
}
.entry-content thead th{
  background: #f5f5f5;
  border-bottom: 1px solid var(--sp-line);
  white-space: nowrap;
}

/* 引用・注意ボックス */
.entry-content blockquote{
  border-left: 4px solid var(--sp-accent);
  background: #f8fafc;
  padding: .6rem .9rem;
  border-radius: 6px;
  color: #1f2937;
}
.entry-content .cta-box{
  border:1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  padding: 14px;
  background: var(--sp-bg-soft);
}
.entry-content .cta-box a.btn{
  display:inline-block; padding:.6rem 1rem;
  border-radius: 999px; background: var(--sp-accent-2); color:#fff;
  text-decoration:none; font-weight:700;
}
.entry-content .cta-box a.btn:hover{ opacity:.92; }

/* 画像とキャプション */
.entry-content img{ max-width:100%; height:auto; border-radius: 10px; }
.entry-content figure{ margin: 1rem 0; }
.entry-content figcaption{ text-align:center; color:var(--sp-muted); font-size:.92em; margin-top:.3rem; }

/* コード（解説用） */
.entry-content pre, .entry-content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.entry-content pre{
  border:1px solid var(--sp-line);
  border-radius: 10px;
  padding: .75rem .9rem;
  background: #0b1022; color: #e2e8f0;
  overflow:auto;
}
.entry-content code{ background:#f1f5f9; padding:.15rem .35rem; border-radius:4px; }

/* 余白の最適化（下部が詰まらないように） */
.entry-content > :last-child{ margin-bottom: 1rem; }

/* モバイル最適化 */
@media (max-width: 960px){
  .entry-content{ font-size: 16px; }
  .entry-content h2{ border-left-width: 5px; }
}
@media (max-width: 640px){
  .entry-content{ font-size: 15.8px; }
  .entry-content h1{ font-size: 1.5rem; }
  .entry-content h2{ font-size: 1.3rem; }
  .entry-content h3{ font-size: 1.12rem; }
}


/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {


	/*-- ここまで --*/
}
	
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {


	/*-- ここまで --*/
}	
	
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {


	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {


	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

	
	/*-- ここまで --*/
}