@charset "utf-8";
/* ################################################################################
   Object_Component_Content Decoration（コンテンツへの装飾）
   ################################################################################ */


/* ======================================================================
   Heading Decoration（見出しの装飾）
   ====================================================================== */

/* 見出しデザインのコード参考 */
/* Refernce URL: https://saruwakakun.com/html-css/reference/h-design */


/* [Foundation]
   ================================================================= */

.c-heading {
  display: block;
}




/* [Decoration]目的別
   ================================================================= */


/* ------------------------------------------------------------
   [Decoration]セクションの見出し
   ------------------------------------------------------------ */

.c-heading--section {
  margin: 0 0 1.0em;
  padding: 0;
  font-size: 1.5em;
  font-weight: bold;
}



/* ------------------------------------------------------------
   [Decoration]ページの見出し
   ------------------------------------------------------------ */

.c-heading--page {
  margin: 0 0 1.0em;
  padding: 0;
  font-size: 1.5em;
  font-weight: bold;
}



/* ------------------------------------------------------------
   [Decoration]記事内コンテンツの見出し
   ------------------------------------------------------------ */

.c-heading--content {
  margin: 0 0 1.0em;
  padding: 0;
  font-size: 1.25em;
  font-weight: bold;
}



/* ------------------------------------------------------------
   [Decoration]ウィジェットの見出し
   ------------------------------------------------------------ */

.c-heading--widget {
  margin: 0 0 1.0em;
  padding: 0;
  font-size: 1.25em;
  font-weight: bold;
}

@media screen and (max-width:959px) {
  .c-heading--widget {
    font-size: 1.25em;
  }
}

@media screen and (max-width:559px) {
  .c-heading--widget {
    font-size: 1.5em;
  }
}



/* ------------------------------------------------------------
   [Decoration]メインウィジェットの見出し
   ------------------------------------------------------------ */

.c-heading--widget-main {
  margin: 0 0 1.0em;
  padding: 0;
  font-size: 1.25em;
  font-weight: bold;
}

@media screen and (max-width:959px) {
  .c-heading--widget-main {
    font-size: 1.25em;
  }
}

@media screen and (max-width:559px) {
  .c-heading--widget-main {
    font-size: 1.5em;
  }
}




/* [Decoration]装飾の各要素の部品
   ================================================================= */


/* ------------------------------------------------------------
   [Decoration]見出しの背景色のみ
   ------------------------------------------------------------ */

.c-heading--fill-bgcolor {
  padding: 0.4em 0.6em;
  background-color: var(--keycolor-article-main);
	color: #fff;
}



/* ------------------------------------------------------------
   [Decoration]見出しの上下両端に、直線を引いている
   ------------------------------------------------------------ */

.c-heading--line-both-ends {
  padding: 0.5em 0;
  border-top: solid 0.1em var(--keycolor-article-main);
  border-bottom: solid 0.1em var(--keycolor-article-main);
}



/* ------------------------------------------------------------
   [Decoration]見出しの上下両端に、直線を引いている＆下線は細めに
   ------------------------------------------------------------ */

.c-heading--line-both-ends-bottom-narrow {
  padding: 0.5em 0;
  border-top: solid 0.1em var(--keycolor-article-main);
  border-bottom: solid 0.075em var(--keycolor-article-sub);
}



/* ------------------------------------------------------------
   [Decoration]見出しの下端に、直線を引いている
   ------------------------------------------------------------ */

.c-heading--line-lower-end {
  padding: 0 0 0.5em;
  border-bottom: solid 0.2em var(--keycolor-article-main);
}



/* ------------------------------------------------------------
   [Decoration]見出しの下端に、直線（細め）を引いている
   ------------------------------------------------------------ */

.c-heading--line-lower-end-narrow {
  padding: 0 0 0.5em;
  border-bottom: solid 0.1em var(--keycolor-article-main);
}



/* ------------------------------------------------------------
   [Decoration]見出しの下端に、点線を引いている
   ------------------------------------------------------------ */

.c-heading--line-lower-end-dotted {
  padding: 0 0 0.5em;
  border-bottom: dotted 0.12em var(--keycolor-article-main);
}



/* ------------------------------------------------------------
   [Decoration]見出しの下端に、点線を引いている＆見出しの左側に、直線を引いている
   ------------------------------------------------------------ */

.c-heading--line-lower-end-dotted-left-end-solid {
  padding: 0.5em 0 0.5em 0.75em;
  border-left: solid 0.2em var(--keycolor-article-main);
  border-bottom: dotted 0.12em var(--keycolor-article-sub);
}



/* ------------------------------------------------------------
   [Decoration]見出しの左側に、直線を引いている
   ------------------------------------------------------------ */

.c-heading--line-left-end {
  display: block;
  padding: 0.4em 0 0.4em 0.6em;
  border-left: solid 0.4em var(--keycolor-article-main);
}



/* ------------------------------------------------------------
   [Decoration]見出しの左側に、直線（細め）を引いている
   ------------------------------------------------------------ */

.c-heading--line-left-end-narrow {
  display: block;
  padding: 0.4em 0 0.4em 0.6em;
  border-left: solid 0.2em var(--keycolor-article-main);
}



/* ------------------------------------------------------------
   [Decoration]見出しの周囲を、枠線で囲っている
   ------------------------------------------------------------ */

.c-heading--line-enclosed {
  display: block;
  padding: 0.4em 0.6em;
  border: solid 0.13em var(--keycolor-article-main);
  border-radius: 0.4em;
}



/* ------------------------------------------------------------
   [Decoration]見出しを、吹き出し枠（背景色全体、しっぽ下付き）で囲っている
   ------------------------------------------------------------ */

.c-heading--frame-speech-balloon {
  display: inline-block;
  position: relative;
  min-width: auto;
  max-width: 100%;
  margin: 0 0 0.8em;
  padding: 0.5em 0.75em;
  background: var(--keycolor-article-main);
  border-radius: 0.75em;
	color: #fff;
}
.c-heading--frame-speech-balloon:after {
  content: "";
  position: absolute;
  top: 99%;
  left: 12%;
  border: 0.8em solid transparent;
  border-top: 0.8em solid var(--keycolor-article-main);
}



/* ------------------------------------------------------------
   [Decoration]見出しを、吹き出し枠（背景色全体、しっぽ上付き）で囲っている
   ------------------------------------------------------------ */

