/* もしも社員証（1.0.90）
* 見本：idcard/heroE.html（はじめ）・flow4.html（作る流れ）・result3.html（できあがり）・zoom2.html（拡大）
* m7b.html（社員証）・m8.html / m9.html（名刺4段階）
*/
.mp-sx { --sx-ink: #2F3330; --sx-g: #5E7D6A; --sx-g2: #3E5A49; --sx-line: #E3E3DA; --sx-mut: #6E746F; color: var(--sx-ink); font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', Meiryo, sans-serif; }
.mp-sx *, .mp-sx *::before, .mp-sx *::after { box-sizing: border-box; }
.mp-sx button { font-family: inherit; }
.mp-sx [hidden], .mp-sx-sheet [hidden] { display: none !important; }
.mp-sx-pc { display: none; }
.mp-sx-sp { display: inline; }
@media (min-width: 900px) { .mp-sx-pc { display: inline; } .mp-sx-sp { display: none; } br.mp-sx-pc { display: inline; } }
/* ---------- はじめの画面（heroE） ---------- */
.mp-sx-hero { background: #F3F0E8; margin: -8px -16px 0; position: relative; overflow: hidden; }
.mp-sx-hero__in { padding: 22px 18px 26px; }
.mp-sx-eb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; color: var(--sx-g); border: 1.5px solid #B9CDBE; background: #fff; border-radius: 999px; padding: 5px 14px; letter-spacing: .1em; }
.mp-sx-h1 { margin: 12px 0 0; font-size: 36px; line-height: 1.18; font-weight: 900; letter-spacing: .01em; color: var(--sx-ink); text-wrap: balance; }
.mp-sx-h1 em { font-style: normal; color: var(--sx-g); display: block; }
.mp-sx-sub { margin: 12px 0 0; font-size: 14px; line-height: 1.8; color: #3D423E; }
.mp-sx-pcblock { display: none; }
.mp-sx-art { position: relative; height: 430px; margin: 8px -18px 0; }
.mp-sx-art::before { content: ''; position: absolute; left: -20px; right: -20px; top: -20px; bottom: -20px; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.95) 0, rgba(255,255,255,.55) 38%, rgba(255,255,255,0) 68%); pointer-events: none; }
.mp-sx-art img { position: absolute; height: auto; max-width: none; }
.mp-sx-art__id { left: 30px; top: 6px; width: 185px; transform: rotate(-5deg); filter: drop-shadow(0 16px 22px rgba(0,0,0,.45)); }
.mp-sx-art__card { right: 8px; top: 236px; width: 250px; transform: rotate(4deg); filter: drop-shadow(0 16px 22px rgba(0,0,0,.45)); }
.mp-sx-chip { position: absolute; right: 20px; top: 6px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--sx-line); color: var(--sx-ink); box-shadow: 0 6px 16px rgba(0,0,0,.1); border-radius: 999px; padding: 5px 11px; font-size: 11.5px; font-weight: 900; white-space: nowrap; }
.mp-sx-cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; background: var(--sx-g); color: #fff !important; text-decoration: none !important; box-shadow: 0 6px 16px rgba(62,90,73,.3); font-weight: 900; font-size: 18px; border-radius: 999px; padding: 16px; border: 0; cursor: pointer; }
.mp-sx-cta:hover { background: #557461; }
.mp-sx-meta { margin: 18px 0 0; font-size: 13px; color: var(--sx-mut); text-align: center; }
.mp-sx-steps { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.mp-sx-steps > div { background: #fff; border: 1px solid var(--sx-line); border-radius: 18px; display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.mp-sx-steps i { font-style: normal; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sx-g); color: #fff; font-weight: 900; font-size: 14px; }
.mp-sx-steps small { display: none; font-size: 12.5px; font-weight: 900; color: var(--sx-g); }
.mp-sx-steps b { font-size: 15px; font-weight: 900; }
.mp-sx-steps > div > span { margin: 0 0 0 auto; font-size: 11.5px; color: var(--sx-mut); text-align: right; }
.mp-sx-below { background: #EFEDE6; margin: 0 -16px; padding: 16px; }
.mp-sx-below .mp-wrap { margin-top: 0; margin-bottom: 0; }
.mp-sx-below > * + * { margin-top: 12px; }
@media (min-width: 900px) {
.mp-sx-hero__in { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) min(560px, 42vw); padding: 50px 60px 56px; gap: 20px; min-height: 620px; }
.mp-sx-h1 { margin-top: 18px; font-size: clamp(48px, 5vw, 64px); text-wrap: wrap; }
.mp-sx-h1 span { white-space: nowrap; }
.mp-sx-sub { margin-top: 22px; font-size: 18px; line-height: 1.9; }
.mp-sx-pcblock { display: block; }
.mp-sx-spblock { display: none; }
.mp-sx-steps { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; max-width: 640px; }
.mp-sx-steps > div { display: block; padding: 16px; }
.mp-sx-steps i { margin-right: 6px; }
.mp-sx-steps small { display: inline; }
.mp-sx-steps b { display: block; margin-top: 8px; font-size: 17px; }
.mp-sx-steps > div > span { display: block; margin: 4px 0 0; font-size: 12.5px; text-align: left; }
.mp-sx-ctas { display: flex; gap: 14px; margin-top: 30px; }
.mp-sx-ctas .mp-sx-cta { display: inline-flex; width: auto; font-size: 20px; padding: 18px 34px; }
.mp-sx-meta { text-align: left; }
.mp-sx-art { height: auto; margin: 0; }
.mp-sx-art::before { left: -40px; right: auto; top: -10px; bottom: auto; width: 640px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0, rgba(255,255,255,.6) 35%, rgba(255,255,255,0) 68%); }
.mp-sx-art__id { left: 10px; top: -10px; width: 270px; filter: drop-shadow(0 22px 30px rgba(0,0,0,.45)); }
.mp-sx-art__card { right: -10px; top: 300px; width: 360px; filter: drop-shadow(0 22px 30px rgba(0,0,0,.45)); }
.mp-sx-chip { left: 250px; right: auto; top: 30px; padding: 8px 16px; font-size: 14px; }
.mp-sx-below { padding: 22px 60px; display: flex; gap: 16px; justify-content: center; }
.mp-sx-below > * { flex: 1; max-width: 620px; }
.mp-sx-below > * + * { margin-top: 0; }
}
/* 説明（検索向けの本文） */
.mp-sx-about { padding-top: 6px; padding-bottom: 10px; }
.mp-sx-about > p { font-size: 15px; line-height: 1.9; margin: 0 0 10px; }
.mp-sx-animals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mp-sx-animals li { background: #fff; border-radius: 12px; padding: 8px 2px 7px; text-align: center; font-size: 11px; font-weight: 800; line-height: 1.35; box-shadow: 0 0 0 1px var(--sx-line); }
.mp-sx-animals__img { display: block; width: 44px; height: 44px; object-fit: contain; margin: 0 auto 3px; }
@media (min-width: 700px) { .mp-sx-animals { grid-template-columns: repeat(5, 1fr); } .mp-sx-animals li { font-size: 12.5px; } }
.mp-sx-life { margin: 18px 0 0; font-size: 12px; line-height: 1.8; color: var(--sx-mut); }
.mp-sx-noscript { background: #FFF4D9; border-radius: 12px; padding: 12px 14px; font-weight: 700; }
/* ---------- 作る流れ（flow4） ---------- */
.mp-sx.is-flow [data-sx-hero] { display: none !important; }
.mp-sx-app { max-width: 480px; margin: 0 auto; position: relative; }
.mp-sx-scr { min-height: calc(100svh - 150px); display: flex; flex-direction: column; padding: 8px 0 0; }
.mp-sx-top { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.mp-sx-prog { flex: 1; display: flex; gap: 4px; }
.mp-sx-prog i { flex: 1; height: 6px; border-radius: 3px; background: #DCD9CF; }
.mp-sx-prog i.on { background: var(--sx-g); }
.mp-sx-cnt { flex: none; font-size: 12px; font-weight: 800; color: var(--sx-g); }
.mp-sx-q { font-size: 19px; font-weight: 900; margin: 2px 0 4px; line-height: 1.45; }
.mp-sx-qs { font-size: 12px; color: var(--sx-mut); margin: 0 0 12px; }
.mp-sx-body { flex: 1; }
.mp-sx-foot { position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(246,244,238,0), #F6F4EE 14px); z-index: 5; }
.mp-sx-btn { display: block; width: 100%; text-align: center; background: var(--sx-g); color: #fff; border: 0; border-radius: 14px; padding: 14px; font-weight: 900; font-size: 16px; cursor: pointer; }
.mp-sx-btn:disabled { background: #B9C4BC; cursor: default; }
.mp-sx-btn.s { background: #fff; color: var(--sx-ink); box-shadow: 0 0 0 1.5px #D3D4C8; }
.mp-sx-nav2 { display: flex; gap: 8px; align-items: stretch; }
.mp-sx-bk { flex: none; width: 96px; display: grid; place-items: center; background: #fff; border: 0; border-radius: 14px; font-weight: 900; font-size: 14px; color: #59605A; box-shadow: inset 0 0 0 1.5px #D3D4C8; cursor: pointer; }
.mp-sx-nav2 .mp-sx-btn { flex: 1; margin: 0; }
/* 動物 */
.mp-sx-ag { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mp-sx-ag button { background: #fff; border: 0; border-radius: 12px; padding: 6px 2px; text-align: center; font-size: 10.5px; font-weight: 800; line-height: 1.3; color: var(--sx-ink); box-shadow: 0 0 0 1px var(--sx-line); cursor: pointer; }
.mp-sx-ag img { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto 2px; }
.mp-sx-ag button.on { box-shadow: 0 0 0 2.5px var(--sx-g); background: #EEF4EF; }
.mp-sx-sel { margin: 12px 0 0; font-size: 13px; font-weight: 800; color: var(--sx-g2); }
.mp-sx-sel button { border: 0; background: none; color: var(--sx-g); text-decoration: underline; font-weight: 800; font-size: 13px; cursor: pointer; padding: 0 0 0 6px; }
/* 種類のシート */
.mp-sx-sheetbg { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 9990; }
.mp-sx-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9991; max-width: 480px; margin: 0 auto; height: min(78vh, 640px); background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.15); padding: 14px 16px 0; display: flex; flex-direction: column; animation: mp-sx-up .22s ease; }
@keyframes mp-sx-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.mp-sx-sheet h4 { margin: 0 0 8px; font-size: 15px; font-weight: 900; display: flex; align-items: center; justify-content: space-between; }
.mp-sx-sheet h4 button { border: 0; background: #F1F0EA; border-radius: 50%; width: 30px; height: 30px; font-size: 16px; font-weight: 900; cursor: pointer; color: #59605A; }
.mp-sx-srch { display: flex; align-items: center; gap: 6px; border: 1.5px solid #D3D4C8; border-radius: 12px; padding: 0 12px; }
.mp-sx-srch input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 9px 0; font-size: 16px; font-family: inherit; background: transparent; color: var(--sx-ink); }
.mp-sx-pin { display: flex; gap: 6px; margin: 10px 0 6px; flex-wrap: wrap; }
.mp-sx-pin button { border: 0; background: #F1F0EA; border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 800; color: var(--sx-ink); cursor: pointer; }
.mp-sx-list { flex: 1; overflow-y: auto; padding: 0 22px calc(16px + env(safe-area-inset-bottom)) 0; position: relative; -webkit-overflow-scrolling: touch; }
.mp-sx-kana { font-size: 11px; font-weight: 900; color: var(--sx-g); margin: 8px 0 2px; }
.mp-sx-li { display: flex; justify-content: space-between; width: 100%; border: 0; background: none; border-bottom: 1px solid #EFEDE6; padding: 8px 2px; font-size: 13.5px; font-weight: 700; color: var(--sx-ink); text-align: left; cursor: pointer; }
.mp-sx-li small { color: #8A8F89; font-weight: 700; }
.mp-sx-idx { position: absolute; right: 6px; top: 150px; display: flex; flex-direction: column; font-size: 10px; font-weight: 900; color: var(--sx-g); gap: 3px; }
.mp-sx-idx button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; line-height: 1.25; }
.mp-sx-empty { font-size: 13px; color: var(--sx-mut); padding: 12px 2px; }
/* 名前と年齢 */
.mp-sx-f { margin: 0 0 12px; }
.mp-sx-f > b { display: block; font-size: 12.5px; margin: 0 0 5px; }
.mp-sx-in { display: block; width: 100%; background: #fff; border: 1.5px solid #D3D4C8; border-radius: 12px; padding: 11px 12px; font-size: 16px; font-weight: 700; font-family: inherit; color: var(--sx-ink); -webkit-appearance: none; appearance: none; }
select.mp-sx-in { text-align: center; text-align-last: center; padding: 11px 6px; }
.mp-sx-in:focus { outline: 2px solid #9FB8A7; outline-offset: 0; }
.mp-sx-seg { display: flex; background: #E9E7E1; border-radius: 10px; padding: 3px; margin: 0 0 6px; }
.mp-sx-seg button { flex: 1; text-align: center; padding: 6px; border-radius: 8px; border: 0; background: none; font-size: 12px; font-weight: 800; color: var(--sx-ink); cursor: pointer; }
.mp-sx-seg button.on { background: #fff; }
.mp-sx-three { display: flex; gap: 6px; }
.mp-sx-three .mp-sx-in { flex: 1; min-width: 0; }
.mp-sx-preview { background: #FFF4D9; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; font-weight: 800; color: #5A4410; line-height: 1.7; }
.mp-sx-preview em { font-style: normal; color: #B5402F; font-size: 18px; }
.mp-sx-hint { font-size: 11.5px; color: var(--sx-mut); margin: 5px 0 0; }
/* 質問 */
.mp-sx-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mp-sx-chips button { background: #fff; border: 1.5px solid #D3D4C8; border-radius: 999px; padding: 9px 14px; font-size: 14px; font-weight: 800; position: relative; color: var(--sx-ink); cursor: pointer; }
.mp-sx-chips button.on { background: var(--sx-g); border-color: var(--sx-g); color: #fff; }
.mp-sx-chips button.on2 { background: #E3ECE5; border-color: #9FB8A7; color: #2E4A3A; }
.mp-sx-chips sup { position: absolute; top: -8px; right: -5px; background: #E9B65C; color: #fff; border-radius: 999px; font-size: 10px; padding: 0 6px; line-height: 17px; }
/* 写真 */
.mp-sx-crop { height: 380px; border-radius: 16px; background: #2A2B2A; position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.mp-sx-crop canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-sx-win { position: absolute; border: 2px solid #fff; border-radius: 4px; pointer-events: none; }
.mp-sx-gd { position: absolute; inset: 0; background: linear-gradient(#fff0 33%, #ffffff55 33% 33.4%, #fff0 33.4% 66%, #ffffff55 66% 66.4%, #fff0 66.4%), linear-gradient(90deg, #fff0 33%, #ffffff55 33% 33.4%, #fff0 33.4% 66%, #ffffff55 66% 66.4%, #fff0 66.4%); }
.mp-sx-crophint { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: #fff; font-size: 12px; font-weight: 800; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.mp-sx-pick { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; text-align: center; padding: 20px; }
.mp-sx-pick .mp-sx-btn { width: auto; padding: 14px 26px; }
.mp-sx-pick p { margin: 0; font-size: 12.5px; line-height: 1.7; opacity: .85; }
.mp-sx-sl { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 900; font-size: 18px; }
.mp-sx-sl input { flex: 1; -webkit-appearance: none; appearance: none; height: 5px; background: #D3D4C8; border-radius: 3px; outline: 0; }
.mp-sx-sl input::-webkit-slider-thumb { -webkit-appearance: none; width: 19px; height: 19px; border-radius: 50%; background: var(--sx-g); box-shadow: 0 1px 3px rgba(0,0,0,.3); border: 0; }
.mp-sx-sl input::-moz-range-thumb { width: 19px; height: 19px; border-radius: 50%; background: var(--sx-g); box-shadow: 0 1px 3px rgba(0,0,0,.3); border: 0; }
.mp-sx-sl button { border: 0; background: none; font: inherit; color: var(--sx-ink); cursor: pointer; padding: 0 4px; }
.mp-sx-ctrl { display: flex; gap: 8px; margin-top: 10px; }
.mp-sx-ctrl button { flex: 1; text-align: center; background: #fff; border: 0; border-radius: 12px; padding: 9px 0; font-size: 12px; font-weight: 900; box-shadow: 0 0 0 1px #D3D4C8; color: var(--sx-ink); cursor: pointer; }
.mp-sx-ok { font-size: 11.5px; color: #59605A; margin-top: 8px; line-height: 1.6; }
/* ---------- できあがり（result3） ---------- */
.mp-sx-res { max-width: 640px; margin: 0 auto; padding: 4px 0 6px; }
.mp-sx-resbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; font-size: 13px; font-weight: 800; color: var(--sx-g2); }
.mp-sx-resbar a { color: var(--sx-g2); text-decoration: none; white-space: nowrap; }
.mp-sx-resbar h1 { margin: 0; font-size: 13px; font-weight: 800; color: var(--sx-g2); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-sx-tabs { display: flex; background: #E9E7E1; border-radius: 12px; padding: 3px; margin-bottom: 12px; }
.mp-sx-tabs button { flex: 1; text-align: center; padding: 8px; border-radius: 9px; border: 0; background: none; font-size: 13px; font-weight: 900; color: var(--sx-ink); cursor: pointer; }
.mp-sx-tabs button.is-on { background: #fff; }
.mp-sx-resarea { margin: 0 -12px; min-height: 120px; }
.mp-sx-loading { text-align: center; color: var(--sx-mut); font-size: 13px; padding: 40px 0; margin: 0; }
.mp-sx-fit { position: relative; cursor: zoom-in; filter: drop-shadow(0 8px 14px rgba(0,0,0,.15)); }
.mp-sx-fit > .sxc { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mp-sx-zoomhint { display: flex; justify-content: center; gap: 6px; margin: 8px 0 0; font-size: 11.5px; font-weight: 800; color: var(--sx-mut); }
.mp-sx-join { display: flex; align-items: center; justify-content: center; background: var(--sx-g); color: #fff !important; text-decoration: none !important; border-radius: 16px; padding: 15px; font-weight: 900; font-size: 17px; margin-top: 14px; box-shadow: 0 6px 16px rgba(62,90,73,.25); }
.mp-sx-save { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; background: #2F3330; color: #fff; border: 0; border-radius: 16px; padding: 14px; font-weight: 900; font-size: 16px; margin-top: 14px; cursor: pointer; }
.mp-sx-save[aria-busy="true"] { opacity: .7; }
.mp-sx-shr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.mp-sx-shr button { display: flex; flex-direction: column; align-items: center; gap: 5px; background: #fff; border: 0; border-radius: 14px; padding: 10px 0; font-size: 11.5px; font-weight: 900; box-shadow: 0 0 0 1px var(--sx-line); color: var(--sx-ink); cursor: pointer; }
.mp-sx-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.mp-sx-ic--x { background: #000; }
.mp-sx-ic--line { background: #06C755; border-radius: 10px; }
.mp-sx-ic--more { background: #EEF0EE; }
.mp-sx-again { display: block; text-align: center; margin-top: 10px; background: #fff; border-radius: 14px; padding: 12px; font-size: 14px; font-weight: 900; color: var(--sx-g2) !important; text-decoration: none !important; box-shadow: inset 0 0 0 1.5px var(--sx-g); }
.mp-sx-sec { font-size: 15px; font-weight: 900; margin: 20px 0 8px; }
.mp-sx-big { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 18px; padding: 12px; box-shadow: 0 0 0 1px var(--sx-line); margin-bottom: 8px; color: var(--sx-ink) !important; text-decoration: none !important; }
.mp-sx-big img { width: 64px; height: 64px; border-radius: 14px; background: #FBF3E6; object-fit: contain; flex: none; }
.mp-sx-big__tx { flex: 1; min-width: 0; }
.mp-sx-big small { display: block; font-size: 11px; font-weight: 900; color: #B5402F; }
.mp-sx-big b { display: block; font-size: 15px; line-height: 1.45; font-weight: 900; }
.mp-sx-big i { font-style: normal; font-size: 11.5px; color: var(--sx-mut); }
.mp-sx-big__go { flex: none; background: var(--sx-g); color: #fff; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 900; }
.mp-sx--res .mp-aff, .mp-sx--res .mp-ad { max-width: 640px; }
/* 拡大（zoom2） */
.mp-sx-zoom { position: fixed; inset: 0; z-index: 99999; background: #141414; overflow: hidden; touch-action: none; }
.mp-sx-zoom[hidden] { display: none; }
.mp-sx-zoom__x { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 900; z-index: 2; border: 0; cursor: pointer; }
.mp-sx-zoom__stage { position: absolute; inset: 0; }
.mp-sx-zoom__stage > .sxc { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; }
.mp-sx-zoom__t { position: absolute; bottom: calc(22px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: #ddd; font-size: 12px; font-weight: 800; z-index: 2; margin: 0; pointer-events: none; }
.mp-sx-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #2F3330; color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 800; z-index: 100000; box-shadow: 0 8px 24px rgba(0,0,0,.25); white-space: nowrap; }
.mp-sx-work { position: fixed; left: -10000px; top: 0; pointer-events: none; }
/* ---------- カード（m7b・m8・m9）。外からの見た目の影響を受けないよう .sxc の中だけで書く ---------- */
.sxc { font-size: 16px; font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', Meiryo, sans-serif; color: #2F3330; line-height: normal; letter-spacing: 0; text-align: left; -webkit-font-smoothing: antialiased; word-break: normal; line-break: strict; }
.sxc * { box-sizing: border-box; margin: 0; }
.sxc img { max-width: none; display: block; }
.sxc b { font-weight: 900; }
.sxc .lg { display: grid; place-items: center; flex: none; border-radius: 8px; overflow: hidden; }
.sxc .lg img { width: 100%; height: 100%; border-radius: 8px; }
.sxc .ph { flex: none; overflow: hidden; background: #F4E6D2; }
.sxc .ph img { width: 100%; height: 100%; object-fit: cover; }
.sxc .ph.is-ill img { transform: scale(1.45) translateY(7%); }
.sxc .br { font-size: 13px; font-weight: 800; color: #5B6B7A; white-space: nowrap; }
.sxc .ps { display: inline-block; align-self: flex-start; margin-top: 8px; font-size: 16px; font-weight: 900; color: #fff; background: #C8553D; border-radius: 6px; padding: 3px 12px; white-space: nowrap; }
.sxc .ps i { font-style: normal; font-size: 11px; font-weight: 800; opacity: .9; margin-right: 4px; }
.sxc .badge { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 900; color: #fff; background: #C8553D; border-radius: 999px; padding: 2px 9px; vertical-align: middle; white-space: nowrap; }
.sxc .cp { position: relative; background: #FFF4D9; border-radius: 12px; padding: 10px 14px; font-size: 15px; font-weight: 800; color: #5A4410; line-height: 1.55; }
.sxc .cp::before { content: ""; position: absolute; left: 26px; top: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: #FFF4D9; }
.sxc .qr { flex: none; }
.sxc .qr img { width: 100%; height: 100%; image-rendering: pixelated; }
/* 社員証 */
.sxc-idw { display: flex; flex-direction: column; align-items: center; width: 380px; }
.sxc-idw .strap { width: 34px; height: 60px; background: #1F3A5F; }
.sxc-idw .clip { width: 64px; height: 22px; background: linear-gradient(#D7DAD4, #A9ADA6); border-radius: 5px; margin-top: -3px; }
.sxc-id { width: 380px; height: 603px; background: #fff; border-radius: 16px; box-shadow: 0 14px 30px rgba(0,0,0,.18); overflow: hidden; margin-top: -6px; position: relative; display: flex; flex-direction: column; }
.sxc-id .hole { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 50px; height: 9px; border-radius: 5px; background: #E9E7E1; }
.sxc-id .hd { background: #1F3A5F; color: #fff; padding: 28px 18px 12px; display: flex; align-items: center; gap: 10px; }
.sxc-id .hd .lg { width: 34px; height: 34px; }
.sxc-id .hd b { display: block; font-size: 16px; letter-spacing: .06em; line-height: 1.2; white-space: nowrap; }
.sxc-id .hd small { font-size: 9px; letter-spacing: .22em; opacity: .8; white-space: nowrap; }
.sxc-id .hd .t { margin-left: auto; font-size: 10px; letter-spacing: .2em; border: 1px solid rgba(255,255,255,.6); border-radius: 3px; padding: 2px 7px; white-space: nowrap; }
.sxc-id .top { display: flex; gap: 16px; padding: 18px 20px 0; }
.sxc-id .ph { width: 130px; height: 163px; border-radius: 4px; box-shadow: 0 0 0 1px #C9CFD6; }
.sxc-id .who { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; flex: 1; }
.sxc-id .dp { font-size: 19px; font-weight: 900; color: #1F3A5F; line-height: 1.3; margin-top: 2px; }
.sxc-id .ps { margin-top: 8px; }
.sxc-id .badge { margin: 6px 0 0; align-self: flex-start; }
.sxc-id .nm { padding: 12px 20px 0; display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.sxc-id .nm b { font-size: 38px; letter-spacing: .2em; line-height: 1.2; }
.sxc-id .nm small { font-size: 11px; letter-spacing: .35em; color: #8A8F89; }
.sxc-id .cp { margin: 10px 20px 0; }
.sxc-id .meta { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; margin: 12px 20px 0; border-top: 1px solid #E1E4E7; border-bottom: 1px solid #E1E4E7; font-size: 10px; color: #6E746F; text-align: center; }
.sxc-id .meta div { padding: 7px 2px; }
.sxc-id .meta div + div { border-left: 1px solid #E1E4E7; }
.sxc-id .meta b { display: block; font-size: 14px; color: #1F2A36; line-height: 1.35; white-space: nowrap; }
.sxc-id .meta .age b { color: #B5402F; font-size: 17px; }
.sxc-id .rows { margin: 10px 20px 0; font-size: 12px; line-height: 1.5; color: #3D423E; }
.sxc-id .rows div { display: grid; grid-template-columns: 72px 1fr; padding: 4px 0; border-bottom: 1px dashed #E1E4E7; }
.sxc-id .rows b { color: #1F3A5F; font-weight: 900; }
.sxc-id .rows .memo span { color: #B5402F; font-weight: 800; }
.sxc-id .ft { margin-top: auto; padding: 8px 18px 12px; display: flex; align-items: flex-end; gap: 10px; font-size: 9px; color: #6E746F; line-height: 1.5; }
.sxc-id .ft b { color: #1F3A5F; font-size: 10.5px; }
.sxc-id .ft .qr { width: 60px; height: 60px; margin-left: auto; }
/* 名刺（横）：① 見習い〜課長 白 */
.sxc-yk { flex: none; width: 600px; height: 363px; background: #fff; border-radius: 6px; box-shadow: 0 10px 26px rgba(0,0,0,.16); padding: 22px 26px 14px; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.sxc-yk .top { display: flex; align-items: center; gap: 10px; }
.sxc-yk .top .lg { width: 36px; height: 36px; }
.sxc-yk .top b { font-size: 16px; letter-spacing: .08em; color: #2F4A3B; display: block; line-height: 1.2; white-space: nowrap; }
.sxc-yk .top small { font-size: 9px; letter-spacing: .25em; color: #8A8F89; white-space: nowrap; }
.sxc-yk .mid { display: flex; gap: 20px; margin-top: 14px; }
.sxc-yk .mid > div:last-child { min-width: 0; flex: 1; }
.sxc-yk .ph { width: 108px; height: 108px; border-radius: 6px; }
.sxc-yk .dp { font-size: 21px; font-weight: 900; color: #2F4A3B; line-height: 1.3; margin-top: 1px; white-space: nowrap; }
.sxc-yk .n { font-size: 34px; font-weight: 900; letter-spacing: .28em; line-height: 1.25; margin-top: 6px; white-space: nowrap; }
.sxc-yk .n small { font-size: 11px; letter-spacing: .3em; color: #8A8F89; font-weight: 700; margin-left: 4px; }
.sxc-yk .cp { margin-top: 12px; font-size: 14.5px; padding: 8px 14px; }
.sxc-yk .cp::before { left: 50px; }
.sxc-yk .ft2 { margin-top: auto; border-top: 1.5px solid #5E7D6A; padding-top: 8px; display: flex; gap: 12px; align-items: flex-end; }
.sxc-yk .ft2 .ad { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 11.5px; line-height: 1.6; color: #3D423E; }
.sxc-yk .ft2 .ad b { font-weight: 900; color: #2F4A3B; }
.sxc-yk .ft2 .meta { display: grid; grid-template-columns: auto auto auto; border: 1px solid #E1E4E7; border-radius: 8px; font-size: 9.5px; color: #6E746F; text-align: center; flex: none; }
.sxc-yk .ft2 .meta div { padding: 5px 8px; }
.sxc-yk .ft2 .meta div + div { border-left: 1px solid #E1E4E7; }
.sxc-yk .ft2 .meta b { display: block; font-size: 13px; color: #1F2A36; line-height: 1.3; white-space: nowrap; }
.sxc-yk .ft2 .meta .age b { color: #B5402F; font-size: 15px; }
.sxc-yk .ft2 .qr { width: 54px; height: 54px; border-radius: 3px; overflow: hidden; }
.sxc-yk .ser { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; font-size: 9.5px; color: #8A8F89; white-space: nowrap; }
.sxc-yk .ser b { color: #2F4A3B; font-size: 10.5px; }
.sxc-yk .top .tier { margin-left: auto; font-size: 10px; letter-spacing: .3em; font-weight: 900; padding: 2px 6px; }
/* ② 部長・執行役員：生成り＋紺＋金 */
.sxc-yk.t2 { background: #FBF8F1; padding-left: 44px; }
.sxc-yk.t2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: #1F3A5F; border-radius: 6px 0 0 6px; box-shadow: 3px 0 0 #C9A13E; }
.sxc-yk.t2 .top b, .sxc-yk.t2 .dp { color: #1F3A5F; }
.sxc-yk.t2 .ps { background: #1F3A5F; box-shadow: inset 0 0 0 1.5px #C9A13E; }
.sxc-yk.t2 .ft2 { border-top: 1.5px solid #C9A13E; }
.sxc-yk.t2 .ft2 .ad b { color: #1F3A5F; }
.sxc-yk.t2 .top .tier { color: #A8862F; border-top: 1px solid #C9A13E; border-bottom: 1px solid #C9A13E; }
/* ③ 取締役：青みのグレー＋銀（m9 案B） */
.sxc-yk.t25 { background: #2E3B4A; color: #E4ECE6; box-shadow: 0 10px 26px rgba(0,0,0,.25), inset 0 0 0 6px #2E3B4A, inset 0 0 0 7px #C9CFD1; }
.sxc .st { background: linear-gradient(180deg, #FFFFFF, #C9D1CF 55%, #8E9896); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.sxc-yk.t25 .top small, .sxc-yk.t25 .br, .sxc-yk.t25 .n small, .sxc-yk.t25 .ser { color: #B8C4D0; }
.sxc-yk.t25 .n { color: #F2F6F3; }
.sxc-yk.t25 .ps { background: linear-gradient(180deg, #E6EBEA, #AEB8B6); color: #2E3B4A; }
.sxc-yk.t25 .cp { background: #3A4A5C; color: #E7EFEA; }
.sxc-yk.t25 .cp::before { border-bottom-color: #3A4A5C; }
.sxc-yk.t25 .ft2 { border-top: 1.5px solid #B8C2C0; }
.sxc-yk.t25 .ad { color: #D3DED8; }
.sxc-yk.t25 .ad b { color: #DDE4E2 !important; }
.sxc-yk.t25 .meta { border-color: #566A80 !important; color: #A9BAB1 !important; }
.sxc-yk.t25 .meta div + div { border-color: #566A80 !important; }
.sxc-yk.t25 .meta b { color: #F2F6F3 !important; }
.sxc-yk.t25 .meta .age b { color: #F3C98B !important; }
.sxc-yk.t25 .ser b { color: #DDE4E2; }
.sxc-yk.t25 .top .tier { color: #C9D1CF; border-top: 1px solid #B8C2C0; border-bottom: 1px solid #B8C2C0; }
/* ④ 社長・会長：黒＋金 */
.sxc-yk.t3 { background: #1B1B1D; color: #EDE6D3; box-shadow: 0 10px 26px rgba(0,0,0,.3), inset 0 0 0 6px #1B1B1D, inset 0 0 0 7px #C9A13E; }
.sxc .gt { background: linear-gradient(180deg, #F6E2A6, #C9A13E 60%, #9C7A28); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.sxc-yk.t3 .top small, .sxc-yk.t3 .br, .sxc-yk.t3 .n small, .sxc-yk.t3 .ser { color: #B9B2A0; }
.sxc-yk.t3 .n { color: #F4EFE2; }
.sxc-yk.t3 .ps { background: linear-gradient(180deg, #E8C66A, #B58B2A); color: #1B1B1D; font-size: 18px; }
.sxc-yk.t3 .cp { background: #2A2A2D; color: #F1DDA0; }
.sxc-yk.t3 .cp::before { border-bottom-color: #2A2A2D; }
.sxc-yk.t3 .ft2 { border-top: 1.5px solid #C9A13E; }
.sxc-yk.t3 .ad { color: #D9D3C3; }
.sxc-yk.t3 .ad b { color: #E8C66A !important; }
.sxc-yk.t3 .meta { border-color: #5A5240 !important; color: #B9B2A0 !important; }
.sxc-yk.t3 .meta div + div { border-color: #5A5240 !important; }
.sxc-yk.t3 .meta b { color: #F4EFE2 !important; }
.sxc-yk.t3 .meta .age b { color: #F1C760 !important; }
.sxc-yk.t3 .ser b { color: #E8C66A; }
.sxc-yk.t3 .top .tier { color: #E8C66A; border-top: 1px solid #C9A13E; border-bottom: 1px solid #C9A13E; }