/*
outd-textz 黒縁取り（白文字）
<p class='outd-textz' style='line-height:0.5; --outline-color: #F00; --text-color:#FF0;'>赤い縁取りの黄色文字に変更</p>
outd-textb 黒縁取り（白文字）
outd-textw 白      （黒文字）
outd-texty 黄色    （黒文字）
outd-textr 赤      （金文字）
outd-textg 緑      （黒文字）
outd-texto 橙      （黒文字）
*/

.outd-textz {
  font-size: 20px;
  color: var(--text-color, #eee); /* 文字色（デフォルト: #eee） */
  text-shadow:
    1px   1px 0 var(--outline-color, #333),/* 縁取り色(デフォルト：#333) */
   -1px   1px 0 var(--outline-color, #333),
    1px  -1px 0 var(--outline-color, #333),
   -1px  -1px 0 var(--outline-color, #333),
    0     1px 0 var(--outline-color, #333),
    0    -1px 0 var(--outline-color, #333),
    1px   0   0 var(--outline-color, #333),
   -1px   0   0 var(--outline-color, #333);
  line-height: 0.2;
}

  .outd-textb { 
    /* (黒)縁取りテキスト用のスタイル */
    font-size: 20px; 		/* フォントサイズを設定 */
    color: #eee; 			/* テキストの色を白に設定 */
    text-shadow: 
      1px   1px 0 #333, 	/* 右下方向の黒い影 */
      -1px  1px 0 #333, 	/* 左下方向の黒い影 */
      1px  -1px 0 #333, 	/* 右上方向の黒い影 */
      -1px -1px 0 #333, 	/* 左上方向の黒い影 */
      0     1px 0 #333, 	/* 下方向の黒い影 */
      0    -1px 0 #333, 	/* 上方向の黒い影 */
      1px  0    0 #333, 	/* 右方向の黒い影 */
      -1px 0    0 #333; 	/* 左方向の黒い影 */
      line-height: 0.2; 	/* 行間を調整 (1.2倍) */
    /* 上記の設定により、文字に黒い縁取りが作成される */
  }

  .outd-textw { 
    /* (白)縁取りテキスト用のスタイル */
    font-size: 20px; 		/* フォントサイズを設定 */
    color: #333; 			/* テキストの色を黒に設定 */
    text-shadow: 
      1px   1px 0 #f8f8f8, 	/* 右下方向の白い影 */
      -1px  1px 0 #f8f8f8, 	/* 左下方向の白い影 */
      1px  -1px 0 #f8f8f8, 	/* 右上方向の白い影 */
      -1px -1px 0 #f8f8f8, 	/* 左上方向の白い影 */
      0     1px 0 #f8f8f8, 	/* 下方向の白い影 */
      0    -1px 0 #f8f8f8, 	/* 上方向の白い影 */
      1px  0    0 #f8f8f8, 	/* 右方向の白い影 */
      -1px 0    0 #f8f8f8; 	/* 左方向の白い影 */
      line-height: 0.2; 	/* 行間を調整 (1.2倍) */
    /* 上記の設定により、文字に縁取りが作成される */
  }

  .outd-texty { 
    /* (黄色)縁取りテキスト用のスタイル */
    font-size: 20px; 		/* フォントサイズを設定 */
    color: #333; 			/* テキストの色を黒に設定 */
    text-shadow: 
      1px   1px 0 #ff0, 	/* 右下方向の白い影 */
      -1px  1px 0 #ff0, 	/* 左下方向の白い影 */
      1px  -1px 0 #ff0, 	/* 右上方向の白い影 */
      -1px -1px 0 #ff0, 	/* 左上方向の白い影 */
      0     1px 0 #ff0, 	/* 下方向の白い影 */
      0    -1px 0 #ff0, 	/* 上方向の白い影 */
      1px  0    0 #ff0, 	/* 右方向の白い影 */
      -1px 0    0 #ff0; 	/* 左方向の白い影 */
      line-height: 0.2; 	/* 行間を調整 (1.2倍) */
    /* 上記の設定により、文字に縁取りが作成される */
  }

  .outd-textr { 
    /* (赤)縁取りテキスト用のスタイル */
    font-size: 20px; 		/* フォントサイズを設定 */
    color: #aa0; 			/* テキストの色を金色に設定 */
    text-shadow: 
      1px   1px 0 #f00, 	/* 右下方向の赤い影 */
      -1px  1px 0 #f00, 	/* 左下方向の赤い影 */
      1px  -1px 0 #f00, 	/* 右上方向の赤い影 */
      -1px -1px 0 #f00, 	/* 左上方向の赤い影 */
      0     1px 0 #f00, 	/* 下方向の赤い影 */
      0    -1px 0 #f00, 	/* 上方向の赤い影 */
      1px  0    0 #f00, 	/* 右方向の赤い影 */
      -1px 0    0 #f00; 	/* 左方向の赤い影 */
      line-height: 0.2; 	/* 行間を調整 (1.2倍) */
    /* 上記の設定により、文字に縁取りが作成される */
  }

  .outd-textg { 
    /* (緑色)縁取りテキスト用のスタイル */
    font-size: 20px; 		/* フォントサイズを設定 */
    color: #333; 			/* テキストの色を黒色に設定 */
    text-shadow: 
      1px   1px 0 #0f0, 	/* 右下方向の緑色影 */
      -1px  1px 0 #0f0, 	/* 左下方向の緑色影 */
      1px  -1px 0 #0f0, 	/* 右上方向の緑色影 */
      -1px -1px 0 #0f0, 	/* 左上方向の緑色影 */
      0     1px 0 #0f0, 	/* 下方向の緑色影 */
      0    -1px 0 #0f0, 	/* 上方向の緑色影 */
      1px  0    0 #0f0, 	/* 右方向の緑色影 */
      -1px 0    0 #0f0; 	/* 左方向の緑色影 */
      line-height: 0.2; 	/* 行間を調整 (1.2倍) */
    /* 上記の設定により、文字に縁取りが作成される */
  }

  .outd-texta { 
    /* (青色)縁取りテキスト用のスタイル */
    font-size: 20px; 		/* フォントサイズを設定 */
    color: #0FF; 			/* テキストの色を黒色に設定 */
    text-shadow: 
      1px   1px 0 #00f, 	/* 右下方向の緑色影 */
      -1px  1px 0 #00f, 	/* 左下方向の緑色影 */
      1px  -1px 0 #00f, 	/* 右上方向の緑色影 */
      -1px -1px 0 #00f, 	/* 左上方向の緑色影 */
      0     1px 0 #00f, 	/* 下方向の緑色影 */
      0    -1px 0 #00f, 	/* 上方向の緑色影 */
      1px  0    0 #00f, 	/* 右方向の緑色影 */
      -1px 0    0 #00f; 	/* 左方向の緑色影 */
      line-height: 0.2; 	/* 行間を調整 (1.2倍) */
    /* 上記の設定により、文字に縁取りが作成される */
  }

  .outd-texto { 
    /* (オレンジ色)縁取りテキスト用のスタイル */
    font-size: 20px; 		/* フォントサイズを設定 */
    color: #333; 			/* テキストの色を黒色に設定 */
    text-shadow: 
      1px   1px 0 #f90, 	/* 右下方向の橙色影 */
      -1px  1px 0 #f90, 	/* 左下方向の橙色影 */
      1px  -1px 0 #f90, 	/* 右上方向の橙色影 */
      -1px -1px 0 #f90, 	/* 左上方向の橙色影 */
      0     1px 0 #f90, 	/* 下方向の橙色影 */
      0    -1px 0 #f90, 	/* 上方向の橙色影 */
      1px  0    0 #f90, 	/* 右方向の橙色影 */
      -1px 0    0 #f90; 	/* 左方向の橙色影 */
      line-height: 0.2; 	/* 行間を調整 (1.2倍) */
    /* 上記の設定により、文字に縁取りが作成される */
  }