/*
 * 記憶壁紙の帯（ヘッダーのすぐ下。記憶壁紙のページだけ）。
 * 中身は inc/class-tpk-site.php が作ります。
 * 色と余白は子テーマの --tp-… を借ります。子テーマが無いときのために、同じ値を控えに書いています。
 */
.tpk-band{
  /* テーマはブロックの間に隙間をあけるが、帯はヘッダーにくっつける */
  margin-block-start:0 !important;
  background:var(--tp-kinari,#F2ECE0);
  border-bottom:1px solid var(--tp-rule,#D8CFBE);
  color:var(--tp-ink,#22201C);
  font-family:var(--tp-gothic,sans-serif);
}
.tpk-band__in{
  box-sizing:border-box; max-width:calc(var(--tp-content,1152px) + 2 * var(--tp-gutter,64px));
  margin:0 auto; padding:0 var(--tp-gutter,64px); min-height:52px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.tpk-band__title{margin:0; display:flex; align-items:center; gap:10px; line-height:1.4}
/* 「第一弾 記憶壁紙」は1行のまま折らない（782〜870px で1字ずつ縦に折れていた）。入りきらない幅ではメニューを畳む（スクリプト）。
 * スクリプトが動かないときは、メニューを横に送る（帯の高さを1行のまま保つ。2行になると、付いてくる列が帯の下にもぐるため。確認係） */
/* 下の「text-wrap:balance」は折り返しの設定も上書きするので、こちらを強くしておく */
.tpk-band .tpk-band__tag,.tpk-band .tpk-band__name{white-space:nowrap}
@media (min-width:782px){
  .tpk-band:not(.has-menu) .tpk-band__nav{min-width:0; overflow-x:auto; scrollbar-width:none}
  .tpk-band:not(.has-menu) .tpk-band__nav::-webkit-scrollbar{display:none}
}
/* 「第一弾」の札。朱は札と注意だけに使う（押すところではないので） */
.tpk-band__tag{
  font-size:.6875rem; letter-spacing:.12em; color:var(--tp-vermilion,#9B4A33); /* 11px（10px は小さすぎた。スマホの確認係 2026-09-26） */
  border:1px solid var(--tp-vermilion,#9B4A33); padding:1px 6px; line-height:1.5;
}
.tpk-band__name{
  font-family:var(--tp-mincho,serif); font-size:1.125rem; font-weight:500; letter-spacing:.14em;
}

/* 帯のメニュー。いまいるところは、下に深緑の線と太字 */
.tpk-band__nav{display:flex; align-self:stretch; align-items:flex-end; gap:28px}
.tpk-band__nav a{
  font-size:.8125rem; padding:12px 0; line-height:1.4; white-space:nowrap;
  color:var(--tp-ink-sub,#5C574D); text-decoration:none; border-bottom:2px solid transparent;
}
.tpk-band__nav a:hover{color:var(--tp-ink,#22201C)}
.tpk-band__nav a[aria-current="page"]{
  color:var(--tp-ink,#22201C); font-weight:700; border-bottom-color:var(--tp-green,#2F4F43);
}

/*
 * ボタン（サイト共通）。高さ44px以上、角2px。
 * 主ボタン（深緑の塗り）は1画面に1つ。もう1つは線のボタン
 */
.tpk-cta{
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  min-height:44px; padding:10px 18px; border-radius:2px; border:1px solid var(--tp-green,#2F4F43);
  font-family:var(--tp-gothic,sans-serif); font-size:.875rem; font-weight:700; letter-spacing:.06em; line-height:1.4;
  text-decoration:none; cursor:pointer; white-space:nowrap;
}
.tpk-cta--lg{padding:14px 26px; font-size:.9375rem}
.tpk-cta--primary{background:var(--tp-green,#2F4F43); color:var(--tp-white,#fff)}
.tpk-cta--primary:hover{background:var(--tp-green-dark,#243D34); border-color:var(--tp-green-dark,#243D34); color:var(--tp-white,#fff)}
.tpk-cta--line{background:transparent; color:var(--tp-green,#2F4F43)}
.tpk-cta--line:hover{background:var(--tp-green,#2F4F43); color:var(--tp-white,#fff)}
.tpk-cta:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}

/*
 * 狭い画面：題の下にメニューを置く。
 * メニューが1行に収まらないときは、折り返さずに横に送る（4つが2行に割れると、どこにいるかが見えにくい）
 */
@media (max-width:781px){
  .tpk-band__in{flex-direction:column; align-items:stretch; gap:0; padding-top:10px; min-height:0}
  .tpk-band__nav{gap:22px; overflow-x:auto; scrollbar-width:none}
  .tpk-band__nav::-webkit-scrollbar{display:none}
  .tpk-band__nav a{padding:10px 0}
}

/* ------------------------------------------------------------------
 * 広告の枠（アフィリエイト）。design-plan の G。
 * 薄墨の地、頭に「PR」。枠の中では深緑を使わない（サイトの操作と見分けるため）。文字のリンクだけ
 * ------------------------------------------------------------------ */
.tpk-ad{box-sizing:border-box; background:var(--tp-mist,#F7F7F5); border:1px solid var(--tp-rule-white,#E4E4E0); padding:20px 24px;
  display:flex; flex-direction:column; gap:14px; color:var(--tp-ink,#22201C); font-family:var(--tp-gothic,sans-serif); line-height:1.6}
.tpk-ad *{box-sizing:border-box}
.tpk-ad__head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tpk-ad__pr{font-size:.6875rem; font-weight:700; letter-spacing:.12em; border:1px solid var(--tp-ink,#22201C); padding:1px 6px; line-height:1.5}
.tpk-ad__title{font-size:.875rem; font-weight:700}
.tpk-ad__about{margin-left:auto; font-size:.75rem; color:var(--tp-ink-sub,#5C574D)}
.tpk-ad__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 24px}
.tpk-ad__list a{display:flex; gap:12px; align-items:center; min-height:56px; padding-top:12px; border-top:1px solid var(--tp-rule-white,#E4E4E0);
  color:var(--tp-ink,#22201C); text-decoration:none}
.tpk-ad__kind{flex:0 0 40px; height:52px; display:flex; align-items:center; justify-content:center; background:var(--tp-white,#fff);
  border:1px solid var(--tp-rule-white,#E4E4E0); font-family:var(--tp-mincho,serif); font-size:.8125rem; color:var(--tp-ink-sub,#5C574D)}
.tpk-ad__text{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto}
.tpk-ad__text b{font-weight:400; font-size:.875rem; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--tp-ul-offset,.45em); text-decoration-color:var(--tp-ul-color);}
.tpk-ad__text small{font-size:.75rem; color:var(--tp-ink-sub,#5C574D)}
.tpk-ad__go{font-size:.8125rem; color:var(--tp-ink-sub,#5C574D)}
.tpk-ad__list a:hover b{text-decoration-color:var(--tp-ul-color-hover)}
.tpk-ad__list a:focus-visible{outline:2px solid var(--tp-ink,#22201C); outline-offset:3px}
.tpk-ad__note{margin:0; font-size:.6875rem; color:var(--tp-ink-sub,#5C574D)}
@media (max-width:781px){ .tpk-ad__list{grid-template-columns:minmax(0,1fr)} .tpk-ad{padding:16px} }

/* 広告の枠のリンクは、数に合わせて並べる（1つだけのときに左の1/3に詰まっていた。確認係の報告） */
.tpk-ad__list{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
/* 押せる小さなリンクも 44px に（見た目は変えず、押せる範囲だけ） */
.tpk-ad__about{display:inline-flex; align-items:center; min-height:44px}
/* 見出しの最後の1語だけが次の行に落ちないように */
.tpk-band__name,.tpk-ad__title{text-wrap:balance}

/* 「第一弾 記憶壁紙」はトップへのリンク。見た目は変えず、押せる範囲を 44px に */
.tpk-band__title a{display:inline-flex; align-items:center; gap:10px; min-height:44px; color:inherit; text-decoration:none}
.tpk-band__title a:hover .tpk-band__name{color:var(--tp-green,#2F4F43)}
/* 指を乗せると「第一弾」の札が朱の地に白い字になる。トップ下の「プロジェクト 第一弾」と同じ（2026-09-27 本人の依頼） */
.tpk-band__title a:hover .tpk-band__tag{background:var(--tp-vermilion,#9B4A33); color:var(--tp-white,#fff)}

/* 狭い画面で帯のメニューが入りきらないとき（「よくある質問」を足して5つに）、右の端を薄くして、横に送れることを見せる */
@media (max-width:599px){
  .tpk-band__nav{gap:18px; -webkit-mask-image:linear-gradient(to right,#000 88%,transparent); mask-image:linear-gradient(to right,#000 88%,transparent); padding-right:24px}
}

/* 狭い画面の帯のメニューも、押せる高さを 44px に（確認係の指摘） */
/* 狭い画面：押せる大きさは 44px 以上。文字の幅より縮めない（縮むと項目が重なる。確認係の指摘）。入り切らない分は横に送る */
@media (max-width:781px){ .tpk-band__nav a{min-height:44px; min-width:44px; flex-shrink:0; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center} }

/*
 * PC では、下へ読み進めても記憶壁紙の帯が画面の上に付いてくる（2026-09-24 本人の依頼）。
 * 白い 3rd-Party.jp のヘッダーはそのまま流れて消える。
 * 帯の高さは --tpk-band-h に置き（53px は1行のときの値。実の高さはスクリプトが測って入れ直す。class-tpk-site.php の height_script）、画面の上に残るほかのもの（写真のページの右の列、作る画面の見本）や、
 * ページ内の飛び先（#faq など）は、その分だけ下にずらす（--tpk-top）。
 * スマホでは付いてこない（画面が狭く、読む場所が減るため）
 */
@media (min-width:782px){
  .tpk-band{position:sticky; top:var(--wp-admin--admin-bar--height, 0px); z-index:60}
  body.tpk-kioku{--tpk-band-h:53px; --tpk-top:calc(var(--wp-admin--admin-bar--height, 0px) + var(--tpk-band-h))}
}

/* 記憶壁紙のページの写真は、スマホの長押しでも保存の窓を出さない（右クリックとドラッグは kioku-nosave.js） */
body.tpk-kioku .wp-site-blocks img{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none}
body.tpk-kioku .wp-site-blocks .tpk-ad img{-webkit-touch-callout:default}

/*
 * ページ内の飛び先（#faq・#step-1・#about・規約の条など）と、Tab で動いたときの見える位置。
 * 付いてくる帯の下に隠れないように、ページ全体に上の余白を持たせる（確認係の指摘。フォーカスが隠れない：WCAG 2.4.11）。
 * 帯の高さは --tpk-band-h（スクリプトが html にも実の高さを入れる。class-tpk-site.php の height_script）。動かないときは 53px
 */
html:has(body.tpk-kioku){scroll-padding-top:calc(var(--wp-admin--admin-bar--height, 0px) + 16px)}
@media (min-width:782px){
  html:has(body.tpk-kioku){scroll-padding-top:calc(var(--wp-admin--admin-bar--height, 0px) + var(--tpk-band-h, 53px) + 16px)}
}

/* 共有ボタンのアイコン（墨色。押せるところの色が変わっても、アイコンは墨のまま。2026-09-25 本人の依頼） */
.tpk-share-ico{flex:0 0 18px; width:18px; height:18px; color:var(--tp-ink,#22201C)}
.tpk-share a,.tpk-share button,.tpk-work .share a{gap:8px}

/*
 * 共有ボタンの並び（2026-09-25 本人の依頼：名前の長さでボタンの幅がばらばらだった）。
 * 同じ幅のマスに並べ、アイコンと名前は左からそろえる。広い画面は5列（下で上書き）、狭い画面は2列
 */
.tpk-share,.tpk-work .share{display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px}
.tpk-share a,.tpk-share button,.tpk-work .share a{justify-content:flex-start !important; min-width:0 !important; box-sizing:border-box; padding-left:16px; padding-right:12px; white-space:nowrap}
@media (max-width:599px){
  .tpk-share,.tpk-work .share{grid-template-columns:repeat(2, minmax(0,1fr))}
  .tpk-share a,.tpk-work .share a{flex:none}
}
/* 共有ボタンの左右の余白を少し詰める（2026-09-25 本人の依頼） */
.tpk-share,.tpk-work .share{gap:6px}
.tpk-share a,.tpk-share button,.tpk-work .share a{padding-left:12px !important; padding-right:8px !important; gap:6px}
/* 広い画面では横に5つ（右が空きすぎていた。本人の依頼） */
@media (min-width:600px){ .tpk-share,.tpk-work .share{grid-template-columns:repeat(5, minmax(0,1fr))} }
/*
 * 共有ボタンの列の数は、置かれた幅に合わせて決める（1つ 118px 以上）。
 * 決まった5列だと、作る画面の狭い右の列で名前が切れていた（2026-09-25 本人の指摘）。広いところでは5列、狭い列では3列ほどになる
 */
.tpk-share,.tpk-work .share{grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)) !important}
.tpk-share a,.tpk-share button,.tpk-work .share a{overflow:hidden}
.tpk-share a span,.tpk-share button span,.tpk-work .share a span{overflow:hidden; text-overflow:ellipsis}

/* 大きいボタンの高さは 52px にそろえる（作る画面の保存、作品のページのボタンと同じ。確認係の報告 2026-09-25） */
.tpk-cta--lg{min-height:52px}

/* ------------------------------------------------------------------
 * スマホ（781px 以下）の帯のメニューは、ハンバーガーに（2026-09-25 本人の依頼）。
 * スクリプトが動いたとき（has-menu）だけ畳む。動かなければ、前と同じ横に送るメニュー。
 * 開くと、項目を縦に並べる（押しやすい高さ 48px）。白いヘッダーの「利用規約」「3rd-Party.jp について」もこの中へ移す。
 * 畳む形は is-compact。スクリプトが付ける：781px 以下はいつも、782px 以上でも「記憶壁紙」とメニューが1行に入りきらないときは早めに畳む
 * （782〜870px や、文字を「大」にした 1024px 前後で、名前が1字ずつ縦に折れたり、メニューがはみ出したりしていた。2026-10-09。class-tpk-site.php の menu_script）
 * ------------------------------------------------------------------ */
.tpk-band__head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.tpk-band__menu{display:none}
.tpk-band__sub{display:none !important}
.tpk-band__social{display:none !important}
.tpk-band__bars{display:inline-flex; flex-direction:column; justify-content:center; gap:4px; width:20px}
.tpk-band__bars i{display:block; height:2px; border-radius:1px; background:currentColor; transition:transform .2s, opacity .2s}
.tpk-band.is-open .tpk-band__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.tpk-band.is-open .tpk-band__bars i:nth-child(2){opacity:0}
.tpk-band.is-open .tpk-band__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* 782px 以上で畳んだとき：スマホと同じ、題とボタンの1行に（781px 以下はこの形がもともと上の @media で付いている） */
.tpk-band.is-compact .tpk-band__in{flex-direction:column; align-items:stretch; gap:0; min-height:0; padding-top:0; padding-bottom:0}
.tpk-band.is-compact .tpk-band__nav a{min-height:44px; min-width:44px; flex-shrink:0; box-sizing:border-box; display:inline-flex; align-items:center}
.tpk-band.is-compact .tpk-band__menu{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; min-width:44px; padding:0 4px 0 10px; margin-right:-4px;
  border:0; background:none; color:var(--tp-ink,#22201C); font:inherit; font-size:.75rem; letter-spacing:.06em; cursor:pointer;
}
.tpk-band.is-compact .tpk-band__menu:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
.tpk-band.is-compact .tpk-band__nav{display:none}
.tpk-band.is-compact.is-open .tpk-band__nav{
  display:flex; flex-direction:column; align-items:stretch; gap:0; overflow:visible; padding:0 0 8px;
  -webkit-mask-image:none; mask-image:none; border-top:1px solid var(--tp-rule,#D8CFBE);
}
.tpk-band.is-compact.is-open .tpk-band__nav a{
  justify-content:flex-start; min-height:48px; padding:0 4px; font-size:.9375rem; color:var(--tp-ink,#22201C);
  border-bottom:1px solid var(--tp-rule,#D8CFBE);
}
.tpk-band.is-compact.is-open .tpk-band__nav a[aria-current="page"]{border-bottom-color:var(--tp-rule,#D8CFBE); box-shadow:inset 3px 0 0 var(--tp-green,#2F4F43); padding-left:14px}
.tpk-band.is-compact.is-open .tpk-band__sub{display:inline-flex !important; font-size:.8125rem !important; color:var(--tp-ink-sub,#5C574D) !important}
/* SNS のアイコン（2026-10-02、申し送りの作業8）：項目のいちばん下に、細い線で区切って横に並べる。
 * 絵の左の端を、上の項目の文字の左の端（4px）にそろえる（押せる範囲 44px の余白 12px の分だけ左へ出す） */
.tpk-band.is-compact.is-open .tpk-band__social{display:block !important; margin:8px 0 0; padding:8px 0 0}
.tpk-band.is-compact.is-open .tpk-band__social .tp-social{gap:4px; margin-left:-8px}
/* 上のメニューの項目の形（縦に並べる行・下の罫）を、アイコンには付けない */
.tpk-band.is-compact.is-open .tpk-band__nav .tpk-band__social a{justify-content:center; min-width:44px; min-height:44px; padding:0;
  border-bottom:0; font-size:inherit; color:var(--tp-ink-sub,#5C574D)}
.tpk-band.is-compact.is-open .tpk-band__nav .tpk-band__social a:hover{color:var(--tp-green,#2F4F43)}
/* 小さな札の付いたアイコン（Instagram の古写真・錦絵。2026-10-02）は、札の分だけ右に余白 */
.tpk-band.is-compact.is-open .tpk-band__nav .tpk-band__social a.tp-social--tagged{gap:4px; padding:0 10px 0 12px}
/* パソコンの幅では帯が画面の上に付いてくるので、開いたメニューが画面より高いときは、メニューの中だけ動かせるように */
@media (min-width:782px){
  .tpk-band.is-compact.is-open .tpk-band__nav{max-height:calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 60px); overflow-y:auto}
}
@media (max-width:781px){
  /* メニューの中に移したので、白いヘッダーの文字のリンクは出さない（ヘッダーは 3rd-Party.jp だけにすっきり） */
  body.tpk-kioku .tp-header .tp-header__terms{display:none !important}
}
@media (prefers-reduced-motion:reduce){ .tpk-band__bars i{transition:none} }
/* 指で押したときに、テーマの黒い枠が残らないように（キーボードのときの緑の枠はそのまま。確認係の報告） */
.tpk-band__menu:focus:not(:focus-visible){outline:none}
/* 開いたメニューの項目を Tab で動いたときも、ボタンと同じ緑の枠に（確認係の報告） */
.tpk-band.is-open .tpk-band__nav a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:-2px}

/*
 * 壁紙をつくる手順の印（1 選ぶ → 2 整える → 3 保存する）。/kabegami/ と /create/ で同じ見た目（2026-09-26 本人の決定）。
 * いまの手順は深緑の丸、済んだ手順は線の丸、まだの手順は薄く
 */
.tpk-flow{display:flex; align-items:center; gap:0; margin:0 0 16px; padding:0; list-style:none; font-size:.8125rem; line-height:1.4; color:var(--tp-ink-sub,#5C574D)}
.tpk-flow li{display:flex; align-items:center; gap:7px; margin:0; white-space:nowrap}
.tpk-flow li + li::before{content:""; display:block; width:28px; height:1px; margin:0 10px; background:var(--tp-rule,#D8CFBE)}
.tpk-flow__n{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--tp-rule,#D8CFBE); font-size:.6875rem; font-variant-numeric:tabular-nums; box-sizing:border-box}
.tpk-flow li[aria-current="step"]{color:var(--tp-ink,#22201C); font-weight:700}
.tpk-flow li[aria-current="step"] .tpk-flow__n{background:var(--tp-green,#2F4F43); border-color:var(--tp-green,#2F4F43); color:var(--tp-white,#fff)}
.tpk-flow li.is-done .tpk-flow__n{border-color:var(--tp-green,#2F4F43); color:var(--tp-green,#2F4F43)}
@media (max-width:359px){ .tpk-flow li + li::before{width:16px; margin:0 6px} }

/*
 * 「上部へ戻る」の見出し札（2026-09-26 本人の依頼）。深緑の四角い札が、画面の下の端に立つ形。
 * 上の2つの角だけ控えめに丸め（4px）、字は横書きの明朝。字のまわりの余白は上下左右そろえる（16px）。
 * ページのいちばん下では、白い地のフッターの上の端にぴったり付くところまで下りる：
 *   フッターの上の空き（テーマのブロックの間隔。ページによって有る・無い）をスクリプトで測り、入れ物の上の余白として持ち、
 *   同じだけ下の余白を負にしてフッターの空きと打ち消す。ページの並びの高さは変わらない（TPK_Site::totop）
 * 指を重ねると少し浮き、押すとするすると上へ（tpkToTop）
 */
.tpk-totop{position:sticky; bottom:0; height:0; z-index:40; pointer-events:none; box-sizing:content-box}
.tpk-totop__a{position:absolute; right:22px; bottom:0; pointer-events:auto; display:flex; align-items:center; justify-content:center;
  padding:16px; box-sizing:border-box; border-radius:4px 4px 0 0;
  background:var(--tp-green,#2F4F43); color:var(--tp-kinari-hi,#FAF6EE); text-decoration:none;
  box-shadow:0 -2px 10px rgba(34,32,28,.10);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background-color .2s}
.tpk-totop__t{font-family:var(--tp-mincho,serif); font-size:.75rem; letter-spacing:.14em; line-height:1; white-space:nowrap; margin-right:-.14em}
.tpk-totop__a:hover{transform:translateY(-3px)}
.tpk-totop__a.is-going{transform:translateY(-6px); background:var(--tp-vermilion,#9B4A33)}
.tpk-totop__a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:3px}
.tpk-totop__a:focus:not(:focus-visible){outline:none}
@media (max-width:599px){ .tpk-totop__a{right:14px} }
@media (prefers-reduced-motion:reduce){ .tpk-totop__a{transition:none} }
@media print{ .tpk-totop{display:none} }
/* 最初の画面から少し下がったら、下からそっと出す（スクリプトが動くときだけ隠しておく） */
.tpk-js .tpk-totop__a{opacity:0; transform:translateY(100%); pointer-events:none; visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s, background-color .2s, visibility 0s .35s}
.tpk-js .tpk-totop__a.is-shown{opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s, background-color .2s, visibility 0s}
.tpk-js .tpk-totop__a.is-shown:hover{transform:translateY(-3px)}
.tpk-js .tpk-totop__a.is-shown.is-going{transform:translateY(-6px)}

/* ------------------------------------------------------------------
 * 3つの手順の帯（1 選ぶ → 2 整える → 3 保存する）。使い方のページの冒頭と、トップの「使い方」で同じ見た目にするため、ここに1つだけ書く（2026-09-26）
 * スマホでも3つを1行に（2列だと「3 保存する」だけが2段目に残った）。スマホでは山の印を出さない
 * ------------------------------------------------------------------ */
.tpk-howto-flow{list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr))}
.tpk-howto-flow li{position:relative}
.tpk-howto-flow li + li{margin-left:-1px}
.tpk-howto-flow a{display:flex; align-items:center; gap:12px; box-sizing:border-box; height:100%; min-height:60px; padding:12px 24px 12px 16px;
  background:var(--tp-kinari-hi,#FAF6EE); border:1px solid var(--tp-rule,#D8CFBE); color:var(--tp-ink,#22201C); text-decoration:none;
  font-family:var(--tp-mincho,serif); font-size:.9375rem; letter-spacing:.06em; line-height:1.4}
.tpk-howto-flow a:hover{color:var(--tp-green,#2F4F43); background:var(--tp-white,#fff)}
/* 流れの向きを示す小さな山（次の手順へ） */
.tpk-howto-flow li:not(:last-child)::after{content:""; position:absolute; z-index:1; right:-6px; top:50%; width:10px; height:10px;
  background:var(--tp-kinari-hi,#FAF6EE); border-top:1px solid var(--tp-rule,#D8CFBE); border-right:1px solid var(--tp-rule,#D8CFBE);
  transform:translateY(-50%) rotate(45deg); pointer-events:none}
.tpk-howto__n{display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px;
  background:var(--tp-green,#2F4F43); color:var(--tp-white,#fff); font-family:var(--tp-gothic,sans-serif); font-size:.875rem; font-weight:700; letter-spacing:0}
@media (max-width:1023px){ .tpk-howto-flow a{font-size:.875rem; padding-right:18px} }
@media (max-width:767px){
  .tpk-howto-flow{gap:6px}
  .tpk-howto-flow li + li{margin-left:0}
  .tpk-howto-flow li::after{display:none}
  .tpk-howto-flow a{padding:10px 8px; gap:8px}
}
/* スマホ（〜430px）では字を詰めて、「保存する」が1行に収まるように（390 幅で右の余りが 3px しかなく、字を大きくしている端末で折れるおそれがあった） */
@media (max-width:430px){ .tpk-howto-flow a{font-size:.8125rem; letter-spacing:0; padding:10px 5px; gap:5px} .tpk-howto-flow .tpk-howto__n{flex:none; width:24px; height:24px; font-size:.8125rem} }

/*
 * 同意の文の下の「利用規約を読む・プライバシーポリシーを読む」（2026-09-26 本人の決定）。作る画面・写真の保存・お問い合わせで共通。
 * 同意の文そのものはリンクにしない（スマホで文を押すとチェックが入らず、規約が開いていたため）
 */
.tpk-agree-read{margin:2px 0 10px; font-size:.8125rem; line-height:1.6; color:var(--tp-ink-sub,#5C574D)}
.tpk-agree-read span{margin:0 4px}
.tpk-agree-read a{display:inline-flex; align-items:center; min-height:44px; 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);}

/* 英語などのページ（英語版の段階2、2026-09-26）。英字は日本語より横に長いので、帯の札と題を1行に保つ。
   明朝の広い字間（.14em）は漢字に合わせたもの。英字では詰める。日本語のページには効かない（lang で分ける） */
html:not([lang="ja"]) .tpk-band__tag,
html:not([lang="ja"]) .tpk-band__name{white-space:nowrap}
html:not([lang="ja"]) .tpk-band__name{letter-spacing:.04em}
html:not([lang="ja"]) .tpk-band__menu{flex-shrink:0}
/* 狭い画面では「First project」の札を外す（題とメニューだけで1行に。320px や文字「大」で帯が画面からはみ出したため） */
@media (max-width:420px){ html:not([lang="ja"]) .tpk-band__tag{display:none} }

/* 言語の表の題（英語版の段階3）。漢字の名前のすぐ下に、小さく1行。日本語のページには出ない */
.tpk-reading{display:block; margin:.15em 0 .35em; font-size:.8125rem; line-height:1.45; letter-spacing:.02em; color:var(--tp-ink-sub,#5C574D)}
p.tpk-reading{font-size:.9375rem; margin:.1em 0 .5em}

/* ------------------------------------------------------------------
 * ヘッダーの言語の札（英語版の段階5、2026-09-27）。押すと言語の一覧が開く（TPK_Lang::switcher が <details> で出す）。
 * 見た目は「Aa 表示」とそろえる。枠と余白は、テーマの .tp-lang から summary（押すところ）へ移す。
 * 見せる言語が1つだけのときは、テーマの札（押せない表示）のままなので、ここは効かない
 * ------------------------------------------------------------------ */
.tp-lang.tp-lang--menu{position:relative; display:inline-block; padding:0; border:0; min-height:0}
.tp-lang--menu > summary{display:inline-flex; align-items:center; gap:6px; min-height:36px; box-sizing:border-box; padding:6px 10px;
  border:1px solid var(--tp-rule-white); border-radius:2px; color:var(--tp-ink-sub); font-size:.8125rem; line-height:1; white-space:nowrap;
  cursor:pointer; list-style:none}
.tp-lang--menu > summary::-webkit-details-marker{display:none}
.tp-lang--menu > summary:hover,.tp-lang--menu[open] > summary{color:var(--tp-green); border-color:var(--tp-green)}
.tp-lang--menu > summary:focus-visible{outline:2px solid var(--tp-green); outline-offset:2px}
.tp-lang__list{position:absolute; top:calc(100% + 8px); right:0; z-index:100; box-sizing:border-box; min-width:200px; margin:0; padding:6px 0; list-style:none;
  background:var(--tp-kinari-hi); border:1px solid var(--tp-rule); box-shadow:0 8px 24px rgba(0,0,0,.16); font-family:var(--tp-gothic)}
.tp-lang__list li{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0}
.tp-lang__list a{flex:1 1 auto; display:flex; align-items:center; min-height:44px; padding:0 16px; color:var(--tp-ink); font-size:.875rem; text-decoration:none}
.tp-lang__list a:hover{color:var(--tp-green); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--tp-ul-offset,.45em); text-decoration-color:var(--tp-ul-color-hover);}
/* いまの言語は太字（押すところではないので、深緑にはしない） */
.tp-lang__list a[aria-current="true"]{font-weight:700}
.tp-lang__note{flex:0 0 auto; margin-right:16px; padding:1px 6px; border:1px solid var(--tp-rule); font-size:.6875rem; line-height:1.5; color:var(--tp-ink-sub)}
.tp-lang__list .tp-lang__about{margin-top:6px; padding-top:6px; border-top:1px solid var(--tp-rule)}
.tp-lang__list .tp-lang__about a{font-size:.75rem; color:var(--tp-ink-sub)}
@media (max-width:599px){
  /* スマホ：押せる大きさ 44px。一覧は Aa の枠と同じく、画面の左右 16px まで広げて、ヘッダーのすぐ下に */
  .tp-lang--menu > summary{min-width:44px; min-height:44px; justify-content:center}
  .tp-lang__list{position:fixed; left:16px; right:16px; min-width:0; top:calc(56px + var(--wp-admin--admin-bar--height, 0px))}
}
@media (max-width:413px){
  /* 狭い画面では、テーマは「日本語」の札を外している（押せない表示だったため）。一覧が開く札は、地球の印だけにして残す
   * （外すと、英語のページから日本語へ移る道がなくなる。段階2の確認係の報告） */
  .tp-compact-header .tp-header .tp-lang.tp-lang--menu{display:inline-block}
  .tp-lang__cur{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}

/* ------------------------------------------------------------------
 * 言語について（/languages/。英語版の段階5、design-plan の E12）
 * 状態の札：公開中＝墨の塗り、準備中＝線、予定＝点線。深緑は使わない（押すところではないため）
 * ------------------------------------------------------------------ */
.tpk-langs{max-width:720px; margin:0 auto}
.tpk-langs__lead{font-size:var(--tp-fs-body,.9375rem); line-height:1.9; color:var(--tp-ink,#22201C); word-break:auto-phrase}
.tpk-langs h2{margin:var(--tp-s4,40px) 0 var(--tp-s2,16px); font-family:var(--tp-mincho,serif); font-size:1.25rem; font-weight:500; letter-spacing:.08em}
.tpk-langs__samples{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin:var(--tp-s3,24px) 0 0}
.tpk-langs__sample{margin:0}
.tpk-langs__sample img{display:block; width:100%; height:auto; border:1px solid var(--tp-rule,#D8CFBE)}
.tpk-langs__sample figcaption{margin-top:6px; font-size:.8125rem; color:var(--tp-ink-sub,#5C574D); text-align:center}
.tpk-langs__list{margin:0; padding:0; list-style:none; border-top:1px solid var(--tp-rule,#D8CFBE)}
.tpk-langs__list li{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-height:52px; padding:6px 0; border-bottom:1px solid var(--tp-rule,#D8CFBE)}
.tpk-langs__name{min-width:7em; font-size:1rem}
.tpk-langs__state{padding:1px 8px; font-size:.75rem; line-height:1.6; border:1px solid var(--tp-ink,#22201C); color:var(--tp-ink,#22201C)}
.tpk-langs__state--public{background:var(--tp-ink,#22201C); color:var(--tp-kinari-hi,#FAF6EE)}
.tpk-langs__state--planned{border-style:dotted; border-color:var(--tp-ink-sub,#5C574D); color:var(--tp-ink-sub,#5C574D)}
.tpk-langs__go{margin-left:auto; display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; color:var(--tp-green,#2F4F43); text-underline-offset:var(--tp-ul-offset,.45em)}
.tpk-langs__same{padding-left:1.2em; line-height:1.9}
.tpk-langs__same li + li{margin-top:4px}

/* ------------------------------------------------------------------
 * 初めての人への言語の案内の帯（design-plan の F5-2。TPK_LangBar）
 * 記憶壁紙の帯のすぐ下。ページの流れの中に置き、画面には重ねない。
 * 地は生成りの明るい面、下に罫。押すところ（リンクと ×）だけ深緑。広告の枠（薄墨の地・PR）と見分けがつくように
 * ------------------------------------------------------------------ */
/* テーマはページの大きな塊どうしの間をあける（blockGap）。帯は記憶壁紙の帯にくっつける（.tpk-band と同じ直し） */
.tpk-langbar{margin-block-start:0 !important; background:var(--tp-kinari-hi,#FAF6EE); border-bottom:1px solid var(--tp-rule,#D8CFBE); color:var(--tp-ink,#22201C); font-family:var(--tp-gothic)}
.tpk-langbar__in{box-sizing:border-box; display:flex; align-items:center; gap:10px; max-width:calc(var(--tp-content,1152px) + 2 * var(--tp-gutter,64px));
  margin:0 auto; padding:4px calc(var(--tp-gutter,64px) - 12px) 4px var(--tp-gutter,64px)}
.tpk-langbar__in > svg{flex:0 0 auto; color:var(--tp-ink-sub,#5C574D)}
.tpk-langbar__msg{flex:1 1 auto; margin:0; padding:8px 0; font-size:.8125rem; line-height:1.6}
.tpk-langbar__go{display:inline-block; margin-left:.5em; color:var(--tp-green,#2F4F43); font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--tp-ul-offset,.45em); text-decoration-color:var(--tp-ul-color); white-space:nowrap}
.tpk-langbar__go:hover{color:var(--tp-green-dark,#243D34)}
.tpk-langbar__x{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0; padding:0;
  border:0; background:none; color:var(--tp-ink-sub,#5C574D); cursor:pointer}
.tpk-langbar__x:hover{color:var(--tp-green,#2F4F43)}
.tpk-langbar__go:focus-visible,.tpk-langbar__x:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
@media (max-width:599px){
  /* スマホ：× は右端に寄せ、押せる大きさ 44px のまま。左の余白はテーマの 16px */
  .tpk-langbar__in{gap:8px; padding-right:4px}
  .tpk-langbar__go{margin-left:0}
}

/* ページの題を、<wbr> を入れたところでだけ折り返す（TPK_New::title・TPK_Page::phrase_title。iPhone の Safari は auto-phrase に対応していないため） */
.tpk-phrase{word-break:keep-all; overflow-wrap:anywhere}

/* ==================================================================
 * 写真の手ざわり（2026-10-10 ご主人「すべておすすめで」。見本 https://claude.ai/artifact/9VqRHV7pcKfYuZG7KoePF5）
 * 写真に指やマウスを乗せたときの動きを、場所の役目で5つの型にそろえる。同じ動きにはせず、速さは3つだけ。
 *   A 名前つきのカード：写真がゆっくり寄って少し明るく、名前が緑に変わって下線が出る（0.6秒）
 *   B 名前のない小さな写真：少し浮いて、影が深くなる（0.3秒）
 *   C 大きな1枚：とてもゆっくり少しだけ寄る。スライドと今日の1枚、今週の記事の写真は右下に「写真を見る」の札（1.2秒）
 *   D 拡大で見る写真：写真は動かさず（細部を見比べる場所なので）、虫眼鏡の横に「拡大」の字が出る
 *   E 作る画面で写真を選ぶカード：枠が緑（kioku-create.css）、写真が寄る
 * キーボードで選んだとき（:focus-visible）も同じ動き。各ページの緑の枠はそのまま。
 * スマホ（オンマウスが無い）は、乗せたときの動きを出さず、押した瞬間に少し縮んで暗くなる手応えだけ（押したあとに動きが残らないように）。
 * 動きを減らす設定の人には、動かさず、明るさ・影・札だけ。
 * ------------------------------------------------------------------ */
:root{--tpk-ease:cubic-bezier(.2,.7,.2,1); --tpk-t-near:.6s; --tpk-t-lift:.3s; --tpk-t-slow:1.2s}

/* 動かす写真の速さ（ふだんの見た目はここでは変えない） */
.tpk-card4__img img,.tpk-card1__img img,.tpk-top-card__img img,.tpk-card__img img{transition:transform var(--tpk-t-near) var(--tpk-ease), filter var(--tpk-t-near) ease}
.tpk-top-minis a img,.tpk-wall5 a,.tpk-ph-wlist a img,.tpk-work ul.deck a img,.tpk-howto__samples a,.tpk-top-howto__samples > a,.tpk-nb__list a img,.tpk-yougo-photos a img{
  transition:transform var(--tpk-t-lift) var(--tpk-ease), box-shadow var(--tpk-t-lift) ease}
.tpk-slide__photo img,.tpk-ph-today__photo img,.tpk-top-collage > a img,.tpk-golden a img,.tpk-kiji-ph__a img{transition:transform var(--tpk-t-slow) var(--tpk-ease)}
.tpk-card4__name,.tpk-card1__name,.tpk-top-card h3{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--tp-ul-offset,.45em);
  text-decoration-color:transparent; transition:color .2s ease, text-decoration-color .3s ease}
.tpk-card__img{display:block; overflow:hidden}   /* E 作る画面のカードの写真の枠（kioku-create.js が作る） */
.tpk-card .tpk-card__img{padding:0}   /* カードの中の字の span の余白（kioku-create.css の .tpk-card span）を写真の枠には付けない */
.tpk-slide__photo,.tpk-ph-today__photo,.tpk-kiji-ph__a{position:relative}
.tpk-pic-cap{position:absolute; right:12px; bottom:12px; padding:4px 10px; border-radius:2px; font-size:.78rem; letter-spacing:.06em; line-height:1.5;
  background:color-mix(in srgb, var(--tp-kinari-hi,#FAF6EE) 92%, transparent); color:var(--tp-ink,#22201C);
  opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease; pointer-events:none}
.tpk-pic-cap::after{content:" →"}
.tpk-ph-zoom__t{display:none; font-size:.78rem; letter-spacing:.06em; line-height:1}

/* 乗せたときの動きは、マウスのある画面だけ（スマホで押したあとに動きが残らないように） */
@media (hover:hover){
  /* A 名前つきのカード */
  :is(.tpk-card4,.tpk-card1__main,.tpk-top-card):is(:hover,:focus-visible) :is(.tpk-card4__img img,.tpk-card1__img img,.tpk-top-card__img img){transform:scale(1.04); filter:brightness(1.05)}
  :is(.tpk-card4,.tpk-card1__main,.tpk-top-card):is(:hover,:focus-visible) :is(.tpk-card4__name,.tpk-card1__name,h3){color:var(--tp-green,#2F4F43); text-decoration-color:var(--tp-ul-color-hover,currentColor)}

  /* B 名前のない小さな写真（浮かせるものに影を付ける） */
  :is(.tpk-top-minis a,.tpk-ph-wlist a,.tpk-work ul.deck a,.tpk-yougo-photos a):is(:hover,:focus-visible) img,
  :is(.tpk-wall5 a,.tpk-howto__samples a,.tpk-top-howto__samples > a):is(:hover,:focus-visible){transform:translateY(-3px); box-shadow:0 10px 22px rgba(34,32,28,.22)}
  .tpk-nb__list a:is(:hover,:focus-visible) img{transform:translateY(-2px); box-shadow:0 6px 12px rgba(34,32,28,.22)}   /* 新着の帯の写真は小さいので控えめに */

  /* C 大きな1枚 */
  :is(a.tpk-slide__photo,a.tpk-ph-today__photo,.tpk-top-collage > a,.tpk-golden a,a.tpk-kiji-ph__a):is(:hover,:focus-visible) img{transform:scale(1.02)}
  :is(a.tpk-slide__photo,a.tpk-ph-today__photo,a.tpk-kiji-ph__a):is(:hover,:focus-visible) .tpk-pic-cap{opacity:1; transform:none}

  /* D 拡大で見る写真：虫眼鏡の丸が横に伸びて「拡大」の字が出る */
  .tpk-ph-zoom.is-ready:is(:hover,:focus-visible) .tpk-ph-zoom__hint{width:auto; gap:6px; padding:0 12px 0 8px; border-radius:17px; opacity:1}
  .tpk-ph-zoom.is-ready:is(:hover,:focus-visible) .tpk-ph-zoom__t{display:inline}

  /* E 作る画面で写真を選ぶカード */
  .tpk-card:is(:hover,:focus-visible) .tpk-card__img img{transform:scale(1.04)}
}

/* スマホ：押した瞬間に少し暗くなり、少し縮む手応えだけ */
@media (hover:none){
  :is(.tpk-card4__img,.tpk-card1__img,.tpk-top-card__img,.tpk-card__img,a.tpk-slide__photo,a.tpk-ph-today__photo,a.tpk-kiji-ph__a,.tpk-top-collage > a,.tpk-golden a,
    .tpk-top-minis a,.tpk-wall5 a,.tpk-ph-wlist a,.tpk-work ul.deck a,.tpk-howto__samples a,.tpk-top-howto__samples > a,.tpk-nb__list a,.tpk-yougo-photos a,.tpk-ph-zoom){
    transition:transform .08s ease, filter .08s ease; -webkit-tap-highlight-color:transparent}
  :is(.tpk-card4,.tpk-card1__main,.tpk-top-card,.tpk-card):active :is(.tpk-card4__img,.tpk-card1__img,.tpk-top-card__img,.tpk-card__img),
  :is(a.tpk-slide__photo,a.tpk-ph-today__photo,a.tpk-kiji-ph__a,.tpk-top-collage > a,.tpk-golden a,.tpk-top-minis a,.tpk-wall5 a,.tpk-ph-wlist a,.tpk-work ul.deck a,
    .tpk-howto__samples a,.tpk-top-howto__samples > a,.tpk-nb__list a,.tpk-yougo-photos a,.tpk-ph-zoom):active{filter:brightness(.94)}
}
@media (hover:none) and (prefers-reduced-motion:no-preference){
  :is(.tpk-card4,.tpk-card1__main,.tpk-top-card,.tpk-card):active :is(.tpk-card4__img,.tpk-card1__img,.tpk-top-card__img,.tpk-card__img),
  :is(a.tpk-slide__photo,a.tpk-ph-today__photo,a.tpk-kiji-ph__a,.tpk-top-collage > a,.tpk-golden a,.tpk-top-minis a,.tpk-wall5 a,.tpk-ph-wlist a,.tpk-work ul.deck a,
    .tpk-howto__samples a,.tpk-top-howto__samples > a,.tpk-nb__list a,.tpk-yougo-photos a):active{transform:scale(.97)}   /* 拡大の写真は横になでて前後へ移るので縮めない（暗くなるだけ） */
}

/* 動きを減らす設定：動かさず、明るさ・影・札だけ */
@media (prefers-reduced-motion:reduce){
  .tpk-card4__img img,.tpk-card1__img img,.tpk-top-card__img img,.tpk-card__img img,.tpk-slide__photo img,.tpk-ph-today__photo img,.tpk-kiji-ph__a img,.tpk-top-collage > a img,.tpk-golden a img,
  .tpk-top-minis a img,.tpk-wall5 a,.tpk-ph-wlist a img,.tpk-work ul.deck a img,.tpk-howto__samples a,.tpk-top-howto__samples > a,.tpk-nb__list a img,.tpk-yougo-photos a img,.tpk-pic-cap{
    transition-duration:.01s !important; transform:none !important}
  /* C の大きな1枚は寄らない代わりに、少し明るくして手応えを残す */
  .tpk-slide__photo img,.tpk-ph-today__photo img,.tpk-kiji-ph__a img,.tpk-top-collage > a img,.tpk-golden a img{transition:filter .3s ease !important}
}
@media (prefers-reduced-motion:reduce) and (hover:hover){
  :is(a.tpk-slide__photo,a.tpk-ph-today__photo,a.tpk-kiji-ph__a,.tpk-top-collage > a,.tpk-golden a):is(:hover,:focus-visible) img{filter:brightness(1.05)}
}

/* ==================================================================
 * 今週の記事の写真（TPK_Kiji::show。2026-10-13 ご主人の札「8つとも」）
 * 写真のページと同じ大きい画像。縦長の写真も画面より高くならない幅にし、真ん中に置く（--tpk-ph-r は写真の「横 / 縦」）。
 * 押すと写真のページへ（手ざわりの型 C）。右上の虫眼鏡で、ページの上で大きく見る。下に出典の行
 * ------------------------------------------------------------------ */
.tpk-kiji-ph{--tpk-kiji-maxh:min(80vh, 760px); width:min(100%, calc(var(--tpk-kiji-maxh) * var(--tpk-ph-r, 4 / 3))); margin-inline:auto; display:flex; flex-direction:column; gap:10px}
.tpk-kiji-ph__img{position:relative; background:var(--tp-kinari-hi,#FAF6EE); box-shadow:0 14px 36px rgba(34,32,28,.14)}
.tpk-kiji-ph__a{display:block; overflow:hidden; -webkit-touch-callout:none}
.tpk-kiji-ph__img img{display:block; width:100%; height:auto; aspect-ratio:var(--tpk-ph-r, auto)}
.tpk-kiji-ph figcaption{margin:0; font-size:.75rem; line-height:1.7; color:var(--tp-ink-sub,#5C574D); text-align:left}
/* 虫眼鏡は右上（右下は「写真を見る」の札）。押せる大きさは 54px 四方、見える丸は写真のページと同じ 34px */
.tpk-ph-zoom.tpk-kiji-zoom{position:absolute; top:0; right:0; width:54px; height:54px}   /* 写真のページの .tpk-ph-zoom（あとから読む kioku-photos.css）より強く */
.tpk-ph-zoom.tpk-kiji-zoom[hidden]{display:none}
.tpk-kiji-zoom .tpk-ph-zoom__hint{top:10px; bottom:auto}
/* 写真の見出しは h2（題の h1 のすぐ下の段）。字の大きさは前の h3 のまま */
.tp-read__body h2.tpk-kiji-h{font-size:var(--wp--preset--font-size--large)}
.tpk-crumb.tpk-kiji-crumb{margin-bottom:var(--tp-s2,1rem)}   /* kioku-photos.css の .tpk-crumb（14px）より強く */
/* 出典が絵の中にあるときの出典の文：読み上げと検索のためだけに残し、画面には出さない（二重にしない） */
.tpk-kiji-ph__sr{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.tpk-kiji-ph__cap--sr{margin:0; height:0}
.tpk-kiji-ph:has(.tpk-kiji-ph__cap--sr){gap:0}
/* 出典入りの写真では、「写真を見る」の札を下の帯より上に出す（帯の高さは写真の幅のおよそ 4.5〜7%） */
.tpk-kiji-ph--cv .tpk-kiji-ph__a{container-type:inline-size}
.tpk-kiji-ph--cv .tpk-pic-cap{bottom:calc(10px + 7cqw)}
.tpk-kiji-ph__note{display:block; margin-top:4px; color:var(--tp-ink,#22201C)}   /* ご主人が書き足した写真の説明 */
.tpk-lb__save[hidden]{display:none}   /* 写真のページが無いときの「出典入りで保存する」（スマホの inline-flex より強く） */

/*
 * 記事のページ 第2弾（2026-10-13 ご主人の札「すべておすすめで」）
 * 写真ごとの「この写真で壁紙をつくる →」は線のボタン（主ボタンの塗りは写真のページの1つだけ）。
 * 記事の終わりは、共有（写真のページと同じ6つ）→ 前の週・次の週 → 記事の一覧
 */
.tp-read .tp-read__body > .tpk-kiji-mk{margin-block:var(--tp-s2,1rem) var(--tp-s5,3rem)}   /* テーマの .tp-read .tp-read__body > *（1.2em）より強く */
.tpk-kiji-mk .tpk-cta{gap:8px}
.tp-read__body .tpk-kiji-mk a.tpk-cta{text-decoration:none}
.tp-read .tp-read__body > .tpk-kiji-end{display:flex; flex-direction:column; gap:var(--tp-s3,1.5rem); margin-top:var(--tp-s5,3rem); padding-top:var(--tp-s3,1.5rem); border-top:1px solid var(--tp-rule,#D8CFBE)}
.tpk-kiji-share .tpk-ph-sns__h{margin:0 0 10px}
.tpk-kiji-share .tpk-ph-sns__list{max-width:360px}
.tp-read__body .tpk-kiji-share a{text-decoration:none}
.tpk-kiji-pn{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tpk-kiji-pn a{display:flex; flex-direction:column; gap:2px; min-width:0; min-height:64px; box-sizing:border-box; padding:10px 12px;
  border:1px solid var(--tp-rule,#D8CFBE); background:var(--tp-kinari-hi,#FAF6EE); color:var(--tp-ink,#22201C); text-decoration:none}
.tpk-kiji-pn a:hover{border-color:var(--tp-green,#2F4F43)}
.tpk-kiji-pn a:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
.tpk-kiji-pn small{font-size:.75rem; color:var(--tp-ink-sub,#5C574D); letter-spacing:.06em}
.tpk-kiji-pn a > span{font-family:var(--tp-mincho,serif); font-size:.9375rem; line-height:1.5; overflow-wrap:anywhere}
.tpk-kiji-pn__next{text-align:right}
.tpk-kiji-all{margin:0; text-align:center}
.tpk-kiji-all a{display:inline-flex; align-items:center; gap:.5em; min-height:44px; color:var(--tp-ink,#22201C); text-decoration:none}
.tpk-kiji-all__t{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:var(--tp-ul-offset,.45em); text-decoration-color:var(--tp-ul-color)}   /* 矢印には下線を引かない */
.tpk-kiji-all a:hover .tpk-kiji-all__t{text-decoration-color:var(--tp-ul-color-hover)}
/* 新着のページの上の帯（いちばん新しい記事へ） */
.tpk-kiji-strip{display:flex; align-items:center; gap:12px; min-height:64px; box-sizing:border-box; margin:0 0 var(--tp-s3,1.5rem); padding:10px 14px;
  border:1px solid var(--tp-rule,#D8CFBE); background:var(--tp-kinari-hi,#FAF6EE); color:var(--tp-ink,#22201C); text-decoration:none}
.tpk-kiji-strip:hover{border-color:var(--tp-green,#2F4F43)}
.tpk-kiji-strip:focus-visible{outline:2px solid var(--tp-green,#2F4F43); outline-offset:2px}
.tpk-kiji-strip img{flex:none; width:64px; height:44px; object-fit:cover}
.tpk-kiji-strip__t{min-width:0; display:flex; flex-direction:column}
.tpk-kiji-strip small{font-size:.75rem; color:var(--tp-ink-sub,#5C574D); letter-spacing:.06em}
.tpk-kiji-strip b{font-weight:400; font-family:var(--tp-mincho,serif); font-size:.9375rem; line-height:1.5}

/* 記事の題・写真の見出し・一覧の題は、行の長さをそろえて折り返す（写真のページの題と同じ。1行めが長く2行めに1語だけ残る形を避ける。2026-10-16 番頭の判断） */
.tp-read__h1:has(> .tpk-phrase),.tp-read__body h2.tpk-kiji-h,.tp-read .tp-list__title:has(.tpk-phrase){text-wrap:balance}
/* 写真の見出しの下の1行「古写真・京都府・明治中期」（写真のページの名前の下と同じ言葉。2026-10-16 ご主人の札「足す」） */
.tp-read .tp-read__body > h2.tpk-kiji-h:has(+ .tpk-kiji-meta){margin-bottom:.35em}
.tp-read .tp-read__body > .tpk-kiji-meta{margin:0 0 1.2em; font-size:.8125rem; line-height:1.7; letter-spacing:.04em; color:var(--tp-ink-sub,#5C574D)}
/* 記事の一覧：見出しの下の説明と、記事ごとの1枚めの写真（docs/karakuri/kiji-page-an-2026-10-16.md の 2・1） */
.tpk-kiji-lead{margin:0 0 var(--tp-s3,1.5rem); font-size:.875rem; line-height:1.9; color:var(--tp-ink-sub,#5C574D)}
.tpk-kiji-li{display:block; margin:0 0 12px; overflow:hidden; background:var(--tp-kinari-hi,#FAF6EE); -webkit-touch-callout:none}
.tpk-kiji-li img{display:block; width:100%; height:auto; aspect-ratio:1200 / 630; object-fit:cover; transition:transform var(--tpk-t-slow) var(--tpk-ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .tp-list__item:has(.tpk-kiji-li):hover .tpk-kiji-li img{transform:scale(1.02)}
}
/* 記事の終わりの「あわせて眺めたい写真」。読みものの幅（712px）なので、パソコンは3列、スマホは2列（1列だと6枚がとても長くなる） */
.tpk-kiji-rel .tpk-ph-h2{margin:0 0 var(--tp-s2,1rem); font-size:1.125rem}
.tpk-kiji-rel .tpk-grid{margin:0; gap:28px 16px}
.tp-read__body .tpk-kiji-rel a{text-decoration:none}
@media (max-width:599px){
  .tpk-kiji-rel .tpk-grid--photos{grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 12px}
  .tpk-kiji-rel .tpk-card4__name{font-size:.9375rem}   /* 写真のページの同じ欄（.tpk-ph-related）とそろえる */
}
/* 記事の動き（kioku-kiji.js。2026-10-17 意匠）：2枚め以降の写真と「あわせて眺めたい写真」が、画面に入ると下から静かに浮かぶ。
   印（.tpk-rv-on・.tpk-rv）は JS が動いてよいときだけ付けるので、JS が無いとき・動きを減らす設定では最初から出ている。
   トップの数字のコーナーと同じ速さと曲線（--tpk-ease） */
.tpk-rv-on .tpk-rv{transition:opacity .7s ease-out, transform .9s var(--tpk-ease); transition-delay:var(--tpk-d,0s)}
.tpk-rv-on .tpk-rv:not(.is-in){opacity:0; transform:translateY(16px)}
@media print{ .tpk-rv-on .tpk-rv{opacity:1 !important; transform:none !important} }   /* 印刷では、まだ画面に入っていない写真も出す（確認係） */

/* フッターの「記憶壁紙」の段が9つ（ことば帳のあとに「整え方」。TPK_Page::totonoe_footer）になったら5段に（親テーマは7つ以上で4段。2026-10-17 意匠） */
/* 親テーマの「7つ以上で4段」と同じ強さだと、先に読まれるこちらが負けるので、p を足して強くする（確認係） */
.tp-footer p.tp-footer__list:has(> a:nth-child(9)){grid-template-rows:repeat(5, auto)}