/* designmark: テーマ（Cartzilla）の上に重ねる、サイト独自の指定 */
:root, [data-bs-theme] { --cz-font-sans-serif: "Inter", "Noto Sans JP", sans-serif; }
body { overflow-wrap: break-word; }

/* ヘッダー: 業種のメニュー（PC では 2 列） */
.nav-cats li { break-inside: avoid; }
@media (min-width: 992px) {
  .nav-cats { min-width: 31rem; }
  .nav-cats ul { columns: 2; column-gap: 1rem; }
}

/* 業種名など: 「・」の位置で折り返す（語の途中で 1 文字だけ次の行に送らない） */
.keep-all { word-break: keep-all; overflow-wrap: anywhere; }

/* カード */
.ratio > img.top { object-fit: cover; object-position: top; }
.palette-dots { display: flex; padding-left: 4px; }
.palette-dots i { width: 14px; height: 14px; border-radius: 50%; margin-left: -4px; box-shadow: 0 0 0 2px var(--cz-body-bg); }

/* 画像の代わり（元 LP の公開を確かめられないもの）: 設計書の配色の見本 */
.pal-card { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.pal-aa { font: 600 2.2rem/1 "Inter", "Noto Sans JP", sans-serif; letter-spacing: .02em; }
.pal-bars { display: flex; width: 62%; height: 14px; border-radius: 99px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.pal-bars i { flex: 1; }
.pal-note { font-size: 11px; letter-spacing: .14em; opacity: .7; }

/* 主な色の点 */
.fam-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.f-red { background: #e5484d; } .f-orange { background: #f76b15; } .f-yellow { background: #f5d90a; }
.f-green { background: #30a46c; } .f-teal { background: #12a594; } .f-blue { background: #0090ff; }
.f-purple { background: #8e4ec6; } .f-pink { background: #e93d82; } .f-brown { background: #8d5a3b; }
.f-black { background: #1b2733; } .f-gray { background: #8b8d98; } .f-white { background: #fff; }

/* 一覧の絞り込み: 押された状態 */
.btn.toggle[aria-pressed="true"] {
  --cz-btn-color: var(--cz-body-bg); --cz-btn-bg: var(--cz-emphasis-color); --cz-btn-border-color: var(--cz-emphasis-color);
  --cz-btn-hover-color: var(--cz-body-bg); --cz-btn-hover-bg: var(--cz-emphasis-color); --cz-btn-hover-border-color: var(--cz-emphasis-color);
}
.btn.toggle[aria-pressed="true"] .fam-dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }

/* 詳細: 配色の帯 */
.palette-bar { display: flex; height: 10px; max-width: 420px; border-radius: 99px; overflow: hidden; box-shadow: 0 0 0 1px var(--cz-border-color); }
.palette-bar i { flex: 1; }

/* 詳細: 元 LP のファーストビュー＋構成図（D-2 案） */
.scroll-frame { max-height: 860px; overflow: auto; border-radius: 1rem; background: var(--cz-tertiary-bg); padding: 1.25rem .75rem; }
@media (max-width: 991.98px) { .scroll-frame { max-height: 78vh; } }
.frame-inner { max-width: 100%; margin: 0 auto; box-shadow: 0 6px 24px rgba(0, 0, 0, .1); }
.frame-inner > img { display: block; width: 100%; height: auto; }
.fv-divider { background: #1b2733; color: #fff; font-size: 12px; line-height: 1.5; padding: .55rem .8rem; }
.img-caption { font-size: 12.5px; line-height: 1.7; color: var(--cz-secondary-color); margin-top: .6rem; }

/* 構成図（design.md の配色で描く。サイトの明暗の切り替えには従わない） */
.wire { color-scheme: light; }
.wire p { margin: 0; }
.wire .w-sec { padding: 26px 22px 28px; }
.wire .w-no { font: 600 10px/1 "Inter", sans-serif; letter-spacing: .12em; opacity: .6; margin-bottom: 6px; }
.wire .w-name { font-size: 18px; line-height: 1.4; margin-bottom: 4px; }
.wire .w-purpose { font-size: 11.5px; line-height: 1.6; opacity: .85; margin-bottom: 14px; }
.wire s { display: block; height: 6px; border-radius: 3px; background: currentColor; opacity: .22; margin-top: 7px; text-decoration: none; }
.wire s.w60 { width: 60%; } .wire s.w70 { width: 70%; } .wire s.w80 { width: 80%; }
.wire .w-btn { display: inline-block; padding: 13px 34px; font-weight: 700; font-size: 13px; line-height: 1; }
.wire .w-faq { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.wire .w-faq b { color: var(--w-accent); }
.wire .w-faq s { flex: 1; margin: 0; }
.wire .w-cols2, .wire .w-cols3 { display: grid; gap: 10px; }
.wire .w-cols2 { grid-template-columns: 1fr 1fr; }
.wire .w-cols3 { grid-template-columns: repeat(3, 1fr); }
.wire .w-box { background: rgba(255, 255, 255, .55); padding: 12px 10px; border-radius: var(--w-r); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.wire .w-box i { display: block; width: 24px; height: 24px; border-radius: 50%; background: currentColor; opacity: .35; margin-bottom: 6px; }
.wire .w-box i.on { background: var(--w-accent); opacity: .85; }
.wire .w-box em { display: block; height: 14px; width: 55%; border-radius: 4px; margin-top: 8px; background: var(--w-accent); }
.wire .w-steps { display: flex; gap: 12px; }
.wire .w-steps > div { flex: 1; }
.wire .w-steps em { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--w-accent); color: var(--w-accent);
  border-radius: 50%; font: 700 11px/1 sans-serif; font-style: normal; }
.wire .w-ph { height: 120px; display: grid; place-items: center; font-size: 11px; border-radius: var(--w-r);
  background: color-mix(in srgb, currentColor 10%, transparent); }

/* 詳細: 配色 */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: .75rem; }
.swatch { display: block; width: 100%; padding: 0; text-align: left; border: 1px solid var(--cz-border-color); border-radius: .875rem; overflow: hidden;
  background: var(--cz-body-bg); color: var(--cz-body-color); cursor: copy; }
.swatch:hover, .swatch:focus-visible { border-color: var(--cz-emphasis-color); }
.swatch .chip { display: flex; height: 68px; align-items: flex-end; padding: .45rem .55rem; font: 600 11.5px/1 "Inter", monospace; }
.swatch .meta { display: block; padding: .5rem .6rem .55rem; font-size: 11.5px; line-height: 1.45; }
.swatch .meta code { font-size: 11px; color: var(--cz-emphasis-color); }

/* 詳細: 書体 */
.type-row { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--cz-border-color); }
.type-row .meta { font-size: 11.5px; color: var(--cz-secondary-color); line-height: 1.55; }
.type-row .sample { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--cz-emphasis-color); }
@media (max-width: 575.98px) { .type-row { grid-template-columns: 1fr; gap: .3rem; } }

/* 詳細: セクション構成・部品・注意 */
.structure-list { list-style: none; }
.structure-list li { display: flex; gap: .9rem; padding: .75rem 0; border-bottom: 1px dashed var(--cz-border-color); }
.structure-list .no { flex-shrink: 0; width: 1.6rem; font: 600 12px/1.9 "Inter", sans-serif; color: var(--cz-secondary-color); }
.components li { padding: .65rem 0; border-bottom: 1px solid var(--cz-border-color); }
ul.notes { padding-left: 1.1rem; }
ul.notes li { margin-bottom: .4rem; }

/* 詳細: design.md の表示 */
.md-body { font-size: 14px; }
.md-body h1 { font-size: 1.25rem; }
.md-body h2 { font-size: 1.1rem; margin-top: 1.75rem; }
.md-body h3 { font-size: 1rem; margin-top: 1.25rem; }
.md-body table { width: 100%; font-size: 12.5px; margin-bottom: 1rem; display: block; overflow-x: auto; }
.md-body th, .md-body td { padding: .4rem .5rem; border-bottom: 1px solid var(--cz-border-color); vertical-align: top; }
.md-body code { font-size: 12px; }
.md-body pre { background: var(--cz-tertiary-bg); border-radius: .75rem; padding: .9rem 1rem; font-size: 12px; }
.md-pre { max-height: 560px; overflow: auto; font-size: 12px; line-height: 1.6; background: var(--cz-tertiary-bg); color: var(--cz-body-color);
  border-radius: .875rem; padding: 1rem 1.25rem; white-space: pre-wrap; }
.info-table th { white-space: nowrap; width: 4.5em; }

/* 業種: 傾向 */
.stat-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-bottom: 1px dashed var(--cz-border-color); }
.stat-list li > span:last-child { color: var(--cz-secondary-color); white-space: nowrap; }

/* 文章のページ */
.prose h2 { font-size: 1.25rem; margin: 2.25rem 0 .9rem; }
.prose h3 { font-size: 1.05rem; margin: 1.5rem 0 .6rem; }
.prose ol, .prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .45rem; }
.prose .tools dt { font-weight: 600; color: var(--cz-emphasis-color); margin-top: 1rem; }
.prose .tools dd { margin: .2rem 0 0; }

/* コピーしたときのお知らせ */
.copy-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1090; transform: translate(-50%, 16px); background: #1b2733; color: #fff;
  font-size: 14px; padding: .6rem 1.1rem; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.copy-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .copy-toast { transition: none; } }