/* ================================================================== */
/* kaname_resources.css — 「無料で使える お金のリソース集」専用層      */
/*   ・base.html の上質ポップ（.kt-pop）＋引き込む（.kt-lively）の上に重ねる装飾。 */
/*   ・配色トークンは kaname_pop.css の --ktp-* を再利用（両編集しない）。      */
/*   ・印刷／スクショして使える実用シート。@media print で綺麗に出す。           */
/*   ・すべて .kt-resources スコープ内のみ。他ルートには無干渉。                  */
/* ================================================================== */

/* 【2026-07-25・全ページ幅統一】道具箱も全ページ共通の本文列幅に揃える。共通の --kt-app-w に従い、
   フォールバックは通常ページの基底(.kt-inner=480px)に合わせる＝全帯で一致
   （≤767px:480 / 768-1023px:600 / ≥1024px:960）。スマホ(≤480px)は480pxがビューポート幅に収まり
   実質全幅になる（印刷時のみ @media print の max-width:100% で余白ゼロ化＝別用途）。 */
.kt-pop.kt-resources .kt-inner { max-width: var(--kt-app-w, 480px); }

/* ───────── ヘッダー ───────── */
.kt-resources .kt-res-head {
  text-align: center;
  margin: 8px 0 26px;
}
.kt-resources .kt-res-head .kt-hero { margin: 10px 0 14px; }
.kt-resources .kt-res-head .kt-lead { margin: 0 auto 14px; max-width: 30em; }
.kt-resources .kt-res-note {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ktp-ink-soft);
  background: var(--kt-bg-soft);
  border-radius: 16px;
  padding: 11px 16px;
  margin: 14px auto 0;
  max-width: 30em;
}

/* 使い方ツールバー（印刷ボタン＋ヒント）。 */
.kt-resources .kt-res-toolbar {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.kt-resources .kt-res-print { font-size: 15px; padding: 13px 28px; }
.kt-resources .kt-res-toolbar-hint {
  font-size: 12px;
  color: var(--ktp-ink-soft);
  margin: 0;
}

/* ───────── グリッド ───────── */
.kt-resources .kt-res-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 4px 0 8px;
}

