/**
 * ============================================================
 *     Morinohi CMS
 *     「トピックス詳細ページ」スタイルシート
 *     コンテンツ側と共用する内容
 * ============================================================
 */

@charset "UTF-8";

/** 
 * コンテナサイズによる出し分け
 */

/** PC */
@container (width > 768px) {
  .flexible_sentence.device-mobile {
    display: none !important;
  }
}

/** スマートフォン */
@container (width <= 767px) {
  .flexible_sentence.device-pc {
    display: none !important;
  }
}

/** 
 * 注釈
 */
.caution {
  position: relative !important;
  padding-left: 2.5rem !important;
}
.caution span.mark {
  position: absolute !important;
  left: 0;
  color: red;
}

/** 
 * カラーパレット 文字色
 */

/** 未適用 */
.text-color-unset {
  color: unset;
}

/** 黒 */
.text-color-black {
  color: #000;
}
/** 白 */
.text-color-white {
  color: #fff;
}

/** グレー */
.text-color-gray-pale {
  color: rgb(243, 243, 243);
}
.text-color-gray-light {
  color: rgb(238, 238, 238);
}
.text-color-gray-middle {
  color: rgb(204, 204, 204);
}
.text-color-gray-dark {
  color: rgb(153, 153, 153);
}
.text-color-gray-darker {
  color: rgb(102, 102, 102);
}
.text-color-gray-heavy {
  color: rgb(68, 68, 68);
}

/** 赤 */
.text-color-red-plain {
  color: rgb(255, 0, 0);
}
.text-color-red-pale {
  color: rgb(244, 204, 204);
}
.text-color-red-light {
  color: rgb(234, 153, 153);
}
.text-color-red-middle {
  color: rgb(224, 102, 102);
}
.text-color-red-dark {
  color: rgb(204, 0, 0);
}
.text-color-red-darker {
  color: rgb(153, 0, 0);
}
.text-color-red-heavy {
  color: rgb(102, 0, 0);
}

/** オレンジ */
.text-color-orange-plain {
  color: rgb(255, 153, 0);
}
.text-color-orange-pale {
  color: rgb(252, 229, 205);
}
.text-color-orange-light {
  color: rgb(249, 203, 156);
}
.text-color-orange-middle {
  color: rgb(246, 178, 107);
}
.text-color-orange-dark {
  color: rgb(230, 145, 56);
}
.text-color-orange-darker {
  color: rgb(180, 95, 6);
}
.text-color-orange-heavy {
  color: rgb(120, 63, 4);
}

/** 黄色 */
.text-color-yellow-plain {
  color: rgb(255, 255, 0);
}
.text-color-yellow-pale {
  color: rgb(255, 242, 204);
}
.text-color-yellow-light {
  color: rgb(255, 229, 153);
}
.text-color-yellow-middle {
  color: rgb(255, 217, 102);
}
.text-color-yellow-dark {
  color: rgb(241, 194, 50);
}
.text-color-yellow-darker {
  color: rgb(191, 144, 0);
}
.text-color-yellow-heavy {
  color: rgb(127, 96, 0);
}

/** 緑 */
.text-color-green-plain {
  color: rgb(0, 255, 0);
}
.text-color-green-pale {
  color: rgb(217, 234, 211);
}
.text-color-green-light {
  color: rgb(182, 215, 168);
}
.text-color-green-middle {
  color: rgb(147, 196, 125);
}
.text-color-green-dark {
  color: rgb(106, 168, 79);
}
.text-color-green-darker {
  color: rgb(56, 118, 29);
}
.text-color-green-heavy {
  color: rgb(39, 78, 19);
}

/** 水色 */
.text-color-cyan-plain {
  color: rgb(0, 255, 255);
}
.text-color-cyan-pale {
  color: rgb(208, 224, 227);
}
.text-color-cyan-light {
  color: rgb(162, 196, 201);
}
.text-color-cyan-middle {
  color: rgb(118, 165, 175);
}
.text-color-cyan-dark {
  color: rgb(69, 129, 142);
}
.text-color-cyan-darker {
  color: rgb(19, 79, 92);
}
.text-color-cyan-heavy {
  color: rgb(12, 52, 61);
}

