/* 向きB「白いカード」（見本 ~/projects/bokuapp_redesign/b/b.css を写し、Bootstrap とぶつからんよう b- を付けて .bskin の中だけに効かせた） */
body.bskin { --bg: #f4f6f9; --card: #ffffff; --ink: #0f172a; --sub: #5b6475; --faint: #8f9aac;
  --line: #e5e8ee; --acc: #2563eb; --acc-dark: #1d4ed8; --acc-soft: #eaf1ff; --ok: #15803d; --ok-soft: #e8f6ec;
  --warn: #b45309; --warn-soft: #fff4e0; --r: 18px;
  --sh: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.05);
  --sans: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif; }
body.bskin { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.75; letter-spacing: .01em; }
body.bskin .b-scope a { color: inherit; text-decoration: none; }
.bskin .b-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.bskin .b-num { font-variant-numeric: tabular-nums; }
.bskin .b-card { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); }
.bskin .b-site { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.bskin .b-site .b-wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.bskin .b-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; white-space: nowrap; }
.bskin .b-logo img { width: 32px; height: 32px; border-radius: 9px; }
.bskin .b-search { flex: 1; max-width: 420px; display: flex; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; height: 40px; color: var(--faint); font-size: 14px; }
.bskin .b-search input { border: 0; background: none; outline: none; flex: 1; font-size: 14px; color: var(--ink); min-width: 0; }
.bskin .b-site nav { display: flex; gap: 4px; font-size: 14px; }
.bskin .b-site nav a { padding: 6px 12px; border-radius: 999px; color: var(--sub); }
.bskin .b-site nav a:hover, .bskin .b-site nav a[aria-current] { background: var(--bg); color: var(--ink); }
.bskin .b-site .b-act { margin-left: auto; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.bskin .b-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--acc); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s, transform .15s; white-space: nowrap; }
.bskin .b-btn:hover { background: var(--acc-dark); }
.bskin .b-btn.b-soft { background: var(--acc-soft); color: var(--acc); }
.bskin .b-btn.b-soft:hover { background: #dce8ff; }
.bskin .b-btn.b-line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.bskin .b-btn.b-line:hover { background: var(--bg); }
.bskin .b-btn.b-sm { height: 36px; padding: 0 16px; font-size: 13px; }
.bskin .b-hero { padding: 56px 0 40px; }
.bskin .b-hero .b-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.bskin .b-hero .b-wrap > * { min-width: 0; }
.bskin .b-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--acc); background: var(--acc-soft); border-radius: 999px; padding: 4px 12px; font-weight: 700; margin-bottom: 18px; }
.bskin .b-hero h1 { font-size: 46px; line-height: 1.4; font-weight: 700; margin: 0 0 18px; letter-spacing: .01em; }
.bskin .b-hero h1 em { font-style: normal; color: var(--acc); }
.bskin .b-hero .b-lead { color: var(--sub); font-size: 16px; margin: 0 0 28px; max-width: 30em; }
.bskin .b-hero .b-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.bskin .b-bento { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: 440px; }
.bskin .b-bento > * { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); background: #fff; position: relative; }
.bskin .b-bento > :first-child { grid-row: 1 / 3; }
.bskin .b-bento img { width: 100%; height: 100%; object-fit: cover; }
.bskin .b-bento .b-lb { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.94); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.08); max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bskin .b-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
.bskin .b-stats div { padding: 16px 18px; font-size: 12px; color: var(--sub); }
.bskin .b-stats b { display: block; font-size: 26px; line-height: 1.3; color: var(--ink); }
.bskin .b-sec { padding: 40px 0; }
.bskin .b-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bskin .b-sec-h h2 { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.4; }
.bskin .b-sec-h a { font-size: 13px; color: var(--acc); font-weight: 700; white-space: nowrap; }
.bskin .b-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.bskin .b-chips a { padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 700; color: var(--sub); }
.bskin .b-chips a span { color: var(--faint); font-weight: 400; margin-left: 4px; }
.bskin .b-chips a[aria-current] { background: var(--ink); color: #fff; box-shadow: none; }
.bskin .b-chips a[aria-current] span { color: #cbd5e1; }
.bskin .b-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bskin .b-app { padding: 18px; display: flex; flex-direction: column; gap: 12px; transition: transform .15s, box-shadow .15s; min-width: 0; }
.bskin .b-app:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 14px 32px rgba(15,23,42,.08); }
.bskin .b-app .b-top { display: flex; gap: 14px; align-items: center; min-width: 0; }
.bskin .b-app .b-top > div { min-width: 0; }
.bskin .b-ico { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; flex: none; background: var(--acc-soft); color: var(--acc); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
.bskin .b-ico img { width: 100%; height: 100%; object-fit: cover; }
.bskin .b-app h3 { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bskin .b-app .b-by { font-size: 12px; color: var(--sub); }
.bskin .b-app p { margin: 0; font-size: 13.5px; color: var(--sub); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bskin .b-app .b-ft { display: flex; gap: 6px; align-items: center; margin-top: auto; flex-wrap: wrap; }
.bskin .b-tag { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--bg); color: var(--sub); font-weight: 700; }
.bskin .b-tag.b-acc { background: var(--acc-soft); color: var(--acc); }
.bskin .b-app .b-ft .b-v { margin-left: auto; font-size: 12px; color: var(--faint); }
.bskin .b-rows { padding: 6px 18px; margin: 0; }
.bskin .b-rows li { list-style: none; display: grid; grid-template-columns: 28px 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bskin .b-rows li:last-child { border-bottom: 0; }
.bskin .b-rows .b-no { font-weight: 700; color: var(--faint); font-size: 15px; text-align: center; }
.bskin .b-rows .b-ico { width: 64px; height: 48px; border-radius: 10px; }
.bskin .b-rows h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.bskin .b-rows .b-by { font-size: 12px; color: var(--sub); }
.bskin .b-rows .b-v { font-size: 13px; color: var(--sub); white-space: nowrap; }
.bskin .b-rows .b-v b { font-size: 17px; color: var(--ink); }
.bskin .b-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.bskin .b-split > * { min-width: 0; }
.bskin .b-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bskin .b-svc { padding: 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bskin .b-svc .b-k { font-size: 12px; font-weight: 700; color: var(--acc); }
.bskin .b-svc h3 { margin: 0; font-size: 17px; font-weight: 700; }
.bskin .b-svc p { margin: 0; color: var(--sub); font-size: 13px; flex: 1; }
.bskin .b-svc .b-go { font-size: 13px; font-weight: 700; color: var(--acc); }
.bskin .b-price-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.bskin .b-price-t th, .bskin .b-price-t td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.bskin .b-price-t tr:last-child td { border-bottom: 0; }
.bskin .b-price-t th { font-size: 12px; color: var(--sub); font-weight: 700; background: #fafbfc; }
.bskin .b-price-t td.b-p { font-weight: 700; white-space: nowrap; text-align: right; }
.bskin .b-price-t small { display: block; color: var(--sub); font-size: 12.5px; }
.bskin .b-foot { padding: 40px 0 140px; color: var(--sub); font-size: 13px; }
.bskin .b-foot .b-wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 28px; }
.bskin .b-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.bskin .b-crumb { font-size: 13px; color: var(--sub); padding: 24px 0 14px; }
.bskin .b-crumb a { color: var(--acc); font-weight: 700; }
.bskin .b-app-hero { padding: 26px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; }
.bskin .b-app-hero > * { min-width: 0; }
.bskin .b-app-hero .b-ico { width: 104px; height: 104px; border-radius: 24px; }
.bskin .b-app-hero h1 { margin: 0 0 4px; font-size: 32px; line-height: 1.35; font-weight: 700; }
.bskin .b-app-hero .b-by { font-size: 14px; color: var(--sub); }
.bskin .b-app-hero .b-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.bskin .b-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0; }
.bskin .b-kpis div { padding: 16px 18px; font-size: 12px; color: var(--sub); }
.bskin .b-kpis b { display: block; font-size: 22px; color: var(--ink); line-height: 1.35; }
.bskin .b-shots { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; }
.bskin .b-shots img { height: 320px; width: auto; max-width: none; border-radius: 14px; box-shadow: var(--sh); scroll-snap-align: start; background: #fff; }
.bskin .b-detail { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.bskin .b-detail > * { min-width: 0; }
.bskin .b-prose { padding: 28px 30px; }
.bskin .b-prose h2 { font-size: 20px; margin: 0 0 14px; }
.bskin .b-prose p { margin: 0 0 1.2em; font-size: 15.5px; line-height: 1.85; }
.bskin .b-info { padding: 6px 22px; }
.bskin .b-info dl { margin: 0; display: grid; grid-template-columns: 6em 1fr; }
.bskin .b-info dt, .bskin .b-info dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.bskin .b-info dt { color: var(--sub); }
.bskin .b-info dl > :nth-last-child(-n+2) { border-bottom: 0; }
.bskin .b-dev { padding: 18px 22px; display: flex; gap: 14px; align-items: center; margin-top: 16px; }
.bskin .b-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--acc-soft); color: var(--acc); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.bskin .b-dev h3 { margin: 0; font-size: 15px; }
.bskin .b-dev p { margin: 0; font-size: 12px; color: var(--sub); }
.bskin .b-dev .b-btn { margin-left: auto; }
.bskin .b-narrow { max-width: 760px; margin: 0 auto; }
.bskin .b-page-h { text-align: center; padding: 44px 0 22px; }
.bskin .b-page-h h1 { font-size: 32px; margin: 0 0 8px; font-weight: 700; }
.bskin .b-page-h p { color: var(--sub); margin: 0; }
.bskin .b-steps-ind { list-style: none; padding: 0; margin: 0 auto 20px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bskin .b-steps-ind li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--faint); font-weight: 700; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.bskin .b-steps-ind li b { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.bskin .b-steps-ind li.b-now { color: var(--acc); box-shadow: inset 0 0 0 1.5px var(--acc); }
.bskin .b-steps-ind li.b-now b { background: var(--acc); color: #fff; }
.bskin .b-steps-ind li.b-done { color: var(--ink); }
.bskin .b-steps-ind li.b-done b { background: var(--ink); color: #fff; }
.bskin .b-fcard { padding: 30px; margin-bottom: 120px; }
.bskin .b-q { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.bskin .b-q > legend, .bskin .b-q .b-ql { font-weight: 700; font-size: 15px; margin-bottom: 4px; display: block; padding: 0; }
.bskin .b-q .b-hint { color: var(--sub); font-size: 13px; margin: 0 0 10px; }
.bskin .b-req { font-size: 11px; color: #fff; background: var(--acc); border-radius: 999px; padding: 1px 8px; margin-left: 8px; vertical-align: 1px; }
.bskin .b-opt { font-size: 11px; color: var(--sub); background: var(--bg); border-radius: 999px; padding: 1px 8px; margin-left: 8px; vertical-align: 1px; font-weight: 400; }
.bskin .b-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bskin .b-choices label { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; background: #fff; transition: box-shadow .15s, background .15s; }
.bskin .b-choices label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--acc); background: var(--acc-soft); }
.bskin .b-choices input { accent-color: var(--acc); width: 18px; height: 18px; flex: none; }
.bskin .b-choices b { display: block; font-size: 14.5px; }
.bskin .b-choices small { display: block; color: var(--sub); font-size: 12px; line-height: 1.5; }
.bskin .b-seg { display: flex; background: var(--bg); border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.bskin .b-seg label { flex: 1; text-align: center; padding: 8px 10px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--sub); cursor: pointer; white-space: nowrap; position: relative; }
.bskin .b-seg input { position: absolute; opacity: 0; pointer-events: none; }
.bskin .b-seg label:has(input:checked) { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.bskin .b-field { width: 100%; border: 0; box-shadow: inset 0 0 0 1px #d8dde6; border-radius: 12px; padding: 12px 14px; font-size: 15px; background: #fff; line-height: 1.7; }
.bskin .b-field:focus { outline: none; box-shadow: inset 0 0 0 2px var(--acc); }
.bskin textarea.b-field { min-height: 180px; resize: vertical; }
.bskin .b-count { text-align: right; font-size: 12px; color: var(--faint); margin-top: 4px; }
.bskin .b-drop { border-radius: 12px; border: 1.5px dashed #cdd4df; padding: 18px; text-align: center; color: var(--sub); font-size: 13px; }
.bskin .b-drop input { font-size: 12px; margin-top: 6px; max-width: 100%; }
.bskin .b-reply-to { background: var(--acc-soft); border-radius: 14px; padding: 14px 16px; font-size: 14px; color: #1e3a8a; }
.bskin .b-reply-to b { display: block; }
.bskin .b-new-mech { display: inline-block; font-size: 11px; color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 0 8px; margin-left: 6px; font-weight: 700; vertical-align: 1px; }
.bskin .b-form-foot { display: flex; gap: 10px; align-items: center; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 8px; flex-wrap: wrap; }
.bskin .b-form-foot .b-say { margin-right: auto; color: var(--sub); font-size: 13px; }
.bskin .b-sample { background: var(--warn-soft); color: #7c3d00; border-radius: 12px; padding: 8px 12px; font-size: 12.5px; margin: 0 0 22px; }
.bskin .b-warn { background: var(--warn-soft); color: #7c3d00; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 18px; font-weight: 700; }
.bskin .b-kakunin { margin: 0 0 18px; display: grid; grid-template-columns: 8em 1fr; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bskin .b-kakunin dt, .bskin .b-kakunin dd { margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.bskin .b-kakunin dt { background: #fafbfc; color: var(--sub); font-weight: 700; font-size: 13px; }
.bskin .b-kakunin dd { overflow-wrap: anywhere; }
.bskin .b-kakunin > :nth-last-child(-n+2) { border-bottom: 0; }
.bskin .b-done { text-align: center; }
.bskin .b-done .b-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: 30px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 4px auto 14px; }
.bskin .b-done h2 { font-size: 26px; margin: 0 0 6px; }
.bskin .b-done .b-no { display: inline-block; background: var(--bg); border-radius: 999px; padding: 4px 14px; font-size: 13px; margin: 10px 0 22px; }
.bskin .b-next { text-align: left; list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.bskin .b-next li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; font-weight: 700; }
.bskin .b-next li i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; background: var(--acc-soft); color: var(--acc); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.bskin .b-next small { display: block; color: var(--sub); font-weight: 400; font-size: 13px; }
.bskin .b-can-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) {
.bskin .b-site nav { display: none; }
.bskin .b-hero .b-wrap { grid-template-columns: 1fr; }
.bskin .b-grid { grid-template-columns: 1fr 1fr; }
.bskin .b-split, .bskin .b-detail { grid-template-columns: 1fr; }
.bskin .b-svc-grid, .bskin .b-can-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.bskin .b-wrap { padding: 0 16px; }
.bskin .b-site .b-wrap { gap: 10px; height: 58px; }
.bskin .b-search { display: none; }
.bskin .b-logo { font-size: 16px; }
.bskin .b-site .b-act .b-btn.b-line { display: none; }
.bskin .b-hero { padding: 32px 0 20px; }
.bskin .b-hero h1 { font-size: 27px; }
.bskin .b-bento { height: 300px; gap: 10px; }
.bskin .b-stats { gap: 8px; }
.bskin .b-stats div { padding: 12px; }
.bskin .b-stats b { font-size: 20px; }
.bskin .b-grid, .bskin .b-svc-grid, .bskin .b-can-grid { grid-template-columns: 1fr; }
.bskin .b-rows li { grid-template-columns: 22px 56px 1fr; }
.bskin .b-rows .b-ico { width: 56px; height: 42px; }
.bskin .b-rows .b-v { grid-column: 3; }
.bskin .b-app-hero { grid-template-columns: auto 1fr; padding: 18px; gap: 14px; }
.bskin .b-app-hero .b-ico { width: 72px; height: 72px; border-radius: 18px; }
.bskin .b-app-hero h1 { font-size: 22px; }
.bskin .b-app-hero .b-act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
.bskin .b-app-hero .b-act .b-btn { flex: 1; }
.bskin .b-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
.bskin .b-shots img { height: 210px; }
.bskin .b-prose { padding: 20px; }
.bskin .b-fcard { padding: 18px; }
.bskin .b-choices { grid-template-columns: 1fr; }
.bskin .b-kakunin { grid-template-columns: 1fr; }
.bskin .b-kakunin dt { border-bottom: 0; padding-bottom: 2px; background: none; }
.bskin .b-steps-ind li { padding-right: 10px; font-size: 12px; }
.bskin .b-page-h h1 { font-size: 26px; }
.bskin .b-dev { flex-wrap: wrap; }
}

/* ===== ここから下は本物（bokuapp）に合わせて足した物 ===== */
/* base.html との継ぎ目：地の色・前の飾りを消す・浮いた要素を頭へ移すまで隠す */
body.bskin { background: var(--bg) !important; background-image: none !important; }
body.bskin > .left-nav-container, body.bskin > .simple-nav { visibility: hidden; }
body.bskin.b-moved > .left-nav-container { display: none; }
body.bskin .floating-back-button { display: none !important; }
body.bskin main { padding-top: 0 !important; margin-top: 0 !important; }
.bskin .b-scope h1, .bskin .b-scope h2, .bskin .b-scope h3, .bskin .b-scope h4 { color: var(--ink); letter-spacing: .01em; }
.bskin .b-scope img { max-width: 100%; }
.bskin .b-search { margin: 0; }
.bskin .b-search input { height: 38px; }
.bskin .b-logo span { color: var(--ink); }

/* 頭の右：base.html から移したベル・案件状況・ユーザーのメニュー・ログイン */
.bskin .b-slot { display: flex; align-items: center; gap: 8px; }
.bskin .b-slot .simple-nav { position: static !important; display: flex; align-items: center; gap: 8px; top: auto; right: auto; visibility: visible; }
.bskin .b-slot .bell-badge { position: relative !important; top: auto !important; left: auto !important; right: auto !important; margin: 0 !important; }
.bskin .b-slot .bell-badge a { text-decoration: none; }
.bskin .b-slot .bell-badge-button { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: var(--bg) !important; color: var(--ink) !important; display: flex !important; align-items: center; justify-content: center; border: 0 !important; box-shadow: inset 0 0 0 1px var(--line) !important; font-size: 15px !important; position: relative; cursor: pointer; transform: none !important; }
.bskin .b-slot .bell-badge-button i { color: var(--ink) !important; font-size: 15px !important; }
.bskin .b-slot .app-badge-count { position: absolute !important; top: -4px !important; right: -6px !important; min-width: 18px; height: 18px; border-radius: 9px; background: #dc2626 !important; color: #fff !important; font-size: 11px !important; font-weight: 700; line-height: 18px; text-align: center; padding: 0 5px; border: 2px solid #fff; }
.bskin .b-slot #negotiationBtn { display: inline-flex !important; align-items: center; gap: 6px; height: 38px; padding: 0 14px !important; border-radius: 999px !important; background: var(--warn-soft) !important; color: var(--warn) !important; font-size: 13px !important; font-weight: 700; box-shadow: none !important; border: 0 !important; text-decoration: none; transform: none !important; }
.bskin .b-slot #negotiationCount { background: #fff !important; color: var(--warn) !important; min-width: 20px !important; height: 20px !important; font-size: 11px !important; }
.bskin .b-slot .user-avatar { width: 38px !important; height: 38px !important; font-size: 15px !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--line) !important; transform: none !important; }
.bskin .b-slot .user-dropdown .dropdown-menu { top: 46px; }
.bskin .b-slot .auth-button { display: inline-flex !important; align-items: center; height: 36px !important; padding: 0 16px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important; background: #fff !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line) !important; border: 0 !important; text-decoration: none !important; transform: none !important; white-space: nowrap; }
.bskin .b-slot .auth-button:last-child { background: var(--acc) !important; color: #fff !important; box-shadow: none !important; }
.bskin .b-slot .auth-button:hover { filter: brightness(.97); }

/* 足元：サイトの地図（前のトップのボタンは全部ここから辿れる） */
.bskin .b-foot { padding: 32px 0 60px; }
.bskin .b-foot .b-wrap { display: block; border-top: 0; padding-top: 0; }
.bskin .b-map { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.bskin .b-map > div { min-width: 0; }
.bskin .b-map h4 { font-size: 13px; margin: 0 0 8px; font-weight: 700; }
.bskin .b-map a { display: block; font-size: 13px; color: var(--sub); padding: 3px 0; line-height: 1.6; }
.bskin .b-map a:hover { color: var(--acc); }
.bskin .b-foot-bottom { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; }
.bskin .b-foot-bottom b { color: var(--ink); }
.bskin .b-foot-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* トップの足し分 */
.bskin .b-hero .b-wrap.b-solo { grid-template-columns: 1fr; }
.bskin .b-bento-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.bskin .b-bento-1 > :first-child { grid-row: auto; }
.bskin .b-bento-2 { grid-template-rows: 1fr; }
.bskin .b-bento-2 > :first-child { grid-row: auto; }
.bskin .b-bento img { background: #fff; }
.bskin .b-empty { padding: 22px; color: var(--sub); }
.bskin .b-empty a { color: var(--acc); font-weight: 700; margin-left: 6px; }
.bskin .b-box { padding: 22px; margin-bottom: 16px; }
.bskin .b-box-t { margin: 0 0 6px; font-weight: 700; }
.bskin .b-box-s { margin: 0 0 16px; color: var(--sub); font-size: 14px; }
.bskin .b-box .b-btn { margin: 4px 6px 0 0; }
.bskin .b-checks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.bskin .b-checks li { position: relative; padding-left: 22px; font-size: 14px; color: var(--sub); }
.bskin .b-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.bskin .b-store { display: flex; gap: 8px; flex-wrap: wrap; }
.bskin .b-mine { padding: 6px 18px 14px; margin-bottom: 16px; }
.bskin .b-mine > a { display: flex; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.bskin .b-mine .b-go { margin-left: auto; font-size: 12px; color: var(--acc); }
.bskin .b-cnt { display: inline-flex; min-width: 20px; height: 20px; border-radius: 10px; background: #dc2626; color: #fff; font-size: 11px; align-items: center; justify-content: center; padding: 0 6px; }
.bskin .b-unread { padding-top: 10px; font-size: 13px; color: var(--sub); }
.bskin .b-unread a { display: inline-block; margin: 4px 6px 0 0; padding: 2px 10px; border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 700; font-size: 12px; }
.bskin .b-event { display: flex; align-items: center; gap: 12px; padding: 16px 20px; margin-top: 16px; }
.bskin .b-event .b-go { margin-left: auto; color: var(--acc); font-size: 13px; font-weight: 700; }
.bskin .b-rows h3 a:hover, .bskin .b-app:hover h3 { color: var(--acc); }

@media (max-width: 1000px) {
  .bskin .b-map { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .bskin .b-site .b-act .b-post { display: none; }
  .bskin .b-slot { gap: 6px; }
  .bskin .b-slot #negotiationBtn > span:not(#negotiationCount) { display: none; }
  .bskin .b-slot #negotiationBtn { padding: 0 10px !important; }
  .bskin .b-slot .auth-button { padding: 0 12px !important; }
  .bskin .b-map { grid-template-columns: 1fr 1fr; gap: 18px; }
  .bskin .b-hero .b-btns .b-btn { flex: 1 1 100%; }
}
/* base.html の季節の背景写真と、浮いた頭の為の上の余白を、B の画面では消す */
body.bskin::before { display: none !important; }
body.bskin { padding-top: 0 !important; }
.bskin .b-hero h1 { font-size: 42px; }
@media (max-width: 600px) { .bskin .b-hero h1 { font-size: 27px; } }

/* アプリの詳しい画面の足し分 */
.bskin .b-appd { padding-bottom: 20px; }
.bskin .b-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.bskin .b-app-hero .b-chips { margin: 12px 0 0; }
.bskin .b-app-hero .b-chips a { font-size: 12px; padding: 4px 12px; }
.bskin .b-app-hero .b-act .b-btn { width: 100%; }
.bskin .b-notice { padding: 14px 20px; margin-top: 16px; }
.bskin .b-notice > div { display: flex; gap: 12px; align-items: center; }
.bskin .b-hint { font-size: 12px; color: var(--faint); }
.bskin .b-shots img { cursor: zoom-in; }
.bskin .b-leadp { font-size: 16px; font-weight: 700; line-height: 1.8; margin: 0 0 1em; }
.bskin .b-md { font-size: 15.5px; line-height: 1.85; overflow-wrap: anywhere; }
.bskin .b-md h1, .bskin .b-md h2, .bskin .b-md h3 { font-size: 19px; margin: 1.2em 0 .6em; }
.bskin .b-md p { margin: 0 0 1.1em; }
.bskin .b-md img { max-width: 100%; height: auto; border-radius: 10px; }
.bskin .b-main-col > * + *, .bskin .b-side > * + * { margin-top: 16px; }
.bskin .b-side h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.bskin .b-people { padding: 18px 22px; }
.bskin .b-person { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.bskin .b-person:first-of-type { border-top: 0; }
.bskin .b-role { font-size: 12px; color: var(--sub); }
.bskin .b-plat, .bskin .b-hist { padding: 18px 22px; font-size: 14px; }
.bskin .b-side hr.product-divider { display: none; }
.bskin .b-hist > div + div { margin-top: 14px; }
.bskin .b-corp { text-align: right; margin: 8px 0 0; }
.bskin .b-linkbtn { border: 0; background: none; color: var(--faint); font-size: 12px; text-decoration: underline; padding: 0; cursor: pointer; }

/* 元からある節（統計・各種・シェア・技術・コメント）を白いカードに揃える */
.bskin .b-appd .product-detail-section { background: var(--card) !important; border: 0 !important; border-radius: var(--r) !important; box-shadow: var(--sh) !important; padding: 22px 24px !important; margin: 0 !important; }
.bskin .b-main-col .product-detail-section + .product-detail-section, .bskin .b-main-col > .product-detail-section { margin-top: 16px !important; }
.bskin .b-appd .product-detail-section h2 { font-size: 18px !important; font-weight: 700 !important; color: var(--ink) !important; margin: 0 0 14px !important; border: 0 !important; padding: 0 !important; background: none !important; }
.bskin .b-appd .product-detail-section h2 i { display: none; }
.bskin .b-side .stats-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.bskin .b-appd .stats-grid-item { background: var(--bg) !important; border: 0 !important; border-radius: 12px !important; padding: 10px 8px !important; box-shadow: none !important; }
.bskin .b-appd .stat-number { font-size: 17px !important; color: var(--ink) !important; font-weight: 700; }
.bskin .b-appd .stat-number i { color: var(--faint) !important; font-size: 12px; }
.bskin .b-appd .stat-label { font-size: 11.5px !important; color: var(--sub) !important; }
.bskin .b-appd .action-btn-like { border-radius: 999px !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--line) !important; background: #fff !important; color: var(--ink) !important; font-weight: 700; height: 40px; font-size: 14px; }
.bskin .b-appd .action-btn-like.liked { background: var(--acc-soft) !important; color: var(--acc) !important; box-shadow: inset 0 0 0 1.5px var(--acc) !important; }
.bskin .b-appd .platform-btn { display: inline-flex !important; align-items: center; gap: 6px; height: 36px; padding: 0 14px !important; border-radius: 999px !important; background: #fff !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line) !important; border: 0 !important; font-size: 13px !important; font-weight: 700; text-decoration: none !important; }
.bskin .b-appd .product-detail-section .btn { border-radius: 999px; }
.bskin .b-plat .btn { border-radius: 999px !important; font-size: 13px !important; padding: 6px 14px !important; }

@media (max-width: 1000px) {
  .bskin .b-app-hero .b-act .b-btn { width: auto; }
}
@media (max-width: 600px) {
  .bskin .b-appd .product-detail-section { padding: 18px !important; }
  .bskin .b-kpis { grid-template-columns: 1fr 1fr; }
}

/* 問い合わせの足し分 */
.bskin .b-login-hint { display: flex; gap: 14px; align-items: center; padding: 16px 20px; margin: 0 0 16px; font-size: 14px; color: var(--sub); }
.bskin .b-login-hint b { display: block; color: var(--ink); }
.bskin .b-login-hint .b-btn { margin-left: auto; flex: none; }
.bskin .b-fcard select.b-field { height: 48px; appearance: auto; }
.bskin .b-short { max-width: 140px; }
.bskin .b-small { font-size: 12.5px; opacity: .85; }
.bskin .b-err { background: #fdecec; color: #b42318; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; font-weight: 700; margin: 0 0 14px; }
.bskin .b-drop .b-btn { margin-top: 10px; }
.bskin .b-shot-name { margin-top: 8px; font-size: 13px; color: var(--ink); }
.bskin .b-done-p { color: var(--sub); margin: 0 0 18px; }
.bskin .b-done-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bskin .b-step[hidden], .bskin .b-q[hidden], .bskin .b-err[hidden], .bskin .b-login-hint[hidden] { display: none !important; }
.bskin .b-steps-ind li.b-done { text-align: left; }
@media (max-width: 600px) {
  .bskin .b-login-hint { flex-direction: column; align-items: stretch; }
  .bskin .b-login-hint .b-btn { margin-left: 0; }
}

/* 問い合わせの受け箱（作り手が読む側）：元の support_inbox.css の上から白いカードに揃える */
.bskin .b-inbox { max-width: 1280px !important; margin: 0 auto; padding: 24px 24px 40px !important; }
.bskin .b-inbox-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.bskin .b-inbox-top h1 { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.bskin .b-inbox-top p { margin: 0; color: var(--sub); font-size: 14px; }
.bskin .b-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.bskin .b-sum > div { padding: 14px 18px; font-size: 12.5px; color: var(--sub); }
.bskin .b-sum b { display: block; font-size: 24px; color: var(--ink); line-height: 1.3; }
.bskin .b-sum .b-hot b { color: #dc2626; }
.bskin .b-inbox .inbox-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; gap: 16px; }
.bskin .b-inbox .inbox-list, .bskin .b-inbox .inbox-detail { background: var(--card) !important; border: 0 !important; border-radius: var(--r) !important; box-shadow: var(--sh) !important; overflow: hidden; }
.bskin .b-inbox .inbox-head { background: #fff !important; border-bottom: 1px solid var(--line) !important; }
.bskin .b-inbox .inbox-head h1 { font-size: 15px !important; color: var(--ink) !important; }
.bskin .b-state-tabs { display: flex; gap: 6px; padding: 10px 12px 0; flex-wrap: wrap; }
.bskin .b-state-tabs button { border: 0; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; background: var(--bg); color: var(--sub); cursor: pointer; }
.bskin .b-state-tabs button.active { background: var(--ink); color: #fff; }
.bskin .b-inbox .inbox-tabs { border-bottom: 1px solid var(--line) !important; background: #fff !important; }
.bskin .b-inbox .inbox-tab { border-radius: 999px !important; font-size: 12.5px !important; }
.bskin .b-inbox .inbox-tab.active { background: var(--acc-soft) !important; color: var(--acc) !important; border-color: transparent !important; }
.bskin .b-inbox .inbox-row { border-bottom: 1px solid var(--line) !important; text-decoration: none !important; color: var(--ink) !important; }
.bskin .b-inbox .inbox-row.active { background: var(--acc-soft) !important; box-shadow: inset 3px 0 0 var(--acc); }
.bskin .b-inbox .inbox-row.unread { background: #fffdf6; }
.bskin .b-inbox .inbox-row.closed { opacity: .7; }
.bskin .b-inbox .ir-kind { color: var(--sub) !important; font-weight: 700; }
.bskin .b-st { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 4px; }
.bskin .b-st-new { background: #fdecec; color: #b42318; }
.bskin .b-st-open { background: var(--warn-soft); color: var(--warn); }
.bskin .b-st-done { background: var(--ok-soft); color: var(--ok); }
.bskin .b-inbox .ir-badge { background: #dc2626 !important; }
.bskin .b-inbox .detail-head { background: #fff !important; border-bottom: 1px solid var(--line) !important; }
.bskin .b-inbox .detail-head .dh-tag { border-radius: 999px !important; }
.bskin .b-inbox .detail-body { background: var(--bg) !important; }
.bskin .b-inbox .bubble { border-radius: 14px !important; box-shadow: none !important; }
.bskin .b-inbox .bubble-row.theirs .bubble { background: #fff !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.bskin .b-inbox .bubble-row.mine .bubble { background: var(--acc) !important; color: #fff !important; }
.bskin .b-inbox .detail-reply { background: #fff !important; border-top: 1px solid var(--line) !important; }
.bskin .b-inbox .detail-reply textarea { border-radius: 12px !important; border: 0 !important; box-shadow: inset 0 0 0 1px #d8dde6 !important; }
.bskin .b-inbox .btn-send { background: var(--acc) !important; border-radius: 999px !important; border: 0 !important; }
.bskin .b-inbox .btn-ghost { border-radius: 999px !important; }
@media (max-width: 800px) {
  .bskin .b-sum { grid-template-columns: 1fr 1fr; }
  .bskin .b-inbox { padding: 16px !important; }
}
.bskin .b-inbox .detail-back, .bskin .b-inbox .dh-tag { white-space: nowrap; flex: none; }