/*ビジュアルエディターのスタイルを書く*/

/* =========================
   視認性改善パーツ
   編集画面・公開画面 共通
========================= */


/* =========================
   マーカー見出し
========================= */

.marker-heading {
  display: inline;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  background: linear-gradient(transparent 62%, #ffd6d6 62%);
}


/* =========================
   青い情報ボックス
========================= */

.info-box {
  position: relative;
  margin: 28px 0 34px;
  padding: 24px 28px 24px 78px;
  background: #f2fbff;
  border: 1px solid #b8e4ff;
  border-radius: 4px;
}

.info-box::before {
  content: "i";
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #8fd3ff;
  color: #fff;
  font-size: 23px;
  font-weight: 700;
  font-family: serif;
  line-height: 32px;
  text-align: center;
}

.info-box::after {
  content: "";
  position: absolute;
  left: 68px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 38px;
  background: #b8e4ff;
}

.info-box ul {
  margin: 0;
  padding-left: 1.2em;
}

.info-box li {
  margin: 8px 0;
  line-height: 1.8;
}

.info-box strong {
  font-weight: 700;
}


/* =========================
   H2直下などの判断軸リスト
========================= */

.intro-points {
  margin: 22px 0 28px;
  padding: 18px 22px 18px 42px;
  background: #f7fbff;
  border-left: 5px solid #8fd3ff;
  border-radius: 6px;
}

.intro-points li {
  margin: 9px 0;
  line-height: 1.8;
  font-size: 16px;
}

.intro-points li::marker {
  color: #4aaee8;
}


/* =========================
   一覧で整理：早見リスト
   番号＋ラベル / 作品名の2段版
========================= */

.quick-list {
  margin: 26px 0 38px !important;
  display: grid;
  gap: 24px !important;
}

.quick-item {
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid #dcdcdc !important;
  border-left: 5px solid #8fd3ff !important;
  border-radius: 5px !important;
  overflow: hidden;
}

/* 作品ごとの左線色 */
.quick-item.is-first {
  border-left-color: #8fd3ff !important;
}

.quick-item.is-movie {
  border-left-color: #f39a9a !important;
}

.quick-item.is-drama {
  border-left-color: #82c894 !important;
}

.quick-item.is-range {
  border-left-color: #b69bea !important;
}

.quick-item.is-large {
  border-left-color: #d9a441 !important;
}

/* 見出し帯 */
.quick-head {
  display: block !important;
  margin: 0 !important;
  padding: 16px 18px 18px !important;
  background: #f7fbff !important;
  border-bottom: 1px solid #dcecf8 !important;
}

/* 1行目：番号＋ラベル */
.quick-num {
  display: block !important;
  color: #2faeea;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.quick-role {
  display: inline-block !important;
  margin-left: 8px;
  padding: 3px 10px;
  background: #e4f4ff;
  color: #24627f;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
}

/* 2行目：作品名 */
.quick-title {
  display: block !important;
  margin-top: 10px;
  font-size: 19px;
  font-weight: 700;
  color: #111;
  line-height: 1.55;
}

/* 本文部分 */
.quick-body {
  padding: 16px 18px 12px !important;
}

.quick-lines {
  margin: 0 0 10px !important;
  padding-left: 1.25em;
}

.quick-lines li {
  margin: 6px 0 !important;
  line-height: 1.7;
  font-size: 15.5px;
}

.quick-lines li:last-child {
  margin-bottom: 0 !important;
}

.quick-lines li::marker {
  color: #333;
}

.quick-line-label {
  font-weight: 700;
  color: #444;
}

/* 作品の印象 */
.quick-point {
  margin: 12px 0 0 !important;
  padding: 10px 0 0 !important;
  background: transparent !important;
  border-top: 1px solid #eee4bd !important;
  border-radius: 0 !important;
  line-height: 1.7 !important;
  font-size: 15.5px;
}

.quick-point strong {
  font-weight: 700;
  color: #111;
  background: linear-gradient(transparent 68%, #fff0a8 68%);
}


/* =========================
   テーブル
========================= */

.table-wrap {
  overflow-x: auto;
  margin: 24px 0 32px;
}

.simple-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
}

.simple-table th,
.simple-table td {
  padding: 12px 14px;
  border: 1px solid #ddd;
  vertical-align: top;
  line-height: 1.7;
}

.simple-table th {
  background: #f5f7f9;
  font-weight: 700;
  color: #222;
}

.simple-table td {
  background: #fff;
}


/* =========================
   選定基準・理由ボックス
========================= */

.reason-box {
  margin: 24px 0 32px;
  padding: 18px 22px;
  background: #f7f7f7;
  border-left: 5px solid #555;
  border-radius: 5px;
}

.reason-box-title {
  margin: 0 0 10px;
  font-weight: 700;
  color: #222;
}

.reason-box ul {
  margin: 0;
  padding-left: 1.2em;
}

.reason-box li {
  margin: 7px 0;
  line-height: 1.8;
}


/* =========================
   スマホ調整
========================= */

@media (max-width: 600px) {
  .marker-heading {
    font-size: 17px;
  }

  .info-box {
    padding: 22px 18px 22px 62px;
  }

  .info-box::before {
    left: 18px;
    width: 30px;
    height: 30px;
    font-size: 21px;
    line-height: 30px;
  }

  .info-box::after {
    left: 54px;
  }

  .quick-list {
    gap: 20px !important;
    margin: 24px 0 34px !important;
  }

  .quick-head {
    padding: 14px 14px 16px !important;
  }

  .quick-title {
    margin-top: 8px;
    font-size: 17px;
  }

  .quick-body {
    padding: 14px 14px 10px !important;
  }

  .quick-lines li {
    margin: 5px 0 !important;
    font-size: 15px;
    line-height: 1.7;
  }

  .quick-point {
    margin-top: 10px !important;
    padding-top: 8px !important;
    font-size: 15px;
  }

  .simple-table {
    min-width: 620px;
    font-size: 14px;
  }

  .simple-table th,
  .simple-table td {
    padding: 10px 11px;
  }
}