:root{
  /* ブランド指定色（ロゴレギュレーションより）
       #003476 … 濃紺   R0  G52  B118
       #0476BD … 青     R4  G118 B189
       #71BBE8 … 水色   R113 G187 B232
     以下はこの3色と、そこから派生させた濃淡で構成する */
  --navy:#003476;
  --navy-dark:#00285A;
  --navy-black:#001A3D;
  --blue:#0476BD;
  --cyan:#0476BD;
  --cyan-light:#71BBE8;
  --pale-blue:#E8F4FC;
  --pale-blue-2:#D9EBF8;
  --coral:#F36E93;
  --page-bg:#EFEFEF;
  --ink:#2B2B2B;
  --muted:#8A8A8A;
  --white:#fff;
  --page-w: 900px;
  --font-main:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font-main);
  background:var(--page-bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---- App shell (index / course list) ---- */
.app-shell{
  max-width:1100px;
  margin:0 auto;
  padding:18px 16px 60px;
}

/* ---- Site-wide header / footer ---- */
.site-header{
  background:var(--navy);
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
}
.site-header a.brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:#fff;
}
.site-header .brand-mark{
  display:inline-flex;
  color:var(--cyan-light);
}
.site-header .brand-text{
  font-weight:800;
  font-size:15px;
  color:#fff;
  letter-spacing:.01em;
}
.site-header .brand-text small{
  display:block;
  font-weight:500;
  font-size:10.5px;
  color:#b9c3ef;
}
.site-header nav a{
  color:#c3dbf0;
  text-decoration:none;
  font-size:12.5px;
  font-weight:700;
  margin-left:18px;
}
.site-header nav a:hover{ color:var(--cyan-light); }
.site-header nav{ display:flex; align-items:center; gap:18px; }
.site-header .logout-link{
  color:#c3dbf0;
  background:rgba(255,255,255,0.12);
  border:none;
  border-radius:6px;
  padding:6px 13px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}
.site-header .logout-link:hover{ background:rgba(255,255,255,0.22); color:#fff; }

.site-footer{
  text-align:center;
  padding:26px 16px 34px;
  color:#999;
  font-size:12px;
}

/* ---- Index / course-list page ---- */
.hero-band{
  background:linear-gradient(120deg,var(--navy-black) 0%,var(--navy) 45%,var(--blue) 78%,var(--cyan) 100%);
  padding:46px 16px 38px;
  text-align:center;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero-band::after{
  content:"";
  position:absolute;
  right:-40px; top:-40px; bottom:-40px;
  width:46%;
  background-image:
    linear-gradient(60deg, rgba(255,255,255,0.07) 25%, transparent 25.5%, transparent 74.5%, rgba(255,255,255,0.07) 75%),
    linear-gradient(-60deg, rgba(255,255,255,0.07) 25%, transparent 25.5%, transparent 74.5%, rgba(255,255,255,0.07) 75%);
  background-size:64px 110px;
  pointer-events:none;
}
.hero-band .eyebrow{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--cyan-light);
  margin:0 0 10px;
}
.hero-band h1{
  font-size:26px;
  font-weight:800;
  margin:0 0 10px;
  position:relative;
}
.hero-band p{
  color:#cfe3f4;
  font-size:14px;
  margin:0;
  position:relative;
}
.hero-band .hero-brand{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:15px;
  position:relative;
}
.hero-band .hero-brand svg{ color:var(--cyan-light); }

.course-wrap{
  max-width:960px;
  margin:0 auto;
  padding:30px 16px 60px;
}
.course-wrap h2{
  font-size:16px;
  font-weight:800;
  color:var(--navy);
  border-bottom:2px solid var(--navy);
  padding-bottom:8px;
  margin:34px 0 14px;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.course-wrap h2 .module-no{
  display:inline-block;
  background:var(--navy);
  color:#fff;
  font-size:12px;
  border-radius:6px;
  padding:2px 8px;
}
.lesson-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.lesson-card{
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  border-radius:10px;
  padding:13px 18px;
  box-shadow:0 1px 6px rgba(0,0,0,0.06);
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
  border-left:4px solid var(--navy);
}
.lesson-card.enabled:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0, 52, 118,0.18);
}
.lesson-card.disabled{
  opacity:0.6;
  cursor:default;
  border-left-color:#bbb;
}
.lesson-card .lesson-code{
  flex:0 0 58px;
  text-align:center;
  font-weight:800;
  font-size:12.5px;
  color:#fff;
  background:var(--navy);
  border-radius:7px;
  padding:6px 0;
}
.lesson-card.disabled .lesson-code{ background:#bbb; }
.lesson-card .lesson-title{
  flex:1;
  font-size:14.5px;
  font-weight:700;
  color:#333;
}
.lesson-card .lesson-duration{
  flex:0 0 auto;
  font-size:12.5px;
  color:#999;
}
.lesson-card .lesson-status{
  flex:0 0 auto;
  font-size:12px;
  font-weight:700;
  color:#aaa;
}
.lesson-card.completed{ border-left-color:#1b7a43; }
.lesson-card.completed .lesson-code{ background:#1b7a43; }
.lesson-card .complete-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:700;
  color:#1b7a43;
  background:#e3f6ea;
  border-radius:999px;
  padding:4px 11px;
}
.lesson-card.next-up{
  border-left-color:var(--coral);
  box-shadow:0 0 0 2px rgba(243,110,147,0.25);
}
.lesson-card .next-badge{
  flex:0 0 auto;
  font-size:12px;
  font-weight:800;
  color:#fff;
  background:var(--coral);
  border-radius:999px;
  padding:4px 12px;
}

/* ================================================================
   レッスンページ: 固定シェル(動画+ページ送りタブは常時表示)
   ================================================================ */
html.lesson-page-html, body.lesson-page-body{
  height:100%;
  overflow:hidden;
  margin:0;
}
.lesson-shell{
  display:flex;
  flex-direction:column;
  height:100vh;
  background:var(--page-bg);
}
.lesson-topbar-mini{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 16px;
  flex:0 0 auto;
  background:#fff;
}
.lesson-topbar-mini .back-link{
  color:#777;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
}
.lesson-topbar-mini .back-link:hover{ color:var(--navy); }

.step-tracker{
  display:flex;
  align-items:center;
  gap:3px;
  flex:0 0 auto;
  overflow-x:auto;
  max-width:70vw;
  padding:2px;
}
.step-dot{
  flex:0 0 auto;
  width:27px;
  height:27px;
  border-radius:50%;
  border:1.5px solid #d8d8d8;
  background:#fff;
  color:#999;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .15s ease;
  padding:0;
}
.step-dot:hover{ border-color:var(--navy); color:var(--navy); }
.step-dot.visited{ background:var(--pale-blue); border-color:var(--navy); color:var(--navy); }
.step-dot.current{ background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 0 0 3px rgba(0, 52, 118,0.15); }
.step-dot svg{ width:13px; height:13px; }
.step-line{ flex:0 0 12px; height:2px; background:#e2e2e2; }
.step-line.filled{ background:var(--navy); }

@media (max-width:560px){
  .step-dot{ width:23px; height:23px; font-size:11px; }
  .step-tracker{ max-width:56vw; }
}


.lesson-split{
  display:flex;
  flex:1;
  min-height:0;
  gap:0;
  width:100%;
}
.video-col{
  flex:0 0 calc(50% - 4px);   /* 中央のリサイザー8pxを折半し、左右をちょうど半分にする */
  min-width:220px;
  max-width:75%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding-left:12px;
  padding-right:14px;
  min-height:0;
}
.video-stage{
  flex:1 1 auto;
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 0;
}
.video-col .video-frame{
  position:relative;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,0.22);
}
.video-col .video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.video-col .video-frame .video-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#8fbfe2;
  text-align:center;
  padding:20px;
  font-size:12.5px;
  line-height:1.7;
}
.video-col .video-frame .video-placeholder strong{
  color:#fff; font-size:14px;
}
.video-meta-line{
  flex:0 0 auto;
  padding:8px 4px 0;
  font-size:12px;
  color:#777;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.video-meta-line strong{ color:var(--navy); font-size:13px; }
.video-meta-line .sep{ margin:0 6px; color:#ccc; }

.col-resizer{
  flex:0 0 8px;
  cursor:col-resize;
  position:relative;
  align-self:stretch;
}
.col-resizer::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:50%;
  width:2px;
  margin-left:-1px;
  background:#ccc;
  border-radius:2px;
}
.col-resizer:hover::after,
.col-resizer.dragging::after{ background:var(--navy); }

.text-col{
  flex:1;
  min-width:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.text-col-inner{ padding-bottom:20px; }

.sheet-wrap{
  background:#fff;
  border-radius:12px;
  min-height:600px;
  padding:6px 18px 0;
}
.lesson-page{ display:none; }
.lesson-page.active{ display:block; animation:fadein .25s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

img.zoomable{ cursor:zoom-in; }
.img-modal-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.78);
  display:flex; align-items:center; justify-content:center;
  z-index:2000; cursor:zoom-out; padding:24px;
}
.img-modal-overlay img{ max-width:92vw; max-height:92vh; border-radius:8px; box-shadow:0 8px 34px rgba(0,0,0,0.5); }

/* 前へ・次へ は常に見える位置に固定する
   （テキストが長いと、毎回いちばん下までスクロールする必要があって使いづらいため）
   .text-col-inner を縦並びにして nav-buttons を最後の要素に回し、
   スクロール領域の下辺に貼り付ける */
.text-col-inner{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.text-col-inner > .sheet-wrap{ order:1; }
.text-col-inner > .site-footer{ order:2; }
.text-col-inner > .nav-buttons{ order:3; }

.nav-buttons{
  position:sticky;
  bottom:0;
  z-index:6;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  max-width:1100px;
  width:100%;
  margin:0 auto;
  padding:12px 16px;
  background:rgba(239,239,239,0.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-top:1px solid #dcdcdc;
}
.nav-buttons button{
  font-family:inherit;
  font-weight:700;
  font-size:14px;
  padding:10px 22px;
  border-radius:8px;
  border:none;
  background:#fff;
  color:var(--navy);
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  cursor:pointer;
}
.nav-buttons button:disabled{ opacity:.35; cursor:default; }
.nav-buttons button:hover:not(:disabled){ background:var(--navy); color:#fff; }

@media (max-width:980px){
  .lesson-split{ flex-direction:column; padding:0; gap:0; }
  .col-resizer{ flex:0 0 10px; width:100%; cursor:row-resize; align-self:auto; }
  .col-resizer::after{ top:50%; bottom:auto; left:0; right:0; margin-left:0; height:2px; width:auto; margin-top:-1px; }
  .video-col{ flex:0 0 40vh; max-width:none; max-height:none; padding-right:0; }
  .text-col{ flex:1 1 auto; }
  .text-col-inner{ zoom:0.94; }
}

/* ================================================================
   ワークブック・コンテンツ（PDFデザインの再現コンポーネント）
   ================================================================ */

/* ---- 扉ページ（第◯回タイトル） ---- */
.divider-page{
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:60px 8px 0;
}
.divider-page .divider-title{
  font-size:24px;
  font-weight:800;
  color:#222;
  margin:0 0 14px;
}
.divider-page .divider-rule{
  height:6px;
  border-radius:3px;
  background:linear-gradient(90deg, rgba(0, 52, 118,0) 0%, var(--navy) 30%, var(--blue) 100%);
}

/* ---- 各コンテンツページ共通ヘッダー（第◯回 タイトルバー） ---- */
.workbook-header{
  position:relative;
  background:linear-gradient(120deg,var(--navy-black) 0%, var(--navy) 40%, var(--blue) 100%);
  color:#fff;
  padding:16px 22px;
  border-radius:10px;
  margin-bottom:18px;
  overflow:hidden;
  font-size:19px;
  font-weight:800;
  letter-spacing:.01em;
}
.workbook-header::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0; width:120px;
  background-image:
    linear-gradient(60deg, rgba(255,255,255,0.09) 25%, transparent 25.5%, transparent 74.5%, rgba(255,255,255,0.09) 75%),
    linear-gradient(-60deg, rgba(255,255,255,0.09) 25%, transparent 25.5%, transparent 74.5%, rgba(255,255,255,0.09) 75%);
  background-size:30px 52px;
  opacity:.8;
}
.workbook-header span{ position:relative; margin-left:6px; }

/* ---- イントロ：章立てリスト（水色ボックス） ---- */
.intro-box{
  background:var(--pale-blue);
  border-radius:14px;
  padding:20px 26px;
  margin:0 0 20px;
}
.intro-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 0;
  font-size:14.5px;
  font-weight:700;
  color:var(--navy);
}
.intro-item .pill{
  flex:0 0 auto;
  background:var(--navy-dark);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  padding:5px 14px;
  border-radius:999px;
  white-space:nowrap;
}

/* ---- 本レッスンのゴール（旗型ボックス） ---- */
.goal-flag{
  display:flex;
  align-items:stretch;
  margin:0 0 26px;
}
.goal-flag .flag-label{
  flex:0 0 118px;
  background:var(--navy);
  color:#fff;
  font-weight:800;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.4;
  padding:10px 6px;
  clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%);
}
.goal-flag .flag-body{
  flex:1;
  background:#fff;
  border:1.5px solid #e2e2e2;
  border-left:none;
  padding:14px 20px 14px 34px;
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:center;
}
.goal-flag .flag-body .goal-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14.5px;
  font-weight:600;
}
.goal-flag .flag-body .goal-item svg{ flex:0 0 auto; color:var(--navy); }

/* ---- 第◯章 セクションタグバー（グラデーション） ---- */
.section-tag-bar{
  display:flex;
  align-items:stretch;
  margin:28px 0 14px;
  height:38px;
  border-radius:3px;
  overflow:hidden;
  background:linear-gradient(90deg, var(--navy) 0%, var(--blue) 55%, var(--cyan) 100%);
}
.section-tag-bar .tag-chip{
  flex:0 0 auto;
  background:var(--navy-black);
  color:#fff;
  font-weight:700;
  font-size:13.5px;
  display:flex;
  align-items:center;
  padding:0 16px;
  white-space:nowrap;
}
.section-tag-bar .tag-text{
  flex:1;
  display:flex;
  align-items:center;
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:0 16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.section-tag-bar .tag-dots{
  flex:0 0 70px;
  background-image:
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,0.55) 50%),
    linear-gradient(0deg, transparent 50%, rgba(255,255,255,0.55) 50%);
  background-size:10px 10px;
  opacity:.9;
}

/* ---- レッスン映像のポイント（見出し） ---- */
.info-point{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1.5px solid #333;
  font-size:14.5px;
  font-weight:800;
  color:#222;
}
.info-point .info-circle{
  flex:0 0 auto;
  width:22px; height:22px;
  border:2px solid var(--navy);
  border-radius:50%;
  color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800;
}

