/* マーカー */
.text-marker-yellow,
.text-marker-pink,
.text-marker-gray,
.text-marker-blue {
  display: inline;
  padding: 0 0.08em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.text-marker-yellow {
  background-image: linear-gradient(transparent 60%, #fff3a3 50%);
}

.text-marker-pink {
  background-image: linear-gradient(transparent 60%, #ffd1df 50%);
}

.text-marker-gray {
  background-image: linear-gradient(transparent 60%, #d9d9d9 50%);
}

.text-marker-blue {
  background-image: linear-gradient(transparent 60%, #cfefff 50%);
}

/* =========================
 記事内テーブル共通
========================= */
.wp-block-table {
  width: 100%;
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
  padding: 14px 16px;
  vertical-align: top;
  line-height: 1.7;
  border: 1px solid #202020;
}

/* =========================
 1. overflowで横スクロール
 追加クラス：table-scroll
========================= */
.wp-block-table.table-scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wp-block-table.table-scroll table {
  width: max-content;
  min-width: 720px;
}

.wp-block-table.table-scroll th,
.wp-block-table.table-scroll td {
  white-space: nowrap;
  word-break: keep-all;
}

/* =========================
 2. 見出しあり＋交互に青いセル＋thダークグレー
 追加クラス：table-head-gray-blue
========================= */
.wp-block-table.table-head-gray-blue thead th {
  background-color: #333;
  color: #fff;
  font-weight: 700;
}

.wp-block-table.table-head-gray-blue tbody tr:nth-child(even) {
  background-color: #f0f0f0;
}

/* 横幅が広い場合も崩れにくくする */
.wp-block-table.table-head-gray-blue {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wp-block-table.table-head-gray-blue table {
  min-width: 640px;
}

/* =========================
 3. 左に見出し(th)、見出しはダークグレー
 追加クラス：table-side-head-gray
========================= */
.wp-block-table.table-side-head-gray tbody tr > *:first-child {
  background-color: #333;
  color: #fff;
  font-weight: 700;
  width: 28%;
}

/* 横幅が広い場合も崩れにくくする */
.wp-block-table.table-side-head-gray {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wp-block-table.table-side-head-gray table {
  min-width: 640px;
  background: #fff;
}

.wp-block-table.is-no-scroll {
  overflow-x: visible;
}

.wp-block-table.is-no-scroll table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.wp-block-table.is-no-scroll th,
.wp-block-table.is-no-scroll td {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ==========================
  SP：テーブルのセル縦並び
  追加CSSクラス：table-sp-stack
========================== */

@media screen and (max-width: 767px) {
  .wp-block-table.table-sp-stack table,
  .wp-block-table.table-sp-stack tbody,
  .wp-block-table.table-sp-stack tr,
  .wp-block-table.table-sp-stack td,
  .wp-block-table.table-sp-stack th,
  .wp-block-table.table-sp-stack tr > *:first-child {
    display: block;
    width: 100%;
  }

  .wp-block-table.table-sp-stack tr {
    border: 1px solid #202020;
  }

  .wp-block-table.table-sp-stack tr + tr {
    margin-top: 0;
  }

  .wp-block-table.table-sp-stack td,
  .wp-block-table.table-sp-stack th {
    border: none;
  }

  .wp-block-table.table-sp-stack td:first-child,
  .wp-block-table.table-sp-stack th:first-child {
    padding: 12px 16px;
    border-bottom: 1px solid #202020;
    background-color: #f5f5f5;
    font-weight: 700;
    white-space: normal;
  }

  .wp-block-table.table-sp-stack td:last-child,
  .wp-block-table.table-sp-stack th:last-child {
    padding: 16px;
  }
}
@media screen and (max-width: 767px) {
  .wp-block-table.table-side-head-gray.is-no-scroll table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .entry-content
    .wp-block-table.table-side-head-gray.is-no-scroll
    tbody
    tr
    > *:first-child {
    display: table-cell;
    width: 28%;
  }
}
/* =========================
記事内ボックス
========================= */
.editor-box {
  margin-block: 2rem;
  padding: 24px;
}

.editor-box__title {
  margin: 0 0 1rem;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.6;
}

.editor-box__body > *:first-child {
  margin-top: 0;
}

.editor-box__body > *:last-child {
  margin-bottom: 0;
}

.editor-box__body p {
  margin-block: 1em;
}

.editor-box__body ul,
.editor-box__body ol {
  margin-block: 0;
  padding-left: 1.5em;
}

.editor-box__body li + li {
  margin-top: 0.5em;
}

/* 枠線のみ */
.box-border-gray {
  border: 1px solid #333;
  background-color: #fff;
}

/* 背景色 */
.box-bg-yellow {
  background-color: #fff8d9;
  border: 1px solid #f1d66b;
}

.box-bg-blue {
  background-color: #eef8ff;
  border: 1px solid #b8dff5;
}

.box-bg-gray {
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
}

/* チェックリスト */
.box-check ul {
  list-style: none;
  padding-left: 0;
}

.box-check li {
  position: relative;
  padding-left: 1.6em;
}

.box-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

/* ==============================
   フロント・エディタ共通
============================== */

.editor-box,
.editor-styles-wrapper .editor-box {
  margin-block: 2em;
  padding: 20px;
  border: 1px solid var(--editor-box-border-color, #999);
  background-color: #f5f5f5;
  color: var(--color-text-dark);
}

.editor-box__inner,
.editor-styles-wrapper .editor-box__inner {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.editor-box__content,
.editor-styles-wrapper .editor-box__content {
  flex: 1;
  min-width: 0;
}

.editor-box__icon,
.editor-styles-wrapper .editor-box__icon {
  width: 48px;
  min-width: 48px;
  align-self: stretch;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-right: 16px;
  padding-top: 0.15em;
  border-right: 1px solid var(--editor-box-border-color, #999);
  line-height: 1;
}

.editor-box__icon::before,
.editor-styles-wrapper .editor-box__icon::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.editor-box__title,
.editor-styles-wrapper .editor-box__title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.editor-box__body,
.editor-styles-wrapper .editor-box__body {
  line-height: 1.8;
}

.editor-box__body > *:first-child,
.editor-styles-wrapper .editor-box__body > *:first-child {
  margin-top: 0;
}

.editor-box__body > *:last-child,
.editor-styles-wrapper .editor-box__body > *:last-child {
  margin-bottom: 0;
}

/* ==============================
   背景色・枠線色・アイコン色
============================== */

.editor-box--gray,
.editor-styles-wrapper .editor-box--gray {
  --editor-box-border-color: #999;
  background-color: #f2f2f2;
}

.editor-box--yellow,
.editor-styles-wrapper .editor-box--yellow {
  --editor-box-border-color: #d6a900;
  background-color: #fff1b4;
}

.editor-box--red,
.editor-styles-wrapper .editor-box--red {
  --editor-box-border-color: #ff6b6b;
  background-color: #fedada;
}

.editor-box--blue,
.editor-styles-wrapper .editor-box--blue {
  --editor-box-border-color: #3f8fd8;
  background-color: #ddf0ff;
}

/* ==============================
   アイコン
============================== */

.editor-box__icon::before,
.editor-styles-wrapper .editor-box__icon::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background-color: var(--editor-box-border-color, #999);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.editor-box--check .editor-box__icon::before,
.editor-styles-wrapper .editor-box--check .editor-box__icon::before {
  mask-image: url("../../../images/editor-box__icon/check.svg");
  -webkit-mask-image: url("../../../images/editor-box__icon/check.svg");
}

.editor-box--thumbs-up .editor-box__icon::before,
.editor-styles-wrapper .editor-box--thumbs-up .editor-box__icon::before {
  mask-image: url("../../../images/editor-box__icon/thumbs-up.svg");
  -webkit-mask-image: url("../../../images/editor-box__icon/thumbs-up.svg");
}

.editor-box--thumbs-down .editor-box__icon::before,
.editor-styles-wrapper .editor-box--thumbs-down .editor-box__icon::before {
  mask-image: url("../../../images/editor-box__icon/thumbs-down.svg");
  -webkit-mask-image: url("../../../images/editor-box__icon/thumbs-down.svg");
}

/* アイコン無し*/
.editor-box--no-icon .editor-box__inner,
.editor-styles-wrapper .editor-box--no-icon .editor-box__inner {
  display: block;
}

.editor-box--no-icon .editor-box__icon,
.editor-styles-wrapper .editor-box--no-icon .editor-box__icon {
  display: none;
}

/* ==============================
   通常リスト
============================== */

.editor-box ul,
.editor-box ol,
.editor-styles-wrapper .editor-box ul,
.editor-styles-wrapper .editor-box ol {
  margin-block: 1em 0;
  padding-inline-start: 0;
}

.editor-box li + li,
.editor-styles-wrapper .editor-box li + li {
  margin-top: 0.5em;
}

/* ==============================
   チェックリスト
============================== */

.editor-box__checkList,
.editor-styles-wrapper .editor-box__checkList {
  list-style: none;
  padding-inline-start: 0;
}

.editor-box__checkList li,
.editor-styles-wrapper .editor-box__checkList li {
  position: relative;
  padding-left: 1.6em;
}

.editor-box__checkList li::before,
.editor-styles-wrapper .editor-box__checkList li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

/* ==============================
   黒背景見出し
============================== */

.editor-box--header-dark .editor-box__title,
.editor-styles-wrapper .editor-box--header-dark .editor-box__title {
  margin: -20px -20px 20px;
  padding: 12px 20px;
  background-color: #000;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 黒背景見出しの場合、本文エリアは見出しの下から始める */
.editor-box--header-dark .editor-box__inner,
.editor-styles-wrapper .editor-box--header-dark .editor-box__inner {
  margin-top: 0;
}

/* 通常見出しの場合は、右側コンテンツ内に見出し */
.editor-box--header-normal .editor-box__title,
.editor-styles-wrapper .editor-box--header-normal .editor-box__title {
  margin-block: 0;
  margin: 0 0 8px;
}

/* 見出し部分のmarginとpaddingを外す */
.editor-box--header-dark {
  padding-top: 0;
}

.editor-box--header-dark .editor-box__title {
  margin-block: 0 !important;
}

/* ==============================
   ボックス内リストタイプ
============================== */

.editor-box__list,
.editor-styles-wrapper .editor-box__list {
  margin: 0;
  padding-inline-start: 1.5em;
  line-height: 1.8;
}

.editor-box__list li + li,
.editor-styles-wrapper .editor-box__list li + li {
  margin-top: 0.5em;
}

/* 通常リスト */
.editor-box__list--disc,
.editor-styles-wrapper .editor-box__list--disc {
  list-style-type: disc;
  margin-left: 2.5em;
}

/* ==============================
   チェックリスト
============================== */

/* フロント：ul に editor-box__list--check が付く */
.editor-box__list--check,
.editor-styles-wrapper .editor-box__list--check {
  list-style: none;
  padding-inline-start: 0;
}

/* フロント：ul.editor-box__list--check > li */
.editor-box__list--check li,
.editor-styles-wrapper .editor-box__list--check li {
  position: relative;
  padding-left: 2.5em;
  list-style: none;
}

/* フロント用チェック */
.editor-box__list--check li::before,
.editor-styles-wrapper .editor-box__list--check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  display: block;
  width: 25px;
  height: 25px;
  background-color: var(--editor-box-border-color, #999);
  mask-image: url("../../../images/editor-box__icon/check.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("../../../images/editor-box__icon/check.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* 編集画面：RichText multiline="li" の時、li 自体に editor-box__list--check が付く */
.editor-styles-wrapper li.editor-box__list--check {
  position: relative;
  padding-left: 2.5em;
  list-style: none;
}

/* 編集画面用チェック */
.editor-styles-wrapper li.editor-box__list--check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  display: block;
  width: 28px;
  height: 28px;
  background-color: var(--editor-box-border-color, #999);
  mask-image: url("../../../images/editor-box__icon/check.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("../../../images/editor-box__icon/check.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* ==============================
   SP：黒背景見出し
============================== */

@media screen and (max-width: 767px) {
  .editor-box--header-dark .editor-box__title,
  .editor-styles-wrapper .editor-box--header-dark .editor-box__title {
    margin: -20px -20px 16px;
    padding: 10px 14px;
    font-size: 1rem;
  }
}

/* ==============================
   SP調整
============================== */

@media screen and (max-width: 767px) {
  .editor-box,
  .editor-styles-wrapper .editor-box {
    padding: 20px;
    margin: 1rem 0;
  }

  .editor-box__inner,
  .editor-styles-wrapper .editor-box__inner {
    gap: 12px;
  }

  .editor-box__icon,
  .editor-styles-wrapper .editor-box__icon {
    width: 40px;
    min-width: 40px;
    height: auto;
    align-self: stretch;
    padding-right: 12px;
    padding-top: 0.15em;
  }

  .editor-box__icon::before,
  .editor-styles-wrapper .editor-box__icon::before {
    width: 24px;
    height: 24px;
  }

  .editor-box__title,
  .editor-styles-wrapper .editor-box__title {
    font-size: 1rem;
  }

  figure {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
  }
}

/* =========================================
  資料DLフォーム ラッパー
========================================= */
.p-requestFormBox {
  background-color: #434b58;
  color: #fff;
}

.p-requestFormBox__lead {
  margin: 0 0 10px !important;
  color: #f3c532;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.p-requestFormBox.p-requestFormBox--main h2 {
  margin-top: 0;
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  border-bottom: none;
}

.p-requestFormBox__inner {
  background-color: #fff;
  color: #333;
  margin-inline: auto;
}

.p-requestFormBox .cf7-step-form {
  margin: 0;
}

.p-requestFormBox .cf7-step {
  margin: 0;
}

.p-requestFormBox .cf7-progress-bar:last-child,
.p-requestFormBox .cf7-buttons:last-child {
  margin-bottom: 0;
}
