body {background-color:#a9ceec44;}
 span[class*="deco-% deco-("]:before { content:"["; }
 span[class*="deco-% deco-)"]:after  { content:"]"; }
 span[class*="deco-% deco-( deco-)"]:before { content:"["; }
 span[class*="deco-% deco-( deco-)"]:after  { content:"]"; }
 /*[%() hoge] で [hoge] が表示されるようになる。つまり角括弧が使えるように。*/ 
 
  /* [! 警告表記を使えるようにする] */
  .deco-\! {
 		--warning-text-color: #FFFFFF;
  	--warning-bg: #e33;
  	--warning-bg-border: #ee6000;
    	--page-link-color: #80c9fe;
    	--empty-page-link-color: #ffb7b8;
  	
  	color: var(--warning-text-color);
  	background-color: var(--warning-bg);
  	font-weight: bold;
  	padding: 1px 2px;
  	border-radius: 1px;
  	background: repeating-linear-gradient(-45deg, var(--warning-bg), var(--warning-bg) 17px, var(--warning-bg-border) 3px, var(--warning-bg-border) 20px);
  }
  
  
  /* [# 警告表記を使えるようにする] */
  .deco-\# {
      --warning-text-color: #000000;        /* 黒のテキスト */
      --warning-bg: #ffff00;               /* 標準的な黄色 */
  
      color: var(--warning-text-color);
      background-color: var(--warning-bg);
      font-weight: bold;
      padding: 1px 2px;
      border-radius: 1px;
  }
  
     
    
     /*中央寄せ*/
     .deco-\| {
      position: absolute;
      width: 100%;
      text-align: center;
     }
     /* 右寄せ */
     .deco-\> {
      position: absolute;
      width: 100%;
      text-align: right;
     }
     /* 左寄せ */
     .deco-\< {
      position: absolute;
      width: 100%;
      text-align: left;
     }