.c-heading--frame-speech-balloon-tail-top {
  display: inline-block;
  position: relative;
  min-width: auto;
  max-width: 100%;
  margin: 0.8em 0 0;
  padding: 0.5em 0.75em;
  background: var(--keycolor-article-main);
  border-radius: 0.75em;
	color: #fff;
}
.c-heading--frame-speech-balloon-tail-top:after {
  content: "";
  position: absolute;
  top: -1.5em;
  left: 12%;
  border: 0.8em solid transparent;
  border-bottom: 0.8em solid var(--keycolor-article-main);
}



/* ------------------------------------------------------------
   [Decoration]見出しの周囲を、タグ風枠で囲っている
   ------------------------------------------------------------ */

.c-heading--frame-tag {
	display: flex;
	align-items: center;
	background: var(--keycolor-article-main);
	padding: 0.4em 0.6em;
	vertical-align: middle;
	border-radius: 1.0em 0 0 1.0em;
	color: #fff;
}
.c-heading--frame-tag:before {
  content: '●';
  color: #fff;
  margin-right: 0.4em;
}



/* ------------------------------------------------------------
   [Decoration]見出しの周囲を、ステッチ枠で囲っている
   ------------------------------------------------------------ */

.c-heading--frame-stitch {
  margin-left: 0.4em !important;
  margin-right: 0.4em !important;
  margin-bottom: 0.4em;
  margin-top: 0.4em;
  padding: 0.4em 0.6em;
  background: var(--keycolor-article-main);
  box-shadow: 0px 0px 0px 0.4em var(--keycolor-article-main);
  border: dashed 0.14em var(--keycolor-article-sub);
	color: #fff;
}

.p-article-contents .c-heading--frame-stitch {
  margin-bottom: 1.5em;
}



/* ------------------------------------------------------------
   [Decoration]見出しの周囲を、ステッチ枠で囲っている＆スティッチの左端が折れている
   ------------------------------------------------------------ */

.c-heading--frame-stitch-corner-broken {
  position: relative;
  margin-left: 0.4em !important;
  margin-right: 0.4em !important;
  margin-bottom: 0.4em;
  margin-top: 0.4em;
  padding: 0.4em 0.6em;
  background: var(--keycolor-article-main);
  box-shadow: 0px 0px 0px 0.4em var(--keycolor-article-main);
  border: dashed 0.14em var(--keycolor-article-sub);
	color: #fff;
}
.c-heading--frame-stitch-corner-broken:after {
  position: absolute;
  content: '';
	left: -0.518em;
	top: -0.57em;
  border-width: 0 0 1.0em 1.0em;
  border-style: solid;
  border-color: #fff #fff var(--keycolor-article-main);
  box-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 0.15);
}

.p-article-contents .c-heading--frame-stitch-corner-broken {
  margin-bottom: 1.5em;
}



/* ------------------------------------------------------------
   [Decoration]見出しの周囲を、帯枠で囲っている
   ------------------------------------------------------------ */

.c-heading--frame-belt {
  position: relative;
  margin-bottom: 0.9em;
  padding: 0.4em 0.6em;
  background: var(--keycolor-article-main);
	color: #fff;
}
.c-heading--frame-belt::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 0.9em transparent;
  border-right: solid 1.1em var(--keycolor-article-sub);
}

.p-article-contents .c-heading--frame-belt, 
.p-article-contents .c-heading--frame-belt, 
.p-article-contents .c-heading--frame-belt, 
.p-article-contents .c-heading--frame-belt, 
.p-article-contents .c-heading--frame-belt, 
.p-article-contents .c-heading--frame-belt {
  margin-bottom: 1.5em;
}




/* [旧仕様][Decoration]装飾の各要素の部品
   ================================================================= */

/* 旧仕様では、見出しのカラーパターンごとに、クラス名を変えていました。
/* ただ、パターン数の増加に合わせ、QuickTagsのボタン数が過剰になったため、装飾のカラー指定は別の仕様で行う事になりました。 */


/* ------------------------------------------------------------
   [Decoration]見出しの背景色のみ
   ------------------------------------------------------------ */

.c-heading--fill-bgcolor-gray {
  padding: 0.5em 0.75em;
  background-color: #bfbfbf;
}

.c-heading--fill-bgcolor-red {
  padding: 0.5em 0.75em;
  background-color: #ffe5e7;
}

.c-heading--fill-bgcolor-pink {
  padding: 0.5em 0.75em;
  background-color: #ffe5f3;
}

.c-heading--fill-bgcolor-blue {
  padding: 0.5em 0.75em;
  background-color: #e5f2ff;
}

.c-heading--fill-bgcolor-green {
  padding: 0.5em 0.75em;
  background-color: #f0ffe5;
}

.c-heading--fill-bgcolor-orange {
  padding: 0.5em 0.75em;
  background-color: #fff0e5;
}



/* ------------------------------------------------------------
   [Decoration]見出しの下端に、直線を引いている
   ------------------------------------------------------------ */

.c-heading--line-lower-end-gray {
  padding: 0.5em 0;
  border-bottom: solid 0.2em #bfbfbf;
}

.c-heading--line-lower-end-pink {
  padding: 0.5em 0;
  border-bottom: solid 0.2em #ed4b97;
}

.c-heading--line-lower-end-blue {
  padding: 0.5em 0;
  border-bottom: solid 0.2em #a1c1e3;
}

.c-heading--line-lower-end-green {
  padding: 0.5em 0;
  border-bottom: solid 0.2em #b1ce94;
}



/* ------------------------------------------------------------
   [Decoration]見出しの下端に、直線（細め）を引いている
   ------------------------------------------------------------ */

.c-heading--line-lower-end-narrow-gray {
  padding: 0.5em 0;
  border-bottom: solid 0.1em #bfbfbf;
}

.c-heading--line-lower-end-narrow-pink {
  padding: 0.5em 0;
  border-bottom: solid 0.1em #ed4b97;
}

.c-heading--line-lower-end-narrow-blue {
  padding: 0.5em 0;
  border-bottom: solid 0.1em #a1c1e3;
}

.c-heading--line-lower-end-narrow-green {
  padding: 0.5em 0;
  border-bottom: solid 0.1em #b1ce94;
}



/* ------------------------------------------------------------
   [Decoration]見出しの下端に、点線を引いている
   ------------------------------------------------------------ */

