/* 記事の中のスライド（めくって読む・PDFと動画も同じHTMLから作る・2026-10-14）
   見た目は 06_systems/knowledge/site_visual_rules.md に合わせる：箱は淡い青／強調は淡い黄＋黄土の枠（1枚に1か所）／よくない側は薄いグレー／矢印は黄土の三角だけ／英字なし */
.cb-slides.cb-slides { --cs-blue:#265F8B; --cs-sky:#2781C5; --cs-pale:#DAEEF8; --cs-yellow:#FDF3D8; --cs-ochre:#c3982f; --cs-gray:#f1f4f7; --cs-text:#444; --cs-note:#5f7488; --cs-cream:#FEFAEF;
  position: relative; margin: 2.4rem 0; container-type: inline-size; font-family: 'Noto Sans JP', sans-serif; }
.cb-slides.cb-slides .cb-slides__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 12px; border: 1.5px solid var(--cs-pale); }
.cb-slides.cb-slides .cb-slides__track::-webkit-scrollbar { display: none; }
.cb-slides.cb-slides .cb-slide { flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; aspect-ratio: 16 / 9; background: var(--cs-cream); padding: 5.5cqw 6cqw 4.5cqw; display: flex; flex-direction: column; position: relative; color: var(--cs-text); }
.cb-slides.cb-slides p, .cb-slides.cb-slides ul { margin: 0; }
.cb-slides.cb-slides .cb-slide__head { color: var(--cs-blue); font-weight: 900; font-size: 3.1cqw; line-height: 1.45; letter-spacing: .02em; margin: 0 0 3cqw ; }
.cb-slides.cb-slides .cb-slide__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cb-slides.cb-slides .cb-slide__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 2.4cqw; font-size: 1.25cqw; color: var(--cs-note); letter-spacing: .04em; }
.cb-slides.cb-slides .cb-slide__foot img { height: 2.2cqw; width: auto; max-width: none; border: 0; border-radius: 0; }

/* 表紙 */
.cb-slides.cb-slides .cb-slide--cover { padding-right: 4cqw; }
.cb-slides.cb-slides .cb-cover { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 3cqw; }
.cb-slides.cb-slides .cb-cover__kick { font-size: 1.5cqw; color: var(--cs-note); font-weight: 700; letter-spacing: .08em; }
.cb-slides.cb-slides .cb-cover__title { margin-top: 1.6cqw ; color: var(--cs-blue); font-weight: 900; font-size: 4cqw; line-height: 1.4; }
.cb-slides.cb-slides .cb-cover__sub { margin-top: 2cqw ; font-size: 1.8cqw; line-height: 1.7; }
.cb-slides.cb-slides .cb-cover__art { background: var(--cs-sky); border-radius: 12px; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; }
.cb-slides.cb-slides .cb-cover__art img { width: 86%; height: auto; max-width: none; border: 0; border-radius: 0; }

/* 流れ（箱→黄土の三角→箱） */
.cb-slides.cb-slides .cb-flow { display: flex; align-items: stretch; gap: 0; }
.cb-slides.cb-slides .cb-flow__box { flex: 1; background: var(--cs-pale); border-radius: 12px; padding: 2cqw 1.8cqw; }
.cb-slides.cb-slides .cb-flow__box.is-key { background: var(--cs-yellow); box-shadow: inset 0 0 0 2px var(--cs-ochre); }
.cb-slides.cb-slides .cb-flow__num { font-size: 1.4cqw; font-weight: 700; color: var(--cs-blue); letter-spacing: .06em; }
.cb-slides.cb-slides .cb-flow__title { margin-top: .6cqw ; font-size: 2cqw; font-weight: 800; color: var(--cs-blue); line-height: 1.4; }
.cb-slides.cb-slides .cb-flow__desc { margin-top: 1cqw ; font-size: 1.55cqw; line-height: 1.7; }
.cb-slides.cb-slides .cb-flow__arrow { flex: 0 0 3.2cqw; display: grid; place-items: center; }
.cb-slides.cb-slides .cb-flow__arrow::before { content: ""; width: 0; height: 0; border-top: 1cqw solid transparent; border-bottom: 1cqw solid transparent; border-left: 1.3cqw solid var(--cs-ochre); }

/* 3つ並び（よくない側） */
.cb-slides.cb-slides .cb-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.cb-slides.cb-slides .cb-three__box { background: var(--cs-gray); border-radius: 12px; padding: 2.2cqw 2cqw; }
.cb-slides.cb-slides .cb-three__title { font-size: 2.1cqw; font-weight: 800; color: var(--cs-blue); }
.cb-slides.cb-slides .cb-three__desc { margin-top: 1cqw ; font-size: 1.5cqw; line-height: 1.7; }
.cb-slides.cb-slides .cb-line { margin-top: 3cqw ; text-align: center; font-size: 2.1cqw; font-weight: 800; color: var(--cs-blue); }

