/* おまけの超絶カラフル・ワークシート（worksheet.css の上に重ねる）。色は body の --c1〜--c6（行事ごと） */
.bx-body {
  --ink: #22163f;
  background: radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--c1) 30%, #fff) 0 8%, transparent 9%), radial-gradient(circle at 90% 30%, color-mix(in srgb, var(--c2) 30%, #fff) 0 6%, transparent 7%), #e9e4f5;
}
.wp.bx {
  padding: 9mm 10mm 7mm;
  color: var(--ink);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--c5) 55%, transparent) 0 0.9mm, transparent 1mm) 0 0 / 9mm 9mm,
    #fff;
  border: 0;
}
/* ページのふち：虹色の太い枠 */
.wp.bx::before {
  content: '';
  position: absolute;
  inset: 4mm;
  border-radius: 7mm;
  padding: 2.2mm;
  background: conic-gradient(from 20deg, var(--c1), var(--c5), var(--c3), var(--c2), var(--c4), var(--c1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.wp.bx::after {
  content: '';
  position: absolute;
  inset: 6.2mm;
  border-radius: 5mm;
  background: #fff;
  z-index: 0;
}
.wp.bx > * {
  position: relative;
  z-index: 1;
}
.wp.bx .wf {
  border-top: 0;
  margin: 1.5mm 3mm 0;
  color: color-mix(in srgb, var(--ink) 60%, #fff);
}

/* 見出し */
.bx-h {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3mm;
  margin: 1mm 2mm 3.5mm;
  padding: 2.4mm 3mm;
  border: 2.4px solid var(--ink);
  border-radius: 5mm;
  background: linear-gradient(100deg, color-mix(in srgb, var(--c1) 18%, #fff), color-mix(in srgb, var(--c3) 18%, #fff) 55%, color-mix(in srgb, var(--c2) 20%, #fff));
  box-shadow: 1.6mm 1.6mm 0 var(--ink);
}
.bx-tag {
  flex: none;
  width: 16mm;
  height: 16mm;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--c2);
  color: #fff;
  border: 2.4px solid var(--ink);
  line-height: 1;
  transform: rotate(-8deg);
}
.bx-tag small {
  font: 700 6.5pt 'Fredoka', sans-serif;
  letter-spacing: 0.1em;
}
.bx-tag b {
  font: 22pt 'Luckiest Guy', 'Fredoka', sans-serif;
  color: var(--c5);
  -webkit-text-stroke: 1px var(--ink);
}
.bx-ht {
  flex: 1;
  min-width: 0;
}
.bx-k {
  margin: 0;
  font: 700 8pt 'Fredoka', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 70%, #fff);
}
.bx-h h2 {
  margin: 0.3mm 0 0;
  font: 23pt/1.05 'Luckiest Guy', 'Fredoka', sans-serif;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.9px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0.6mm 0.6mm 0 var(--ink);
}
/* 長いタイトルは少し小さく（1行に収める） */
.bx-h h2.l1 {
  font-size: 20pt;
}
.bx-h h2.l2 {
  font-size: 17pt;
}
.bx-s {
  margin: 0.8mm 0 0;
  font: 700 9pt/1.4 'Zen Maru Gothic', sans-serif;
}
.bx-name {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 1.5mm;
  padding: 2mm 2.5mm;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 3mm;
  font: 700 8.5pt 'Fredoka', sans-serif;
}
.bx-name i {
  width: 34mm;
  height: 5mm;
  border-bottom: 1.4px dashed var(--ink);
}
.bx .wb {
  margin: 0 2mm;
  font-size: calc(11pt * var(--fs));
}

/* ステッカー（Codex の絵。背景は透明） */
.bx-st {
  display: block;
  width: 24mm;
  height: 24mm;
  object-fit: contain;
  filter: drop-shadow(0.5mm 0.7mm 0 rgba(34, 22, 63, 0.35));
}
.bx-st.sm {
  width: 11mm;
  height: 11mm;
}
.bx-st-ph {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font: 700 14pt 'Fredoka', sans-serif;
  border: 2px solid var(--ink);
}

/* X1 単語ずかん */
.bx-hero {
  position: relative;
  height: calc(64mm * var(--fs));
  border: 2.6px solid var(--ink);
  border-radius: 5mm;
  overflow: hidden;
  background: linear-gradient(120deg, var(--c1), var(--c2));
  margin-bottom: 3.5mm;
}
.bx-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  display: block;
}
.bx-hero-t {
  position: absolute;
  left: 3mm;
  top: 3mm;
  padding: 2mm 4mm 2.4mm;
  background: rgba(255, 255, 255, 0.92);
  border: 2.4px solid var(--ink);
  border-radius: 4mm;
  box-shadow: 1.2mm 1.2mm 0 var(--ink);
  transform: rotate(-2deg);
}
.bx-hero-t b {
  display: block;
  font: 21pt/1 'Luckiest Guy', sans-serif;
  -webkit-text-stroke: 0.8px var(--ink);
  paint-order: stroke fill;
}
.bx-hero-t span {
  font: 9pt 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
}
.bx-hero .ws-qr {
  position: absolute;
  right: 3mm;
  bottom: 3mm;
  margin: 0;
  float: none;
  border-width: 2px;
}
.bx-dict {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.6mm;
}
.bx-tile {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.6mm;
  padding: 2mm 2mm 1.4mm;
  border: 2.2px solid var(--ink);
  border-radius: 4mm;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 26%, #fff), #fff 72%);
}
.bx-tile .bx-st {
  width: calc(24mm * var(--fs));
  height: calc(24mm * var(--fs));
}
.bx-tile > b {
  font: 700 calc(14pt * var(--fs)) / 1 'Fredoka', sans-serif;
  color: var(--ink);
}
.bx-tile svg {
  width: 100%;
  height: auto;
}
.bx-no {
  position: absolute;
  left: 1.6mm;
  top: 1.4mm;
  width: 6mm;
  height: 6mm;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font: 700 8pt 'Fredoka', sans-serif;
  border: 1.6px solid var(--ink);
}
.bx-say {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2mm 2.4mm;
  margin-top: 3.4mm;
}
.bx-say b {
  font: 700 10pt 'Zen Maru Gothic', sans-serif;
}
.bx-say span {
  position: relative;
  padding: 1.4mm 3.6mm;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font: 700 calc(11.5pt * var(--fs)) 'Fredoka', sans-serif;
  text-shadow: 0 0 2px var(--ink), 0 0 1px var(--ink);
}

/* X2 絵のクロスワード */
.bx-cw {
  display: grid;
  place-items: center;
  padding: 3mm;
  border-radius: 5mm;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c5) 14%, #fff) 0 4mm, #fff 4mm 8mm);
  border: 2px dashed color-mix(in srgb, var(--ink) 40%, #fff);
}
.bx-cw svg {
  max-width: 100%;
  max-height: calc(150mm * var(--fs));
  height: auto;
}
.bx-clues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3mm;
  margin-top: 3mm;
}
.bx-clues h4 {
  margin: 0 0 1.6mm;
  padding: 1mm 3mm;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font: 700 11pt 'Fredoka', 'Zen Maru Gothic', sans-serif;
  border: 2px solid var(--ink);
  display: inline-block;
}
.bx-cl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8mm;
}
.bx-clue {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1mm;
  padding: 1.6mm 1mm 1.8mm;
  border: 2px solid var(--ink);
  border-radius: 3.5mm;
  background: color-mix(in srgb, var(--c) 18%, #fff);
}
.bx-clue .bx-st {
  width: calc(21mm * var(--fs));
  height: calc(21mm * var(--fs));
}
.bx-cn {
  position: absolute;
  left: 1mm;
  top: 1mm;
  min-width: 6.5mm;
  padding: 0.2mm 1mm;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  border: 1.5px solid var(--ink);
  font: 700 8.5pt 'Fredoka', sans-serif;
  text-align: center;
}
.bx-cn small {
  font-size: 7pt;
  margin-left: 0.4mm;
}
.bx-len {
  display: flex;
  gap: 0.6mm;
}
.bx-len i {
  width: 2.4mm;
  height: 2.4mm;
  border: 1.2px solid var(--ink);
  border-radius: 0.5mm;
  background: #fff;
}

/* X3 脱出ゲーム */
.bx-es-top {
  display: grid;
  grid-template-columns: 70mm 1fr;
  gap: 3mm;
  align-items: center;
  margin-bottom: 3mm;
}
.bx-es-top img {
  width: 100%;
  height: calc(40mm * var(--fs));
  object-fit: cover;
  border: 2.4px solid var(--ink);
  border-radius: 4mm;
  display: block;
}
.bx-es-top p {
  margin: 0;
  padding: 2.4mm 3.4mm;
  border: 2.4px solid var(--ink);
  border-radius: 4mm;
  background: color-mix(in srgb, var(--c6) 92%, #000);
  color: #fff;
  font: 600 calc(11pt * var(--fs)) / 1.5 'Fredoka', sans-serif;
  box-shadow: 1.2mm 1.2mm 0 var(--c1);
}
.bx-locks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 3.4mm;
  flex: 1;
  margin-bottom: 3mm;
}
.bx-p3 .wb {
  display: flex;
  flex-direction: column;
}
.bx-lock {
  display: flex;
  flex-direction: column;
  padding: 2.2mm 3mm 2.6mm;
  border: 2.4px solid var(--ink);
  border-radius: 4mm;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 20%, #fff), #fff 60%);
  box-shadow: 1.2mm 1.2mm 0 var(--c);
}
.bx-lk-h {
  display: flex;
  align-items: center;
  gap: 2mm;
  margin-bottom: 1.4mm;
}
.bx-lk-h > span {
  width: 8mm;
  height: 8mm;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font: 700 12pt 'Fredoka', sans-serif;
  border: 2px solid var(--ink);
}
.bx-lk-h b {
  flex: 1;
  font: 700 12pt 'Fredoka', sans-serif;
}
.bx-q {
  margin: 0 0 1mm;
  font: 600 calc(12pt * var(--fs)) / 1.4 'Fredoka', sans-serif;
}
.bx-rule {
  margin: 0 0 1.6mm;
  font: 700 calc(9.5pt * var(--fs)) / 1.4 'Nunito', sans-serif;
  color: color-mix(in srgb, var(--ink) 80%, #fff);
}
.bx-rule small {
  font: 700 8pt 'Zen Maru Gothic', sans-serif;
  color: color-mix(in srgb, var(--ink) 65%, #fff);
}
.bx-ans {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  gap: 2mm;
  font: 700 9.5pt 'Fredoka', sans-serif;
}
.bx-ans i {
  flex: 1;
  height: 6mm;
  border-bottom: 1.6px solid var(--ink);
}
/* 南京錠の形の数字の箱 */
.bx-pad {
  position: relative;
  flex: none;
  width: 13mm;
  height: 11mm;
  margin-top: 5mm;
  border: 2.4px solid var(--ink);
  border-radius: 2.4mm;
  background: var(--c5);
}
.bx-pad::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 7.4mm;
  height: 5.4mm;
  margin-left: -3.7mm;
  border: 2.4px solid var(--ink);
  border-bottom: 0;
  border-radius: 4mm 4mm 0 0;
}
.bx-pad em {
  position: absolute;
  inset: 1.6mm 2.4mm;
  background: #fff;
  border-radius: 1.2mm;
  border: 1.4px solid var(--ink);
}
.bx-final {
  background: linear-gradient(160deg, color-mix(in srgb, var(--c6) 92%, #000), color-mix(in srgb, var(--c2) 70%, #000));
  color: #fff;
  box-shadow: 1.2mm 1.2mm 0 var(--c5);
}
.bx-final .bx-lk-h > span {
  background: var(--c5);
}
.bx-final .bx-rule {
  color: var(--c5);
}
.bx-code {
  display: flex;
  justify-content: center;
  gap: 2mm;
  margin: 1.4mm 0 2mm;
}
.bx-code span {
  position: relative;
  width: 11mm;
  height: 13mm;
  border-radius: 2.4mm;
  background: #fff;
  border: 2.4px solid var(--c);
}
.bx-code small {
  position: absolute;
  left: 50%;
  top: -2.6mm;
  transform: translateX(-50%);
  width: 5mm;
  height: 5mm;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font: 700 7pt/5mm 'Fredoka', sans-serif;
  text-align: center;
}

/* X4 マンガ */
.bx-bank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6mm 2mm;
  padding: 2mm 3mm;
  border: 2.2px dashed var(--ink);
  border-radius: 4mm;
  background: color-mix(in srgb, var(--c5) 22%, #fff);
  margin-bottom: 3mm;
}
.bx-bank b {
  font: 700 10.5pt 'Fredoka', sans-serif;
  margin-right: 1mm;
}
.bx-bank span {
  padding: 0.8mm 3.2mm;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: #fff;
  box-shadow: 0.8mm 0.8mm 0 var(--c);
  font: 700 11pt 'Fredoka', sans-serif;
}
.bx-comic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3mm;
}
.bx-panel {
  position: relative;
  aspect-ratio: 1;
  max-height: calc(88mm * var(--fs));
  border: 2.8px solid var(--ink);
  border-radius: 3mm;
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 25%, #fff);
}
.bx-panel > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bx-panel-ph {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c1) 20%, #fff) 0 6mm, #fff 6mm 12mm);
}
.bx-pn {
  position: absolute;
  right: 2mm;
  bottom: 2mm;
  width: 7mm;
  height: 7mm;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  border: 2px solid var(--ink);
  font: 700 10pt 'Fredoka', sans-serif;
}
.bx-bub {
  position: absolute;
  left: 3mm;
  right: 3mm;
  top: 3mm;
  padding: 1.6mm 3mm 2.2mm;
  background: #fff;
  border: 2.4px solid var(--ink);
  border-radius: 6mm;
  font: 700 calc(12.5pt * var(--fs)) / 1.45 'Fredoka', sans-serif;
  text-align: center;
}
.bx-bub::after {
  content: '';
  position: absolute;
  left: 22%;
  bottom: -3.4mm;
  width: 5mm;
  height: 5mm;
  background: #fff;
  border-right: 2.4px solid var(--ink);
  border-bottom: 2.4px solid var(--ink);
  transform: skewX(25deg) rotate(45deg);
}
.bx-bub small {
  display: block;
  font: 700 7.5pt 'Fredoka', sans-serif;
  color: var(--c);
  -webkit-text-stroke: 0.2px var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.bx-bl {
  display: inline-block;
  width: 22mm;
  height: 5mm;
  border-bottom: 1.8px solid var(--ink);
  vertical-align: -0.6mm;
}
.bx-my {
  margin-top: 3mm;
  padding: 2mm 3mm;
  border: 2.2px solid var(--ink);
  border-radius: 4mm;
  font: 700 10pt 'Zen Maru Gothic', sans-serif;
  background: color-mix(in srgb, var(--c3) 16%, #fff);
}
.bx-my b {
  font-family: 'Fredoka', sans-serif;
  color: var(--c2);
}
.bx-my i {
  display: block;
  height: 8mm;
  border-bottom: 1.6px solid var(--ink);
}

/* X5 絵さがし */
.bx-ispy {
  position: relative;
  border: 2.8px solid var(--ink);
  border-radius: 4mm;
  overflow: hidden;
  height: calc(150mm * var(--fs));
}
.bx-ispy img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bx-find {
  list-style: none;
  margin: 3mm 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6mm;
}
.bx-find li {
  display: flex;
  align-items: center;
  gap: 1.6mm;
  padding: 1.2mm 2mm;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 20%, #fff);
  font: 700 calc(10.5pt * var(--fs)) 'Fredoka', sans-serif;
  white-space: nowrap;
}
.bx-find li i {
  flex: none;
  width: 4.4mm;
  height: 4.4mm;
  border: 2px solid var(--ink);
  border-radius: 1.2mm;
  background: #fff;
}
.bx-write {
  margin-top: 3mm;
  padding: 2mm 3mm 1mm;
  border: 2.2px solid var(--ink);
  border-radius: 4mm;
  font: 700 9.5pt 'Zen Maru Gothic', sans-serif;
}
.bx-write b {
  font: 700 11pt 'Fredoka', sans-serif;
  color: var(--c2);
}
.bx-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4mm;
  margin-top: 1mm;
}
.bx-starters em {
  font: 600 9.5pt 'Fredoka', sans-serif;
  font-style: normal;
  padding: 0.4mm 2.4mm;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c5) 35%, #fff);
}
.bx-write i {
  display: block;
  height: calc(9mm * var(--fs));
  border-bottom: 1.4px solid var(--ink);
}

/* X6 パクパク占い */
.bx-ft {
  display: grid;
  justify-items: center;
  gap: 3mm;
}
.bx-ft-sq {
  position: relative;
  width: calc(168mm * var(--fs));
  padding-top: 4mm;
}
.bx-ft-svg {
  display: block;
  width: 100%;
  height: auto;
}
.bx-cut {
  position: absolute;
  left: 0;
  top: -0.6mm;
  font: 700 8pt 'Zen Maru Gothic', sans-serif;
}
.bx-ft-how {
  width: 100%;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 3mm;
}
.bx-ft-how > div {
  padding: 2mm 3mm;
  border: 2.2px solid var(--ink);
  border-radius: 4mm;
  background: color-mix(in srgb, var(--c3) 14%, #fff);
}
.bx-ft-how > div + div {
  background: color-mix(in srgb, var(--c4) 12%, #fff);
}
.bx-ft-how b {
  font-family: 'Fredoka', 'Zen Maru Gothic', sans-serif;
}
.bx-ft-how ol {
  margin: 1mm 0 0;
  padding-left: 5mm;
  font: 600 calc(9pt * var(--fs)) / 1.45 'Zen Maru Gothic', sans-serif;
}
.bx-dl {
  margin: 1mm 0 0;
  font: 600 calc(10pt * var(--fs)) / 1.5 'Fredoka', sans-serif;
}
.bx-dl span {
  display: inline-block;
  width: 5mm;
  color: var(--c2);
  font-weight: 700;
}
.bx-dl small {
  font: 600 7.5pt 'Zen Maru Gothic', sans-serif;
}

/* 解答 */
.bx-ansb h3.wq {
  background: color-mix(in srgb, var(--c3) 16%, #fff);
  border-left-color: var(--c2);
}
.bx-ans-cw {
  display: flex;
  gap: 4mm;
  align-items: flex-start;
}
.bx-ans-cw svg {
  flex: none;
  max-width: 120mm;
  height: auto;
}
.bx-ansb small {
  color: #4a5272;
  font-family: 'Zen Maru Gothic', sans-serif;
}
.bx-ansb .bx-tj {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 9pt;
}
.bx-ansb ul {
  margin: 0;
  padding-left: 6mm;
  font-size: calc(10.5pt * var(--fs));
}
.bx-ansb li {
  margin-bottom: 0.8mm;
}
.bx-pa .bx-name {
  display: none;
}