.c-heading--line-lower-end-dotted-gray {
  padding: 0.5em 0;
  border-bottom: dotted 0.12em #bfbfbf;
}

.c-heading--line-lower-end-dotted-pink {
  padding: 0.5em 0;
  border-bottom: dotted 0.12em #ed4b97;
}

.c-heading--line-lower-end-dotted-blue {
  padding: 0.5em 0;
  border-bottom: dotted 0.12em #a1c1e3;
}

.c-heading--line-lower-end-dotted-green {
  padding: 0.5em 0;
  border-bottom: dotted 0.12em #b1ce94;
}



/* ------------------------------------------------------------
   [Decoration]見出しの下端に、点線を引いている＆見出しの左側に、直線を引いている
   ------------------------------------------------------------ */

.c-heading--line-lower-end-dotted-left-end-solid-gray {
  padding: 0.5em 0 0.5em 0.75em;
  border-left: solid 0.2em #7f7f7f;
  border-bottom: dotted 0.12em #bfbfbf;
}

.c-heading--line-lower-end-dotted-left-end-solid-pink {
  padding: 0.5em 0 0.5em 0.75em;
  border-left: solid 0.2em #ed4b97;
  border-bottom: dotted 0.12em #ed4b97;
}

.c-heading--line-lower-end-dotted-left-end-solid-blue {
  padding: 0.5em 0 0.5em 0.75em;
  border-left: solid 0.2em #a1c1e3;
  border-bottom: dotted 0.12em #a1c1e3;
}

.c-heading--line-lower-end-dotted-left-end-solid-green {
  padding: 0.5em 0 0.5em 0.75em;
  border-left: solid 0.2em #b1ce94;
  border-bottom: dotted 0.12em #b1ce94;
}



/* ------------------------------------------------------------
   [Decoration]見出しの左側に、直線を引いている
   ------------------------------------------------------------ */

.c-heading--line-left-end-gray {
  display: block;
  padding: 0.5em 0 0.5em 0.75em;
  border-left: solid 0.4em #bfbfbf;
}



/* ------------------------------------------------------------
   [Decoration]見出しの左側に、直線（細め）を引いている
   ------------------------------------------------------------ */

.c-heading--line-left-end-narrow-gray {
  display: block;
  padding: 0.5em 0 0.5em 0.75em;
  border-left: solid 0.2em #bfbfbf;
}



/* ------------------------------------------------------------
   [Decoration]見出しの周囲を、枠線で囲っている
   ------------------------------------------------------------ */

.c-heading--line-enclosed-gray {
  display: block;
  padding: 0.5em 0.75em;
  border: solid 0.13em #bfbfbf;
  border-radius: 0.4em;
}





/* ======================================================================
   Text Decoration（テキスト装飾）
   ====================================================================== */

/* 「WPプラグイン:AddQuicktag」を使用し、テキストにインラインCSSを加えています。 */


/* [テキスト装飾]マーカー（ユニークカラー）
   ================================================================= */

/* 装飾のカラーリングを、投稿者が変更する事ができます。 */
/* 記事投稿ページの「[記事]各要素のカラー指定」枠から指定します。 */
/* 下記ファイルに、ユニークカラーのスタイルを指定しています。 */
/* /site-parts/style-header-customize.php/ */


/* ユニークカラー_01
   ------------------------------------------------------- */

