/* カード・箱・説明書の共通スタイル（1em = 1mm） */
.card p, .card li, .card .vdesc, .card .q-text, .card .q-hint, .face p, .card .mq-q, .card .ml-words { word-break: auto-phrase; text-wrap: pretty; }
.card, .face { --ink: #23262D; --paper: #FBFAF6; --sub: #5A5E68; --line: #E6E2D9;
  position: relative; overflow: hidden; box-sizing: border-box; color: var(--ink);
  font-family: 'BIZ UDPGothic', 'Zen Kaku Gothic New', sans-serif; line-height: 1.5; }
.card *, .face * { box-sizing: border-box; }
.card { width: 63em; height: 88em; background: var(--paper); }
.round .card { border-radius: 3em; }

.stripe { display: flex; }
.stripe i { flex: 1; display: block; }

/* ── 価値観カード 表 ── */
.vc .chip { position: absolute; inset: 0 0 auto 0; height: 46em; background: var(--c); color: #fff; padding: 5em 5.5em; }
.vc .chip.is-light { color: rgba(25, 27, 32, .82); }
.chip-top { display: flex; align-items: baseline; gap: 1.4em; font: 600 2.3em/1 'Outfit', sans-serif; letter-spacing: .14em; }
.chip-top .tno { font-size: 1em; }
.chip-top .tkey { opacity: .8; font-weight: 500; }
.chip-top .cno { margin-left: auto; opacity: .85; letter-spacing: .06em; }
.chip-en { position: absolute; left: 5.5em; bottom: 4.6em; right: 5em; }
.chip-en span { display: block; font: 500 4.1em/1.05 'Outfit', sans-serif; letter-spacing: .01em; }
.vbody { position: absolute; inset: 46em 0 0 0; padding: 4.6em 5.5em 0; }
.vtheme { display: flex; align-items: center; gap: 1.2em; font-size: 2.35em; color: var(--sub); letter-spacing: .04em; }
.vtheme i { width: 1.05em; height: 1.05em; border-radius: 50%; flex: none; }
.vtheme span { margin-left: auto; font-family: 'Outfit', sans-serif; letter-spacing: .08em; opacity: .8; }
.vname { margin-top: .55em; font: 900 7.4em/1.15 'Zen Kaku Gothic New', sans-serif; letter-spacing: .06em; white-space: nowrap; }
.vname.is-long { font-size: 6.5em; letter-spacing: .02em; }
.vdesc { margin-top: .7em; font-size: 2.95em; line-height: 1.62; color: #3E424B; letter-spacing: .02em; }
.vfoot { position: absolute; left: 5.5em; right: 5.5em; bottom: 4.4em; display: flex; align-items: center; }
.vfoot span { margin-left: auto; font: 600 1.85em/1 'Outfit', sans-serif; letter-spacing: .3em; color: #9A9DA5; }
.tbar { display: flex; gap: .9em; }
.tbar i { width: 3.4em; height: .9em; border-radius: .45em; background: #E3DFD6; display: block; }
.tbar i.on { width: 6.4em; }

/* ── 質問カード 表 ── */
.qc { background: #23262D; color: #F4F2EC; }
.q-mark { position: absolute; right: -4em; top: -8em; line-height: 0; }
.q-mark span { display: block; font: 200 62em/1 'Outfit', sans-serif; color: rgba(255,255,255,.055); }
.qc.is-deep .q-mark span { color: transparent; -webkit-text-stroke: .006em rgba(255,255,255,.16); }
.q-top { position: absolute; left: 5.5em; right: 5.5em; top: 5.5em; display: flex; justify-content: space-between; color: rgba(244,242,236,.7); }
.q-top > span { font: 600 2.3em/1 'Outfit', sans-serif; letter-spacing: .22em; }
.q-type b { color: #F4F2EC; }
.q-level { position: absolute; left: 5.5em; top: 11em; display: flex; align-items: center; gap: .8em; }
.q-level i { width: 2.2em; height: 2.2em; border-radius: 50%; border: .35em solid rgba(244,242,236,.55); }
.q-level i.on { background: #F4F2EC; border-color: #F4F2EC; }
.q-level span { margin-left: .6em; font-size: 2.5em; letter-spacing: .1em; color: rgba(244,242,236,.8); }
.q-text { position: absolute; left: 5.5em; right: 5.5em; top: 30em; }
.q-text span { display: block; font: 700 5em/1.55 'Zen Kaku Gothic New', sans-serif; letter-spacing: .03em; }
.q-hint { position: absolute; left: 5.5em; right: 5.5em; bottom: 8.5em; }
.q-hint span { display: block; font-size: 2.4em; line-height: 1.6; color: rgba(244,242,236,.6); }
.q-stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 3.2em; }
.qc:not(.is-deep) .q-stripe { opacity: .9; }

/* ── 裏面 ── */
.vb, .qb { display: grid; place-items: center; }
.vb-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 0; }
.vb-center, .qb-center { position: relative; text-align: center; }
.vb-center b { display: block; font: 600 5em/1 'Outfit', sans-serif; letter-spacing: .2em; padding-left: .2em; }
.vb-center span, .qb-center span { display: block; margin-top: 1.1em; font-size: 2.6em; letter-spacing: .3em; color: var(--sub); padding-left: .3em; }
.vb-foot, .vb-head { position: absolute; left: 0; right: 0; text-align: center; color: #9A9DA5; }
.vb-foot span, .vb-head span { font: 600 1.9em/1 'Outfit', sans-serif; letter-spacing: .32em; padding-left: .32em; }
.vb-head { top: 7em; }
.vb-foot { bottom: 7em; }
.qb { background: #23262D; color: #F4F2EC; }
.qb-center b { display: block; font: 300 13em/1 'Outfit', sans-serif; }
.qb-center span { color: rgba(244,242,236,.7); margin-top: .5em; }
.qb .vb-foot, .qb .vb-head { color: rgba(244,242,236,.45); }

/* ── 箱 ── */
.face { background: var(--paper); }
.bx-top { width: 70em; height: 95em; }
.bx-top .fan { position: absolute; left: 0; top: -2em; }
.bx-title { position: absolute; left: 6em; right: 5em; top: 61em; }
.bx-sub { font: 700 3em/1 'Zen Kaku Gothic New', sans-serif; letter-spacing: .2em; color: var(--sub); }
.bx-main { margin-top: .2em; font: 900 8.2em/1.1 'Zen Kaku Gothic New', sans-serif; letter-spacing: .06em; white-space: nowrap; }
.bx-en { margin-top: 1.4em; font: 600 2.15em/1 'Outfit', sans-serif; letter-spacing: .28em; }
.bx-copy { margin-top: 1.5em; font-size: 2.45em; letter-spacing: .08em; color: var(--sub); }
.bx-brand { position: absolute; left: 6em; bottom: 4.6em; }
.bx-brand span { font: 700 2.2em/1 'Outfit', sans-serif; letter-spacing: .32em; }
.bx-count { position: absolute; right: 5em; bottom: 4.6em; text-align: right; }
.bx-count span { display: block; font: 600 1.7em/1.5 'Outfit', sans-serif; letter-spacing: .2em; color: #8E929B; }
.bx-side { width: 34em; height: 95em; }
.bx-side-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 5em; flex-direction: column; }
.bx-side-inner { position: absolute; left: 5em; right: 0; top: 0; bottom: 0; display: grid; place-items: center; }
.bx-side.is-alt .bx-side-stripe { left: auto; right: 0; }
.bx-side.is-alt .bx-side-inner { left: 0; right: 5em; }
.bx-side-title { writing-mode: vertical-rl; font: 900 6.4em/1 'Zen Kaku Gothic New', sans-serif; letter-spacing: .12em; display: flex; align-items: center; gap: .5em; }
.bx-side-title small { font: 600 .3em/1 'Outfit', sans-serif; letter-spacing: .3em; writing-mode: vertical-rl; color: var(--sub); }
.bx-side-spec { display: flex; flex-direction: column; gap: 6em; text-align: center; }
.bx-side-spec span { font-size: 2.6em; color: var(--sub); }
.bx-side-spec b { display: block; font: 600 2.6em/1 'Outfit', sans-serif; color: var(--ink); margin-bottom: .1em; }
.bx-end { width: 70em; height: 34em; }
.bx-end-stripe { position: absolute; left: 0; right: 0; top: 0; height: 5em; }
.bx-end-inner { position: absolute; inset: 5em 0 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2em; }
.bx-end-inner b { font: 900 5.6em/1 'Zen Kaku Gothic New', sans-serif; letter-spacing: .12em; }
.bx-end-inner span { font: 600 1.9em/1 'Outfit', sans-serif; letter-spacing: .3em; color: var(--sub); }
.bx-back { width: 70em; height: 95em; padding: 7.5em 6em; }
.bk-head { font: 900 4.2em/1.45 'Zen Kaku Gothic New', sans-serif; letter-spacing: .03em; }
.bk-lead { margin: 2.2em 0 0; font-size: 2.4em; line-height: 1.75; color: #3E424B; }
.bk-steps { margin-top: 4.5em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; }
.bk-steps div { background: #fff; border: .25em solid var(--line); border-radius: 1.6em; padding: 1.8em .6em 2em; text-align: center; font-size: 2.1em; line-height: 1.45; }
.bk-steps b { display: block; font: 600 1.9em/1.2 'Outfit', sans-serif; margin-bottom: .15em; }
.bk-foot { position: absolute; left: 6em; right: 6em; bottom: 6.5em; display: flex; justify-content: space-between; align-items: flex-end; gap: 3em; }
.bk-spec { margin: 0; display: grid; grid-template-columns: 9em 1fr; row-gap: 1.2em; }
.bk-spec dt, .bk-spec dd { font-size: 2em; line-height: 1.5; margin: 0; }
.bk-spec dt { color: var(--sub); }
.bk-brand { margin-top: 3.6em; }
.bk-brand b { display: block; font: 700 2.2em/1 'Outfit', sans-serif; letter-spacing: .3em; }
.bk-brand span { display: block; margin-top: 1em; font-size: 1.7em; line-height: 1.4; color: var(--sub); white-space: nowrap; }
.bk-jan { width: 21em; text-align: center; flex: none; }
.bk-jan .bars { height: 11em; background: #fff repeating-linear-gradient(90deg, #23262D 0 .35em, transparent .35em .8em, #23262D .8em 1em, transparent 1em 1.6em); border: .25em solid #fff; outline: .2em dashed #C9C5BB; outline-offset: .6em; }
.bk-jan span { display: block; margin-top: 1.6em; font-size: 1.6em; color: #9A9DA5; }

/* ── 説明書 ── */
.mp { padding: 5em 5em 0; }
.mp-head { display: flex; align-items: center; gap: 1.2em; padding-bottom: 1.6em; border-bottom: .25em solid var(--ink); }
.mp-no { font: 600 2.6em/1 'Outfit', sans-serif; letter-spacing: .08em; }
.mp-label { font: 700 2.5em/1 'Zen Kaku Gothic New', sans-serif; letter-spacing: .1em; }
.mp-foot { position: absolute; left: 5em; right: 5em; bottom: 3.6em; display: flex; align-items: center; gap: 2em; }
.mp-stripe { flex: 1; height: .9em; border-radius: .45em; overflow: hidden; }
.mp-foot > span { font: 600 1.7em/1 'Outfit', sans-serif; letter-spacing: .14em; color: #9A9DA5; }
.mp-h { margin-top: 2.2em; font: 900 4.1em/1.45 'Zen Kaku Gothic New', sans-serif; letter-spacing: .03em; }
.mp-h.sm { font-size: 3.5em; }
.mp-p { margin: 2em 0 0; font-size: 2.55em; line-height: 1.72; color: #3E424B; }
.mp-facts { margin-top: 3.4em; display: grid; grid-template-columns: repeat(3, 1fr); border-top: .2em solid var(--line); border-bottom: .2em solid var(--line); }
.mp-facts div { padding: 2em 0; text-align: center; }
.mp-facts div + div { border-left: .2em solid var(--line); }
.mp-facts b { font: 600 3.6em/1 'Outfit', sans-serif; }
.mp-facts span { font-size: 2.2em; color: var(--sub); margin-left: .2em; }
.mp-ul { margin: 2.8em 0 0; padding: 0; list-style: none; font-size: 2.45em; line-height: 1.95; }
.mp-ul li::before { content: ''; display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--ink); margin: 0 .7em .15em 0; }

.mp-contents { margin-top: 3em; display: grid; gap: 2.4em; }
.mc-row { display: flex; gap: 2.4em; align-items: center; }
.mc-row b { display: block; font-size: 2.65em; }
.mc-row span { display: block; font-size: 2.2em; color: var(--sub); margin-top: .3em; }
.mc-card { width: 7.2em; height: 10em; border-radius: .9em; background: linear-gradient(var(--c) 0 52%, #fff 52%); box-shadow: 0 0 0 .25em var(--line); flex: none; }
.mc-card.is-q { background: #23262D; box-shadow: none; }
.mp-anatomy { margin-top: 3.4em; display: flex; gap: 3em; align-items: center; padding-top: 3em; border-top: .2em dashed var(--line); }
.ma-card { font-size: .33em; flex: none; box-shadow: 0 0 0 .75em var(--line); border-radius: 9em; overflow: hidden; }
.ma-card .card { border-radius: 9em; }
.ma-ol { margin: 0; padding: 0; list-style: none; counter-reset: a; display: grid; gap: 1.6em; }
.ma-ol li { counter-increment: a; font-size: 2.1em; line-height: 1.45; color: var(--sub); padding-left: 1.7em; position: relative; }
.ma-ol li::before { content: counter(a); position: absolute; left: 0; top: .05em; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--ink); color: #fff; font: 600 .78em/1.6 'Outfit', sans-serif; text-align: center; }
.ma-ol b { display: block; color: var(--ink); }

.mp-step { margin-top: 3em; display: flex; gap: 2em; }
.mp-step > b { flex: none; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 600 2.9em/1 'Outfit', sans-serif; width: 1.9em; height: 1.9em; }
.mp-step h4 { margin: .1em 0 0; font: 700 3em/1.35 'Zen Kaku Gothic New', sans-serif; }
.mp-step p { margin: .9em 0 0; font-size: 2.4em; line-height: 1.7; color: #3E424B; }
.mp-illu { height: 19em; position: relative; margin-top: 2.4em; }
.mi-card { position: absolute; left: 50%; bottom: 0; width: 9em; height: 12.6em; margin-left: -4.5em; border-radius: 1em; background: linear-gradient(var(--c) 0 52%, #fff 52%); box-shadow: 0 0 0 .25em var(--line), 0 .6em 1.2em rgba(0,0,0,.08); transform-origin: 50% 160%; transform: rotate(var(--r)); }
.mp-flow { margin-top: 3em; display: flex; align-items: flex-end; justify-content: space-between; }
.mf-pile { text-align: center; }
.mf-pile small { display: block; margin-top: 1.2em; font-size: 2.1em; color: var(--sub); }
.mf-deck { display: block; width: 8.6em; height: 12em; border-radius: 1em; background: #fff; box-shadow: 0 0 0 .25em var(--line), .6em .6em 0 -.1em #fff, .6em .6em 0 .15em var(--line), 1.2em 1.2em 0 -.1em #fff, 1.2em 1.2em 0 .15em var(--line); }
.mf-hand { display: flex; }
.mf-hand i { width: 4.4em; height: 12em; border-radius: 1em; display: block; margin-left: -1.6em; box-shadow: 0 0 0 .25em #fff; }
.mf-hand i:first-child { margin-left: 0; }
.mf-discard { display: block; width: 8.6em; height: 12em; border-radius: 1em; transform: rotate(8deg); }
.mf-arrow { font: 600 3em/1 'Outfit', sans-serif; color: #9A9DA5; padding-bottom: 2.4em; }
.mp-note { margin-top: 3em; background: #F1EEE6; border-radius: 1.6em; padding: 2.2em 2.4em; font-size: 2.3em; line-height: 1.7; color: #3E424B; }
.mp-note b { display: block; font: 600 .9em/1 'Outfit', sans-serif; letter-spacing: .25em; color: var(--ink); margin-bottom: .7em; }
.mp-row5 { margin-top: 2.6em; display: flex; justify-content: space-between; }
.mini { width: 9.2em; height: 12.8em; border-radius: 1em; background: #fff; box-shadow: 0 0 0 .25em var(--line); overflow: hidden; display: flex; flex-direction: column; }
.mini i { display: block; height: 6.4em; background: var(--c); }
.mini b { flex: 1; display: grid; place-items: center; font: 900 1.7em/1.1 'Zen Kaku Gothic New', sans-serif; text-align: center; padding: 0 .2em; }

.mq { margin-top: 3em; border: .25em solid var(--line); border-radius: 2em; padding: 2.6em 2.8em; background: #fff; }
.mq.is-deep { background: #23262D; border-color: #23262D; color: #F4F2EC; }
.mq-badge { display: flex; align-items: center; gap: .5em; font: 700 2.5em/1 'Zen Kaku Gothic New', sans-serif; letter-spacing: .1em; }
.mq-badge i { width: .8em; height: .8em; border-radius: 50%; border: .14em solid currentColor; }
.mq-badge i.on { background: currentColor; }
.mq-badge i:last-of-type { margin-right: .4em; }
.mq p { margin: 1.2em 0 0; font-size: 2.3em; line-height: 1.7; opacity: .85; }
.mq-q { margin-top: 1.6em; font: 700 2.45em/1.6 'Zen Kaku Gothic New', sans-serif; }
.mp-tips { margin: 3em 0 0; padding: 0; list-style: none; counter-reset: t; display: grid; gap: 2.2em; }
.mp-tips li { counter-increment: t; font-size: 2.3em; line-height: 1.6; color: #3E424B; padding-left: 2.3em; position: relative; }
.mp-tips li::before { content: counter(t, decimal-leading-zero); position: absolute; left: 0; top: .1em; font: 600 1em/1.4 'Outfit', sans-serif; color: var(--ink); }
.mp-tips b { display: block; color: var(--ink); font-size: 1.08em; }
.mlist { margin-top: 2.2em; display: grid; gap: 2.2em; }
.ml-head { display: flex; align-items: center; gap: .7em; font: 700 2.4em/1 'Zen Kaku Gothic New', sans-serif; }
.ml-head i { width: 1em; height: 1em; border-radius: 50%; }
.ml-head span { margin-left: auto; font: 600 .9em/1 'Outfit', sans-serif; color: #9A9DA5; }
.ml-words { margin-top: 1em; display: flex; flex-wrap: wrap; gap: .9em 0; font-size: 2.3em; line-height: 1.3; }
.ml-words span { padding: 0 .55em; border-left: .1em solid var(--line); }
.ml-words span:first-child { padding-left: 0; border-left: 0; }
.ma-item { margin-top: 3.2em; padding-left: 2.4em; border-left: .9em solid var(--line); }
.ma-item:nth-child(2) { border-color: #C9D7E8; }
.ma-item b { font: 700 2.8em/1.3 'Zen Kaku Gothic New', sans-serif; }
.ma-item p { margin: .9em 0 0; font-size: 2.35em; line-height: 1.7; color: #3E424B; }

.mp-cover { padding: 0; }
.mpc-fan { position: absolute; left: 3.2em; top: 3em; font-size: .81em; }
.mpc-title { position: absolute; left: 5.5em; right: 5em; top: 55em; }
.mpc-title small { display: block; font: 700 2.8em/1 'Zen Kaku Gothic New', sans-serif; letter-spacing: .2em; color: var(--sub); }
.mpc-title b { display: block; margin-top: .25em; font: 900 7.4em/1.1 'Zen Kaku Gothic New', sans-serif; letter-spacing: .05em; white-space: nowrap; }
.mpc-title span { display: inline-block; margin-top: 1.4em; font-size: 2.5em; letter-spacing: .25em; padding: .5em 1em; background: var(--ink); color: #fff; border-radius: 2em; }
.mpc-brand { position: absolute; left: 5.5em; bottom: 4.6em; }
.mpc-brand span { font: 700 2em/1 'Outfit', sans-serif; letter-spacing: .32em; }
.mp-back { display: block; }
.mpb-ring { position: absolute; left: 50%; top: 13em; transform: translateX(-50%); line-height: 0; }
.mpb-txt { position: absolute; left: 0; right: 0; top: 50em; text-align: center; }
.mpb-txt b { display: block; font: 700 3em/1 'Outfit', sans-serif; letter-spacing: .32em; padding-left: .32em; }
.mpb-txt span { display: block; margin-top: 1.2em; font-size: 2.3em; color: var(--sub); letter-spacing: .1em; }
.mpb-dl { position: absolute; left: 7em; right: 7em; top: 61em; display: grid; grid-template-columns: auto 1fr; gap: 1.6em 2.8em; margin: 0; }
.mpb-dl dt, .mpb-dl dd { font-size: 2.1em; }
.mpb-dl dt { color: var(--sub); }
.mpb-dl dd { margin: 0; }
.mpb-note { position: absolute; left: 7em; right: 7em; top: 70em; }
.mpb-note p { margin: 0; font-size: 1.85em; line-height: 1.6; color: #8E929B; }