/* 話題の投稿の頁(wadai)と、最初の画面からの入口。pages.css・seo.css の上に重ねる。
   絵本のページ(10-14 に選ばれた形): 頭の絵・丸い戻る・丸いタブ・上位 3 件は横長のカード・4〜10 位は 2 列・頁の下は赤い土台に町の札。
   色・書体・赤い線・2px の紺の枠・栞の形は 一覧の画面と同じ。影・ぼかし・グラデーションは使わない。
   絵は css の背景(押せない飾り)。頁の中に <img> は置かない。 */

/* ---- 頁の頭: 象の庭の絵(1 枚)に題を重ねる・丸い戻る */
.wd-head { position: relative; margin: -6px -20px 0; }
.wd-bk { position: absolute; z-index: 3; right: 12px; top: -54px; margin: 0; padding: 0; width: 44px; height: 44px; min-width: 44px; min-height: 44px; justify-content: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); font-size: 20px; }
.wd-stage { position: relative; overflow: hidden; aspect-ratio: 2 / 1; display: flex; align-items: center; padding: 0 0 0 8%; container-type: inline-size; background: url(wd-head.png) 0 0 / 100% 100% no-repeat; }
.wd-stage h1 { margin: 0; padding: 0 0 6px; border-bottom: 4px solid var(--red); font-size: 22px; font-size: 6.1cqw; line-height: 1.25; }
.wd-ctl { padding: 8px 0 0; }
.wd-at { margin: 0; font-size: 13px; line-height: 1.5; }
.wd-at time { font-weight: 700; }