/* ───────── リソースカード（チャンキー・色付き影・左に色帯） ───────── */
.kt-resources .kt-res-card {
  position: relative;
  background: #FFFFFF;
  border: 2px solid var(--kt-line);
  border-radius: 26px;
  padding: 22px 22px 20px;
  box-shadow: 0 14px 34px rgba(43,108,246,.10);
  overflow: hidden;
}
/* カード上辺の色帯（カードごとに色がめぐる＝楽しい）。 */
.kt-resources .kt-res-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  background: var(--ktp-indigo);
}
.kt-resources .kt-res-card--coral::before  { background: var(--ktp-coral); }
.kt-resources .kt-res-card--coral  { border-color: #FFD8CC; }
.kt-resources .kt-res-card--indigo::before { background: var(--ktp-indigo); }
.kt-resources .kt-res-card--indigo { border-color: #BBD2FF; }
.kt-resources .kt-res-card--mint::before   { background: var(--ktp-mint); }
.kt-resources .kt-res-card--mint   { border-color: #A8ECE0; }
.kt-resources .kt-res-card--sun::before    { background: var(--ktp-sun); }
.kt-resources .kt-res-card--sun    { border-color: #FFE39A; }
.kt-resources .kt-res-card--pink::before   { background: var(--ktp-pink); }
.kt-resources .kt-res-card--pink   { border-color: #FFC7E2; }

/* カード見出し（丸シール＋タイトル）。 */
.kt-resources .kt-res-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.kt-resources .kt-res-card-head .kt-seal { flex: 0 0 auto; }
.kt-resources .kt-res-card-kicker {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--kt-kicker);
  margin: 0 0 2px;
}
.kt-resources .kt-res-card-title {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.35;
  color: var(--ktp-ink);
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.kt-resources .kt-res-card-oneliner {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ktp-ink-soft);
  margin: 2px 0 0;
  opacity: .82;
}
.kt-resources .kt-res-card-lead {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ktp-ink-soft);
  margin: 0 0 16px;
}
.kt-resources .kt-res-card-foot {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ktp-ink-soft);
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1.5px dashed var(--kt-line);
}

/* ---- 【絶対に迷わない・2026-07-10オーナー指示】シート・アコーディオン化 ---------- */
/* 8枚のシート全展開で1画面目が10画面分になっていたため既定折り畳みへ（道具箱
   kaname_calc.html Wave3と同じ確立済みパターン）。既存 .kt-res-card の見た目（背景/
   枠線/角丸/影/色帯）・.kt-res-card-head の配置は無変更。<article>→<details>化で生まれる
   summary の既定マーカーだけを消し、開閉chevronを足す。 */
.kt-resources details.kt-res-card > summary.kt-res-card-head {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.kt-resources details.kt-res-card > summary.kt-res-card-head::-webkit-details-marker { display: none; }
.kt-resources details.kt-res-card > summary.kt-res-card-head::marker { content: ""; }
.kt-resources .kt-res-chev {
  position: absolute;
  top: 2px;
  right: 0;
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  color: var(--ktp-ink-soft);
}
.kt-resources details.kt-res-card[open] > summary.kt-res-card-head .kt-res-chev { transform: rotate(180deg); }
.kt-resources .kt-res-card-body { margin-top: 2px; }

/* ───────── チェックリスト（大きめチェックボックス・押しやすい） ───────── */
.kt-resources .kt-res-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kt-resources .kt-res-checklist li { margin: 0; }
.kt-resources .kt-res-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--kt-bg-soft);
  border: 1.5px solid var(--kt-line);
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .18s var(--ktp-ease), background .18s var(--ktp-ease), transform .12s var(--ktp-ease);
}
.kt-resources .kt-res-checklist label:hover {
  border-color: var(--ktp-indigo);
  background: var(--ktp-indigo-bg);
}
.kt-resources .kt-res-checklist label:active { transform: scale(.99); }
.kt-resources .kt-res-checklist input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  border: 2.5px solid var(--ktp-indigo);
  border-radius: 8px;
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
  transition: background .18s var(--ktp-ease), border-color .18s var(--ktp-ease), transform .18s var(--ktp-bounce-s);
}
.kt-resources .kt-res-checklist input[type="checkbox"]:checked {
  background: var(--ktp-mint);
  border-color: var(--ktp-mint);
  transform: scale(1.05);
}
.kt-resources .kt-res-checklist input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px; top: 2px;
  width: 6px; height: 12px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  transform: rotate(42deg);
}
.kt-resources .kt-res-checklist input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--ktp-sun);
  outline-offset: 2px;
}
.kt-resources .kt-res-checklist span {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ktp-ink);
}
.kt-resources .kt-res-checklist input:checked + span {
  color: var(--ktp-ink-soft);
}

/* ───────── 手順（番号つきステップ） ───────── */
.kt-resources .kt-res-steps {
  list-style: none;
  counter-reset: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kt-resources .kt-res-steps li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.kt-resources .kt-res-step-no {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 15px;
  color: #FFFFFF;
  background: var(--ktp-mint);
  box-shadow: 0 4px 12px rgba(24,199,174,.34);
}
.kt-resources .kt-res-step-body {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ktp-ink);
  padding-top: 3px;
}
.kt-resources .kt-res-step-body strong { color: var(--ktp-ink); font-weight: 800; }

/* ───────── 書き込み欄（記入シート） ───────── */
.kt-resources .kt-res-fill {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kt-resources .kt-res-fill-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.kt-resources .kt-res-fill-row--col { flex-direction: column; gap: 7px; }
.kt-resources .kt-res-fill-label {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ktp-ink);
  background: var(--kt-bg-soft);
  border-radius: 14px;
  padding: 10px 14px;
}
.kt-resources .kt-res-fill-label small { font-weight: 500; font-size: 11.5px; color: var(--ktp-ink-soft); }
.kt-resources .kt-res-fill-label--coral { background: var(--ktp-coral-bg); }
.kt-resources .kt-res-fill-label--sun   { background: var(--ktp-sun-bg); }
.kt-resources .kt-res-fill-label--mint  { background: var(--ktp-mint-bg); }

