/*
Theme Name: EJU Theme
Author: OpenAI
Version: 1.0
Text Domain: eju-theme
*/

/* 追加CSSは assets/css 側で管理 */

/* だが、今のところは下記追加で対応しておく */

/* 横幅計算を安定化 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* =========================================================
   ページ全体の外枠
   ・本文を中央の読みやすい幅に収める主役
   ・PDFのような「中央カラム」感を作る
   ・max-width を小さくすると細め、大きくすると広めになる
   ========================================================= */
.eju-page {
  width: 100%;             /* 親要素いっぱいに広がる */
  max-width: 900px;        /* 本文の最大幅。PDF寄りに少し狭めに設定 */
  margin: 0 auto;          /* 左右中央寄せ */
  padding: 32px 20px 64px; /* 上・左右・下の内側余白 */
}

/* =========================================================
   記事本体
   ・eju-page の幅いっぱいを使う
   ========================================================= */
.eju-article {
  width: 100%;
}

/* =========================================================
   投稿タイトル（ページ最上部の大見出し）
   ・現在はやや大きめ
   ・PDF寄りにするため少し控えめに調整
   ========================================================= */
.entry-title {
  margin: 0 0 28px;  /* 下に余白 */
  font-size: 2.4rem; /* 元の3remより少し小さく */
  line-height: 1.4;  /* 行間 */
  font-weight: 700;  /* 太字 */
}

/* =========================================================
   本文全体のラッパー
   ・本文をまとめるコンテナ
   ・幅100%を明示しておく
   ========================================================= */
.eju-content {
  width: 100%;
}

/* =========================================================
   本文中の段落
   ・通常本文、導入文、ポイント文を同じ基本設計で揃える
   ・読みやすさ重視で行間は広め
   ========================================================= */
.eju-content p,
.eju-lead,
.eju-point {
  font-size: 1.08rem; /* 少し控えめな文字サイズ */
  line-height: 2;     /* 行間広めで読みやすく */
  margin: 0 0 18px;   /* 段落ごとの下余白 */
}

/* =========================================================
   強調タイトル
   ・各ステップ内の大きめ見出し
   ・黄色マーカーとセットで見せる
   ========================================================= */
.eju-title {
  margin: 0 0 24px;   /* 下に余白 */
  font-size: 1.8rem;  /* 本文より大きく、タイトルより小さく */
  line-height: 1.5;
  font-weight: 700;
}

/* =========================================================
   強調タイトルの黄色マーカー
   ・文字全体の下側にマーカー風の帯を敷く
   ・62%より下を黄色にしている
   ========================================================= */