/* 人とAIの分け方 */
.cb-slides.cb-slides .cb-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.cb-slides.cb-slides .cb-roles__box { border-radius: 12px; padding: 2.2cqw 2.4cqw; background: var(--cs-pale); }
.cb-slides.cb-slides .cb-roles__box.is-ai { background: #fff; box-shadow: inset 0 0 0 1.5px var(--cs-pale); }
.cb-slides.cb-slides .cb-roles__who { font-size: 1.9cqw; font-weight: 900; color: var(--cs-blue); }
.cb-slides.cb-slides .cb-roles__list { margin: 1.2cqw 0 0 ; padding: 0 ; list-style: none; }
.cb-slides.cb-slides .cb-roles__list li { font-size: 1.6cqw; line-height: 1.8; padding-left: 1.6cqw; position: relative; margin: 0 ; }
.cb-slides.cb-slides .cb-roles__list li::before { content: ""; position: absolute; left: 0; top: .8cqw; width: .7cqw; height: .7cqw; border-radius: 50%; background: var(--cs-sky); }
.cb-slides.cb-slides .cb-key { margin-top: 2.6cqw ; background: var(--cs-yellow); box-shadow: inset 0 0 0 2px var(--cs-ochre); border-radius: 12px; padding: 1.8cqw 2.4cqw; text-align: center; font-size: 2.1cqw; font-weight: 800; color: var(--cs-blue); }

/* 1列のリスト（見どころなど） */
.cb-slides.cb-slides .cb-roles--one { grid-template-columns: 1fr; }
.cb-slides.cb-slides .cb-roles--one .cb-roles__list { columns: 2; column-gap: 3cqw; }

/* 置き換え（左＝そのままの言葉／右＝相手の言葉） */
.cb-slides.cb-slides .cb-swap { display: grid; grid-template-columns: 1fr 3.2cqw 1.6fr; gap: 1.2cqw 0; align-items: stretch; }
.cb-slides.cb-slides .cb-swap__from { background: var(--cs-gray); border-radius: 12px; padding: 1.3cqw 1.8cqw; font-size: 1.7cqw; font-weight: 700; color: var(--cs-note); display: flex; align-items: center; }
.cb-slides.cb-slides .cb-swap__to { background: var(--cs-pale); border-radius: 12px; padding: 1.3cqw 1.8cqw; font-size: 1.7cqw; font-weight: 800; color: var(--cs-blue); display: flex; align-items: center; }
.cb-slides.cb-slides .cb-swap__arrow { display: grid; place-items: center; }
.cb-slides.cb-slides .cb-swap__arrow::before { content: ""; border-top: .9cqw solid transparent; border-bottom: .9cqw solid transparent; border-left: 1.2cqw solid var(--cs-ochre); }

/* 締め（PDFだけに入れる） */
.cb-slides.cb-slides .cb-slide--print { display: none; }
.cb-slides.cb-slides .cb-end { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.cb-slides.cb-slides .cb-end__title { color: var(--cs-blue); font-weight: 900; font-size: 3.6cqw; line-height: 1.5; }
.cb-slides.cb-slides .cb-end__sub { margin-top: 2cqw ; font-size: 1.8cqw; line-height: 1.8; }
.cb-slides.cb-slides .cb-end__url { margin-top: 3cqw ; display: inline-block; padding: 1.2cqw 3.6cqw; border-radius: 999px; background: var(--cs-ochre); color: #fff; font-weight: 800; font-size: 1.9cqw; }

/* めくる操作 */
.cb-slides.cb-slides .cb-slides__nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 14px; }
.cb-slides.cb-slides .cb-slides__btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--cs-blue); background: #fff; color: var(--cs-blue); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background-color .3s; }
.cb-slides.cb-slides .cb-slides__btn:hover { background: var(--cs-pale); }
.cb-slides.cb-slides .cb-slides__btn[disabled] { opacity: .35; cursor: default; background: #fff; }
.cb-slides.cb-slides .cb-slides__count { min-width: 4em; text-align: center; font-size: .9rem; color: var(--cs-note); font-weight: 700; letter-spacing: .06em; }

/* 動き：めくった1枚の中身が、説明の順に出る（見えたときに一度だけ） */
.cb-slides.cb-slides.is-js [data-i] { opacity: 0; transform: translateY(14px); }
.cb-slides.cb-slides.is-js .is-on [data-i] { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.215,.61,.355,1), transform .6s cubic-bezier(.215,.61,.355,1); transition-delay: calc(var(--i, 0) * .18s + .1s); }
.cb-slides.cb-slides.is-js .cb-flow__arrow[data-i] { transform: translateX(-10px); }
.cb-slides.cb-slides.is-js .is-on .cb-flow__arrow[data-i] { transform: none; }
/* 画面・成果物の画像を1枚大きく見せる（2026-11-01 実験シリーズ） */
.cb-slides.cb-slides .cb-shot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqw; min-height: 0; }
.cb-slides.cb-slides .cb-shot img { display: block; max-width: 100%; max-height: 27cqw; width: auto; height: auto; border: 1.5px solid var(--cs-pale); border-radius: 8px; background: #fff; }
.cb-slides.cb-slides .cb-shot__cap { font-size: 1.5cqw; color: var(--cs-note); text-align: center; }
@media (prefers-reduced-motion: reduce) { .cb-slides.is-js [data-i] { opacity: 1  !important; transform: none  !important; transition: none  !important; } }

/* 狭い幅（スマホ）：16:9をやめて縦に並べ、文字は固定の大きさに */
@container (max-width: 600px) {
  .cb-slides.cb-slides .cb-roles--one .cb-roles__list { columns: 1; }
  .cb-slides.cb-slides .cb-swap { grid-template-columns: 1fr; gap: 0; }
  .cb-slides.cb-slides .cb-swap__from { font-size: 12.5px; padding: 8px 12px; margin-top: 10px; }
  .cb-slides.cb-slides .cb-swap__to { font-size: 13px; padding: 10px 12px; }
  .cb-slides.cb-slides .cb-swap__arrow { height: 16px; }
  .cb-slides.cb-slides .cb-swap__arrow::before { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--cs-ochre); border-bottom: 0; }
  .cb-slides.cb-slides .cb-slide { aspect-ratio: auto; min-height: 420px; padding: 28px 20px 18px; }
  .cb-slides.cb-slides .cb-slide__head { font-size: 19px; margin-bottom: 18px ; }
  .cb-slides.cb-slides .cb-slide__foot { font-size: 11px; margin-top: 18px; }
  .cb-slides.cb-slides .cb-slide__foot img { height: 14px; }
  .cb-slides.cb-slides .cb-cover { grid-template-columns: 1fr; gap: 18px; }
  .cb-slides.cb-slides .cb-cover__kick { font-size: 12px; } .cb-slides.cb-slides .cb-cover__title { font-size: 24px; margin-top: 10px ; } .cb-slides.cb-slides .cb-cover__sub { font-size: 14px; margin-top: 12px ; }
  .cb-slides.cb-slides .cb-cover__art { aspect-ratio: 16 / 9; } .cb-slides.cb-slides .cb-cover__art img { width: 60%; }
  .cb-slides.cb-slides .cb-flow { flex-direction: column; }
  .cb-slides.cb-slides .cb-flow__box { padding: 12px 14px; } .cb-slides.cb-slides .cb-flow__num { font-size: 11px; } .cb-slides.cb-slides .cb-flow__title { font-size: 15px; margin-top: 2px ; } .cb-slides.cb-slides .cb-flow__desc { font-size: 12.5px; margin-top: 4px ; }
  .cb-slides.cb-slides .cb-flow__arrow { flex: 0 0 18px; } .cb-slides.cb-slides .cb-flow__arrow::before { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--cs-ochre); border-bottom: 0; }
  .cb-slides.cb-slides .cb-three { grid-template-columns: 1fr; gap: 10px; } .cb-slides.cb-slides .cb-three__box { padding: 12px 14px; } .cb-slides.cb-slides .cb-three__title { font-size: 15px; } .cb-slides.cb-slides .cb-three__desc { font-size: 12.5px; margin-top: 4px ; }
  .cb-slides.cb-slides .cb-line { font-size: 15px; margin-top: 16px ; }
  .cb-slides.cb-slides .cb-roles { grid-template-columns: 1fr; gap: 10px; } .cb-slides.cb-slides .cb-roles__box { padding: 14px 16px; } .cb-slides.cb-slides .cb-roles__who { font-size: 15px; }
  .cb-slides.cb-slides .cb-roles__list li { font-size: 13px; padding-left: 14px; } .cb-slides.cb-slides .cb-roles__list li::before { width: 6px; height: 6px; top: 9px; }
  .cb-slides.cb-slides .cb-key { font-size: 14px; padding: 12px 14px; margin-top: 14px ; }
}

/* 印刷（PDF）：1枚ずつ1ページに */
@media print {
  @page { size: 1280px 720px; margin: 0; }
  html, body { margin: 0 !important; background: #fff !important; }
  .cb-slides.cb-slides { margin: 0 !important; width: 1280px !important; }
  .cb-slides.cb-slides .cb-slides__track { display: block !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; }
  .cb-slides.cb-slides .cb-slide { width: 1280px !important; height: 720px !important; aspect-ratio: auto !important; break-after: page !important; }
  .cb-slides.cb-slides .cb-slide--print { display: flex !important; }
  .cb-slides.cb-slides .cb-slides__nav { display: none !important; }
  .cb-slides.cb-slides.is-js [data-i] { opacity: 1 !important; transform: none !important; }
}