/* マーカー幅：普通 */
.c-text-decoration__marker-unique-color {
  padding: 0;
  background: linear-gradient(transparent 40%, #fffa91 0%) repeat scroll 0 0;
}

/* マーカー幅：狭く */
.c-text-decoration__marker-unique-color--narrow {
  padding: 0;
  background: linear-gradient(transparent 60%, #fffa91 0%) repeat scroll 0 0;
}

/* マーカー幅：広く */
.c-text-decoration__marker-unique-color--wide {
  padding: 0;
  background: linear-gradient(transparent 0%, #fffa91 0%) repeat scroll 0 0;
}


/* ユニークカラー_02
   ------------------------------------------------------- */

/* マーカー幅：普通 */
.c-text-decoration__marker-unique-color-02 {
  padding: 0;
  background: linear-gradient(transparent 40%, #ffe691 0%) repeat scroll 0 0;
}

/* マーカー幅：狭く */
.c-text-decoration__marker-unique-color-02--narrow {
  padding: 0;
  background: linear-gradient(transparent 60%, #ffe691 0%) repeat scroll 0 0;
}

/* マーカー幅：広く */
.c-text-decoration__marker-unique-color-02--wide {
  padding: 0;
  background: linear-gradient(transparent 0%, #ffe691 0%) repeat scroll 0 0;
}


/* ユニークカラー_03
   ------------------------------------------------------- */

/* マーカー幅：普通 */
.c-text-decoration__marker-unique-color-03 {
  padding: 0;
  background: linear-gradient(transparent 40%, #ffdf91 0%) repeat scroll 0 0;
}

/* マーカー幅：狭く */
.c-text-decoration__marker-unique-color-03--narrow {
  padding: 0;
  background: linear-gradient(transparent 60%, #ffdf91 0%) repeat scroll 0 0;
}

/* マーカー幅：広く */
.c-text-decoration__marker-unique-color-03--wide {
  padding: 0;
  background: linear-gradient(transparent 0%, #ffdf91 0%) repeat scroll 0 0;
}


/* ユニークカラー_04
   ------------------------------------------------------- */

/* マーカー幅：普通 */
.c-text-decoration__marker-unique-color-04 {
  padding: 0;
  background: linear-gradient(transparent 40%, #ffd491 0%) repeat scroll 0 0;
}

/* マーカー幅：狭く */
.c-text-decoration__marker-unique-color-04--narrow {
  padding: 0;
  background: linear-gradient(transparent 60%, #ffd491 0%) repeat scroll 0 0;
}

/* マーカー幅：広く */
.c-text-decoration__marker-unique-color-04--wide {
  padding: 0;
  background: linear-gradient(transparent 0%, #ffd491 0%) repeat scroll 0 0;
}


/* ユニークカラー_05
   ------------------------------------------------------- */

/* マーカー幅：普通 */
.c-text-decoration__marker-unique-color-05 {
  padding: 0;
  background: linear-gradient(transparent 40%, #ffca91 0%) repeat scroll 0 0;
}

/* マーカー幅：狭く */
.c-text-decoration__marker-unique-color-05--narrow {
  padding: 0;
  background: linear-gradient(transparent 60%, #ffca91 0%) repeat scroll 0 0;
}

/* マーカー幅：広く */
.c-text-decoration__marker-unique-color-05--wide {
  padding: 0;
  background: linear-gradient(transparent 0%, #ffca91 0%) repeat scroll 0 0;
}




/* [テキスト装飾]マーカー_アニメーション（ユニークカラー）
   ================================================================= */

/* ページスクロールに合わせて、マーカーの線が横に引かれていくアニメーションが施されています。 */
/* 装飾のカラーリングを、投稿者が変更する事ができます。 */
/* 記事投稿ページの「[記事]各要素のカラー指定」枠から指定します。 */
/* 下記ファイルに、ユニークカラーのスタイルを指定しています。 */
/* /site-parts/style-header-customize.php/ */
/* スクロール判定用のJSは、下記のディレクトリに格納されています。 */
/* /js/script.js */


/* ユニークカラー_01
   ------------------------------------------------------- */

/* マーカー幅：普通 */
.c-marker-animation__unique-color {
  padding: 0;
  background: -webkit-linear-gradient(left, #fffa91 50%, transparent 50%);
  background: -moz-linear-gradient(left, #fffa91 50%, transparent 50%);
  background: linear-gradient(left, #fffa91 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.8em;
  background-position: 100% 0.4em;
  transition: 2s;
}

.c-marker-animation__unique-color.is-active {
  background-position: 0% 0.4em;
}

/* マーカー幅：狭く */
.c-marker-animation__unique-color--narrow {
  padding: 0;
  background: -webkit-linear-gradient(left, #fffa91 50%, transparent 50%);
  background: -moz-linear-gradient(left, #fffa91 50%, transparent 50%);
  background: linear-gradient(left, #fffa91 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.8em;
  background-position: 100% 0.6em;
  transition: 2s;
}

.c-marker-animation__unique-color--narrow.is-active {
  background-position: 0% 0.6em;
}

/* マーカー幅：広く */
.c-marker-animation__unique-color--wide {
  padding: 0;
  background: -webkit-linear-gradient(left, #fffa91 50%, transparent 50%);
  background: -moz-linear-gradient(left, #fffa91 50%, transparent 50%);
  background: linear-gradient(left, #fffa91 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 1.0em;
  background-position: 100% 0;
  transition: 2s;
}
.c-marker-animation__unique-color--wide.is-active {
  background-position: 0% 0;
}


/* ユニークカラー_02
   ------------------------------------------------------- */

/* マーカー幅：普通 */
.c-marker-animation__unique-color-02 {
  padding: 0;
  background: -webkit-linear-gradient(left, #ffe691 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffe691 50%, transparent 50%);
  background: linear-gradient(left, #ffe691 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.8em;
  background-position: 100% 0.4em;
  transition: 2s;
}
.c-marker-animation__unique-color-02.is-active {
  background-position: 0% 0.4em;
}

/* マーカー幅：狭く */
.c-marker-animation__unique-color-02--narrow {
  padding: 0;
  background: -webkit-linear-gradient(left, #ffe691 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffe691 50%, transparent 50%);
  background: linear-gradient(left, #ffe691 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.8em;
  background-position: 100% 0.6em;
  transition: 2s;
}
.c-marker-animation__unique-color-02--narrow.is-active {
  background-position: 0% 0.6em;
}

/* マーカー幅：広く */
.c-marker-animation__unique-color-02--wide {
  padding: 0;
  background: -webkit-linear-gradient(left, #ffe691 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffe691 50%, transparent 50%);
  background: linear-gradient(left, #ffe691 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 1.0em;
  background-position: 100% 0;
  transition: 2s;
}
.c-marker-animation__unique-color-02--wide.is-active {
  background-position: 0% 0;
}


/* ユニークカラー_03
   ------------------------------------------------------- */

/* マーカー幅：普通 */
.c-marker-animation__unique-color-03 {
  padding: 0;
  background: -webkit-linear-gradient(left, #ffdf91 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffdf91 50%, transparent 50%);
  background: linear-gradient(left, #ffdf91 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.8em;
  background-position: 100% 0.4em;
  transition: 2s;
}
.c-marker-animation__unique-color-03.is-active {
  background-position: 0% 0.4em;
}

/* マーカー幅：狭く */
.c-marker-animation__unique-color-03--narrow {
  padding: 0;
  background: -webkit-linear-gradient(left, #ffdf91 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffdf91 50%, transparent 50%);
  background: linear-gradient(left, #ffdf91 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.8em;
  background-position: 100% 0.6em;
  transition: 2s;
}
.c-marker-animation__unique-color-03--narrow.is-active {
  background-position: 0% 0.6em;
}

/* マーカー幅：広く */
.c-marker-animation__unique-color-03--wide {
  padding: 0;
  background: -webkit-linear-gradient(left, #ffdf91 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffdf91 50%, transparent 50%);
  background: linear-gradient(left, #ffdf91 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 1.0em;
  background-position: 100% 0;
  transition: 2s;
}
.c-marker-animation__unique-color-03--wide.is-active {
  background-position: 0% 0;
}


/* ユニークカラー_04
   ------------------------------------------------------- */

/* マーカー幅：普通 */
.c-marker-animation__unique-color-04 {
  padding: 0;
  background: -webkit-linear-gradient(left, #ffd491 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffd491 50%, transparent 50%);
  background: linear-gradient(left, #ffd491 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.8em;
  background-position: 100% 0.4em;
  transition: 2s;
}
.c-marker-animation__unique-color-04.is-active {
  background-position: 0% 0.4em;
}

/* マーカー幅：狭く */
.c-marker-animation__unique-color-04--narrow {
  padding: 0;
  background: -webkit-linear-gradient(left, #ffd491 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffd491 50%, transparent 50%);
  background: linear-gradient(left, #ffd491 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.8em;
  background-position: 100% 0.6em;
  transition: 2s;
}
.c-marker-animation__unique-color-04--narrow.is-active {
  background-position: 0% 0.6em;
}

/* マーカー幅：広く */
.c-marker-animation__unique-color-04--wide {
  padding: 0;
  background: -webkit-linear-gradient(left, #ffd491 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffd491 50%, transparent 50%);
  background: linear-gradient(left, #ffd491 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 1.0em;
  background-position: 100% 0;
  transition: 2s;
}
.c-marker-animation__unique-color-04--wide.is-active {
  background-position: 0% 0;
}


/* ユニークカラー_05
   ------------------------------------------------------- */

/* マーカー幅：普通 */
.c-marker-animation__unique-color-05 {
  padding: 0;
  background: -webkit-linear-gradient(left, #ffca91 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffca91 50%, transparent 50%);
  background: linear-gradient(left, #ffca91 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.8em;
  background-position: 100% 0.4em;
  transition: 2s;
}
.c-marker-animation__unique-color-05.is-active {
  background-position: 0% 0.4em;
}

/* マーカー幅：狭く */
.c-marker-animation__unique-color-05--narrow {
  padding: 0;
  background: -webkit-linear-gradient(left, #ffca91 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffca91 50%, transparent 50%);
  background: linear-gradient(left, #ffca91 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.8em;
  background-position: 100% 0.6em;
  transition: 2s;
}
.c-marker-animation__unique-color-05--narrow.is-active {
  background-position: 0% 0.6em;
}

/* マーカー幅：広く */
.c-marker-animation__unique-color-05--wide {
  padding: 0;
  background: -webkit-linear-gradient(left, #ffca91 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffca91 50%, transparent 50%);
  background: linear-gradient(left, #ffca91 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 1.0em;
  background-position: 100% 0;
  transition: 2s;
}
.c-marker-animation__unique-color-05--wide.is-active {
  background-position: 0% 0;
}




/* [テキスト装飾]フレーム（ユニークカラー）
   ================================================================= */

/* 装飾のカラーリングを、投稿者が変更する事ができます。 */
/* 記事投稿ページの「[記事]各要素のカラー指定」枠から指定します。 */
/* 下記ファイルに、ユニークカラーのスタイルを指定しています。 */
/* /site-parts/style-header-customize.php/ */


/* ------------------------------------------------------------
   フレーム_周囲_枠線
   ------------------------------------------------------------ */

/* ユニークカラー_01
   ------------------------------------------------------- */

.c-text-decoration__frame-line-unique-color {
  margin: 1em 0;
  padding: 0.6em 0.8em;
  border: solid 0.12em var(--keycolor-article-main);
  border-radius: 0.4em;
  line-height: 1.5;
  letter-spacing: 0.05em;
}


/* ユニークカラー_02
   ------------------------------------------------------- */

.c-text-decoration__frame-line-unique-color-02 {
  margin: 1em 0;
  padding: 0.6em 0.8em;
  border: solid 0.12em var(--keycolor-article-main);
  border-radius: 0.4em;
  line-height: 1.5;
  letter-spacing: 0.05em;
}



/* ------------------------------------------------------------
   フレーム_背景色のみ_枠線無し
   ------------------------------------------------------------ */

/* ユニークカラー_01
   ------------------------------------------------------- */
.c-text-decoration__frame-bgcolor-unique-color {
  margin: 1em 0;
  padding: 0.6em 0.8em;
  background-color: var(--keycolor-article-sub);
  border-radius: 0.4em;
}


/* ユニークカラー_02
   ------------------------------------------------------- */

.c-text-decoration__frame-bgcolor-unique-color-02 {
  margin: 1em 0;
  padding: 0.6em 0.8em;
  background-color: var(--keycolor-article-sub);
  border-radius: 0.4em;
}




/* [テキスト装飾]フレーム（固定カラー）
   ================================================================= */


/* ------------------------------------------------------------
   注目チェック枠（背景色：濃いピンク、アイコン画像：チェック）
   ------------------------------------------------------------ */

.c-text-decoration__frame-attention-check {
  display: block;
  margin: 1.0em 0;
  padding: 0.6em 0.8em 0.6em 2.5em;
  background: url(../img/article-decoration/icon_cercle-check.png) 0.4em center no-repeat scroll #fff6f6;
  border: solid 0.12em #f69d9a;
  border-radius: 0.4em;
  letter-spacing: 0.05em;
  line-height: 1.5;
}



/* ------------------------------------------------------------
   CVボタン枠（背景色：グリーン、アイコン画像：矢印）
   ------------------------------------------------------------ */

.c-text-decoration__frame-cv-button {
  display: block;
  margin: 1.0em 0.14em;
  padding: 0 !important;
  background: url(../img/article-decoration/icon_frame-arrow.png) 0.4em center no-repeat scroll #82d247;
  border: solid 0.12em #fff;
  border-radius: 0.4em;
  box-shadow: 0 0.12em 0.12em 0.12em #e6e6e6;
  color: #fffd72;
  letter-spacing: 0.05em;
  line-height: 1.5;
  -webkit-transition: all 1.2s;
  transition: all 1.2s;
}
.c-text-decoration__frame-cv-button:hover, 
.c-text-decoration__frame-cv-button:active, 
.c-text-decoration__frame-cv-button:focus {
  background: url("../img/article-decoration/icon_frame-arrow.png") 0.8em center no-repeat scroll #68b92d;
  color: #fffd72;
  -webkit-transition: all 1.2s;
  transition: all 1.2s;
}

.c-text-decoration__frame-cv-button a {
  display: block;
  padding: 0.6em 0.6em 0.6em 2.5em;
  color: #fffd72;
}

.c-text-decoration__frame-cv-button a:hover, 
.c-text-decoration__frame-cv-button a:active, 
.c-text-decoration__frame-cv-button a:focus {
  color: #fffd72;
  text-decoration: none;
}




/* [テキスト装飾]画像アイコン付きメッセージ
   ================================================================= */

/* Reference URL: https://saruwakakun.com/html-css/reference/speech-bubble */


/* ------------------------------------------------------------
   メッセージ_右側、画像アイコン_左側
   ------------------------------------------------------------ */

.c-icon-massage {
  display: flex;
  margin: 1.0em 0;
}

.c-icon-massage__image-frame {
  order: 1;
  flex: 1;
  align-self: center;
}

.c-icon-massage__image {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0.5em !important;
}

.c-icon-massage__message-frame {
  order: 2;
  flex: 4;
  align-self: center;
  padding: 0 0 0 1.6em;
}

.c-icon-massage__message {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  color: #313131;
  font-size: 0.9em;
}

.c-icon-massage__message p:last-child {
  margin: 0;
}

.c-icon-massage__message img {
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0.5em 0 !important;
  padding: 0 !important;
  border-radius: 0.5em !important;
}



/* ------------------------------------------------------------
   メッセージ_左側、画像アイコン_右側
   ------------------------------------------------------------ */

.c-icon-massage--message-right {
}

.c-icon-massage__image-frame--message-right {
  order: 2;
}

.c-icon-massage__image--message-right {
}

.c-icon-massage__message-frame--message-right {
  order: 1;
  padding: 0 1.6em 0 0;
}

.c-icon-massage__message--message-right {
  margin: 0;
}




/* [テキスト装飾]吹き出しメッセージ_画像アイコン付き
   ================================================================= */

/* Reference URL: https://saruwakakun.com/html-css/reference/speech-bubble */


/* ------------------------------------------------------------
   メッセージ_右側、画像アイコン_左側
   ------------------------------------------------------------ */

.c-speech-balloon {
  display: flex;
  margin: 1.0em 0;
}

.c-speech-balloon__image-frame {
  order: 1;
  flex: 1;
  align-self: center;
}

.c-speech-balloon__image {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0.5em !important;
}

.c-speech-balloon__message-frame {
  order: 2;
  flex: 4;
  align-self: center;
  padding: 0 0 0 1.6em;
}

.c-speech-balloon__message {
  display: block;
  position: relative;
  margin: 0;
  padding: 0.8em;
  background: #fff;
  border: solid 0.15em var(--keycolor-article-main);
  border-radius: 0.8em;
  box-sizing: border-box;
  color: #313131;
  font-size: 0.9em;
}
.c-speech-balloon__message:before {
  z-index: 2;
  content: "";
  position: absolute;
  top: 50%;
  left: -2.06em;
  margin-top: -1.0em;
  border: 1.0em solid transparent;
  border-right: 1.2em solid #fff;
}
.c-speech-balloon__message:after {
  z-index: 1;
  content: "";
  position: absolute;
  top: 50%;
  left: -2.3em;
  margin-top: -1.0em;
  border: 1.0em solid transparent;
  border-right: 1.2em solid var(--keycolor-article-main);
}

.c-speech-balloon__message p:last-child {
  margin: 0;
}

.c-speech-balloon__message img {
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0.5em 0 !important;
  padding: 0 !important;
  border-radius: 0.5em !important;
}



/* ------------------------------------------------------------
   メッセージ_左側、画像アイコン_右側
   ------------------------------------------------------------ */

.c-speech-balloon--message-right {
}

.c-speech-balloon__image-frame--message-right {
  order: 2;
}

.c-speech-balloon__image--message-right {
}

.c-speech-balloon__message-frame--message-right {
  order: 1;
  padding: 0 1.6em 0 0;
}

.c-speech-balloon__message--message-right {
  margin: 0;
}
.c-speech-balloon__message--message-right:before {
  left: auto;
  right: -1.08em;
  border-right: none;
  border-left: 1.2em solid #fff;
}
.c-speech-balloon__message--message-right:after {
  left: auto;
  right: -1.25em;
  border-right: none;
  border-left: 1.2em solid var(--keycolor-article-main);
}




/* [画像装飾]画像の四隅の角を丸くする
   ================================================================= */

.c-image-decoration__corner-rounded img {
  border-radius: 1.0em;
}




/* [色調補正]輝度
   ================================================================= */


/* ------------------------------------------------------------
   輝度を上げる（５パーセンテージ刻みでの調整）   
   ------------------------------------------------------------ */

.c-image-filter__brightness-increased-105per img {
  filter: brightness(105%);
}

.c-image-filter__brightness-increased-110per img {
  filter: brightness(110%);
}

.c-image-filter__brightness-increased-115per img {
  filter: brightness(115%);
}

.c-image-filter__brightness-increased-120per img {
  filter: brightness(120%);
}



/* ------------------------------------------------------------
   輝度を下げる（５パーセンテージ刻みでの調整）
   ------------------------------------------------------------ */

.c-image-filter__brightness-decreased-105per img {
  filter: brightness(105%);
}

.c-image-filter__brightness-decreased-110per img {
  filter: brightness(110%);
}

.c-image-filter__brightness-decreased-115per img {
  filter: brightness(115%);
}

.c-image-filter__brightness-decreased-120per img {
  filter: brightness(120%);
}




/* [色調補正]コンストラスト
   ================================================================= */


/* ------------------------------------------------------------
   コンストラストを上げる（５パーセンテージ刻みでの調整）
   ------------------------------------------------------------ */

.c-image-filter__contrast-increased-105per img {
  filter: contrast(105%);
}

.c-image-filter__contrast-increased-110per img {
  filter: contrast(110%);
}

.c-image-filter__contrast-increased-115per img {
  filter: contrast(115%);
}

.c-image-filter__contrast-increased-120per img {
  filter: contrast(120%);
}



/* ------------------------------------------------------------
   コンストラストを下げる（５パーセンテージ刻みでの調整）
   ------------------------------------------------------------ */

.c-image-filter__contrast-decreased-105per img {
  filter: contrast(105%);
}

.c-image-filter__contrast-decreased-110per img {
  filter: contrast(110%);
}

.c-image-filter__contrast-decreased-115per img {
  filter: contrast(115%);
}

.c-image-filter__contrast-decreased-120per img {
  filter: contrast(120%);
}




/* [色調補正]グレースケール
   ================================================================= */


/* ------------------------------------------------------------
   グレーに近づける（20パーセンテージ刻みでの調整）
   ------------------------------------------------------------ */

.c-image-filter__grayscale-increased-20per img {
  filter: grayscale(20%);
}

.c-image-filter__grayscale-increased-40per img {
  filter: grayscale(40%);
}

.c-image-filter__grayscale-increased-60per img {
  filter: grayscale(60%);
}

.c-image-filter__grayscale-increased-80per img {
  filter: grayscale(80%);
}

.c-image-filter__grayscale-increased-100per img {
  filter: grayscale(100%);
}




/* [色調補正]彩度
   ================================================================= */


/* ------------------------------------------------------------
   彩度を落とす（20パーセンテージ刻みでの調整）
   ------------------------------------------------------------ */

.c-image-filter__saturate-decreased80per img {
  filter: saturate(80%);
}

.c-image-filter__saturate-decreased-60per img {
  filter: saturate(60%);
}

.c-image-filter__saturate-decreased-40per img {
  filter: saturate(40%);
}

.c-image-filter__saturate-decreased-20per img {
  filter: saturate(20%);
}

.c-image-filter__saturate-decreased-0per img {
  filter: saturate(0%);
}




/* [色調補正]セピア
   ================================================================= */


/* ------------------------------------------------------------
   セピアの度合いを上げる（20パーセンテージ刻みでの調整）
   ------------------------------------------------------------ */

.c-image-filter__sepia-increased-20per img {
  filter: sepia(20%);
}

.c-image-filter__sepia-increased-40per img {
  filter: sepia(40%);
}

.c-image-filter__sepia-increased-60per img {
  filter: sepia(60%);
}

.c-image-filter__sepia-increased-80per img {
  filter: sepia(80%);
}

.c-image-filter__sepia-increased-100per img {
  filter: sepia(100%);
}




/* [色調補正]色相回転
   ================================================================= */


/* ------------------------------------------------------------
   色相を右回りに回していく（45度刻みでの調整）
   ------------------------------------------------------------ */

.c-image-filter__hue-rotate-increased-45deg img {
  filter: hue-rotate(45deg);
}

.c-image-filter__hue-rotate-increased-90deg img {
  filter: hue-rotate(90deg);
}

.c-image-filter__hue-rotate-increased-135deg img {
  filter: hue-rotate(135deg);
}

.c-image-filter__hue-rotate-increased-180deg img {
  filter: hue-rotate(180deg);
}

.c-image-filter__hue-rotate-increased-225deg img {
  filter: hue-rotate(225deg);
}

.c-image-filter__hue-rotate-increased-270deg img {
  filter: hue-rotate(270deg);
}

.c-image-filter__hue-rotate-increased-315deg img {
  filter: hue-rotate(315deg);
}




/* [色調補正]階調反転
   ================================================================= */


/* ------------------------------------------------------------
   階調反転の度合いを上げる（20パーセンテージ刻みでの調整）
   ------------------------------------------------------------ */

.c-image-filter__invert-increased-20per img {
  filter: invert(20%);
}

.c-image-filter__invert-increased-40per img {
  filter: invert(40%);
}

.c-image-filter__invert-increased-60per img {
  filter: invert(60%);
}

.c-image-filter__invert-increased-80per img {
  filter: invert(80%);
}

.c-image-filter__invert-increased-100per img {
  filter: invert(100%);
}




/* [画像加工]ぼかし
   ================================================================= */


/* ------------------------------------------------------------
   ぼかしを強くする（20パーセンテージ刻みでの調整）
   ------------------------------------------------------------ */

.c-image-filter__blur-increased-005 img {
  filter: blur(0.05em);
}

.c-image-filter__blur-increased-010 img {
  filter: blur(0.1em);
}

.c-image-filter__blur-increased-015 img {
  filter: blur(0.15em);
}

.c-image-filter__blur-increased-020 img {
  filter: blur(0.2em);
}




/* [画像加工]透明度
   ================================================================= */


/* ------------------------------------------------------------
   透明度を下げる（20パーセンテージ刻みでの調整）
   ------------------------------------------------------------ */

.c-image-filter__opacity-decreased-80per img {
  filter: opacity(80%);
}

.c-image-filter__opacity-decreased-60per img {
  filter: opacity(60%);
}

.c-image-filter__opacity-decreased-40per img {
  filter: opacity(40%);
}

.c-image-filter__opacity-decreased-20per img {
  filter: opacity(20%);
}

.c-image-filter__opacity-decreased-0per img {
  filter: opacity(0%);
}




/* [画像加工]ドロップシャドウ
   ================================================================= */


/* ------------------------------------------------------------
   画像に影をつける
   ------------------------------------------------------------ */

.c-image-filter__drop-shadow-bottom-right img {
  filter: drop-shadow(0.2em 0.2em 0.4em #666);
}

.c-image-filter__drop-shadow-bottom img {
  filter: drop-shadow(0 0.2em 0.4em #666);
}





/* ======================================================================
   記事コンテンツの表現を広げる機能
   ====================================================================== */


/* アコーディオンボックス（記事コンテンツ表示のオンオフ機能）
   ================================================================= */

/* コンテンツの開閉に、「ボタン」を用います。 */


.c-accordion-box {
	margin: inherit;
	padding: 0;
}

.c-accordion-box label {
	display: inline-block;
	padding: 0.75em;
	font-weight: bold;
	background: var(--keycolor-article-main);
	border-radius: 0.5em;
	color: #fff;
	line-height: 1;
	cursor: pointer;
	transition: .5s;
}

.c-accordion-box label:before {
	display: inline-block;
	content: '\f078';
	font-family: 'FontAwesome';
	padding-right: 0.5em;
	font-weight: normal;
	transition: 0.2s;
}

.c-accordion-box label:hover {
	color: #fff;
}

.c-accordion-box input:checked ~ label:before {
	content: '\f00d';
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	color: #fff;
}

.c-accordion-box input:checked ~ .c-accordion-box label:before {
	content: '\f00d';
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	color: #fff;
}

.c-accordion-box input {
	display: none;
}

.c-accordion-box .c-accordion-box__show {
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.8s;
}

.c-accordion-box input:checked ~ .c-accordion-box__show {
	margin-top: 0.75em;
	padding: 0.75em;
	height: auto;
	opacity: 1;
	background: #f7f7f7;
	border-radius: 0.5em;
}

.c-accordion-box > p {
	margin: 0;
}
.c-accordion-box .c-accordion-box__show p:first-child {
	margin-top: 0;
}
.c-accordion-box .c-accordion-box__show p:last-child {
	margin-bottom: 0;
}





/* ======================================================================
   [旧仕様]Content Decoration（コンテンツへの装飾）
   ====================================================================== */

/* ユニークカラー仕様への変更に伴い、今後はこちらの使用は控えていく。 */


/* [テキスト装飾]マーカー
   ================================================================= */


/* ------------------------------------------------------------
   マーカーの線幅_通常
   ------------------------------------------------------------ */

.c-text-decoration__marker-red {
  padding: 0;
  background: linear-gradient(transparent 40%, #FF929D 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-pink {
  padding: 0;
  background: linear-gradient(transparent 40%, #FFBADF 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-blue {
  padding: 0;
  background: linear-gradient(transparent 40%, #B8F6FF 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-green {
  padding: 0;
  background: linear-gradient(transparent 40%, #E0FFC9 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-yellow {
  padding: 0;
  background: linear-gradient(transparent 40%, #FFF890 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-orange {
  padding: 0;
  background: linear-gradient(transparent 40%, #FFDDC4 0%) repeat scroll 0 0;
}



/* ------------------------------------------------------------
   マーカーの線幅_細線
   ------------------------------------------------------------ */

.c-text-decoration__marker-red--narrow {
  padding: 0;
  background: linear-gradient(transparent 60%, #FF929D 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-pink--narrow {
  padding: 0;
  background: linear-gradient(transparent 60%, #FFBADF 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-blue--narrow {
  padding: 0;
  background: linear-gradient(transparent 60%, #B8F6FF 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-green--narrow {
  padding: 0;
  background: linear-gradient(transparent 60%, #E0FFC9 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-yellow--narrow {
  padding: 0;
  background: linear-gradient(transparent 60%, #FFF890 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-orange--narrow {
  padding: 0;
  background: linear-gradient(transparent 60%, #FFDDC4 0%) repeat scroll 0 0;
}



/* ------------------------------------------------------------
   マーカーの線幅_太線
   ------------------------------------------------------------ */

.c-text-decoration__marker-red--wide {
  padding: 0;
  background: linear-gradient(transparent 0%, #FF929D 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-pink--wide {
  padding: 0;
  background: linear-gradient(transparent 0%, #FFBADF 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-blue--wide {
  padding: 0;
  background: linear-gradient(transparent 0%, #B8F6FF 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-green--wide {
  padding: 0;
  background: linear-gradient(transparent 0%, #E0FFC9 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-yellow--wide {
  padding: 0;
  background: linear-gradient(transparent 0%, #FFF890 0%) repeat scroll 0 0;
}

.c-text-decoration__marker-orange--wide {
  padding: 0;
  background: linear-gradient(transparent 0%, #FFDDC4 0%) repeat scroll 0 0;
}




/* [テキスト装飾]フレーム
   ================================================================= */


/* ------------------------------------------------------------
   フレーム_周囲_枠線
   ------------------------------------------------------------ */

.c-text-decoration__frame-line {
  margin-bottom: 1em;
  padding: 0.6em 0.8em;
  border: solid 0.12em var(--keycolor-article-main);
  border-radius: 0.4em;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.c-text-decoration__frame-line-gray {
  margin-bottom: 1em;
  padding: 0.6em 0.8em;
  border: solid 0.12em #808080;
  border-radius: 0.4em;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.c-text-decoration__frame-line-red {
  margin-bottom: 1em;
  padding: 0.6em 0.8em;
  border: solid 0.12em #FF929D;
  border-radius: 0.4em;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.c-text-decoration__frame-line-pink {
  margin-bottom: 1em;
  padding: 0.6em 0.8em;
  border: solid 0.12em #f2a0cb;
  border-radius: 0.4em;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.c-text-decoration__frame-line-blue {
  margin-bottom: 1em;
  padding: 0.6em 0.8em;
  border: solid 0.12em #c2d7eb;
  border-radius: 0.4em;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.c-text-decoration__frame-line-green {
  margin-bottom: 1em;
  padding: 0.6em 0.8em;
  border: solid 0.12em #E0FFC9;
  border-radius: 0.4em;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.c-text-decoration__frame-line-orange {
  margin-bottom: 1em;
  padding: 0.6em 0.8em;
  border: solid 0.12em #FFDDC4;
  border-radius: 0.4em;
  line-height: 1.5;
  letter-spacing: 0.05em;
}



/* ------------------------------------------------------------
   フレーム_背景色のみ_枠線無し
   ------------------------------------------------------------ */

.c-text-decoration__frame-bgcolor {
  padding: 0.6em 0.8em;
  background-color: var(--keycolor-article-sub);
  border-radius: 0.4em;
}

.c-text-decoration__frame-bgcolor-gray {
  padding: 0.6em 0.8em;
  background-color: #d9d9d9;
  border-radius: 0.4em;
}

.c-text-decoration__frame-bgcolor-red {
  padding: 0.6em 0.8em;
  background-color: #ffe5e7;
  border-radius: 0.4em;
}

.c-text-decoration__frame-bgcolor-pink {
  padding: 0.6em 0.8em;
  background-color: #ffe5f3;
  border-radius: 0.4em;
}

.c-text-decoration__frame-bgcolor-blue {
  padding: 0.6em 0.8em;
  background-color: #e5f2ff;
  border-radius: 0.4em;
}

.c-text-decoration__frame-bgcolor-green {
  padding: 0.6em 0.8em;
  background-color: #f0ffe5;
  border-radius: 0.4em;
}

.c-text-decoration__frame-bgcolor-orange {
  padding: 0.6em 0.8em;
  background-color: #fff0e5;
  border-radius: 0.4em;
}




/* 旧仕様（同内容の装飾に入れ替え予定）
   ================================================================= */


/* ------------------------------------------------------------
   見出しの頭に、アイコンをつける（旧仕様）
   ------------------------------------------------------------ */

.c-text-icon--0001:before {
  content: url(../img/icon/icon_heading_sample.png);
  margin-right: 0.8rem;
  vertical-align: middle;
}



/* ------------------------------------------------------------
   テキストに背景色をつける（旧仕様）
   ------------------------------------------------------------ */

/* 背景色：黄色 */
.text-decoration--bgcolor-yellow {
  display: inline-block;
  margin: 0;
  padding: 0 0.4rem;
  background: #fcff00;
  border-radius: 0.4rem;
}

/* 背景色：薄桃色 */
.text-decoration--bgcolor-pink {
  display: inline-block;
  margin: 0;
  padding: 0 0.4rem;
  background: #faf1ef;
  border-radius: 0.4rem;
}



/* ------------------------------------------------------------
   テキストの強調_A（旧仕様）
   ------------------------------------------------------------ */

/* テキスト：赤字・太字、背景色：黄色 */
.text-decoration--emphasis-yellow {
  display: inline-block;
  margin: 0;
  padding: 0 0.4rem;
  background: #fcff00;
  border-radius: 0.4rem;
  color: #ff2a20;
  font-weight: bold;
}



/* ------------------------------------------------------------
   テキストの強調_D（旧仕様）
   ------------------------------------------------------------ */

/* 背景色：マカー風イエロー */
.text-decoration--marker-yellow {
  background: linear-gradient(transparent 50%, #fcff00 0%);
  padding: 0 0.2rem 0.2rem 0.2rem;
}