/** 青 */
.text-color-blue-plain {
  color: rgb(0, 0, 255);
}
.text-color-blue-pale {
  color: rgb(207, 226, 243);
}
.text-color-blue-light {
  color: rgb(159, 197, 232);
}
.text-color-blue-middle {
  color: rgb(111, 168, 220);
}
.text-color-blue-dark {
  color: rgb(61, 133, 198);
}
.text-color-blue-darker {
  color: rgb(11, 83, 148);
}
.text-color-blue-heavy {
  color: rgb(7, 55, 99);
}

/** 紫 */
.text-color-purple-plain {
  color: rgb(153, 0, 255);
}
.text-color-purple-pale {
  color: rgb(217, 210, 233);
}
.text-color-purple-light {
  color: rgb(180, 167, 214);
}
.text-color-purple-middle {
  color: rgb(142, 124, 195);
}
.text-color-purple-dark {
  color: rgb(103, 78, 167);
}
.text-color-purple-darker {
  color: rgb(53, 28, 117);
}
.text-color-purple-heavy {
  color: rgb(32, 18, 77);
}

/** マゼンタ */
.text-color-magenta-plain {
  color: rgb(255, 0, 255);
}
.text-color-magenta-pale {
  color: rgb(234, 209, 220);
}
.text-color-magenta-light {
  color: rgb(213, 166, 189);
}
.text-color-magenta-middle {
  color: rgb(194, 123, 160);
}
.text-color-magenta-dark {
  color: rgb(166, 77, 121);
}
.text-color-magenta-darker {
  color: rgb(116, 27, 71);
}
.text-color-magenta-heavy {
  color: rgb(76, 17, 48);
}

/** 
 * カラーパレット 背景色
 */

/** 未適用 */
.bg-color-unset {
  background-color: unset;
}

/** 黒 */
.bg-color-black {
  background-color: #000;
}
/** 白 */
.bg-color-white {
  background-color: #fff;
}

/** グレー */
.bg-color-gray-pale {
  background-color: rgb(243, 243, 243);
}
.bg-color-gray-light {
  background-color: rgb(238, 238, 238);
}
.bg-color-gray-middle {
  background-color: rgb(204, 204, 204);
}
.bg-color-gray-dark {
  background-color: rgb(153, 153, 153);
}
.bg-color-gray-darker {
  background-color: rgb(102, 102, 102);
}
.bg-color-gray-heavy {
  background-color: rgb(68, 68, 68);
}

/** 赤 */
.bg-color-red-plain {
  background-color: rgb(255, 0, 0);
}
.bg-color-red-pale {
  background-color: rgb(244, 204, 204);
}
.bg-color-red-light {
  background-color: rgb(234, 153, 153);
}
.bg-color-red-middle {
  background-color: rgb(224, 102, 102);
}
.bg-color-red-dark {
  background-color: rgb(204, 0, 0);
}
.bg-color-red-darker {
  background-color: rgb(153, 0, 0);
}
.bg-color-red-heavy {
  background-color: rgb(102, 0, 0);
}

/** オレンジ */
.bg-color-orange-plain {
  background-color: rgb(255, 153, 0);
}
.bg-color-orange-pale {
  background-color: rgb(252, 229, 205);
}
.bg-color-orange-light {
  background-color: rgb(249, 203, 156);
}
.bg-color-orange-middle {
  background-color: rgb(246, 178, 107);
}
.bg-color-orange-dark {
  background-color: rgb(230, 145, 56);
}
.bg-color-orange-darker {
  background-color: rgb(180, 95, 6);
}
.bg-color-orange-heavy {
  background-color: rgb(120, 63, 4);
}

