/* =========================================================
CSS Ver3
========================================================= */

/* =========================================================
00. 共通
- :root
- 全体カラー
- h2 / h3
- 共通余白
- 全シリーズ共通の印刷前提になる基本
========================================================= */
/* ---------- root設定 ---------- */

/* ---------- 全体カラー ---------- */


/* ------------------------------ 
h2設定 
 ------------------------------- */
.entry-content h2{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  background: linear-gradient(90deg, #ffeaf4, #eaf6ff, #f3eaff);
  padding: 0.8em 1.4em;
  margin: 1.8em 0 1em;
  border-radius: 14px;
  font-weight: 700;
  color: #444;
  line-height: 1.4;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  position: relative;
}

/* テープ装飾 */
.entry-content h2::before{
  content: "";
  position: absolute;
  top: -12px;
  left: 30px;
  width: 55px;
  height: 14px;
  background: linear-gradient(135deg, #ffd6e9, #d6f0ff);
  transform: rotate(-5deg);
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  opacity: 0.9;
}

/* 角丸を確定（Cocoon上書き対策） */
.entry-content h2,
.entry-content h2.wp-block-heading{
  border-radius: 14px !important;
  background-clip: padding-box;
}

/* ------------------------------ 
h3設定
 ------------------------------- */
.entry-content h3{
  display: block;
  margin: 1.4em 0 0.9em;
  padding: 0.75em 1.1em;

  background: linear-gradient(90deg, #fff6cc, #ffeef6);
  border: 1px solid rgba(246,184,76,.45);
  border-left: 8px solid #f6b84c;
  border-radius: 14px;

  color: #5a4a42;
  font-weight: 700;
  line-height: 1.45;

  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.entry-content h3::before{
  content: "✦";
  display: inline-block;
  margin-right: 0.45em;
  color: #f0a84b;
  font-size: 0.95em;
}



/* 
.kn-h3 {
  background: #ffefc2;
  border-left: 6px solid #f9a825;
  padding: 0.6em 1em;
  margin: 1.5em 0 1em;
  border-radius: 8px;
  font-weight: bold;
}
 */



/* =========================================================
10. WBSS
- .wbss
- .wbss-box
- .wbss-talk
- .wbss-scene
- WBSS専用 print 補助
========================================================= */

/* =========================================================
20. KBSS
- .kbss
- 漢字学習用の箱
- 例文
- 読み / 意味 / ニュアンス
========================================================= */

/* =========================================================
30. GBSS
- .gbss
- glossary-acd を昇格
- 単語見出し
- 解説本文
- 用例
========================================================= */

/* =========================================================
80. 印刷
- @media print
- 各シリーズ横断の印刷制御
========================================================= */

/* =========================================================
90. レガシー
- 過去記事維持のみ
- 新規追加しない
========================================================= */







/*
========================================
WBSS Rulebook v03
Whispers Between Sakura and Sumire

[目的]
・タグと本文を視覚的に分離し、編集事故を防ぐ
・レガシーCSSに影響を与えない構造を維持する
・見た目の区切りはCSSで行い、hr等は使わない

----------------------------------------
■ 基本原則
----------------------------------------

1) 接頭辞は wbss- を使用する
   （他CSSとの衝突回避）

2) ブロック開始は必ずコメントで宣言する
   例:
   <!-- wbss-talk: sakura -->

3) タグ行と本文行を混在させない（会話限定）
   ・開始タグは単独行
   ・本文は本文のみの行
   ・閉じタグは構造ブロックのみ終端マーカーとして横に寄せる

4) 階層インデント（空白による構造表現）は使用しない
   ・構造はコメントで管理する

5) 構造ブロック(div)の終了は視覚的区切りとしてまとめる
   例:
   </span></div>
   ※構造ブロックに限定する

6) 番号は10刻みで付与する。
   中間追加が必要な場合のみ5刻みを許可する。
   それ以上の細分化は原則行わない。

----------------------------------------
■ 適用範囲
----------------------------------------
・.wbss 内のみで完結させる
・既存レガシー構造には触れない

----------------------------------------
※ このルールは今後必要に応じて追記する
========================================
*/

/* -----------------------------------------
WBSS-010: Tokens（変数）
----------------------------------------- */


/* -----------------------------------------
WBSS-020: Wrapper
----------------------------------------- */

/* -----------------------------------------
WBSS-030: Headings
----------------------------------------- */


/* =========================================
   WBSS-040 Anchor（接頭辞統一版）
   用途：記事末尾の「戻る」「バックナンバー」など
   方針：.wbss 内に閉じる（レガシー非干渉）
========================================= */

.entry-content .wbss a.wbss-anchor{
  display: inline-block;
  margin: 0 0 1.0em 0;
  padding: 0.85em 1.10em;

  text-decoration: none;
  color: #3a3a3a;

  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.35;

  border-radius: 14px;
  border: 1px solid rgba(182,166,232,.45);

  box-shadow: 0 10px 26px rgba(0,0,0,.10);

  white-space: normal;
  overflow-wrap: anywhere;
}

/* hover / active / focus */
.entry-content .wbss a.wbss-anchor:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 32px rgba(0,0,0,.14);
}
.entry-content .wbss a.wbss-anchor:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.entry-content .wbss a.wbss-anchor:focus-visible{
  outline: 2px solid rgba(247,161,196,.75);
  outline-offset: 3px;
}

/* 色バリエーション */
.entry-content .wbss a.wbss-anchor--pink{
  background: rgba(247,161,196,.18);
}
.entry-content .wbss a.wbss-anchor--blue{
  background: rgba(91,166,232,.14);
}
.entry-content .wbss a.wbss-anchor--purple{
  background: rgba(182,166,232,.16);
}


/* -----------------------------------------
WBSS-050: Talk（統一版）
用途：会話（キャラアイコン＋JP/EN）
方針：.wbss 内だけで完結（レガシー非干渉）＋接頭辞 wbss-
----------------------------------------- */
/* 1) 会話ボックス本体 */
.entry-content .wbss .wbss-talk{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;

  margin: 1.0em 0;
  padding: 1.05em 1.0em 1.0em;

  /* ラベルの“居場所” */
  padding-top: 1.55em;

  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);

  line-height: 1.75;
  color: #333;
  overflow: visible;
}

/* 2) ラベル（data-label） */
.entry-content .wbss .wbss-talk::before{
  content: attr(data-label);
  position: absolute;
  top: -0.85em;
  left: 0.85em;

  padding: 0.25em 0.7em;
  border-radius: 12px;
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;

  color: #fff;
}

/* 3) アイコン（背景画像） */
.entry-content .wbss .wbss-talk-icon{
  flex: 0 0 52px;
  width: 52px;
  height: 52px;

  border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 20%;
  margin-top: 4px;
}

/* 4) 本文側 */
.entry-content .wbss .wbss-talk-body{
  flex: 1;
  min-width: 0;
}

/* 5) JP / EN */
.entry-content .wbss .wbss-talk-jp{
  font-weight: 400;
  line-height: 1.75;
}

.entry-content .wbss .wbss-talk-en{
  margin-top: .55em;
  padding-left: .9em;
  border-left: 4px solid rgba(247,161,196,.55);
  opacity: .92;
  line-height: 1.65;
}

/* 6) 役別（色＋アイコンURL） */
.entry-content .wbss .wbss-talk--sakura{
  border: 2px solid rgba(247,161,196,.60);
  background: rgba(247,161,196,.10);
}
.entry-content .wbss .wbss-talk--sakura::before{
  background: var(--sakura-color);
}

/* 00:普通 */
/* 01:にっこり */
/* 02:怒り */
/* 03:悲しみ */
/* 04:予備 */
.entry-content .wbss .wbss-talk--sakura .wbss-talk-icon{
  background-image: var(--wbss-icon-sakura-00);
}
.entry-content .wbss .wbss-talk--sakura.is-01 .wbss-talk-icon{
  background-image: var(--wbss-icon-sakura-01);
}
.entry-content .wbss .wbss-talk--sakura.is-02 .wbss-talk-icon{
  background-image: var(--wbss-icon-sakura-02);
}
.entry-content .wbss .wbss-talk--sakura.is-03 .wbss-talk-icon{
  background-image: var(--wbss-icon-sakura-03);
}
.entry-content .wbss .wbss-talk--sakura.is-04 .wbss-talk-icon{
  background-image: var(--wbss-icon-sakura-04);
}

.entry-content .wbss .wbss-talk--sumire{
  border: 2px solid rgba(182,166,232,.60);
  background: rgba(182,166,232,.10);
}
.entry-content .wbss .wbss-talk--sumire::before{
  background: var(--sumire-color);
}

/* 00:普通 */
/* 01:にっこり */
/* 02:怒り */
/* 03:悲しみ */
/* 04:予備 */
.entry-content .wbss .wbss-talk--sumire .wbss-talk-icon{
  background-image: var(--wbss-icon-sumire-00);
}
.entry-content .wbss .wbss-talk--sumire.is-01 .wbss-talk-icon{
  background-image: var(--wbss-icon-sumire-01);
}
.entry-content .wbss .wbss-talk--sumire.is-02 .wbss-talk-icon{
  background-image: var(--wbss-icon-sumire-02);
}
.entry-content .wbss .wbss-talk--sumire.is-03 .wbss-talk-icon{
  background-image: var(--wbss-icon-sumire-03);
}
.entry-content .wbss .wbss-talk--sumire.is-04 .wbss-talk-icon{
  background-image: var(--wbss-icon-sumire-04);
}


.entry-content .wbss .wbss-talk--hachi{
  border: 2px dashed rgba(111,143,175,.65);
  background: rgba(111,143,175,.10);
}
.entry-content .wbss .wbss-talk--hachi::before{
  background: var(--hachi-color);
}
/* 00:普通 */
/* 01:ドヤ（軽）*/
/* 02:ぷんすか（軽） */
/* 03:予備 */
/* 04:予備 */
.entry-content .wbss .wbss-talk--hachi .wbss-talk-icon{
  background-image: var(--wbss-icon-hachi-00);
  border-radius: 40%;
  background-position: 50% 35%;
}
.entry-content .wbss .wbss-talk--hachi.is-01 .wbss-talk-icon{
  background-image: var(--wbss-icon-hachi-01);
  border-radius: 40%;
  background-position: 50% 35%;
}
.entry-content .wbss .wbss-talk--hachi.is-02 .wbss-talk-icon{
  background-image: var(--wbss-icon-hachi-02);
  border-radius: 40%;
  background-position: 50% 35%;
}
.entry-content .wbss .wbss-talk--hachi.is-03 .wbss-talk-icon{
  background-image: var(--wbss-icon-hachi-03);
  border-radius: 40%;
  background-position: 50% 35%;
}
.entry-content .wbss .wbss-talk--hachi.is-04 .wbss-talk-icon{
  background-image: var(--wbss-icon-hachi-04);
  border-radius: 40%;
  background-position: 50% 35%;
}


.entry-content .wbss .wbss-talk--friend{
  border: 2px solid rgba(143,191,168,.65);
  background: rgba(143,191,168,.10);
}
.entry-content .wbss .wbss-talk--friend::before{
  background: var(--friend-color);
}
/* 00:普通 */
/* 01:にっこり */
/* 02:怒り */
/* 03:悲しみ */
/* 04:予備 */
.entry-content .wbss .wbss-talk--friend .wbss-talk-icon{
  background-image: var(--wbss-icon-friend-00);
  background-position: 50% 10%;
}
.entry-content .wbss .wbss-talk--friend.is-01 .wbss-talk-icon{
  background-image: var(--wbss-icon-friend-01);
  background-position: 50% 10%;
}
.entry-content .wbss .wbss-talk--friend.is-02 .wbss-talk-icon{
  background-image: var(--wbss-icon-friend-02);
  background-position: 50% 10%;
}
.entry-content .wbss .wbss-talk--friend.is-03 .wbss-talk-icon{
  background-image: var(--wbss-icon-friend-03);
  background-position: 50% 10%;
}
.entry-content .wbss .wbss-talk--friend.is-04 .wbss-talk-icon{
  background-image: var(--wbss-icon-friend-04);
  background-position: 50% 10%;
}

.entry-content .wbss .wbss-talk--satoru{
  border: 2px solid rgba(242,199,110,.65);   /* satoru-color相当 */
  background: rgba(242,199,110,.10);
}
.entry-content .wbss .wbss-talk--satoru::before{
  background: var(--satoru-color);
}
/* 00:普通 */
/* 01:にっこり */
/* 02:怒り */
/* 03:悲しみ */
/* 04:予備 */
.entry-content .wbss .wbss-talk--satoru .wbss-talk-icon{
  background-image: var(--wbss-icon-satoru-00);
  background-position: 50% 10%;
}
.entry-content .wbss .wbss-talk--satoru.is-01 .wbss-talk-icon{
  background-image: var(--wbss-icon-satoru-01);
  background-position: 50% 10%;
}
.entry-content .wbss .wbss-talk--satoru.is-02 .wbss-talk-icon{
  background-image: var(--wbss-icon-satoru-02);
  background-position: 50% 10%;
}
.entry-content .wbss .wbss-talk--satoru.is-03 .wbss-talk-icon{
  background-image: var(--wbss-icon-satoru-03);
  background-position: 50% 10%;
}
.entry-content .wbss .wbss-talk--satoru.is-04 .wbss-talk-icon{
  background-image: var(--wbss-icon-satoru-04);
  background-position: 50% 10%;
}


/* 7) スマホだけ少し詰める */
@media (max-width: 480px){
  .entry-content .wbss .wbss-talk{
    gap: 14px;
    padding-top: 1.7em;
  }
  .entry-content .wbss .wbss-talk-icon{
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    margin-top: 6px;
  }
}



/* -----------------------------------------
WBSS-060: Scene（接頭辞統一版）
用途：場面転換 / 回想 / 注釈 を同じ型で表示
方針：.wbss 内だけで完結（レガシー非干渉）
----------------------------------------- */
/* シーン全体 */
.entry-content .wbss .wbss-scene{
  margin: .9em 0;
  text-align: center;
}

/* 上下ライン：共通 */
.entry-content .wbss .wbss-scene-line{
  margin: .2em 0;
  text-align: center;
  padding: 2px 0;
}

.entry-content .wbss .wbss-scene-line::before{
  display: block;
  white-space: nowrap;

  /* 絵文字の上下が切れない行高 */
  line-height: 1.25;

  /* iOS描画ブレ保険 */
  padding: 1px 0;

  overflow: clip;

  font-size: 14px;
  letter-spacing: .06em;
  transform: translateY(1px);
}

/* 柄（skin） */
.entry-content .wbss .wbss-scene-line--myhome::before{
  content: "🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡🏡";
}

.entry-content .wbss .wbss-scene-line--school::before{
  content: "🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫🏫";
}

.entry-content .wbss .wbss-scene-line--cat::before{
  content: "🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈";
}

.entry-content .wbss .wbss-scene-line--sparkle::before{
  content: "✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨";
}

.entry-content .wbss .wbss-scene-line--star::before{
  content: "💫💫💫💫💫💫💫💫💫💫💫💫💫💫💫💫💫💫💫💫💫💫";
}

.entry-content .wbss .wbss-scene-line--heart::before{
  content: "💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕";
}

.entry-content .wbss .wbss-scene-line--car::before{
  content: "🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗";
}

.entry-content .wbss .wbss-scene-line--note::before{
  content: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━";
  opacity: .45;
}

/* JP/EN */
.entry-content .wbss .wbss-scene-jp{
  text-align: center;
  font-weight: 400;
  font-size: 1.2em;
  margin-top: .2em;
  line-height: 1.2;
}

.entry-content .wbss .wbss-scene-en{
  text-align: center;
  font-weight: 400;
  opacity: .9;
  margin-top: .15em;
  line-height: 1.2;
}

/* -----------------------------------------
WBSS-070: JP/EN Box（wbss専用）
用途：はじめに / 最後に の JP/EN 表示
方針：.wbss 内だけで完結（レガシー非干渉）
----------------------------------------- */
/* 共通ボックス */
.entry-content .wbss .wbss-box{
  position: relative;
  margin: 1.0em 0;
  padding: 1.05em 1.0em 1.0em;
  border-radius: 16px;
  line-height: 1.75;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);

  /* ラベルの居場所 */
  padding-top: 1.6em;
}

/* ラベル（data-label を表示） */
.entry-content .wbss .wbss-box::before{
  content: attr(data-label);
  position: absolute;
  top: -0.85em;
  left: 0.85em;

  padding: 0.35em 0.9em;
  border-radius: 14px;
  font-weight: 500;
  letter-spacing: .03em;
  white-space: nowrap;

  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* JP */
.entry-content .wbss .wbss-box-jp{
  background: rgba(242,166,90,0.10);
  border: 2px solid rgba(242,166,90,0.45);
}
.entry-content .wbss .wbss-box-jp::before{
  background: rgba(230,160,85,0.95);
}

/* EN */
.entry-content .wbss .wbss-box-en{
  background: rgba(91,166,232,0.10);
  border: 2px solid rgba(91,166,232,0.45);
}
.entry-content .wbss .wbss-box-en::before{
  background: rgba(91,166,232,0.95);
}

/* スマホだけ少し詰める（任意） */
@media (max-width:480px){
  .entry-content .wbss .wbss-box{
    border-radius: 14px;
    padding-top: 1.75em;
  }
  .entry-content .wbss .wbss-box::before{
    left: 0.75em;
    font-size: .92em;
  }
}


/* -----------------------------------------
WBSS-090: Print
----------------------------------------- */
/* -----------------------------------------
WBSS-090: Print（レガシー昇格 / WBSS完結版）
目的：WBSSを1話〜100話PDF化できる印刷設計
方針：レガシーに依存しない / .wbss 内で完結
----------------------------------------- */
@media print{

  /* ===============================
     0) ページ設定（WBSS基準）
     =============================== */

  /* A4縦・余白1cm（推奨） */
  @page{ size: A4 portrait; margin: 10mm; }

  /* A5相当へ縮小運用なら余白1.7cm（必要時だけ切替） */
  /*
  @page{ size: A4 portrait; margin: 17mm; }
  */

  *{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ===============================
     1) 改ページ
     =============================== */
  .kn-pagebreak{
    break-before: page !important;
    page-break-before: always !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ===============================
     2) WBSS印刷の「安全域」
     ここでWBSSだけを整える（全体を壊さない）
     =============================== */

  /* WBSSの外側に余計な横幅制限があるテーマでも崩れにくく */
  .entry-content .wbss{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;

    /* 余白は @page に任せる（WBSS自体には盛らない） */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ===============================
     3) 見出し（WBSS作品としての帯）
     レガシーのh2印刷思想をWBSSへ昇格
     =============================== */
  .entry-content h2{
    background: #f6c1d1 !important;
    color: #3b2b3b !important;
    padding: 5mm 7mm !important;
    border-radius: 4mm !important;
    line-height: 1.25 !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .entry-content h2::before,
  .entry-content h2::after{
    content: none !important;
    display: none !important;
  }


  .entry-content h3{
    background: #fff1c6 !important;
    color: #4d4038 !important;
    padding: 4mm 6mm !important;
    border-left: 3mm solid #f6b84c !important;
    border-radius: 3mm !important;
    line-height: 1.35 !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .entry-content h3::before{
    color: #d9992b !important;
  }


  /* ===============================
     4) WBSS-BOX（JP/ENの箱）
     「ラベルだけ残る事故」をWBSSで潰す
     =============================== */
  .entry-content .wbss .wbss-box{
    position: relative !important;
    box-sizing: border-box !important;

    padding-top: 12mm !important; /* ラベルの居場所 */

    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .entry-content .wbss .wbss-box::before{
    top: 3mm !important;     /* マイナス値を殺して内側へ */
    left: 6mm !important;
    transform: none !important;
  }

  /* ===============================
     5) WBSS-TALK（会話：アイコン＋JP/EN）
     =============================== */
  .entry-content .wbss .wbss-talk{
    position: relative !important;
    box-sizing: border-box !important;

    padding-top: 12mm !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .entry-content .wbss .wbss-talk::before{
    top: 3mm !important;
    left: 6mm !important;
    transform: none !important;
  }

  /* ===============================
     6) アイキャッチ（WBSS PDF化の安定）
     =============================== */
  .eye-catch img,
  .article-thumbnail img{
    max-height: 80mm !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .eye-catch,
  .article-thumbnail{
    margin: 0 0 8mm 0 !important;
  }

  /* ===============================
     7) Anchor（戻るボタン等）
     =============================== */
  .entry-content .wbss a.wbss-anchor{
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* ===============================
     8) Scene（回想・場面転換）
     =============================== */
  .entry-content .wbss .wbss-scene{
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

}





/* =========================================
   999. LEGACY AREA – 編集禁止
   -----------------------------------------
   この領域は過去記事用スタイル
   原則として修正・追加・削除を行わない

   変更が必要な場合は
   ・WBSSへ昇格可能な根拠があること
   ・影響範囲が明確であること
   上記を満たした場合のみ検討する

   WBSSの新規スタイルは
   このブロックより上、または別ファイルに記述すること
========================================= */

/* ===============================
   🌿Kotonoha custom.css
        Cocoon子テーマ用
        作成: 2026-02-19
        =============================
      【履歴】
            ver01-00
                custom_ver01-00_20260219.css
                css でicon画像を表示させる。
            ver02-00
                custom_ver02-00_20260220.css
                印刷設計 07章追加
================================ */


/* ===============================
   01. Base Layout
================================ */
/* === Global Variables（Color / Icon / UI）=== */
:root{

  /* === Character Colors === */
  --sakura-color:  #F7A1C4;
  --sumire-color:  #B6A6E8;
  --hachi-color:   #6F8FAF;
  --friend-color:  #8FBFA8;
  --satoru-color:  #F2C76E;

  /* === Language Colors === */
  --jp-color:      #F2A65A;
  --en-color:      #5BA6E8;

  /* === Box Base === */
  --box-radius:    10px;
  --label-radius:  8px;
  --label-text:    #ffffff;
  --body-text:     #333333;

  /* === Vocabulary UI === */
  --kn-vocab-bg:   #fff3c8;
  --kn-vocab-line: #f0c24b;
  --kn-vocab-padY: .55em;
  --kn-vocab-radius: 12px;

  /* === Icon URLs === */
  --icon-sakura:  url("/wp-content/uploads/box-icon-sakura.jpeg");
  --icon-sumire:  url("/wp-content/uploads/box-icon-sumire.jpeg");
  --icon-hachi:   url("/wp-content/uploads/box-icon-hachi.png");
  --icon-friend:  url("/wp-content/uploads/box-icon-kasumi.jpeg");
  --icon-satoru:  url("/wp-content/uploads/box-icon-satoru.jpeg");

/* WBSS用（新規） */
/* === 【WBSS v1.0】icon  === */
  --wbss-icon-sakura-00: url("/wp-content/uploads/wbss-icons/wbss-icon-sakura-00.png");
  --wbss-icon-sakura-01: url("/wp-content/uploads/wbss-icons/wbss-icon-sakura-01.png");
  --wbss-icon-sakura-02: url("/wp-content/uploads/wbss-icons/wbss-icon-sakura-02.png");
  --wbss-icon-sakura-03: url("/wp-content/uploads/wbss-icons/wbss-icon-sakura-03.png");
  --wbss-icon-sakura-04: url("/wp-content/uploads/wbss-icons/wbss-icon-sakura-04.png");

  --wbss-icon-sumire-00: url("/wp-content/uploads/wbss-icons/wbss-icon-sumire-00.png");
  --wbss-icon-sumire-01: url("/wp-content/uploads/wbss-icons/wbss-icon-sumire-01.png");
  --wbss-icon-sumire-02: url("/wp-content/uploads/wbss-icons/wbss-icon-sumire-02.png");
  --wbss-icon-sumire-03: url("/wp-content/uploads/wbss-icons/wbss-icon-sumire-03.png");
  --wbss-icon-sumire-04: url("/wp-content/uploads/wbss-icons/wbss-icon-sumire-04.png");

  --wbss-icon-hachi-00:  url("/wp-content/uploads/wbss-icons/wbss-icon-hachi-00.png");
  --wbss-icon-hachi-01:  url("/wp-content/uploads/wbss-icons/wbss-icon-hachi-01.png");
  --wbss-icon-hachi-02:  url("/wp-content/uploads/wbss-icons/wbss-icon-hachi-02.png");
  --wbss-icon-hachi-03:  url("/wp-content/uploads/wbss-icons/wbss-icon-hachi-03.png");
  --wbss-icon-hachi-04:  url("/wp-content/uploads/wbss-icons/wbss-icon-hachi-04.png");

  --wbss-icon-friend-00: url("/wp-content/uploads/wbss-icons/wbss-icon-friend-00.png");
  --wbss-icon-friend-01: url("/wp-content/uploads/wbss-icons/wbss-icon-friend-01.png");
  --wbss-icon-friend-02: url("/wp-content/uploads/wbss-icons/wbss-icon-friend-02.png");
  --wbss-icon-friend-03: url("/wp-content/uploads/wbss-icons/wbss-icon-friend-03.png");
  --wbss-icon-friend-04: url("/wp-content/uploads/wbss-icons/wbss-icon-friend-04.png");

  --wbss-icon-satoru-00: url("/wp-content/uploads/wbss-icons/wbss-icon-satoru-00.png");
  --wbss-icon-satoru-01: url("/wp-content/uploads/wbss-icons/wbss-icon-satoru-01.png");
  --wbss-icon-satoru-02: url("/wp-content/uploads/wbss-icons/wbss-icon-satoru-02.png");
  --wbss-icon-satoru-03: url("/wp-content/uploads/wbss-icons/wbss-icon-satoru-03.png");
  --wbss-icon-satoru-04: url("/wp-content/uploads/wbss-icons/wbss-icon-satoru-04.png");


}


/* ===============================
   03. Table of Contents (TOC)
================================ */
/* 目次の「箱」本体（toc / ez-toc どちらでも効くように） */
.toc,
.ez-toc,
.ez-toc-container{
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  padding: 1em 1.2em;
  margin: 1.5em 0;
  overflow: hidden; /* 角丸を見た目通りにする */
}

/* タイトル */
.toc-title,
.ez-toc-title{
  font-weight: 700;
  font-size: 1.05em;
  margin-bottom: .6em;
  border-bottom: 2px solid #f7cfe4;
  display: inline-block;
  padding-bottom: .2em;
}

/* 番号を消して“素のリスト”に（まずは安全に） */
.toc ol,
.ez-toc-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* （任意）リスト行の余白を少しだけ整える：必要ならON */
.toc li,
.ez-toc-list li{
  margin: .45em 0;
}

/* ===== アイコン化をやりたい時の下準備（今はOFF推奨） ===== */
/*
.toc li,
.ez-toc-list li{
  position: relative;
  padding-left: 1.3em;
}

.toc li::before,
.ez-toc-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}
*/


/* ===============================
   04. Talk Boxes (normal)
================================ */

/* ===============================
   05. Talk Boxes (icon)
================================ */
/* ===== English block (stable vertical line) ===== */
/* 会話ボックス内だけに限定（事故防止） */
.entry-content .box-sakura .talk-en,
.entry-content .box-sumire .talk-en,
.entry-content .box-hachi  .talk-en,
.entry-content .box-friend .talk-en,
.entry-content .box-satoru .talk-en{
  margin-left: 1.2em;
  padding-left: 0.8em;
  border-left: 4px solid rgba(247,161,196,.6);
}

/* ===== Talk Icon（背景画像で出す）===== */
.entry-content .box-sakura .talk-icon{
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: block;
  border-radius: 50%;
  background-image: var(--icon-sakura);
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
  margin-top: 6px;
}

.entry-content .box-sumire .talk-icon{
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: block;
  border-radius: 50%;
  background-image: var(--icon-sumire);
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
  margin-top: 6px;
}

.entry-content .box-hachi .talk-icon{
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: block;
  border-radius: 50%;
  background-image: var(--icon-hachi);
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
  margin-top: 6px;
}

.entry-content .box-friend .talk-icon{
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: block;
  border-radius: 50%;
  background-image: var(--icon-friend);
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
  margin-top: 6px;
}

.entry-content .box-satoru .talk-icon{
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: block;
  border-radius: 50%;
  background-image: var(--icon-satoru);
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
  margin-top: 6px;
}


/* ===============================
   06. Vocabulary
================================ */



/* ===============================
   07. Print (Kotonoha) - stable headings
   方針：印刷は「帯」方式。テープ疑似要素は印刷では使わない
================================ */
@media print{

  /* iOSでは効かないこともあるが、明示として置くのはOK */
  @page{  size: A4 landscape; }


  /* 印刷で背景色を落とされにくくする（効く環境では効く） */
  *{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 作品全体の安全域（タイトル＋アイキャッチ＋本文まとめて） */
  .article,
  .entry,
  .single .content-in,
  .main-inner{
    padding: 10mm 10mm 16mm 10mm !important; /* 上 右 下 左 */
    box-sizing: border-box !important;
  }

  /* 0) 改ページ */
  .kn-pagebreak{
    break-before: page !important;
    page-break-before: always !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 1) 記事タイトル：濃いめ帯 + 白文字 + 折り返し */
  .entry-title{
    /* background: #d84d87 !important;
    color: #fff !important; */
    background: #a892e8 !important;  /* 明るめすみれ */
    color: #ffffff !important;
    padding: 6mm 8mm !important;
    border-radius: 4mm !important;
    line-height: 1.25 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }


/* 2) h2：薄め帯で区切り（“テープ”は印刷では使わない） */
.entry-content h2{
  background: #f6c1d1 !important;
  color: #3b2b3b !important;
  padding: 5mm 7mm !important;
  border-radius: 4mm !important;
  line-height: 1.25 !important;

  /* ページの頭で見出しが変になりにくい保険 */
  break-inside: avoid !important;
  page-break-inside: avoid !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

  /* 印刷ではテープ（疑似要素）は出さない：残骸対策 */
  .entry-content h2::before,
  .entry-content h2::after{
    content: none !important;
    display: none !important;
  }

  /* 会話ボックス */
  /* 会話ボックス：ページ境界でラベルだけ残らないようにする */
  .entry-content .box-sakura,
  .entry-content .box-sumire,
  .entry-content .box-hachi,
  .entry-content .box-friend,
  .entry-content .box-satoru{
    position: relative !important;
    box-sizing: border-box !important;

    /* ラベルの“居場所”を箱の内側に作る（ここ重要） */
    padding-top: 12mm !important;

    /* なるべく分割させない */
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* ラベル（疑似要素）を“箱の中”に固定する */
  .entry-content .box-sakura::before,
  .entry-content .box-sumire::before,
  .entry-content .box-hachi::before,
  .entry-content .box-friend::before,
  .entry-content .box-satoru::before{
    top: 3mm !important;     /* マイナス値を殺して内側へ */
    left: 6mm !important;
    transform: none !important;
  }


  /* タイトルの直下にアイキャッチを安定配置 */
  /* タイトル→アイキャッチ一式をまとめて割られにくくする */
  .entry-header,
  .article-header{
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* タイトルの下に少し隙間 */
  .entry-title{
    margin: 0 0 6mm 0 !important;
  }

  /* アイキャッチを少し小さく（“二回り小さく”の第一候補） */
.eye-catch img,
.article-thumbnail img{
  max-height: 80mm !important;   /* ← 上限だけ固定 */
  width: 100% !important;        /* 横はページ基準 */
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}


  /* アイキャッチの下にも少し隙間 */
  .eye-catch,
  .article-thumbnail{
    margin: 0 0 8mm 0 !important;
  }

/*
  .article,
  .entry,
  .single .content-in,
  .main-inner{
    background: #ffffff !important;
  }
*/

  /* 画面用の中央寄せ枠を印刷では解除 */
  #container,
  #content,
  #content-in,
  #main,
  .container,
  .wrap,
  .site,
  .site-inner,
  .main,
  .main-inner,
  .content,
  .content-in{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .entry-content details.glossary-acd{
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .entry-content details.glossary-acd > summary::after{
    content: "" !important; /* 印刷では＋/－を消す */
  }
  .entry-content details.glossary-acd{
    /* 可能な環境では開いた見た目に寄せる */
  }
  .entry-content details.glossary-acd > *:not(summary){
    display: block !important;
  }


}


/* ===============================
   08. Glossary Terms (Accordion)
================================ */

/* ラッパー */
.entry-content details.glossary-acd{
  margin: 14px 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,.06);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
}

/* 見出し（単語） */
.entry-content details.glossary-acd > summary{
  list-style: none;
  cursor: pointer;

  padding: 12px 14px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .2px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: linear-gradient(90deg, rgba(182,166,232,.22), rgba(247,161,196,.18));
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Safari用：summaryのmarker消し */
.entry-content details.glossary-acd > summary::-webkit-details-marker{
  display: none;
}

/* 左タグ（固定の雰囲気） */
.entry-content details.glossary-acd > summary::before{
  content: "ニュアンス";
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-right: 10px;
  background: rgba(111,143,175,.16); /* hachi系の薄色 */
  color: rgba(0,0,0,.65);
}

/* 右の開閉記号（＋／－） */
.entry-content details.glossary-acd > summary::after{
  content: "＋";
  font-size: 18px;
  font-weight: 900;
  opacity: .75;
}

.entry-content details.glossary-acd[open] > summary::after{
  content: "－";
}

/* 中身の余白 */
.entry-content details.glossary-acd > *:not(summary){
  padding: 12px 14px 6px;
}

/* summary押した時の青枠が派手なら整える */
.entry-content details.glossary-acd > summary:focus{
  outline: none;
}
.entry-content details.glossary-acd > summary:focus-visible{
  outline: 2px solid rgba(182,166,232,.55);
  outline-offset: -2px;
}

/* （任意）中のbox類の上下だけ少し締める：見た目がまとまる */
.entry-content details.glossary-acd .box-friend,
.entry-content details.glossary-acd .box-hachi,
.entry-content details.glossary-acd .box-sakura,
.entry-content details.glossary-acd .box-sumire,
.entry-content details.glossary-acd .box-jp,
.entry-content details.glossary-acd .box-en{
  margin: .9em 0;
}



/* ===============================
   90. LEGACY – 過去記事用（触らない）
================================ */

/* =========================
  2026-02-10 EXP: 付箋ボタン
========================= */

a.fusen-btn{
  display: inline-block;
  padding: 0.7em 1.4em;
  margin: 0.5em 0;
  font-weight: 600;
  color: #555;
  text-decoration: none;

  border-radius: 12px 12px 10px 10px; /* わずかに歪ませる */
  background: #fff3c4; /* デフォルト：付箋イエロー */

  box-shadow:
    0 2px 4px rgba(0,0,0,0.12),
    0 6px 0 rgba(0,0,0,0.04); /* 下に影 */

  transition: transform .2s ease, box-shadow .2s ease;
}

a.fusen-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 3px 6px rgba(0,0,0,0.16),
    0 7px 0 rgba(0,0,0,0.05);
}

/* 色バリエーション */
a.fusen-blue{
  background: #eaf3ff; /* 学習・入口 */
}

a.fusen-pink{
  background: #ffeaf2; /* 物語・ブログ */
}



/**2020.10.11************************/
/******************************
  Kotonoha English Archive v3
  行の高さを1か所で調整できる版
******************************/
.koto-arc{
  /* ←ここだけ変えればOK（例: 48px / 52px / 58px / 64px）*/
  --row-h: 58px;

  --pad-y: 8px;          /* 上下の余白 */
  --pad-x: 12px;         /* 左右の余白 */
  --badge: 1.6em;        /* 丸番号の直径 */
}

/* リスト本体 */
.koto-arc ul{list-style:none;margin:0;padding:0;counter-reset:koto;}

/* 1行 */
.koto-arc li{
  counter-increment:koto;
  display:flex; align-items:center;
  min-height: var(--row-h);
  padding: var(--pad-y) var(--pad-x);
  border-radius: 8px;
  margin: 6px 0;
  white-space: nowrap;            /* 折り返しなし */
  overflow-x: auto;               /* はみ出したら横スクロール */
  -webkit-overflow-scrolling: touch;
  font-size: .95rem;
  line-height: 1.4;
}

/* 交互色 */
.koto-arc li:nth-child(odd){  background:#f5faff; }
.koto-arc li:nth-child(even){ background:#fff6fa; }

/* 丸番号バッジ */
.koto-arc li::before{
  content: counter(koto);
  display:inline-flex; align-items:center; justify-content:center;
  width: var(--badge); height: var(--badge);
  margin-right: .55em;
  border-radius: 999px;
  background:#eaf3ff; color:#336699;
  font-weight: 600; font-size: .85rem;
  flex: 0 0 var(--badge);
  font-family: "Noto Sans JP", system-ui, sans-serif;
}

/* タイトルリンク（右端ゆとり＋省略記号） */
.koto-arc a{
  display:inline-block; flex:1;
  color:#333; text-decoration:none;
  line-height:1.4;
  padding-right: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.koto-arc a:hover{
  background:#eef6ff; border-radius:6px; transition: background .2s;
}

/* すごく狭い画面では少しだけ詰める（任意） */
@media (max-width: 360px){
  .koto-arc{ --row-h: 52px; --pad-y: 6px; --pad-x: 10px; --badge: 1.5em; }
}

/* --- 横スクロール有効化（省略表示→スクロール表示に切替） --- */

.koto-arc li{ overflow-x:auto; -webkit-overflow-scrolling:touch; touch-action: pan-x; }

.koto-arc a{
  display:inline-block;           /* 中身に合わせて幅を持つ */
  min-width:max-content;          /* 省略せず横に伸ばす */
  white-space:nowrap;             /* 改行しない */
  overflow:visible; text-overflow:clip; /* 省略しない */
}


/* TEST: 右端にほんの気配（フェードだけ） */
.koto-arc li{
  position: relative;
}

.koto-arc li::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:18px; height:100%;
  pointer-events:none;
  background: linear-gradient(to right,
    rgba(255,255,255,0),
    rgba(255,255,255,.45)
  );
}


/* =========================
 * 2026.01.12 追加
 * Kotonoha Project：会話＆セッション用ボックス
   - ラベル：🌸さくら / 🌷すみれ / 🐾ハチ / 🚺友達 / 🇯🇵日本語 / 🇺🇸英語
   ========================================= */

/* 2) 共通ボックス（土台） */
.entry-content .k-box{
  position: relative;
  margin: 1.2em 0;
  padding: 1.05em 1.0em 1.0em;
  border-radius: var(--box-radius);
  color: var(--body-text);
  background: #fff;
  border: 2px solid #ddd;
  line-height: 1.75;
}

/* ラベル共通（左上のタグ） */
.entry-content .k-box::before{
  position: absolute;
  top: -0.85em;
  left: 0.85em;
  padding: 0.25em 0.7em;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--label-text);
  border-radius: var(--label-radius);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ほんのり影（任意。不要なら消してOK） */
.entry-content .k-box{
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* 3) 🌸さくら */
.entry-content .box-sakura{ 
  border-color: var(--sakura-color);
}

/* 4) 🌷すみれ */
.entry-content .box-sumire{ 
  border-color: var(--sumire-color);
}

/* 5) 🐾ハチ */
.entry-content .box-hachi{ 
  border-color: var(--hachi-color);
  border-style: dashed;
}


/* 6) 🚺友達 */
.entry-content .box-friend{ 
  border-color: var(--friend-color);
}

/* 7) 🇯🇵日本語（セクション） */
.entry-content .box-jp{
  border: 2px solid rgba(242,166,90,0.55);
  background: rgba(242,166,90,0.10);
}

/* 8) 🇺🇸英語（セクション） */
.entry-content .box-en{
  border: 2px solid rgba(91,166,232,0.55);
  background: rgba(91,166,232,0.10);
}

/* 9) 使いやすい“短縮”：k-boxを各クラスに自動適用 */
.entry-content .box-sakura,
.entry-content .box-sumire,
.entry-content .box-hachi,
.entry-content .box-friend,
.entry-content .box-jp,
.entry-content .box-en{
  position: relative;
  margin: 1.2em 0;
  padding: 1.05em 1.0em 1.0em;
  border-radius: var(--box-radius);
  color: var(--body-text);
  line-height: 1.75;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* 10) ラベル共通（短縮クラス側にも適用） */
.entry-content .box-sakura::before,
.entry-content .box-sumire::before,
.entry-content .box-hachi::before,
.entry-content .box-friend::before,
.entry-content .box-jp::before,
.entry-content .box-en::before{
  position: absolute;
  top: -0.85em;
  left: 0.85em;
  padding: 0.25em 0.7em;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--label-text);
  border-radius: var(--label-radius);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 11) スマホ微調整（ラベルが窮屈なら） */
@media (max-width: 480px){
  .entry-content .box-sakura::before,
  .entry-content .box-sumire::before,
  .entry-content .box-hachi::before,
  .entry-content .box-friend::before,
  .entry-content .box-jp::before,
  .entry-content .box-en::before{
    left: 0.7em;
    font-size: 0.82em;
  }
}

/* ===== JP/EN：ラベル（これだけ残す）===== */
.entry-content .box-sakura::before,
.entry-content .box-sumire::before,
.entry-content .box-hachi::before,
.entry-content .box-friend::before,
.entry-content .box-jp::before,
.entry-content .box-en::before{
  content: attr(data-label) !important;
  color: var(--label-text) !important;
}

.entry-content .box-sakura::before{
  background: var(--sakura-color) !important;
}
.entry-content .box-sumire::before{
  background: var(--sumire-color) !important;
}
.entry-content .box-hachi::before{
  background: var(--hachi-color) !important;
}
.entry-content .box-friend::before{
  background: var(--friend-color) !important;
}
.entry-content .box-jp::before{
  background: var(--jp-color) !important;
}
.entry-content .box-en::before{
  background: var(--en-color) !important;
}


/* 2026.01.15 英語枠　*/
/* ===== English support (final minimal) ===== */
/* 英語ブロック：縦線を疑似要素で伸ばす */
/* ===== English block (stable vertical line) ===== */
.en{
  margin-left: 1.2em;
  padding-left: 0.8em;
  border-left: 4px solid rgba(247,161,196,.6);
}

/* ========================================= */



/* 2026.01.12 バックナンバーリンク　*/
/* Back numbers ボタンを目立たせる */
.entry-content a.backnumbers-link{
  display: inline-flex;
  align-items: center;
  gap: .5em;

  margin-top: .8em;
  padding: .8em 1.05em;

  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;

  color: #3a3a3a;
  background: linear-gradient(90deg, rgba(247,161,196,.40), rgba(182,166,232,.40));
  border: 1px solid rgba(182,166,232,.55);
  border-radius: 999px;

  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* ホバー・タップで「押せる感」 */
.entry-content a.backnumbers-link:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 32px rgba(0,0,0,.14);
}
.entry-content a.backnumbers-link:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

/* キーボード操作でも見失わない */
.entry-content a.backnumbers-link:focus-visible{
  outline: 2px solid rgba(247,161,196,.85);
  outline-offset: 3px;
}


/******************************
 * 新着記事リスト」「エントリーリスト」
 ******************************/
/* 共通カードデザイン */
.new-entry-list li,
.widget-entry-cards li {
  border-radius: 16px;
  padding: 1em;
  margin: 1em 0;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: transform .2s, box-shadow .2s;
}

/* ホバーでふわっと */
.new-entry-list li:hover,
.widget-entry-cards li:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.1);
}

/* サムネを丸角に */
.new-entry-list img,
.widget-entry-cards img {
  border-radius: 10px;
  width: 96px;
  height: auto;
}

/* 英語学習カテゴリ → 白〜パステルブルー */
.category-english-learning .new-entry-list li,
.category-english-learning .widget-entry-cards li {
  background: linear-gradient(135deg, #ffffff, #eaf5ff);
}

/* トレードカテゴリ → 白〜パステルピンク */
.category-trading .new-entry-list li,
.category-trading .widget-entry-cards li {
  background: linear-gradient(135deg, #ffffff, #ffeaf2);
}






/******************************
 * 調整つまみ？
 ******************************/
/* ===== 本体 ===== */
.kn-vocab{ margin:1.2em 0 2em; }
.kn-vocab dt{
  display:flex; align-items:center; gap:.6em;
  background:var(--kn-vocab-bg);
  border-left:6px solid var(--kn-vocab-line);
  padding:var(--kn-vocab-padY) .9em;
  margin:1.1em 0 .45em;
  border-radius:var(--kn-vocab-radius);
  font-weight:700;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
}
.kn-vocab dt .en{ font-size:1.05em; }
.kn-vocab dt .tag{
  font-size:.78em; line-height:1;
  color:#6b6b6b; background:#fff; border:1px solid #e5e5e5;
  padding:.25em .5em; border-radius:999px;
}
.kn-vocab dd{
  margin:0 0 .9em 0; background:#fff; border:1px solid #eee;
  border-radius:10px; padding:.75em .9em;
}
.kn-vocab dd p{ margin:.2em 0; }
.kn-vocab .note{ color:#666; font-size:.95em; }

/* ミニ音声（入れる時用） */
.kn-audio-mini audio{ width:140px; height:28px; display:inline-block; vertical-align:middle; }

/******************************
 * Kotonoha Vocabulary – Simple
 ******************************/
/* ===== Vocabulary: inline-blockで安定配置 ===== */
.entry-content .kn-vocab{
  margin: 1.2em 0;
}

/* 英単語（行頭ドット付き） */
.entry-content .kn-vocab .en{
  display:inline-block;              /* ← ココがポイント */
  font-weight:700;
  color:#333;
  position:relative;
  padding-left:1.1em;                /* ドット分の余白 */
  margin-top:1.0em;                  /* セットの上余白 */
  vertical-align:middle;
}
.entry-content .kn-vocab .en:first-of-type{ margin-top:.4em; }
.entry-content .kn-vocab .en::before{
  content:"";
  position:absolute; left:0; top:.45em;
  width:.5em; height:.5em; border-radius:50%;
  background:#ff9ebe;
}

/* タグ（英単語の右にぴったり） */
.entry-content .kn-vocab .en + .tag{
  display:inline-block;              /* ← 英単語の右に横並び */
  margin-left:.6em;
  font-size:.85em; color:#444;
  background:#fff; border:1px solid #ddd;
  padding:.18em .55em; border-radius:6px;
  vertical-align:middle;
  white-space:nowrap;
}

/* 日本語説明は段落として下にブロック表示 */
.entry-content .kn-vocab .ja{
  display:block;                     /* ← 改行して下に */
  margin:.35em 0 1.0em;
  padding:.7em .9em;
  background:#fff; border:1px solid #eee;
  border-radius:6px; line-height:1.7;
}

/* 念のため折り返し許可 */
.entry-content .kn-vocab .en,
.entry-content .kn-vocab .ja{ overflow-wrap:anywhere; }




/* どこに置いても同じ大きさ＆余白にする共通ラッパー */
.kn-inline-audio { display:inline-block; vertical-align:middle; }
.kn-inline-audio audio{
  width:240px;            /* 横幅を統一 */
  height:28px;            /* 高さを統一（iOSは目安） */
  display:inline-block;
  vertical-align:middle;
  margin-left:.4em;       /* 文章や吹き出しとの間隔 */
}

/* iOS/Safariで大きく見える対策：全体を少し縮小 */
@supports (-webkit-touch-callout: none) {
  .kn-inline-audio audio{
    transform: scale(.86);          /* 見た目を一段小さく */
    transform-origin: left center;  /* 左基準で縮小 */
    width: 280px;                   /* 縮小ぶんの補正 */
    height: 32px;
  }
}




/* 記事本文の音声まわりの余白と揃えだけ整える（サイズは触らない） */
.entry-content .wp-audio-shortcode,
.entry-content .wp-block-audio,
.entry-content audio,
.entry-content .sc_player_container {
  display: inline-block;
  vertical-align: middle;
  margin: .4em 0 .2em .2em;  /* 文章・吹き出しとの間隔を統一 */
}

/* 吹き出し直下に置いたときだけ少し余白を増やしたい場合 */
.entry-content .speech-balloon + .wp-audio-shortcode,
.entry-content .speech-balloon + .wp-block-audio,
.entry-content .speech-balloon + .sc_player_container {
  margin-top: .6em;
}


/**2020.10.11************************/
/******************************
  Kotonoha English Archive v3
  行の高さを1か所で調整できる版
******************************/
.koto-arc{
  /* ←ここだけ変えればOK（例: 48px / 52px / 58px / 64px）*/
  --row-h: 58px;

  --pad-y: 8px;          /* 上下の余白 */
  --pad-x: 12px;         /* 左右の余白 */
  --badge: 1.6em;        /* 丸番号の直径 */
}

/* リスト本体 */
.koto-arc ul{list-style:none;margin:0;padding:0;counter-reset:koto;}

/* 1行 */
.koto-arc li{
  counter-increment:koto;
  display:flex; align-items:center;
  min-height: var(--row-h);
  padding: var(--pad-y) var(--pad-x);
  border-radius: 8px;
  margin: 6px 0;
  white-space: nowrap;            /* 折り返しなし */
  overflow-x: auto;               /* はみ出したら横スクロール */
  -webkit-overflow-scrolling: touch;
  font-size: .95rem;
  line-height: 1.4;
}

/* 交互色 */
.koto-arc li:nth-child(odd){  background:#f5faff; }
.koto-arc li:nth-child(even){ background:#fff6fa; }

/* 丸番号バッジ */
.koto-arc li::before{
  content: counter(koto);
  display:inline-flex; align-items:center; justify-content:center;
  width: var(--badge); height: var(--badge);
  margin-right: .55em;
  border-radius: 999px;
  background:#eaf3ff; color:#336699;
  font-weight: 600; font-size: .85rem;
  flex: 0 0 var(--badge);
  font-family: "Noto Sans JP", system-ui, sans-serif;
}

/* タイトルリンク（右端ゆとり＋省略記号） */
.koto-arc a{
  display:inline-block; flex:1;
  color:#333; text-decoration:none;
  line-height:1.4;
  padding-right: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.koto-arc a:hover{
  background:#eef6ff; border-radius:6px; transition: background .2s;
}

/* すごく狭い画面では少しだけ詰める（任意） */
@media (max-width: 360px){
  .koto-arc{ --row-h: 52px; --pad-y: 6px; --pad-x: 10px; --badge: 1.5em; }
}

/* --- 横スクロール有効化（省略表示→スクロール表示に切替） --- */

.koto-arc li{ overflow-x:auto; -webkit-overflow-scrolling:touch; touch-action: pan-x; }

.koto-arc a{
  display:inline-block;           /* 中身に合わせて幅を持つ */
  min-width:max-content;          /* 省略せず横に伸ばす */
  white-space:nowrap;             /* 改行しない */
  overflow:visible; text-overflow:clip; /* 省略しない */
}


/* TEST: 右端にほんの気配（フェードだけ） */
.koto-arc li{
  position: relative;
}

.koto-arc li::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:18px; height:100%;
  pointer-events:none;
  background: linear-gradient(to right,
    rgba(255,255,255,0),
    rgba(255,255,255,.45)
  );
}


/* =========================
   Kotonoha Talk Box (icon + body)
   for .box-sakura / .box-sumire
========================= */

/* 共通：会話ボックス内を横並び */
.entry-content .box-sakura,
.entry-content .box-sumire{
  display:flex;
  align-items:flex-start;
  gap:18px;               /* アイコンと本文の距離 */
  padding-top:1.6em;      /* ラベル下の呼吸 */
}

/* アイコン枠 */
.entry-content .box-sakura .talk-icon,
.entry-content .box-sumire .talk-icon{
  flex:0 0 52px;
  margin-top:6px;         /* 見た目の縦中央寄せ */
}

.entry-content .box-sakura .talk-icon img,
.entry-content .box-sumire .talk-icon img{
  width:52px;
  height:52px;
  display:block;
  border-radius:50%;      /* 丸アイコン */
  object-fit:cover;
  object-position:50% 50%;
}

/* 本文側 */
.entry-content .box-sakura .talk-body,
.entry-content .box-sumire .talk-body{
  flex:1;
  min-width:0;
}

/* 日本語→英語の間隔（.en がある前提） */
.entry-content .box-sakura .en,
.entry-content .box-sumire .en{
  margin-top:.6em;
}

/* さくらだけ：上が切れにくい位置に */
.entry-content .box-sakura .talk-icon img{
  object-position:50% 20%;
}

/* スマホ調整 */
@media (max-width:480px){
  .entry-content .box-sakura,
  .entry-content .box-sumire{
    gap:14px;
    padding-top:1.8em;
  }

  .entry-content .box-sakura .talk-icon,
  .entry-content .box-sumire .talk-icon{
    flex-basis:52px;
    margin-top:10px;
  }
}

/* === 会話ブロック：ハチ（アイコン付き） === */
.entry-content .box-hachi{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-top: 1.6em;
}

/* アイコン */
.entry-content .box-hachi .talk-icon{
  flex: 0 0 48px;
  margin-top: 6px;
}

.entry-content .box-hachi .talk-icon img{
  width: 48px;
  height: 48px;
  border-radius: 40%;      /* 少しだけ丸い＝人じゃない感じ */
  object-fit: cover;
}

/* 本文 */
.entry-content .box-hachi .talk-body{
  flex: 1;
}

/* スマホ */
@media (max-width: 480px){
  .entry-content .box-hachi{
    gap: 14px;
    padding-top: 1.8em;
  }

  .entry-content .box-hachi .talk-icon{
    margin-top: 10px;
  }
}

/* === 会話ブロック：友達A（アイコン付き） === */
.entry-content .box-friend{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-top: 1.5em;
}

/* アイコン */
.entry-content .box-friend .talk-icon{
  flex: 0 0 50px;
  margin-top: 6px;
}

.entry-content .box-friend .talk-icon img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(.9);   /* 主役より少し控えめ */
}

/* 本文 */
.entry-content .box-friend .talk-body{
  flex: 1;
}

/* スマホ */
@media (max-width: 480px){
  .entry-content .box-friend{
    gap: 14px;
    padding-top: 1.7em;
  }

  .entry-content .box-friend .talk-icon{
    margin-top: 10px;
  }
}

/* 友達（かすみ）だけ：上が切れにくい位置に */
.entry-content .box-friend .talk-icon img{
  object-position: 50% 5%; /* 0%が最上。20%くらいがちょうど良いこと多い */
}



/* =========================
   Kotonoha Talk Box：さとる（新規）
   - 既存 .box-jp は触らない
========================= */

/* 枠の基本（box-jpの設計とは別物として作る） */
.entry-content .box-satoru{
  position: relative;
  margin: 1.2em 0;
  padding: 1.05em 1.0em 1.0em;
  border-radius: var(--box-radius);
  color: var(--body-text);
  line-height: 1.75;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);

  border: 2px solid rgba(242,199,110,0.65);
  background: rgba(242,199,110,0.10);

  display:flex;
  align-items:flex-start;
  gap:18px;
  padding-top:1.6em; /* ラベル下の呼吸 */
}

/* ラベル */
.entry-content .box-satoru::before{
  content: attr(data-label) !important;
  position: absolute;
  top: -0.85em;
  left: 0.85em;
  padding: 0.25em 0.7em;
  font-size: 0.85em;
  font-weight: 700;
  color: #fff;
  border-radius: var(--label-radius);
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--satoru-color);
}

/* アイコン */
.entry-content .box-satoru .talk-icon{
  flex:0 0 52px;
  margin-top:6px;
}
.entry-content .box-satoru .talk-icon img{
  width:52px;
  height:52px;
  display:block;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 15%;
}

/* 本文 */
.entry-content .box-satoru .talk-body{
  flex:1;
  min-width:0;
}

/* 英語ブロックの縦余白 */
.entry-content .box-satoru .en{
  margin-top:.6em;
}

/* スマホ微調整 */
@media (max-width:480px){
  .entry-content .box-satoru{
    gap:14px;
    padding-top:1.8em;
  }
  .entry-content .box-satoru .talk-icon{
    margin-top:10px;
  }
}


/* ======== Testは、これ以降に ========== */