/* 記入できる枠（contenteditable）。罫線で“書ける感”。 */
.kt-resources .kt-res-fill-input,
.kt-resources .kt-res-fill-area,
.kt-resources .kt-res-inline-input {
  border: 2px dashed #C7D3E6;
  border-radius: 12px;
  background: #FCFDFF;
  color: var(--ktp-ink);
  font-size: 15px;
  line-height: 1.6;
  transition: border-color .18s var(--ktp-ease), background .18s var(--ktp-ease);
}
.kt-resources .kt-res-fill-input {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 14px;
}
.kt-resources .kt-res-fill-area {
  display: block;
  min-height: 64px;
  padding: 10px 14px;
}
.kt-resources .kt-res-inline-input {
  display: inline-block;
  min-width: 120px;
  padding: 3px 10px;
  margin: 4px 0;
  vertical-align: middle;
}
.kt-resources .kt-res-inline-input--wide { min-width: 60%; display: inline-block; }
.kt-resources [contenteditable]:focus {
  outline: none;
  border-color: var(--ktp-indigo);
  border-style: solid;
  background: var(--ktp-indigo-bg);
}
.kt-resources .kt-res-q {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ktp-indigo-d);
}

/* ───────── 「公式で確認」の箱（制度の数値は箱＋公式へ） ───────── */
.kt-resources .kt-res-box {
  margin-top: 14px;
  border-radius: 18px;
  padding: 14px 16px;
  background: var(--ktp-indigo-bg);
  border: 1.5px solid #BBD2FF;
}
.kt-resources .kt-res-box-h {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ktp-indigo-d);
  margin: 0 0 6px;
}
.kt-resources .kt-res-box-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ktp-ink-soft);
  margin: 0 0 10px;
}
.kt-resources .kt-res-box-body strong { color: var(--ktp-indigo-d); font-weight: 800; }

/* ───────── 合言葉リスト（貼って使える） ───────── */
.kt-resources .kt-res-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.kt-resources .kt-res-rules li {
  font-family: var(--kt-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ktp-ink);
  background: var(--ktp-mint-bg);
  border-radius: 14px;
  padding: 11px 16px;
  position: relative;
  padding-left: 38px;
}
.kt-resources .kt-res-rules li::before {
  content: "🌟";
  position: absolute;
  left: 13px;
  top: 11px;
  font-size: 14px;
}

/* ───────── 締め（学校への橋） ───────── */
.kt-resources .kt-res-outro {
  text-align: center;
  margin: 30px 0 18px;
  padding: 26px 22px;
  border-radius: 26px;
  background: linear-gradient(160deg, var(--ktp-sun-bg), var(--ktp-mint-bg) 70%, var(--ktp-coral-bg));
  border: 2px solid #FFE39A;
}
.kt-resources .kt-res-outro-kicker {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ktp-coral-d);
  margin: 0 0 6px;
}
.kt-resources .kt-res-outro-title {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ktp-ink);
  margin: 0 0 10px;
}
.kt-resources .kt-res-outro-body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ktp-ink-soft);
  margin: 0 auto 18px;
  max-width: 26em;
}

/* ---- 【絶対に迷わない・2026-07-10オーナー指示】メール登録＋学校への橋の折りたたみ ---- */
/* 核（8シートのアコーディオン一覧）の下は1つの<details>へ統合。中の.kt-res-outroは
   見た目（背景グラデ/枠線/角丸）無変更、外枠のmarginだけ折りたたみ側へ寄せる。 */
.kt-resources .kt-res-more {
  margin: 22px 0 8px;
}
.kt-resources .kt-res-more-sum {
  cursor: pointer;
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px 14px 16px;
  border-radius: 18px;
  border: 1.5px dashed var(--kt-line);
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ktp-ink);
  background: var(--kt-bg-soft, #F7F5EF);
}
.kt-resources .kt-res-more-sum::-webkit-details-marker { display: none; }
.kt-resources .kt-res-more-sum::marker { content: ""; }
.kt-resources .kt-res-more-chev {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 800;
  color: var(--ktp-ink-soft);
}
.kt-resources .kt-res-more[open] > .kt-res-more-sum .kt-res-more-chev { transform: translateY(-50%) rotate(180deg); }
.kt-resources .kt-res-more-body { margin-top: 14px; }
.kt-resources .kt-res-more .kt-res-outro { margin: 0 0 18px; }