/** 黄色 */
.bg-color-yellow-plain {
  background-color: rgb(255, 255, 0);
}
.bg-color-yellow-pale {
  background-color: rgb(255, 242, 204);
}
.bg-color-yellow-light {
  background-color: rgb(255, 229, 153);
}
.bg-color-yellow-middle {
  background-color: rgb(255, 217, 102);
}
.bg-color-yellow-dark {
  background-color: rgb(241, 194, 50);
}
.bg-color-yellow-darker {
  background-color: rgb(191, 144, 0);
}
.bg-color-yellow-heavy {
  background-color: rgb(127, 96, 0);
}

/** 緑 */
.bg-color-green-plain {
  background-color: rgb(0, 255, 0);
}
.bg-color-green-pale {
  background-color: rgb(217, 234, 211);
}
.bg-color-green-light {
  background-color: rgb(182, 215, 168);
}
.bg-color-green-middle {
  background-color: rgb(147, 196, 125);
}
.bg-color-green-dark {
  background-color: rgb(106, 168, 79);
}
.bg-color-green-darker {
  background-color: rgb(56, 118, 29);
}
.bg-color-green-heavy {
  background-color: rgb(39, 78, 19);
}

/** 水色 */
.bg-color-cyan-plain {
  background-color: rgb(0, 255, 255);
}
.bg-color-cyan-pale {
  background-color: rgb(208, 224, 227);
}
.bg-color-cyan-light {
  background-color: rgb(162, 196, 201);
}
.bg-color-cyan-middle {
  background-color: rgb(118, 165, 175);
}
.bg-color-cyan-dark {
  background-color: rgb(69, 129, 142);
}
.bg-color-cyan-darker {
  background-color: rgb(19, 79, 92);
}
.bg-color-cyan-heavy {
  background-color: rgb(12, 52, 61);
}

/** 青 */
.bg-color-blue-plain {
  background-color: rgb(0, 0, 255);
}
.bg-color-blue-pale {
  background-color: rgb(207, 226, 243);
}
.bg-color-blue-light {
  background-color: rgb(159, 197, 232);
}
.bg-color-blue-middle {
  background-color: rgb(111, 168, 220);
}
.bg-color-blue-dark {
  background-color: rgb(61, 133, 198);
}
.bg-color-blue-darker {
  background-color: rgb(11, 83, 148);
}
.bg-color-blue-heavy {
  background-color: rgb(7, 55, 99);
}

/** 紫 */
.bg-color-purple-plain {
  background-color: rgb(153, 0, 255);
}
.bg-color-purple-pale {
  background-color: rgb(217, 210, 233);
}
.bg-color-purple-light {
  background-color: rgb(180, 167, 214);
}
.bg-color-purple-middle {
  background-color: rgb(142, 124, 195);
}
.bg-color-purple-dark {
  background-color: rgb(103, 78, 167);
}
.bg-color-purple-darker {
  background-color: rgb(53, 28, 117);
}
.bg-color-purple-heavy {
  background-color: rgb(32, 18, 77);
}

/** マゼンタ */
.bg-color-magenta-plain {
  background-color: rgb(255, 0, 255);
}
.bg-color-magenta-pale {
  background-color: rgb(234, 209, 220);
}
.bg-color-magenta-light {
  background-color: rgb(213, 166, 189);
}
.bg-color-magenta-middle {
  background-color: rgb(194, 123, 160);
}
.bg-color-magenta-dark {
  background-color: rgb(166, 77, 121);
}
.bg-color-magenta-darker {
  background-color: rgb(116, 27, 71);
}
.bg-color-magenta-heavy {
  background-color: rgb(76, 17, 48);
}

/** リスト */
.page_topics.page_topics_data .article_box .fields.flexible_sentence .text {
  ol,
  ul {
    li {
      margin-bottom: 1em;

      > ol,
      > ul {
        margin: 0.5em 0 1em 1.5em;
        li {
          list-style-type: circle;
          margin-bottom: 0.5em;
        }
      }
    }
  }
}