@charset "utf-8";
/* ============================================================
 * A ページ（釣り方・選び方の解説）から製品ページへの出口（2026-09-16 新設）
 * A ページ5本は12日で468PVを集めながら、直販への送客が0・製品ページへの
 * 遷移が8しかなかった（GA4 実測・docs/next_todo.md §計測）。
 * 集める側ではなく受ける側が空いていたので、読み終わりと節の切れ目に出口を置く。
 * 読むページごとに CSS が違う（shikakezu / budouica / egi-erabi / tsurikata）ので、
 * 出口だけを1枚に切り出して5ページで共有する。A ページが増えたらこれを読ませる。
 * 図のラベルにはリンクを張らない — 図は role="img" なので、中に
 * リンクを置くと読み上げから消える。
 * ============================================================ */
.pe-use { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  margin: 18px 0 0; padding: 13px 16px; border-radius: 8px;
  background: #f2f5f8; font-size: 1.45rem; line-height: 1.7; }
/* 子は縮ませない。既定の flex-shrink:1 のままだと、狭い画面で
 * 「硬質発泡浮きスッテ」のような長い名前が行に押し込まれて右端で切れる
 * （390px 幅で実際そうなった）。縮まなければ入らない分は次の行へ回る。 */
.pe-use > * { flex: 0 0 auto; }
.pe-use__lbl { font-weight: 700; color: #6c7784; }
.pe-use a { color: #1d2733; font-weight: 700; text-decoration: none;
  border-bottom: 2px solid #b9c3cd; padding-bottom: 1px; }
.pe-use a:hover, .pe-use a:focus-visible { border-bottom-color: #1d2733; }

/* ページの終わりの一覧。写真は仕掛け図で使っているものと同じファイルなので、
 * ここで新たに読み込まれる画像は無い（330x150・各6KB前後） */
.pe-list { display: grid; gap: 16px; margin: 22px 0 0; padding: 0;
  list-style: none; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pe-list a { display: block; height: 100%; padding: 13px;
  border: 1px solid #dde3e9; border-radius: 10px; background: #fff;
  text-decoration: none; color: #1d2733; }
.pe-list a:hover, .pe-list a:focus-visible { border-color: #1d2733; }
.pe-list img { display: block; width: 100%; height: auto; }
.pe-list__name { display: block; margin: 9px 0 0;
  font-size: 1.5rem; font-weight: 700; line-height: 1.5; }
.pe-list__where { display: block; margin: 4px 0 0;
  font-size: 1.3rem; color: #6c7784; line-height: 1.65; }

@media (max-width: 767px) {
  .pe-use { font-size: 1.4rem; padding: 12px 13px; }
  .pe-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* ============================================================
 * 本文と図の中から製品ページへ渡すリンク（2026-09-16 追加）
 * ============================================================ */
/* 同じ製品名が何度も出るページでも文章が読みにくくならないよう、
 * **文字色は本文のまま**にして、下に細い線を敷くだけにする。
 * 青字＋下線にすると、yodakiica-tsurikata のように「早福型」が31か所あるページは
 * 本文が一面リンクの色になって、文章として読めなくなる。
 * 線は押せることが分かる最低限の濃さ。触れたときだけはっきりさせる。 */
.pe-ref { color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(29, 39, 51, .32); }
/* 図の中には黒地のパネルもあり、そこでは上の固定色の線がほとんど見えない。
 * 文字色に追従させて、地の色が変わっても同じ濃さで見えるようにする。
 * color-mix が無い環境では上の行が残る（線が消えるわけではない）。 */
@supports (border-bottom-color: color-mix(in srgb, currentColor 40%, transparent)) {
  .pe-ref { border-bottom-color: color-mix(in srgb, currentColor 42%, transparent); }
}
.pe-ref:hover, .pe-ref:focus-visible {
  border-bottom-color: currentColor; background: rgba(29, 39, 51, .06); }

/* 目には見せず、読み上げにだけ渡すテキスト（図の説明）。
 * 図から role="img" を外したので、図の中のラベルがリンクとして押せるようになった
 * （role="img" は Children Presentational: True で、中のリンクが支援技術から消える）。
 * その代わり、図全体を一息に説明していた文（元の aria-label）をここへ移してある。
 * left/top を指定しないので本来の位置に置かれる＝横スクロールを生まない。 */
.pe-sr { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%); }