/* ==========================================================
   ばね指・弾発指（trigger-finger.html）専用　2026-09-15 新規
   ・style.css → tos-v1.css（疾患別ページ共通）の後に読み込む。どちらも変更していない
   ・このファイルのクラスは .tf- で始まるものだけ（.tos- の共通部品はそのまま使う）
   ・スマホのブレイクポイントは既存の疾患別ページと同じ 680px
   ・日本語の本文・見出しに text-wrap:balance / word-break:keep-all は使わない
     （改行は .tp＝意味のまとまりごとの inline-block で制御する）
   ・画像はユーザーが ChatGPT で作成したもの。ファイルは無加工（WebP化のみ）
   ========================================================== */

/* ---------- 1 ファーストビュー ----------
   画像A は左側に大きな余白がある横長の絵。PCでは余白側を本文に寄せ、人物が小さくなりすぎないようにする */
.tf-hero .tos-hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  column-gap: 8px;
}
.tf-hero-fig.tos-hero-fig {
  align-self: start;
  max-width: 600px;
  margin-top: 8px;
}
.tf-hero-after { margin-top: 18px !important; }
/* ファーストビューの本文は列が狭いので、PCでも意味のまとまりで改行する */
.tf-hero .tos-hero-body .tp { display: inline-block; max-width: 100%; }

/* ---------- 共通：画像 ---------- */
.tf-fig { max-width: 640px; margin: 26px auto 6px; }
.tf-fig img { display: block; width: 100%; height: auto; }
.tf-fig--wide { max-width: 660px; }
.tf-fig--protect { max-width: 560px; }
.tf-figcap {
  margin-top: 8px;
  color: #5b665e;
  font-size: .95rem;
  line-height: 1.6;
  text-align: center;
}

/* ---------- 2 症状 ---------- */
.tf-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 4px 0 16px;
}
.tf-checks .tp { display: inline-block; max-width: 100%; }
.tf-after-checks { margin-top: 8px; }

