/* かみすけの吹き出しとメニュー。3案で部品は共通、違いは html[data-plan="a|b|c"] の節(置き場・出し方・出るものの形)。
   舞台は 390 幅で中央に立つ。#fads(画面の中央・頁の上の 0x0)を基準に、x は「中央からの px(舞台の x - 195)」で書く。絵本の絵・動き・広告には触れない。
   色と形は今の頁の道具だけ: 墨 #143048・紙 #FCFCF8・生成り #FFF0D7・黄 #F8D668・赤 #9C301C、2px の墨の縁、角は 8〜14px、影・ぼかしなし。 */
:root { --km-ink: #143048; --km-paper: #FCFCF8; --km-cream: #FFF0D7; --km-ki: #F8D668; --km-red: #9C301C; --km-font: "Zen Maru Gothic", "BIZ UDPGothic", "Meiryo", sans-serif; }

/* ---- かみすけの押せる箱は、動きを減らす設定でも残す(mc.js は箱ごと隠すが、ここは動きではなく入口) */
html[data-plan] .mcb-main[hidden] { display: block; }

/* ---- 吹き出し(#fads の中。広告・町の札・題と重ならない置き場は案ごと) */
.km-bub { position: absolute; z-index: 1; box-sizing: border-box; padding: 5px 9px 6px; border: 2px solid var(--km-ink); border-radius: 14px; background: var(--km-paper); color: var(--km-ink);
  font: 700 13px/1.3 var(--km-font); white-space: nowrap; text-align: left; visibility: hidden; opacity: 0; pointer-events: none; -webkit-tap-highlight-color: transparent; }
.km-bub span { display: block; }
.km-bub::after { content: ""; position: absolute; width: 9px; height: 9px; box-sizing: border-box; background: var(--km-paper); border: 2px solid var(--km-ink); transform: rotate(45deg); }
.km-bub.tl::after { left: -6px; top: calc(50% - 5px); border-right: 0; border-top: 0; }
.km-bub.tr::after { right: -6px; top: calc(50% - 5px); border-left: 0; border-bottom: 0; }
html.km-on:not(.km-open) .km-bub { visibility: visible; opacity: 1; pointer-events: auto; cursor: pointer; }
html[data-fm="full"] .km-bub { transition: opacity .2s ease-out, visibility 0s linear .2s; }
html[data-fm="full"].km-on:not(.km-open) .km-bub { transition: opacity .2s ease-out, visibility 0s; animation: km-pop .34s ease-out both; }
@keyframes km-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.km-bub.tl { transform-origin: 0 50%; } .km-bub.tr { transform-origin: 100% 50%; }

/* ---- メニュー(押したときに出る。body の直下) */
.km-scrim { position: fixed; inset: 0; z-index: 9; background: rgba(20, 48, 72, .18); touch-action: none; visibility: hidden; opacity: 0; }
.km-scrim.on { visibility: visible; opacity: 1; }
.km-menu { box-sizing: border-box; z-index: 10; background: var(--km-paper); color: var(--km-ink); font-family: var(--km-font); visibility: hidden; opacity: 0; }
.km-menu.on { visibility: visible; opacity: 1; }
.km-menu:focus { outline: none; }
.km-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.km-head b { font-size: 14px; color: var(--km-red); }
.km-x { min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--km-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.km-x svg { width: 14px; height: 14px; display: block; pointer-events: none; }
.km-menu ul { list-style: none; margin: 0; padding: 0; }
.km-it { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 4px 12px; border: 2px solid var(--km-ink); border-radius: 22px; background: var(--km-paper); color: var(--km-ink);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.km-it .tx { display: block; min-width: 0; }
.km-it .tt { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; }
.km-it .ss { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; opacity: .78; }
.km-it svg { flex: none; width: 8px; height: 12px; display: block; }
.km-it svg path { stroke: var(--km-red); }
.km-it.cur { background: var(--km-ink); color: var(--km-paper); }
.km-it.cur svg { display: none; }
.km-it.cur .ss { opacity: 1; }
.km-guide { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; border: 2px solid var(--km-ink); border-radius: 22px; background: var(--km-paper); color: var(--km-ink); font: 700 15px/1.2 var(--km-font); text-decoration: none; }
.km-it:focus-visible, .km-x:focus-visible, .km-guide:focus-visible, .km-bub:focus-visible { outline: 3px solid #0E67B0; outline-offset: 2px; }
.km-row { display: none; }

/* ---- PC(幅 900px 以上): かみすけは舞台の左の余白のまま(mc.css)。吹き出しはその左、メニューはその下 */
.km-bub { right: 313px; top: 380px; }
@media (min-width: 900px) {
  .km-bub { white-space: normal; max-width: calc(50vw - 323px); }
  .km-menu { position: absolute; left: calc(50% - 303px); top: 444px; width: 238px; padding: 4px 10px 10px; border: 2px solid var(--km-ink); border-radius: 12px; }
  .km-menu li + li { margin-top: 6px; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) { html[data-fm="full"] .km-menu { transform: scale(.96); transform-origin: 0 0; transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s linear .16s; }
  html[data-fm="full"] .km-menu.on { transform: none; transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s; } }

/* ================= 案 A: 据え置き。かみすけは今の場所(題の左)。吹き出しは広告のあるなしにかかわらず出る。押すと下にカードが下がる =================
   吹き出しは 2 行の紙。かみすけの足もとの右(スマホ: 舞台の x 56〜195・y 210〜259。PC: かみすけの左下)に置き、
   しっぽは紙の上の縁から、かみすけの体の下の角へ細く伸びる(先は体に 3px かかる)。しっぽの向き = 先からかみすけの口元(舞台の x 45・y 172)を見た向き(誤差 2 度)。
   題・サブの字・広告・町の札・かみすけの足(x 33〜58・y 195〜207)・右の手(x 68〜80・y 167〜183)には被らない。上の広告(top-1)を舞台の下へ移したので、吹き出しの置き場は広告と取り合わない。
   しっぽは墨の三角(::before)に紙の三角(::after)を重ねて縁を作り、紙の縁の 2px も紙で覆う(紙としっぽが 1 つの輪郭になる)。 */
@media (max-width: 899.98px) {
  html[data-plan="a"] .km-bub { left: -139px; right: auto; top: 210px; }
  html[data-plan="a"] .km-menu { position: absolute; left: calc(50% - 187px); top: 216px; width: 238px; padding: 4px 10px 10px; border: 2px solid var(--km-ink); border-radius: 12px; }
  html[data-plan="a"] .km-menu li + li { margin-top: 6px; }
}
@media (min-width: 900px) { html[data-plan="a"] .km-bub { right: 281px; top: 441px; width: max-content; max-width: none; white-space: nowrap; } }
html[data-plan="a"] .km-bub::before, html[data-plan="a"] .km-bub::after { content: ""; position: absolute; top: -24px; width: 48px; height: 26px; box-sizing: border-box; border: 0; transform: none; background: var(--km-ink); }
html[data-plan="a"] .km-bub::after { background: var(--km-paper); }
html[data-plan="a"] .km-bub.tl::before { left: -2px; right: auto; clip-path: polygon(19px 24px, 39px 24px, 8px 3px); }
html[data-plan="a"] .km-bub.tl::after { left: -2px; right: auto; clip-path: polygon(22.3px 26px, 38.4px 26px, 13.5px 9.1px); }
html[data-plan="a"] .km-bub.tr::before { right: -2px; left: auto; clip-path: polygon(29px 24px, 9px 24px, 40px 3px); }
html[data-plan="a"] .km-bub.tr::after { right: -2px; left: auto; clip-path: polygon(25.7px 26px, 9.6px 26px, 34.5px 9.1px); }
html[data-plan="a"] .km-bub.tl { transform-origin: 8px -19px; }
html[data-plan="a"] .km-bub.tr { transform-origin: calc(100% - 8px) -19px; }

/* ================= 案 B / C: かみすけを町の札の間の余白へ(絵は 0.78 倍。動きは「変身」だけ=はみ出しが 2px) =================
   --sx --sy = 静止の絵の左上(中央からの px・頁の上からの px)。k = 倍率。mc.css の数字を k 倍に置き換える。 */
@media (max-width: 899.98px) {
  html[data-plan="b"] { --k: .72; --sx: -187; --sy: 382; }
  html[data-plan="c"] { --k: .78; --sx: 127; --sy: 508; }
  html[data-plan="b"] #fads::after, html[data-plan="c"] #fads::after { left: calc(var(--sx) * 1px); top: calc(var(--sy) * 1px); width: calc(72px * var(--k)); height: calc(67.5px * var(--k)); }
  html[data-plan="b"] #fads .mcb-main, html[data-plan="c"] #fads .mcb-main { left: calc(var(--sx) * 1px); top: calc(var(--sy) * 1px - 7.5px * var(--k)); width: calc(72px * var(--k)); height: calc(75px * var(--k)); --bx: 0; --by: calc(7.5 * var(--k)); }
  html[data-plan="b"] .mcb[data-m="main"], html[data-plan="c"] .mcb[data-m="main"] { --ox: calc(-1.16 * var(--k)); --oy: calc(-2.42 * var(--k)); --cw: calc(74.21 * var(--k)); --ch: calc(70.01 * var(--k)); }
  html[data-plan="b"] .mcb[data-m="hop"], html[data-plan="c"] .mcb[data-m="hop"] { --ox: calc(-5.24 * var(--k)); --oy: calc(-18.03 * var(--k)); --cw: calc(82.17 * var(--k)); --ch: calc(85.62 * var(--k)); }
}

/* 案 B: 左の余白(設楽の札の下・新城の札の上)。吹き出しは右隣。押すと同じ帯に 4 枚の札が並ぶ(札の形は町の札と同じ紙) */
@media (max-width: 899.98px) {
  html[data-plan="b"] .km-bub { left: -129px; right: auto; top: 381px; }
  html[data-plan="b"] .km-menu { position: absolute; left: calc(50% - 125px); top: 381px; width: 308px; padding: 0; border: 0; background: none; border-radius: 0; }
  html[data-plan="b"] .km-head, html[data-plan="b"] .km-guide { display: none; }
  html[data-plan="b"] .km-menu ul { display: flex; gap: 4px; }
  html[data-plan="b"] .km-menu li { flex: none; width: 74px; margin: 0; }
  html[data-plan="b"] .km-it { flex-direction: column; justify-content: center; gap: 0; height: 46px; min-height: 46px; padding: 0 2px; background: var(--km-paper); text-align: center; }
  html[data-plan="b"] .km-it .tt { font-size: 13px; white-space: nowrap; }
  html[data-plan="b"] .km-it .ss, html[data-plan="b"] .km-it svg { display: none; }
  html[data-plan="b"] .km-it.cur { background: var(--km-ink); }
  html[data-plan="b"] .km-menu li { opacity: 0; }
  html[data-plan="b"] .km-menu.on li { opacity: 1; }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) {
  html[data-plan="b"][data-fm="full"] .km-menu li { transform: translateY(6px); transition: opacity .18s ease-out, transform .18s ease-out; }
  html[data-plan="b"][data-fm="full"] .km-menu.on li { transform: none; }
  html[data-plan="b"][data-fm="full"] .km-menu.on li:nth-child(2) { transition-delay: .04s; }
  html[data-plan="b"][data-fm="full"] .km-menu.on li:nth-child(3) { transition-delay: .08s; }
  html[data-plan="b"][data-fm="full"] .km-menu.on li:nth-child(4) { transition-delay: .12s; }
}

/* 案 C: 右の余白(豊川の札の下・豊橋の札の上)。吹き出しは左隣。押すと画面の下から紙のシートが上がる(日付メニューと同じ作り) */
@media (max-width: 899.98px) {
  html[data-plan="c"] .km-bub { left: auto; right: -121px; top: 504px; }
}
html[data-plan="c"] .km-menu { position: fixed; left: 50%; margin-left: -195px; right: auto; top: auto; bottom: 0; width: 390px; max-height: calc(100vh - 16px); overflow: auto; padding: 4px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border: 2px solid var(--km-ink); border-bottom: 0; border-radius: 16px 16px 0 0; }
html[data-plan="c"] .km-menu li + li { margin-top: 8px; }
html[data-plan="c"] .km-it { min-height: 56px; }
@media (prefers-reduced-motion: no-preference) {
  html[data-plan="c"][data-fm="full"] .km-menu { transform: translateY(100%); transition: transform .26s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .26s; opacity: 1; }
  html[data-plan="c"][data-fm="full"] .km-menu.on { transform: none; transition: transform .26s cubic-bezier(.23, 1, .32, 1), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) { html[data-plan="c"]:not([data-fm="full"]) .km-menu { transition: none; } }

/* 4ページそろえ: 広告の閉じるボタンも44px四方(押す所の下限) */
#fads .fa > .fw > .fa-x{width:44px;height:44px;top:-22px;right:0}

/* ---- 「かみすけをタップ」(1行)は吹き出しの続きの行(その場で話す型)。別の札にしない。飛ぶボタン(2px 紺の枠・紙色・角丸22)と取り違えないよう、赤い字にする ---- */
.km-bub .tp { color: var(--km-red); }
.km-bub .tp0 { margin-top: 3px; }