.eju-title span {
  background: linear-gradient(transparent 62%, #f3df57 62%);
}

/* =========================================================
   数式ボックス
   ・数式を囲む薄グレーのボックス
   ・角丸、余白、少しだけ影を付けて見やすくする
   ========================================================= */
.eq-box {
  background: #ececec;                    /* ボックス背景 */
  border-radius: 12px;                    /* 角丸 */
  padding: 26px 20px;                     /* ボックス内余白 */
  margin: 20px 0 32px;                    /* ボックス上下の余白 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* ごく薄い影でカード感を出す */
}

/* =========================================================
   MathJax の display 数式を中央揃えにする
   ・数式がボックス内で左右にずれにくくなる
   ・MathJax側のデフォルト幅を上書きして安定させる
   ========================================================= */
.eq-box mjx-container[display="true"] {
  display: block !important;   /* ブロック化 */
  width: 100% !important;      /* ボックス幅いっぱいを使う */
  margin: 0 auto !important;   /* 中央寄せ */
  text-align: center !important; /* 数式中央揃え */
}

/* =========================================================
   箇条書き
   ・本文の文章サイズとリズムを揃える
   ・画像の左側に説明が来るようなEJU解説でも読みやすくする
   ========================================================= */
.eju-content ul,
.eju-content ol {
  margin: 0 0 20px 1.4em; /* 下余白と左インデント */
  padding: 0;
}

.eju-content li {
  font-size: 1.08rem;  /* 本文と同系統のサイズ */
  line-height: 2;      /* 行間広め */
  margin: 0 0 6px;     /* 箇条書き項目間の余白 */
}

/* =========================================================
   図版ブロック
   ・図を本文中央に配置する
   ・数式ボックスとは別に、画像だけを自然に見せる
   ========================================================= */
.figure {
  margin: 28px 0 36px;   /* 図の上下余白 */
  text-align: center;    /* 画像とキャプションを中央寄せ */
}

/* =========================================================
   図版画像
   ・スマホでは縮小、PCでは原寸寄り
   ・横にはみ出さないように制御する
   ========================================================= */
.figure img {
  display: block;        /* 下の余白計算を安定化 */
  max-width: 75%;       /* 親幅を超えない */
  height: auto;          /* 縦横比を維持 */
  margin: 0 auto;        /* 画像中央寄せ */
}

/* =========================================================
   図版キャプション
   ・図の補足説明用
   ・必要なときだけ使う
   ========================================================= */
.figure-caption {
  margin-top: 10px;      /* 画像との間隔 */
  font-size: 0.95rem;    /* 本文より少し小さく */
  line-height: 1.7;      /* 詰まりすぎ防止 */
  color: #555;           /* 補足らしく少し薄め */
}

/* =========================================================
   ステップ見出し
   ・「ステップ③ 張力の最大値は最下点Bで生じる」のような
     行頭見出しを整える
   ・画像付きの導入見出しにも使いやすい
   ========================================================= */
.eju-step {
  margin: 0 0 28px;      /* 下余白 */
  font-size: 2rem;       /* 見出しとして十分目立たせる */
  line-height: 1.5;      /* 和文で詰まりにくい行間 */
  font-weight: 500;      /* 太すぎないが見出し感は出す */
}

/* =========================================================
   ステップ見出し内の強調
   ・「張力の最大値は最下点Bで生じる」などの補助文に使う
   ・主見出しより少し軽く見せる
   ========================================================= */
.eju-step small {
  font-size: 0.72em;     /* 主見出しより小さめ */
  font-weight: 400;      /* 補助文らしく少し軽くする */
}

/* =========================================================
   強調文ブロック
   ・短い結論を先に示す用途
   ・現在の黄色マーカー見出しとは別に、
     独立した強調行としても使える
   ========================================================= */
.eju-highlight {
  display: inline-block;                         /* 背景帯を文字幅に合わせる */
  margin: 0 0 20px;                             /* 下余白 */
  padding: 2px 6px;                             /* 背景帯の内側余白 */
  font-size: 1.25rem;                           /* 本文より大きめ */
  line-height: 1.8;                             /* つぶれ防止 */
  font-weight: 700;                             /* 強調 */
  background: linear-gradient(transparent 58%, #f3df57 58%); /* マーカー風 */
}

/* =========================================================
   太字の強調
   ・本文中でのキーワード強調を見やすくする
   ・太字が潰れて見えないように最低限調整
   ========================================================= */
.eju-content strong {
  font-weight: 700;
}

/* =========================================================
   ステップ間の軽いセパレータ
   ・主張しすぎない細線
   ・上下余白でブロックの切れ目を作る
   ========================================================= */
.eju-sep {
  height: 1px;
  margin: 34px 0 30px;
  background: linear-gradient(to right, transparent 0%, #d8d8d8 12%, #d8d8d8 88%, transparent 100%);
}


/* =========================================
   用語ページ全体
========================================= */
.eju-glossary-page h1 {
  margin: 0 0 24px;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 700;
}

/* 説明文 */
.eju-page-description {
  margin: 0 0 24px;
  font-size: 1.05rem;
  line-height: 1.9;
  color: #404040;
}

/* =========================================
   目次（TOC）
========================================= */
.eju-glossary-toc {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0 0 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.eju-glossary-toc h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.eju-glossary-toc ul {
  margin: 0;
  padding-left: 1.2em;
}

.eju-glossary-toc li {
  margin: 0;
  line-height: 1.4;
  margin-left: 2rem;
}

.eju-glossary-toc a {
  text-decoration: none;
  color: #0073aa;
}

.eju-glossary-toc a:hover {
  text-decoration: underline;
}

.eju-toc-group-toggle {
  font-weight: bold;
  margin-top: 8px;
}

.eju-toc-group-toggle::after {
  content: "▼";
  margin-left: 6px;
  font-size: 0.8em;
}

.eju-toc-group-toggle[aria-expanded="false"]::after {
  content: "▶";
}

.eju-toc-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.eju-toc-expand-all,
.eju-toc-collapse-all {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  background: transparent;
  border: 1px solid #b8b8b8;
  border-radius: 999px;
  padding: 4px 10px 4px 28px;
  position: relative;
  color: #333;
}

/* 左の小さなチェック欄 */
.eju-toc-expand-all::before,
.eju-toc-collapse-all::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 1px solid #888;
  border-radius: 3px;
  background: #fff;
  transform: translateY(-50%);
}

/* ホバー */
.eju-toc-expand-all:hover,
.eju-toc-collapse-all:hover {
  background: #f7f7f7;
}

/* 押したとき */
.eju-toc-expand-all:active,
.eju-toc-collapse-all:active {
  background: #efefef;
}


/* =========================================
   目次タイトル
========================================= */
.eju-glossary-content h2 {
  margin: 6px 0 12px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: #404040;
}

/* =========================================
   第3階層タイトル
========================================= */
.eju-glossary-group-title {
  margin: 40px 0 20px;
  padding: 4px 0 4px 12px;
  border-left: 5px solid #d0d0d0;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.4;
}

.eju-glossary-group-title::before {
  content: none !important;
}

/* =========================================
   用語タイトル
========================================= */
.eju-term-title {
  margin-top: 32px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #eef3ff;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.5;
}


/* =========================================
   用語本文（インデント）
========================================= */
.eju-term-body {
  margin-left: 2rem;
  border-left: 3px solid #ddd;
  background: #fafafa;
  padding: 0.8rem 1rem;
}

/* =========================================
   セクション名・セクション間の余白調整
========================================= */
.eju-term-body h4 {
  margin-top: 0.6rem;
  margin-bottom: 0.35rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #404040;
}

.eju-term-body h4.def::before { content: "📘 "; }
.eju-term-body h4.img::before { content: "💡 "; }
.eju-term-body h4.eq::before  { content: "∑ "; }
.eju-term-body h4.pt::before  { content: "📌 "; }

/* =========================================
   用語本文の段落・箇条書き
========================================= */
.eju-term-body p,
.eju-term-body li {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  margin-left: 1rem;
}

.eju-term-body ul,
.eju-term-body ol {
  margin: 0 0 18px 1.4em;
  padding: 0;
}

/* =========================================
   用語区切り線
========================================= */
.eju-glossary-content hr {
  border: none;
  border-top: 2px solid #ddd;
  margin: 32px 0;
}

/* =========================================
   スマホ調整
========================================= */
@media (max-width: 640px) {
  .eju-page {
    padding: 8px 4px 8px;
    box-sizing: border-box;
  }

  .eju-glossary-page h1 {
    font-size: 1.7rem;
  }

  .eju-glossary-content h2 {
    font-size: 1.3rem;
  }

  .eju-glossary-toc {
    padding: 12px 12px;
  }

  .eju-glossary-toc li {
    margin-left: 0.6rem;
  }

  .eju-term-body {
    margin-left: 0.4rem;
    padding: 0.7rem 0.7rem;
    box-sizing: border-box;
  }

  .eju-term-body p,
  .eju-term-body li {
    font-size: 1rem;
    margin-left: 0.2rem;
  }

  .eju-term-body ul,
  .eju-term-body ol {
    margin: 0 0 14px 1.1em;
  }

  .eju-page-description {
    font-size: 1rem;
  }
}



/* glossaryでは消す（安全策） */
.eju-glossary-content h2::before {
  content: none;
}

/* ただし、目次タイトルは消す */
.eju-toc-title::before {
  content: none !important;
}

/* ただし、用語タイトル【〜】は消す */
.eju-term-title::before {
  content: none !important;
}

/* =========================================
   用語最下段のタクソノミー
========================================= */
.eju-meta {
  margin-top: 28px;
  font-size: 0.85rem;
  color: #666;
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.eju-meta-label {
  font-weight: 600;
  margin-right: 4px;
}

.eju-meta-value {
  color: #444;
}



/* =========================================
   五十音一覧表
========================================= */
.eju-kana-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 24px;
}

.eju-kana-nav a {
  display: inline-block;
  min-width: 2.2em;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f0f0f0;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
}

.eju-kana-nav a:hover {
  background: #0073aa;
  color: #fff;
}

/*メインボタン*/
.eju-kana-main-toggle {
  width: 100%;
  text-align: left;
  font-size: 20px;
  font-weight: 700;
  padding: 12px 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #404040;
}

.eju-kana-main-toggle::before {
  content: "📚 ";
}

/* 行見出し */
.eju-kana-group {
  margin: 0;
  margin-top: 8px;
  padding: 2px 8px;
  border-top: 1px solid #e0e0e0;
}

.eju-kana-group-toggle {
  width: 100%;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  padding: 2px 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
  letter-spacing: 0.05em;

  display: flex;
  align-items: center;
}

.eju-kana-group-list {
  padding-top: 0px;
  padding-bottom: 2px;
}

.eju-kana-group-toggle::before {
  content: "▶";
  margin-right: 4px;
}

.eju-kana-group-toggle[aria-expanded="true"]::before {
  content: "▼";
}

/*用語リスト*/
.eju-kana-item {
  padding: 6px 0 0 0;
}

.eju-kana-item a {
  font-size: 16px;
  font-weight: 600;
  color: #404040;
}

.eju-kana-item a:hover {
  background: #f0f7ff;
  border-radius: 4px;
}

.eju-kana-meta {
  padding: 0 0 0 4px;
  font-size: 12px;
  line-height: 1.0;
  font-weight: 400;
  color: #404040;
}

/*PCだけ2カラム*/
@media (min-width: 768px) {
  .eju-kana-group-list {
    column-count: 2;
    column-gap: 32px;
  }
}

/*「すべて開く」ボタン*/
.eju-kana-controls button {
  margin-right: 8px;
  padding: 4px 8px;
  font-size: 12px;
}
.eju-kana-controls {
  margin-bottom: 10px;
}

/*ジャンプナビ固定*/
.eju-kana-nav {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  padding: 8px 0;
}


.eju-hero {
  text-align: center;
  margin-bottom: 40px;
}

.eju-cta {
  margin-top: 16px;
}

.eju-btn {
  display: inline-block;
  padding: 10px 16px;
  margin: 4px;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

.eju-term-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
}

.eju-term-nav a {
  text-decoration: none;
}

.eju-term-nav .is-empty {
  display: inline-block;
  min-width: 120px;
}

.single-glossary .eju-article.glossary > h1 {
    margin-bottom: 0.2em;
    line-height: 1.25;
}

.single-glossary .eju-article.glossary .eju-term-reading {
    margin-top: 0;
    margin-bottom: 0.7rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #666;
}

.single-glossary .eju-article.glossary .eju-breadcrumb {
    margin-top: 0;
    margin-bottom: 1.2rem;
}

.single-glossary .eju-article {
    padding-top: 16px;
}

.single-glossary .eju-article.glossary > h1 {
    margin-top: 0;
    margin-bottom: 0.2em;
}

/* =========================================
   単体用語ページ：前後リンクの視認性改善
   ========================================= */
.single-glossary .eju-term-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
}

.single-glossary .eju-term-nav-prev,
.single-glossary .eju-term-nav-next {
    display: block;
    padding: 0.8rem 1rem;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    background: #fafafa;
    text-decoration: none;
    color: inherit;
    line-height: 1.5;
    font-weight: 500;
}

.single-glossary .eju-term-nav-next {
    text-align: right;
}

/* =========================================
   単体用語ページ下の分野：XXを非表示にしている
   ========================================= */
.single-glossary .eju-meta {
    display: none;
}

/* =========================================
   図の埋め込み関係
   ========================================= */
.eju-figure {
    margin: 2em auto;
    text-align: center;
}
.eju-figure figcaption {
    font-size: 0.9em;
    color: #555;
    margin-top: 0.5em;
}
.eju-img {
    max-width: 600px;
    width: 100%;
    height: auto;
}
.eju-video {
  width: 100%;
  height: auto;
}