/*
Theme Name: Cross Shore JP
Theme URI: https://cross-shore.jp/blog/
Author: Cross Shore合同会社
Description: cross-shore.jp 日本語ブログ専用テーマ。日本語の可読性（行間1.9／17px）とYMYL領域のE-E-A-T（著者情報・更新日・出典・構造化データ）に特化。Webフォント不使用・jQuery不使用。
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: crossshore-jp
*/

/* ============================================================
   1. デザイントークン
   設計書 HP_日本語ブログ_デザイン設計書_v1.md に準拠
   ============================================================ */
:root{
  /* 色は3色に絞る（本文黒／リンク青／警告赤） */
  --cs-text:#1a1a1a;
  --cs-text-sub:#5a5a5a;
  --cs-link:#1558b0;
  --cs-link-hover:#0d3f80;
  --cs-warn:#c0392b;
  --cs-warn-bg:#fdf3f2;
  --cs-fact-bg:#f4f7fb;
  --cs-bg:#ffffff;
  --cs-bg-sub:#f7f7f7;
  --cs-border:#e2e2e2;
  --cs-border-strong:#c9c9c9;

  /* 和文の字面は欧文の約1.25倍。英語サイトの1.5〜1.6は使わない */
  --cs-lh-body:1.9;
  --cs-lh-heading:1.45;
  --cs-lh-ui:1.0;

  --cs-fs-body:17px;
  --cs-fs-small:15px;

  /* 17px×40字 ≒ 680px（PCで1行30〜45文字に収める） */
  --cs-content:680px;
  --cs-wide:1080px;

  /* 角丸は小さく（安定感・信頼） */
  --cs-radius:4px;

  --cs-font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* ============================================================
   2. リセット
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--cs-font);
  font-size:var(--cs-fs-body);
  line-height:var(--cs-lh-body);
  letter-spacing:.02em;
  color:var(--cs-text);
  background:var(--cs-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;height:auto}
a{color:var(--cs-link);text-underline-offset:.2em}
a:hover{color:var(--cs-link-hover)}
h1,h2,h3,h4{line-height:var(--cs-lh-heading);letter-spacing:.01em;font-weight:700}
table{border-collapse:collapse}
figure{margin:0}

/* 読み上げ専用 */
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-skip{position:absolute;left:-9999px;top:0;background:#fff;padding:.6em 1em;z-index:100}
.cs-skip:focus{left:0}

/* ============================================================
   3. レイアウト
   ============================================================ */
.cs-wrap{width:min(var(--cs-content),100% - 2.4rem);margin-inline:auto}
.cs-wrap--wide{width:min(var(--cs-wide),100% - 2.4rem);margin-inline:auto}

/* ============================================================
   4. ヘッダー
   ============================================================ */
.cs-header{border-bottom:1px solid var(--cs-border);background:#fff}
.cs-header__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;line-height:var(--cs-lh-ui)}
.cs-logo{font-size:1.05rem;font-weight:700;text-decoration:none;color:var(--cs-text);letter-spacing:.02em}
.cs-logo span{display:block;font-size:.72rem;font-weight:400;color:var(--cs-text-sub);margin-top:.35em;letter-spacing:.06em}
.cs-nav ul{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.cs-nav a{font-size:.92rem;text-decoration:none;color:var(--cs-text)}
.cs-nav a:hover{color:var(--cs-link);text-decoration:underline}

/* ============================================================
   5. パンくず
   ============================================================ */
.cs-breadcrumb{font-size:.8rem;color:var(--cs-text-sub);padding:.9rem 0 0;line-height:1.6}
.cs-breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4em}
.cs-breadcrumb li::after{content:"／";margin-left:.4em;color:var(--cs-border-strong)}
.cs-breadcrumb li:last-child::after{content:""}
.cs-breadcrumb a{color:var(--cs-text-sub)}

/* ============================================================
   6. 記事ヘッダー（タイトル・日付）
   ============================================================ */
.cs-article{padding:1.6rem 0 4rem}
.cs-title{font-size:1.72rem;margin:.6em 0 .5em}
.cs-dates{display:flex;flex-wrap:wrap;gap:1.1rem;font-size:.82rem;color:var(--cs-text-sub);line-height:1.6;margin-bottom:1.4rem}
.cs-dates time{font-variant-numeric:tabular-nums}
.cs-dates .is-updated{color:var(--cs-text);font-weight:700}
.cs-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .4rem;padding:0;list-style:none}
.cs-cats a{font-size:.76rem;text-decoration:none;border:1px solid var(--cs-border-strong);border-radius:var(--cs-radius);padding:.18em .7em;color:var(--cs-text-sub);line-height:var(--cs-lh-ui);display:inline-block}
.cs-cats a:hover{border-color:var(--cs-link);color:var(--cs-link)}

