/* Karuzip の読み物。ヘッダー、Hero、導線、比較カードの配置には触れない。 */
.kz-content{
  --kz-paper:#fff;
  --kz-ink:#1D2632;
  --kz-muted:#536278;
  --kz-blue:#2B6FD6;
  --kz-deep:#225BB0;
  --kz-plate:#F3F7FC;
  --kz-rule:#DCE5F0;
  min-width:0;
}
.kz-content:not(.kz-content--portal){
  color:var(--kz-ink);
  font-family:var(--font-article,"Noto Sans JP",sans-serif);
  line-height:1.95;
  overflow-wrap:anywhere;
}
.kz-content:not(.kz-content--portal) :where(h1,h2,h3,h4){
  font-family:var(--font-display,"Zen Kaku Gothic New",sans-serif);
  text-wrap:pretty;
}
.kz-content:not(.kz-content--portal)>h1{
  max-width:27em;
  font-size:clamp(28px,3.4vw,38px);
  line-height:1.45;
  letter-spacing:-.02em;
  margin-bottom:18px;
}
.kz-content:not(.kz-content--portal) h2:not(:where(.cta *,.cta-card *,.hero *,.format-hero *,.node *,.cmp-card *,.card *,.callout *,.note *,.pledge *,.toc-mobile *)){
  color:var(--kz-ink);
  font-size:clamp(23px,2.4vw,27px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.015em;
  padding-bottom:12px;
  border-bottom:1px solid var(--kz-rule);
  scroll-margin-top:100px;
}
.kz-content:not(.kz-content--portal) h2:not(:where(.cta *,.cta-card *,.hero *,.format-hero *,.node *,.cmp-card *,.card *,.callout *,.note *,.pledge *,.toc-mobile *))::after{content:none}
.kz-content:not(.kz-content--portal)>h2{margin-top:44px;margin-bottom:18px}
.kz-content:not(.kz-content--portal) h3:not(:where(.cta *,.cta-card *,.cmp-card *,.card *,.step *,.qa *,.faq-list *,.toc-mobile *)){
  color:var(--kz-ink);
  font-size:19px;
  font-weight:700;
  line-height:1.65;
  margin-top:28px;
  margin-bottom:10px;
  scroll-margin-top:100px;
}
.kz-content:not(.kz-content--portal)>p,
.kz-content:not(.kz-content--portal)>section>p{
  color:var(--kz-muted);
  line-height:1.95;
  margin-block:14px;
}
.kz-content:not(.kz-content--portal) :where(p,li) a:not(:where(.button,.btn,.cli-download,.guide-retry,.guide-store-button)){
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:#9CBADF;
}
.kz-content:not(.kz-content--portal)>:where(ul,ol),
.kz-content:not(.kz-content--portal)>section>:where(ul,ol):not(:where(.steps,.checklist,.source-list,.guide-steps)){
  padding-inline-start:1.5em;
  margin-block:18px;
}
.kz-content:not(.kz-content--portal) :where(ul,ol):not(:where(.steps,.checklist,.source-list,.guide-steps,.toc-mobile *))>li{
  padding-inline-start:3px;
  margin-block:8px;
}
.kz-content:not(.kz-content--portal) :where(ul,ol)>li::marker{color:var(--kz-deep)}
/* 既存の横スクロールと比較表のモバイル切替を保ち、文字と罫線だけ整える。 */
.kz-content:not(.kz-content--portal) :where(.scroll-x,.table-wrap,.table-scroll,.cli-table,.v223-table){
  max-width:100%;
  overscroll-behavior-x:contain;
  scrollbar-color:#B9CBE1 #F3F7FC;
}
.kz-content:not(.kz-content--portal) :where(table){line-height:1.75}
.kz-content:not(.kz-content--portal) :where(th,td){vertical-align:top}
.kz-content:not(.kz-content--portal) :where(table):not(:where(.cmp-table,.comparison-table,.bench-table)) :where(th,td){
  padding:12px 15px;
  border-color:var(--kz-rule);
}
.kz-content:not(.kz-content--portal) :where(table):not(:where(.cmp-table,.comparison-table,.bench-table)) thead th{
  background:#EAF1FA;
  color:var(--kz-ink);
  font-weight:700;
}
.kz-content:not(.kz-content--portal) :where(table) caption{
  color:var(--kz-muted);
  font-size:12px;
  line-height:1.7;
  text-align:left;
  margin-bottom:9px;
}
/* 実画面の上には描画しない。図版の外側だけに共通の台紙を置く。 */
.kz-content:not(.kz-content--portal) figure:not(:where(.shot,.kz-concept)){
  margin-block:26px;
  padding:14px;
  border:1px solid var(--kz-rule);
  border-radius:12px;
  background:var(--kz-plate);
}
.kz-content:not(.kz-content--portal) figure:not(.kz-concept) :where(img,video){
  max-width:100%;
  height:auto;
  margin-inline:auto;
  box-shadow:none;
}
.kz-content:not(.kz-content--portal) figure:not(.kz-concept)>img{
  display:block;
  border:1px solid var(--kz-rule);
  border-radius:6px;
  background:var(--kz-paper);
}
.kz-content:not(.kz-content--portal) :where(.shot .stage){background:var(--kz-plate);box-shadow:none}
.kz-content:not(.kz-content--portal) :where(figcaption){
  color:var(--kz-muted);
  font-size:12px;
  line-height:1.8;
  margin-top:11px;
}
.kz-content :where(.answer-card,.cli-note,.callout,.note,.pledge,#reader-next-step){
  box-shadow:none;
  background:var(--kz-plate);
  border-color:var(--kz-rule);
}
.kz-content :where(.answer-card,#reader-next-step){border-left:3px solid var(--kz-blue);border-radius:0 10px 10px 0;padding:20px 22px}
.kz-content :where(.callout.caution,.callout.warn,.cli-note.status-pending){background:#FFF8ED;border-left-color:#A56316}
.kz-content :where(.v223-guide){
  background:var(--kz-paper);
  border:1px solid var(--kz-rule);
  border-top:3px solid var(--kz-blue);
  border-radius:10px;
  box-shadow:none;
  padding:24px;
}
.kz-content :where(.v223-guide)>h2{font-family:var(--font-display);line-height:1.5;color:var(--kz-ink)}
.kz-content :where(.v223-guide) :where(p,li){line-height:1.95}
.kz-content:not(.kz-content--portal) :where(pre){max-width:100%;overscroll-behavior-x:contain}
.kz-content:not(.kz-content--portal) :where(details)>summary:focus-visible,
.kz-content:not(.kz-content--portal) :where(a):focus-visible{outline:3px solid #86AEE1;outline-offset:3px}
@media(max-width:600px){
  .kz-content:not(.kz-content--portal)>h1{font-size:28px;line-height:1.5}
  .kz-content:not(.kz-content--portal)>h2{margin-top:34px}
  .kz-content:not(.kz-content--portal) h3:not(:where(.cta *,.cta-card *,.cmp-card *,.card *,.step *,.qa *,.faq-list *,.toc-mobile *)){font-size:18px}
  .kz-content:not(.kz-content--portal) figure:not(:where(.shot,.kz-concept)){padding:9px;border-radius:10px}
  .kz-content :where(.answer-card,#reader-next-step,.v223-guide){padding:18px}
  .kz-content:not(.kz-content--portal) :where(table):not(:where(.cmp-table,.comparison-table,.bench-table)) :where(th,td){padding:10px 12px}
}

/* 図解の文字は HTML。SVG は形の補助だけに使い、小画面でも文章を読める。 */
.kz-content .kz-concept{margin:28px 0 36px;padding:24px;border:1px solid var(--kz-rule);border-radius:12px;background:var(--kz-plate)}
.kz-content .kz-concept figcaption{margin:0;color:var(--kz-muted);font-size:13px;line-height:1.8}
.kz-content .kz-concept figcaption>strong{display:block;color:var(--kz-deep);font-family:var(--font-display);font-size:19px;line-height:1.55}
.kz-content .kz-concept figcaption>p{margin:10px 0 0;font-size:13px;line-height:1.8}
.kz-content .kz-concept-flow{display:grid;grid-template-columns:repeat(var(--concept-columns),minmax(0,1fr));gap:24px;margin:24px 0 0;padding:20px 0 0;border-top:1px solid #D0DEEE;list-style:none}
.kz-content .kz-concept-flow>li{position:relative;min-width:0;margin:0;padding:0}
.kz-content .kz-concept-flow svg{display:block;margin:0 0 13px;color:var(--kz-blue)}
.kz-content .kz-concept-flow strong{display:block;color:var(--kz-ink);font-family:var(--font-display);font-size:15px;line-height:1.65;overflow-wrap:anywhere}
.kz-content .kz-concept-flow p{margin:7px 0 0;color:var(--kz-muted);font-size:12.5px;line-height:1.8}
.kz-content .kz-concept-flow>li:not(:last-child)::after{position:absolute;top:22px;right:-17px;width:14px;height:9px;background:#84A7D1;clip-path:polygon(0 40%,65% 40%,65% 0,100% 50%,65% 100%,65% 60%,0 60%);content:""}
.kz-content .kz-concept--safety .kz-concept-flow{gap:32px}
.kz-content .kz-concept--safety .kz-concept-flow>li::after{content:none}
@media(max-width:640px){
  .kz-content .kz-concept{padding:18px;margin-block:24px}
  .kz-content .kz-concept figcaption>strong{font-size:18px}
  .kz-content .kz-concept-flow{grid-template-columns:minmax(0,1fr);gap:26px;padding-top:18px;margin-top:18px}
  .kz-content .kz-concept-flow>li{padding-left:62px;min-height:48px}
  .kz-content .kz-concept-flow svg{position:absolute;top:0;left:0;margin:0}
  .kz-content .kz-concept-flow p{font-size:13px;margin-top:4px}
  .kz-content .kz-concept-flow>li:not(:last-child)::after{top:auto;bottom:-18px;left:17px;right:auto;transform:rotate(90deg)}
  .kz-content .kz-concept--safety .kz-concept-flow{gap:20px}
}