/* ---- 定義見出し ＋ 本文 ---- */
.def-heading{
  text-align:center;
  font-size:22px;
  font-weight:800;
  color:#222;
  margin:6px 0 14px;
}
.body-text{ font-size:14.5px; line-height:1.85; margin:8px 0; color:#333; }
.body-text.small{ font-size:13.5px; }

/* ---- 要するに… まとめ吹き出し ---- */
.summary-row{
  display:flex;
  align-items:center;
  gap:18px;
  margin:22px 0 10px;
  flex-wrap:wrap;
}
.summary-row .summary-circle{
  flex:0 0 118px;
  height:118px;
  border-radius:50%;
  background:var(--pale-blue-2);
  color:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13.5px;
  font-weight:700;
  text-align:center;
}
.summary-row .summary-text{
  flex:1 1 320px;
  font-size:18px;
  font-weight:800;
  color:var(--navy);
  line-height:1.6;
}

/* ---- 中央矢印（下向き） ---- */
.arrow-down{
  display:flex;
  justify-content:center;
  margin:14px 0;
}
.arrow-down svg{ color:#222; }

/* ---- 例示ボックス（町の定食屋さん 等） ---- */
.example-box{
  border:1px solid #333;
  border-radius:4px;
  padding:12px 18px;
  font-size:14.5px;
  font-weight:700;
  text-align:center;
  margin:10px 0;
}
.flow-row{
  display:flex;
  gap:14px;
  margin:14px 0;
  flex-wrap:wrap;
}
.flow-box{
  flex:1 1 200px;
  background:var(--pale-blue);
  border-radius:8px;
  padding:14px 16px;
  min-width:0;
}
.flow-box.dark{ background:var(--navy); color:#fff; }
.flow-box .flow-label{
  display:inline-block;
  font-weight:800;
  font-size:13px;
  margin-bottom:6px;
}
.flow-box .flow-sub{ font-size:11.5px; color:var(--muted); margin-bottom:4px; }
.flow-box.dark .flow-sub{ color:#c3dbf0; }
.flow-box .flow-tagline{
  display:inline-block;
  background:rgba(255,255,255,0.85);
  color:var(--navy);
  font-size:11.5px;
  font-weight:800;
  border-radius:5px;
  padding:2px 8px;
  margin-bottom:6px;
}
.flow-box p{ margin:2px 0; font-size:13px; line-height:1.6; }
.flow-arrow-mid{
  flex:0 0 auto;
  align-self:center;
  color:#222;
}

/* ---- 結論の帯（DXの本質とは 等） ---- */
.tag-line{
  display:flex;
  align-items:center;
  gap:0;
  margin:18px 0;
  border-radius:4px;
  overflow:hidden;
  flex-wrap:wrap;
}
.tag-line .tag-key{
  background:#dedede;
  color:#333;
  font-weight:800;
  font-size:13.5px;
  padding:10px 16px;
  white-space:nowrap;
}
.tag-line .tag-val{
  background:#f2f2f2;
  color:#333;
  font-size:13.5px;
  padding:10px 16px;
  flex:1;
}

/* ---- 映像視聴メモ（ドット方眼 + 付箋カード） ---- */
.memo-panel{
  background:
    radial-gradient(circle, #d8d8d8 1px, transparent 1.2px) 0 0/14px 14px,
    #fafafa;
  border:1px solid #e2e2e2;
  border-radius:6px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:8px;
}
.memo-card{
  background:#fff;
  border-left:4px solid var(--navy);
  border-radius:4px;
  padding:14px 18px;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  font-size:13.5px;
  line-height:1.75;
  color:#333;
}
.memo-card .memo-title-chip{
  display:inline-block;
  background:var(--navy-dark);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:4px 12px;
  border-radius:3px;
  margin-bottom:8px;
}
.memo-card .memo-heading{
  font-size:15px;
  font-weight:800;
  color:var(--navy);
  margin:2px 0 6px;
}
.memo-card .memo-heading .accent{ color:var(--coral); }
.memo-card .accent{ color:var(--coral); font-weight:700; }
.memo-card .memo-example{ color:var(--muted); font-size:12.5px; margin-top:4px; }

/* ---- アウトプット：課題提起ボックス ---- */
.output-box{
  position:relative;
  border:1.5px solid var(--navy);
  border-radius:2px;
  padding:26px 30px 22px;
  margin:18px 0 28px;
}
.output-box::before,
.output-box::after{
  content:"";
  position:absolute;
  width:16px; height:16px;
  border:2px solid var(--navy);
  top:-2px;
}
.output-box::before{ left:-2px; border-right:none; border-bottom:none; }
.output-box::after{ right:-2px; border-left:none; border-bottom:none; }
.output-box .output-title{
  text-align:center;
  font-weight:800;
  font-size:15px;
  color:var(--navy);
  letter-spacing:.3em;
  margin:0 0 16px;
}
.output-box p{ font-size:14px; line-height:1.85; margin:6px 0; color:#333; }

.q-item{ margin:22px 0; }
.q-item .q-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14.5px;
  font-weight:700;
  color:#222;
  margin-bottom:10px;
}
.q-item .q-num{
  flex:0 0 auto;
  width:26px; height:26px;
  background:var(--navy);
  color:#fff;
  border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
}
.answer-area{
  background:#f5f5f5;
  border-radius:6px;
  padding:16px 18px;
}
.answer-area .answer-line{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:700;
  color:#333;
  margin-bottom:6px;
}
.answer-area .answer-line::before{ content:"■"; color:var(--navy); font-size:10px; }
.answer-area textarea{
  width:100%;
  border:none;
  border-bottom:1px solid #ccc;
  background:transparent;
  font-family:inherit;
  font-size:13.5px;
  padding:6px 2px 10px;
  resize:vertical;
  min-height:38px;
}
.answer-area textarea:focus{ outline:none; border-color:var(--navy); }

.choice-row{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  padding:16px 18px 4px;
  background:#f5f5f5;
  border-radius:6px 6px 0 0;
}
.choice-row label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
}
.choice-row input[type=checkbox]{
  width:16px; height:16px;
  accent-color:var(--navy);
}
.answer-area.with-choice{ border-radius:0 0 6px 6px; }

/* ---- DXまでの3ステップ（階段） ---- */
.step-flow{
  display:flex;
  align-items:flex-end;
  gap:0;
  margin:10px 0 18px;
}
.step-flow .step-col{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.step-flow .step-figure{
  height:46px;
  display:flex;
  align-items:flex-end;
  color:var(--navy);
  margin-bottom:6px;
}
.step-flow .step-col:nth-child(2) .step-figure{ height:58px; }
.step-flow .step-col:nth-child(3) .step-figure{ height:70px; color:var(--cyan); }
.step-flow .step-tag{
  width:100%;
  background:#d7e6f3;
  color:#333;
  font-weight:800;
  font-size:12.5px;
  padding:5px 0;
}
.step-flow .step-col:nth-child(2) .step-tag{ background:var(--navy-dark); color:#fff; }
.step-flow .step-col:nth-child(3) .step-tag{ background:var(--navy-black); color:#fff; }
.step-flow .step-block{
  width:100%;
  padding:14px 10px 18px;
  background:#eaf1f8;
}
.step-flow .step-col:nth-child(2) .step-block{ background:#dbe6f5; }
.step-flow .step-col:nth-child(3) .step-block{ background:linear-gradient(160deg,var(--navy),var(--cyan)); color:#fff; }
.step-flow .step-name{ font-weight:800; font-size:14.5px; margin-bottom:2px; }
.step-flow .step-en{ font-size:10.5px; color:var(--muted); margin-bottom:8px; }
.step-flow .step-col:nth-child(3) .step-en{ color:#dbe9fb; }
.step-flow .step-big{ font-size:22px; font-weight:800; margin:2px 0; }
.step-flow .step-desc{ font-size:12px; line-height:1.6; }

.compare-tags{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:10px 0 4px;
}
.compare-tags .compare-tag{
  flex:1 1 260px;
  background:#eee;
  border-radius:5px;
  padding:9px 14px;
  font-size:13px;
  text-align:center;
  font-weight:700;
  color:#333;
}
.compare-tags .compare-tag b{ color:var(--navy); }

/* ---- 2列比較（持続的なデータ活用／デジタル技術の最適導入） ---- */
.compare-two{
  display:flex;
  gap:2px;
  margin:16px 0;
  flex-wrap:wrap;
}
.compare-two .compare-col{
  flex:1 1 260px;
  min-width:0;
}
.compare-two .compare-head{
  font-weight:800;
  font-size:14.5px;
  text-align:center;
  padding:12px 10px;
}
.compare-two .compare-col:first-child .compare-head{ background:var(--pale-blue); color:var(--navy); }
.compare-two .compare-col:last-child .compare-head{ background:var(--navy); color:#fff; }
.compare-two .compare-body{
  background:#f7f7f7;
  padding:14px 16px;
  font-size:13px;
  line-height:1.75;
  color:#333;
  height:100%;
}

/* ---- 車の図解（DXという車） ---- */
.car-row{
  display:flex;
  align-items:center;
  gap:18px;
  margin:16px 0;
  flex-wrap:wrap;
}
.car-row .car-badge{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--navy);
  color:#fff;
  font-weight:800;
  font-size:15px;
  padding:10px 18px 10px 12px;
  border-radius:6px 20px 20px 6px;
}
.car-row .car-question{
  font-size:16px;
  font-weight:800;
  color:#222;
}

/* ---- 本日のまとめ カード ---- */
.matome-card .memo-title-chip{ background:var(--navy); }

.footer-bar{
  text-align:center;
  margin-top:30px;
  padding-top:14px;
  border-top:1px solid #ddd;
}
.footer-bar .pagenum{ font-size:13px; color:#666; margin-bottom:4px; }
.footer-bar .copy{ font-size:10.5px; color:#aaa; }

@media (max-width:720px){
  .flow-arrow-mid{ transform:rotate(90deg); }
  .goal-flag{ flex-direction:column; }
  .goal-flag .flag-label{ clip-path:none; border-radius:6px 6px 0 0; }
  .goal-flag .flag-body{ border-left:1.5px solid #e2e2e2; padding-left:20px; }
  .step-flow{ flex-direction:column; }
  .step-flow .step-col{ width:100%; }
}

/* ================================================================
   管理ダッシュボード (admin/index.html)
   ================================================================ */
.admin-shell{ min-height:100vh; background:var(--page-bg); }
.admin-topbar{
  background:var(--navy);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 22px;
}
.admin-topbar .who{ font-size:12.5px; color:#c3dbf0; }
.admin-topbar .who b{ color:#fff; }
.admin-topbar button.logout-btn{
  background:rgba(255,255,255,0.14);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:6px 14px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}
.admin-topbar button.logout-btn:hover{ background:rgba(255,255,255,0.24); }

.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(120deg,var(--navy-black) 0%, var(--navy) 45%, var(--blue) 100%);
  padding:20px;
}
.login-card{
  background:#fff;
  border-radius:14px;
  padding:38px 36px;
  width:100%;
  max-width:360px;
  box-shadow:0 12px 40px rgba(0,0,0,0.25);
}
.login-card h1{ font-size:16px; font-weight:800; color:var(--navy); margin:0 0 4px; text-align:center; }
.login-card .sub{ font-size:12px; color:var(--muted); text-align:center; margin:0 0 22px; }
.form-row{ margin-bottom:14px; }
.form-row label{ display:block; font-size:12.5px; font-weight:700; color:#444; margin-bottom:5px; }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password], .form-row select{
  width:100%;
  border:1.5px solid #ddd;
  border-radius:7px;
  padding:9px 12px;
  font-family:inherit;
  font-size:14px;
}
.form-row input:focus, .form-row select:focus{ outline:none; border-color:var(--navy); }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--navy);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 20px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
}
.btn:hover{ filter:brightness(1.08); }
.btn.btn-block{ width:100%; }
.btn.btn-outline{ background:#fff; color:var(--navy); border:1.5px solid var(--navy); }
.btn.btn-danger{ background:#fff; color:#c0392b; border:1.5px solid #e0a8a0; }
.btn.btn-sm{ padding:6px 12px; font-size:12px; }
.form-error{ color:#c0392b; font-size:12.5px; margin:10px 0 0; min-height:16px; text-align:center; }
.form-success{ color:#1a7a3c; font-size:12.5px; margin:10px 0 0; text-align:center; line-height:1.6; }

.admin-wrap{ max-width:1100px; margin:0 auto; padding:24px 20px 60px; }
.tabbar{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.tabbar button{
  background:#fff;
  border:1.5px solid #ddd;
  color:#555;
  font-family:inherit;
  font-weight:700;
  font-size:13px;
  padding:9px 18px;
  border-radius:8px;
  cursor:pointer;
}
.tabbar button.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

.panel-card{
  background:#fff;
  border-radius:12px;
  padding:22px 24px;
  margin-bottom:20px;
  box-shadow:0 1px 6px rgba(0,0,0,0.06);
}
.panel-card h2{ font-size:15px; font-weight:800; color:var(--navy); margin:0 0 16px; }
.panel-card h3{ font-size:13.5px; font-weight:800; color:#333; margin:20px 0 10px; }

.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
.data-table th{
  text-align:left;
  font-size:11.5px;
  color:var(--muted);
  font-weight:700;
  padding:8px 10px;
  border-bottom:2px solid #eee;
  white-space:nowrap;
}
.data-table td{ padding:9px 10px; border-bottom:1px solid #f0f0f0; vertical-align:middle; }
.data-table tr:hover td{ background:#f8fbfe; }

.badge{ display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.badge.on{ background:#e3f6ea; color:#1b7a43; }
.badge.off{ background:#f2f2f2; color:#999; }
.badge.role-super{ background:var(--navy); color:#fff; }
.badge.role-admin{ background:var(--pale-blue); color:var(--navy); }
.badge.role-student{ background:#f0f0f0; color:#555; }

.module-check-grid{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 4px; }
.module-check-grid label{
  display:flex; align-items:center; gap:6px;
  background:#f5f5f5; border-radius:7px; padding:7px 12px;
  font-size:12.5px; font-weight:700; cursor:pointer;
}
.module-check-grid input{ accent-color:var(--navy); }

.inline-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; }
.inline-form .form-row{ margin-bottom:0; min-width:170px; flex:1; }

.company-select-bar{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.company-select-bar select{ min-width:220px; }

.empty-hint{ color:var(--muted); font-size:12.5px; padding:14px 0; }
.toast{
  position:fixed; bottom:24px; right:24px;
  background:var(--navy); color:#fff;
  padding:12px 20px; border-radius:8px;
  font-size:13px; font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,0.2);
  z-index:999;
}

/* ================================================================
   DX01-02以降で登場する追加コンポーネント
   ================================================================ */

/* ---- 用語ブロック（検索エンジン／ググる 等） ---- */
.term-block{
  background:var(--pale-blue);
  border-radius:10px;
  padding:20px 24px;
  margin:14px 0;
  text-align:center;
}
.term-block .term-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.term-block .term-chip{
  background:var(--navy);
  color:#fff;
  font-weight:700;
  font-size:12.5px;
  padding:6px 14px;
  border-radius:4px;
  white-space:nowrap;
}
.term-block .term-title{ font-size:24px; font-weight:800; color:#222; }
.term-block p{ font-size:13.5px; color:#333; margin:4px 0 10px; line-height:1.7; }
.term-block .term-note{
  display:inline-block;
  font-size:12.5px;
  font-weight:700;
  color:var(--navy);
  background:rgba(255,255,255,0.6);
  border-radius:5px;
  padding:5px 14px;
}

/* ---- ミニタイトル行（消費者の変化 ▶ モノの所有からコトの消費へのシフト） ---- */
.mini-title-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin:18px 0 14px;
  flex-wrap:wrap;
}
.mini-title-row .mini-chip{
  background:var(--navy-black);
  color:#fff;
  font-weight:700;
  font-size:13px;
  padding:8px 16px;
  border-radius:3px;
  white-space:nowrap;
}
.mini-title-row .mini-arrow{ color:var(--navy); flex:0 0 auto; }
.mini-title-row .mini-text{ font-size:18px; font-weight:800; color:#222; }

/* ---- 例1/例2 アイコン比較行 ---- */
.example-row{
  display:flex;
  align-items:stretch;
  gap:0;
  margin:12px 0;
  border-radius:8px;
  overflow:hidden;
}
.example-row .example-num{
  flex:0 0 58px;
  background:var(--navy);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:11.5px;
  font-weight:700;
  line-height:1.3;
}
.example-row .example-num b{ font-size:19px; }
.example-row .example-body{
  flex:1;
  background:var(--pale-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:18px 20px;
  flex-wrap:wrap;
}
.example-row .example-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:#333;
}
.example-row .example-item svg{ color:var(--navy); }
.example-row .example-item .sub{ font-size:11px; font-weight:600; color:var(--muted); }
.example-row .example-symbol{ font-size:22px; color:#333; font-weight:800; flex:0 0 auto; }

/* ---- 「レガシーシステム」の3つの問題点 ---- */
.point3-header{
  background:var(--navy);
  color:#fff;
  text-align:center;
  font-weight:800;
  font-size:14px;
  padding:12px;
  border-radius:6px 6px 0 0;
  margin-top:18px;
}
.point3-band{
  display:flex;
  background:var(--pale-blue);
  border-radius:0 0 6px 6px;
  padding:18px 14px;
  gap:10px;
  flex-wrap:wrap;
}
.point3-band .point3-item{
  flex:1 1 160px;
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:0 6px;
}
.point3-band .point3-item .sono{ font-size:11px; font-weight:700; color:var(--navy); white-space:nowrap; }
.point3-band .point3-item .num{ font-size:25px; font-weight:800; color:var(--navy); }
.point3-band .point3-item .label{ font-size:13px; font-weight:700; color:#222; }

/* ---- 外部/内部からの圧力ブロック ---- */
.pressure-block{ margin:16px 0; }
.pressure-head{ display:flex; height:auto; min-height:40px; flex-wrap:wrap; }
.pressure-head .ph-left{
  flex:0 0 auto;
  background:var(--navy-black);
  color:#fff;
  display:flex;
  align-items:center;
  padding:9px 18px;
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
}
.pressure-head .ph-right{
  flex:1;
  background:var(--navy);
  color:#fff;
  display:flex;
  align-items:center;
  padding:9px 18px;
  font-weight:700;
  font-size:13.5px;
}
.pressure-body{
  background:var(--pale-blue);
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}
.pressure-body .pb-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:#333;
}
.pressure-body .pb-item .sub{ font-size:11px; color:var(--muted); font-weight:600; }
.pressure-body .pb-arrow{ color:var(--navy); flex:0 0 auto; }
.pressure-body .pb-box{
  background:#fff;
  border:1.5px solid var(--navy);
  border-radius:8px;
  padding:14px 18px;
  font-size:13px;
  font-weight:700;
  color:#222;
  text-align:center;
}

/* ---- ポイント1/2/3 カード（3列） ---- */
.point-cards{
  display:flex;
  gap:14px;
  margin:14px 0;
  flex-wrap:wrap;
}
.point-cards .point-card{
  flex:1 1 220px;
  border:1.5px solid #ddd;
  border-radius:8px;
  padding:18px 16px;
}
.point-cards .point-card .point-label{
  text-align:center;
  margin-bottom:10px;
}
.point-cards .point-card .point-label span{ font-size:12px; font-weight:700; color:var(--navy); }
.point-cards .point-card .point-label b{ font-size:25px; color:var(--navy); margin-left:4px; }
.point-cards .point-card p{ font-size:12.5px; line-height:1.8; color:#333; margin:0; }

@media (max-width:720px){
  .example-row{ flex-direction:column; }
  .example-row .example-num{ flex-direction:row; gap:6px; padding:6px; }
  .pressure-head{ flex-direction:column; }
}

/* ================================================================
   DX01-03で登場する追加コンポーネント
   ================================================================ */

/* ---- プロセスフロー枠（データを活用できない/できる状態 等） ---- */
.process-box{
  border:1.5px solid #333;
  border-radius:4px;
  padding:20px;
  margin:14px 0;
}
.process-box .process-label{
  display:inline-block;
  background:var(--navy);
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:9px 16px;
  border-radius:3px;
  margin-bottom:18px;
}
.process-chain{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.process-chain .process-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  font-size:12.5px;
  font-weight:700;
  color:#333;
}
.process-chain .process-step svg{ color:var(--navy); }
.process-chain .process-arrow{ color:var(--navy); flex:0 0 auto; }
.process-chain .process-note{
  background:var(--pale-blue);
  border-radius:8px;
  padding:14px 18px;
  font-size:12.5px;
  font-weight:700;
  color:var(--navy);
  text-align:center;
  max-width:210px;
}

/* ---- 挿絵つきの本文（蝶々のイラスト等） ---- */
.text-with-illustration{
  display:flex;
  align-items:center;
  gap:20px;
  margin:14px 0;
  flex-wrap:wrap;
}
.text-with-illustration .illustration{ flex:0 0 auto; color:var(--navy); }
.text-with-illustration .text-content{ flex:1 1 300px; }

/* ---- 3つのポイント（矢羽根バッジ） ---- */
.chevron-points-header{
  background:var(--navy);
  color:#fff;
  text-align:center;
  font-weight:700;
  font-size:14px;
  padding:10px;
  border-radius:4px;
  margin:14px 0;
}
.chevron-point-row{
  display:flex;
  align-items:stretch;
  gap:0;
  margin-bottom:12px;
}
.chevron-point-row .chevron-badge{
  flex:0 0 84px;
  background:var(--navy);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:11.5px;
  font-weight:700;
  clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%);
  padding-right:12px;
}
.chevron-point-row .chevron-badge b{ font-size:23px; }
.chevron-point-row .chevron-body{
  flex:1;
  background:#f7f7f7;
  padding:13px 20px;
  border-radius:0 6px 6px 0;
}
.chevron-point-row .chevron-body .cp-title{ font-size:14px; font-weight:700; color:#222; margin-bottom:3px; line-height:1.5; }
.chevron-point-row .chevron-body .cp-title .accent{ color:var(--navy); font-weight:800; }
.chevron-point-row .chevron-body .cp-desc{ font-size:12.5px; color:#333; line-height:1.7; }

@media (max-width:720px){
  .chevron-point-row{ flex-direction:column; }
  .chevron-point-row .chevron-badge{ flex-direction:row; clip-path:none; border-radius:6px 6px 0 0; padding:8px; }
  .chevron-point-row .chevron-body{ border-radius:0 0 6px 6px; }
}

/* ================================================================
   DX01-04で登場する追加コンポーネント
   ================================================================ */

/* ---- UX比較（シンプル版：顔アイコン＋大見出し＋結果） ---- */
.ux-compare-row{ display:flex; gap:16px; margin:14px 0; flex-wrap:wrap; }
.ux-box{ flex:1 1 260px; background:var(--pale-blue); border-radius:10px; padding:20px; text-align:center; }
.ux-box .ux-face{ font-size:30px; margin-bottom:4px; }
.ux-box .ux-title{ font-size:25px; font-weight:800; color:#222; margin-bottom:10px; }
.ux-box .ux-desc{ font-size:12.5px; color:#333; margin:4px 0; line-height:1.6; }
.ux-box .ux-arrow{ margin:10px 0; }
.ux-box .ux-result{ background:#fff; border:1.5px solid var(--navy); border-radius:8px; padding:10px; font-size:13px; font-weight:700; color:#222; }

/* ---- UX比較（詳細版：問題点/改善点バッジ＋引用） ---- */
.ux-box2{ flex:1 1 300px; border:1.5px solid var(--navy); border-radius:8px; overflow:hidden; }
.ux-box2 .ux2-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:2px solid var(--navy); flex-wrap:wrap; }
.ux-box2 .ux2-face{ font-size:20px; }
.ux-box2 .ux2-title{ font-size:20px; font-weight:800; color:#222; }
.ux-box2 .ux2-arrow{ color:var(--navy); flex:0 0 auto; }
.ux-box2 .ux2-result{ font-size:12px; font-weight:700; color:#333; }
.ux-box2 .ux2-body{ background:var(--pale-blue); padding:16px; display:flex; gap:12px; align-items:flex-start; }
.ux-box2 .ux2-badge{ flex:0 0 54px; height:54px; border-radius:50%; background:var(--navy); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; text-align:center; }
.ux-box2 .ux2-list{ flex:1; font-size:12.5px; color:#333; line-height:1.9; list-style:none; margin:0; padding:0; }
.ux-box2 .ux2-list li::before{ content:"●"; color:var(--navy); font-size:8px; margin-right:6px; vertical-align:middle; }
.ux-box2 .ux2-quote{ margin:0 16px 16px; background:#fff; border:1.5px solid var(--navy); border-radius:6px; padding:10px 14px; font-size:12px; font-weight:700; color:#222; }

/* ---- 顧客体験ジャーニー（5接点） ---- */
.journey-row{ display:flex; align-items:flex-start; gap:0; margin:14px 0; flex-wrap:wrap; }
.journey-step{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 6px; min-width:100px; }
.journey-step .j-num{ width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.journey-step .j-title{ font-size:16px; font-weight:800; color:#222; }
.journey-step .j-sub{ font-size:10px; color:var(--muted); margin:3px 0; }
.journey-step .j-desc{ font-size:11px; color:#333; line-height:1.5; }
.journey-arrow{ flex:0 0 auto; align-self:center; color:var(--navy); padding:14px 2px 0; }
.journey-conclusion{ display:flex; align-items:stretch; gap:0; margin-top:16px; background:var(--pale-blue); border-radius:8px; overflow:hidden; flex-wrap:wrap; }
.journey-conclusion .jc-badge{
  flex:0 0 auto; background:var(--navy); color:#fff; font-weight:800; font-size:14px;
  padding:14px 30px 14px 20px; display:flex; align-items:center;
  clip-path:polygon(0 0,85% 0,100% 50%,85% 100%,0 100%);
}
.journey-conclusion p{ flex:1; font-size:13px; font-weight:700; color:#222; padding:12px 16px; margin:0; }

/* ---- 全体最適/個別最適カード ---- */
.approach-cards{ display:flex; gap:16px; margin:14px 0; flex-wrap:wrap; }
.approach-card{ flex:1 1 280px; border:1.5px solid var(--navy); border-radius:8px; overflow:hidden; }
.approach-card .approach-head{ background:var(--navy); color:#fff; text-align:center; padding:11px; font-weight:800; font-size:14.5px; }
.approach-card .approach-head small{ display:block; font-weight:500; font-size:10.5px; color:#c3dbf0; margin-top:2px; }
.approach-card .approach-body{ background:var(--pale-blue); padding:14px 16px; }
.approach-card .approach-body > p.approach-intro{ font-size:12px; color:#333; margin:0 0 10px; line-height:1.7; }
.approach-card .approach-row{ display:flex; gap:8px; align-items:flex-start; margin-bottom:8px; font-size:12px; }
.approach-card .approach-row .al-badge{ flex:0 0 auto; background:var(--navy-dark); color:#fff; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:4px; white-space:nowrap; }
.approach-card .approach-row span.al-text{ color:#333; line-height:1.6; }
.approach-card .approach-conclusion{ background:#fff; border-radius:6px; padding:10px 12px; font-size:11.5px; color:#333; line-height:1.7; margin-top:4px; }

/* ---- ピラミッド構造図 ---- */
.pyramid-diagram{ margin:16px 0; text-align:center; }
.pyramid-diagram .pyr-caption{ font-size:13px; font-weight:700; color:#222; text-align:left; margin-bottom:10px; }
.pyramid-diagram .pyr-top{ margin-bottom:6px; }
.pyramid-diagram .pyr-box{ display:inline-block; background:var(--navy); color:#fff; font-weight:700; font-size:13px; padding:8px 22px; border-radius:6px; }
.pyramid-diagram .pyr-arrow{ color:var(--navy); margin:2px 0; }
.pyramid-diagram .pyr-mid{ display:flex; justify-content:center; gap:10px; margin:2px 0; }
.pyramid-diagram .pyr-box2{ background:var(--pale-blue); color:var(--navy); border:1.5px solid var(--navy); font-weight:700; font-size:12.5px; padding:8px 16px; border-radius:6px; }
.pyramid-diagram .pyr-bottom{ margin-top:2px; }
.pyramid-diagram .pyr-box3{ background:var(--navy); color:#fff; font-weight:800; font-size:13px; padding:9px 20px; border-radius:6px; display:inline-block; }

/* ---- ミニ結論（小さめの「結論」ラベル＋文章） ---- */
.mini-conclusion{ margin:14px 0; }
.mini-conclusion-label{ display:inline-block; background:var(--navy); color:#fff; font-weight:800; font-size:14px; padding:8px 24px; border-radius:4px; margin-bottom:8px; }
.mini-conclusion p{ font-size:12.5px; line-height:1.8; color:#333; margin:0; }

@media (max-width:720px){
  .journey-row{ flex-direction:column; }
  .journey-arrow{ transform:rotate(90deg); padding:4px 0; }
  .ux-box2 .ux2-body{ flex-direction:column; }
}

/* ================================================================
   DX01-05で登場する追加コンポーネント
   ================================================================ */

/* ---- ペルソナカード（検索エンジン/生成AIのたとえ） ---- */
.persona-card{
  background:var(--pale-blue);
  border-radius:10px;
  padding:22px 26px;
  margin:14px 0;
  display:flex;
  gap:22px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.persona-card .persona-avatar{
  flex:0 0 auto;
  width:96px;
  height:96px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.persona-card .persona-main{ flex:1 1 240px; }
.persona-card .persona-title{
  font-size:18px;
  font-weight:800;
  color:#222;
  border-bottom:1.5px solid #999;
  padding-bottom:8px;
  margin-bottom:10px;
}
.persona-card .persona-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:8px;
  font-size:12.5px;
}
.persona-card .persona-row .pr-badge{
  flex:0 0 auto;
  background:var(--navy);
  color:#fff;
  font-weight:700;
  font-size:11px;
  padding:4px 12px;
  border-radius:4px;
  white-space:nowrap;
}
.persona-card .persona-row span.pr-text{ color:#333; line-height:1.6; padding-top:2px; }
.persona-card .persona-desc{
  font-size:12px;
  color:#333;
  line-height:1.8;
  margin-top:10px;
}
.persona-card + .persona-card{ margin-top:14px; }

/* ---- 最高のプロンプト：4象限＋中央バッジ ---- */
.prompt-quad-wrap{ position:relative; margin:34px 0 24px; }
.prompt-quad{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.prompt-quad .pq-card{ background:var(--pale-blue); border-radius:8px; padding:16px 18px; text-align:center; }
.prompt-quad .pq-title{ font-size:16px; font-weight:800; color:#222; padding-bottom:8px; border-bottom:1.5px dashed #9db9d8; margin-bottom:8px; }
.prompt-quad .pq-desc{ font-size:11.5px; color:#333; margin-bottom:10px; line-height:1.6; }
.prompt-quad .pq-example{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:11.5px; color:#333; }
.prompt-quad .pq-example .al-badge{ background:var(--navy-dark); color:#fff; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:4px; white-space:nowrap; }
.prompt-quad-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:104px; height:104px; border-radius:50%;
  background:var(--navy); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.22); z-index:2;
}
.prompt-quad-center small{ font-weight:600; font-size:10px; margin-top:2px; color:#c3dbf0; }

/* ---- リスクカード（3列） ---- */
.risk-cards{ display:flex; gap:14px; margin:14px 0; flex-wrap:wrap; }
.risk-cards .risk-card{ flex:1 1 200px; border:1.5px solid #ddd; border-radius:8px; padding:16px 14px; text-align:center; }
.risk-cards .risk-card .risk-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--navy); color:#fff; font-size:11.5px; font-weight:700;
  padding:5px 12px 5px 6px; border-radius:999px; margin-bottom:10px;
}
.risk-cards .risk-card .risk-chip .rc-num{
  background:#fff; color:var(--navy); width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800;
}
.risk-cards .risk-card .risk-title{ font-size:15px; font-weight:800; color:#222; margin-bottom:1px; }
.risk-cards .risk-card .risk-sub{ font-size:10px; color:var(--muted); margin-bottom:8px; }
.risk-cards .risk-card .risk-icon{ margin:4px 0 10px; color:var(--navy); }
.risk-cards .risk-card .risk-desc{ font-size:12px; color:#333; line-height:1.7; text-align:left; }

/* ---- ポイントカード（水色背景バリアント） ---- */
.point-cards.blue .point-card{ background:var(--pale-blue); border:none; }

@media (max-width:720px){
  .prompt-quad{ grid-template-columns:1fr; }
  .prompt-quad-center{ position:static; transform:none; margin:10px auto; }
}

/* ================================================================
   DX01-06で登場する追加コンポーネント
   ================================================================ */

/* ---- 概念ペアカード（DX[目的]/IoT[手段]） ---- */
.concept-pair{ display:flex; gap:16px; margin:14px 0; flex-wrap:wrap; }
.concept-pair .concept-card{ flex:1 1 260px; border-radius:8px; overflow:hidden; }
.concept-pair .concept-head{ background:var(--navy); color:#fff; text-align:center; padding:12px; font-size:21px; font-weight:800; }
.concept-pair .concept-head small{ font-size:12.5px; font-weight:600; margin-left:4px; }
.concept-pair .concept-body{ background:var(--pale-blue); padding:18px 16px; text-align:center; }
.concept-pair .concept-body p.concept-desc{ font-size:13px; font-weight:700; color:#222; margin:0 0 14px; line-height:1.6; }
.concept-pair .concept-example-tag{ display:inline-block; background:var(--navy-dark); color:#fff; font-size:11.5px; font-weight:700; padding:4px 20px; border-radius:999px; margin-bottom:10px; }
.concept-pair .concept-example-text{ font-size:11.5px; color:#333; line-height:1.7; margin:0 0 14px; }
.concept-pair .concept-icon{ color:var(--navy); }

/* ---- 技術要素カード（2x2） ---- */
.tech-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0; }
.tech-cards .tech-card{ border-radius:8px; overflow:hidden; }
.tech-cards .tech-head{ background:var(--navy); color:#fff; text-align:center; padding:11px; font-size:14.5px; font-weight:800; }
.tech-cards .tech-body{ background:var(--pale-blue); padding:16px; display:flex; align-items:center; gap:14px; min-height:70px; }
.tech-cards .tech-body svg{ color:var(--navy); flex:0 0 auto; }
.tech-cards .tech-body p{ font-size:12.5px; color:#333; margin:0; line-height:1.6; }

/* ---- ステップ下の補足説明（3ステップの下に長文説明がつくパターン） ---- */
.step-flow .step-notes{ padding:10px 6px 0; text-align:left; }
.step-flow .step-notes .sn-lead{ font-size:12px; font-weight:700; color:#222; line-height:1.6; margin:0 0 6px; }
.step-flow .step-notes .sn-body{ font-size:10.5px; color:#555; line-height:1.7; margin:0; }

/* ---- フェーズ行（3フェーズの流れ） ---- */
.phase-row{ display:flex; align-items:stretch; gap:0; margin:14px 0; }
.phase-row .phase-col{ flex:1; display:flex; flex-direction:column; min-width:0; }
.phase-row .phase-tag{ text-align:center; font-size:11px; font-weight:700; color:#fff; background:var(--navy-black); padding:6px 0; border-radius:4px 4px 0 0; }
.phase-row .phase-col:nth-child(3) .phase-tag{ background:var(--navy-dark); }
.phase-row .phase-col:nth-child(5) .phase-tag{ background:var(--navy); }
.phase-row .phase-block{ background:var(--pale-blue); padding:14px 12px; text-align:center; flex:1; border-radius:0 0 4px 4px; }
.phase-row .phase-title{ font-size:13.5px; font-weight:800; color:#222; margin-bottom:6px; }
.phase-row .phase-desc{ font-size:10.5px; color:#333; line-height:1.6; }
.phase-connector{ flex:0 0 22px; display:flex; align-items:center; justify-content:center; color:var(--navy); }

/* ---- 結論行（黒ラベル＋矢印＋タイトル＋説明） ---- */
.conclusion-row{ display:flex; align-items:stretch; gap:0; margin:16px 0; background:#fff; border:1.5px solid #222; border-radius:6px; overflow:hidden; flex-wrap:wrap; }
.conclusion-row .cr-label{ background:#222; color:#fff; font-weight:800; font-size:15px; padding:14px 22px; flex:0 0 auto; display:flex; align-items:center; }
.conclusion-row .cr-arrow{ font-size:20px; color:#222; padding:0 8px; flex:0 0 auto; display:flex; align-items:center; }
.conclusion-row .cr-title{ font-weight:800; font-size:15px; color:var(--navy); padding:14px 16px; flex:0 0 auto; white-space:nowrap; display:flex; align-items:center; }
.conclusion-row .cr-desc{ font-size:11.5px; color:#333; padding:14px 18px; line-height:1.7; border-left:1px solid #ddd; flex:1 1 220px; display:flex; align-items:center; }

@media (max-width:720px){
  .tech-cards{ grid-template-columns:1fr; }
  .phase-row{ flex-direction:column; }
  .phase-connector{ transform:rotate(90deg); padding:2px 0; }
  .conclusion-row .cr-desc{ border-left:none; border-top:1px solid #ddd; }
}

/* ================================================================
   DX01-07で登場する追加コンポーネント
   ================================================================ */

/* ---- 3列カード（矢印つなぎ：DX/ビッグデータ/データサイエンス等） ---- */
.trio-cards{ display:flex; align-items:stretch; gap:0; margin:14px 0; }
.trio-cards .trio-col{ flex:1; display:flex; flex-direction:column; border:1.5px solid var(--navy); min-width:0; }
.trio-cards .trio-head{ background:var(--navy); color:#fff; text-align:center; padding:12px 8px; }
.trio-cards .trio-head .trio-title{ font-size:14.5px; font-weight:800; }
.trio-cards .trio-head .trio-sub{ font-size:10px; color:#c3dbf0; margin-top:2px; }
.trio-cards .trio-body{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:16px 10px; text-align:center; }
.trio-cards .trio-body p{ font-size:11.5px; color:#333; line-height:1.6; margin:0 0 12px; }
.trio-cards .trio-body svg{ color:var(--navy); }
.trio-connector{ flex:0 0 24px; display:flex; align-items:center; justify-content:center; color:var(--navy); }

/* ---- 3V カード（Volume/Variety/Velocity 等） ---- */
.threev-cards{ display:flex; gap:14px; margin:14px 0; flex-wrap:wrap; }
.threev-cards .tv-card{ flex:1 1 190px; background:var(--pale-blue); border-radius:8px; padding:18px 14px; text-align:center; }
.threev-cards .tv-title{ font-size:18px; font-weight:800; color:var(--navy); }
.threev-cards .tv-sub{ font-size:10px; color:var(--muted); margin-bottom:10px; }
.threev-cards .tv-desc{ font-size:12px; color:#222; font-weight:700; line-height:1.6; margin-bottom:12px; min-height:56px; display:flex; align-items:center; justify-content:center; }
.threev-cards .tv-example-tag{ display:block; background:var(--navy); color:#fff; font-size:10.5px; font-weight:700; padding:5px 0; border-radius:4px; margin-bottom:8px; }
.threev-cards .tv-example-text{ font-size:10.5px; color:#333; line-height:1.6; }

/* ---- ステップフローの下につく注釈バー ---- */
.step-flow-caption{ background:#e8e8e8; text-align:center; font-size:12px; font-weight:700; color:#333; padding:9px; margin-top:2px; border-radius:4px; }

@media (max-width:720px){
  .trio-cards{ flex-direction:column; }
  .trio-connector{ transform:rotate(90deg); padding:4px 0; }
}

/* ================================================================
   DX01-08で登場する追加コンポーネント
   ================================================================ */

/* ---- コンバージェンス・フロー（複数入力→中央→結論） ---- */
.converge-flow{ margin:14px 0; }
.converge-flow .cf-inputs{ display:flex; gap:2px; }
.converge-flow .cf-input{ flex:1; background:var(--pale-blue); text-align:center; padding:10px 8px; min-width:0; }
.converge-flow .cf-input-head{ background:var(--navy); color:#fff; font-weight:700; font-size:11.5px; padding:9px 4px; margin:-10px -8px 8px; }
.converge-flow .cf-input p{ font-size:10.5px; color:#333; margin:0; line-height:1.5; }
.converge-flow .cf-arrow-mid{ text-align:center; color:var(--navy); padding:4px 0; }
.converge-flow .cf-center{ background:var(--navy); color:#fff; text-align:center; font-weight:800; font-size:14px; padding:10px; border-radius:4px; }
.converge-flow .cf-result{ background:var(--navy); color:#fff; text-align:center; font-weight:800; font-size:13.5px; padding:10px; border-radius:4px 4px 0 0; }
.converge-flow .cf-result-body{ background:var(--pale-blue); padding:12px 16px; border-radius:0 0 4px 4px; text-align:center; font-size:11.5px; color:#333; line-height:1.7; }

/* ---- 学習の3ステップ（イラスト付き） ---- */
.learn-steps{ display:flex; align-items:stretch; gap:0; margin:14px 0; }
.learn-steps .ls-col{ flex:1; display:flex; flex-direction:column; min-width:0; }
.learn-steps .ls-tag{ text-align:center; font-size:11px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.learn-steps .ls-tag b{ font-size:15px; }
.learn-steps .ls-head{ background:var(--navy); color:#fff; text-align:center; padding:10px 6px; border-radius:6px 6px 0 0; font-weight:800; font-size:12.5px; }
.learn-steps .ls-body{ background:var(--pale-blue); flex:1; padding:14px 8px; text-align:center; border-radius:0 0 6px 6px; }
.learn-steps .ls-illust{ margin:6px 0 10px; color:var(--navy); display:flex; align-items:center; justify-content:center; gap:6px; }
.learn-steps .ls-desc{ font-size:10px; color:#333; line-height:1.6; }
.learn-connector{ flex:0 0 20px; display:flex; align-items:center; justify-content:center; color:var(--navy); }

/* ---- 遷移ボックス（事後対処→事前予測 等） ---- */
.transition-box{ display:flex; gap:20px; align-items:center; background:var(--pale-blue); border-radius:10px; padding:20px; margin:16px 0; flex-wrap:wrap; }
.transition-box .tb-stack{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; }
.transition-box .tb-stack .tb-box{ background:#fff; border:1.5px solid var(--navy); border-radius:6px; padding:8px 22px; font-size:12px; font-weight:700; color:#222; white-space:nowrap; }
.transition-box .tb-main{ flex:1 1 240px; }
.transition-box .tb-main h4{ font-size:14px; font-weight:800; color:var(--navy); margin:0 0 8px; }
.transition-box .tb-main p{ font-size:11.5px; color:#333; line-height:1.7; margin:0; }

/* ---- 役割カード（5列など、任意数のアイコン+役割カード） ---- */
.role-cards{ display:flex; gap:10px; margin:14px 0; flex-wrap:wrap; }
.role-cards .role-card{ flex:1 1 120px; border-radius:6px; overflow:hidden; }
.role-cards .role-head{ background:var(--navy); color:#fff; text-align:center; padding:12px 6px; }
.role-cards .role-head svg{ margin-bottom:4px; }
.role-cards .role-head .role-title{ font-size:13px; font-weight:800; display:block; }
.role-cards .role-head .role-sub{ font-size:9.5px; color:#c3dbf0; display:block; margin-top:1px; }
.role-cards .role-body{ background:var(--pale-blue); padding:12px 8px; text-align:center; font-size:10.5px; color:#333; line-height:1.6; }

@media (max-width:720px){
  .converge-flow .cf-inputs{ flex-direction:column; }
  .learn-steps{ flex-direction:column; }
  .learn-connector{ transform:rotate(90deg); padding:4px 0; }
  .role-cards{ flex-direction:column; }
}

/* ================================================================
   DX01-09で登場する追加コンポーネント
   ================================================================ */

/* ---- ツール比較カード（VBA/RPA等） ---- */
.tool-cards{ display:flex; gap:16px; margin:14px 0; flex-wrap:wrap; }
.tool-cards .tool-card{ flex:1 1 260px; border-radius:8px; overflow:hidden; }
.tool-cards .tool-head{ background:var(--navy); color:#fff; text-align:center; padding:14px 12px; }
.tool-cards .tool-head .tool-name{ font-size:18px; font-weight:800; }
.tool-cards .tool-head .tool-en{ font-size:10px; color:#c3dbf0; margin:2px 0; }
.tool-cards .tool-head .tool-nick{ font-size:12.5px; font-weight:700; margin-top:4px; }
.tool-cards .tool-body{ background:var(--pale-blue); padding:16px; }
.tool-cards .tool-illust{ text-align:center; color:var(--navy); margin-bottom:10px; }
.tool-cards .tool-section-label{ display:inline-block; background:var(--navy-dark); color:#fff; font-size:10.5px; font-weight:700; padding:3px 12px; border-radius:4px; margin:8px 0 4px; }
.tool-cards .tool-section-body{ font-size:11.5px; color:#333; line-height:1.7; margin:0 0 8px; }

/* ---- Webページ制作3ステップ（イラスト付き） ---- */
.webstack-cards{ display:flex; gap:14px; margin:14px 0; }
.webstack-cards .ws-col{ flex:1; border-radius:8px; overflow:hidden; min-width:0; }
.webstack-cards .ws-head{ background:var(--navy); color:#fff; text-align:center; padding:12px 8px; }
.webstack-cards .ws-head .ws-step{ font-size:10px; color:#c3dbf0; display:block; }
.webstack-cards .ws-head .ws-name{ font-size:16px; font-weight:800; }
.webstack-cards .ws-head .ws-sub{ font-size:10px; color:#c3dbf0; }
.webstack-cards .ws-body{ background:var(--pale-blue); padding:16px 10px; text-align:center; }
.webstack-cards .ws-illust{ margin-bottom:10px; color:var(--navy); }
.webstack-cards .ws-caption{ font-weight:800; font-size:11.5px; color:#222; border-bottom:1px solid #99b8d8; padding-bottom:8px; margin-bottom:8px; }
.webstack-cards .ws-example{ font-size:10px; color:#333; }
.webstack-cards .ws-example .al-badge{ background:var(--navy-dark); color:#fff; font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:3px; margin-right:6px; }

/* ---- approach-card 用の箇条書き拡張 ---- */
.approach-card .approach-bullets{ margin:0 0 10px; padding:0; list-style:none; font-size:11px; color:#333; line-height:1.7; }
.approach-card .approach-bullets li::before{ content:"■ "; color:var(--navy); font-size:9px; }

@media (max-width:720px){
  .tool-cards{ flex-direction:column; }
  .webstack-cards{ flex-direction:column; }
}

/* ================================================================
   DX01-10で登場する追加コンポーネント
   ================================================================ */

/* ---- 原因行（外部/内部環境の変化） ---- */
.cause-row{ display:flex; align-items:stretch; gap:0; margin:12px 0; border-radius:8px; overflow:hidden; flex-wrap:wrap; }
.cause-row .cause-icon-block{ flex:0 0 150px; background:var(--navy); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:14px 10px; font-size:12px; font-weight:700; gap:6px; }
.cause-row .cause-body{ flex:1 1 260px; background:var(--pale-blue); padding:14px 18px; }
.cause-row .cause-body p.cause-desc{ font-size:12.5px; font-weight:700; color:#222; margin:0 0 8px; }
.cause-row .cause-example{ display:flex; align-items:flex-start; gap:8px; font-size:11px; color:#333; }
.cause-row .cause-example .al-badge{ background:var(--navy-dark); color:#fff; font-size:10px; font-weight:700; padding:2px 10px; border-radius:4px; white-space:nowrap; }

/* ---- 技術要素の放射状まとめ ---- */
.tech-radial{ display:flex; gap:20px; margin:14px 0; flex-wrap:wrap; align-items:center; }
.tech-radial .tr-diagram{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:10px; }
.tech-radial .tr-center{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--navy); font-size:11px; font-weight:700; }
.tech-radial .tr-satellites{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; max-width:220px; }
.tech-radial .tr-sat{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--navy); font-size:10px; font-weight:700; }
.tech-radial .tr-list{ flex:1 1 260px; display:flex; flex-direction:column; gap:2px; }
.tech-radial .tr-list .tr-row{ display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid #e0e0e0; }
.tech-radial .tr-list .tr-row .tr-icon{ flex:0 0 auto; color:var(--navy); }
.tech-radial .tr-list .tr-row .tr-label{ flex:0 0 110px; font-size:11.5px; font-weight:800; color:var(--navy); }
.tech-radial .tr-list .tr-row .tr-label small{ display:block; font-weight:600; font-size:9.5px; color:var(--muted); }
.tech-radial .tr-list .tr-row .tr-desc{ flex:1 1 140px; font-size:11px; color:#333; line-height:1.5; }

/* ---- 心構えその1/2/3 ---- */
.mindset-row{ background:var(--pale-blue); border-radius:8px; padding:16px 20px; margin-bottom:12px; }
.mindset-row .mr-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.mindset-row .mr-pill{ background:var(--navy); color:#fff; font-size:11px; font-weight:700; padding:4px 12px; border-radius:999px; white-space:nowrap; }
.mindset-row .mr-num{ font-size:22px; font-weight:800; color:var(--navy); }
.mindset-row .mr-title{ font-size:16px; font-weight:800; color:#222; }
.mindset-row .mr-body{ display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.mindset-row .mr-icon{ flex:0 0 auto; color:var(--navy); }
.mindset-row .mr-text{ flex:1 1 200px; }
.mindset-row .mr-text p{ margin:0 0 6px; font-size:12px; line-height:1.7; color:#333; }
.mindset-row .mr-text p.mr-lead{ font-weight:700; color:#222; }

/* ---- 課題提起内の番号付きリスト ---- */
.output-box ol{ margin:10px 0 0; padding-left:20px; }
.output-box ol li{ font-size:14px; line-height:1.85; color:#333; margin-bottom:4px; }

/* ---- 自由メモページ（ワークブック末尾の白紙メモ欄） ---- */
.free-memo-page{ padding:10px 0 0; }
.free-memo-page h3{ font-size:14px; font-weight:800; color:var(--navy); margin:0 0 10px; }
.free-memo-page textarea{
  width:100%; min-height:520px; border:1.5px dashed #b8b8b8; border-radius:8px;
  background:repeating-linear-gradient(#fafafa, #fafafa 27px, #e2e2e2 28px);
  padding:14px 16px; font-family:inherit; font-size:13.5px; line-height:28px; color:#333;
  resize:vertical; box-sizing:border-box;
}

@media (max-width:720px){
  .cause-row{ flex-direction:column; }
  .cause-row .cause-icon-block{ flex-direction:row; justify-content:center; }
}

/* ============================================================
   講座（program）切り替えタブ ＋ 講座ごとのテーマカラー
   --accent を .program-pane / .program-tab にインラインで差し込み、
   青一色だった一覧を講座別に色分けする
   ============================================================ */
.program-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 26px;
}
.program-tab{
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  background:#fff;
  border:1.5px solid #e0e0e0;
  border-radius:999px;
  padding:9px 20px;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.program-tab:hover{
  color:var(--accent,var(--navy));
  border-color:var(--accent,var(--navy));
}
.program-tab.is-active{
  color:#fff;
  background:var(--accent,var(--navy));
  border-color:var(--accent,var(--navy));
  box-shadow:0 3px 10px rgba(0,0,0,0.14);
}

.program-head{
  margin:0 0 6px;
}
.program-head .program-name{
  font-size:19px;
  font-weight:800;
  color:var(--accent,var(--navy));
  margin:0 0 6px;
}
.program-head p.catch{
  font-size:13px;
  color:var(--muted);
  margin:0;
  line-height:1.7;
}

.program-pane .course-wrap h2,
.program-pane h2{
  color:var(--accent,var(--navy));
  border-bottom-color:var(--accent,var(--navy));
}
.program-pane h2 .module-no{
  background:var(--accent,var(--navy));
}
.program-pane .lesson-card{
  border-left-color:var(--accent,var(--navy));
}
.program-pane .lesson-card .lesson-code{
  background:var(--accent,var(--navy));
}
.program-pane .lesson-card.disabled{
  border-left-color:#bbb;
}
.program-pane .lesson-card.disabled .lesson-code{
  background:#bbb;
}
.program-pane .lesson-card.completed{ border-left-color:#1b7a43; }
.program-pane .lesson-card.completed .lesson-code{ background:#1b7a43; }

.module-block h2 .module-flag{
  margin-left:auto;
  font-size:11px;
  font-weight:700;
  color:#8a8a8a;
  background:#ececec;
  border-radius:999px;
  padding:3px 10px;
}
.module-summary{
  font-size:12.5px;
  color:var(--muted);
  margin:-6px 0 12px;
}

@media (max-width:600px){
  .program-tab{ padding:8px 15px; font-size:12.5px; }
  .program-head .program-name{ font-size:17px; }
  .lesson-card{ flex-wrap:wrap; gap:10px 12px; }
  .lesson-card .lesson-title{ flex:1 1 100%; order:3; }
}

/* ============================================================
   管理画面：講座（program）単位でまとめたモジュール選択
   ============================================================ */
.module-check-grid{ flex-direction:column; align-items:stretch; }
.module-group{
  border:1.5px solid #e6e6e6;
  border-left:4px solid var(--accent,var(--navy));
  border-radius:9px;
  padding:10px 12px 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
}
.module-group .module-group-head{
  flex:1 1 100%;
  background:transparent;
  padding:0 0 4px;
  font-size:13px;
  color:var(--accent,var(--navy));
}
.module-group .module-group-note{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  background:#f0f0f0;
  border-radius:999px;
  padding:2px 9px;
}
.module-group input{ accent-color:var(--accent,var(--navy)); }

.module-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding:5px 0;
  border-top:1px solid #f0f0f0;
}
.module-row:first-child{ border-top:0; }
.module-row-name{
  flex:0 0 128px;
  font-size:11.5px;
  font-weight:800;
  color:var(--accent,var(--navy));
  display:flex;
  align-items:center;
  gap:6px;
}
.module-row-name small{
  font-weight:700;
  color:var(--muted);
  background:#f2f2f2;
  border-radius:999px;
  padding:1px 7px;
}
.module-row label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
}
.module-row input{ accent-color:var(--accent,var(--navy)); }
.module-row-all{
  margin-left:auto;
  font-size:11px;
  border:1.5px solid var(--accent,var(--navy));
  color:var(--accent,var(--navy));
  background:#fff;
}

/* 章立てのある講座（SNSマーケなど）の章見出し */
.chapter-head{
  font-size:12px;
  font-weight:800;
  color:var(--accent,var(--navy));
  letter-spacing:.04em;
  margin:16px 0 2px;
  padding-left:2px;
}
.lesson-list > .chapter-head:first-child{ margin-top:2px; }

/* ============================================================
   管理画面：講座管理タブ
   ============================================================ */
.panel-note{
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin:-4px 0 14px;
}
.panel-note code{
  background:#f2f2f2;
  border-radius:4px;
  padding:1px 5px;
  font-size:11.5px;
}

.catalog-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.catalog-toolbar .program-tabs{ margin:0; }
.filter-check{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:700;
  color:#555;
  cursor:pointer;
  white-space:nowrap;
}

.stat-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.stat{
  flex:1 1 110px;
  background:#f7f8fa;
  border-radius:9px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.stat b{ font-size:21px; font-weight:800; color:var(--navy); line-height:1.2; }
.stat span{ font-size:11.5px; font-weight:700; color:var(--muted); }

.module-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:6px;
}
.module-panel-head h2{ margin:0; }
.module-panel-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.module-panel-actions .muted{ font-size:11.5px; font-weight:700; color:var(--muted); }

.catalog-table td.num{ white-space:nowrap; color:#777; font-size:12px; }
.catalog-table code{ font-size:11.5px; font-weight:700; color:#555; }
.catalog-table .row-note{
  display:block;
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  margin-top:2px;
}

.flag{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  border-radius:999px;
  padding:2px 9px;
  white-space:nowrap;
}
.flag.ok{ color:#1b7a43; background:#e3f6ea; }
.flag.ng{ color:#8a8a8a; background:#f0f0f0; }

/* 公開トグル */
.switch{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11.5px;
  font-weight:700;
  color:#555;
  cursor:pointer;
  white-space:nowrap;
}
.switch input{ accent-color:#1b7a43; width:15px; height:15px; cursor:pointer; }
.switch.is-locked{ opacity:.45; cursor:not-allowed; }
.switch.is-locked input{ cursor:not-allowed; }

.program-tab small{
  font-weight:700;
  opacity:.75;
  margin-left:4px;
  font-size:11px;
}

@media (max-width:700px){
  .catalog-table thead{ display:none; }
  .catalog-table tr{ display:block; border-bottom:1px solid #eee; padding:8px 0; }
  .catalog-table td{ display:inline-block; border:0; padding:3px 8px 3px 0; }
}

/* 受講者側：講座の進捗バー */
.progress-line{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
  max-width:520px;
}
.progress-bar{
  flex:1;
  height:7px;
  background:#e4e4e4;
  border-radius:999px;
  overflow:hidden;
}
.progress-bar span{
  display:block;
  height:100%;
  background:var(--accent,var(--navy));
  border-radius:999px;
  transition:width .4s ease;
}
.progress-text{
  flex:0 0 auto;
  font-size:12px;
  font-weight:700;
  color:var(--accent,var(--navy));
  white-space:nowrap;
}
.lesson-card .next-badge{
  background:var(--coral);
  border-radius:999px;
  padding:4px 12px;
}

/* モジュールコードのバッジ（コース一覧・管理画面 共通のベース） */
.module-no{
  display:inline-block;
  background:var(--accent,var(--navy));
  color:#fff;
  font-size:12px;
  font-weight:800;
  border-radius:6px;
  padding:2px 8px;
  margin-right:10px;
  vertical-align:middle;
}
.module-panel-head h2{
  display:flex;
  align-items:center;
  gap:0;
}

/* 狭い画面でヘッダーのリンクが折り返さないようにする */
@media (max-width:600px){
  .site-header{ padding:9px 12px; gap:8px; }
  .site-header .brand-text{ font-size:13px; }
  .site-header .brand-text small{ font-size:9.5px; }
  .site-header nav{ display:flex; align-items:center; gap:8px; }
  .site-header nav a,
  .site-header nav .logout-link{ white-space:nowrap; font-size:11.5px; padding:5px 9px; }
}

/* ============================================================
   チャプター送り（動画の下に出る目次）
   インライン埋め込みのページでは押せるリンク、
   iframe埋め込みのページでは読むだけの目次になる
   ============================================================ */
.chapter-nav{
  margin-top:10px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 1px 6px rgba(0,0,0,0.06);
  overflow:hidden;
}
.chapter-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  font-family:inherit;
  font-size:12.5px;
  font-weight:800;
  color:var(--navy);
  background:#f7f8fa;
  border:0;
  padding:10px 14px;
  cursor:pointer;
  text-align:left;
}
.chapter-toggle svg{ flex:0 0 auto; }
.chapter-toggle[aria-expanded="false"] + .chapter-list{ display:none; }

.chapter-nav{ flex:0 1 auto; min-height:0; }
.chapter-list{
  list-style:none;
  margin:0;
  padding:6px 0;
  max-height:clamp(110px, 30vh, 300px);   /* 画面が低いときは縮める。中は自前でスクロール */
  overflow-y:auto;
}
.chapter-list li{ margin:0; }
.chapter-list a{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:7px 14px;
  text-decoration:none;
  color:#444;
  font-size:12.5px;
  line-height:1.5;
  border-left:3px solid transparent;
}
.chapter-list .chapter-time{
  flex:0 0 44px;
  font-size:11.5px;
  font-weight:800;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.chapter-list .chapter-label{ flex:1; }

/* 押せる状態（インライン埋め込みのページ） */
.chapter-list.is-seekable a{ cursor:pointer; }
.chapter-list.is-seekable a:hover{ background:var(--pale-blue-2); }
.chapter-list.is-seekable a.is-current{
  background:var(--pale-blue);
  border-left-color:var(--cyan);
  font-weight:700;
  color:var(--navy);
}
/* 目次としてだけ出す状態（iframe埋め込みのページ） */
.chapter-list.is-static a{ cursor:default; pointer-events:none; color:#666; }

@media (max-width:900px){
  .chapter-list{ max-height:none; }
}

/* ============================================================
   インライン埋め込みプレイヤーのサイズ調整
   ------------------------------------------------------------
   プレイヤー自身のCSSに
       .logica-player { width:177.77vh; height:56.25vw }
   というビューポート基準の指定が !important で入っており、
   そのままだと枠を無視して画面いっぱいに広がってしまう。
   （単独ページで全画面表示する前提の指定のため）
   .video-frame の中にいるときだけ、枠にぴったり収める。
   ============================================================ */
.video-col .video-frame > .logica-player,
.video-col .video-frame .lgcp-tech{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
}
.video-col .video-frame video.lgcp-tech{
  object-fit:contain;      /* 万一16:9でない枠でも映像が歪まないように */
}

/* ============================================================
   映像とページの連動
     soon … 次のページに切り替わる少し前（予告・カウントダウン）
     now  … すでに次のページの内容に入っている
   自動ではページを動かさない（記入中に変わると困るため）
   ============================================================ */
.nav-buttons .due-badge{
  display:none;
  align-items:center;
  gap:7px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  border:0;
  border-radius:999px;
  padding:8px 16px;
  cursor:pointer;
  white-space:nowrap;
  animation:duefade .25s ease;
}
.nav-buttons .due-badge::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:currentColor;
}

/* 予告：まだ余裕がある状態。落ち着いた見た目にする */
.nav-buttons .due-badge.is-soon{
  display:inline-flex;
  color:#9a6400;
  background:#fff4d6;
  box-shadow:inset 0 0 0 1.5px #f0cd80;
}
.nav-buttons .due-badge.is-soon::before{ animation:duepulse 1.6s ease-in-out infinite; }

/* 到達：進んでほしい状態。はっきり目立たせる */
.nav-buttons .due-badge.is-now{
  display:inline-flex;
  color:#fff;
  background:var(--coral);
  box-shadow:0 2px 10px rgba(243,110,147,0.4);
}
.nav-buttons .due-badge.is-now::before{ animation:duepulse 1s ease-in-out infinite; }

@keyframes duefade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
@keyframes duepulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

.nav-buttons button#nextBtn.is-due{
  background:var(--coral);
  color:#fff;
  box-shadow:0 0 0 3px rgba(243,110,147,0.25);
}
.nav-buttons button#nextBtn.is-due:hover:not(:disabled){
  background:#e05a80;
  color:#fff;
}

@media (max-width:600px){
  .nav-buttons .due-badge{ font-size:11px; padding:6px 11px; }
  .nav-buttons{ padding:10px 12px; }
}

/* ============================================================
   レッスン完了モーダル
   社会人向けなので、派手な演出はせずチェックの描画と
   静かなリングの広がりで区切りを示す程度に留める
   ============================================================ */
.complete-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(20,24,40,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .24s ease;
}
.complete-overlay.is-open{ opacity:1; }

.complete-card{
  position:relative;
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,0.3);
  padding:38px 38px 30px;
  width:min(440px, 100%);
  text-align:center;
  transform:translateY(14px) scale(.97);
  transition:transform .26s cubic-bezier(.2,.9,.3,1.2);
}
.complete-overlay.is-open .complete-card{ transform:none; }

.cm-close{
  position:absolute;
  top:10px; right:12px;
  border:0;
  background:transparent;
  font-size:22px;
  line-height:1;
  color:#bbb;
  cursor:pointer;
  padding:6px 9px;
  border-radius:8px;
}
.cm-close:hover{ color:#666; background:#f2f2f2; }

.cm-mark{
  display:flex;
  justify-content:center;
  margin-bottom:16px;
  position:relative;
}
.cm-mark::after{                       /* 静かに広がるリング */
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:72px; height:72px;
  margin:-36px 0 0 -36px;
  border-radius:50%;
  border:2px solid var(--cyan);
  opacity:0;
}
.complete-overlay.is-open .cm-mark::after{ animation:cmring 1.1s ease-out .25s; }
@keyframes cmring{
  0%{ transform:scale(.8); opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}

.cm-ring{ stroke:var(--pale-blue-2); }
.cm-check{
  stroke:var(--cyan);
  stroke-dasharray:52;
  stroke-dashoffset:52;
}
.complete-overlay.is-open .cm-ring{
  stroke:var(--cyan);
  stroke-dasharray:201;
  stroke-dashoffset:201;
  animation:cmcircle .55s ease-out .1s forwards;
}
.complete-overlay.is-open .cm-check{ animation:cmcheck .35s ease-out .5s forwards; }
@keyframes cmcircle{ to{ stroke-dashoffset:0; } }
@keyframes cmcheck{ to{ stroke-dashoffset:0; } }

.cm-lead{
  font-size:13px;
  font-weight:700;
  color:var(--cyan);
  letter-spacing:.08em;
  margin:0 0 6px;
}
.cm-title{
  font-size:19px;
  font-weight:800;
  color:var(--navy);
  margin:0 0 6px;
  line-height:1.5;
}
.cm-code{
  font-size:12.5px;
  color:var(--muted);
  margin:0 0 26px;
}

.cm-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cm-btn{
  display:block;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  border-radius:10px;
  padding:13px 18px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cm-btn small{
  display:block;
  font-size:11.5px;
  font-weight:500;
  opacity:.8;
  margin-top:3px;
}
.cm-btn-primary{
  background:var(--navy);
  color:#fff;
  box-shadow:0 4px 14px rgba(0, 52, 118,0.3);
}
.cm-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0, 52, 118,0.36); }
.cm-btn-ghost{
  background:#f4f5f8;
  color:var(--navy);
}
.cm-btn-ghost:hover{ background:#e8eaf2; }

@media (max-width:600px){
  .complete-card{ padding:30px 22px 24px; }
  .cm-title{ font-size:17px; }
}
@media (prefers-reduced-motion: reduce){
  .complete-overlay, .complete-card{ transition:none; }
  .complete-overlay.is-open .cm-ring,
  .complete-overlay.is-open .cm-check{ animation:none; stroke-dashoffset:0; }
  .complete-overlay.is-open .cm-mark::after{ animation:none; }
}

/* ============================================================
   受講前の扉（テキスト列の中だけに出す）
   左の映像はサムネのまま見えている状態で、右だけが扉になる。
   「開始する」で1ページ目の表示と再生が同時に始まる
   ============================================================ */
.text-col{ position:relative; }

.lesson-cover{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:linear-gradient(150deg,var(--navy-black) 0%,var(--navy) 52%,var(--blue) 100%);
  transition:opacity .34s ease;
}
.lesson-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(60deg, rgba(255,255,255,0.05) 25%, transparent 25.5%, transparent 74.5%, rgba(255,255,255,0.05) 75%),
    linear-gradient(-60deg, rgba(255,255,255,0.05) 25%, transparent 25.5%, transparent 74.5%, rgba(255,255,255,0.05) 75%);
  background-size:58px 100px;
  pointer-events:none;
}
.lesson-cover.is-closing{ opacity:0; }

.cover-card{
  position:relative;
  z-index:1;
  text-align:center;
  color:#fff;
  max-width:420px;
  animation:coverin .45s cubic-bezier(.2,.9,.3,1.05);
}
@keyframes coverin{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.cover-eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--cyan-light);
  margin:0 0 14px;
}
.cover-title{
  font-size:clamp(21px, 2.4vw, 28px);
  font-weight:800;
  line-height:1.5;
  margin:0 0 18px;
}
.cover-rule{
  width:64px;
  height:3px;
  border-radius:2px;
  background:var(--cyan-light);
  margin:0 auto 22px;
}

.cover-meta{
  display:flex;
  justify-content:center;
  gap:14px;
  margin:0 0 30px;
}
.cover-meta > div{
  background:rgba(255,255,255,0.1);
  border-radius:9px;
  padding:9px 16px;
  min-width:104px;
}
.cover-meta dt{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--cyan-light);
  margin:0 0 3px;
}
.cover-meta dd{
  font-size:14px;
  font-weight:800;
  margin:0;
  font-variant-numeric:tabular-nums;
}

.cover-start{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  color:var(--navy);
  background:#fff;
  border:0;
  border-radius:999px;
  padding:14px 40px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,0.3);
  transition:transform .16s ease, box-shadow .16s ease;
}
.cover-start:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,0.36); }
.cover-start:disabled{ opacity:.6; cursor:default; }

.cover-note{
  font-size:11.5px;
  color:#a8cce8;
  margin:16px 0 0;
  line-height:1.7;
}

@media (max-width:980px){
  .cover-meta{ gap:10px; }
  .cover-meta > div{ min-width:92px; padding:8px 12px; }
}
@media (prefers-reduced-motion: reduce){
  .cover-card{ animation:none; }
  .lesson-cover{ transition:none; }
}


/* ============================================================
   コース選択（講座を3つ並べてえらぶ画面）
   契約のある講座は開ける。無い講座はグレーで「未契約」と示す
   （何が用意されているかは見せたいので隠さない）
   ============================================================ */
.select-head{
  font-size:15px;
  font-weight:800;
  color:var(--navy);
  margin:0 0 18px;
  letter-spacing:.02em;
}

.program-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  align-items:stretch;
}

.program-card{
  display:flex;
  flex-direction:column;
  text-align:left;
  font-family:inherit;
  background:#fff;
  border:0;
  border-radius:14px;
  overflow:hidden;
  padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,0.07);
  transition:transform .2s ease, box-shadow .2s ease;
}
button.program-card{ cursor:pointer; }
button.program-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(0,0,0,0.16);
}
button.program-card:focus-visible{
  outline:3px solid var(--accent,var(--navy));
  outline-offset:3px;
}

.pc-media{
  position:relative;
  aspect-ratio:16 / 9;
  background:var(--accent,var(--navy));
  overflow:hidden;
}
.pc-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
button.program-card:hover .pc-media img{ transform:scale(1.05); }
.pc-veil{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--accent,#293D9B) 72%, transparent) 100%);
}
@supports not (background: color-mix(in srgb, red, blue)){
  .pc-veil{ background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55) 100%); }
}

.pc-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:16px 18px 18px;
  border-top:3px solid var(--accent,var(--navy));
}
.pc-name{
  font-size:15px;
  font-weight:800;
  color:var(--navy);
  margin:0 0 8px;
  line-height:1.5;
}
.pc-copy{
  flex:1;
  font-size:12.5px;
  color:#666;
  line-height:1.75;
  margin:0 0 16px;
}

.pc-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.pc-progress{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.pc-progress .progress-bar{ flex:1; height:6px; }
.pc-progress-text{
  flex:0 0 auto;
  font-size:11.5px;
  font-weight:700;
  color:var(--accent,var(--navy));
  white-space:nowrap;
}
.pc-note{ font-size:11.5px; color:var(--muted); }
.pc-go{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:12.5px;
  font-weight:800;
  color:var(--accent,var(--navy));
  white-space:nowrap;
}
.pc-lock{
  font-size:11.5px;
  font-weight:700;
  color:#8a8a8a;
  background:#ececec;
  border-radius:999px;
  padding:4px 12px;
}
.pc-meta{
  font-size:11px;
  color:#aaa;
  margin:0;
  padding-top:10px;
  border-top:1px solid #f0f0f0;
}

/* 未契約の講座 */
.program-card.is-locked{ box-shadow:none; background:#fafafa; }
.program-card.is-locked .pc-media img{ filter:grayscale(1); opacity:.5; }
.program-card.is-locked .pc-veil{ background:linear-gradient(180deg, transparent 30%, rgba(90,90,90,0.5) 100%); }
.program-card.is-locked .pc-body{ border-top-color:#d5d5d5; }
.program-card.is-locked .pc-name{ color:#8a8a8a; }
.program-card.is-locked .pc-copy{ color:#a5a5a5; }

/* 回一覧へ入ったときの戻り導線 */
.back-to-select{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  color:var(--muted);
  background:transparent;
  border:0;
  padding:0 0 16px;
  cursor:pointer;
}
.back-to-select:hover{ color:var(--navy); }

@media (max-width:900px){
  .program-grid{ grid-template-columns:1fr; gap:14px; }
  .pc-media{ aspect-ratio:21 / 9; }
}

/* ============================================================
   ログイン画面
   左：ブランド面（何が学べるかを伝える）
   右：フォーム
   ============================================================ */
.auth-body{ margin:0; background:var(--page-bg); }

.auth-split{
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-columns:1.05fr 1fr;
}

/* ---- 左：ブランド面 ---- */
.auth-brand{
  position:relative;
  display:flex;
  align-items:center;
  padding:56px 6vw;
  color:#fff;
  background:linear-gradient(150deg,var(--navy-black) 0%,var(--navy) 48%,var(--blue) 82%,var(--cyan) 130%);
  overflow:hidden;
}
.auth-brand::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(60deg, rgba(255,255,255,0.05) 25%, transparent 25.5%, transparent 74.5%, rgba(255,255,255,0.05) 75%),
    linear-gradient(-60deg, rgba(255,255,255,0.05) 25%, transparent 25.5%, transparent 74.5%, rgba(255,255,255,0.05) 75%);
  background-size:70px 120px;
  pointer-events:none;
}
.auth-brand-inner{ position:relative; z-index:1; max-width:460px; }

.auth-logo{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:800;
  font-size:15px;
  margin-bottom:48px;
}
.auth-logo svg{ color:var(--cyan-light); flex:0 0 auto; }
.auth-logo small{
  display:block;
  font-size:9.5px;
  font-weight:500;
  color:#a8cce8;
  letter-spacing:.02em;
}

.auth-headline{
  font-size:clamp(26px, 3vw, 38px);
  font-weight:800;
  line-height:1.55;
  letter-spacing:.01em;
  margin:0 0 20px;
}
.auth-sub{
  font-size:13.5px;
  line-height:2;
  color:#c3dbf0;
  margin:0 0 40px;
}

.auth-points{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.auth-points li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.16);
}
.ap-num{
  flex:0 0 auto;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--cyan-light);
  padding-top:2px;
}
.ap-body{ font-size:12.5px; color:#bcd7ee; line-height:1.8; }
.ap-body b{
  display:block;
  font-size:13.5px;
  font-weight:800;
  color:#fff;
  margin-bottom:1px;
}

/* ---- 右：フォーム ---- */
.auth-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 5vw;
  background:#fff;
}
.auth-card{ width:100%; max-width:380px; }

.auth-eyebrow{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--cyan);
  margin:0 0 10px;
}
.auth-title{
  font-size:25px;
  font-weight:800;
  color:var(--navy);
  margin:0 0 10px;
}
.auth-lead{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.9;
  margin:0 0 30px;
}

.auth-card .form-row{ margin-bottom:18px; }
.auth-card .form-row label{ font-size:12px; color:#555; }
.auth-card .form-row input{
  padding:12px 14px;
  border-radius:9px;
  border-color:#dcdfe6;
  background:#fbfbfd;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-card .form-row input:focus{
  border-color:var(--cyan);
  background:#fff;
  box-shadow:0 0 0 3px rgba(13,138,213,0.14);
}
.auth-card .form-row input::placeholder{ color:#c2c6d0; }

.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:62px !important; }
.pw-toggle{
  position:absolute;
  top:50%; right:8px;
  transform:translateY(-50%);
  font-family:inherit;
  font-size:11.5px;
  font-weight:700;
  color:var(--muted);
  background:transparent;
  border:0;
  padding:6px 9px;
  border-radius:6px;
  cursor:pointer;
}
.pw-toggle:hover{ color:var(--navy); background:#f0f1f5; }

.auth-submit{
  margin-top:6px;
  padding:14px 20px;
  font-size:15px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0, 52, 118,0.26);
  transition:transform .15s ease, box-shadow .15s ease;
}
.auth-submit:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0, 52, 118,0.32); }

.auth-foot{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid #eee;
}
.auth-foot a{
  font-size:12.5px;
  font-weight:700;
  color:var(--blue);
  text-decoration:none;
}
.auth-foot a:hover{ text-decoration:underline; }
.auth-help{
  font-size:11.5px;
  color:#a5a5a5;
  line-height:1.8;
  margin:10px 0 0;
}

@media (max-width:900px){
  .auth-split{ grid-template-columns:1fr; }
  .auth-brand{ padding:38px 26px 34px; }
  .auth-logo{ margin-bottom:28px; }
  .auth-headline{ font-size:24px; }
  .auth-sub{ margin-bottom:26px; }
  .auth-points{ display:none; }
  .auth-panel{ padding:36px 26px 56px; }
}

/* ============================================================
   ロゴマーク
   マーク自体に濃紺の面があるため、濃紺の背景に直接置くと
   シルエットが背景に溶ける。白いタイルに載せて輪郭を保つ
   ============================================================ */
.brand-mark{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:6px;
  padding:3px;
  flex:0 0 auto;
  line-height:0;
  box-shadow:0 1px 4px rgba(0,0,0,0.18);
}
.brand-mark img{ display:block; width:100%; height:auto; border-radius:2px; }
.site-header .brand-mark{ width:32px; height:32px; }
.hero-band .hero-brand .brand-mark{ width:36px; height:36px; }
.auth-logo .brand-mark{ width:40px; height:40px; border-radius:8px; padding:4px; }

/* ============================================================
   ロゴタイプ（文字入りロゴ）
   暗い背景には白版、白背景には通常版を使う
   ============================================================ */
.site-header .brand{ gap:0; }
.brand-logo{ display:block; width:auto; }
.brand-logo-full{ height:22px; }
.brand-logo-short{ height:26px; display:none; }

.hero-band .hero-brand{ gap:0; }
.hero-band .hero-brand img{ height:30px; width:auto; display:block; }

.auth-logo img{ height:30px; width:auto; display:block; }
.auth-logo{ gap:0; }

.cover-logo{ height:24px; width:auto; display:block; margin:0 auto 20px; opacity:.95; }

.cm-logo{ height:20px; width:auto; display:block; margin:0 auto 22px; opacity:.9; }

@media (max-width:600px){
  .brand-logo-full{ display:none; }
  .brand-logo-short{ display:block; }
  .hero-band .hero-brand img{ height:24px; }
  .auth-logo img{ height:26px; }
  .cover-logo{ height:20px; }
}

/* ============================================================
   回一覧（えらんだ講座の中身）
   60回を一度に並べると5画面分の縦長になるため、
   モジュール単位で折りたたむ。受講中のモジュールだけ開いた状態にする
   ============================================================ */
.program-bar{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  background:#fff;
  border-radius:12px;
  border-left:4px solid var(--accent,var(--navy));
  box-shadow:0 1px 8px rgba(0,0,0,0.07);
  padding:14px 20px;
  margin-bottom:18px;
}
.pb-back{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  background:#f4f5f8;
  border:0;
  border-radius:999px;
  padding:7px 14px 7px 10px;
  cursor:pointer;
  flex:0 0 auto;
  white-space:nowrap;
}
.pb-back:hover{ color:var(--navy); background:#e9ecf3; }

.pb-main{ flex:1 1 260px; min-width:0; }
.pb-name{
  font-size:15px;
  font-weight:800;
  color:var(--accent,var(--navy));
  margin:0 0 8px;
  line-height:1.4;
}
.pb-progress{ display:flex; align-items:center; gap:12px; max-width:420px; }
.pb-progress .progress-bar{ flex:1; height:7px; }
.pb-count{
  flex:0 0 auto;
  font-size:12px;
  font-weight:700;
  color:var(--accent,var(--navy));
  white-space:nowrap;
}
.pb-count b{ font-size:15px; }
.pb-note{
  flex:0 0 auto;
  font-size:11.5px;
  color:#a5a5a5;
  margin:0;
  white-space:nowrap;
}

/* ---- モジュールの折りたたみ ---- */
.module-block{
  background:#fff;
  border-radius:11px;
  box-shadow:0 1px 6px rgba(0,0,0,0.06);
  margin-bottom:10px;
  overflow:hidden;
}
.module-head{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  font-family:inherit;
  text-align:left;
  background:transparent;
  border:0;
  padding:13px 18px;
  cursor:pointer;
}
.module-head:hover{ background:#fafbfd; }
.module-head .module-no{ margin-right:0; flex:0 0 auto; }
.mh-text{ flex:1; min-width:0; }
.mh-name{
  display:block;
  font-size:14px;
  font-weight:800;
  color:var(--accent,var(--navy));
  line-height:1.5;
}
.mh-summary{
  display:block;
  font-size:11.5px;
  color:var(--muted);
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mh-here{
  flex:0 0 auto;
  font-size:10.5px;
  font-weight:800;
  color:#fff;
  background:var(--coral);
  border-radius:999px;
  padding:3px 10px;
  white-space:nowrap;
}
.mh-count{
  flex:0 0 auto;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.mh-lock{
  font-size:11px;
  font-weight:700;
  color:#8a8a8a;
  background:#ececec;
  border-radius:999px;
  padding:3px 10px;
}
.mh-chev{
  flex:0 0 auto;
  color:#bbb;
  transition:transform .22s ease;
}
.module-block.is-open .mh-chev{ transform:rotate(180deg); }

.module-body{ display:none; padding:0 14px 14px; }
.module-block.is-open .module-body{ display:block; }

/* ---- 回のカードを詰める ---- */
.module-body .lesson-card{
  padding:9px 14px;
  border-radius:8px;
  box-shadow:none;
  background:#f8f9fb;
}
.module-body .lesson-card.enabled:hover{ transform:none; background:#eef4fb; box-shadow:0 2px 10px rgba(0,52,118,0.12); }
.module-body .lesson-list{ gap:5px; }
.module-body .lesson-card .lesson-title{ font-size:13.5px; }
.module-body .lesson-card .lesson-code{ flex:0 0 62px; font-size:11.5px; padding:5px 0; }

@media (max-width:700px){
  .program-bar{ gap:10px; padding:12px 14px; }
  .pb-note{ flex:1 1 100%; }
  .mh-summary{ display:none; }
}
.mh-soon{
  font-size:11px;
  font-weight:700;
  color:#8a8a8a;
  background:#f2f2f2;
  border-radius:999px;
  padding:3px 10px;
}
.pb-note small{
  display:block;
  font-size:10.5px;
  color:#bbb;
  margin-top:3px;
}

/* ============================================================
   手順・ステップの一覧／横の流れ
   DX02以降のワークブックで繰り返し出てくる型を共通化したもの。
   （8段階のロードマップ、PDCA、工程図など）
   ============================================================ */
.step-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px; margin:10px 0 4px;
}
.step-item{
  display:flex; gap:8px; align-items:flex-start;
  border-left:3px solid var(--cyan-light); padding:2px 0 2px 9px;
}
.step-item .step-no{
  flex:0 0 auto; width:19px; height:19px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.step-item .step-body{ min-width:0; }
.step-item .step-title{ font-weight:800; font-size:13.5px; color:var(--ink); line-height:1.45; }
.step-item .step-title em{ font-style:normal; color:var(--blue); font-weight:700; font-size:12.5px; }
.step-item .step-desc{ font-size:12px; color:var(--muted); line-height:1.55; margin-top:1px; }
@media (max-width:900px){ .step-grid{ grid-template-columns:1fr; } }

.flow-row{
  display:flex; align-items:center; justify-content:center;
  gap:8px; flex-wrap:wrap; margin:12px 0;
}
.flow-box{
  flex:0 0 auto;                    /* 伸ばさない。中身の幅で置く */
  border:1.5px solid var(--cyan-light); background:var(--pale-blue);
  border-radius:8px; padding:8px 13px; text-align:center; line-height:1.4;
  font-weight:800; font-size:13px; color:var(--navy);
}
.flow-row.is-even .flow-box{ flex:1 1 0; }   /* 等幅で並べたいとき */
.flow-box small{ display:block; font-weight:600; font-size:11px; color:var(--muted); margin-top:2px; }
.flow-arrow{ color:var(--blue); flex:0 0 auto; }

/* 用語をひとこと補足する帯（「PDCAサイクルとは」など） */
.note-strip{
  border-left:3px solid var(--blue); background:#FAFCFE;
  padding:8px 12px; margin:12px 0; border-radius:0 6px 6px 0;
}
.note-strip .note-term{ font-weight:800; color:var(--navy); font-size:13.5px; }
.note-strip p{ margin:3px 0 0; font-size:12.5px; color:var(--ink); line-height:1.6; }

/* 紙面の図をそのまま載せるとき（複雑な図はPDFから切り出して使う） */
.fig-block{ margin:14px 0; text-align:center; }
.fig-block img{ max-width:100%; height:auto; border-radius:6px; }
.fig-block figcaption{
  margin-top:6px; font-size:12px; color:var(--muted); line-height:1.6; text-align:left;
}

/* ゴールに補足を1行添えるとき（.goal-item は flex なので本文をひとまとめにする） */
.goal-flag .flag-body .goal-item .goal-body{ min-width:0; }
.goal-flag .flag-body .goal-item .goal-sub{
  display:block; margin-top:2px;
  font-size:12.5px; font-weight:600; color:#5B6B7C; line-height:1.55;
}

/* 紙面の「※…」のような小さな注記 */
.small-note{ display:block; font-size:12px; color:var(--muted); line-height:1.6; margin:6px 0; }

/* ---- 管理画面：権限が無いときの案内 ---- */
.login-card .deny-lead{
  margin:18px 0 8px; font-size:15px; font-weight:800; color:var(--navy); text-align:center;
}
.login-card .deny-note{
  margin:0 0 18px; font-size:12.5px; color:var(--muted); line-height:1.8; text-align:center;
}
.login-card a.btn-block{ display:block; text-align:center; text-decoration:none; }
.login-card .btn-block + .btn-block{ margin-top:8px; }
.login-notice{
  margin:0 0 14px; padding:9px 12px; border-radius:6px;
  background:#FDF2F5; border:1px solid #F6C9D6; color:#A3324F;
  font-size:12.5px; line-height:1.7; text-align:center;
}

/* ============================================================
   管理画面：未保存の変更バー
   チェックを触った瞬間に保存しない代わりに、画面下に出して確定させる
   ============================================================ */
.pending-bar{
  position:fixed; left:50%; bottom:-90px; transform:translateX(-50%);
  z-index:900; display:flex; align-items:center; gap:18px;
  min-width:min(680px, calc(100vw - 32px)); max-width:calc(100vw - 32px);
  padding:12px 16px; border-radius:12px;
  background:var(--navy); color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,0.28);
  transition:bottom .22s ease; pointer-events:none; opacity:0;
}
.pending-bar.is-open{ bottom:18px; pointer-events:auto; opacity:1; }
.pending-bar .pending-text{ flex:1 1 auto; min-width:0; line-height:1.5; }
.pending-bar .pending-text b{ display:block; font-size:13.5px; }
.pending-bar .pending-text span{
  display:block; font-size:12px; color:#BFD6EC;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pending-bar .pending-actions{ flex:0 0 auto; display:flex; gap:8px; }
.pending-bar .btn{ background:#fff; color:var(--navy); border:none; font-weight:800; }
.pending-bar .btn:hover{ background:#EAF3FB; }
.pending-bar .btn-ghost{ background:transparent; color:#CFE2F3; border:1px solid rgba(255,255,255,.45); }
.pending-bar .btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff; }
.pending-bar .btn:disabled{ opacity:.6; cursor:default; }

/* 変更のある行に印を付ける */
.data-table tr.is-dirty > td{ background:#FFF8E6; }
.data-table tr.is-dirty > td:first-child{ box-shadow:inset 3px 0 0 #E8A33D; }

@media (max-width:640px){
  .pending-bar{ flex-direction:column; align-items:stretch; gap:10px; }
  .pending-bar .pending-actions{ justify-content:flex-end; }
}

/* ============================================================
   管理画面：ダッシュボード
   ============================================================ */
.dash-filter-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.dash-range-label{ margin-top:8px; font-size:12px; color:var(--muted); }

.seg{ display:inline-flex; border:1px solid #D6DEE7; border-radius:8px; overflow:hidden; background:#fff; }
.seg button{
  border:none; background:transparent; padding:7px 13px; font-size:12.5px; font-weight:700;
  color:#5B6B7C; cursor:pointer; border-right:1px solid #E6ECF2;
}
.seg button:last-child{ border-right:none; }
.seg button:hover{ background:#F2F7FC; }
.seg button.is-on{ background:var(--navy); color:#fff; }
.dash-range input[type=date],
.dash-company select{
  padding:6px 9px; border:1px solid #D6DEE7; border-radius:7px; font-size:12.5px; background:#fff;
}

.kpi-row{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.kpi{ background:#fff; border:1px solid #E6ECF2; border-radius:10px; padding:13px 15px; }
.kpi-label{ font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.02em; }
.kpi-value{ margin-top:3px; font-size:26px; font-weight:800; color:var(--navy); line-height:1.15; }
.kpi-value small{ font-size:12px; font-weight:700; margin-left:2px; color:#5B6B7C; }
.kpi-note{ margin-top:4px; font-size:11.5px; color:var(--muted); line-height:1.5; }
@media (max-width:1100px){ .kpi-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .kpi-row{ grid-template-columns:1fr; } }

/* 日ごとの棒グラフ（1図1指標。軸は1本だけ） */
.day-chart{ position:relative; margin:0 0 14px; }
.day-chart figcaption{
  display:flex; align-items:baseline; gap:8px;
  font-size:12.5px; font-weight:700; color:#5B6B7C; margin-bottom:2px;
}
.day-chart figcaption b{ font-size:15px; color:var(--navy); }
.day-chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.dc-bar{ fill:#0476BD; }
.dc-bar:hover{ fill:var(--navy); }
.dc-grid{ stroke:#E3EAF1; stroke-width:1; }
.dc-tick{ fill:#98A6B4; font-size:9.5px; text-anchor:end; font-family:var(--font-main); }
.dc-tick.dc-x{ text-anchor:start; }
.dc-tip{
  position:absolute; transform:translate(-50%,-100%);
  background:var(--navy); color:#fff; font-size:11.5px; font-weight:700;
  padding:4px 8px; border-radius:5px; white-space:nowrap; pointer-events:none; z-index:5;
}

.panel-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.panel-card-head h2{ margin:0; }
.panel-card-head .head-actions{ display:flex; align-items:center; gap:12px; }

.mini-bar{
  display:inline-block; width:64px; height:6px; border-radius:3px;
  background:#E6ECF2; overflow:hidden; vertical-align:middle;
}
.mini-bar i{ display:block; height:100%; background:#0476BD; border-radius:3px; }
.data-table td.cell-bar{ white-space:nowrap; }
.data-table td.cell-bar span{ margin-left:8px; font-size:12px; color:#5B6B7C; }

.dash-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:1000px){ .dash-two{ grid-template-columns:1fr; } }

.follow-group{ margin-bottom:16px; }
.follow-group h3{
  margin:0 0 6px; font-size:12.5px; color:#5B6B7C; font-weight:700;
  display:flex; align-items:baseline; gap:6px;
}
.follow-group h3 b{ color:var(--navy); font-size:14px; }
.follow-group ul{ margin:0; padding:0; list-style:none; }
.follow-group li{
  display:flex; align-items:center; gap:8px;
  padding:6px 0; border-bottom:1px solid #EEF2F6; font-size:13px;
}
.follow-group .fu-co{ font-size:11.5px; color:var(--muted); flex:0 0 auto; }
.follow-group .fu-date{ margin-left:auto; font-size:11.5px; color:var(--muted); }

/* ============================================================
   管理画面：表の検索・並べ替え
   ============================================================ */
.table-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:10px 0 6px; flex-wrap:wrap;
}
.search-box{
  position:relative; display:flex; align-items:center; gap:6px;
  border:1px solid #D6DEE7; border-radius:8px; background:#fff;
  padding:0 8px; min-width:min(320px, 100%);
}
.search-box:focus-within{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(4,118,189,.12); }
.search-box svg{ color:#98A6B4; flex:0 0 auto; }
.search-box input{
  flex:1 1 auto; border:none; outline:none; background:transparent;
  padding:7px 2px; font-size:13px; font-family:var(--font-main); min-width:0;
}
.search-box input::-webkit-search-cancel-button{ display:none; }
.search-clear{
  border:none; background:transparent; color:#98A6B4; cursor:pointer;
  font-size:16px; line-height:1; padding:2px 4px;
}
.search-clear:hover{ color:var(--navy); }
.table-count{ font-size:12px; color:var(--muted); font-weight:700; }

.data-table th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
.data-table th.sortable:hover{ color:var(--navy); }
.data-table th.sortable.is-on{ color:var(--navy); }
.data-table th .sort-mark{ font-style:normal; font-size:9px; margin-left:4px; }
.data-table.is-clickable tbody tr{ cursor:pointer; }
.data-table.is-clickable tbody tr:hover > td{ background:#F4F9FD; }
.data-table td.row-go{ color:var(--blue); font-size:12px; font-weight:700; white-space:nowrap; text-align:right; }

/* ============================================================
   受講者カルテ（右から出るパネル）
   ============================================================ */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,26,61,.38); z-index:940;
  opacity:0; transition:opacity .2s ease;
}
.drawer-backdrop.is-open{ opacity:1; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:950;
  width:min(720px, 100vw); background:var(--page-bg);
  box-shadow:-10px 0 40px rgba(0,0,0,.22);
  transform:translateX(100%); transition:transform .2s ease;
  display:flex; flex-direction:column;
}
.drawer.is-open{ transform:translateX(0); }
.drawer-head{
  flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 20px; background:var(--navy); color:#fff;
}
.drawer-eyebrow{ font-size:11.5px; color:#BFD6EC; font-weight:700; }
.drawer-head h2{ margin:2px 0 0; font-size:19px; color:#fff; }
.drawer-close{
  border:none; background:rgba(255,255,255,.14); color:#fff; cursor:pointer;
  width:30px; height:30px; border-radius:50%; font-size:17px; line-height:1; flex:0 0 auto;
}
.drawer-close:hover{ background:rgba(255,255,255,.28); }
.drawer-body{ flex:1 1 auto; overflow:auto; padding:16px 20px 40px; }

.karte-summary{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px;
  background:#fff; border:1px solid #E6ECF2; border-radius:10px; padding:13px 15px; margin-bottom:16px;
}
.karte-summary .ks{ display:flex; flex-direction:column; gap:2px; }
.karte-summary .ks span{ font-size:11px; font-weight:700; color:var(--muted); }
.karte-summary .ks b{ font-size:20px; font-weight:800; color:var(--navy); line-height:1.2; }
.karte-summary .ks b.sm{ font-size:14px; }
.karte-summary .ks small{ font-size:11px; color:#5B6B7C; font-weight:700; }

.karte-program{ margin-bottom:20px; }
.karte-program h3{
  margin:0 0 8px; font-size:13.5px; color:var(--navy); font-weight:800;
  border-left:4px solid var(--accent, var(--navy)); padding-left:8px;
}
.karte-module{
  background:#fff; border:1px solid #E6ECF2; border-radius:9px;
  margin-bottom:8px; overflow:hidden;
}
.karte-module > summary{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 13px; cursor:pointer; list-style:none; font-size:13px;
}
.karte-module > summary::-webkit-details-marker{ display:none; }
.karte-module > summary:hover{ background:#F7FAFD; }
.km-code{ font-weight:800; color:var(--navy); font-size:12px; }
.km-name{ flex:1 1 auto; min-width:0; color:var(--ink); }
.km-count{ font-size:12px; font-weight:800; color:#5B6B7C; }
.km-locked{ font-size:11.5px; font-weight:700; color:var(--muted); background:#F1F3F5; border-radius:4px; padding:2px 7px; }
.km-dots{ display:flex; gap:3px; flex-wrap:wrap; }
.km-dots .dot{ width:9px; height:9px; border-radius:2px; background:#E1E7EC; display:block; }
.km-dots .dot-done{ background:#0476BD; }
.km-dots .dot-doing{ background:#71BBE8; }
.km-dots .dot-preparing{ background:#EDEFF1; border:1px dashed #CBD3DA; }
.km-dots .dot-locked{ background:#F1F3F5; }

.karte-table{ margin:0; border-top:1px solid #EEF2F6; }
.karte-table td{ font-size:12.5px; padding:7px 13px; }
.karte-table tr.ks-todo td,
.karte-table tr.ks-preparing td,
.karte-table tr.ks-locked td{ color:#9AA7B3; }
.ks-badge{
  display:inline-block; font-size:11px; font-weight:800; border-radius:4px;
  padding:2px 7px; white-space:nowrap;
}
.ks-badge.ks-done{ background:#E4F1FB; color:#03578C; }
.ks-badge.ks-doing{ background:#FFF4E0; color:#9A6414; }
.ks-badge.ks-todo{ background:#F1F3F5; color:#8A97A3; }
.ks-badge.ks-preparing{ background:#F7F8F9; color:#A7B1BA; }
.ks-badge.ks-locked{ background:#F7F8F9; color:#A7B1BA; }
.karte-table .ks-detail{ white-space:nowrap; }
.karte-table .ks-ans,
.karte-table .ks-last{ text-align:right; white-space:nowrap; color:var(--muted); font-size:11.5px; }

.karte-recent{ margin:0; padding:0; list-style:none; background:#fff; border:1px solid #E6ECF2; border-radius:9px; }
.karte-recent li{
  display:flex; align-items:center; gap:10px;
  padding:7px 13px; border-bottom:1px solid #F1F5F8; font-size:12.5px;
}
.karte-recent li:last-child{ border-bottom:none; }
.karte-recent li span{ color:var(--muted); font-size:11.5px; flex:0 0 auto; }
.karte-recent li b{ color:var(--navy); }
.karte-recent li em{ margin-left:auto; font-style:normal; font-size:11.5px; color:#5B6B7C; }

@media (max-width:720px){
  .drawer{ width:100vw; }
  .karte-table .ks-ans{ display:none; }
}

/* ============================================================
   選択式の答え合わせ
   ============================================================ */
.quiz-check{
  margin:14px 0 4px; padding:12px 14px;
  background:#F7FAFD; border:1px solid #E0E9F2; border-radius:9px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.quiz-check-btn{
  flex:0 0 auto; border:none; border-radius:7px; cursor:pointer;
  background:var(--navy); color:#fff; font-weight:800; font-size:13px;
  padding:8px 16px; font-family:var(--font-main);
}
.quiz-check-btn:hover{ background:var(--navy-dark); }
.quiz-check-note{ margin:0; font-size:12px; color:var(--muted); }
.quiz-result{ flex:1 1 100%; margin:0; font-size:13px; color:var(--ink); }
.quiz-result b{ color:var(--navy); font-size:14.5px; }
.quiz-result span{ margin-left:8px; font-size:12px; color:var(--muted); }
.quiz-result.is-perfect b{ color:#0476BD; }
.quiz-result.is-empty{ color:#A3324F; font-size:12.5px; }

/* 正解／選び間違いの印 */
.choice-row label.is-answer{
  background:#E4F1FB; border-color:#8EC5E9; font-weight:700;
  box-shadow:inset 0 0 0 1px #8EC5E9;
}
.choice-row label.is-wrong{
  background:#FDF2F5; border-color:#F0B9C8; text-decoration:line-through;
  text-decoration-color:#D98BA2; text-decoration-thickness:1px;
}
.q-head .q-mark{
  display:inline-block; margin-left:8px; padding:1px 8px; border-radius:4px;
  font-size:11.5px; font-weight:800; vertical-align:middle; white-space:nowrap;
}
.q-head .q-mark.is-ok{ background:#E4F1FB; color:#03578C; }
.q-head .q-mark.is-ng{ background:#FDF2F5; color:#A3324F; }
.ks-quiz{ font-weight:800; color:#03578C; }
.ks-quiz.is-perfect{ color:#0476BD; }

/* ============================================================
   ログイン中の人の名前（画面の右上）
   ============================================================ */
.who-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; white-space:nowrap; min-width:0;
}
.who-badge .who-name{ overflow:hidden; text-overflow:ellipsis; }
.who-badge .who-company{
  font-weight:600; opacity:.75; font-size:11.5px;
  overflow:hidden; text-overflow:ellipsis; max-width:14em;
}
.who-badge .who-role{
  font-size:10.5px; font-weight:800; border-radius:4px; padding:1px 6px;
}

/* 紺色のヘッダーの中 */
.site-header .who-badge{ color:#DCEAF6; }
.site-header .who-badge .who-role{ background:rgba(255,255,255,.18); color:#fff; }

/* レッスンページの白い細いバーの中 */
.lesson-topbar-mini .who-badge{ color:#6B7A88; margin-left:auto; }
.lesson-topbar-mini .who-badge .who-role{ background:#EAF1F8; color:var(--navy); }
.lesson-topbar-mini .step-tracker{ margin-left:auto; }
.lesson-topbar-mini .who-badge + .step-tracker,
.lesson-topbar-mini .step-tracker ~ .who-badge{ margin-left:12px; }

@media (max-width:640px){
  .who-badge .who-company{ display:none; }
  .lesson-topbar-mini .who-badge .who-name{ max-width:7em; }
}

/* ============================================================
   公開前の回のプレビュー（運営管理者のみ）
   ============================================================ */
.preview-bar{
  position:sticky; top:0; z-index:800;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:7px 16px; background:#8A5A00; color:#fff;
  font-size:12.5px; font-weight:600; line-height:1.5;
}
.preview-bar b{
  background:rgba(255,255,255,.22); border-radius:4px;
  padding:1px 8px; font-size:11.5px; font-weight:800; flex:0 0 auto;
}
.preview-bar a{ margin-left:auto; color:#FFE6B8; font-weight:700; white-space:nowrap; }
.preview-bar a:hover{ color:#fff; }

.lesson-card.is-preview{ border-style:dashed; }
.lesson-card.is-preview .lesson-status{ background:#8A5A00; color:#fff; }

/* 紙面から切り出した図をそのまま置くとき（.tr-diagram など枠が決まっている場所） */
.tr-diagram img{ display:block; width:100%; max-width:300px; height:auto; margin:0 auto; }

/* 紙面から切り出した図に差し替えた箇所 */
.illustration img,
.persona-avatar img,
.pyramid-diagram img,
.ls-illust img,
.ws-illust img{ display:block; width:100%; height:auto; }
.illustration img{ max-width:110px; margin:0 auto; }
.persona-avatar img{ max-width:96px; border-radius:50%; }
.pyramid-diagram img{ max-width:260px; margin:6px auto 0; }
.ls-illust img{ max-width:150px; margin:6px auto; }
.ws-illust img{ max-width:120px; margin:4px auto; border-radius:6px; }
.fig-block.fig-wide img{ max-width:100%; }
.fig-caption{ margin:14px 0 0; text-align:center; font-size:12.5px; font-weight:700; color:var(--navy); }

/* ================================================================
   本文の地色を白にしたことによる調整
   （紙面から切り出した図版が透過PNGではないため、
     地色がグレーだと図版が「四角い箱」に見えてしまう。
     .sheet-wrap を白にしたぶん、
     これまで「白でいることで目立っていた」部品に
     枠線や薄い色を足して、白地の上でも見分けがつくようにする）
   ================================================================ */

/* --- 記入欄まわり（いちばん影響が大きい） --- */
.answer-area{
  background:#F2F6FA;
  border:1px solid #DBE4ED;
}
.answer-area textarea{
  background:#fff;
  border:1px solid #D2DCE6;
  border-radius:5px;
  padding:8px 10px;
}
.answer-area textarea:focus{
  border-color:var(--navy);
  box-shadow:0 0 0 2px rgba(0,52,118,0.12);
}
.choice-row{
  background:#F2F6FA;
  border:1px solid #DBE4ED;
  border-bottom:none;
}
.answer-area.with-choice{ border-top:none; }

/* 穴埋めの入力欄（これまでブラウザ既定の見た目のままで、
   白地だとほとんど枠が見えなかった） */
input.fill-blank{
  font-family:inherit;
  font-size:13.5px;
  color:#222;
  background:#fff;
  border:1px solid #C3D0DC;
  border-bottom:2px solid var(--blue);
  border-radius:4px;
  padding:5px 9px;
  min-width:70px;
}
input.fill-blank:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 2px rgba(0,52,118,0.12);
}
input.fill-blank.short{ width:90px; }
input.fill-blank.medium{ width:160px; }
input.fill-blank.long{ width:min(340px,100%); }
input.fill-blank.full{ width:100%; }

/* --- 映像視聴メモ（中の白いカードが白地に埋もれないように、
       方眼パネル側を少し濃くする） --- */
.memo-panel{
  background:
    radial-gradient(circle, #d3d9e0 1px, transparent 1.2px) 0 0/14px 14px,
    #F4F7FA;
  border:1px solid #DBE2EA;
}
.memo-card{
  border:1px solid #E3E8EE;
  border-left:4px solid var(--navy);
}

/* --- 枠の無い薄いグレーのパネル類 --- */
.compare-two .compare-body{
  background:#F5F7F9;
  border:1px solid #E2E6EA;
  border-top:none;
}
.chevron-point-row .chevron-body{
  background:#F3F6F9;
  border:1px solid #E2E6EA;
  border-left:none;
}
.goal-flag .flag-body{ border-color:#D8DEE5; }
@media (max-width:720px){
  .goal-flag .flag-body{ border-left-color:#D8DEE5; }
}

/* --- 答え合わせバー／補足ストリップ --- */
.quiz-check{ background:#F2F8FD; border-color:#CFDFEC; }
.note-strip{ background:#F4F9FD; }

/* 選択肢を縦一列に並べる指定（.vertical）が効いていなかったので追加。
   選択肢の文字数によって、1行に2つ並んだり1つだったりしていた */
.choice-row.vertical{ flex-direction:column; gap:10px; }

/* ================================================================
   DX02-02 で登場する追加コンポーネント
   ================================================================ */

/* ---- アイコン＋見出し＋説明の横並びカード（2〜3枚）
       紙面の「レッスン映像のポイント」でくり返し出てくる形 ---- */
.icon-cards{ display:flex; gap:14px; margin:16px 0; flex-wrap:wrap; }
.icon-cards .ic-card{
  flex:1 1 240px; min-width:0;
  background:var(--pale-blue);
  border-radius:8px;
  padding:18px 16px 16px;
  text-align:center;
}
.icon-cards .ic-card.is-ng{ background:#EDEDED; }
.icon-cards .ic-icon{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; margin-bottom:8px;
  color:var(--navy);
}
.icon-cards .ic-icon .ic-vs{ font-size:15px; font-weight:800; color:#222; }
.icon-cards .ic-title{ font-size:15px; font-weight:800; color:var(--navy); margin:0 0 10px; line-height:1.5; }
.icon-cards .ic-card.is-ng .ic-title{ color:#222; }
.icon-cards .ic-text{ font-size:12px; color:#333; line-height:1.85; margin:0; text-align:left; }

/* 背景を敷かず、縦の区切り線で並べる版（紙面のまとめページの形） */
.icon-cards.is-plain{ gap:0; }
.icon-cards.is-plain .ic-card{
  flex:1 1 150px;          /* 3枚が1行に収まるように、折り返しの基準を小さくする */
  background:transparent;
  border-left:1px solid #D8DEE5;
  border-radius:0;
  padding:4px 16px 0;
}
.icon-cards.is-plain .ic-card:first-child{ border-left:none; }

/* ---- 冒険パーティー型チーム編成（親1つ → メンバー4人のツリー） ---- */
.party-tree{ margin:18px 0; }
.party-tree .pt-caption{ text-align:center; font-size:14px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.party-tree .pt-top{ text-align:center; }
.party-tree .pt-top span{
  display:inline-block;
  background:var(--navy); color:#fff;
  font-size:14px; font-weight:800;
  padding:9px 30px; border-radius:4px;
}
.party-tree .pt-stem{ width:1.5px; height:14px; background:var(--navy); margin:0 auto; }
.party-tree .pt-members{
  display:flex; gap:10px;
  position:relative;
  padding-top:18px;
}
.party-tree .pt-members::before{
  content:""; position:absolute; top:0; left:12.5%; right:12.5%;
  border-top:1.5px solid var(--navy);
}
.party-tree .pt-member{
  position:relative;
  flex:1 1 150px; min-width:0;
  background:var(--pale-blue); border-radius:6px;
  padding:10px 10px 10px 6px;
  display:flex; align-items:center; gap:8px;
  text-align:center;
}
.party-tree .pt-member::before{
  content:""; position:absolute; top:-18px; left:50%;
  width:1.5px; height:18px; background:var(--navy);
}
.party-tree .pt-member img{
  flex:0 0 auto; width:38px; height:auto;
  image-rendering:pixelated;      /* ドット絵なので、にじませずに拡大する */
}
.party-tree .pt-role{ flex:1; min-width:0; }
.party-tree .pt-role b{ display:block; font-size:12.5px; font-weight:800; color:#222; }
.party-tree .pt-role small{ display:block; font-size:10px; color:var(--muted); margin:1px 0 3px; line-height:1.4; }
.party-tree .pt-role em{ display:block; font-style:normal; font-size:11.5px; font-weight:700; color:var(--navy); }

@media (max-width:720px){
  .icon-cards.is-plain .ic-card{ border-left:none; border-top:1px solid #D8DEE5; padding:14px 0 0; }
  .icon-cards.is-plain .ic-card:first-child{ border-top:none; }
  .party-tree .pt-members{ flex-direction:column; padding-top:0; }
  .party-tree .pt-members::before{ display:none; }
  .party-tree .pt-member::before{ display:none; }
}

/* ---- icon-cards の細かい部品（番号バッジ・小見出し・出典の注記） ---- */
.icon-cards .ic-no{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; margin-right:6px;
  background:var(--navy); color:#fff;
  border-radius:50%; font-size:11.5px; font-weight:800;
  vertical-align:2px;
}
.icon-cards .ic-sub{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:12.5px; font-weight:700; color:#333;
  margin:-4px 0 8px;
}
.icon-cards .ic-sub svg{ color:var(--navy); }
.icon-cards .ic-note{
  margin:8px 0 0; font-size:10px; color:var(--muted); line-height:1.65; text-align:left;
}
.icon-cards .ic-note b{ color:#555; font-weight:700; }

/* ---- 「誰を集めるべきか？」のようなアイコン＋下線ラベルの横並び ---- */
.label-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 22px; margin:12px 0 10px; }
.label-row .lr-item{ display:flex; align-items:center; gap:8px; }
.label-row .lr-item svg{ color:var(--navy); flex:0 0 auto; }
.label-row .lr-item span{ font-size:13px; font-weight:700; color:#222; border-bottom:1.5px solid var(--navy); padding-bottom:2px; }
.label-row .lr-etc{ font-size:13px; font-weight:700; color:#222; }

/* ---- 事例の3段構成（課題→解決策→価値）のように、
       濃紺の見出し帯＋薄水色の本文（アイコン＋箇条書き）を積み上げるブロック ---- */
.story-block{ margin:14px 0; border-radius:6px; overflow:hidden; }
.story-block .sb-head{ background:var(--navy); color:#fff; font-size:15px; font-weight:800; padding:9px 18px; letter-spacing:.04em; }
.story-block .sb-body{ background:var(--pale-blue); display:flex; align-items:center; gap:20px; padding:16px 22px; flex-wrap:wrap; }
.story-block .sb-icon{ flex:0 0 auto; color:var(--navy); display:flex; align-items:center; gap:6px; }
.story-block .sb-main{ flex:1 1 240px; min-width:0; }
.story-block .sb-lead{ font-size:13px; font-weight:700; color:#222; margin:0 0 6px; }
.story-block ul{ margin:0; padding:0; list-style:none; }
.story-block li{ position:relative; padding-left:16px; font-size:12.5px; color:#333; line-height:1.85; }
.story-block li::before{ content:"■"; position:absolute; left:0; top:5px; font-size:8.5px; color:var(--navy); }

/* icon-cards を縦積みにして、まとめの帯として使う版 */
.icon-cards.is-stack{ flex-direction:column; gap:10px; }
.icon-cards.is-stack .ic-card{ flex:1 1 auto; padding:16px 22px; }
.icon-cards.is-stack .ic-title{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 8px; }
.icon-cards.is-stack .ic-title svg{ color:var(--ink); flex:0 0 auto; }
.icon-cards.is-stack .ic-text{ text-align:center; }

/* ---- 薄水色のポイントパネル（見出し＋リード＋中身）
       第5回のように、1ページに同じ形のパネルが並ぶ紙面で使う ---- */
.point-panel{ background:var(--pale-blue); border-radius:8px; padding:16px 20px 18px; margin:16px 0; }
.point-panel .pp-title{
  display:flex; align-items:center; gap:10px;
  font-size:16px; font-weight:800; color:var(--navy);
  border-bottom:1px solid #B9D7EE; padding-bottom:8px; margin:0 0 10px;
}
.point-panel .pp-title svg{ color:var(--navy); flex:0 0 auto; }
.point-panel .pp-title.is-center{ justify-content:center; border-bottom:none; padding-bottom:2px; }
.point-panel .pp-lead{ font-size:13px; font-weight:700; color:#222; margin:0 0 10px; line-height:1.8; }
.point-panel .pp-lead.is-center{ text-align:center; }
.point-panel .pp-row{ display:flex; align-items:center; gap:10px; font-size:13px; color:#222; margin:6px 0; }
.point-panel .pp-row svg{ color:var(--navy); flex:0 0 auto; }
.point-panel .pp-white{ background:#fff; border-radius:6px; padding:12px 16px; }
.point-panel .pp-cap{ font-size:12px; color:#333; text-align:center; margin:8px 0 0; }

.pp-two{ display:flex; gap:12px; flex-wrap:wrap; }
.pp-two > div{ flex:1 1 220px; min-width:0; border-radius:6px; padding:12px 14px; text-align:center; font-size:13px; line-height:1.8; }
.pp-two .pp-ng{ background:#E4E4E4; }
.pp-two .pp-ok{ background:#fff; }
.pp-two b{ display:block; font-size:14px; font-weight:800; color:#222; margin-bottom:4px; }
.pp-two small{ display:block; font-size:11px; color:#555; margin-top:4px; line-height:1.6; }

/* 能力値バー（RPGの強み・弱みのイメージ） */
.stat-bar{ display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; color:#333; margin:7px 0; }
.stat-bar .sb-key{ flex:0 0 52px; }
.stat-bar .sb-track{ flex:1; height:9px; background:#DDE3EA; border-radius:999px; overflow:hidden; }
.stat-bar .sb-fill{ display:block; height:100%; background:var(--navy); border-radius:999px; }
.stat-bar .sb-val{ flex:0 0 auto; font-weight:700; }

/* icon-cards の中に、紙面から切り出した図版を置くとき */
.icon-cards .ic-icon img{ height:46px; width:auto; display:block; }

/* ---- 縦に流れる比較フロー（例：立派な苗→合わない土壌→枯れる ／
       土壌を知る社員→新しいタネ→力強い芽） ---- */
.vflow-pair{ display:flex; gap:12px; flex-wrap:wrap; }
.vflow{ flex:1 1 110px; min-width:0; display:flex; flex-direction:column; align-items:center; }
.vflow .vf-box{
  width:100%; background:#fff; border:1.5px solid var(--navy); border-radius:4px;
  padding:9px 8px; text-align:center; font-size:13px; font-weight:700; color:#222;
}
.vflow .vf-box.is-plain{ border-color:#D6DEE7; }
.vflow .vf-box small{ display:block; font-size:10.5px; font-weight:500; color:#555; margin-top:1px; }
.vflow .vf-box .vf-inline{ display:inline-flex; align-items:center; gap:7px; }
.vflow .vf-arrow{ color:var(--navy); padding:4px 0; line-height:1; }

/* ================================================================
   03.DX活用 で登場する追加コンポーネント
   ================================================================ */

/* ---- まとめの Point 1 / 2 / 3（角丸の枠に番号と本文） ---- */
.point-list{ margin:14px 0; }
.point-row{
  display:flex; align-items:center; gap:18px;
  border:2px solid var(--navy); border-radius:999px;
  padding:12px 26px; margin-bottom:10px; flex-wrap:wrap;
}
.point-row .pr-no{ flex:0 0 auto; min-width:88px; font-size:20px; font-weight:800; color:var(--navy); }
.point-row p{ flex:1 1 240px; margin:0; font-size:12px; color:#333; line-height:1.8; }
.point-band{
  background:var(--navy); color:#fff; border-radius:999px;
  text-align:center; font-size:15.5px; font-weight:800;
  padding:13px 20px; margin-top:14px; line-height:1.6;
}

/* ---- 注意ボックス（黄色） ---- */
.warn-box{ background:#FCF8E3; border-radius:6px; padding:13px 18px; }
.warn-box .wb-title{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:800; color:var(--coral); margin:0 0 8px; text-align:center; }
.warn-box .wb-title svg{ flex:0 0 auto; }
.warn-box p{ margin:0; font-size:12px; color:#333; line-height:1.85; }

/* ---- 理想／ギャップ／現実 の3段バー ---- */
.gap-row{ display:flex; gap:8px; margin:14px 0; flex-wrap:wrap; align-items:stretch; }
.gap-row > div{ flex:1 1 150px; min-width:0; text-align:center; padding:12px 10px; border-radius:4px; }
.gap-row b{ display:block; font-size:15px; font-weight:800; color:#222; }
.gap-row small{ font-size:12px; color:#444; }
.gap-row .gap-ideal{ background:#E4E4E4; }
.gap-row .gap-real{ background:#FCF8E3; }

/* ---- icon-cards：アイコンと見出しを左寄せで1行に ---- */
.icon-cards .ic-card.is-left{ text-align:left; }
.icon-cards .ic-card.is-left .ic-head{ display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.icon-cards .ic-card.is-left .ic-head svg{ color:var(--navy); flex:0 0 auto; }
.icon-cards .ic-card.is-left .ic-head b{ font-size:14.5px; font-weight:800; color:var(--navy); }

/* ---- 色つきの丸印がつく箇条書き ---- */
.dot-list{ margin:0; padding:0; list-style:none; }
.dot-list li{ position:relative; padding-left:19px; font-size:12.5px; color:#333; line-height:2; }
.dot-list li::before{ content:"●"; position:absolute; left:0; top:2px; font-size:10px; color:var(--navy); }
.dot-list li.is-good::before{ color:#2FA84F; }
.dot-list li.is-bad::before{ color:#E03A3A; }
.dot-list li b{ color:#222; }

/* ---- 濃紺の丸いピルを並べた行 ---- */
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; justify-content:center; }
.pill-row span{ background:var(--navy); color:#fff; border-radius:999px; padding:7px 16px; font-size:12.5px; font-weight:700; }

/* ---- 5フォース分析の十字図 ---- */
.five-forces{ display:flex; flex-direction:column; align-items:center; gap:4px; margin:16px 0; }
.five-forces .ff-box, .five-forces .ff-center{
  background:var(--pale-blue); border-radius:8px; padding:9px 12px; text-align:center; min-width:118px;
}
.five-forces .ff-center{ border:1.5px solid var(--navy); }
.five-forces b{ display:block; font-size:15px; font-weight:800; color:#222; }
.five-forces .ff-center b{ color:var(--navy); }
.five-forces small{ font-size:11.5px; color:#444; }
.five-forces .ff-mid{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center; }
.five-forces .ff-arrow{ color:var(--navy); font-size:14px; line-height:1; }

/* ---- 本文中の比較表 ---- */
.cmp-table-wrap{ overflow-x:auto; margin:10px 0 14px; }
.cmp-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.cmp-table th{ background:var(--navy); color:#fff; font-weight:700; padding:8px 10px; text-align:center; border:1px solid var(--navy); white-space:nowrap; }
.cmp-table td{ padding:8px 10px; text-align:center; border:1px solid #C3D0DC; color:#222; }
.cmp-table tbody tr td:first-child{ font-weight:700; }

/* ---- VRIOの4段ステップ（上から Step4 → Step1） ---- */
.vrio-steps{ margin:14px 0; }
.vrio-step{ display:flex; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px dashed #9AA7B4; flex-wrap:wrap; }
.vrio-step:last-child{ border-bottom:none; }
.vrio-step .vs-no{ flex:0 0 auto; min-width:200px; font-size:15px; font-weight:800; color:var(--navy); }
.vrio-step .vs-no small{ font-size:11.5px; font-weight:700; color:#333; }
.vrio-step .vs-q{ flex:1 1 240px; font-size:13px; color:#222; line-height:1.7; }

/* ================================================================
   同時ログイン（排他）の締め出し画面
   ================================================================ */
.session-block{
  position:fixed; inset:0; z-index:4000;
  background:rgba(12,24,44,0.72);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  backdrop-filter:blur(3px);
}
.session-block.is-static{ position:static; min-height:100vh; background:var(--page-bg); backdrop-filter:none; }
.session-block .sb-card{
  background:#fff; border-radius:14px;
  max-width:460px; width:100%;
  padding:34px 34px 30px;
  text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,0.32);
}
.session-block .sb-icon{
  width:64px; height:64px; margin:0 auto 14px;
  border-radius:50%; background:var(--pale-blue); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
}
.session-block h2{ margin:0 0 12px; font-size:19px; font-weight:800; color:var(--navy); line-height:1.5; }
.session-block p{ margin:0 0 14px; font-size:13.5px; color:#333; line-height:1.9; }
.session-block .sb-note{ font-size:12.5px; color:var(--muted); }
.session-block .sb-meta{
  margin:0 0 16px; padding:12px 16px;
  background:#F2F6FA; border:1px solid #DBE4ED; border-radius:8px;
  text-align:left;
}
.session-block .sb-meta > div{ display:flex; gap:10px; font-size:12.5px; line-height:1.9; }
.session-block .sb-meta dt{ flex:0 0 112px; white-space:nowrap; color:var(--muted); margin:0; }
.session-block .sb-meta dd{ flex:1; margin:0; color:#222; font-weight:700; }
.session-block .btn{ display:inline-block; margin-top:4px; text-decoration:none; }

/* 管理画面カルテの「ログイン端末」欄 */
.karte-session{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:12.5px; color:#333; margin-top:2px; }
.karte-session b{ color:var(--navy); }
.karte-session .ks-warn{ color:#A3324F; font-weight:700; }

/* ==========================================================================
   DX03-03 顧客理解を深めるデザイン思考
   ========================================================================== */

/* ---- 対比図（作る人 vs 使う人／ドリルと穴） ---- */
.vs-pair{
  display:flex; align-items:stretch; gap:10px;
  flex-wrap:wrap; justify-content:center; margin:14px 0 4px;
}
.vs-pair .vs-col{
  flex:1 1 220px; min-width:200px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.vs-pair .vs-label{ font-size:12.5px; font-weight:700; color:#333; margin-bottom:10px; }
.vs-pair .vs-icon{
  height:76px; display:flex; align-items:center; justify-content:center;
  color:#222;
}
.vs-pair .vs-mid{
  flex:0 0 auto; align-self:center; color:var(--navy);
  display:flex; align-items:center; padding:0 4px;
}
.speech{
  position:relative; width:100%;
  background:#F1F1F1; border:1px solid #D8DDE3; border-radius:8px;
  padding:11px 14px; margin-top:20px;
  font-size:13px; font-weight:700; color:#222; line-height:1.6;
}
.speech::before,
.speech::after{
  content:""; position:absolute; width:0; height:0;
  border-style:solid; border-color:transparent; border-bottom:0;
}
.speech::before{ left:24px; bottom:-9px; border-width:9px; border-top-color:#D8DDE3; }
.speech::after{ left:25.2px; bottom:-7.5px; border-width:7.8px; border-top-color:#F1F1F1; }
.speech.is-blue{ background:#fff; border-color:var(--blue); }
.speech.is-blue::before{ border-top-color:var(--blue); }
.speech.is-blue::after{ border-top-color:#fff; }

/* ---- デザイン思考の5つのプロセス ---- */
.proc5{
  display:flex; align-items:stretch; gap:5px;
  flex-wrap:wrap; justify-content:center; margin:16px 0 4px;
}
.proc5 .p5-box{
  flex:1 1 96px; min-width:96px;
  background:#FDF6E8; border:1.5px solid #E8A33A; border-radius:4px;
  padding:10px 6px 12px; text-align:center;
}
.proc5 .p5-box.is-first{ background:#F6C445; border-color:#DFA200; }
.proc5 .p5-name{ font-size:13px; font-weight:800; color:#4A3410; }
.proc5 .p5-en{ font-size:10px; color:#8A6B34; margin-top:1px; letter-spacing:.02em; }
.proc5 .p5-ic{ margin-top:8px; color:#3A2A08; line-height:0; }
.proc5 .p5-arrow{
  flex:0 0 auto; align-self:center;
  color:#E8853A; font-size:14px; font-weight:800;
}
.proc5-loop{
  text-align:center; font-size:11.5px; font-weight:700;
  color:#C2762A; margin:2px 0 16px;
}
.proc5-points{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 6px; }
.proc5-points .p5c{ flex:1 1 112px; min-width:112px; }
.proc5-points .p5c-head{
  background:#E8853A; color:#fff; border-radius:4px;
  font-size:12.5px; font-weight:800; text-align:center; padding:5px 4px;
}
.proc5-points .p5c:first-child .p5c-head{ background:#F6C445; color:#4A3410; }
.proc5-points .p5c-body{ font-size:11.5px; line-height:1.75; color:#333; padding:8px 3px 0; }

/* ---- シーンカード（デザイン思考ごっこ） ---- */
.scene-cards{ display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 12px; }
.scene-cards .sc{
  flex:1 1 250px; min-width:240px;
  background:#fff; border:2px solid #E8853A; border-radius:10px;
  padding:14px 16px 16px;
}
.scene-cards .sc-fig{
  height:186px; display:flex; align-items:center; justify-content:center;
}
.scene-cards .sc-fig img{ max-width:100%; max-height:100%; width:auto; height:auto; }
.scene-cards .sc-title{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:800; color:var(--navy); margin:12px 0 6px;
}
.scene-cards .sc-title svg{ color:#E8853A; flex:0 0 auto; }
.scene-cards .sc-text{ font-size:12.5px; color:#333; line-height:1.75; margin:0; }
.scene-cards .sc-quote{ font-size:12px; color:#C2762A; font-weight:700; margin:5px 0 0; }
.scene-band{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(90deg,#EE8B52,#F6C445);
  color:#fff; border-radius:8px; text-align:center;
  font-size:14px; font-weight:800; padding:12px 18px; margin:8px 0 4px;
}

/* ==========================================================================
   DX03-04 UXを可視化：カスタマージャーニー
   ========================================================================== */

/* ---- Bad Case / Good Case の2枚比較 ---- */
.case-two{ display:flex; gap:20px; flex-wrap:wrap; margin:14px 0 12px; }
.case-two .case{
  flex:1 1 260px; min-width:250px;
  border-radius:6px; padding:16px 18px 18px;
}
.case-two .case.is-bad{ background:#EDEDED; }
.case-two .case.is-good{ background:var(--pale-blue); }
.case-two .case-head{
  display:flex; align-items:center; gap:7px;
  font-size:16px; font-weight:800; margin-bottom:11px;
}
.case-two .is-bad .case-head{ color:#2B2B2B; }
.case-two .is-good .case-head{ color:var(--blue); }
.case-two .case-item{
  display:flex; gap:8px; align-items:flex-start;
  font-size:12.5px; line-height:1.7; color:#333; margin-bottom:6px;
}
.case-two .is-good .case-item{ color:var(--blue); }
.case-two .case-item svg{ flex:0 0 auto; margin-top:3px; }
.case-two .case-face{ text-align:center; margin-top:14px; line-height:0; }

/* ---- 地層フロー（表層→中層→深層→Solution） ---- */
.layer-flow{ margin:18px auto 10px; max-width:620px; }
.layer-flow .lf-row{
  display:flex; align-items:center; gap:10px;
  background:#E3F1FA; border-radius:4px; padding:12px 16px;
  font-size:13.5px; color:#222; line-height:1.5;
}
.layer-flow .lf-row.is-deep{ background:#D7EAF6; }
.layer-flow .lf-row.is-sol{ background:#FCF6D8; }
.layer-flow .lf-row b{ font-weight:800; }
.layer-flow .lf-ic{ flex:0 0 auto; display:flex; color:var(--navy); }
.layer-flow .lf-row.is-sol .lf-ic{ color:#E8A33A; }
.layer-flow .lf-why{
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 0; font-size:12px; font-weight:700; color:var(--blue);
}

/* ---- 感情グラフ（折れ線） ---- */
.ux-chart{ display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; margin:10px 0 6px; }
.ux-chart .uc-fig{ flex:3 1 380px; min-width:320px; }
.ux-chart .uc-fig svg{ width:100%; height:auto; }
.ux-chart .uc-note{ flex:1 1 200px; min-width:190px; }
.ux-chart .uc-note h4{
  font-size:15px; font-weight:800; color:#2B2B2B;
  margin:6px 0 8px; line-height:1.5;
}
.ux-chart .uc-note p{ font-size:12px; line-height:1.85; color:#333; margin:0; }
.chart-caption{
  font-size:14px; font-weight:800; color:#C0392B;
  line-height:1.8; margin:12px 0 4px;
}

/* ==========================================================================
   DX03-05 UIを可視化：デザイン
   ========================================================================== */

/* ---- Decoration / Function の2枚比較 ---- */
.df-two{ display:flex; gap:16px; flex-wrap:wrap; margin:14px 0 10px; }
.df-two .df{
  flex:1 1 270px; min-width:250px;
  background:var(--pale-blue); border-radius:6px;
  padding:18px 18px 20px; text-align:center;
}
.df-two .df-mark{ line-height:0; margin-bottom:10px; }
.df-two .df-title{ font-size:15px; font-weight:800; color:var(--navy); margin:4px 0 6px; }
.df-two .df-text{ font-size:12px; line-height:1.75; color:#333; margin:0; }
.df-two .df-fig{ margin:6px 0 8px; line-height:0; }
.df-two .df-fig img{ max-width:100%; height:auto; }
.df-two .df-signs{ display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap; }

/* ---- Bad UI / Good UI の作例比較 ---- */
.ui-two{ display:flex; gap:18px; flex-wrap:wrap; margin:14px 0 8px; }
.ui-two .uic{ flex:1 1 250px; min-width:230px; text-align:center; }
.ui-two .uic-head{ font-size:14.5px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.ui-two .uic-fig{ height:150px; display:flex; align-items:center; justify-content:center; }
.ui-two .uic-fig img{ max-width:100%; max-height:100%; width:auto; height:auto; }
.ui-two .uic-text{ font-size:12px; line-height:1.8; color:#333; margin:10px 0 0; }

/* ---- UI3原則 ---- */
.ui-rules{ display:flex; gap:0; flex-wrap:wrap; margin:14px 0 10px; }
.ui-rules .uir{
  flex:1 1 170px; min-width:160px; text-align:center; padding:0 12px;
  border-right:1px solid #D8DEE5;
}
.ui-rules .uir:last-child{ border-right:none; }
.ui-rules .uir-ic{ height:52px; display:flex; align-items:center; justify-content:center; color:var(--navy); }
.ui-rules .uir-name{ font-size:14px; font-weight:800; color:var(--navy); margin:6px 0 4px; }
.ui-rules .uir-text{ font-size:11.5px; line-height:1.75; color:#333; margin:0; }

/* ---- 間取り図（ワイヤーフレーム） ---- */
.madori-two{ display:flex; gap:16px; flex-wrap:wrap; margin:14px 0 12px; }
.madori-col{ flex:1 1 300px; min-width:290px; }
.madori-head{ font-size:14px; font-weight:800; margin-bottom:7px; }
.madori-col.is-bad .madori-head{ color:#2B2B2B; }
.madori-col.is-good .madori-head{ color:var(--navy); }
.madori{ position:relative; height:160px; border-radius:4px; }
.madori.is-bad{ background:#DEDEDE; }
.madori.is-good{ background:var(--pale-blue); }
.madori .rm{
  position:absolute; width:86px; box-sizing:border-box;
  background:#fff; border:1px solid #98A4B0; border-radius:3px;
  text-align:center; font-size:10.5px; font-weight:700; color:#222;
  line-height:1.3; padding:6px 3px;
}
.madori .rm small{ display:block; font-size:9.5px; font-weight:400; color:#666; }
.madori .ar{ position:absolute; color:var(--navy); font-size:14px; font-weight:800; line-height:1; }
.wf-points{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin:12px 0 6px; }
.wf-points .wfp-label{
  flex:0 0 auto; background:var(--navy); color:#fff; border-radius:8px;
  font-size:15px; font-weight:800; padding:16px 26px; text-align:center;
}
.wf-points .wfp-list{ flex:1 1 300px; min-width:280px; }
.wf-points .wfp-list li{ font-size:12.5px; line-height:1.9; color:#222; }

/* ==========================================================================
   DX03-06 提供価値の再設計
   ========================================================================== */

/* ---- 4つの指針（2×2カード） ---- */
.guide4{ display:flex; flex-wrap:wrap; gap:12px; margin:14px 0 10px; }
.guide4 .g4{
  flex:1 1 280px; min-width:260px; box-sizing:border-box;
  border:1px solid var(--navy); border-radius:6px; padding:14px 16px 16px;
}
.guide4 .g4-head{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:800; color:var(--navy); margin-bottom:9px;
}
.guide4 .g4-head svg{ flex:0 0 auto; }
.guide4 .g4-lead{ font-size:12.5px; font-weight:700; color:#222; margin:0 0 7px; line-height:1.6; }
.guide4 .g4-text{ font-size:11.5px; line-height:1.8; color:#444; margin:0; }

/* ---- 3ステップ（横並び・区切り線） ---- */
.step3{ display:flex; gap:0; flex-wrap:wrap; margin:16px 0 10px; }
.step3 .s3{
  flex:1 1 190px; min-width:180px; box-sizing:border-box;
  text-align:center; padding:0 14px; border-right:1px solid #D8DEE5;
}
.step3 .s3:last-child{ border-right:none; }
.step3 .s3-ic{ height:46px; display:flex; align-items:center; justify-content:center; color:var(--navy); }
.step3 .s3-name{ font-size:14.5px; font-weight:800; color:var(--navy); margin:6px 0 8px; }
.step3 .s3-q{ font-size:13px; font-weight:700; color:#222; margin:0 0 6px; }
.step3 .s3-ex{ font-size:11px; color:#666; margin:0 0 8px; line-height:1.7; }
.step3 .s3-text{ font-size:11.5px; line-height:1.8; color:#333; margin:0; }

/* ---- 新出単語（2枚） ---- */
.newterm-two{ display:flex; gap:16px; flex-wrap:wrap; margin:16px 0 10px; }
.newterm-two .nt{
  flex:1 1 280px; min-width:270px; box-sizing:border-box; position:relative;
  border:1px solid var(--navy); border-radius:4px; padding:22px 18px 0;
  display:flex; flex-direction:column;
}
.newterm-two .nt-chip{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--navy); color:#fff; font-size:11.5px; font-weight:700;
  padding:4px 14px; border-radius:3px; white-space:nowrap;
}
.newterm-two .nt-title{
  text-align:center; font-size:16px; font-weight:800; color:var(--navy); margin:0 0 9px;
}
.newterm-two .nt-text{ font-size:12px; line-height:1.85; color:#333; margin:0 0 12px; flex:1 1 auto; }
.newterm-two .nt-feat{
  background:var(--pale-blue); margin:auto -18px 0; padding:10px 16px 12px; text-align:center;
}
.newterm-two .nt-feat b{ display:block; font-size:12.5px; color:var(--navy); margin-bottom:4px; letter-spacing:.3em; }
.newterm-two .nt-feat p{ font-size:11.5px; line-height:1.8; color:#333; margin:0; }

/* ==========================================================================
   DX03-07 ビジネスモデル理解 リーンキャンバス
   ========================================================================== */

/* ---- リーンキャンバス9ブロック ---- */
.lean-canvas{
  display:grid; grid-template-columns:repeat(10,1fr);
  border-top:1.5px solid var(--navy); border-left:1.5px solid var(--navy);
  margin:14px 0 12px;
}
.lean-canvas .lc{
  grid-column:span 2; min-height:58px;
  border-right:1.5px solid var(--navy); border-bottom:1.5px solid var(--navy);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:10px 5px;
  font-size:12.5px; font-weight:700; color:#222; line-height:1.45;
}
.lean-canvas .lc.tall{ grid-row:span 2; }
.lean-canvas .lc.half{ grid-column:span 5; flex-direction:row; gap:5px; }
.lean-canvas .lc.is-key{ color:var(--blue); }
.lean-canvas .lc .lc-no{ font-weight:700; }
.lc-note{
  background:var(--pale-blue); border-radius:4px;
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  padding:12px 18px; margin:10px 0 4px;
}
.lc-note .lcn-label{ flex:0 0 auto; font-size:14px; font-weight:800; color:var(--navy); }
.lc-note .lcn-body{ flex:1 1 320px; font-size:11.5px; line-height:1.85; color:#333; }

/* ---- 低解像度／高解像度ターゲット比較 ---- */
.reso-two{ display:flex; gap:16px; flex-wrap:wrap; margin:14px 0 10px; }
.reso-two .rs{ flex:1 1 280px; min-width:270px; }
.reso-two .rs-head{
  background:var(--navy); color:#fff; text-align:center;
  font-size:14px; font-weight:800; padding:9px 10px;
}
.reso-two .rs-body{ background:#EFEFEF; padding:12px 16px 14px; }
.reso-two .rs.is-high .rs-body{ background:var(--pale-blue); }
.reso-two .rs-body li{
  list-style:none; position:relative; padding-left:16px;
  font-size:12px; line-height:1.8; color:#222; margin-bottom:3px;
}
.reso-two .rs-body li::before{
  content:""; position:absolute; left:0; top:8px;
  width:7px; height:7px; background:var(--navy);
}
.reso-two .rs-text{ font-size:11px; line-height:1.85; color:#444; margin:8px 0 0; }

/* ---- UVP（新出単語・大枠） ---- */
.uvp-block{
  position:relative; border:1px solid var(--navy); border-radius:4px;
  padding:26px 20px 20px; margin:22px 0 8px;
}
.uvp-block .uvp-chip{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; background:#fff; padding:0 10px;
}
.uvp-block .uvp-chip span{
  background:var(--navy); color:#fff; font-size:11.5px; font-weight:700;
  padding:4px 12px; border-radius:3px; white-space:nowrap;
}
.uvp-block .uvp-chip b{ font-size:16px; font-weight:800; color:var(--navy); }
.uvp-block .uvp-lead{ text-align:center; font-size:12.5px; line-height:1.9; color:#333; margin:0 0 14px; }
.uvp-cols{ display:flex; gap:16px; flex-wrap:wrap; }
.uvp-cols .uvp-feat{ flex:1 1 280px; min-width:260px; background:var(--pale-blue); border-radius:4px; padding:14px 18px 16px; }
.uvp-cols .uvp-feat h5{ text-align:center; font-size:13.5px; font-weight:800; color:#222; margin:0 0 10px; letter-spacing:.3em; }
.uvp-cols .uvp-feat li{ list-style:none; font-size:12px; font-weight:700; color:#222; margin-bottom:2px; }
.uvp-cols .uvp-feat p{ font-size:11px; line-height:1.8; color:#444; margin:0 0 10px; padding-left:12px; }
.uvp-cols .uvp-ex{ flex:1 1 280px; min-width:260px; }
.uvp-cols .uvp-ex h5{ text-align:center; font-size:13.5px; font-weight:800; color:var(--blue); margin:0 0 10px; }
.uvp-cols .uvp-ex .uvp-box{ border-radius:4px; padding:12px 14px; text-align:center; }
.uvp-cols .uvp-ex .uvp-box.is-before{ background:#E3E3E3; }
.uvp-cols .uvp-ex .uvp-box.is-after{ background:#FCF6D8; }
.uvp-cols .uvp-ex .uvp-box b{ display:block; font-size:13.5px; font-weight:800; color:#222; margin-bottom:6px; }
.uvp-cols .uvp-ex .uvp-box.is-after b{ color:var(--blue); }
.uvp-cols .uvp-ex .uvp-box p{ font-size:12px; line-height:1.7; color:#333; margin:0; }
.uvp-cols .uvp-ex .uvp-arrow{ text-align:center; color:var(--navy); padding:6px 0; line-height:0; }

/* ==========================================================================
   DX03-08 既存事業のブラッシュアップ
   ========================================================================== */

/* ---- 本店／屋台のピラミッド ---- */
.bs-pyramid{ margin:16px 0 10px; }
.bs-pyramid .bp-row{ display:flex; align-items:center; justify-content:center; gap:10px; }
.bs-pyramid .bp-side{ flex:0 0 100px; font-size:11.5px; color:#333; text-align:center; line-height:1.55; }
.bs-pyramid .bp-top{
  flex:0 0 240px; background:var(--pale-blue); text-align:center; padding:9px 10px 8px;
  clip-path:polygon(15% 0, 85% 0, 100% 100%, 0 100%);
}
.bs-pyramid .bp-bottom{
  flex:0 0 330px; background:#E3E3E3; text-align:center; padding:12px 10px;
  clip-path:polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
.bs-pyramid b{ display:block; font-size:14.5px; font-weight:800; color:var(--navy); }
.bs-pyramid .bp-top small{ font-size:11.5px; color:var(--navy); letter-spacing:.35em; }

/* ---- 経営幹部のエコシステム ---- */
.eco-caps{
  display:flex; justify-content:center; gap:30px; flex-wrap:wrap;
  font-size:12.5px; font-weight:700; color:#222; margin:14px 0 4px;
}
.eco-caps span{ flex:0 0 200px; text-align:center; }
.eco-row{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.eco-row .eco-box{
  flex:0 1 210px; text-align:center; padding:13px 10px;
  font-size:14.5px; font-weight:800;
}
.eco-row .eco-box.is-main{ background:#E3E3E3; color:#222; }
.eco-row .eco-box.is-stall{ background:var(--pale-blue); color:var(--blue); }
.eco-row .eco-link{ flex:0 0 46px; }
.eco-row .eco-link i{ display:block; height:3px; background:var(--navy); margin:5px 0; }
.eco-row .eco-mid{ flex:0 0 auto; text-align:center; color:var(--navy); }
.eco-row .eco-mid .eco-cap{ font-size:12px; font-weight:700; color:#222; margin-top:2px; }

/* ---- Before / Action / After ---- */
.baa-row{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; margin:14px 0 4px; }
.baa-row .baa{
  flex:1 1 180px; min-width:170px; border-radius:4px;
  padding:12px 10px 14px; text-align:center;
}
.baa-row .baa.is-b{ background:#E3E3E3; }
.baa-row .baa.is-a{ background:#FCF6D8; }
.baa-row .baa.is-c{ background:var(--pale-blue); }
.baa-row .baa-head{
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:15px; font-weight:800; color:#222; margin-bottom:5px;
}
.baa-row .baa.is-c .baa-head{ color:var(--blue); }
.baa-row .baa p{ font-size:11.5px; line-height:1.7; color:#333; margin:0; }
.baa-row .baa-arrow{ flex:0 0 auto; align-self:center; color:#555; font-size:19px; font-weight:700; }

/* ==========================================================================
   DX03-09 データドリブン思考
   ========================================================================== */

/* ---- Old Way / New Way ---- */
.way-two{ display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 8px; }
.way-two .wy{ flex:1 1 280px; min-width:265px; padding:16px 18px 18px; text-align:center; }
.way-two .wy.is-old{ background:#DEDEDE; }
.way-two .wy.is-new{ background:#FCF6D8; }
.way-two .wy-head{ font-size:14.5px; font-weight:800; color:var(--navy); margin:0 0 10px; }
.way-two .wy-ic{ color:var(--navy); line-height:0; margin-bottom:8px; }
.way-two .wy-cap{ font-size:11.5px; color:#333; margin:0 0 8px; line-height:1.6; }
.way-two .wy-quote{
  background:#fff; border-radius:4px; padding:9px 12px;
  font-size:11.5px; color:#333; text-align:left; line-height:1.6;
  display:flex; gap:9px; align-items:center;
}
.way-two .wy-res{
  display:inline-block; margin-top:12px; background:#E24C4C; color:#fff;
  border-radius:999px; padding:5px 24px; font-size:12px; font-weight:700;
}

/* ---- 定量／定性データ ---- */
.qq-two{ display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 4px; }
.qq-two .qq{ flex:1 1 280px; min-width:265px; padding:14px 18px 16px; }
.qq-two .qq.is-quant{ background:#DEDEDE; }
.qq-two .qq.is-qual{ background:var(--pale-blue); }
.qq-two .qq-head{ display:flex; align-items:center; gap:10px; margin-bottom:2px; }
.qq-two .qq-head b{ font-size:15px; font-weight:800; color:#222; }
.qq-two .qq.is-qual .qq-head b{ color:var(--blue); }
.qq-two .qq-sub{ font-size:12.5px; font-weight:800; color:#222; margin:0 0 8px; padding-left:46px; }
.qq-two .qq.is-qual .qq-sub{ color:var(--blue); }
.qq-two .qq p{ font-size:11.5px; line-height:1.8; color:#333; margin:0; text-align:center; }
.qq-arrows{ display:flex; gap:14px; }
.qq-arrows span{ flex:1 1 280px; min-width:265px; text-align:center; color:var(--navy); line-height:0; padding:4px 0; }

/* ---- 3ステップの円フロー ---- */
.duo-band{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin:14px 0 12px; }
.duo-band .db{
  flex:1 1 250px; min-width:230px; text-align:center; padding:24px 14px;
  font-size:15px; font-weight:800; color:#222; line-height:1.6;
}
.duo-band .db.is-a{ background:#DEDEDE; }
.duo-band .db.is-b{ background:var(--pale-blue); }
.duo-band .db-arrow{ flex:0 0 auto; color:var(--navy); line-height:0; }
.circle3{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:12px 0 8px; }
.circle3 .c3{
  flex:0 0 180px; height:180px; border-radius:50%; background:var(--pale-blue);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:14px; box-sizing:border-box;
}
.circle3 .c3-ic{ color:var(--blue); line-height:0; margin-bottom:6px; }
.circle3 .c3-name{ font-size:15px; font-weight:800; color:var(--blue); margin:0 0 5px; }
.circle3 .c3-text{ font-size:11px; line-height:1.7; color:#333; margin:0; }
.circle3 .c3-arrow{ flex:0 0 auto; color:var(--navy); line-height:0; }

/* ==========================================================================
   DX03-10 データの価値(利活用)
   ========================================================================== */

.panel-wrap{ background:var(--pale-blue); border-radius:6px; padding:14px 16px 16px; margin:14px 0; }
.panel-wrap .wrap-title{
  font-size:14px; font-weight:800; color:var(--navy);
  border-bottom:1px solid #B9D5EA; padding-bottom:7px; margin:0 0 12px;
}
.flow-panels{
  display:flex; align-items:stretch; justify-content:center;
  gap:10px; flex-wrap:wrap; margin:0;
}
.flow-panels .fp{
  flex:1 1 160px; min-width:150px; text-align:center;
  padding:14px 12px 16px; border-radius:4px;
}
.flow-panels .fp.is-grey{ background:#DEDEDE; }
.flow-panels .fp.is-white{ background:#fff; border:1px solid #C6D3DE; }
.flow-panels .fp-ic{ color:var(--navy); line-height:0; margin-bottom:8px; }
.flow-panels .fp-name{ font-size:14px; font-weight:800; color:var(--navy); margin:0 0 2px; }
.flow-panels .fp-sub{ font-size:11.5px; color:#333; margin:0; }
.flow-panels .fp-text{ font-size:11.5px; line-height:1.7; color:var(--blue); font-weight:700; margin:6px 0 0; }
.flow-panels .fp-arrow{ flex:0 0 auto; align-self:center; color:var(--navy); line-height:0; }

/* ---- 活用法カード（図＋解説） ---- */
.use-card{
  border:1px solid #C6D3DE; border-radius:6px; padding:16px 18px;
  display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; margin:10px 0 18px;
}
.use-card .uc-left{ flex:1 1 250px; min-width:230px; text-align:center; }
.use-card .uc-title{ font-size:13.5px; font-weight:800; color:var(--blue); margin:0 0 10px; }
.use-card .uc-left img{ max-width:210px; height:auto; }
.use-card .uc-cap{ font-size:11px; line-height:1.75; color:#333; text-align:left; margin:10px 0 0; }
.use-card .uc-right{ flex:1 1 250px; min-width:230px; background:var(--pale-blue); border-radius:4px; padding:12px 14px; }
.use-card .uc-right b{ display:block; font-size:12.5px; color:var(--navy); text-align:center; margin-bottom:6px; }
.use-card .uc-right p{ font-size:11px; line-height:1.85; color:#333; margin:0; }

/* ---- 情報パネル（濃紺見出し＋本文） ---- */
.info-panel{ margin-bottom:12px; }
.info-panel .ip-head{
  background:var(--navy); color:#fff; font-size:12px; font-weight:700;
  padding:5px 12px; border-radius:3px 3px 0 0;
}
.info-panel .ip-body{
  background:#fff; border:1px solid #C6D3DE; border-top:none;
  border-radius:0 0 3px 3px; padding:10px 14px;
  font-size:11px; line-height:1.85; color:#333;
}
.info-panel .ip-body li{ list-style:none; display:flex; gap:7px; align-items:flex-start; margin-bottom:3px; }
.info-panel .ip-body li svg{ flex:0 0 auto; margin-top:3px; color:var(--blue); }

/* ==========================================================================
   DX03-11 データガバナンスと民主化
   ========================================================================== */

/* ---- 2つの罠（守りすぎ／攻めすぎ） ---- */
.trap-two{ display:flex; gap:0; flex-wrap:wrap; margin:14px 0 10px; }
.trap-two .tt{ flex:1 1 250px; min-width:240px; text-align:center; padding:0 16px; box-sizing:border-box; }
.trap-two .tt:first-child{ border-right:1px dashed #C6D3DE; }
.trap-two .tt-head{ font-size:12.5px; font-weight:700; color:#333; line-height:1.7; margin:0 0 16px; }
.trap-two .tt-fig{ height:110px; display:flex; align-items:center; justify-content:center; }
.trap-two .tt-fig img{ max-height:100%; width:auto; }
.trap-two .tt-cap{ font-size:12px; color:#333; line-height:1.7; margin:14px 0 0; }

/* ---- 工場長／技術本部 ---- */
.factory-two{
  background:#DEDEDE; border-radius:8px; padding:18px 20px 20px;
  display:flex; gap:20px; flex-wrap:wrap; margin:12px 0;
}
.factory-two .ft{ flex:1 1 220px; min-width:200px; text-align:center; }
.factory-two .ft-bubble{
  display:inline-block; position:relative; margin-bottom:18px;
  background:#fff; border:1px solid var(--navy); border-radius:999px;
  padding:6px 16px; font-size:12px; font-weight:700; color:#222;
}
.factory-two .ft-bubble::after{
  content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  border:8px solid transparent; border-top-color:var(--navy); border-bottom:0;
}
.factory-two .ft-fig{ height:100px; display:flex; align-items:flex-end; justify-content:center; }
.factory-two .ft-fig img{ max-height:100%; width:auto; }
.factory-two .ft-name{ font-size:13px; font-weight:700; color:#222; margin:12px 0 0; line-height:1.5; }

/* ---- 車台の共通化 ---- */
.platform{ max-width:480px; margin:10px auto 6px; }
.platform .pf-box{ border:1.5px solid var(--navy); border-radius:6px; padding:16px 12px 12px; }
.platform .pf-cars{ display:flex; align-items:flex-end; justify-content:space-around; gap:10px; flex-wrap:wrap; }
.platform .pf-car{ text-align:center; }
.platform .pf-car img{ height:44px; width:auto; }
.platform .pf-car span{ display:block; font-size:11.5px; color:#333; margin-top:6px; }
.platform .pf-down{ text-align:center; color:#8A8A8A; font-size:20px; line-height:1; margin:10px 0 0; }
.platform .pf-base{
  background:#4A4A4A; color:#fff; text-align:center;
  font-size:13.5px; font-weight:700; padding:10px 0; border-radius:4px; margin-top:8px;
}
.platform .pf-wheels{ display:flex; justify-content:space-around; margin:-13px 30px 0; }
.platform .pf-wheels i{ width:26px; height:26px; border-radius:50%; background:#1B1B1B; display:block; }

/* ---- 5種類の届け先 ---- */
.deliver5{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; margin:14px 0 10px; justify-content:center; }
.deliver5 .d5-left{ flex:0 0 auto; text-align:center; }
.deliver5 .d5-left img{ height:150px; width:auto; }
.deliver5 .d5-left p{ font-size:13px; font-weight:700; color:#222; margin:10px 0 0; line-height:1.5; }
.deliver5 .d5-list{ flex:0 1 300px; min-width:260px; }
.deliver5 .d5-row{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.deliver5 .d5-row .d5-ar{ flex:0 0 auto; color:var(--navy); line-height:0; }
.deliver5 .d5-row .d5-no{ flex:0 0 auto; font-size:12.5px; color:#222; }
.deliver5 .d5-row .d5-ic{ flex:0 0 32px; text-align:center; line-height:0; }
.deliver5 .d5-row .d5-ic img{ max-height:26px; width:auto; }
.deliver5 .d5-row .d5-name{ font-size:13px; color:#222; }

/* ==========================================================================
   DX03-12 BIの紹介(BIツール紹介(PowerBI))
   ========================================================================== */

/* ---- 表計算ソフト VS BIツール ---- */
.vs-two{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; margin:12px 0 10px; }
.vs-two .v2{ flex:1 1 260px; min-width:250px; padding:14px 16px 16px; text-align:center; }
.vs-two .v2.is-excel{ background:#DEDEDE; }
.vs-two .v2.is-bi{ background:var(--pale-blue); }
.vs-two .v2-ic{ color:var(--navy); line-height:0; margin-bottom:6px; }
.vs-two .v2-name{ font-size:15px; font-weight:800; color:var(--navy); margin:0; }
.vs-two .v2-sub{ font-size:11.5px; color:var(--navy); margin:2px 0 8px; }
.vs-two .v2-feat{ font-size:12px; font-weight:800; color:#222; margin:0 0 4px; letter-spacing:.2em; }
.vs-two .v2-list{ font-size:11.5px; line-height:1.9; color:#333; margin:0; }
.vs-two .v2-vs{
  flex:0 0 auto; align-self:center;
  font-size:24px; font-weight:800; color:#555; padding:0 4px;
}

/* ---- 2つの問い ---- */
.ask2{ display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 6px; }
.ask2 .ak{ flex:1 1 250px; min-width:240px; text-align:center; }
.ask2 .ak-no{ font-size:13.5px; font-weight:800; color:var(--navy); margin:0 0 8px; }
.ask2 .ak-body{
  background:var(--pale-blue); border-radius:4px; padding:13px 10px;
  font-size:13px; font-weight:700; color:#222;
}

/* ---- 4つの景色マトリクス ---- */
.quad4{ display:flex; align-items:stretch; gap:8px; margin:10px 0 6px; justify-content:center; }
.quad4 .q4-ylab{
  flex:0 0 18px; align-self:center;
  font-size:12.5px; font-weight:700; color:#222;
  text-align:center; line-height:1.2; letter-spacing:0;
}
.quad4 .q4-grid{ flex:0 1 540px; display:grid; grid-template-columns:1fr 1fr; }
.quad4 .q4-cell{
  background:var(--pale-blue); padding:13px 14px; min-height:74px;
  display:flex; align-items:center; gap:10px; box-sizing:border-box;
}
.quad4 .q4-cell.is-dark{ background:var(--navy); }
.quad4 .q4-cell .q4-ic{ flex:0 0 auto; color:var(--navy); line-height:0; }
.quad4 .q4-cell.is-dark .q4-ic{ color:#fff; }
.quad4 .q4-t{ font-size:13.5px; font-weight:800; color:var(--navy); margin:0; }
.quad4 .q4-s{ font-size:11.5px; color:#333; margin:2px 0 0; }
.quad4 .q4-cell.is-dark .q4-t,
.quad4 .q4-cell.is-dark .q4-s{ color:#fff; }
.quad4 .q4-cell.is-rev{ flex-direction:row-reverse; }
.quad-cap{ text-align:center; font-size:13px; font-weight:700; color:#222; margin:6px 0; }
.quad-tags{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 4px; }
.quad-tags .qt{
  flex:1 1 140px; min-width:130px; background:var(--pale-blue); border-radius:4px;
  padding:11px 8px; text-align:center; font-size:12.5px; font-weight:800;
  color:var(--navy); line-height:1.5;
}
.quad-tags .qt.is-dark{ background:var(--navy); color:#fff; }
.quad-tags .qt span{ display:block; font-size:11px; font-weight:400; }

/* ==========================================================================
   DX03-13 DX戦略の全体概要
   ========================================================================== */

/* ---- 3枚アイコンカード ---- */
.icon3{ display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 10px; }
.icon3 .i3{
  flex:1 1 230px; min-width:215px; box-sizing:border-box;
  border:1px solid var(--navy); border-radius:4px;
  padding:16px 16px 18px; text-align:center;
}
.icon3 .i3-ic{ height:46px; display:flex; align-items:center; justify-content:center; color:var(--navy); }
.icon3 .i3-t{ font-size:14px; font-weight:800; color:#222; margin:10px 0 8px; }
.icon3 .i3-s{ font-size:11.5px; color:#333; margin:0; line-height:1.8; }

/* ---- DXデータ基盤ピラミッド ---- */
.dx-pyramid{ margin:18px 0 10px; }
.dx-pyramid .dp{
  background:var(--navy); color:#fff; margin:0 auto;
  padding:14px 26px; display:flex; align-items:center; gap:14px; justify-content:center;
  box-sizing:border-box;
}
.dx-pyramid .dp1{ width:60%; min-width:270px; clip-path:polygon(8% 0, 92% 0, 100% 100%, 0 100%); }
.dx-pyramid .dp2{ width:78%; min-width:300px; clip-path:polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.dx-pyramid .dp3{ width:96%; clip-path:polygon(5% 0, 95% 0, 100% 100%, 0 100%); }
.dx-pyramid .dp-ic{ flex:0 0 auto; color:#fff; line-height:0; }
.dx-pyramid .dp-t{ font-size:14px; font-weight:800; margin:0; }
.dx-pyramid .dp-s{ font-size:11px; margin:3px 0 0; color:#CFE0F2; }
.dx-pyramid .dp-arrow{ text-align:center; color:var(--navy); line-height:0; padding:5px 0; }

/* ---- 循環まとめ図 ---- */
.cycle-sum{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; margin:14px 0 10px; }
.cycle-sum .cs-fig{ flex:1 1 300px; min-width:280px; }
.cycle-sum .cs-fig svg{ width:100%; height:auto; }
.cycle-sum .cs-text{ flex:1 1 250px; min-width:240px; }
.cycle-sum .cs-text h3{ font-size:26px; font-weight:800; color:#222; margin:0 0 12px; }
.cycle-sum .cs-text h4{ font-size:15px; font-weight:800; color:var(--blue); margin:0 0 8px; }
.cycle-sum .cs-text p{ font-size:12.5px; line-height:1.95; color:#333; margin:0; }

/* ==========================================================================
   04.DX実践 共通パーツ
   ========================================================================== */

.flow-panels .fp.is-pale{ background:var(--pale-blue); }

/* ---- アナログ資産と2つのリスク（吹き出し） ---- */
.asset-risk{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin:12px 0 0; }
.asset-risk .ar-box{
  flex:0 1 300px; min-width:250px; background:#DEDEDE; border-radius:4px;
  padding:14px 16px; text-align:center;
}
.asset-risk .ar-box b{ display:block; font-size:15px; font-weight:800; color:#222; line-height:1.55; }
.asset-risk .ar-box small{ display:block; font-size:11.5px; color:#333; margin-top:7px; line-height:1.75; }
.asset-risk .ar-calls{ flex:1 1 280px; min-width:250px; }
.asset-risk .ar-call{
  position:relative; border:1px solid var(--navy); border-radius:4px;
  padding:9px 14px; font-size:12.5px; color:#222; text-align:center; margin-bottom:12px;
}
.asset-risk .ar-call:last-child{ margin-bottom:0; }
.asset-risk .ar-call::before,
.asset-risk .ar-call::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  border-style:solid; border-color:transparent; border-left:0;
}
.asset-risk .ar-call::before{ left:-9px; border-width:9px; border-right-color:var(--navy); }
.asset-risk .ar-call::after{ left:-7.4px; border-width:7.6px; border-right-color:#fff; }

/* ---- 人アイコンの流れ ---- */
.person-flow{ display:flex; align-items:flex-end; justify-content:center; gap:18px; flex-wrap:wrap; margin:12px 0; }
.person-flow .pfw{ text-align:center; }
.person-flow .pfw-ic{ height:62px; display:flex; align-items:flex-end; justify-content:center; color:var(--navy); }
.person-flow .pfw span{ display:block; font-size:11.5px; color:#333; margin-top:7px; line-height:1.6; }
.person-flow .pfw-arrow{ align-self:center; color:var(--navy); line-height:0; }

/* ---- 縦3段フロー（角丸ボックス＋下向き矢印） ---- */
.stack3{ display:flex; flex-direction:column; }
.stack3 .s3b{
  border-radius:10px; padding:16px 18px; text-align:center;
  font-size:14.5px; font-weight:700; line-height:1.75;
}
.stack3 .s3b.is-grey{ background:#DEDEDE; color:#222; }
.stack3 .s3b.is-pale{ background:var(--pale-blue); color:var(--navy); border:1px solid #9FC6E3; }
.stack3 .s3b.is-navy{ background:var(--navy); color:#fff; }
.stack3 .s3a{ text-align:center; color:var(--navy); line-height:0; padding:12px 0; }

/* ================================================================
   BD02-05 (デザイン講座)で登場する追加コンポーネント
   ================================================================ */

/* ---- レッスンタイトルブロック（縦バー＋大見出し） ---- */
.lesson-title-block{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.lesson-title-block .ltb-bar{ flex:0 0 6px; align-self:stretch; background:var(--accent,var(--navy)); border-radius:2px; }
.lesson-title-block h2{ font-size:20px; font-weight:800; color:var(--accent,var(--navy)); margin:0; }
.lesson-with-logo{ display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-bottom:14px; }
.lesson-with-logo .llogo{ flex:0 0 auto; }
.lesson-with-logo .llogo img{ width:110px; border-radius:12px; }
.lesson-with-logo p{ flex:1 1 320px; margin:0; font-size:13px; line-height:1.85; color:#333; }

/* ---- ゴールボックス（クリーム背景の番号付きリスト） ---- */
.goal-box-cream{ background:#fdecc8; border-radius:6px; padding:14px 20px; margin:14px 0; }
.goal-box-cream .gbc-title{ font-weight:800; font-size:13px; color:#333; margin-bottom:8px; }
.goal-box-cream ol{ margin:0; padding-left:20px; }
.goal-box-cream ol li{ font-size:13px; line-height:1.8; color:#333; margin-bottom:2px; }

/* ---- 用語の定義リスト（ドットリーダー） ---- */
.def-list-dotted{ margin:14px 0; }
.def-list-dotted .dl-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; font-size:13px; }
.def-list-dotted .dl-term{ flex:0 0 auto; font-weight:800; color:#222; white-space:nowrap; }
.def-list-dotted .dl-leader{ flex:0 0 auto; color:#999; letter-spacing:2px; }
.def-list-dotted .dl-desc{ flex:1; color:#333; line-height:1.7; }

/* ---- ステップカード（緑ピル＋見出し＋本文＋画像） ---- */
.step-card-green{ margin:16px 0; }
.step-card-green .scg-pill{ display:inline-block; background:#1a9c72; color:#fff; font-weight:800; font-size:13px; padding:6px 18px; border-radius:2px; margin-bottom:10px; }
.step-card-green .scg-body{ display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; }
.step-card-green .scg-text{ flex:1 1 220px; }
.step-card-green .scg-text h4{ font-size:14px; font-weight:800; color:#222; margin:0 0 8px; }
.step-card-green .scg-text p{ font-size:12.5px; line-height:1.8; color:#333; margin:0; }
.step-card-green .scg-image{ flex:1 1 280px; }
.step-card-green .scg-image img{ width:100%; border:1px solid #ddd; border-radius:4px; }

/* ---- 帯見出し（メリット／デメリット等、アクセント色の全幅バー） ---- */
.pill-header-bar{ background:var(--accent,var(--navy)); color:#fff; text-align:center; font-weight:800; font-size:14px; padding:9px; border-radius:4px; margin:16px 0 10px; }
.pill-header-bar.is-alt{ background:#555; }

/* ---- シンプルな番号付きリスト（太字リード文＋説明） ---- */
.plain-numbered-list{ margin:0 0 16px; }
.plain-numbered-list .pnl-item{ display:flex; gap:10px; margin-bottom:10px; }
.plain-numbered-list .pnl-num{ flex:0 0 auto; font-weight:800; color:var(--accent,var(--navy)); }
.plain-numbered-list .pnl-body b{ font-size:13px; color:#222; }
.plain-numbered-list .pnl-body p{ margin:3px 0 0; font-size:12.5px; line-height:1.7; color:#333; }

/* ---- チェック見出し＋コーラルボックス（まとめのポイント） ---- */
.check-heading{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14.5px; color:#222; border-bottom:1.5px dotted var(--accent,var(--navy)); padding-bottom:8px; margin:20px 0 12px; }
.check-heading .ch-icon{ flex:0 0 auto; width:22px; height:22px; border-radius:4px; background:var(--accent,var(--navy)); color:#fff; display:flex; align-items:center; justify-content:center; }
.coral-callout{ color:#e0457a; font-weight:800; font-size:14px; line-height:1.8; text-align:center; margin:0 0 16px; }

/* ---- 2列カード（緑ヘッダー：明朝体/ゴシック体 等） ---- */
.twocol-green{ display:flex; gap:16px; margin:14px 0; flex-wrap:wrap; }
.twocol-green .tg-card{ flex:1 1 240px; border-radius:6px; overflow:hidden; border:1px solid #e0e0e0; }
.twocol-green .tg-head{ background:#1a9c72; color:#fff; text-align:center; font-weight:800; font-size:13px; padding:9px; }
.twocol-green .tg-body{ padding:14px 16px; font-size:12.5px; line-height:1.8; color:#333; text-align:center; }

/* ---- ラベル付きボックス（フォント選び/配色の三原則） ---- */
.labeled-principle-box{ display:flex; border:1px solid #ddd; margin-bottom:2px; }
.labeled-principle-box .lpb-label{ flex:0 0 110px; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800; font-size:13px; color:#222; padding:14px 8px; background:#fafafa; border-right:1px solid #ddd; }
.labeled-principle-box .lpb-body{ flex:1; padding:16px 20px; }
.labeled-principle-box .lpb-item{ margin-bottom:14px; }
.labeled-principle-box .lpb-item:last-child{ margin-bottom:0; }
.labeled-principle-box .lpb-item .lpb-title{ font-weight:800; color:var(--accent,var(--navy)); font-size:13px; margin-bottom:4px; }
.labeled-principle-box .lpb-item p{ margin:0; font-size:12.5px; line-height:1.7; color:#333; }
.labeled-principle-box .lpb-item .lpb-media{ margin-top:8px; }
.labeled-principle-box .lpb-item .lpb-media img{ max-width:260px; border:1px solid #ddd; border-radius:4px; }
.labeled-principle-box .lpb-item hr{ border:none; border-top:1px dotted #ccc; margin:12px 0 0; }
.labeled-principle-box .lpb-item ul{ margin:6px 0 0; padding-left:0; list-style:none; columns:2; font-size:12px; color:#333; line-height:1.9; }

/* ---- 演習問題バー（グレーグラデーション） ---- */
.practice-bar{
  background:linear-gradient(90deg,#5a5a5a 0%,#8f8f8f 60%,#cfcfcf 100%);
  color:#fff; font-weight:800; font-size:14px; padding:10px 20px; border-radius:3px; margin:20px 0 14px;
  display:flex; align-items:center; gap:14px;
}
.practice-bar .pb-num{ background:rgba(255,255,255,0.25); padding:3px 12px; border-radius:3px; font-size:12.5px; }
.hint-box{ background:#fbe4c4; border-radius:4px; padding:10px 16px; margin:14px 0; font-size:12.5px; color:#333; display:flex; gap:10px; align-items:baseline; }
.hint-box b{ color:#a15a00; flex:0 0 auto; }
.choice-row-plain{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
.choice-row-plain .crp-box{ border:1px solid #999; border-radius:3px; padding:8px 16px; font-size:12.5px; font-weight:700; color:#222; }
.step-order-boxes{ display:flex; align-items:center; gap:10px; margin:14px 0; flex-wrap:wrap; }
.step-order-boxes .sob-box{ flex:1 1 140px; border:1px solid #999; border-radius:4px; padding:14px; text-align:center; font-weight:700; font-size:13px; color:#222; }
.step-order-boxes .sob-arrow{ color:#999; flex:0 0 auto; }

/* ---- レイアウトの4原則などのTIPSブロック ---- */
.tips-block{ border:1px solid #ddd; border-radius:6px; padding:16px 20px; margin:14px 0; }
.tips-block h5{ margin:0 0 10px; font-size:13px; font-weight:800; color:var(--accent,var(--navy)); }
.tips-block ol{ margin:0; padding-left:20px; }
.tips-block ol li{ font-size:12.5px; line-height:1.8; color:#333; margin-bottom:6px; }
.tips-block .tips-media{ margin-top:10px; }
.tips-block .tips-media img{ max-width:100%; border:1px solid #ddd; border-radius:4px; }

/* ---- 余白の吹き出しペア ---- */
.margin-demo{ display:flex; align-items:center; gap:20px; margin:16px 0; flex-wrap:wrap; }
.margin-demo .md-big{ font-size:30px; font-weight:800; color:#222; }
.margin-demo .md-bubbles{ display:flex; gap:14px; }
.margin-demo .bubble{ border:1.5px solid #999; border-radius:50%; padding:10px 18px; font-size:12.5px; font-weight:700; color:#333; }

/* ---- Zフロー図（視線の流れ） ---- */
.zflow{ text-align:center; color:#222; }
.zflow .zflow-label{ font-size:18px; font-weight:800; margin-bottom:6px; }
.zflow svg{ color:var(--accent,var(--navy)); }

/* ---- 比較テーブル（緑ヘッダー：PDF/PNG/JPEG） ---- */
.compare-table-green{ display:flex; gap:1px; margin:14px 0; background:#ddd; }
.compare-table-green .ctg-col{ flex:1; background:#fff; display:flex; flex-direction:column; }
.compare-table-green .ctg-head{ background:#1a9c72; color:#fff; text-align:center; font-weight:800; font-size:13px; padding:9px; }
.compare-table-green .ctg-sec{ padding:12px 14px; font-size:11.5px; line-height:1.7; color:#333; border-bottom:1px dashed #e2e2e2; flex:1; }
.compare-table-green .ctg-sec b{ display:block; font-size:11.5px; margin-bottom:4px; }
.compare-table-green .ctg-sec.merit b{ color:#1a9c72; }
.compare-table-green .ctg-sec.demerit b{ color:#c0392b; }
.compare-table-green .ctg-sec ul{ margin:0; padding-left:14px; }

/* ---- 実例ブロック（店舗チラシ制作等の実践例） ---- */
.practice-example{ margin:14px 0 20px; }
.practice-example h5{ font-size:13.5px; font-weight:800; color:var(--accent,var(--navy)); margin:0 0 8px; }
.practice-example .pe-media{ margin:10px 0; }
.practice-example .pe-media img{ width:100%; border:1px solid #ddd; border-radius:4px; }
.practice-example .pe-field{ margin-bottom:8px; font-size:12.5px; line-height:1.7; color:#333; }
.practice-example .pe-field b{ color:#222; }
.layout-points-green{ background:#1a9c72; color:#fff; border-radius:4px; padding:12px 18px; margin:10px 0; }
.layout-points-green .lpg-title{ text-align:center; font-weight:800; font-size:12.5px; margin-bottom:8px; }
.layout-points-green ol{ margin:0; padding-left:18px; }
.layout-points-green ol li{ font-size:12px; line-height:1.8; }

@media (max-width:720px){
  .labeled-principle-box{ flex-direction:column; }
  .labeled-principle-box .lpb-label{ flex-direction:row; border-right:none; border-bottom:1px solid #ddd; }
  .compare-table-green{ flex-direction:column; }
}

/* ================================================================
   ポイント囲み（.point-callout / .callout-box）
   BD01・BD02 の16ファイルで使われていたのにCSSが無く、
   ただの素の文字として出ていたため後から追加したもの
   ================================================================ */
.point-callout{
  margin:18px 0;
  padding:14px 18px 14px 20px;
  background:#fff;
  border:1px solid #D8DDE3;
  border-left:5px solid var(--navy);
  border-radius:6px;
}
.point-callout .pc-head{
  display:flex; align-items:center; gap:7px;
  font-size:14.5px; font-weight:800; color:var(--navy);
  margin-bottom:7px;
  padding-bottom:7px;
  border-bottom:1px dotted #C8D2DC;
}
.point-callout .pc-head svg{ flex:0 0 auto; color:var(--blue); }
.point-callout p{ margin:4px 0 0; font-size:14px; line-height:1.85; color:#333; }
.point-callout p:first-of-type{ margin-top:0; }

.callout-box{
  margin:14px 0;
  padding:13px 16px;
  background:var(--pale-blue);
  border:1px solid #9FC6E3;
  border-radius:6px;
  font-size:13.5px;
  line-height:1.8;
  color:#333;
}

/* ================================================================
   BD01・BD02 で使われていたのにCSSが無かった部品
   （素の文字として表示されていたため後から追加）
   ================================================================ */

/* ---- ステップ見出しバー（ステップ1｜レイヤー構成を決める） ---- */
.step-label-bar{
  display:flex; align-items:stretch;
  margin:18px 0 8px;
  border-radius:4px;
  overflow:hidden;
}
.step-label-bar .slb-tag{
  flex:0 0 auto;
  background:var(--navy); color:#fff;
  font-size:12.5px; font-weight:800;
  padding:7px 14px;
  display:flex; align-items:center;
  white-space:nowrap;
}
.step-label-bar .slb-title{
  flex:1 1 auto;
  background:var(--pale-blue);
  color:var(--navy);
  font-size:14px; font-weight:800;
  padding:7px 14px;
  display:flex; align-items:center;
}

/* ---- トラブル事例カード（トラブル1｜バージョンの混乱） ---- */
.mistake-card{
  margin:14px 0;
  border:1px solid #E3CBD2;
  border-left:5px solid var(--coral);
  border-radius:6px;
  background:#fff;
  padding:13px 16px;
}
.mistake-card .mistake-head{
  display:flex; align-items:center; gap:9px;
  margin-bottom:7px;
  flex-wrap:wrap;
}
.mistake-card .mistake-tag{
  flex:0 0 auto;
  background:var(--coral); color:#fff;
  font-size:11.5px; font-weight:800;
  padding:3px 10px; border-radius:11px;
  white-space:nowrap;
}
.mistake-card .mistake-title{
  font-size:14.5px; font-weight:800; color:var(--navy);
}
.mistake-card .mistake-desc{
  margin:0; font-size:13.5px; line-height:1.8; color:#333;
}
.mistake-card .mistake-row{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:10px; padding-top:10px;
  border-top:1px dotted #DDD;
  flex-wrap:wrap;
}
.mistake-card .mistake-row-tag{
  flex:0 0 auto;
  background:var(--pale-blue); color:var(--navy);
  font-size:11.5px; font-weight:800;
  padding:3px 10px; border-radius:4px;
  white-space:nowrap;
}
.mistake-card .mistake-row-text{
  flex:1 1 240px;
  font-size:13.5px; line-height:1.8; color:#333;
}

/* ---- 記入欄をならべる演習グリッド ---- */
.practice-fill-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:8px 14px;
  margin:10px 0;
}
.practice-fill-grid .pfg-item{
  display:flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:700; color:var(--navy);
}
.practice-fill-grid .pfg-item .fill-blank{ flex:1 1 auto; }

/* ---- 計算式（解像度＝画像サイズ／印刷サイズ×2.54） ---- */
.formula-row{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:9px;
  margin:14px 0;
  padding:14px 12px;
  background:var(--pale-blue);
  border-radius:6px;
}
.formula-row .formula-pill{
  padding:8px 14px;
  border-radius:20px;
  font-size:13.5px; font-weight:800;
  background:#fff;
  border:1.5px solid #9FC6E3;
  color:var(--navy);
  text-align:center;
}
.formula-row .formula-pill.result{ background:var(--navy); border-color:var(--navy); color:#fff; }
.formula-row .formula-pill.value{ background:#fff; }
.formula-row .formula-pill.const{ background:#fff; border-color:var(--blue); color:var(--blue); }
.formula-row .formula-op{
  font-size:17px; font-weight:800; color:var(--navy);
}

/* ---- 画像を並べて見比べるパネル（モニター画面：72dpi／350dpi） ---- */
.compare-image-panel{
  margin:14px 0;
  border:1px solid #D8DDE3;
  border-radius:6px;
  overflow:hidden;
}
.compare-image-panel .cip-head{
  background:var(--navy); color:#fff;
  font-size:13px; font-weight:800;
  padding:7px 14px;
}
.compare-image-panel .cip-body{
  display:flex; align-items:flex-end; justify-content:center;
  flex-wrap:wrap; gap:26px;
  padding:16px 14px;
  background:#fff;
}
.compare-image-panel .cip-item{ text-align:center; }
.compare-image-panel .cip-item img{ display:block; margin:0 auto; }
.compare-image-panel .cip-label{
  margin-top:7px;
  font-size:12.5px; font-weight:800; color:var(--navy);
}

/* ---- 紙のサイズの入れ子図（B1の中にB2・B3…） ---- */
.paper-size-diagram{
  display:flex; flex-direction:column;
  width:260px; max-width:100%;
  aspect-ratio:1 / 1.1;
  margin:12px auto;
  border:1.5px solid currentColor;
}
.paper-size-diagram .psd-row{ display:flex; min-height:0; }
.paper-size-diagram .psd-col{ display:flex; flex-direction:column; min-width:0; }
.paper-size-diagram .psd-cell{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  border:0.5px solid currentColor;
  font-size:12px; font-weight:800;
  color:currentColor;
  min-width:0; min-height:0;
}

/* ---- そのほかの小さな部品 ---- */
.concept-divider{            /* 2つのカードの間に置く「≠」 */
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; color:var(--muted);
  padding:0 4px;
}
.conclusion-bar{             /* ページの締めの一文を帯で出す */
  background:var(--navy); color:#fff;
  text-align:center;
  font-size:14px; font-weight:800;
  padding:11px 14px;
  border-radius:4px;
  margin:16px 0;
}
.conclusion-bar.attach-top{ margin-top:0; border-radius:0 0 4px 4px; }
.mini-badge{                 /* 「ケーススタディ」などの小さな見出しタグ */
  display:inline-block;
  background:var(--blue); color:#fff;
  font-size:11.5px; font-weight:800;
  padding:3px 11px; border-radius:11px;
  margin-bottom:7px;
}
.md-label{                   /* 表の中の「メリット／デメリット」ラベル列 */
  font-weight:800;
  text-align:center;
  vertical-align:middle;
  font-size:13px;
}
.md-label.merit{ background:var(--pale-blue); color:var(--navy); }
.md-label.demerit{ background:#F7E9ED; color:#B4436A; }
.data-table.bordered td,
.data-table.bordered th{ border:1px solid #D8DDE3; }
.callout-box.center{ text-align:center; }
.tech-cards.cols-3{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.role-cards.light .role-card{ background:#fff; }

@media (max-width:720px){
  .step-label-bar{ flex-direction:column; }
  .formula-row{ flex-direction:column; }
  .compare-image-panel .cip-body{ gap:16px; }
}

/* ================================================================
   BD03-01 で登場する追加コンポーネント（2026/09/19 取り込み）
   ================================================================ */

.mini-heading{ font-size:14.5px; font-weight:800; color:var(--navy); margin:16px 0 4px; }

.mini-heading.plain{ color:#222; }

.word-bank{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 4px; }

.word-bank .wb-label{ font-size:12px; font-weight:800; color:#333; margin-right:2px; }

.word-bank .wb-pill{ background:var(--pale-blue); color:var(--navy); font-size:12.5px; font-weight:700; padding:5px 14px; border-radius:999px; }

.video-size-row{ display:flex; align-items:flex-end; justify-content:center; gap:22px; margin:14px 0 6px; flex-wrap:wrap; }

.video-size-item{ text-align:center; }

.video-size-item .vs-ratio{ font-size:11px; font-weight:700; color:var(--navy); margin-bottom:4px; }

.video-size-item .vs-box{ background:var(--pale-blue); border:2px solid var(--navy); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; color:var(--navy); margin:0 auto; }

.video-size-item.sd .vs-box{ width:100px; height:56px; }

.video-size-item.hd .vs-box{ width:140px; height:79px; }

.video-size-item.uhd .vs-box{ width:180px; height:101px; }

.video-size-item .vs-px{ font-size:10.5px; color:var(--muted); margin-top:5px; }

.data-table.schedule th{ background:var(--navy); color:#fff; text-align:center; white-space:nowrap; }

.data-table.schedule td{ text-align:center; white-space:nowrap; }

.data-table.schedule td.left{ text-align:left; white-space:normal; }

.data-table.schedule tr:nth-child(even) td{ background:#f7f7f7; }

/* ================================================================
   BD03-02 で登場する追加コンポーネント（2026/09/20 取り込み）
   ================================================================ */

.hl{ color:var(--coral); font-weight:700; }

.keyword-grid{ border:1.5px solid var(--navy); border-radius:8px; overflow:hidden; margin:14px 0; }

.keyword-grid .kg-title{ background:var(--navy); color:#fff; text-align:center; font-weight:800; font-size:15px; padding:10px; }

.keyword-grid .kg-body{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; padding:18px 20px; }

.keyword-grid .kg-body .kg-item{ font-size:14px; font-weight:700; color:#333; text-align:center; }

.keyword-grid .kg-body .kg-item.full{ grid-column:1 / -1; }

.md-label.type{ background:var(--navy); color:#fff; }


/* ================================================================
   DX04-02 業務プロセスのデジタル変革（デジタライゼーション）
   ================================================================ */

/* ---- 現場とシステム導入の対立構造 ---- */
.conflict-box{
  border:1px solid #D8DDE3;
  border-radius:6px;
  padding:16px 18px 20px;
  margin:14px 0;
  background:#fff;
}
.conflict-box .cfb-title{
  text-align:center;
  font-size:15px; font-weight:800; color:var(--navy);
  margin-bottom:14px;
}
.conflict-box .cfb-row{
  display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap;
}
.conflict-box .cfb-side{
  flex:1 1 210px; max-width:260px;
  background:#EFEFEF;
  border-radius:4px;
  padding:14px 16px 16px;
  text-align:center;
}
.conflict-box .cfb-side.is-warn{ background:#FCF6DC; }
.conflict-box .cfb-ic{
  height:48px;
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
  margin-bottom:8px;
}
.conflict-box .cfb-name{
  font-size:14px; font-weight:800; color:#222; margin-bottom:5px;
}
.conflict-box .cfb-sub{
  font-size:11.5px; color:#555; line-height:1.7;
}
.conflict-box .cfb-quote{
  font-size:12px; color:#333; line-height:1.8; font-weight:700;
}
.conflict-box .cfb-mid{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.conflict-box .cfb-mid span{
  font-size:12.5px; font-weight:800; color:#222;
}

/* ---- 章のゴールを示す帯 ---- */
.goal-band{
  background:var(--navy); color:#fff;
  text-align:center;
  font-size:15px; font-weight:800;
  padding:11px 16px;
  border-radius:4px;
  margin:18px 0 0;
}

/* ---- 新出単語の囲み ---- */
.newterm-box{
  border:1px solid #D8DDE3;
  border-radius:6px;
  padding:18px 20px 0;
  margin:20px 0 0;
  background:#fff;
}
.newterm-box .ntb-head{
  display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap;
  font-size:15.5px; font-weight:800; color:var(--navy);
  margin-bottom:10px;
}
.newterm-box .ntb-chip{
  flex:0 0 auto;
  background:var(--navy); color:#fff;
  font-size:11.5px; font-weight:800;
  padding:3px 12px; border-radius:3px;
}
.newterm-box .ntb-text{
  font-size:12.5px; line-height:1.9; color:#333;
  text-align:center;
  margin:0 0 6px;
}
.newterm-box .ntb-foot{
  background:var(--pale-blue);
  color:var(--navy);
  text-align:center;
  font-size:14px; font-weight:800;
  padding:12px 16px;
  margin:14px -20px 0;
  border-radius:0 0 5px 5px;
}

@media (max-width:720px){
  .conflict-box .cfb-row{ flex-direction:column; }
  .conflict-box .cfb-mid{ flex-direction:row; }
}

/* ---- 図を2つ並べて見比べる（点／線、Before／After） ---- */
.fig-two{
  display:flex; gap:14px; flex-wrap:wrap;
  margin:12px 0 4px;
}
.fig-two .ft2{
  flex:1 1 240px; min-width:0;
  border:1px solid #D8DDE3; border-radius:6px;
  background:#fff;
  padding:16px 16px 14px;
  display:flex; flex-direction:column;
}
.fig-two.is-plain .ft2{ border:none; background:transparent; padding:8px 0 0; }
.fig-two .ft2-fig{
  flex:1 1 auto;
  height:120px;
  display:flex; align-items:center; justify-content:center;
}
.fig-two .ft2-fig img{ max-width:100%; max-height:100%; width:auto; height:auto; }
.fig-two .ft2-cap{
  margin:12px 0 0; text-align:center;
  font-size:13px; font-weight:800; color:#222;
}
.fig-two .ft2-cap.is-navy{ color:var(--navy); }

/* ---- 5工程を1行に収めるフロー（狭い画面では横スクロール） ---- */
.flow-panels.is-compact{
  flex-wrap:nowrap; overflow-x:auto; gap:6px;
  padding-bottom:4px;
}
.flow-panels.is-compact .fp{
  flex:1 1 0; min-width:112px;
  padding:12px 6px 13px;
}
.flow-panels.is-compact .fp-name{ font-size:13px; }
.flow-panels.is-compact .fp-sub{ font-size:10.5px; }
.flow-panels.is-compact .fp-arrow{ flex:0 0 auto; align-self:center; }

/* 3枚を1行に収めたいとき（ラベルが長い場合） */
.icon3.is-tight .i3{ flex:1 1 0; min-width:155px; }
.icon3.is-tight .i3-t{ font-size:13px; }

/* 画像アイコンを丸で囲む（SVGの丸アイコンと並べるとき） */
.ic-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  background:var(--navy);
  overflow:hidden; flex:0 0 auto;
}
.ic-circle.is-open{ background:#fff; border:2.5px solid var(--navy); }
.ic-circle img{ max-width:58%; max-height:58%; width:auto; height:auto; display:block; }