/* ---------- 3 ばね指とは？（解剖図は補助として小さめ） ---------- */
.tf-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: center;
  margin-bottom: 14px;
}
.tf-anat { margin: 0; }
.tf-anat img { display: block; width: 100%; height: auto; border-radius: 12px; }
.tf-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 14px;
  margin-top: 8px;
  color: #4f5a52;
  font-size: .95rem;
  line-height: 1.7;
}
.tf-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tf-legend i { display: inline-block; width: 18px; height: 12px; border-radius: 3px; }
.tf-legend .lg-sheath { background: #f3e3a0; border: 1.5px solid #c9ae5a; }
.tf-legend .lg-tendon { background: #b3cadb; border: 1.5px solid #7f9db4; }
.tf-legend .lg-bulge { background: #f0a3aa; border: 1.5px solid #c9737d; }
.tf-legend .lg-bone { background: #f8f3e0; border: 1.5px solid #c3b58f; }
.tf-chips { margin-top: 6px; }

/* ---------- 4・8・10 箇条書き ---------- */
.tf-dots { margin: 2px 0 12px; }
.tf-dots li { font-size: 1rem; }
.tf-dots .tp { display: inline-block; max-width: 100%; }

/* ---------- 5 同じばね指でも（カードにせず、細い線で区切る） ---------- */
.tf-states {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 36px;
  margin-top: 22px;
  border-top: 1px solid #e3dfd5;
}
.tf-state {
  padding: 16px 0 14px;
  border-bottom: 1px solid #e3dfd5;
}
.tf-state h3 {
  margin: 0 0 4px;
  color: #2b5542;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.6;
}
.tf-state p { margin: 0 0 6px; color: #505a53; font-size: 1rem; line-height: 1.85; }
.tf-state p:last-child { margin-bottom: 0; }

/* ---------- 6 確認すること：方針の一文（目立ちすぎない） ---------- */
.tf-principle {
  margin: 22px 0 0;
  padding-left: 14px;
  color: #3f5a4b;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.8;
  border-left: 2px solid #d9c9ab;
}

/* ---------- 7 動かす・休ませる・守る ---------- */
.tf-mrp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 4px 0 22px;
}
.tf-mrp span {
  padding: 4px 18px;
  color: #2e5946;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.6;
  background: #fff;
  border: 1px solid #bfd3c4;
  border-radius: 999px;
}
.tf-q {
  margin: 2px 0 6px !important;
  padding-left: 14px;
  color: #2e5946;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.8;
  border-left: 2px solid #d9c9ab;
}
.tf-page .tf-q + .tos-text { margin-bottom: 8px; }

/* ---------- 8 炎症が強いとき（2場面の名前は画像の左右に合わせる） ---------- */
.tf-pair-cap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 絵の下に約14%の白い余白があるので、名前を絵に近づける（%は幅基準＝画面幅が変わっても同じ比率） */
  margin-top: -8%;
  color: #3f5a4b;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* ---------- 9 反応 ---------- */
.tf-note { margin-top: 18px; color: #505a53; line-height: 1.85; }

/* ---------- 10 とくなが法（派手にしない） ---------- */
.tf-pair { max-width: 760px; margin: 26px auto 8px; }
.tf-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.tf-pair-item {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px 10px 12px;
  background: #fff;
  border: 1px solid #e6e1d5;
  border-radius: 12px;
}
/* 2枚は縦横比が少し違うので、絵を枠の中で上下中央に置き、名前の高さをそろえる */
.tf-pair-item img { display: block; width: 100%; height: auto; margin: auto 0; }
.tf-pair-name {
  margin: 6px 0 0 !important;
  color: #2e5946 !important;
  font-family: var(--font-serif);
  font-size: 1.05rem !important;
  font-weight: 700;
  line-height: 1.5 !important;
  text-align: center;
}
.tf-page .tos-author-text + .tos-author-text { margin-top: 8px; }
.tf-page .tos-author-text .tp { display: inline-block; max-width: 100%; }

/* ---------- 11 自分の手の変化 ---------- */
.tf-voices { display: grid; gap: 4px; margin: 4px 0 12px; padding: 0; list-style: none; }
.tf-voices li {
  padding-left: 14px;
  color: #2e5946;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.8;
  border-left: 2px solid #d9c9ab;
}
.tf-voices .tp { display: inline-block; max-width: 100%; }

/* ---------- 15 参考文献（折りたたみ） ---------- */
.tf-refs summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.tf-refs summary::-webkit-details-marker { display: none; }
.tf-refs summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border: solid #8a9a8f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform .2s;
}
.tf-refs[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.tf-refs summary:focus-visible { outline: 2px solid #4a7c59; outline-offset: 2px; }
.tf-refs ul { margin-top: 4px; }
.tf-refs li { font-size: .92rem; line-height: 1.75; margin-bottom: 4px; }

/* ---------- 16 CTA ---------- */
.tf-cta .tf-cta-mrp {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 4px 0 12px;
}
.tf-cta .tf-cta-mrp span {
  padding: 2px 16px;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.7;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
}
.tf-cta .tf-cta-voice { margin-top: 14px; }
.tf-cta-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 28px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.tf-cta-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: #f2e9d7;
  font-weight: 700;
  border-bottom: 1px solid rgba(242, 233, 215, .45);
}
.tf-cta-links a:hover { color: #fff; }
.tf-cta .tf-cta-sub {
  margin-top: 6px;
  min-width: 270px;
  color: #f2e9d7;
  background: transparent;
  border: 1.5px solid rgba(242, 233, 215, .7);
}
.tf-cta .tf-cta-sub:hover { color: var(--rehab-deep); background: #f2e9d7; }

/* タブレット幅（681〜960px）は1行が中途半端な長さになり、語の途中で折れやすいので、
   このページだけ本文も意味のまとまりで改行する（PC 961px以上は他の疾患別ページと同じ） */
@media (max-width: 960px) {
  .tf-page .tp { display: inline-block; max-width: 100%; }
}

/* ==========================================================
   スマホ（680px以下）
   ========================================================== */
@media (max-width: 680px) {
  /* ファーストビュー：タイトル → コピー → イラスト → 本文。絵は左右の余白いっぱいまで使う */
  .tf-hero .tos-hero-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .tf-hero-fig.tos-hero-fig {
    width: auto;
    max-width: none;
    margin: 6px -20px 6px;
  }

  /* 絵そのものに上下の余白があるので、枠の外側の余白は小さめに */
  .tf-fig { margin: 10px auto 4px; }
  .tf-checks { grid-template-columns: minmax(0, 1fr); }

  .tf-about { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tf-anat { width: 100%; margin: 6px auto 4px; }
  .tf-anat img { max-width: 250px; margin: 0 auto; }

  .tf-states { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .tf-state { padding: 14px 0 12px; }
  .tf-state h3 { font-size: 1.06rem; }

  .tf-mrp { margin-bottom: 18px; }
  .tf-mrp span { padding: 3px 14px; font-size: 1.04rem; }

  /* とくなが法の2枚はスマホでは縦に1枚ずつ（屈筋腱ストレッチ → ブロックを握る運動） */
  .tf-pair-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tf-pair { margin-top: 18px; }
  .tf-pair-item { max-width: 310px; width: 100%; margin: 0 auto; padding: 8px 8px 10px; }

  .tf-cta .tf-cta-sub,
  .tf-cta .rehab-cta-button { min-width: 0; width: 100%; }
  .tf-cta-links { gap: 0 24px; margin-top: 10px; }
}