/* ============================================================
   7. 著者ボックス（冒頭・末尾の両方に置く）
   ============================================================ */
.cs-author{display:flex;gap:1rem;align-items:flex-start;border:1px solid var(--cs-border);border-radius:var(--cs-radius);padding:1rem 1.1rem;background:var(--cs-bg-sub);margin:1.6rem 0}
.cs-author img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;background:#ddd}
.cs-author__body{font-size:.86rem;line-height:1.75}
.cs-author__name{font-weight:700;font-size:.95rem;margin:0 0 .2em;color:var(--cs-text)}
.cs-author__name small{font-weight:400;color:var(--cs-text-sub);margin-left:.5em;font-size:.82em}
.cs-author__desc{margin:0;color:var(--cs-text-sub)}
.cs-author--foot{margin:3rem 0 0;background:#fff}
.cs-author--foot img{width:76px;height:76px}

/* ============================================================
   8. 冒頭の免責
   ============================================================ */
.cs-disclaimer{border-left:3px solid var(--cs-warn);background:var(--cs-warn-bg);padding:.9rem 1.1rem;font-size:.86rem;line-height:1.8;margin:1.4rem 0;border-radius:0 var(--cs-radius) var(--cs-radius) 0}
.cs-disclaimer p{margin:0}
.cs-disclaimer strong{color:var(--cs-warn)}

/* ============================================================
   9. 目次
   ============================================================ */
.cs-toc{border:1px solid var(--cs-border);border-radius:var(--cs-radius);padding:1.1rem 1.2rem;margin:2rem 0;background:#fff}
.cs-toc__ttl{font-size:.92rem;font-weight:700;margin:0 0 .7rem;letter-spacing:.04em}
.cs-toc ol{margin:0;padding-left:1.3em}
.cs-toc > ol{counter-reset:cstoc;padding-left:0;list-style:none}
.cs-toc > ol > li{counter-increment:cstoc;margin:.45em 0}
.cs-toc > ol > li > a::before{content:counter(cstoc) ". ";color:var(--cs-text-sub);font-variant-numeric:tabular-nums}
.cs-toc ol ol{list-style:none;padding-left:1.4em;margin:.3em 0}
.cs-toc ol ol li{margin:.3em 0;font-size:.9em}
.cs-toc ol ol a::before{content:"– ";color:var(--cs-border-strong)}
.cs-toc a{text-decoration:none;font-size:.92rem;line-height:1.7;display:inline-block}
.cs-toc a:hover{text-decoration:underline}

/* ============================================================
   10. 本文タイポグラフィ
   ============================================================ */
.cs-body{font-size:var(--cs-fs-body);line-height:var(--cs-lh-body)}
.cs-body > * + *{margin-top:1.5em}
.cs-body p{margin:0}
.cs-body h2{
  font-size:1.3rem;margin:2.9rem 0 0;padding:0 0 .5rem;
  border-bottom:2px solid var(--cs-text);scroll-margin-top:1.2rem;
}
.cs-body h3{font-size:1.09rem;margin:2.2rem 0 0;scroll-margin-top:1.2rem;padding-left:.65rem;border-left:4px solid var(--cs-border-strong)}
.cs-body h4{font-size:1rem;margin:1.8rem 0 0}
.cs-body ul,.cs-body ol{margin:1.3em 0;padding-left:1.5em}
.cs-body li{margin:.55em 0}
.cs-body li > ul,.cs-body li > ol{margin:.5em 0}
.cs-body strong{font-weight:700}
.cs-body blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--cs-border-strong);color:var(--cs-text-sub)}
.cs-body hr{border:0;border-top:1px solid var(--cs-border);margin:2.6em 0}
.cs-body figcaption{font-size:.8rem;color:var(--cs-text-sub);margin-top:.5em;line-height:1.7}
.cs-body code{font-size:.9em;background:var(--cs-bg-sub);padding:.1em .35em;border-radius:3px}