/* ───────── 印刷で隠す要素 ───────── */
@media print {
  .kt-no-print { display: none !important; }
}

/* ================================================================== */
/* @media print — そのまま印刷して使える（白地・罫線くっきり・節約インク）。 */
/* ================================================================== */
@media print {
  /* 余計な装飾・影・背景の網点を消し、紙で読みやすく。 */
  .kt-resources,
  .kt-resources * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* 出現アニメで消えないよう、全て表示状態に固定。 */
  .kt-resources .kt-pop-rise,
  .kt-resources .kt-rise {
    opacity: 1 !important;
    transform: none !important;
  }
  /* ナビ・フッターナビ・ステッカー帯は印刷では省く（中身を主役に）。 */
  .kt-resources .kt-nav,
  .kt-resources .kt-foot-nav,
  .kt-resources .kt-sticker-row { display: none !important; }

  body { background: #FFFFFF !important; }
  .kt-pop.kt-resources .kt-inner { max-width: 100% !important; padding: 0 !important; }

  /* ヘッダーは小さめに。 */
  .kt-resources .kt-res-head { margin: 0 0 14px; }
  .kt-resources .kt-res-head .kt-hero { font-size: 24px !important; }

  /* 2列で紙を有効に（A4想定）。カードは途中で切れない。 */
  .kt-resources .kt-res-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .kt-resources .kt-res-card {
    border: 1.5px solid #B9C4D8 !important;
    border-radius: 14px;
    padding: 14px 14px 12px;
    background: #FFFFFF !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .kt-resources .kt-res-card::before { height: 5px; }
  .kt-resources .kt-res-card-title { font-size: 16px; }
  .kt-resources .kt-res-card-lead,
  .kt-resources .kt-res-checklist span,
  .kt-resources .kt-res-step-body { font-size: 12px; }

  /* チェックボックス・記入欄は紙でくっきり（線を濃く・面は白）。 */
  .kt-resources .kt-res-checklist label,
  .kt-resources .kt-res-fill-label {
    background: #FFFFFF !important;
    border-color: #B9C4D8 !important;
  }
  .kt-resources .kt-res-checklist input[type="checkbox"] {
    border-color: #555 !important;
  }
  .kt-resources .kt-res-fill-input,
  .kt-resources .kt-res-fill-area,
  .kt-resources .kt-res-inline-input {
    border-color: #999 !important;
    background: #FFFFFF !important;
  }
  .kt-resources .kt-res-rules li { background: #FFFFFF !important; border: 1px solid #B9C4D8; }
  .kt-resources .kt-res-box { background: #FFFFFF !important; border-color: #B9C4D8 !important; }
  .kt-resources .kt-res-outro { display: none !important; }
  .kt-resources .kt-foot { font-size: 9px; color: #666; }
}

/* せまい画面（〜400px）でカード内のラベル列を縦に。 */
@media (max-width: 400px) {
  .kt-resources .kt-res-fill-row:not(.kt-res-fill-row--col) {
    flex-direction: column;
    gap: 7px;
  }
  .kt-resources .kt-res-fill-label { flex-basis: auto; }
  .kt-resources .kt-res-card { padding: 18px 16px 16px; }
  .kt-resources .kt-res-card-title { font-size: 19px; }
}

/* 2026-07-24 PC複数列化(min-width:1024px)。モバイル不変。担当:C-リソース歩み */
@media (min-width: 1024px) {
  /* 【2026-07-25・全ページ幅統一】道具箱の本文列は冒頭の `.kt-pop.kt-resources .kt-inner`＝
     var(--kt-app-w,480px) が全帯で共通幅に追従する（PC=960）ため、ここでの .kt-inner 上書きは
     不要（重複を撤去）。2列グリッドのみ残す。 */
  .kt-resources .kt-res-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 26px;
    align-items: start;
  }
  .kt-resources .kt-res-card { min-width: 0; }
}