@charset "UTF-8";
/* ============================================================
   じんラボリサーチ【特別編】se_worklife_lecture 共通CSS
   1. 対話の吹き出し
   2. グラフ（Chart.js）
   ============================================================ */

/* ---------- 1. 対話の吹き出し ----------
   左側（画像が左）  : <div class="talk talk--left">  … 武田さん
   右側（画像が右）  : <div class="talk talk--right"> … さまめ・うまめ
   -------------------------------------------------------- */
.talk {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 24px;
}
.talk--right {
  flex-direction: row-reverse;
}
.talk__speaker {
  flex: 0 0 80px;
  width: 80px;
  margin: 0;
  text-align: center;
}
.talk__speaker img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.talk__name {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #666;
}
.talk__bubble {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 98px);
  margin-top: 8px;
  padding: 14px 18px;
  border-radius: 8px;
  background: #f5f5f5;
  line-height: 1.8;
}
.talk__bubble p {
  margin: 0 0 0.8em;
margin-bottom:0!important;
}
.talk__bubble p:last-child {
  margin-bottom: 0;
}
/* しっぽ（article.css の .speechBubble と同じ形） */
.talk__bubble::before,
.talk--left .talk__bubble::after {
  content: "";
  position: absolute;
  top: 32px;
  border-style: solid;
}
.talk--left .talk__bubble {
  background: #fff;
  border: 2px solid #cc0000;
}
.talk--left .talk__bubble::before {
  left: 0;
  border-width: 0 18px 12px 0;
  border-color: transparent #cc0000 transparent transparent;
  translate: -100% -50%;
  transform: skew(0, -25deg);
  transform-origin: right;
}
.talk--left .talk__bubble::after {
  left: 0;
  border-width: 0 11.4px 7.6px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: -100% calc(-50% - 0.2px);
  transform: skew(0, -25deg);
  transform-origin: right;
}
/* 右側は左右反転 */
.talk--right .talk__bubble {
  background: #fdeeee;
}
.talk--right .talk__bubble::before {
  right: 0;
  border-width: 0 0 12px 18px;
  border-color: transparent transparent transparent #fdeeee;
  translate: 100% -50%;
  transform: skew(0, 25deg);
  transform-origin: left;
}

/* ---------- アイコン付きリンク（2行目以降をアイコンの右にそろえる） ---------- */
.lecture_link {
  padding-left: calc(1.3em + 2px); /* アイコン幅 + リンクの左マージン2px */
  text-indent: calc(-1.3em - 2px);
}
.lecture_link i {
  width: 1.3em;
  text-indent: 0; /* 字下げがアイコン自身に効くのを防ぐ */
  text-align: left;
}

/* ---------- 2. グラフ ---------- */
.lecture_chart {
  margin: 28px 0;
  padding:15px;
  border:6px solid #eee;
}
.lecture_chart h4 {
color:#666!important;
}
.lecture_chart__canvas {
  position: relative;
  width: 100%;
  margin: 1em 0;
}
.lecture_chart__canvas--timezone {
  height: 220px;
}
.lecture_chart__canvas--employment {
  height: 320px;
}

/* ---------- スマホ ---------- */
@media (max-width: 600px) {
  .talk {
    gap: 14px;
  }
  .talk__speaker {
    flex-basis: 56px;
    width: 56px;
  }
  .talk__speaker img {
    width: 56px;
    height: 56px;
  }
  .talk__bubble {
    max-width: calc(100% - 70px);
    margin-top: 4px;
    padding: 12px 14px;
  }
  .talk__bubble::before,
  .talk--left .talk__bubble::after {
    top: 24px;
  }
  .lecture_chart__canvas--timezone {
    height: 240px;
  }
  .lecture_chart__canvas--employment {
    height: 340px;
  }
}

/* ---------- 3. 図：年表（高額療養費制度の見直しをめぐる経緯） ---------- */
.lecture_chart .jl-tl,
.lecture_chart .jl-tl * {
  box-sizing: border-box;
}
.lecture_chart .jl-tl {
  position: relative;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.lecture_chart .jl-tl::before { /* 縦線 */
  content: "";
  position: absolute;
  left: 135px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(153,153,153,0.3);
}
.lecture_chart .jl-tl__item {
  display: grid;
  grid-template-columns: 120px 32px minmax(0, 1fr);
  align-items: center;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  background: none;
}
.lecture_chart .jl-tl__item:last-child {
  margin-bottom: 0;
}
.lecture_chart .jl-tl__date {
  font-weight: bold;
  white-space: nowrap;
}
.lecture_chart .jl-tl__dot {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cc0000;
}
.lecture_chart .jl-tl__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 48px;
  padding: 10px 16px;
  background: #f5f5f5;
  line-height: 1.5;
}
.lecture_chart .jl-tl__sub {
  font-size: 0.85em;
  font-weight: normal;
  color: #666;
}
.lecture_chart .jl-tl__sub--aside {
  margin-left: 12px;
}
/* これからの予定 */
.lecture_chart .jl-tl__item--future .jl-tl__date {
  color: #999;
}
.lecture_chart .jl-tl__item--future .jl-tl__dot {
  background: #fff;
  border: 2px solid #cc0000;
}
.lecture_chart .jl-tl__item--future .jl-tl__body {
  background: #fff;
  border: 1px dashed #999;
  color: #666;
}

/* ---------- 4. 図：「特定疾病」の特例とは ---------- */
.lecture_chart .jl-compare,
.lecture_chart .jl-compare * {
  box-sizing: border-box;
}
.lecture_chart .jl-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 12px;
}
.lecture_chart .jl-compare__card {
  padding: 16px;
}
.lecture_chart .jl-compare__card--normal {
  background: #f5f5f5;
}
.lecture_chart .jl-compare__card--special {
  background: #fdeeee;
  border: 1px solid #cc0000;
}
.lecture_chart .jl-compare__label {
  margin-bottom: 6px;
  font-size: 0.875em;
  font-weight: bold;
  color: #666;
}
.lecture_chart .jl-compare__card--special .jl-compare__label,
.lecture_chart .jl-compare__card--special .jl-compare__value {
  color: #cc0000;
}
.lecture_chart .jl-compare__value {
  margin-bottom: 8px;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.4;
}
.lecture_chart .jl-compare__text {
  font-size: 0.85em;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .lecture_chart .jl-tl::before {
    left: 5px;
  }
  .lecture_chart .jl-tl__item {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas: "dot date" ". body";
    row-gap: 4px;
    margin-bottom: 14px;
  }
  .lecture_chart .jl-tl__dot {
    grid-area: dot;
    justify-self: start;
  }
  .lecture_chart .jl-tl__date {
    grid-area: date;
  }
  .lecture_chart .jl-tl__body {
    grid-area: body;
    padding: 10px 14px;
  }
  .lecture_chart .jl-compare {
    grid-template-columns: minmax(0, 1fr);
  }
}