@charset "utf-8";
/* 町工場の手帖（/machikoba/）専用。折りたたみ（3行＋続きを読む）。
 *
 * **base.css から切り出して、?v= 付きの別ファイルにした（2026-09-10）。**
 * base.css は ?v= 無しで max-age=86400 なので、規則を変えても最大24時間は古いまま配られる。
 * 実際、英語版で「続きを読むRead moreClose」と3つ並んだ（最初の版の base.css が残っていた）。
 * このファイルを変えたら、読み込む24ページの ?v= を必ず上げること（check:cache が見る）。 */

/* 古い base.css が残っている端末向けの打ち消し。
 * 最初の版は文言を ::before の content で出していた。いまは HTML の span で出す。 */
.mk-fold-btn::before,
.mk-fold-cb:checked ~ .mk-fold-btn::before {
  content: none;
}

/* ++ 長い章を3行だけ見せて「続きを読む」で開く（2026-09-10・町工場の手帖）
 *
 * **JavaScript は使わない。**このサイトは JS を実行しない AI クローラを相手にしており、
 * JS で隠すと本文がクローラから消える（docs/お知らせ運用.md と同じ理由）。
 * ここは checkbox + :checked ~ で開閉する。**本文は常に HTML にあり、
 * 閉じているのは max-height で切っているだけ**なので、機械はいつでも全文を読める。
 *
 * <details> を使わないのは、閉じた details は中身を1行も表示できないから
 * （「3行だけ見せる」ができない）。
 * チェックボックスは opacity:0 で残してある（display:none にすると
 * キーボードでフォーカスできなくなる）。Tab → Space で開閉できる。
 *
 * 3行 = p の line-height 2.5 × font-size 1.6rem = 4rem/行 → 12rem。 */
.mk-fold {
  position: relative;
  margin: 0 0 20px;
}
/* チェックボックスは見せない。ただし display:none にすると
 * キーボードでフォーカスできなくなるので、面積を潰して隠す
 * （このサイトが h1 の代替テキストに使っているのと同じ手）。
 * appearance:none も要る。iOS はこれが無いと最小サイズで描画してくる。 */
.mk-fold-cb {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
}
.mk-fold-body {
  position: relative;
  max-height: 12rem;
  overflow: hidden;
}
/* 切れ目をぼかす。背景は白（body に色を敷いていない） */
.mk-fold-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5rem;
  background: linear-gradient(rgba(255,255,255,0), #fff 85%);
  pointer-events: none;
}
.mk-fold-cb:checked ~ .mk-fold-body {
  max-height: none;
}
.mk-fold-cb:checked ~ .mk-fold-body::after {
  content: none;
}
/* ボタンだと判るように、FAQ の開閉（.details_faq summary）と同じ作りに揃える。
 * 幅いっぱいのブロック＋右端の矢印＋hover の背景。矢印は開くと上を向く。 */
.mk-fold-btn {
  position: relative;
  display: block;
  padding: 14px 44px 14px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: var(--color_red);
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
  cursor: pointer;
  transition: 0.2s;
}
.mk-fold-btn:hover {
  background-color: #e8e8e8;
}
/* 文言は HTML 側（<span class="mk-fold-open|close">）に置く。CSS の content に
 * 書くと言語ごとに切り替えられず、英語版に「続きを読む」が出る。
 * HTML にあれば各言語で訳せて、スクリーンリーダーにも確実に読まれる。 */
.mk-fold-btn .mk-fold-close {
  display: none;
}
.mk-fold-cb:checked ~ .mk-fold-btn .mk-fold-open {
  display: none;
}
.mk-fold-cb:checked ~ .mk-fold-btn .mk-fold-close {
  display: inline;
}
/* 右端の矢印（.details_faq summary:after と同じ作り） */
.mk-fold-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color_red);
  border-right: 2px solid var(--color_red);
  transform: rotate(135deg);
}
.mk-fold-cb:checked ~ .mk-fold-btn::after {
  transform: rotate(-45deg);
}
.mk-fold-cb:focus-visible ~ .mk-fold-btn {
  outline: 2px solid #E0211A;
  outline-offset: 2px;
}

/* 開いたらボタンごと消す（閉じる操作は置かない。2026-09-10 原稿者の指示）。
 * 読み物なので開いたままで困らず、「閉じる」が本文の末尾に残るほうが邪魔になる。 */
.mk-fold-cb:checked ~ .mk-fold-btn {
  display: none;
}