/* ---- 期間のタブ。JS が無いときは出さず、3 つの期間を縦に並べる */
.wd-tabs { display: none; gap: 8px; margin: 8px 0 0; }
.js .wd-tabs { display: flex; }
.wd-tabs button { flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; padding: 0 4px; border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.wd-tabs button[aria-selected="true"] { background: var(--ki); }
.wd-ph { margin: 30px 0 0; }
.js .wd-ph { display: none; }
.js .wd-panel { display: none; }
.js .wd-panel.on { display: block; }
.wd-cnt { margin: 14px 0 0; font-size: 13px; line-height: 1.4; }

/* ---- 順位のカード */
.wd-list { list-style: none; margin: 0; padding: 0; }
.wd-card { position: relative; margin: 0; background: var(--paper); border: 2px solid var(--ink); }
.wd-n { display: block; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--red); line-height: 1; }
/* 順位の栞(参加料の栞と同じ形・色)。1〜3 位は黄色で大きく */
.wd-bm { display: inline-block; flex: none; padding: 0 0 2px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%); }
.wd-bm i { display: block; min-width: 34px; margin: 0 2px; padding: 5px 6px 14px; background: var(--paper); color: var(--ink); font-style: normal; font-size: 17px; font-weight: 700; line-height: 1.1; text-align: center; white-space: nowrap; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%); }
.wd-bm i small { font-size: 11px; font-weight: 700; }
.wd-bm.big { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 11px), 0 100%); }
.wd-bm.big i { min-width: 52px; padding: 7px 8px 18px; background: var(--ki); font-size: 30px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 11px), 0 100%); }
.wd-bm.big i small { font-size: 13px; }
.wd-who { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.wd-when { display: block; font-size: 12px; line-height: 1.4; }
.wd-open { display: block; min-width: 0; color: var(--ink); text-decoration: none; }
.wd-open:focus-visible { outline-offset: 0; }
.wd-kd { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 3px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.wd-kd::before { content: ""; flex: none; width: 20px; height: 20px; background: url(wd-kp.png) center / contain no-repeat; }
.wd-kd.reel::before { width: 13px; height: 20px; background-image: url(wd-kr.png); }

/* 上位 3 件: 横長。左に縮めた埋め込み、右に順位・数・名前・日時 */
.wd-top { margin: 12px 0 14px; }
.wd-top > li + li { margin-top: 16px; }
.wd-big { display: flex; gap: 12px; padding: 10px; border-bottom: 6px solid var(--red); }
.wd-big .wd-emb { width: 156px; height: 214px; }
.wd-side { position: relative; min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wd-rk { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 8px; }
.wd-big .wd-rk::after { content: ""; order: 1; flex: none; width: 52px; height: 52px; margin-left: auto; pointer-events: none; background: center / contain no-repeat; }
.wd-big[data-rank="1"] .wd-rk::after { background-image: url(wd-mk1.png); }
.wd-big[data-rank="2"] .wd-rk::after { background-image: url(wd-mk2.png); }
.wd-big[data-rank="3"] .wd-rk::after { background-image: url(wd-mk3.png); }
.wd-big .wd-rk .wd-n { order: 2; flex: 0 0 100%; }
.wd-rk .wd-n { margin-top: 2px; font-size: 32px; white-space: nowrap; }
.wd-rk .wd-n[data-len=m] { font-size: 26px; }
.wd-rk .wd-n[data-len=l] { font-size: 20px; margin-top: 8px; }
.wd-rk .wd-n[data-len=x] { font-size: 14px; margin-top: 10px; }
.wd-nl { margin-top: -2px; font-size: 11px; line-height: 1.3; }
.wd-big .wd-who { font-size: 14px; }

/* 4 位から 10 位: 2 列 */
.wd-rest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; }
.wd-row { padding: 6px 6px 28px; }
.wd-row::after { content: ""; position: absolute; right: -8px; top: -14px; width: 24px; height: 24px; pointer-events: none; background: center / contain no-repeat; }
.wd-row[data-rank="4"]::after { background-image: url(wd-sc1.png); }
.wd-row[data-rank="5"]::after { background-image: url(wd-sc2.png); }
.wd-row[data-rank="6"]::after { background-image: url(wd-sc3.png); }
.wd-row[data-rank="7"]::after { background-image: url(wd-sc4.png); }
.wd-row[data-rank="8"]::after { background-image: url(wd-sc5.png); }
.wd-row[data-rank="9"]::after { background-image: url(wd-sc3.png); }
.wd-row[data-rank="10"]::after { background-image: url(wd-sc4.png); }
.wd-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; margin-bottom: 6px; }
.wd-row .wd-n { margin-top: 6px; font-size: 24px; text-align: right; }
.wd-row .wd-n { white-space: nowrap; min-width: 0; }
.wd-row .wd-n[data-len=m] { font-size: 19px; margin-top: 9px; }
.wd-row .wd-n[data-len=l] { font-size: 14px; margin-top: 11px; }
.wd-row .wd-n[data-len=x] { font-size: 10px; margin-top: 14px; }
.wd-row .wd-emb { width: 100%; height: 190px; }
.wd-row .wd-open { margin-top: 6px; }
.wd-row .wd-who { font-size: 12.5px; }
.wd-row .wd-when { font-size: 11px; line-height: 16px; }
.wd-row .wd-kd { position: absolute; right: 6px; bottom: 6px; padding-right: 5px; }
.wd-row .wd-kd::before { width: 16px; height: 16px; }
.wd-row .wd-kd.reel::before { width: 10px; height: 16px; }

/* ---- 埋め込み(Instagram 公式)。縮めて窓から見せる。窓の高さと縮み方は wadai.js が決める(--s は幅 328 に対する窓の幅の比) */
.wd-emb { position: relative; overflow: hidden; flex: none; border: 2px solid var(--ink); background: #EADFC6; --s: .46; }
.wd-emb .e-f { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6px; text-align: center; font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--ink); text-underline-offset: 3px; }
.wd-emb[data-ready]:not([data-s="fail"]) .e-f { display: none; }
.wd-emb .e-m { position: absolute; left: 0; top: 0; width: 328px; transform-origin: 0 0; transform: scale(var(--s)); visibility: hidden; background: #fff; }
.wd-emb[data-s="ok"] .e-m { visibility: visible; }
.wd-emb .e-m:empty { display: none; }
.wd-emb .e-m blockquote { height: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; }
.wd-emb .e-m iframe.instagram-media { display: block; width: 328px !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.wd-emb .e-s { position: absolute; inset: 0; margin: 0; padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 12px; line-height: 1.4; }
.wd-emb .e-s:empty { display: none; }
.wd-emb .e-t { position: absolute; inset: 0; z-index: 2; display: block; }
.wd-emb[data-s="fail"] .e-s { color: var(--red); }
.wd-emb[data-s="fail"] .e-f { inset: auto 0 0 0; padding: 4px; }
.wd-emb .e-b { min-height: 44px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--ki); border: 2px solid var(--ink); border-radius: 0; cursor: pointer; }

/* ---- 0 件の期間 */
.wd-empty { position: relative; margin: 18px 0 0; padding: 16px 100px 14px 14px; background: var(--paper); border: 2px solid var(--ink); border-left: 8px solid var(--red); min-height: 130px; }
.wd-empty p { margin: 0; font-size: 15px; line-height: 1.7; }
.wd-empty p + p { margin-top: 4px; }
.wd-empty::after { content: ""; position: absolute; right: 12px; top: 14px; width: 76px; height: 67.4px; background: url(mc-plane.png) center / 100% 100% no-repeat; pointer-events: none; }
.wd-to { display: block; min-height: 44px; margin: 10px 0 0; padding: 0 14px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }

/* ---- 頁の下: 権利の一文・注意書き・町の一覧への戻り・赤い土台に町の札 */
.wd-foot { margin: 22px 0 0; }
.wd-right { margin: 0; font-size: 12px; line-height: 1.5; }
.wd-nt { margin: 10px 0 0; }
.wd-nt summary { display: flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700; cursor: pointer; }
.wd-notes { margin: 0; padding: 0 0 6px 1.2em; font-size: 12px; line-height: 1.55; }
.wd-notes li { margin: 3px 0; }
.wd-moreb { margin: 12px 0 0; }
.wd-more { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 2px solid var(--ink); border-radius: 24px; background: var(--ki); color: var(--ink); font-size: 16px; font-weight: 700; text-decoration: none; }
.wrap:has(.wd-stage) .sitefoot { margin: 18px 0 0; padding: 0 0 28px; border-top: 0; }
.wrap:has(.wd-stage) .sitefoot nav.towns { gap: 8px 6px; padding: 34px 20px 8px; background: url(dai_aka.png) 0 0 / 100% auto no-repeat; }
.wrap:has(.wd-stage) .sitefoot nav.towns a { display: block; width: calc((100% - 24px) / 5); min-width: 0; min-height: 44px; padding: 9px 0 6px; background: var(--paper); border-bottom: 3px solid var(--red); font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; white-space: nowrap; }
.wrap:has(.wd-stage) .sitefoot nav.towns a::after { content: " >"; color: var(--red); }
.wrap:has(.wd-stage) .sitefoot nav:not(.towns), .wrap:has(.wd-stage) .sitefoot p { margin-left: 20px; margin-right: 20px; }
.wrap:has(.wd-stage) .sitefoot nav:not(.towns) { margin-top: 6px; }

/* ---- 最初の画面(TOP)の入口。舞台(390x844)の題の右の空き。舞台の x 318〜382・y 128〜172(DOM)。
   題の字(絵)は x 289 まで・その下の案内の字は x 297 まで(インクで測った値。案内は y 176〜 で、入口の y 128〜172 とは重ならない)。390 以上では題から 21px 以上離す。
   上は日付の帯(y 67〜121)の下、下は浮く広告の × (y 199〜)より上。新着の札(右上 y 10〜54)・題の左のキャラ(x 8〜80)・広告 2 枠とは別の場所。
   舞台が 390 より狭いとき(電話は viewport を 390 に固定するので、狭い窓・iframe だけ)は、舞台の右端から 8px 内側に寄せ、幅を縮める。
   題の字は左詰めの絵なので左端は 297(題の字+8)より左へは行かない。それでも収まらない 359 未満は、字を左詰めにして舞台の端で切る(他の右端の部品の切れ方と同じ)。
   % は初期の包含ブロック(= 窓の幅からスクロールバーを引いた幅)で、舞台の幅と同じ。幅の分岐は media ではなくこの式で決める(スクロールバーの有無に左右されない) */
.wdin { --wdw: min(64px, calc(100% - 305px)); position: absolute; left: max(297px, min(calc(50% + 123px), calc(100% - 8px - var(--wdw)))); top: 128px; z-index: 3; box-sizing: border-box; width: var(--wdw); min-width: 22px; height: 44px; overflow: hidden; display: flex; align-items: center; justify-content: safe center; text-align: center;
  border: 2px solid #143048; border-radius: 22px; background: #F8D668; color: #143048; font-family: "Zen Maru Gothic", "BIZ UDPGothic", "Meiryo", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.wdin:focus-visible { outline: 3px solid #0E67B0; outline-offset: 2px; }