/*
 * 写真の一覧と写真のページ（[kioku_photos] の /photos/ と /photos/{素材ID}/、[kioku_search] の /kabegami/）。
 * 中身は inc/class-tpk-photos.php と class-tpk-search.php。
 * 色・文字・余白は子テーマの --tp-… を借ります（無いときは同じ値の控え）。
 * 写真の縦横は3種類だけ（design-plan の 2）：選ぶ一覧は正方形、ギャラリーの一覧は 4:3、大きく見せるところは 16:10。
 */
.tpk-ph-wrap{
  font-family:var(--tp-gothic,sans-serif); color:var(--tp-ink,#22201C);
  font-size:var(--tp-fs-body,.9375rem); line-height:1.9;
}
.tpk-ph-wrap *{box-sizing:border-box}
/* 余白をいったん0に（:where で弱くしておき、下の個別の指定が勝つようにする） */
.tpk-ph-wrap :where(h1,h2,h3,p,ul,figure,dl,dd){margin:0}
.tpk-ph-in{
  max-width:calc(var(--tp-content,1152px) + 2 * var(--tp-gutter,64px));
  margin:0 auto; padding:0 var(--tp-gutter,64px);
}
.tpk-vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.tpk-ph-kicker{font-size:.75rem; letter-spacing:.16em; line-height:1.6; color:var(--tp-ink-sub,#5C574D)}
.tpk-ph-h1{font-family:var(--tp-mincho,serif); font-weight:500; font-size:clamp(1.625rem, 5vw, 2rem); letter-spacing:.08em; line-height:1.5}
/* 種類ごとのページ（/kabegami/shiro/）の題の上の戻り道「← 壁紙にする素材を選ぶ（すべての種類）」 */
.tpk-ph-back{font-size:.8125rem; line-height:1.6; margin:0 0 4px}
.tpk-ph-back a{color:var(--tp-green,#2F4F43)}
.tpk-ph-h2{font-family:var(--tp-mincho,serif); font-weight:500; font-size:1.375rem; letter-spacing:.08em; line-height:1.5; margin-bottom:var(--tp-s3,24px)}
.tpk-ph-lead{font-size:.875rem; line-height:1.8; color:var(--tp-ink-sub,#5C574D); max-width:40em}
.tpk-ph-meta{font-size:.8125rem; color:var(--tp-ink-sub,#5C574D); line-height:1.6}

/* ------------------------------------------------------------------
 * 一覧の頭（題・説明・絞り込み）
 * ------------------------------------------------------------------ */
.tpk-ph-head{background:var(--tp-kinari,#F2ECE0); padding:48px 0 32px}
.tpk-ph-head .tpk-ph-in{display:flex; flex-direction:column; gap:18px}

.tpk-filter{display:flex; flex-direction:column; gap:12px}
.tpk-filter__find{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.tpk-filter__q{flex:1 1 260px; max-width:520px}
.tpk-filter__note{margin:6px 0 0; font-size:12px; color:var(--tp-ink-mute, #6B6559)}   /* 検索の欄の下の小さな一文（2026-09-28） */
.tpk-filter__area{flex:0 1 220px}
.tpk-filter input[type=search],.tpk-filter select{
  width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--tp-rule,#D8CFBE); border-radius:2px;
  background:var(--tp-white,#fff); color:var(--tp-ink,#22201C); font:inherit; font-size:.9375rem;
}
.tpk-filter input[type=search]:focus-visible,.tpk-filter select:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:1px}
.tpk-filter__find .tpk-cta{min-height:48px; padding:10px 22px}
.tpk-filter__row{display:flex; gap:10px; align-items:baseline}
.tpk-filter__label{flex:0 0 3em; font-size:.75rem; color:var(--tp-ink-sub,#5C574D)}

/* 絞り込みの札（丸い札）。選んでいるものは深緑の塗り。数字は、その札を選んだら何枚になるか */
.tpk-chips{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.tpk-chip{
  display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--tp-rule,#D8CFBE); background:var(--tp-white,#fff); color:var(--tp-ink,#22201C);
  font-size:.8125rem; line-height:1.4; text-decoration:none; white-space:nowrap;
}
.tpk-chip small{font-size:.6875rem; color:var(--tp-ink-sub,#5C574D)}
.tpk-chip:hover{border-color:var(--tp-green,#2F4F43); color:var(--tp-green,#2F4F43)}
.tpk-chip[aria-current]{background:var(--tp-green,#2F4F43); border-color:var(--tp-green,#2F4F43); color:var(--tp-white,#fff)}
.tpk-chip[aria-current] small{color:var(--tp-white,#fff); opacity:.8}
.tpk-chip:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}

.tpk-scope{font-size:.75rem; line-height:1.8; color:var(--tp-ink-sub,#5C574D); max-width:48em}

/* ------------------------------------------------------------------
 * 今日の一枚（ギャラリーの1ページ目、条件なしのときだけ）
 * ------------------------------------------------------------------ */
.tpk-ph-today{background:var(--tp-kinari,#F2ECE0); padding:0 0 48px}
/* 最初の画面と今日の一枚のあいだに新着の帯が入ったときは、帯の下を空ける（2026-10-10 ギャラリーの新着の帯） */
.tpk-nb + .tpk-ph-today{padding-top:40px}
@media (max-width:781px){ .tpk-nb + .tpk-ph-today{padding-top:28px} }
.tpk-ph-today__grid{display:grid; grid-template-columns:minmax(0,672fr) minmax(0,416fr); gap:var(--tp-s5,64px); align-items:center}
.tpk-ph-today__photo{display:block; aspect-ratio:16 / 10; overflow:hidden; box-shadow:0 14px 36px rgba(34,32,28,.14); background:var(--tp-kinari-hi,#FAF6EE)}
.tpk-ph-today__photo img{width:100%; height:100%; object-fit:cover; display:block}
.tpk-ph-today__text{display:flex; flex-direction:column; gap:12px}
.tpk-ph-today__name{font-family:var(--tp-mincho,serif); font-weight:500; font-size:clamp(1.5rem, 4vw, 2rem); letter-spacing:.08em; line-height:1.5}
.tpk-ph-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:4px}

/* ------------------------------------------------------------------
 * 一覧
 * ------------------------------------------------------------------ */
.tpk-ph-list{background:var(--tp-kinari-hi,#FAF6EE); border-top:1px solid var(--tp-rule,#D8CFBE); padding:40px 0 64px}
.tpk-result{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 24px; margin-bottom:var(--tp-s3,24px); font-size:.8125rem; color:var(--tp-ink-sub,#5C574D)}
.tpk-result__clear{margin-left:12px; font-size:.75rem}
.tpk-result__sort a{margin-left:10px}
.tpk-result__sort a[aria-current]{color:var(--tp-ink,#22201C); font-weight:700; text-decoration:none}

.tpk-grid{list-style:none; padding:0; display:grid; gap:40px 24px}
.tpk-grid--photos{grid-template-columns:repeat(3, minmax(0,1fr))}
.tpk-grid--pick{grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px 24px}
.tpk-grid > li{min-width:0}

/* ギャラリーのカード（4:3）。カード全体が写真のページへのリンク */
.tpk-card4{display:flex; flex-direction:column; gap:3px; color:var(--tp-ink,#22201C); text-decoration:none; line-height:1.5}
.tpk-card4__img{display:block; aspect-ratio:4 / 3; overflow:hidden; background:var(--tp-kinari,#F2ECE0); margin-bottom:7px}
.tpk-card4__img img{width:100%; height:100%; object-fit:cover; display:block}   /* 指やマウスを乗せたときの動きは kioku-site.css の「写真の手ざわり」 */
/* カードの名前は、端末の明朝で出す（2026-10-06 ご主人「すべておすすめで」、docs/yorozu/sumaho-omoi.md の表の 3 の案 a）。
   見出しの明朝（TPK Mincho Site）は、使った字の切れ端だけを落とす作り。一覧はカードごとに違う漢字が並ぶので、
   ギャラリー1ページで切れ端 28〜44 個（570〜920KB）になっていた。ページの題・写真の名前などの大きな見出しは、いままでどおり。
   並びは親テーマの --tp-mincho から先頭の TPK Mincho Site を外したもの */
.tpk-card4__name{font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif; font-size:var(--tp-fs-name,1.0625rem); font-weight:500; letter-spacing:.08em}
.tpk-card4__meta{font-size:.75rem; color:var(--tp-ink-sub,#5C574D)}
.tpk-card4:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:4px}

/* 写真を選ぶカード（正方形）。押すと、その写真を選んだ状態で作る画面へ */
.tpk-card1{display:flex; flex-direction:column; gap:6px}
.tpk-card1__main{display:flex; flex-direction:column; gap:3px; color:var(--tp-ink,#22201C); text-decoration:none; line-height:1.5}
.tpk-card1__img{display:block; aspect-ratio:1 / 1; overflow:hidden; background:var(--tp-kinari,#F2ECE0); margin-bottom:7px}
.tpk-card1__img img{width:100%; height:100%; object-fit:cover; display:block}
.tpk-card1__name{font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif; font-size:var(--tp-fs-name,1.0625rem); font-weight:500; letter-spacing:.08em}
.tpk-card1__meta{font-size:.75rem; color:var(--tp-ink-sub,#5C574D)}
.tpk-card1__go{font-size:.8125rem; font-weight:700; color:var(--tp-green,#2F4F43); margin-top:4px}
.tpk-card1__main:hover .tpk-card1__go{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--tp-ul-offset,.45em); text-decoration-color:var(--tp-ul-color-hover)}
.tpk-card1__main:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:4px}
.tpk-card1__sub{align-self:flex-start; font-size:.75rem; color:var(--tp-ink-sub,#5C574D); padding:4px 0; min-height:28px}


/* 見つからなかったとき */
.tpk-empty{background:var(--tp-white,#fff); border:1px dashed var(--tp-rule,#D8CFBE); padding:24px; margin-bottom:var(--tp-s4,40px); font-size:.875rem; line-height:1.8}
.tpk-empty p + p{margin-top:4px; color:var(--tp-ink-sub,#5C574D)}

/* ページ送り。押せるところは 44px */
.tpk-pager{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:var(--tp-s5,64px)}
.tpk-pager a,.tpk-pager span{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 12px;
  font-size:.875rem; text-decoration:none; border-radius:2px;
}
.tpk-pager a{border:1px solid var(--tp-rule,#D8CFBE); color:var(--tp-ink,#22201C); background:var(--tp-white,#fff)}
.tpk-pager a:hover{border-color:var(--tp-green,#2F4F43); color:var(--tp-green,#2F4F43)}
.tpk-pager [aria-current]{background:var(--tp-green,#2F4F43); color:var(--tp-white,#fff)}
.tpk-pager__gap{color:var(--tp-ink-sub,#5C574D); min-width:24px}

/* ------------------------------------------------------------------
 * 写真のページ
 * ------------------------------------------------------------------ */
.tpk-ph-top{background:var(--tp-kinari,#F2ECE0); padding:28px 0 36px}
.tpk-crumb{font-size:.75rem; color:var(--tp-ink-sub,#5C574D); margin-bottom:14px; display:flex; flex-wrap:wrap; gap:6px 10px}
.tpk-crumb a{color:var(--tp-ink-sub,#5C574D)}
.tpk-crumb a:hover{color:var(--tp-green,#2F4F43)}
/* 写真は切らずに全部見せる（縦長の写真でも頭が切れないように）。高さは画面に収まる大きさまで */
.tpk-ph-figure{display:flex; flex-direction:column; gap:10px}
.tpk-ph-figure__img{display:flex; justify-content:center; background:var(--tp-kinari-hi,#FAF6EE); cursor:zoom-in}
.tpk-ph-figure__img{--tpk-ph-maxh:min(76vh, 760px)}
.tpk-ph-figure__img img{display:block; max-width:100%; height:auto; max-height:var(--tpk-ph-maxh); width:auto; box-shadow:0 14px 36px rgba(34,32,28,.14)}
.tpk-ph-figure figcaption{font-size:.75rem; color:var(--tp-ink-sub,#5C574D)}

.tpk-ph-info{background:var(--tp-kinari,#F2ECE0); padding:0 0 56px}
.tpk-ph-info__grid{display:grid; grid-template-columns:minmax(0,672fr) minmax(0,416fr); gap:var(--tp-s5,64px); align-items:start}
.tpk-ph-name{font-family:var(--tp-mincho,serif); font-weight:500; font-size:clamp(1.75rem, 5.4vw, 2.5rem); letter-spacing:.08em; line-height:1.5}
.tpk-ph-dl{display:grid; grid-template-columns:9em minmax(0,1fr); border-top:1px solid var(--tp-rule,#D8CFBE); margin-top:24px}
.tpk-ph-dl dt,.tpk-ph-dl dd{padding:11px 0; border-bottom:1px solid var(--tp-rule,#D8CFBE); line-height:1.7}
.tpk-ph-dl dt{font-size:.75rem; color:var(--tp-ink-sub,#5C574D); padding-top:13px}
.tpk-ph-dl dd{font-size:.875rem}
.tpk-ph-more{margin-top:18px; font-size:.875rem; font-weight:700}

/* この写真で壁紙をつくる（主ボタンは1画面に1つ） */
.tpk-ph-make{background:var(--tp-kinari-hi,#FAF6EE); border:1px solid var(--tp-rule,#D8CFBE); padding:28px; display:flex; flex-direction:column; gap:14px}
.tpk-ph-make h2{font-family:var(--tp-mincho,serif); font-weight:500; font-size:1.375rem; letter-spacing:.08em; line-height:1.5}
.tpk-ph-make p:not(.tpk-ph-kicker){font-size:.875rem; line-height:1.8; color:var(--tp-ink-sub,#5C574D)}
.tpk-ph-minis{display:flex; gap:10px; height:142px}
.tpk-ph-minis img{height:100%; width:auto; box-shadow:0 4px 12px rgba(34,32,28,.12)}
.tpk-cta--block{display:flex; width:100%}

/* 前の写真・次の写真 */
.tpk-ph-step{background:var(--tp-kinari,#F2ECE0); padding:0 0 40px}
.tpk-ph-step__in{display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--tp-rule,#D8CFBE); padding-top:20px}
.tpk-ph-step a{display:flex; flex-direction:column; gap:2px; min-height:44px; text-decoration:none; color:var(--tp-ink,#22201C); max-width:48%}
.tpk-ph-step a span{font-size:.75rem; color:var(--tp-green,#2F4F43); font-weight:700}
.tpk-ph-step a b{font-family:var(--tp-mincho,serif); font-weight:500; font-size:.9375rem; letter-spacing:.06em}
.tpk-ph-step__next{margin-left:auto; text-align:right; align-items:flex-end}
.tpk-ph-step a:hover b{color:var(--tp-green,#2F4F43)}

/* この写真から作られた壁紙（壁紙の見本には影を少し） */
.tpk-ph-works{background:var(--tp-kinari-hi,#FAF6EE); border-top:1px solid var(--tp-rule,#D8CFBE); padding:48px 0}
.tpk-ph-count{margin-left:12px; font-family:var(--tp-gothic,sans-serif); font-size:.8125rem; letter-spacing:0; color:var(--tp-ink-sub,#5C574D)}
.tpk-ph-wlist{list-style:none; padding:0; display:flex; gap:20px; overflow-x:auto; padding-bottom:8px}
/* 横に流れる箱は、はみ出したところを切る。乗せたときに浮いた写真と深い影が切れないよう、まわりに余白を足し、同じだけ外へ出して位置は前のまま（2026-10-10 写真の手ざわり B） */
.tpk-ph-wlist{padding:8px 16px 32px; margin:-8px -16px -24px}
.tpk-ph-wlist img{display:block; height:213px; width:auto; box-shadow:0 4px 12px rgba(34,32,28,.12)}

.tpk-ph-related{background:var(--tp-kinari-hi,#FAF6EE); border-top:1px solid var(--tp-rule,#D8CFBE); padding:48px 0 64px}
.tpk-ph-back{margin-top:var(--tp-s4,40px); font-size:.875rem}

/* ------------------------------------------------------------------
 * 狭い画面
 * ------------------------------------------------------------------ */
@media (max-width:1023px){
  .tpk-grid--photos{grid-template-columns:repeat(2, minmax(0,1fr))}
  .tpk-grid--pick{grid-template-columns:repeat(3, minmax(0,1fr))}
  .tpk-ph-today__grid,.tpk-ph-info__grid{grid-template-columns:minmax(0,1fr); gap:var(--tp-s3,24px)}
}
@media (max-width:599px){
  .tpk-ph-head{padding:28px 0 20px}
  .tpk-filter__row{flex-direction:column; gap:6px}
  .tpk-filter__area{flex:1 1 100%}
  .tpk-filter__find .tpk-cta{flex:1 1 100%}
  .tpk-grid--photos{grid-template-columns:minmax(0,1fr); gap:28px}
  .tpk-grid--pick{grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 14px}
  .tpk-ph-list{padding:28px 0 48px}
  .tpk-ph-dl{grid-template-columns:6.5em minmax(0,1fr)}
  .tpk-ph-make{padding:20px}
  .tpk-ph-wlist img{height:180px}
}

/* スマホの「あわせて眺めたい写真」は2列（1列だと6枚で画面が長くなりすぎる） */
@media (max-width:599px){
  .tpk-ph-related .tpk-grid--photos{grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 14px}
  .tpk-ph-related .tpk-card4__name{font-size:.9375rem}
}

/* 写真を保存する（出典入り）。帯の見本を小さく見せて、何が入るかを先に分かるようにする */
.tpk-ph-save{margin-top:28px; background:var(--tp-kinari-hi,#FAF6EE); border:1px solid var(--tp-rule,#D8CFBE); padding:20px; display:flex; flex-direction:column; gap:12px}
.tpk-ph-save > p:not(.tpk-ph-kicker){font-size:.875rem; line-height:1.7; color:var(--tp-ink-sub,#5C574D)}
.tpk-ph-save__sample{border-top:3px solid var(--tpk-sample-ink,#5C574D); background:var(--tpk-sample-bg,#FAF6EE); color:var(--tpk-sample-ink,#5C574D); box-shadow:0 1px 0 rgba(0,0,0,.08) inset;
  padding:8px 10px; text-align:right; font-family:var(--tp-mincho,serif); font-size:11px !important; line-height:1.5; overflow-wrap:anywhere}
.tpk-ph-save__note{font-size:.75rem !important}

/* 写真を保存したあと（/photos/{素材ID}/thanks/） */
.tpk-ph-thx{background:var(--tp-kinari,#F2ECE0); padding:48px 0 64px}
.tpk-ph-thx__in{display:flex; flex-direction:column; gap:18px; max-width:calc(var(--tp-read,712px) + 2 * var(--tp-gutter,64px))}
.tpk-ph-thx__share{background:var(--tp-kinari-hi,#FAF6EE); border:1px solid var(--tp-rule,#D8CFBE); padding:24px; display:flex; flex-direction:column; gap:12px; margin-top:12px}
.tpk-ph-thx__share .tpk-ph-h2{margin-bottom:0}
.tpk-share{display:flex; flex-wrap:wrap; gap:8px}
.tpk-share a{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:88px; padding:8px 14px;
  border:1px solid var(--tp-rule,#D8CFBE); background:var(--tp-white,#fff); color:var(--tp-ink,#22201C); border-radius:2px; font-size:.875rem; text-decoration:none}
.tpk-share a:hover{border-color:var(--tp-green,#2F4F43); color:var(--tp-green,#2F4F43)}
.tpk-share a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
.tpk-ph-copy textarea{width:100%; padding:10px 12px; border:1px solid var(--tp-rule,#D8CFBE); background:var(--tp-white,#fff); font:inherit; font-size:.8125rem; line-height:1.7; resize:vertical}
.tpk-ph-thx__next{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px}
/* 保存のあとの「この場所をもっと知る」（改善案28）。同じ場所の写真を4枚まで、その下にリンク */
.tpk-ph-thx__more{border-top:1px solid var(--tp-rule,#D8CFBE); padding-top:32px; margin-top:24px; display:flex; flex-direction:column; gap:16px}
.tpk-ph-thx__more .tpk-ph-h2{margin-bottom:0}
.tpk-ph-thx__cols{display:flex; flex-direction:column; gap:16px}
.tpk-ph-thx__col{display:flex; flex-direction:column; gap:16px}
/* 写真のページの「この場所をもっと知る」（本人 2026-09-28）。帯は下の「あわせて眺めたい写真」と同じ色。パソコンでは一覧と地図を左右に */
.tpk-ph-moreplace{background:var(--tp-kinari-hi,#FAF6EE); padding:0 0 48px}
.tpk-ph-thx__more--page{margin-top:0}
@media (min-width:1024px){
  .tpk-ph-thx__more--page .tpk-ph-thx__cols{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--tp-s5,64px); align-items:start}
}
/* 小見出し（同じ場所の写真・記憶壁紙の中で見る・地図。本人 2026-09-28） */
.tpk-ph-thx__sub{font-family:var(--tp-gothic,sans-serif); font-size:.8125rem; font-weight:500; letter-spacing:.12em; color:var(--tp-ink-sub,#5C574D); margin:16px 0 -4px}
/* 地図：押したときだけ Google マップを読み込む。読み込む前も同じ高さの枠を取る */
.tpk-ph-map{display:flex; flex-direction:column; gap:8px}
.tpk-ph-map__show,.tpk-ph-map iframe{display:block; width:100%; aspect-ratio:16 / 9; border:1px solid var(--tp-rule,#D8CFBE); box-sizing:border-box}
.tpk-ph-map__show{display:flex; align-items:center; justify-content:center; gap:10px; background:var(--tp-kinari-hi,#FAF6EE); color:var(--tp-ink,#22201C); font:inherit; font-family:var(--tp-mincho,serif); font-size:1rem; letter-spacing:.08em; cursor:pointer}
.tpk-ph-map__show:hover{border-color:var(--tp-green,#2F4F43); color:var(--tp-green,#2F4F43)}
.tpk-ph-map__show span{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--tp-ul-offset,.45em); text-decoration-color:var(--tp-ul-color);}  /* 押せると分かるよう、字から少し離した下線（2026-10-09 ご主人） */
.tpk-ph-map__show:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
.tpk-ph-map__note{margin:0; font-size:.75rem; color:var(--tp-ink-sub,#5C574D)}
/* 地図の色を落ち着かせる（本人 2026-09-28「モノクロみたいな落ち着いた色に」）。キーの要らない埋め込みは色を指定できないので、枠ごと色を抜いて少し茶に寄せる。
   目印の赤も薄くなるが、残るくらいにとどめる */
.tpk-ph-map iframe{filter:grayscale(.9) sepia(.18) contrast(.95) brightness(1.02)}
/* 押したあと地図へ移すフォーカスの線は、キーボードで動かしたときだけ（マウスや指で押した人には重く見えた。確認係） */
.tpk-ph-map iframe:focus:not(:focus-visible){outline:none}
.tpk-ph-map__note a{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--tp-ul-offset,.45em); text-decoration-color:var(--tp-ul-color);}  /* 「地図で見る」と同じく、字から少し離した下線（2026-10-09 ご主人。下線は今後もこの離し方で） */
@media (max-width:599px){ .tpk-ph-map__show,.tpk-ph-map iframe{aspect-ratio:4 / 3} }
.tpk-ph-thx__more .tpk-grid--photos{grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
/* 行の形（本人が選んだ案3）。罫線で区切り、目立たせすぎない（印と矢印は薄い色） */
.tpk-ph-thx__links{list-style:none; margin:0; padding:0; border-top:1px solid var(--tp-rule,#D8CFBE)}
.tpk-ph-thx__links a{display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 2px; border-bottom:1px solid var(--tp-rule,#D8CFBE); color:var(--tp-ink,#22201C); text-decoration:none}
.tpk-ph-thx__links svg{flex:none; color:var(--tp-ink-sub,#5C574D)}
.tpk-ph-thx__links b{font-family:var(--tp-mincho,serif); font-weight:500; letter-spacing:.06em; min-width:0}
.tpk-ph-thx__links small{margin-left:auto; flex:none; font-size:.75rem; color:var(--tp-ink-sub,#5C574D)}
.tpk-ph-thx__go{flex:none; width:1em; text-align:center; color:var(--tp-ink-sub,#5C574D)}
/* 題の下に小さく本の名前（同じ本の写真の行） */
.tpk-ph-thx__tt{display:flex; flex-direction:column; min-width:0}
.tpk-ph-thx__tt i{font-style:normal; font-size:.75rem; color:var(--tp-ink-sub,#5C574D); line-height:1.5}
.tpk-ph-thx__links a:hover b,.tpk-ph-thx__links a:focus-visible b{color:var(--tp-green,#2F4F43); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--tp-ul-offset,.45em); text-decoration-color:var(--tp-ul-color-hover);}
.tpk-ph-thx__links a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
@media (max-width:599px){ .tpk-ph-thx__more .tpk-grid--photos{grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 12px} }
@media (max-width:599px){ .tpk-ph-thx__next .tpk-cta{flex:1 1 100%} .tpk-share a{flex:1 1 calc(33% - 8px); min-width:0} }

/* 一覧の途中の広告の帯（横幅いっぱい。写真のカードと見分けがつくように） */
.tpk-grid > .tpk-grid__band{grid-column:1 / -1}
.tpk-grid__after{margin-top:var(--tp-s5,64px)}
.tpk-ph-adwrap{background:var(--tp-kinari-hi,#FAF6EE); padding:0 0 64px}
/* 解説の中の年の書き方（明治12年（1879年）など）は途中で折り返さない */
.tpk-nw{white-space:nowrap}
/* 「あわせて眺めたい写真」の上に置くとき（ABテストの A）。前後の区切りの線は、ほかの段とそろえる */
.tpk-ph-adwrap--above{border-top:1px solid var(--tp-rule,#D8CFBE); padding:40px 0}
.tpk-ph-thx .tpk-ad{margin-top:40px}   /* 主ボタンとは離す（2026-09-28、広告を「この場所をもっと知る」の上へ移した） */
/* ひとこと解説 */
.tpk-ph-blurb{margin-top:14px; font-size:.9375rem; line-height:1.9; max-width:36em}

/* 確認係の報告で直したもの（2026-09-24） */
/* 押せる小さなリンクも、指で押せる高さ（44px）に。見た目の大きさは変えず、押せる範囲だけ広げる */
.tpk-result__sort a,.tpk-result__clear,.tpk-card1__sub,.tpk-crumb a,.tpk-ph-more a,.tpk-ph-back a{display:inline-flex; align-items:center; min-height:44px}
.tpk-crumb{align-items:center}
/* 並べ方のリンクは、3文字（人気順）だと幅が 39px しかなかった。幅も指で押せる 44px に（2026-10-06 確認係） */
.tpk-result__sort a{min-width:44px; justify-content:center}
/* 種類ごとのページの題の上の戻り道。写真のページの下の戻り道（上の margin-top:40px）が効いて、手順の印との間が 90px ほど空いていた（2026-10-06 確認係）。
 * 押せる高さ 44px は残し、そのぶん上下を少し詰める */
.tpk-ph-head__text .tpk-ph-back{margin:-8px 0; font-size:.8125rem}
/* 0枚の札は押せない形（うすく） */
.tpk-chip[aria-disabled]{opacity:.45; cursor:default}
.tpk-chip[aria-disabled]:hover{border-color:var(--tp-rule,#D8CFBE); color:var(--tp-ink,#22201C)}
/* 年代・種類の札を畳む見出し（広い画面では目立たせない） */
.tpk-filter__more{display:flex; flex-direction:column; gap:12px}
.tpk-filter__more > summary{font-size:.8125rem; color:var(--tp-ink-sub,#5C574D); cursor:pointer; min-height:44px; display:flex; align-items:center; list-style-position:inside}
.tpk-filter__more[open] > summary{min-height:0}
@media (min-width:600px){ .tpk-filter__more > summary{display:none} }
/* 見つからないときの案内は、枠で囲まない（枠は手で操作する場所だけ） */
.tpk-empty{background:none; border:0; padding:0}

/* 帯の見本：出典は左、3rd-Party.jp は右（保存する画像と同じ並び） */
.tpk-ph-save__sample{display:flex; justify-content:space-between; gap:16px; text-align:left}

/*
 * 絞り込みの札を、品よく小さく（本人の依頼 2026-09-24「角が丸すぎ、大きすぎる」）。
 * 角はボタンと同じ 2px、見た目の高さは 32px。地は塗らず、罫だけ。数字は細く小さく添える。
 * 見た目は小さくしても、押せる範囲は ::after で広げて 44px を保つ。
 */
.tpk-chips{gap:6px}
.tpk-chip{
  position:relative; min-height:32px; padding:3px 11px; border-radius:2px; gap:7px;
  background:transparent; border-color:var(--tp-rule,#D8CFBE); font-size:.8125rem; letter-spacing:.04em; line-height:1.4;
}
.tpk-chip::after{content:""; position:absolute; inset:-6px -3px}
.tpk-chip small{font-size:.6562rem; letter-spacing:0; font-variant-numeric:tabular-nums; color:var(--tp-ink-sub,#5C574D); opacity:.85}
.tpk-chip:hover{background:var(--tp-kinari-hi,#FAF6EE); border-color:var(--tp-ink-sub,#5C574D); color:var(--tp-ink,#22201C)}
.tpk-chip[aria-current]{background:var(--tp-green,#2F4F43); border-color:var(--tp-green,#2F4F43); color:var(--tp-white,#fff)}
.tpk-chip[aria-current] small{color:var(--tp-white,#fff); opacity:.75}
.tpk-chip[aria-disabled]{opacity:.4}
.tpk-chip[aria-disabled]:hover{background:transparent; border-color:var(--tp-rule,#D8CFBE)}
.tpk-chip--x span{font-size:.75rem; opacity:.8}
.tpk-filter__row{align-items:center; gap:14px}
.tpk-filter__label{flex:0 0 2.6em; font-size:.6875rem; letter-spacing:.12em}
@media (max-width:599px){ .tpk-filter__row{align-items:flex-start; gap:6px} }
.tpk-filter__more{gap:10px}

/*
 * 写真のページの並びの組み直し（2026-09-24 本人の依頼）。
 * 左：名前・解説（上）と資料の情報（下）。右の列：壁紙をつくる（主）と写真を保存する を上下に。右の列は画面に残る
 */
.tpk-ph-info__grid{grid-template-areas:"head actions" "details actions"; row-gap:0}
.tpk-ph-info__head{grid-area:head}
.tpk-ph-info__details{grid-area:details}
.tpk-ph-actions{grid-area:actions; align-self:start; display:flex; flex-direction:column; gap:16px;
  position:sticky; top:calc(24px + var(--tpk-top, var(--wp-admin--admin-bar--height, 0px)))}
/* 解説は左の列の幅いっぱいに（幅を絞ったせいで、変なところで折り返していた） */
.tpk-ph-blurb{max-width:none; margin-top:16px}
.tpk-ph-make{padding:24px}
.tpk-ph-make p:not(.tpk-ph-kicker){font-size:.8125rem}
.tpk-ph-save{margin-top:0; padding:20px 24px; background:transparent; gap:10px}
.tpk-ph-save > p:not(.tpk-ph-kicker){font-size:.8125rem}
.tpk-ph-save__sample{font-size:10.5px !important}   /* 保存される帯の縮図。文字の大きさの設定では変えないので px のまま */
.tpk-ph-dl{margin-top:28px}
@media (max-width:1023px){
  .tpk-ph-info__grid{grid-template-areas:"head" "actions" "details"; row-gap:24px}
  .tpk-ph-actions{position:static}
  .tpk-ph-dl{margin-top:8px}
}
/* 右の列が2段ぶんの高さを持つので、余った高さは下の段（資料の情報）で受ける。名前と表のあいだが空きすぎないように */
.tpk-ph-info__grid{grid-template-rows:auto 1fr}
.tpk-ph-info__details{align-self:start}
/* 帯の見本の「3rd-Party.jp」は折り返さない */
.tpk-ph-save__sample span:last-child{white-space:nowrap}
@media (max-width:1023px){ .tpk-ph-info__grid{grid-template-rows:none} }
/* 右の列の並びを入れ替え（本人の決定 2026-09-24）：写真を保存する（上・主）、壁紙をつくる（下・線のボタン） */
.tpk-ph-save{background:var(--tp-kinari-hi,#FAF6EE); border:1px solid var(--tp-rule,#D8CFBE); padding:24px}
.tpk-ph-save h2,.tpk-ph-make h2{font-family:var(--tp-mincho,serif); font-weight:500; font-size:1.25rem; letter-spacing:.08em; line-height:1.5}
.tpk-ph-make{background:transparent; padding:20px 24px}
/* 写真を選ぶ一覧の注意書きは、幅を絞らない（変なところで折り返していた。本人の依頼） */
.tpk-scope{max-width:none}
/* 年代と種類の行のあいだ（details の中では gap が効かないので、行に余白を付ける。本人の依頼） */
.tpk-filter__more .tpk-filter__row + .tpk-filter__row{margin-top:14px}
.tpk-filter__more > summary + .tpk-filter__row{margin-top:4px}
@media (max-width:599px){ .tpk-filter__more .tpk-filter__row + .tpk-filter__row{margin-top:16px} }
/* 行のあいだは作る画面の選択肢（7〜8px）と同じくらいに（本人の依頼：開きすぎ） */
.tpk-filter__more .tpk-filter__row + .tpk-filter__row{margin-top:8px}
@media (max-width:599px){ .tpk-filter__more .tpk-filter__row + .tpk-filter__row{margin-top:10px} }

/* 見出しは行の長さをそろえ、1語だけが次の行に落ちないように（確認係の報告） */
.tpk-ph-wrap h1,.tpk-ph-wrap h2{text-wrap:balance}
/* 押せる範囲は上下に広げるが、行の高さは変えない（inline-flex の 44px で、その行だけ間が空いていた。スマホの確認係の報告） */
.tpk-scope a{display:inline; padding:12px 0; margin:-12px 0}
/* 絞り込みの札の押せる範囲を 44px に */
.tpk-chip::after{inset:-7px -3px}
/* 写真をそのまま保存しにくくする（長押しのメニュー・選択・ドラッグを出さない）。出典入りの保存へ案内するため */
.tpk-nosave{cursor:default}
.tpk-nosave img{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; pointer-events:auto}
.tpk-ph-figure figcaption a{margin-left:4px}

/* 冒頭の説明は幅を絞らない（40em で切ると、文の途中の変なところで折り返していた。本人の報告）。区切りは文の終わりの <br> で */
.tpk-ph-lead{max-width:none}

/* スマホで折り返すときも、ことばの途中で切らない（対応するブラウザだけ。ほかはいままでどおり） */
.tpk-ph-lead,.tpk-scope,.tpk-ph-blurb{word-break:auto-phrase}
/* 使い方の冒頭の文は <wbr> のところでだけ折り返す（TPK_Howto::lead_html） */
.tpk-ph-lead{word-break:keep-all; overflow-wrap:anywhere}


/*
 * 使い方（/howto/）。2026-09-24 本人と見直した組み方（大きな写真や横の写真はやめた）。
 *   冒頭 … 題と説明の下に、1→3 の流れを横に並べる（押すとその手順へ。帯の見た目は kioku-site.css にあり、トップの「使い方」と同じ）
 *   本文 … 左に手順の見出し、右に説明。ほかのページと同じ幅・左寄せ。説明は読みやすい幅（720px）まで
 *   写真 … 手順1の中に「たとえば、こんな写真から」として小さな正方形を5枚だけ
 */

.tpk-howto{list-style:none; margin:0; padding:0}
.tpk-howto > li,.tpk-howto__faqwrap{display:grid; grid-template-columns:280px minmax(0,1fr); column-gap:var(--tp-s5,64px);
  padding:var(--tp-s4,40px) 0; border-top:1px solid var(--tp-rule,#D8CFBE)}
.tpk-howto > li:first-child{border-top:0; padding-top:0}
.tpk-howto__h{display:flex; align-items:center; gap:12px; margin:0; font-family:var(--tp-mincho,serif); font-weight:500; font-size:1.25rem; letter-spacing:.08em; line-height:1.5; align-self:start}
.tpk-howto__body{max-width:720px}
.tpk-howto__body > p{font-size:.9375rem; line-height:1.9; margin:0}
.tpk-howto .tpk-howto__body > * + *{margin-top:16px}
.tpk-howto .tpk-howto__body > .tpk-howto__samples + *{margin-top:24px}
.tpk-howto__note{font-size:.8125rem !important; color:var(--tp-ink-sub,#5C574D)}

/* 手順1の写真（押すとその写真のページへ） */
.tpk-howto__samples-h{font-size:.75rem; color:var(--tp-ink-sub,#5C574D); margin:0 0 8px; letter-spacing:.04em}
.tpk-howto__samples ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.tpk-howto__samples a{display:block; width:80px; height:80px; overflow:hidden; background:var(--tp-kinari,#F2ECE0)}
.tpk-howto__samples img{display:block; width:100%; height:100%; object-fit:cover}
.tpk-howto__samples a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}

.tpk-howto__dev{display:grid; grid-template-columns:7em minmax(0,1fr); border-top:1px solid var(--tp-rule,#D8CFBE); margin:0}
.tpk-howto__dev dt,.tpk-howto__dev dd{margin:0; padding:12px 0; border-bottom:1px solid var(--tp-rule,#D8CFBE); line-height:1.8; font-size:.875rem}
.tpk-howto__dev dt{font-weight:700}

/*
 * よくある質問。2つのまとまり（小さな見出し）に分け、1問ずつ罫で区切る。
 * 問いの頭に Q（手順の番号と同じ深緑は使わず、薄墨の線で。押すところと見分けるため）。答えは問いの文の頭にそろえる
 */
.tpk-howto__faq{max-width:720px; margin:0}
.tpk-howto__faq-group{margin:0 0 4px; font-family:var(--tp-gothic,sans-serif); font-size:.75rem; font-weight:400; letter-spacing:.14em; color:var(--tp-ink-sub,#5C574D)}
.tpk-howto__faq dl + .tpk-howto__faq-group{margin-top:var(--tp-s4,40px)}
.tpk-howto__faq dl{margin:0; border-top:1px solid var(--tp-rule,#D8CFBE)}
.tpk-howto__qa{padding:20px 0; border-bottom:1px solid var(--tp-rule,#D8CFBE)}
.tpk-howto__qa dt{position:relative; padding-left:36px; font-weight:700; font-size:.9375rem; line-height:1.7; color:var(--tp-ink,#22201C)}
.tpk-howto__qa dt::before{content:"Q"; position:absolute; left:0; top:1px; display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  box-sizing:border-box; border:1px solid var(--tp-rule,#D8CFBE); background:var(--tp-kinari-hi,#FAF6EE);
  font-family:var(--tp-mincho,serif); font-size:.8125rem; font-weight:500; color:var(--tp-ink-sub,#5C574D)}
.tpk-howto__qa dd{margin:8px 0 0; padding-left:36px; font-size:.875rem; line-height:1.9; color:var(--tp-ink-sub,#5C574D)}
.tpk-howto__qa dd p{margin:0}
.tpk-howto__qa dd p + p{margin-top:8px}
.tpk-howto__ext a{display:inline-flex; align-items:center; min-height:44px; font-size:.8125rem}
@media (max-width:599px){ .tpk-howto__qa dt,.tpk-howto__qa dd{padding-left:32px} }

@media (max-width:1023px){
  .tpk-howto > li,.tpk-howto__faqwrap{grid-template-columns:200px minmax(0,1fr); column-gap:var(--tp-s3,24px)}
}
/* スマホ：流れは2×2に（山は出さない）。本文は見出しの下に説明 */
@media (max-width:767px){
  .tpk-howto > li,.tpk-howto__faqwrap{display:block; padding:var(--tp-s4,40px) 0}
  .tpk-howto > li:first-child{padding-top:0}
  .tpk-howto__h{margin-bottom:16px}
  .tpk-howto__samples ul{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px}
  .tpk-howto__samples a{width:auto; height:auto; aspect-ratio:1}
}
@media (max-width:599px){ .tpk-howto__dev{grid-template-columns:minmax(0,1fr)} .tpk-howto__dev dt{border-bottom:0; padding-bottom:0} }

/*
 * 保存の見本の帯（2026-09-24 本人の依頼）：出典は途中で折り返さず1行で、その下に右寄せで 3rd-Party.jp。
 * 右の列は狭いので、出典が入りきらないときは末尾を「…」に（見本なので。保存する画像には全部入る）
 */
.tpk-ph-save__sample{flex-direction:column; align-items:stretch; gap:2px}
.tpk-ph-save__sample span:first-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tpk-ph-save__sample span:last-child{align-self:flex-end}

/* 写真を選ぶ一覧は 4列 → 2列 の2段階（広告の帯を8枚のあとに入れるので、どの幅でも割り切れるように。確認係の指摘） */
@media (max-width:1023px){ .tpk-grid--pick{grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px 16px} }
@media (max-width:767px){ .tpk-grid--pick{grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 14px} }

/* 写真の保存の同意（チェックを入れてから保存する） */
.tpk-ph-save__form{display:flex; flex-direction:column; gap:10px; margin:0}
.tpk-ph-agree{display:flex; align-items:flex-start; gap:10px; min-height:44px; box-sizing:border-box; padding:10px 0; font-size:.8125rem; line-height:1.6; cursor:pointer}
.tpk-ph-agree input{flex:0 0 auto; width:20px; height:20px; margin:0; accent-color:var(--tp-green,#2F4F43)}
.tpk-ph-agree a{color:var(--tp-green,#2F4F43)}

/* 同意のチェックなしで来た人への知らせ（朱は注意だけに使う） */
.tpk-ph-need{margin:0; padding:10px 12px; border-left:2px solid var(--tp-vermilion,#9B4A33); background:var(--tp-white,#fff); font-size:.8125rem; line-height:1.7; color:var(--tp-ink,#22201C)}
/* 保存の欄の説明も、ことばの途中で折り返さない */
.tpk-ph-save p{word-break:auto-phrase}

/* 写真のページの、当時の表現についてのひと言 */
.tpk-ph-histnote{margin:16px 0 0; font-size:.75rem; line-height:1.8; color:var(--tp-ink-sub,#5C574D)}
.tpk-ph-histnote a{margin-left:8px; color:var(--tp-ink-sub,#5C574D); display:inline-flex; align-items:center; min-height:44px}

/* ことばの途中で折り返さない（残っていたところ。確認係の指摘） */
.tpk-ph-meta,.tpk-howto__qa dd,.tpk-howto__qa dt,.tpk-ph-histnote{word-break:auto-phrase}

/* 写真の解説（この写真について）。本文と同じ読みやすさで、資料の情報の上に */
.tpk-ph-note{margin:28px 0 0; max-width:40em}
.tpk-ph-note h2{font-family:var(--tp-mincho,serif); font-weight:500; font-size:1.125rem; letter-spacing:.08em; line-height:1.5; margin:0 0 10px}
.tpk-ph-note p{margin:0; font-size:.9375rem; line-height:1.95; color:var(--tp-ink,#22201C); word-break:auto-phrase}
.tpk-ph-note p + p{margin-top:12px}
/* 解説を名前のすぐ下に移した（2026-10-06）。上の空きは margin でなく padding で取る（ひとこと解説の下の余白と重ならず、前と同じ空きになる） */
.tpk-ph-info__head .tpk-ph-note{margin-top:0; padding-top:28px}

/*
 * この写真をSNSに投稿する（写真を保存する の下。2026-09-25 本人の依頼）。
 * 悪目立ちしないように、箱は付けず、小さな見出しと墨色の細い線のアイコンだけ。押せる大きさは 44px。
 * 名前は読み上げ用に残し、目には見せない（指を乗せると title で名前が出る）
 */
.tpk-ph-sns{padding:4px 24px 8px}
.tpk-ph-sns__h{margin:0 0 10px; font-family:var(--tp-gothic,sans-serif); font-size:.75rem; font-weight:400; letter-spacing:.14em; line-height:1.6; color:var(--tp-ink-sub,#5C574D)}
.tpk-ph-sns__list{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px; max-width:300px}
.tpk-ph-sns__list a{display:flex; align-items:center; justify-content:center; box-sizing:border-box; height:44px;
  border:1px solid var(--tp-rule,#D8CFBE); border-radius:2px; background:transparent; color:var(--tp-ink-sub,#5C574D); text-decoration:none;
  transition:border-color .15s ease, color .15s ease}
.tpk-ph-sns__list a .tpk-share-ico{color:inherit}
.tpk-ph-sns__list a:hover{border-color:var(--tp-green,#2F4F43); color:var(--tp-green,#2F4F43)}
.tpk-ph-sns__list a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
.tpk-ph-sns__list span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:1023px){ .tpk-ph-sns{padding:0} .tpk-ph-sns__list{max-width:360px} }
@media (prefers-reduced-motion:reduce){ .tpk-ph-sns__list a{transition:none} }
/*
 * SNS の欄の置き方（2026-09-26 本人の依頼）：上にも、下（区切りの線まで）と同じくらいの間をとり、
 * 中身は左寄せのまま、ひとかたまりで右の列の真ん中に
 */
.tpk-ph-sns{box-sizing:border-box; width:300px; max-width:100%; margin-inline:auto; padding:40px 0 0}
.tpk-ph-sns__list{max-width:none}
@media (max-width:1023px){ .tpk-ph-sns{width:360px; padding:16px 0 8px} }
/* LINE は、吹き出しのアイコンだけでは分かりにくいので、アイコンの代わりに「LINE」の文字で（2026-09-26 本人の依頼） */
.tpk-ph-sns__list a[data-sns="LINE"] .tpk-share-ico{display:none}
.tpk-ph-sns__list a[data-sns="LINE"] span{position:static; width:auto; height:auto; overflow:visible; clip:auto;
  font-family:Arial,Helvetica,sans-serif; font-size:.6875rem; font-weight:700; letter-spacing:.04em; line-height:1}

/*
 * 今日の一枚と写真のページの名前は、ことばの切れ目（<wbr> を入れたところ）でだけ折り返す（2026-09-26 本人の依頼）。
 * 切れ目がなく入りきらない長い名前だけは、はみ出さないように、どこででも折り返す
 */
.tpk-ph-today__name,.tpk-ph-name{word-break:keep-all; overflow-wrap:anywhere}

/*
 * よくある質問の左の列：見出し「よくある質問」の下に、利用規約の目次のような一覧（2026-09-26 本人の依頼）。
 * まとまりの名前の下に、その中の質問。広い画面では画面に付いてくる。狭い画面では閉じた「質問の一覧」の箱
 */
.tpk-howto__faqside{align-self:start; position:sticky; top:calc(24px + var(--tpk-top, var(--wp-admin--admin-bar--height, 0px)));
  max-height:calc(100vh - 48px - var(--tpk-top, var(--wp-admin--admin-bar--height, 0px))); overflow:auto}
.tpk-howto__toc{margin-top:20px; font-size:.8125rem}
.tpk-howto__toc summary{display:none}
.tpk-howto__toc ol{list-style:none; margin:0; padding:0}
.tpk-howto__toc > details > ol{border-left:1px solid var(--tp-rule,#D8CFBE)}
.tpk-howto__toc > details > ol > li + li{margin-top:12px}
.tpk-howto__toc a{display:flex; align-items:center; min-height:36px; padding:4px 0 4px 16px; margin-left:-1px; border-left:1px solid transparent;
  color:var(--tp-ink-sub,#5C574D); text-decoration:none; line-height:1.5; word-break:auto-phrase}
.tpk-howto__toc a.tpk-howto__toc-g{font-size:.75rem; letter-spacing:.14em; color:var(--tp-ink,#22201C); min-height:32px}
.tpk-howto__toc ol ol a{padding-left:28px}
.tpk-howto__toc a:hover{color:var(--tp-green,#2F4F43); border-left-color:var(--tp-green,#2F4F43)}
.tpk-howto__toc a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
/* 1023px 以下は、利用規約の目次と同じく閉じた「質問の一覧」の箱に（2026-09-26 本人の決定）。質問は見出しと箱の下に1列で */
@media (max-width:1023px){
  .tpk-howto__faqwrap{display:block}
  .tpk-howto__faqside{position:static; max-height:none; overflow:visible}
  .tpk-howto__toc{margin:16px 0 var(--tp-s4,40px); border:1px solid var(--tp-rule,#D8CFBE); background:var(--tp-kinari-hi,#FAF6EE)}
  .tpk-howto__toc summary{display:flex; align-items:center; min-height:48px; padding:0 16px; cursor:pointer; font-size:.875rem; color:var(--tp-ink,#22201C)}
  .tpk-howto__toc summary::after{content:"＋"; margin-left:auto; color:var(--tp-ink-sub,#5C574D)}
  .tpk-howto__toc details[open] summary::after{content:"－"}
  .tpk-howto__toc > details > ol{border-left:0; padding:0 16px 12px}
  .tpk-howto__toc a{padding-left:0; border-left:0; margin-left:0; min-height:44px}
  .tpk-howto__toc ol ol a{padding-left:12px}
  .tpk-howto__toc a.tpk-howto__toc-g{min-height:44px}
}
/* 左の一覧のスクロールバーは見せない（2026-09-26 本人の依頼）。画面より長いときも、ホイールや指では動かせる */
.tpk-howto__faqside{scrollbar-width:none; -ms-overflow-style:none}
.tpk-howto__faqside::-webkit-scrollbar{display:none}

/* みんなの壁紙の一覧：古写真と錦絵の見出し（2026-09-26 本人の依頼） */
.tpk-works-sec + .tpk-works-sec{margin-top:var(--tp-s5,64px); padding-top:var(--tp-s4,40px); border-top:1px solid var(--tp-rule,#D8CFBE)}
.tpk-works-sec__h{margin:0 0 16px; font-family:var(--tp-mincho,serif); font-weight:500; font-size:1.375rem; letter-spacing:.08em; line-height:1.5}
.tpk-works-sec{scroll-margin-top:calc(16px + var(--tpk-top, var(--wp-admin--admin-bar--height, 0px)))}
/* 写真を選ぶ（/kabegami/）の節で、その条件に合うものが無いとき（2026-09-25） */
.tpk-works-sec__none{margin:0; font-size:.9375rem; color:var(--tp-ink-sub,#6B645A)}

/* ------------------------------------------------------------------
 * 写真を選ぶ（/kabegami/）：古写真と錦絵を並べる（2026-09-25 本人の依頼）
 *   パソコン … 左に古写真、右に錦絵。どちらも3列（前の4列のカードの3分の2ほど）。文字も小さめにそろえる
 *   タブレット・スマホ … 上の「古写真｜錦絵」で片方ずつ。カードはタブレット4列・スマホ2列
 *     （スマホで3列にすると写真が 100px ほどになり、古い写真の見分けがつきにくいため2列のまま）
 * ------------------------------------------------------------------ */
/* 左右の余白を両方の列に同じだけ持たせる（右の列だけ余白を足していたので、錦絵のカードが古写真より小さかった。本人の指摘） */
.tpk-pick-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0}
.tpk-pick-col:first-child{padding-right:40px}
.tpk-pick-col + .tpk-pick-col{border-left:1px solid var(--tp-rule,#D8CFBE); padding-left:40px}
.tpk-pick-col{min-width:0; scroll-margin-top:calc(16px + var(--tpk-top, var(--wp-admin--admin-bar--height, 0px)))}
.tpk-pick-col__h{margin:0 0 18px; font-family:var(--tp-mincho,serif); font-weight:500; font-size:1.375rem; letter-spacing:.08em; line-height:1.5}
.tpk-pick-col__h small{margin-left:12px; font-family:var(--tp-sans,sans-serif); font-size:.8125rem; font-weight:400; letter-spacing:0; color:var(--tp-ink-sub,#5C574D)}
.tpk-grid--pick3{grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px 16px; margin:0}
.tpk-grid--pick3 .tpk-card1__img{margin-bottom:4px}
/* 名前は2行の長さをそろえて折り返す（ことばの切れ目で折る指定だと、入りきらないとき「…南大／門」のように1字だけ落ちた）。場所と「写真を見る」は 12px（11px は小さすぎた。どちらも確認係の報告） */
.tpk-grid--pick3 .tpk-card1__name{font-size:.875rem; letter-spacing:.04em; line-height:1.45; word-break:keep-all; overflow-wrap:anywhere}
.tpk-grid--pick3 .tpk-card1__meta{font-size:.75rem; line-height:1.5}
/*
 * カードの高さをそろえる（文字の量で段がずれていた。2026-09-25 本人の依頼）。
 * 名前は2行ぶんの高さを取り、それより長いときは「…」で切る。場所と時期は1行ずつ、はみ出す分は「…」
 */
/* 名前の場所は2行ぶん。1行のときは、その上下の真ん中に（場所の行との間が空きすぎて見えないように。本人の依頼） */
.tpk-grid--pick3 .tpk-card1__name{display:flex; flex-direction:column; justify-content:center; min-height:2.9em}
.tpk-grid--pick3 .tpk-card1__nm{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
/* （ ）のある題：本体は1行、（ ）の中は小さな字で次の行に。どちらも入りきらなければ「…」 */
.tpk-grid--pick3 .tpk-card1__name.has-sub .tpk-card1__nm{-webkit-line-clamp:1}
/* 英語のページの題（言語の表）は1行に収め、はみ出す分は「…」。どのカードも同じ高さになるように */
.tpk-grid--pick3 .tpk-reading{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 0 .25em}
.tpk-grid--pick3 .tpk-card1__nsub{display:block; text-indent:-.5em; font-size:.6875rem; line-height:1.5; letter-spacing:.02em; color:var(--tp-ink-sub,#5C574D); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tpk-grid--pick3 .tpk-card1__place,.tpk-grid--pick3 .tpk-card1__year{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tpk-grid--pick3 .tpk-card1__go{font-size:.75rem; margin-top:2px}
.tpk-grid--pick3 .tpk-card1__sub{font-size:.75rem}
.tpk-pick-col .tpk-pager{margin-top:24px}
.tpk-pick-switch{display:none}

@media (max-width:1023px){
  .tpk-pick-cols{grid-template-columns:minmax(0,1fr); gap:40px}
  .tpk-pick-col:first-child{padding-right:0}
  .tpk-pick-col + .tpk-pick-col{border-left:0; padding-left:0}
  .tpk-grid--pick3{grid-template-columns:repeat(4, minmax(0,1fr))}
  /* 切り替え：画面の上に付いてくる2つのボタン（指で押しやすい 48px） */
  .tpk-pick-switch{
    display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0 0 20px;
    position:sticky; top:var(--tpk-top, var(--wp-admin--admin-bar--height, 0px)); z-index:5;
    background:var(--tp-kinari-hi,#FAF6EE); border:1px solid var(--tp-green,#2F4F43); border-radius:2px;
  }
  .tpk-pick-switch__b{
    display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
    font-size:.9375rem; font-weight:600; letter-spacing:.06em; color:var(--tp-green,#2F4F43); text-decoration:none;
  }
  .tpk-pick-switch__b small{font-size:.75rem; font-weight:400}
  .tpk-pick-switch__b + .tpk-pick-switch__b{border-left:1px solid var(--tp-green,#2F4F43)}
  .tpk-pick-switch__b[aria-current="true"]{background:var(--tp-green,#2F4F43); color:var(--tp-white,#fff)}
  .tpk-pick-cols.is-switch[data-show="pick-photo"] #pick-nishikie,
  .tpk-pick-cols.is-switch[data-show="pick-nishikie"] #pick-photo{display:none}
  .tpk-pick-cols.is-switch .tpk-pick-col__h{font-size:1.125rem; margin-bottom:14px}
  /* ページ送りで見出しへ飛んだとき、上に付いてくる切り替え（高さ 50px）の下に隠れないように（確認係の報告） */
  .tpk-pick-col{scroll-margin-top:calc(66px + var(--tpk-top, var(--wp-admin--admin-bar--height, 0px)))}
}
/* 600〜767px は3列（4列だと写真が小さく、599px の2列との差も大きかった。確認係の報告） */
@media (max-width:767px){ .tpk-grid--pick3{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:599px){
  .tpk-grid--pick3{grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 14px}
  .tpk-grid--pick3 .tpk-card1__name{font-size:.9375rem}
  .tpk-grid--pick3 .tpk-card1__meta{font-size:.75rem}
}
/* 1024〜1199px は、古写真・錦絵それぞれ2列（3列だと写真がスマホより小さく窮屈だった。確認係の報告） */
@media (min-width:1024px) and (max-width:1199px){ .tpk-grid--pick3{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* スマホの見直し（確認係 2026-09-25）：入力欄は 16px 以上に（iPhone が押すたびに拡大しないように）。同意の四角も少し大きく */
@media (max-width:781px){
  .tpk-filter input[type=search],.tpk-filter select{font-size:1rem}
}
.tpk-ph-agree input{width:22px; height:22px}

/*
 * 右の列の並びを入れ替え（2026-09-26 本人の決定）：壁紙をつくる（上・主・地の色の箱）、写真を保存する（下・線のボタン）。
 * このサイトの本題は壁紙なので、そちらを先に
 */
.tpk-ph-make{background:var(--tp-kinari-hi,#FAF6EE); border:1px solid var(--tp-rule,#D8CFBE); padding:24px}
.tpk-ph-save{background:transparent; padding:20px 24px}

/* 使い方：保存したあとの「壁紙に設定する」は、手順の数に入れない見出し（番号なし。2026-09-26） */
.tpk-howto__h--after{font-size:1.125rem}

/*
 * 古写真・錦絵ギャラリーも、スマホでは2列に（2026-09-26 本人の決定。1列・30枚でページが約12,600px と長かった）。
 * 名前は2行まで、場所と時期は1行に収める（写真を選ぶ一覧と同じ考え方）
 */
@media (max-width:599px){
  .tpk-ph-list .tpk-grid--photos{grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 14px}
  .tpk-ph-list .tpk-card4__img{margin-bottom:4px}
  .tpk-ph-list .tpk-card4__name{font-size:.9375rem; letter-spacing:.04em; line-height:1.45;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden}
  .tpk-ph-list .tpk-card4__meta{font-size:.7188rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}

/* 人気順のときだけ、何の数で並べたかを小さく添える（2026-09-26） */
.tpk-result__why{display:block; margin-top:2px; font-size:.7188rem; color:var(--tp-ink-sub,#5C574D)}

/*
 * 壁紙にされた数・ダウンロードの数（2026-09-26 本人の依頼）。数字だけ明朝で少し大きく、ほかは小見出しと同じ小さなゴシック。
 * まだ誰も壁紙にしていない写真は、「世界に一つだけの壁紙」を深緑で添える（大げさにせず、1行の案内として）
 */
.tpk-ph-make .tpk-ph-made{display:flex; flex-wrap:wrap; gap:4px 18px; margin:0; padding:10px 0; border-top:1px solid var(--tp-rule,#D8CFBE); border-bottom:1px solid var(--tp-rule,#D8CFBE);
  font-size:.75rem !important; letter-spacing:.08em; color:var(--tp-ink-sub,#5C574D) !important}
.tpk-ph-made span{display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap}
.tpk-ph-made b{font-family:var(--tp-mincho,serif); font-size:1.25rem; font-weight:500; letter-spacing:.02em; color:var(--tp-ink,#22201C); font-variant-numeric:tabular-nums}
.tpk-ph-make .tpk-ph-first{margin:0; padding:10px 0 10px 12px; border-left:2px solid var(--tp-green,#2F4F43); font-size:.8125rem !important; line-height:1.85; color:var(--tp-ink-sub,#5C574D) !important}
.tpk-ph-first strong{font-family:var(--tp-mincho,serif); font-weight:500; font-size:.9375rem; letter-spacing:.06em; color:var(--tp-green,#2F4F43)}

/* ギャラリーのカードの場所と時期は、切らずに2行まで（1行だと「明治12年1…」のように月が消えた） */
@media (max-width:599px){
  .tpk-ph-list .tpk-card4__meta{white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden}
}
/* 「世界に一つだけの壁紙に なる……かもしれません。」は、ことばの途中で折り返さない */
.tpk-ph-first{word-break:auto-phrase}
.tpk-ph-first strong,.tpk-ph-first__nw{white-space:nowrap}
/* よくある質問の「このサイトについて」へ飛んだとき、上の帯に隠れないように */
.tpk-howto__anchor{display:block; height:0; scroll-margin-top:calc(24px + var(--tpk-top, var(--wp-admin--admin-bar--height, 0px)))}

/*
 * 写真のページの、出典の下のラベル（時代・種類・都道府県。2026-09-26 本人の依頼）。押すと、その条件の一覧へ。
 * 札は細い罫の四角で控えめに（絞り込みの札と同じ考え方）。指で押せる高さは ::after で広げる
 */
.tpk-ph-tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:12px 0 0; padding:0}
.tpk-ph-tags li{margin:0}
.tpk-ph-tags a{position:relative; display:inline-flex; align-items:center; min-height:30px; padding:2px 12px; box-sizing:border-box;
  border:1px solid var(--tp-rule,#D8CFBE); border-radius:2px; background:transparent;
  font-size:.75rem; letter-spacing:.08em; line-height:1.4; color:var(--tp-ink-sub,#5C574D); text-decoration:none}
.tpk-ph-tags a::after{content:""; position:absolute; inset:-7px -4px}
.tpk-ph-tags a:hover{border-color:var(--tp-green,#2F4F43); color:var(--tp-green,#2F4F43); background:var(--tp-kinari-hi,#FAF6EE)}
.tpk-ph-tags a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
/* ラベルは資料の表（撮影時期）のすぐ下に（2026-09-26 本人の依頼） */
.tpk-ph-dl + .tpk-ph-tags{margin-top:14px}
/* 「世界に一つだけの壁紙」は朱で（2026-09-26 本人の依頼。朱は第一弾の札と同じ、ここぞというところだけに使う） */
.tpk-ph-first strong{color:var(--tp-vermilion,#9B4A33)}

/* ------------------------------------------------------------------
 * ギャラリーの題の横の「今日の5枚」（2026-09-26 本人の依頼「大小ランダムに黄金比で整然と」）
 * 全体は黄金比（1.618:1）、中の5枚はどれも白銀比（1.414:1。A4 の紙と同じ）の横長（同日、本人「全体的なバランスは黄金比率、でも5枚の画像は白銀比」）。
 * 黄金比の長方形を白銀比の長方形だけでぴったり埋めることはできないので、5枚とも白銀比に近くなる割り方を計算で選んだ
 * （枠のすき間 4px を入れて実際に測ると、a 1.40・b 1.36〜1.37・c 1.37〜1.38・d と e 1.42〜1.43。白銀比 1.414 から 4% 以内。確認係）：
 *   列の幅  .465 ： .465 ： .688（合わせて 1.618）　　段の高さ .51 ： .16 ： .33（合わせて 1。右の2つは、あいだのすき間の分だけ上を少し高くして同じ大きさに）
 *   a＝左上の大きな横長、b・c＝右の中くらいの横長2つ、d・e＝左下の小さな横長2つ
 * どの写真がどの枠に入るかは日ごとにかわる。写真は枠いっぱいに切り抜いて見せる（押すとその写真のページ）
 * ------------------------------------------------------------------ */
.tpk-ph-head__top{display:block}
.tpk-ph-head__top.has-golden{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--tp-s5,64px); align-items:end}
.tpk-ph-head__text{display:flex; flex-direction:column; gap:18px}
.tpk-golden{list-style:none; margin:0; padding:0; display:grid; gap:4px; width:clamp(320px, 38vw, 440px); aspect-ratio:1.618 / 1;
  grid-template-columns:.465fr .465fr .688fr; grid-template-rows:.51fr .16fr .33fr;
  grid-template-areas:"a a b" "a a c" "d e c"}
.tpk-golden li{min-width:0; min-height:0; overflow:hidden; background:var(--tp-kinari-hi,#FAF6EE)}
.tpk-golden li:nth-child(1){grid-area:a}
.tpk-golden li:nth-child(2){grid-area:b}
.tpk-golden li:nth-child(3){grid-area:c}
.tpk-golden li:nth-child(4){grid-area:d}
.tpk-golden li:nth-child(5){grid-area:e}
.tpk-golden a{display:block; width:100%; height:100%}
.tpk-golden img{display:block; width:100%; height:100%; object-fit:cover}
.tpk-golden a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
/* タブレットとスマホ：題と説明の下に、幅いっぱいで */
@media (max-width:899px){
  .tpk-ph-head__top.has-golden{display:flex; flex-direction:column; align-items:stretch; row-gap:20px}
  .tpk-golden{width:100%; max-width:560px}
}
/* 絞り込みの段の名前は3文字（被写体）まで1行に（2.6em の幅では「被写／体」と折れた） */
.tpk-filter__label{flex:0 0 3.8em; white-space:nowrap}   /* 3つの段でボタンの始まりをそろえるため、幅は同じに */
/* 599px 以下は名前が上・ボタンが下の縦並びなので、幅の指定が高さに効いてすき間が広がった（確認係）。ここでは元の大きさに */
@media (max-width:599px){ .tpk-filter__label{flex-basis:auto} }
/* 題の横の5枚があるときは、題と説明を5枚の上下の真ん中に（横に並ぶ 900px 以上だけ。狭い幅に効くと題が真ん中に寄った。確認係） */
@media (min-width:900px){ .tpk-ph-head__top.has-golden{align-items:center} }
/* ボタンが2行以上に折れたとき、段の名前は1行目の横に（段の上下の真ん中だと、2行目の横に来て読みにくかった。確認係）。
 * 名前の行の高さをボタン1つ分（32px）にして、1行目のボタンと上下の真ん中をそろえる */
@media (min-width:600px){
  .tpk-filter__row{align-items:flex-start}
  .tpk-filter__label{line-height:32px}
}

/* ------------------------------------------------------------------
 * 絞り込みの帯（2026-09-26 本人の依頼「ラベルが増えて広くなったので、畳んでクリックで広がるように」）
 * 写真の素材サイトや宿の予約サイトと同じ形：「年代 ▾」「種類 ▾」「被写体 ▾」のボタンを1行に並べ、押すとその下に札が開く。
 * 開くのは一度に1つ。選んでいるときはボタンに「年代：明治」と出して深緑の線に。スクリプトが動かないときは、札は全部開いたまま
 * 探す欄は題と説明のすぐ下（今日の5枚の左）に移した
 * ------------------------------------------------------------------ */
.tpk-filter--find{margin-top:6px}
.tpk-filter--bar{gap:0}
.tpk-fbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.tpk-fbtn{display:inline-flex; align-items:center; gap:10px; min-height:44px; box-sizing:border-box; padding:6px 14px;
  border:1px solid var(--tp-rule,#D8CFBE); border-radius:2px; background:var(--tp-kinari-hi,#FAF6EE); color:var(--tp-ink,#22201C);
  font-family:var(--tp-gothic,sans-serif); font-size:.875rem; letter-spacing:.04em; line-height:1.3; cursor:pointer}
.tpk-fbtn b{font-weight:700; color:var(--tp-green,#2F4F43)}
.tpk-fbtn:hover{border-color:var(--tp-green,#2F4F43)}
.tpk-fbtn.is-set{border-color:var(--tp-green,#2F4F43)}
.tpk-fbtn[aria-expanded="true"]{border-color:var(--tp-ink,#22201C); background:var(--tp-white,#fff)}
.tpk-fbtn:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
.tpk-fbtn__mark{flex:none; color:var(--tp-ink-sub,#5C574D); transition:transform .2s}
.tpk-fbtn[aria-expanded="true"] .tpk-fbtn__mark{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .tpk-fbtn__mark{transition:none} }
.tpk-fclear{display:inline-flex; align-items:center; min-height:44px; margin-left:4px; font-size:.8125rem; color:var(--tp-ink-sub,#5C574D)}
.tpk-fpanel{margin-top:10px; padding:16px 18px 18px; background:var(--tp-kinari-hi,#FAF6EE); border:1px solid var(--tp-rule,#D8CFBE)}
.tpk-fpanel__h{margin:0 0 10px; font-size:.75rem; letter-spacing:.12em; color:var(--tp-ink-sub,#5C574D)}
.is-js .tpk-fpanel{display:none}
.is-js .tpk-fpanel.is-open{display:block}
.is-js .tpk-fpanel__h{display:none}   /* ボタンが見出しの代わりになる */
.tpk-fgroup{margin-top:16px}
.tpk-fgroup__h{margin:0 0 8px; font-size:.75rem; letter-spacing:.08em; color:var(--tp-ink-sub,#5C574D)}
/* スマホ：3つのボタンを同じ幅で1行に。「絞り込みを外す」は次の行の右 */
@media (max-width:599px){
  .tpk-fbar .tpk-fbtn{flex:1 1 auto; justify-content:space-between; padding:6px 10px; font-size:.8125rem; min-width:0}
  .tpk-fbtn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .tpk-fclear{flex:1 1 100%; justify-content:flex-end; margin:0}
  .tpk-fpanel{padding:14px 12px 16px}
}
/* 899px 以下（題と5枚が縦に並ぶ幅）では、探す欄と絞り込みの帯を続けて置き、今日の5枚はそのあとに（探す道具を1か所にまとめる）。
 * 見出しの入れ物を display:contents にして、中身を並べ替える */
@media (max-width:899px){
  .tpk-ph-head__top.has-golden{display:contents}
  .tpk-ph-head__text{order:1}
  .tpk-filter--bar{order:2}
  .tpk-golden{order:3}
  .tpk-scope{order:4}
}

/* ------------------------------------------------------------------
 * みんなの壁紙の題の横の、作られた壁紙の見本5つ（2026-09-26 本人の依頼）。
 * 高さはギャラリーの今日の5枚と同じ（幅 clamp(320px, 38vw, 440px) ÷ 1.618）。壁紙は縦長 9:20 のまま、紙のような薄い影で
 * ------------------------------------------------------------------ */
.tpk-wall5{list-style:none; margin:0; padding:0; display:flex; gap:10px; height:calc(clamp(320px, 38vw, 440px) / 1.618)}
.tpk-wall5 li{height:100%; aspect-ratio:9 / 20; flex:none}
.tpk-wall5 a{display:block; height:100%; box-shadow:0 4px 14px rgba(34,32,28,.14)}
.tpk-wall5 a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:3px}
.tpk-wall5 img{display:block; width:100%; height:100%; object-fit:cover; background:var(--tp-kinari-hi,#FAF6EE)}
/* 899px 以下：題と説明の下に、幅いっぱいで5つ（数が少ないときは左から） */
@media (max-width:899px){
  .tpk-wall5{order:3; height:auto; width:100%; max-width:560px}
  .tpk-wall5 li{flex:1 1 0; height:auto; min-width:0}
  .tpk-wall5 a,.tpk-wall5 img{height:auto; aspect-ratio:9 / 20}
}

/* ------------------------------------------------------------------
 * 見出しの帯の高さをそろえる（古写真ギャラリー・錦絵ギャラリー・壁紙をつくる・みんなの壁紙・使い方。2026-09-27 本人の依頼）。
 * 基準は右の5枚の高さ（幅 clamp(320px, 38vw, 440px) ÷ 1.618）。絞り込みの帯は数に入れない。
 * 5枚が出ないときも、使い方（題・説明・手順の帯）も、この高さにして中身を上下の真ん中に。横に並ぶ 900px 以上だけ
 * ------------------------------------------------------------------ */
.tpk-ph-head{--tpk-head-h:calc(clamp(320px, 38vw, 440px) / 1.618)}
@media (min-width:900px){
  .tpk-ph-head__top{min-height:var(--tpk-head-h); display:flex; flex-direction:column; justify-content:center}
  .tpk-ph-head__top.has-golden{display:grid}
  .tpk-ph-head--howto .tpk-ph-in{min-height:var(--tpk-head-h); justify-content:center}
}
/* 900〜1199px では、探す欄が2段に折れて古写真ギャラリーの見出しの帯だけ高くなった。地域の選択を細くして1段に収める */
@media (min-width:900px) and (max-width:1199px){
  .tpk-ph-head__text .tpk-filter__q{flex-basis:170px}
  .tpk-ph-head__text .tpk-filter__area{flex:0 1 150px}
  .tpk-ph-head__text .tpk-filter__find .tpk-cta{padding:10px 16px}
}
/* 見本の文字の色は、保存される帯と同じ色のまま（「保存」の節の文の色の指定のほうが強く、墨の画面で見本の文字だけ薄くなった。確認係） */
.tpk-ph-save > p.tpk-ph-save__sample{color:var(--tpk-sample-ink,#5C574D)}
/* スクリプトが動かないときは、札が全部開いているので、押しても何も起きないボタンは出さない（確認係） */
.tpk-filter--bar:not(.is-js) .tpk-fbtn{display:none}

/*
 * 画像の左右の矢印（前・次の写真へ。2026-09-26 本人の依頼）と、画像の下の出典。
 *   広い画面 … 「矢印 | 画像と出典 | 矢印」の3列。矢印は枠も地の色も付けない細い線だけ（色は薄墨、指が乗ったら深緑、押せる大きさ 44px）。
 *               画像と出典の箱（figure）は画像の幅に合わせて中央に置き、出典の文は画像の左端から始まる
 *   スマホ（781px 以下）… 画像 → 出典 → 「前の写真・次の写真」のボタン → 「出典入りで保存する」（中央）
 */
.tpk-ph-stage{display:grid; grid-template-columns:48px minmax(0,1fr) 48px; grid-template-areas:"prev fig next"; align-items:center; column-gap:var(--tp-s2,16px)}
.tpk-ph-stage > .tpk-ph-figure{grid-area:fig; justify-self:center; width:fit-content; max-width:100%}
/* 出典の行は、画像より広げない（長いときは画像の幅の中で折り返す） */
.tpk-ph-stage > .tpk-ph-figure figcaption{width:0; min-width:100%}
.tpk-ph-arrow{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  color:var(--tp-ink-sub,#5C574D); text-decoration:none}
.tpk-ph-arrow--prev{grid-area:prev; justify-self:start}
.tpk-ph-arrow--next{grid-area:next; justify-self:end}
.tpk-ph-arrow__t{display:none}
a.tpk-ph-arrow:hover{color:var(--tp-green,#2F4F43); background:var(--tp-kinari-hi,#FAF6EE)}
a.tpk-ph-arrow:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
/* 出典の文と「出典入りで保存する」のあいだ（前は全角の空白で空けていた） */
.tpk-ph-figure figcaption .tpk-ph-savelink{margin-left:calc(1em + 4px)}
@media (max-width:781px){
  /* 画像の箱と出典の行の枠を外し（display:contents）、中身を .tpk-ph-stage の格子に直接並べる */
  .tpk-ph-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"img img" "credit credit" "prev next" "save save"; gap:0}
  .tpk-ph-stage > .tpk-ph-figure,.tpk-ph-stage > .tpk-ph-figure figcaption{display:contents}
  .tpk-ph-figure__img{grid-area:img}
  /* スマホでは出典を中央に（縦長の写真は画像が中央に細く出るので、左にそろえると画像とずれる。下の「出典入りで保存する」とも中央でそろう） */
  .tpk-ph-credit{grid-area:credit; margin-top:10px; text-align:center; word-break:auto-phrase}
  /*
   * スマホの矢印は、文字の付いたボタンに（2026-09-26 本人の依頼：操作のしやすさ）。細い矢印だけだと押す場所が分かりにくく、指も外しやすい。
   * 左右に半分ずつ、高さ 48px。見た目は罫の色の細い枠と墨の字（404 の行き先と同じ静かな形）。端の写真で片方が無いときは、その側は空く
   */
  .tpk-ph-arrow{width:auto; height:auto; margin-top:12px}
  a.tpk-ph-arrow{display:flex; gap:6px; min-height:48px; padding:0 12px; border:1px solid var(--tp-rule,#D8CFBE); border-radius:2px;
    color:var(--tp-ink,#22201C); font-size:.8125rem; font-weight:500; letter-spacing:.04em}
  a.tpk-ph-arrow:hover{background:transparent; border-color:var(--tp-green,#2F4F43); color:var(--tp-green,#2F4F43)}
  a.tpk-ph-arrow svg{width:18px; height:18px; flex:0 0 auto}
  .tpk-ph-arrow--prev{justify-self:stretch; justify-content:flex-start; margin-right:6px}
  .tpk-ph-arrow--next{justify-self:stretch; justify-content:flex-end; margin-left:6px}
  .tpk-ph-arrow__t{display:inline}
  .tpk-ph-figure figcaption .tpk-ph-savelink{grid-area:save; justify-self:center; margin:4px 0 0; display:inline-flex; align-items:center; min-height:44px}
}

/*
 * 写真の濃さの切り替え（2026-10-05）。字のない目盛りのつまみ1本を、出典の行の右端に（ご主人 20:40「C案」「バランスと比率を美しく」「左のテキストに対して上下センター」）。
 *   段は3つ。線は左の淡い色 → 右の濃い色のグラデーション、まん中の細い縦線が「そのまま」。字もボタンも出さない（読み上げだけ）
 *   比率は出典の字（12px、行の高さ 1.7）から決める。箱の字の大きさを出典と同じ .75rem にし、寸法は em で書く：
 *     長さ 10em（出典の字 10 字ぶん）／線の太さ 2px（字の画に近い細さ）／つまみの丸 1em（字の高さと同じ）／まん中の縦線 1em
 *   出典とつまみのあいだは --tp-s2（ページのほかの段と同じ 16px）。写真と出典の行のあいだも --tp-s2
 *   つまみは出典のかたまり（1行でも2行でも）の上下のまん中にそろえる。押せる高さ 44px は守り、はみ出すぶん（上下 12px ずつ）は余白に重ねて行の高さを増やさない
 *   左右の端は写真の縁にそろえる。縦長の写真で写真が箱より細いときは、その差をスクリプトが --tpk-look-l・--tpk-look-r に入れる
 *   この並べ方は、つまみを出せたとき（スクリプトが .has-look を付けたとき）だけ。錦絵のページや、つまみを出せない端末では今のまま
 * 色は地になじませる（ご主人 20:43「もう少し弱く」、20:46「墨は透過でも」、20:47「明るい方も濃い部分を馴染むように」）：
 *   線は墨（墨の配色では薄墨）を半透明にして、左はほぼ透明 → 右へ少しずつ出てくる形。向きはかろうじて分かる程度
 *   ふだんは線を opacity .35 にし、つまみの縁も浅い色（明るい配色は .34。「薄め」で線の薄い左端に来ても丸が見つけられる濃さ。PC の番 27 回め）。触っているあいだ（20:44「触るとグラデーションとつまみが濃く」）だけ、線と縁をはっきりさせる。
 *   移り変わりは 0.18 秒のフェード（動きを減らす設定では瞬時）。スマホは hover が無いので、指を離して 1.5 秒で戻す（スクリプト）
 *   つまみの丸の中は地の色で塗る（不透明。線が透けて輪に見えないように）
 * この色だけ自前。ほかは --tp-… の決まりの色
 */
.tpk-ph-look{--tpk-g-l:rgba(34,32,28,.04); --tpk-g-m:rgba(34,32,28,.16); --tpk-g-r:rgba(34,32,28,.42); --tpk-g-knob:rgba(34,32,28,.42); --tpk-g-knob-rest:rgba(34,32,28,.34);
  --tpk-k:var(--tpk-g-knob-rest);
  position:relative; z-index:1; box-sizing:border-box; width:10em; max-width:100%; height:44px; margin:-12px 0; font-size:.75rem}
html[data-tp-color="dark"] .tpk-ph-look{--tpk-g-l:rgba(176,167,150,0); --tpk-g-m:rgba(176,167,150,.3); --tpk-g-r:rgba(176,167,150,.8); --tpk-g-knob:#8A8274; --tpk-g-knob-rest:#4A463E}
@media (prefers-color-scheme:dark){
  html:not([data-tp-color="light"]) .tpk-ph-look{--tpk-g-l:rgba(176,167,150,0); --tpk-g-m:rgba(176,167,150,.3); --tpk-g-r:rgba(176,167,150,.8); --tpk-g-knob:#8A8274; --tpk-g-knob-rest:#4A463E}
}
.tpk-ph-look[hidden]{display:none}
/* 触っているあいだだけ、はっきり見せる（マウスを乗せた・指で動かしている＝スクリプトの .is-on・キーボードで移った） */
@media (hover:hover){ .tpk-ph-look:hover{--tpk-k:var(--tpk-g-knob)} .tpk-ph-look:hover .tpk-ph-look__ticks{opacity:1} }
.tpk-ph-look.is-on,.tpk-ph-look:has(.tpk-ph-look__dial:focus-visible){--tpk-k:var(--tpk-g-knob)}
.tpk-ph-look.is-on .tpk-ph-look__ticks,.tpk-ph-look:has(.tpk-ph-look__dial:focus-visible) .tpk-ph-look__ticks{opacity:1}
/* 線は箱の端から端まで（右の端が写真の右の縁とそろって見えるように）。まん中の縦線が「そのまま」 */
.tpk-ph-look__ticks{position:absolute; inset:0; pointer-events:none; opacity:.35; transition:opacity .18s ease}
.tpk-ph-look__ticks::before{content:""; position:absolute; left:0; right:0; top:21px; height:2px; border-radius:1px;
  background:linear-gradient(90deg, var(--tpk-g-l), var(--tpk-g-m) 50%, var(--tpk-g-r))}
.tpk-ph-look__ticks i{position:absolute; left:50%; top:calc(22px - .5em); width:1px; height:1em; margin-left:-.5px; background:var(--tpk-g-knob)}
.tpk-ph-look__dial{position:relative; display:block; width:100%; height:44px; margin:0; padding:0; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; font-size:inherit}
.tpk-ph-look__dial::-webkit-slider-runnable-track{height:44px; background:transparent; border:0}
.tpk-ph-look__dial::-moz-range-track{height:44px; background:transparent; border:0}
.tpk-ph-look__dial::-webkit-slider-thumb{-webkit-appearance:none; box-sizing:border-box; width:1em; height:1em; margin-top:calc(22px - .5em); border-radius:50%;
  background:var(--tp-kinari,#F2ECE0); border:1.5px solid var(--tpk-k); transition:border-color .18s ease}
.tpk-ph-look__dial::-moz-range-thumb{box-sizing:border-box; width:1em; height:1em; border-radius:50%;
  background:var(--tp-kinari,#F2ECE0); border:1.5px solid var(--tpk-k); transition:border-color .18s ease}
@media (prefers-reduced-motion:reduce){
  /* つまみの丸は、ブラウザごとの書き方が混ざると規則ごと読まれなくなるので、1つずつ書く */
  .tpk-ph-look__ticks{transition:none}
  .tpk-ph-look__dial::-webkit-slider-thumb{transition:none}
  .tpk-ph-look__dial::-moz-range-thumb{transition:none}
}
.tpk-ph-look__dial:focus{outline:none}
/* キーボードで移ったときの枠は、線の端まで外から囲む（箱の内側に引くと、線の右端が枠の外にはみ出して見えた。PC の番 27 回め）。
   上下は箱（44px）より詰め、左右は線の端より 4px 外へ */
.tpk-ph-look:has(.tpk-ph-look__dial:focus-visible)::after{content:""; position:absolute; inset:8px -4px; border:2px solid var(--tp-ink,#22201C); border-radius:6px; pointer-events:none}
/* :has の効かない古いブラウザでは、入れ物の外に枠を引く */
@supports not selector(:has(*)){ .tpk-ph-look__dial:focus-visible{outline:2px solid var(--tp-ink,#22201C); outline-offset:2px; border-radius:6px} }
/* 出典と同じ升に重ねる。出典は左寄せで、右につまみのぶん（10em ＋ 間 --tp-s2）をあける */
.tpk-ph-stage.has-look .tpk-ph-credit{line-height:1.7}
@media (min-width:782px){
  .tpk-ph-stage.has-look > .tpk-ph-figure{display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"img" "cap"; row-gap:var(--tp-s2,1rem)}
  .tpk-ph-stage.has-look .tpk-ph-figure__img{grid-area:img}
  .tpk-ph-stage.has-look > .tpk-ph-figure figcaption{grid-area:cap; align-self:center; box-sizing:border-box; line-height:1.7;
    padding-left:var(--tpk-look-l,0px); padding-right:calc(7.5rem + var(--tp-s2,1rem) + var(--tpk-look-r,0px))}
  .tpk-ph-stage.has-look .tpk-ph-savelink{white-space:nowrap}
  .tpk-ph-stage.has-look .tpk-ph-look{grid-area:cap; justify-self:end; align-self:center; margin-right:var(--tpk-look-r,0px)}
}
@media (max-width:781px){
  .tpk-ph-stage.has-look .tpk-ph-credit{align-self:center; text-align:left; margin-top:var(--tp-s2,1rem); margin-left:var(--tpk-look-l,0px);
    padding-right:calc(7.5rem + var(--tp-s2,1rem) + var(--tpk-look-r,0px))}
  .tpk-ph-stage.has-look .tpk-ph-look{grid-area:credit; justify-self:end; align-self:center; margin:calc(var(--tp-s2,1rem) - 12px) var(--tpk-look-r,0px) -12px 0}
}

/*
 * 写真を押して大きく見る（2026-09-26 本人の依頼）。
 * ページの画像は押せるボタンの中。スクリプトが動いたときだけ（.is-ready）、押せる形と右下の虫めがねの印を見せる
 */
.tpk-ph-zoom{display:block; position:relative; max-width:100%; margin:0; padding:0; border:0; background:none; font:inherit; color:inherit; cursor:default}
.tpk-ph-zoom.is-ready{cursor:zoom-in}
/* 写真が届く前から、届いたあとと同じ幅を取っておく（2026-10-06、docs/yorozu/sumaho-omoi.md の 2）。
   幅も高さも auto のままだと、届くまで写真の場所が 0 で、届いた瞬間に下の段がまとめて押し下げられていた（CLS 0.56）。
   届いたあとの幅は「写真の幅・高さの上限×縦横比・枠の幅」のいちばん小さいもの。その上 2 つをここで先に決め、枠の幅は max-width:100% のまま。
   --tpk-ph-w（写真の幅）と --tpk-ph-r（「横 / 縦」の割り算のまま。小数に丸めると高さが 1px ずれた）は、写真のページの img に PHP が書く。無いときは、この行が効かず、いままでの auto に戻る */
.tpk-ph-zoom img{width:min(var(--tpk-ph-w), calc(var(--tpk-ph-maxh) * var(--tpk-ph-r)))}
.tpk-ph-zoom:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:3px}
.tpk-ph-zoom__hint{display:none; position:absolute; right:10px; bottom:10px; width:34px; height:34px; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(20,19,17,.55); color:#fff; opacity:.85; pointer-events:none}
.tpk-ph-zoom.is-ready .tpk-ph-zoom__hint{display:flex}
.tpk-ph-zoom.is-ready:hover .tpk-ph-zoom__hint{opacity:1}
.tpk-ph-figure__img{cursor:auto; overscroll-behavior-x:contain} /* 横になでたとき、ブラウザの「戻る」の動きと重なりにくく */

/*
 * ライトボックス。地は写真が見やすい暗い色（明るい・墨の設定にかかわらず同じ。墨の配色の地 #191816・文字 #EAE3D2・罫 #3D3A33 と同じ値）。
 * 上に閉じる、真ん中に写真、下に出典。スマホ（781px 以下、または指で操作する端末）では下に「回転」「縮小」「拡大」
 */
html.tpk-lb-open{overflow:hidden}
.tpk-lb{box-sizing:border-box; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:#191816; color:#EAE3D2; overflow:hidden}
.tpk-lb[open]{display:flex; flex-direction:column}
.tpk-lb::backdrop{background:rgba(20,19,17,.9)}
.tpk-lb__view{flex:1 1 auto; min-height:0; display:flex; overflow:hidden; padding:56px 24px 12px; box-sizing:border-box}
.tpk-lb__view.is-zoomed{overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.tpk-lb__box{position:relative; flex:0 0 auto; margin:auto}
.tpk-lb__img{position:absolute; left:50%; top:50%; max-width:none; max-height:none; transform-origin:center; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.tpk-lb__bar{display:flex; align-items:center; justify-content:space-between; gap:12px; box-sizing:border-box;
  padding:10px 24px calc(14px + env(safe-area-inset-bottom, 0px)); font-size:.75rem; color:#B0A796}
.tpk-lb__credit{margin:0; line-height:1.6}
.tpk-lb__save{margin-left:calc(1em + 4px); color:#EAE3D2}
.tpk-lb__close{position:absolute; top:6px; right:8px; display:flex; align-items:center; justify-content:center; width:48px; height:48px;
  border:0; border-radius:50%; background:rgba(25,24,22,.6); color:#EAE3D2; cursor:pointer}
.tpk-lb__close:hover{background:rgba(60,57,51,.85)}
/* 開いた直後は、枠（ダイアログそのもの）に移る。閉じるボタンに枠が出ないように。キーボードでは Tab で各ボタンへ */
.tpk-lb:focus{outline:none}
.tpk-lb button:focus-visible,.tpk-lb a:focus-visible{outline:2px solid #9DBBA9; outline-offset:2px}
.tpk-lb__tools{display:none; gap:8px}
.tpk-lb__tools button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:64px; min-height:52px; box-sizing:border-box;
  padding:4px 8px; border:1px solid #3D3A33; border-radius:2px; background:transparent; color:#EAE3D2; font:inherit; font-size:.6875rem; letter-spacing:.04em; cursor:pointer}
.tpk-lb__tools button:disabled{opacity:.35; cursor:default}
@media (max-width:781px), (pointer:coarse){
  .tpk-lb__view{padding:56px 12px 8px}
  /* スマホは、出典の行の下に、親指で押しやすい3つのボタンを横に並べる */
  .tpk-lb__bar{flex-direction:column; align-items:stretch; gap:10px; padding:8px 16px calc(12px + env(safe-area-inset-bottom, 0px))}
  .tpk-lb__credit{text-align:center; word-break:auto-phrase}
  .tpk-lb__save{display:inline-flex; align-items:center; min-height:44px; margin-left:8px}
  .tpk-lb__tools{display:grid; grid-template-columns:repeat(3, minmax(0,1fr))}
}

/*
 * 新しく載せた写真や錦絵（[kioku_new]。2026-09-27。2026-10-09 に見本 shinchaku-mihon の5版めの形へ）。
 * 日ごとのまとまりの中は「古写真」「錦絵」の小見出しで分け、同じ列に混ぜない（ご主人「古写真と錦絵が混ざらないように」）。
 * 日付は、パソコンでは左に付いてくる列、スマホでは上に付いてくる細い帯
 */
/* 題（新しく載せた／古写真や錦絵）。2行になったときに行のあいだが空きすぎないように、ほかのページの題（1.5）より詰める（2026-10-09 ご主人「行間も調整を」） */
.tpk-new__h1{line-height:1.4; text-wrap:balance}
/* ページの型が「全幅」でないとき（テーマが題を出す）も同じ行間に */
body:has(.tpk-new) .wp-block-post-title{line-height:1.4}
.tpk-new__tools{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin:0 0 var(--tp-s4,40px); font-size:.8125rem}
.tpk-ph-head .tpk-new__tools{margin:0}
.tpk-new__chips{display:flex; flex-wrap:wrap; gap:6px}
/* 「すべて・古写真・錦絵」は、ギャラリーの絞り込みの札（.tpk-chip）と同じ形にそろえる（2026-10-10 ご主人「角丸が丸すぎ。他のページのラベルと意匠を揃えて」）。
   角はボタンと同じ 2px、見た目の高さは 32px、地は塗らず罫だけ。押せる範囲は ::after で広げて 44px を保つ */
.tpk-new__chips a{position:relative; display:inline-flex; align-items:center; min-height:32px; padding:3px 11px; border:1px solid var(--tp-rule,#D8CFBE); border-radius:2px;
  background:transparent; color:var(--tp-ink,#22201C); font-size:.8125rem; letter-spacing:.04em; line-height:1.4; text-decoration:none; white-space:nowrap}
.tpk-new__chips a::after{content:""; position:absolute; inset:-6px -3px}
.tpk-new__chips a:hover{background:var(--tp-kinari-hi,#FAF6EE); border-color:var(--tp-ink-sub,#5C574D); color:var(--tp-ink,#22201C)}
.tpk-new__chips a[aria-current]{background:var(--tp-green,#2F4F43); border-color:var(--tp-green,#2F4F43); color:var(--tp-white,#fff)}
.tpk-new__chips a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
.tpk-new__feed{margin:0; color:var(--tp-ink-sub,#5C574D)}
.tpk-new__feed a{color:inherit}
/* 日付の列は字の大きさについてくる幅（rem）。「12月28日（水）」が文字「大」でも収まる幅（2026-10-10） */
.tpk-new__day{display:grid; grid-template-columns:11.5rem minmax(0,1fr); column-gap:48px; padding:32px 0; border-top:1px solid var(--tp-rule,#D8CFBE)}
.tpk-new__day:first-of-type{border-top:0; padding-top:0}
.tpk-new__side{position:sticky; top:calc(var(--tpk-top,0px) + 16px); align-self:start}
.tpk-new__date{font-family:var(--tp-mincho,serif); font-size:1.75rem; font-weight:500; line-height:1.2; letter-spacing:.04em; font-variant-numeric:tabular-nums; margin:0}
.tpk-new__date small{font-size:1.125rem; margin-left:.1em}
/* 「10月10日」のような2桁の日で（曜日）が次の行へ落ちていた（2026-10-10 ご主人「軽微、あとで」）。
   日付の nowrap が、題の帯の .tpk-ph-wrap h2{text-wrap:balance} に打ち消されていたのと、列が字より狭かったため。
   「月日（曜日）」はひとかたまりで折らず、去年より前の日だけ「2025年」のあとで折れてよい */
.tpk-new .tpk-new__date{text-wrap:wrap}
.tpk-new__md{white-space:nowrap}
.tpk-new__sum{margin:12px 0 0; font-size:.8125rem; line-height:1.7; color:var(--tp-ink-sub,#5C574D)}
.tpk-new__sum b{font-weight:500; font-size:1rem; color:var(--tp-ink,#22201C); font-variant-numeric:tabular-nums}
.tpk-new__kind + .tpk-new__kind{margin-top:32px}
.tpk-new__kh{display:flex; align-items:baseline; gap:10px; margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid var(--tp-rule,#D8CFBE);
  font-family:var(--tp-gothic,sans-serif); font-size:.8125rem; font-weight:400; color:var(--tp-ink-sub,#5C574D)}
.tpk-new__kh b{font-family:var(--tp-mincho,serif); font-weight:500; font-size:1.0625rem; letter-spacing:.12em; color:var(--tp-ink,#22201C)}
.tpk-new .tpk-new__grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 20px; margin:0}
.tpk-new__more{margin:var(--tp-s3,24px) 0 0; text-align:center}
.tpk-new__none{margin:0}
@media (max-width:1023px){
  .tpk-new__day{grid-template-columns:8.5rem minmax(0,1fr); column-gap:32px}
  .tpk-new__date{font-size:1.25rem}
  .tpk-new__date small{font-size:.875rem}
  .tpk-new .tpk-new__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* スマホ：日付は上に付いてくる細い帯、写真は2列 */
@media (max-width:781px){
  .tpk-new__tools{margin-bottom:var(--tp-s3,24px)}
  .tpk-ph-head .tpk-new__tools{margin:0}
  .tpk-new__chips{gap:12px 6px}   /* 押せる範囲（::after で上下 6px ずつ広げた 44px）が段どうしで重ならないように */
  .tpk-new__day{display:block; padding:0 0 28px; border-top:0}
  .tpk-new__side{top:0; z-index:1; display:flex; align-items:baseline; gap:12px; margin:0 calc(-1 * var(--tp-gutter,16px)) 16px; padding:12px var(--tp-gutter,16px) 10px;
    background:var(--tp-kinari-hi,#FAF6EE); border-bottom:1px solid var(--tp-rule,#D8CFBE)}
  .tpk-new__date{font-size:1.25rem}
  .tpk-new__date small{font-size:.875rem}
  .tpk-new__sum{margin:0 0 0 auto; font-size:.75rem}
  .tpk-new .tpk-new__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px}
  .tpk-new .tpk-card4__name{font-size:.9375rem}
}
/* 絞り込みの札（名所・本）の段と、上の「年代・種類・被写体」の箱のあいだを空ける（くっついていた。確認係） */
.tpk-filter > .tpk-filter__row{margin-top:12px}

/*
 * まとめの前書き（種類ごとのページ・絞ったギャラリーの題の下。TPK_Maegaki。2026-10-06）。
 * 2026-10-11 ご主人と詰めた形（「題の左端と本文がそろっていないのが気持ち悪い」「解説の最初の1行を見出しに」
 *   「解説文とその解説の写真のブロックごとに四角にして並べる」→「ブロックが良さそう」）：
 *   1段落目は導入の文として、題の帯と同じ左の列（題の横の5枚をのけた幅）に。2段落目からは1段落ずつ四角（写真が上、小見出しと本文が下）。
 *   左右の線：入れ物は題の帯と同じ .tpk-ph-in なので、題・導入・四角の並び・注記・下の一覧の左右の端が1本の線になる。四角はパソコンで3列（いまの前書きは導入のあと3段落なので、1行に収まる）。
 *   900〜1199px は3列だと四角の中が1行15字ほどと狭いので、1列にして四角を横長に（文が左、写真が右。写真の列は題の横の5枚と同じ幅で、右の端もそろう）。
 *   四角は生成りの明るい面（--tp-kinari-hi）に、ごく薄い罫（墨の配色では面と地の差が小さく、四角が見分けにくかったため。確認係）。影と緑は付けない（緑は押すところだけ。四角は押せず、押せるのは写真）。
 *   写真の帯は横:縦＝2:1。1枚ならそのまま、2枚は正方形2つ、3枚は左に大きく1枚・右に小さく2枚（3枚とも元の写真と同じ 4:3 になる割り方）。名前は写真の下の端に重ねる。
 *   字：小見出し 明朝 18px 太め、本文 明朝 15px・行の高さ 1.9。余白は親テーマの刻み（8・16・24・40・64）。
 * 並びの大きさはページの見た目なのでここに書く（壁紙の寸法表 TPK_Layout には入れない）
 */
.tpk-mae{background:var(--tp-kinari,#F2ECE0); padding:0 0 var(--tp-s5,64px)}
.tpk-mae .tpk-ph-in{display:flex; flex-direction:column}
/* 題の帯との区切り：中身の幅いっぱいの細い罫 */
.tpk-mae__h{border-top:1px solid var(--tp-rule,#D8CFBE); padding-top:var(--tp-s4,40px)}
.tpk-mae__body{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--tp-s3,24px); align-items:stretch}
/* 導入（1段落目）：四角にせず、題と同じ左の列の幅で。写真があれば右の列（題の横の5枚と同じ幅）に */
.tpk-mae__pair.is-first{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) clamp(320px, 38vw, 440px); column-gap:var(--tp-s5,64px); align-items:start; margin-bottom:var(--tp-s1,8px)}
.tpk-mae__pair.is-first > .tpk-mae__tx{grid-column:1}
.tpk-mae__pair.is-first > .tpk-mae__side{grid-column:2; aspect-ratio:2 / 1}
/* 四角 */
.tpk-mae__pair:not(.is-first){display:flex; flex-direction:column; background:var(--tp-kinari-hi,#FAF6EE); box-shadow:0 0 0 1px color-mix(in srgb, var(--tp-rule,#D8CFBE) 55%, transparent)}
.tpk-mae__pair:not(.is-first):focus{outline:none}
.tpk-mae__pair:not(.is-first) > .tpk-mae__tx{padding:var(--tp-s3,24px)}
.tpk-mae__pair:not(.is-first) > .tpk-mae__side{aspect-ratio:2 / 1}
.tpk-mae__tx{min-width:0}
.tpk-mae__sh{font-family:var(--tp-mincho,serif); font-size:1.125rem; font-weight:600; line-height:1.6; letter-spacing:.06em; color:var(--tp-ink,#22201C); margin:0 0 var(--tp-s1,8px); text-wrap:balance}
/* 本文はゴシックのふつうの太さ（2026-10-11 ご主人「ブロックの中の文字がすべて明朝の太字だと読みづらい」）。
   サイトの明朝（TPK Mincho Site）は見出し用に中くらいの太さ1つだけを読み込むので、本文に使うと全部が太く見え、小見出しと見分けがつかなかった */
.tpk-mae__p{text-wrap:pretty; font-family:var(--tp-gothic,sans-serif); font-weight:400; font-size:var(--tp-fs-body,.9375rem); line-height:1.9; letter-spacing:.04em; color:var(--tp-ink,#22201C)}
.tpk-mae__p.is-lead{font-size:1rem; line-height:1.95}
/* 四角の中の本文は、ふだんの大きさを Aa 表示の「小」くらいに（本文の 90%＝15px のとき 13.5px。2026-10-11 ご主人）。rem なので Aa の「小」「大」でも一緒に変わる */
.tpk-mae__pair:not(.is-first) .tpk-mae__p{font-size:calc(var(--tp-fs-body,.9375rem) * .9)}
.tpk-mae__yr{white-space:nowrap}   /* 「明治40年（1907年）」を行の途中で分けない */
.tpk-mae__y{font-size:.8em; letter-spacing:0; color:var(--tp-ink-sub,#5C574D)}
/* 写真のページの出典の欄：「当時の表現について」と「画像の整え方」が続けて読めないよう、2つめのリンクの前を広く（確認係） */
.tpk-ph-histnote a + a{margin-left:20px}
/* 四角ごとの関連リンク「四日市の古写真 →」（TPK_Maegaki::links。2026-10-17 意匠）。文の下に破線で区切って並べる。
   押せる高さは 44px（スマホで指で押しやすく）。字は本文より小さく、下線は字より薄い色（サイトの下線の決まり） */
.tpk-mae__links{display:flex; flex-wrap:wrap; gap:0 20px; margin:var(--tp-s2,16px) 0 0; padding-top:4px; border-top:1px dashed color-mix(in srgb, var(--tp-rule,#D8CFBE) 80%, transparent)}
.tpk-mae__links a{display:inline-flex; align-items:center; gap:.4em; min-height:44px; font-size:.8125rem; letter-spacing:.04em; color:var(--tp-green,#2F4F43); text-decoration:none}
.tpk-mae__lt{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--tp-ul-offset,.45em); text-decoration-color:var(--tp-ul-color)}
.tpk-mae__links a:hover .tpk-mae__lt{text-decoration-color:var(--tp-ul-color-hover)}
.tpk-mae__links a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
/* 写真の帯 */
.tpk-mae__side{list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:3px}
.tpk-mae__side[data-n="3"]{grid-auto-flow:row; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr}
.tpk-mae__side[data-n="3"] > li:first-child{grid-row:1 / 3}
.tpk-mae__side:not([data-n="1"]):not([data-n="2"]):not([data-n="3"]){grid-auto-flow:row; grid-template-columns:1fr 1fr}
.tpk-mae__side > li{position:relative; min-height:0; overflow:hidden}
.tpk-mae__side .tpk-card4{position:absolute; inset:0; display:block}
.tpk-mae__side .tpk-card4__img{position:absolute; inset:0; aspect-ratio:auto; margin:0}
.tpk-mae__side .tpk-card4__img img{position:absolute; inset:0; width:100%; height:100%}
.tpk-mae__side .tpk-card4__name{position:absolute; left:0; right:0; bottom:0; padding:18px 8px 6px; font-size:.6875rem; line-height:1.4; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.55)); text-shadow:0 1px 2px rgba(0,0,0,.4)}   /* 写真の上なので、明るい・墨のどちらでも白い字 */
.tpk-mae__side .tpk-card4__meta{display:none}
/* たたむ段落の入れ物は、ふだんは無いのと同じ（中の四角が外の四角と同じ3列に入る）。スマホでたたんだときだけ隠す */
.tpk-mae__rest{display:contents}
.tpk-mae.is-folded .tpk-mae__rest{display:none}
.tpk-mae__morebtn{grid-column:1 / -1; width:100%; background:none; display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 20px;
  border:1px solid var(--tp-green,#2F4F43); border-radius:2px; color:var(--tp-green,#2F4F43);
  font-family:var(--tp-gothic,sans-serif); font-size:.875rem; letter-spacing:.06em; cursor:pointer}
.tpk-mae__morebtn i{width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg)}
.tpk-mae__morebtn:hover{background:var(--tp-green-pale,#EDF2EA)}
.tpk-mae__morebtn:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
.tpk-mae__morebtn[hidden]{display:none}
.tpk-mae__note{font-size:.6875rem; line-height:1.8; color:var(--tp-ink-mute,#6B6559); margin-top:var(--tp-s3,24px)}
.tpk-mae__date{margin-left:1em; white-space:nowrap}
/* 900〜1199px：四角を1列の横長に（文が左、写真が右。写真の列は題の横の5枚と同じ幅で、四角の右の端が5枚の右の端とそろう） */
@media (min-width:900px) and (max-width:1199px){
  .tpk-mae__body{grid-template-columns:minmax(0,1fr)}
  .tpk-mae__pair:not(.is-first){display:grid; grid-template-columns:minmax(0,1fr) clamp(320px, 38vw, 440px)}
  .tpk-mae__pair:not(.is-first) > .tpk-mae__side{grid-column:2; grid-row:1; aspect-ratio:auto; min-height:calc(clamp(320px, 38vw, 440px) / 2)}
  .tpk-mae__pair:not(.is-first) > .tpk-mae__tx{grid-column:1; grid-row:1}
}
/* タブレットとスマホ（899px 以下）：四角は1列。導入の写真は文の下に */
@media (max-width:899px){
  .tpk-mae__body{grid-template-columns:minmax(0,1fr); gap:var(--tp-s2,16px)}
  .tpk-mae__pair.is-first{grid-template-columns:minmax(0,1fr); row-gap:var(--tp-s2,16px)}
  .tpk-mae__pair.is-first > .tpk-mae__side{grid-column:1; max-width:560px}
}
@media (max-width:599px){
  .tpk-mae{padding-bottom:var(--tp-s4,40px)}
  .tpk-mae__h{padding-top:var(--tp-s3,24px)}
  .tpk-mae__pair:not(.is-first) > .tpk-mae__tx{padding:var(--tp-s2,16px) var(--tp-s2,16px) 20px}
  .tpk-mae__sh{font-size:1.0625rem; letter-spacing:.04em; margin-bottom:6px}
  .tpk-mae__p{letter-spacing:.03em}   /* 字の大きさはパソコンと同じ（導入 15px・四角 13.5px）。小見出しとは字の形（明朝とゴシック）で分ける */
}

/* ------------------------------------------------------------------
 * ギャラリーの一覧と絞り込み（2026-10-07 ご主人「左に3列の一覧、右に小さく検索窓と年代・種類・被写体のラベルが、
 * 見出しで折りたたまれて、クリックすると表示される。右側は下まで一緒についてくる」）。中身は inc/class-tpk-photos.php の gallery()。
 *   パソコン（1024px 以上）… 左に3列の一覧、右に細い列。右の列は一覧の終わりまでついてくる（sticky）。開いた札が画面より長いときは列の中で送る
 *   それより狭い画面 … 一覧の上に、検索の欄とたたんだ見出し（ついてこない）
 * 絞り込みの部品（TPK_Search::filters）は、見出しのボタンを1列に並べ、札の箱が帯の下にまとまって出る作り。
 * ここでは帯を display:contents にして、ボタンと札の箱を同じ1列の兄弟にし、order で「見出し → その札」の順に交互に並べる。
 * 開くのは一度に1つ（前と同じ動き）
 * ------------------------------------------------------------------ */
.tpk-ph-list__grid{display:grid; grid-template-columns:minmax(0,1fr); row-gap:28px}
.tpk-ph-side__in .tpk-filter--find{margin-top:0}
.tpk-ph-side .tpk-filter__find{flex-direction:column; align-items:stretch; gap:8px}
.tpk-ph-side .tpk-filter__q,.tpk-ph-side .tpk-filter__area{flex:none; max-width:none}
.tpk-ph-side .tpk-filter__find .tpk-cta{min-height:44px; padding:8px 16px}
.tpk-ph-side .tpk-filter__note{font-size:11px; line-height:1.6}
.tpk-ph-side .tpk-filter--bar{display:flex; flex-direction:column; margin-top:20px; border-top:1px solid var(--tp-rule,#D8CFBE)}
.tpk-ph-side .tpk-fbar{display:contents}
.tpk-ph-side .tpk-fbar > .tpk-fbtn:nth-of-type(1){order:1}
.tpk-ph-side .tpk-filter--bar > div:nth-of-type(2){order:2}
.tpk-ph-side .tpk-fbar > .tpk-fbtn:nth-of-type(2){order:3}
.tpk-ph-side .tpk-filter--bar > div:nth-of-type(3){order:4}
.tpk-ph-side .tpk-fbar > .tpk-fbtn:nth-of-type(3){order:5}
.tpk-ph-side .tpk-filter--bar > div:nth-of-type(4){order:6}
.tpk-ph-side .tpk-fclear{order:7; align-self:flex-start; margin:4px 0 0}
.tpk-ph-side .tpk-filter--bar > .tpk-filter__row{order:8}
/* 見出し：枠の箱でなく、下に線を引いた行。右に開け閉めの印 */
.tpk-ph-side .tpk-fbtn{display:flex; width:100%; justify-content:space-between; gap:8px; min-height:48px; padding:0 2px;
  border:0; border-bottom:1px solid var(--tp-rule,#D8CFBE); border-radius:0; background:none; font-size:.875rem; text-align:left}
.tpk-ph-side .tpk-fbtn:hover{color:var(--tp-green,#2F4F43); border-color:var(--tp-rule,#D8CFBE)}
.tpk-ph-side .tpk-fbtn.is-set{border-color:var(--tp-rule,#D8CFBE)}
.tpk-ph-side .tpk-fbtn[aria-expanded="true"]{background:none; border-color:var(--tp-rule,#D8CFBE)}
.tpk-ph-side .tpk-fbtn > span{min-width:0; overflow-wrap:anywhere}
.tpk-ph-side .tpk-fpanel{margin:0; padding:12px 0 16px; background:none; border:0; border-bottom:1px solid var(--tp-rule,#D8CFBE)}
.tpk-ph-side .tpk-chips{gap:6px}
.tpk-ph-side .tpk-fgroup{margin-top:12px}
@media (min-width:1024px){
  .tpk-ph-list__grid{grid-template-columns:minmax(0,1fr) 240px; column-gap:var(--tp-s5,64px); align-items:start}
  .tpk-ph-side{grid-column:2; grid-row:1; align-self:stretch}
  .tpk-ph-list__main{grid-column:1; grid-row:1; min-width:0}
  .tpk-ph-side__in{position:sticky; top:calc(24px + var(--tpk-top, var(--wp-admin--admin-bar--height, 0px)));
    max-height:calc(100vh - 48px - var(--tpk-top, var(--wp-admin--admin-bar--height, 0px))); overflow:hidden auto; overscroll-behavior:contain;
    scrollbar-width:none; -ms-overflow-style:none}
  /* 札を開いたときに、列の中に縦と横のスクロールバーが出ていた（ご主人 2026-10-17）。
     縦：開いた札が画面より長いときに列の中で送れるのは残し、バーだけ見せない（よくある質問の目次 .tpk-howto__faqside と同じやり方）。
     横：240px の列から札の行がはみ出さないよう、札は列の幅までで折り返し、はみ出した分は送らずに隠す */
  .tpk-ph-side__in::-webkit-scrollbar{display:none}
  .tpk-ph-side .tpk-filter--bar,.tpk-ph-side .tpk-fpanel,.tpk-ph-side .tpk-chips{min-width:0; max-width:100%}
  .tpk-ph-side .tpk-chip{max-width:100%; white-space:normal}
  /* 細い列でも「（例：姫路城）」まで見えるよう、パソコンだけ字を少し小さく 13px に（スマホは拡大を防ぐため 16px のまま） */
  .tpk-ph-side .tpk-filter input[type=search],.tpk-ph-side .tpk-filter select{font-size:13px; padding-left:12px; padding-right:12px}
}

/*
 * ステレオ写真（2026-10-17 ご主人「すべてオススメ」。docs/isho/stereo-page.md。動きは assets/kioku-stereo.js）
 *   一覧のカード … 写真の左下に小さな英字の印「STEREO」（日英同じ。ご主人「日本語でも STEREO みたいな表現に」）。細い枠の明朝、字間を広く
 *   写真のページ … 写真の下に注記と、2つのボタン（高さ 48px。スマホは2列で親指の届く位置）。立体視の見方は4つ（52px）
 *   見せる台（.tpk-st__view）は写真が見やすい暗い色（大きく見る画面と同じ #151412）。明るい・墨の設定にかかわらず同じ
 */
.tpk-card4__img{position:relative}
.tpk-card4__mark{position:absolute; left:8px; bottom:8px; padding:5px 6px 4px 8px; border:1px solid rgba(242,236,224,.75); background:rgba(21,20,18,.38);
  color:#F2ECE0; font-family:var(--tp-mincho,serif); font-size:10px; font-weight:500; line-height:1; letter-spacing:.24em; pointer-events:none}
.tpk-ph-dl__sub{font-size:.75rem; color:var(--tp-ink-sub,#5C574D)}

/* もとの姿：カードのときは左の1枚（picture・img）を隠し、カードを出す */
.tpk-ph-figure__img.is-card .tpk-ph-zoom > :not(.tpk-st-card):not(.tpk-ph-zoom__hint){display:none}
.tpk-st-card[hidden]{display:none}

.tpk-st{max-width:880px; margin:var(--tp-s2,16px) auto 0}
.tpk-st [hidden]{display:none}
.tpk-st__which{font-size:.75rem; color:var(--tp-ink-mute,#6B6559); text-align:center}
.tpk-st__about{margin-top:8px; font-size:.8125rem; line-height:1.8; color:var(--tp-ink-sub,#5C574D)}
.tpk-st__btns{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:12px}
.tpk-st__btns .tpk-cta{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 14px; line-height:1.3}
.tpk-st__btns .tpk-cta svg{flex:none}
.tpk-st__btns .tpk-cta[hidden]{display:none}
@media (min-width:782px){
  .tpk-st__btns{display:flex; justify-content:center}
  .tpk-st__btns .tpk-cta{min-width:220px}
}
.tpk-st__old{margin-top:12px; padding:12px 14px; background:var(--tp-kinari-mid,#F1EADC); font-size:.8125rem; color:var(--tp-ink-sub,#5C574D)}

.tpk-st__panel{margin-top:18px; padding:16px 14px 18px; border:1px solid var(--tp-rule,#D8CFBE); background:var(--tp-kinari-hi,#FAF6EE); scroll-margin-top:72px}
@media (min-width:782px){ .tpk-st__panel{padding:22px 24px 24px} }
.tpk-st__h{font-family:var(--tp-mincho,serif); font-size:1.125rem; font-weight:700}
.tpk-st__lead{margin:2px 0 12px; font-size:.8125rem; color:var(--tp-ink-sub,#5C574D)}
.tpk-st__ways{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin:0 0 14px; padding:0; list-style:none}
.tpk-st__care{margin:-4px 0 14px; font-size:.75rem; color:var(--tp-ink-mute,#6B6559)}
@media (min-width:782px){ .tpk-st__ways{grid-template-columns:repeat(4, minmax(0,1fr))} }
.tpk-st__ways button{width:100%; min-height:52px; padding:4px 6px; border:1px solid var(--tp-rule,#D8CFBE); border-radius:6px; background:var(--tp-kinari,#F2ECE0);
  color:var(--tp-ink,#22201C); font:inherit; font-size:.875rem; line-height:1.3; cursor:pointer}
.tpk-st__ways small{display:block; font-size:.6875rem; color:var(--tp-ink-mute,#6B6559)}
.tpk-st__ways button[aria-pressed="true"]{border-color:var(--tp-green,#2F4F43); background:var(--tp-green,#2F4F43); color:var(--tp-white,#fff)}
.tpk-st__ways button[aria-pressed="true"] small{color:inherit; opacity:.85}
.tpk-st__ways button:focus-visible,.tpk-st__ctrl button:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}

.tpk-st__view{display:flex; justify-content:center; align-items:center; padding:14px 10px; background:#151412; overflow:hidden}
.tpk-st__swap{display:grid; max-width:min(100%, 520px)}
.tpk-st__swap img{grid-area:1 / 1; display:block; width:100%; height:auto}
.tpk-st__swap img + img{visibility:hidden}
.tpk-st__swap.is-r img + img{visibility:visible}
.tpk-st__pairbox{display:flex; flex-direction:column; align-items:center}
.tpk-st__dots{display:flex; justify-content:space-around; width:100%; margin-bottom:8px}
.tpk-st__dots i{width:8px; height:8px; border-radius:50%; background:#EAE3D2}
.tpk-st__pair{display:flex; justify-content:center; gap:6px}
.tpk-st__pair img{display:block; width:var(--tpk-st-w,150px); height:auto}
.tpk-st__pair--vr img{width:min(calc((100vw - 90px) / 2), 260px)}
.tpk-st__ctrl{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:12px; font-size:.8125rem}
.tpk-st__ctrl label{display:flex; align-items:center; gap:10px}
.tpk-st__size{width:180px; height:32px; accent-color:var(--tp-green,#2F4F43)}
.tpk-st__seg{display:inline-flex; border:1px solid var(--tp-green,#2F4F43); border-radius:6px; overflow:hidden}
.tpk-st__seg button{min-height:44px; padding:0 14px; border:0; background:transparent; color:var(--tp-green,#2F4F43); font:inherit; cursor:pointer}
.tpk-st__seg button + button{border-left:1px solid var(--tp-green,#2F4F43)}
.tpk-st__seg button[aria-pressed="true"]{background:var(--tp-green,#2F4F43); color:var(--tp-white,#fff)}
.tpk-st__play{min-height:44px; padding:0 18px; border:1px solid var(--tp-green,#2F4F43); border-radius:6px; background:transparent; color:var(--tp-green,#2F4F43); font:inherit; cursor:pointer}
.tpk-st__ctrl .tpk-cta{min-height:48px}
.tpk-st__how{margin-top:12px; font-size:.875rem}
.tpk-st__how ol{margin:6px 0 0; padding-left:1.4em}

/* VR：画面いっぱいの黒い重ねに左右を並べる。縦向きのあいだは「スマホを横向きに」 */
.tpk-st__vr{position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; background:#000;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.tpk-st__vr[hidden]{display:none}
.tpk-st__vrpair{display:flex; width:100%; height:100%}
.tpk-st__vrpair > div{flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden}
.tpk-st__vrpair > div + div{border-left:1px solid #222}
.tpk-st__vrpair img{max-width:92%; max-height:92%}
.tpk-st__vrclose{position:absolute; top:calc(10px + env(safe-area-inset-top,0px)); right:calc(10px + env(safe-area-inset-right,0px)); width:48px; height:48px;
  display:grid; place-items:center; border:1px solid #555; border-radius:50%; background:#111; color:#eee; cursor:pointer}
.tpk-st__turn{position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; margin:0; padding:24px; background:#000; color:#eee; text-align:center}
@media (orientation:portrait){ .tpk-st__turn{display:flex} }
@media (min-width:782px){ .tpk-st__ways{grid-template-columns:repeat(5, minmax(0,1fr))} }
@media (max-width:781px){ .tpk-st__ways{grid-template-columns:repeat(3, minmax(0,1fr))} }
.tpk-st__ana{display:block; max-width:min(100%, 520px); height:auto}
/* 赤青めがねの下の Amazon のボタン（TPK_Ads::stereo_button。広告の枠と同じ PR の札と、Amazon の決まった一文） */
.tpk-ad--stereo{margin-top:14px; padding:12px; display:flex; flex-direction:column; gap:8px}
.tpk-ad__btn{display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 12px; white-space:nowrap; border:1px solid var(--tp-green,#2F4F43); border-radius:6px;
  color:var(--tp-green,#2F4F43); background:var(--tp-kinari-hi,#FAF6EE); text-decoration:none; font-size:.875rem}
.tpk-ad__btn:hover{background:var(--tp-green-pale,#EDF2EA)}
.tpk-ad__btn:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
.tpk-ad__btn .tpk-ad__pr{color:var(--tp-ink,#22201C)}
@media (min-width:782px){ .tpk-ad__btn{align-self:flex-start; min-width:320px} }
/* 立体視の説明で、「ょう。」のような短い切れ端が1行に取り残されないように（番頭 10/17。対応していないブラウザでは今までどおり） */
.tpk-st p, .tpk-st__how{text-wrap:pretty; word-break:auto-phrase}