/* ==========================================
 画像の上にテキストを乗せるCSS
========================================== */

	.txt-on-image-wrapper {
      position: relative;    /* ★絶対配置の基準点 */
      display: inline-block; 
      width: 100%;           
      max-width: 784px;
      overflow: hidden;
      /* border-radius: 8px; */
      /* box-shadow: 0 4px 8px rgba(0,0,0,0.2); */
    }

    .txt-on-img {
      display: block;        
      width: 100%;           
      height: auto;
    }

    .txt-on-overlay-text {
      position: absolute;    /* ★親要素を基準に浮かせる */
      color: #ffffff;        
      font-weight: bold;     
      margin: 0;             
      /* 少し濃いめの影（黒で透明度80%）に変更しています */
       /* text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);  */
    }

    /* ど真ん中に配置するパターン */
    .txt-on-pos-center {
      top: 50%;              
      left: 50%;             
      transform: translate(-50%, -50%); 
      font-size: 28px;       
      width: 100%;
      text-align: center;
    }
    /* 右寄りパターン */
    .txt-on-pos-center70 {
      top: 50%;              
      left: 108%;             
      transform: translate(-50%, -50%); 
      font-size: 28px;       
      width: 100%;
      /*text-align: center;*/
    }

    .txt-on-pos-center70-btm {
      top: 50%;              
      left: 100%;             
      transform: translate(-50%, -50%); 
      font-size: 28px;       
      width: 100%;
      /*text-align: center;*/
    }

    /* 右下に % を使って配置するパターン */
    .txt-on-pos-bottom-right {
      bottom: 10%;           /* ★下から10%の位置 */
      right: 5%;             /* ★右から5%の位置 */
      font-size: 16px;
     /*  text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.8); */ 
    }
    /* 左下に % を使って配置するパターン */
    .txt-on-pos-bottom-left-01 {
      bottom: 10%;
      right: 70%;
      font-size: 16px;
     /*  text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.8); */ 
    }
     /* 左下に % を使って配置するパターン */
    .txt-on-pos-bottom-left-02 {
      bottom: 10%;
      right: 67%;
     /*  text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.8); */ 
    }