.context_tbl {
    margin-top: 10px;
    width: 100%;
    border: solid 1px black;
}
td.chapter01 {
    font-size: 150%;
    font-weight: 600;
}
/* すべての画面サイズで画像がセルからはみ出さないようにする */
td.col_w150 img {
    max-width: 100%;
    height: auto;
}

/* デフォルト（PC表示）のスタイル */
td.col_w150 {
    width: 150px;
}

/* タブレットサイズの場合 */
@media screen and (max-width: 768px) {
    td.col_w150 {
        width: 100px; /* PCより小さく */
    }
}

/* スマホサイズの場合 */
@media screen and (max-width: 480px) {
    td.col_w150 {
        width: 70px; /* さらに小さく */
    }
    
    td.col_w150 img {
        height: 1.8em; /* スマホでは画像も小さく */
    }
}
td.col_w250{
    width:50%;
    vertical-align: top;
}
hr.line01{
    border-top: 1px solid #8c8b8b;
}
hr.line02 {
    border-top: 3px double #8c8b8b;
}
hr.line03 {
    border-top: 1px dashed #8c8b8b;
}
hr.line04 {
    border-top: 1px dotted #8c8b8b;
}
hr.line05 {
    background-color: #fff;
    border-top: 2px dashed #8c8b8b;
}
hr.line06 {
    background-color: #fff;
    border-top: 2px dotted #8c8b8b;
}
/*手順番号*/
.num {
    font-weight: bold;
    color: #595959; /* ダークグレー */
    font-size: 1.2em;
    margin-right: 0.3em;
}
/*動画ホバー*/
video.playing:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    outline: none;
    border-radius: 4px;
  }
/*画像ポップアップ*/
.image-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   z-index: 9999;
   justify-content: center;
   align-items: center;
 }
  
.image-overlay img {
   max-width: 90%;
   max-height: 90%;
   border-radius: 8px;
   box-shadow: 0 8px 20px rgba(0,0,0,0.4);
   transition: transform 0.3s ease;
 }
  
.image-overlay.show {
   display: flex;
 }