/* 表（判定・比較はここに集約する） */
.cs-body table{width:100%;font-size:.9rem;line-height:1.75;margin:1.6em 0}
.cs-body th,.cs-body td{border:1px solid var(--cs-border);padding:.6em .8em;text-align:left;vertical-align:top}
.cs-body th{background:var(--cs-bg-sub);font-weight:700;white-space:nowrap}
.cs-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============================================================
   11. 独自ブロック（ショートコード）
   ============================================================ */
/* ⚠️ 注意 */
.cs-warn{border:1px solid var(--cs-warn);border-left-width:4px;background:var(--cs-warn-bg);border-radius:0 var(--cs-radius) var(--cs-radius) 0;padding:.95rem 1.1rem;font-size:.94rem;line-height:1.85}
.cs-warn > :first-child{margin-top:0}
.cs-warn > :last-child{margin-bottom:0}

/* 実額（一次データ）*/
.cs-fact{border:1px solid #c3d3e8;border-left-width:4px;background:var(--cs-fact-bg);border-radius:0 var(--cs-radius) var(--cs-radius) 0;padding:.95rem 1.1rem;font-size:.94rem;line-height:1.85}
.cs-fact__label{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;color:#1558b0;border:1px solid #1558b0;border-radius:var(--cs-radius);padding:.1em .6em;line-height:var(--cs-lh-ui);margin-bottom:.6em}

/* 判定表 */
.cs-hantei{border:2px solid var(--cs-text);border-radius:var(--cs-radius);padding:1rem 1.15rem;margin:1.8em 0}
.cs-hantei__ttl{font-size:.98rem;font-weight:700;margin:0 0 .7rem;letter-spacing:.03em}
.cs-hantei table{margin:0}

/* 折りたたみ（情報量は減らさず、見える密度だけ下げる） */
.cs-acc{border:1px solid var(--cs-border);border-radius:var(--cs-radius);margin:1.5em 0;background:#fff}
.cs-acc > summary{cursor:pointer;padding:.8rem 1rem;font-weight:700;font-size:.95rem;list-style:none;line-height:1.6;display:flex;gap:.6em;align-items:baseline}
.cs-acc > summary::-webkit-details-marker{display:none}
.cs-acc > summary::before{content:"＋";color:var(--cs-link);font-weight:700;flex:none}
.cs-acc[open] > summary::before{content:"−"}
.cs-acc > summary:hover{background:var(--cs-bg-sub)}
.cs-acc__in{padding:0 1rem 1rem;font-size:.94rem;line-height:1.85;border-top:1px solid var(--cs-border);padding-top:.9rem}
.cs-acc__in > :first-child{margin-top:0}

/* 出典 */
.cs-sources{border-top:1px solid var(--cs-border);margin-top:3rem;padding-top:1.4rem;font-size:.85rem;line-height:1.8}
.cs-sources__ttl{font-size:.92rem;font-weight:700;margin:0 0 .6rem}
.cs-sources ol{margin:0;padding-left:1.4em}
.cs-sources li{margin:.5em 0;word-break:break-word}
.cs-sources .cs-checked{color:var(--cs-text-sub);font-size:.92em;white-space:nowrap}

/* CTA */
.cs-cta{border:1px solid var(--cs-border-strong);border-radius:var(--cs-radius);padding:1.3rem 1.3rem;margin:2.6rem 0;background:var(--cs-bg-sub)}
.cs-cta__ttl{font-size:1.02rem;font-weight:700;margin:0 0 .5rem}
.cs-cta p{margin:0 0 1rem;font-size:.92rem;line-height:1.85}
.cs-btn{display:inline-block;background:var(--cs-link);color:#fff;text-decoration:none;font-weight:700;font-size:.94rem;padding:.75em 1.6em;border-radius:var(--cs-radius);line-height:var(--cs-lh-ui)}
.cs-btn:hover{background:var(--cs-link-hover);color:#fff}

/* ============================================================
   12. 記事一覧
   ============================================================ */
.cs-list{list-style:none;margin:2rem 0 0;padding:0}
.cs-list > li{border-bottom:1px solid var(--cs-border);padding:1.5rem 0}
.cs-list > li:first-child{border-top:1px solid var(--cs-border)}
.cs-card__date{font-size:.78rem;color:var(--cs-text-sub);font-variant-numeric:tabular-nums;line-height:1.6}
.cs-card__ttl{font-size:1.08rem;margin:.35em 0 .45em}
.cs-card__ttl a{text-decoration:none;color:var(--cs-text)}
.cs-card__ttl a:hover{color:var(--cs-link);text-decoration:underline}
.cs-card__ex{font-size:.9rem;color:var(--cs-text-sub);margin:0;line-height:1.85}

/* 関連記事カード */
.cs-related{margin-top:3rem}
.cs-related__ttl{font-size:1.02rem;font-weight:700;margin:0 0 .9rem;padding-bottom:.4rem;border-bottom:2px solid var(--cs-text)}
.cs-related ul{list-style:none;margin:0;padding:0}
.cs-related li{border-bottom:1px solid var(--cs-border);padding:.85rem 0}
.cs-related a{text-decoration:none;color:var(--cs-text);font-size:.95rem;line-height:1.7;display:block}
.cs-related a:hover{color:var(--cs-link);text-decoration:underline}
.cs-related .d{display:block;font-size:.76rem;color:var(--cs-text-sub);font-variant-numeric:tabular-nums}

/* ページャ */
.cs-pager{display:flex;justify-content:space-between;gap:1rem;margin:2.5rem 0 0;font-size:.9rem}
.cs-pager a{text-decoration:none}

/* ============================================================
   13. フッター
   ============================================================ */
.cs-footer{border-top:1px solid var(--cs-border);margin-top:4rem;padding:2.2rem 0 3rem;font-size:.85rem;color:var(--cs-text-sub);line-height:1.9}
.cs-footer__nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.2rem;margin:0 0 1rem;padding:0}
.cs-footer a{color:var(--cs-text-sub)}
.cs-footer__co{margin:0}

/* ============================================================
   14. モバイル
   ============================================================ */
@media (max-width:600px){
  :root{--cs-fs-body:17px;--cs-lh-body:1.85}
  .cs-wrap,.cs-wrap--wide{width:calc(100% - 2rem)}
  .cs-title{font-size:1.42rem}
  .cs-body h2{font-size:1.2rem}
  .cs-body h3{font-size:1.05rem}
  .cs-author{flex-direction:row;gap:.8rem;padding:.9rem}
  .cs-author img{width:48px;height:48px}
  .cs-header__in{flex-direction:column;align-items:flex-start;gap:.6rem}
  .cs-nav ul{gap:1rem}
  .cs-body table{font-size:.85rem}
}

/* ============================================================
   15. 印刷
   ============================================================ */
@media print{
  .cs-header,.cs-footer,.cs-cta,.cs-toc,.cs-related,.cs-breadcrumb{display:none}
  body{font-size:11pt;line-height:1.7}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
}
