.manga_container {
    /*border: solid 1px black;  全体の黒い縁取り */
    width: 336px; /* 漫画全体の幅を設定 */
    height: auto;
    margin: auto; /* 中央に配置 */
    background-color: #fff;
}



.frame1,.frame2,.frame3,.frame4,.frame5,.frame6,.frame7,.frame8,.frame9,.frame10,.frame11,.frame12,.frame13,.frame14,.frame15,.frame16,.frame17,.frame18,.frame19 {
    width: 100%; 
    border: solid 2px black;
    position: relative; /* 子要素の絶対位置の基準点 */
    margin: 0 auto -2px auto; /* コマ間の余白 */
}

.manga-img {
    display: block; 
    width: 336px; /* 画像の幅をフレームに合わせる */
    height: auto; /* 画像の高さを自動調整 */
}


.manga-text {
    position: absolute; /* 画像上にテキストを配置 */
    writing-mode: vertical-rl; /* 縦書き */
    text-orientation: upright;
    font-size: 13px; /* フォントサイズ */
    color: black; /* テキストの色 */
    line-height: 18px; 
    margin: 0;
}

.horizontal {
    writing-mode: horizontal-tb; /* 横書きにする */
    display: inline-block; /* インラインブロックとして表示 */
}

.right { top: 20px; right: 15px; } /* 右上にテキストを配置 */
.center { top: 20px; left: 180px; } /* 左上にテキストを配置 */
.left { top: 20px; left: 15px; } /* 左上にテキストを配置 */
.small { top: 20px; left: 15px; font-size: 10px;}




.frame1 .right { top: 24px; right: 15px; } 
.frame1 .left { top: 25px; left: 18px; font-weight: bold;}


.frame2 .right { top: 15px; right: 6px;}
.frame2 .left { top: 47px; left: 237px;} 
.frame2 .small { top: 97px; left: 210px; display: inline-block; transform: rotate(-5deg)}


.frame3 .right { top: 30px; right: 35px;
    text-shadow: 
    -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;    
}
.frame3 .center { top: 40px; left: 142px; font-weight: bold;} 
.frame3 .left { top: 30px; left: 40px; color: #fff;
    text-shadow: 
    -1px -1px 0 #00496d,  
    1px -1px 0 #00496d,
    -1px 1px 0 #00496d,
    1px 1px 0 #00496d;    
} 


.frame4 .right { top: 15px; right: 16px;}
.frame4 .left { top: 18px; left: 100px; font-size: 20px; font-weight: bold; line-height: 30px; } 


.frame5 {
    width: 336px; 
    height: 280px;
    border: solid 2px black;
    padding: 0;
}



.frame6 span { position: relative; display: inline-block;}

.frame6 .mt1 { transform: translateX(-7px) translateY(0px);}
.frame6 .mt2 { transform: translateX(-40px) translateY(-20px);}
.frame6 .mt3 { transform: translateX(-72px) translateY(5px);}
.frame6 .mt4 { transform: translateX(22px) translateY(-7px);}
.frame6 .mt5 { transform: translateX(7px) translateY(149px);}
.frame6 .mt6 { transform: translateX(-70px) translateY(100px); font-size: 20px; text-emphasis: circle;}
.frame6 .left { top: 35px; left: 50px; font-weight: bold; color: #fff;}



.frame7-8 {
    display: flex; /* フレックスボックスコンテナとして設定 */
    width: 340px; /* コンテナの全体の幅 */
}

.frame7 {
    width: 160px; /* 右側のdivの幅 */
    height: 600px; /* 高さ */
    
}

.frame7 img {
    width: 160px; /* 右側のdivの幅 */
    height: 600px; /* 高さ */
}

.frame8 {
    width: 180px; /* 左側のdivの幅 */
    height: 600px; /* 高さ */
    border-right: none;
    /* 必要に応じて追加のスタイルを設定 */
}
.frame8 .left { 
    top: 18px;
    left: 50px;
    font-size: 28px;
    font-weight: bold;
    line-height: 30px;
    transform: rotate(-4deg);
    line-height: 48px;
    color:#fa789a; 
} 

.frame8 .right { 
    top: 300px;
    right: 121px;
    font-size: 16px;
    transform: rotate(-4deg);
} 

.frame8 .manga-img {
    width: 174px; /* 画像の幅をフレームに合わせる */
}


.frame9 span { position: relative; display: inline-block;}
.frame9 .mt1 { transform: translateX(0px) translateY(-5px); background-color: #fff; padding: 10px 5px;}
.frame9 .mt2 { transform: translateX(-5px) translateY(45px); background-color: #fff; padding: 10px 5px;}
.frame9 .mt3 { transform: translateX(-30px) translateY(20px); background-color: #fff; padding: 10px 5px 10px 8px;}
.frame9 .mt4 { transform: translateX(-22px) translateY(80px); background-color: #fff; padding: 10px 10px 10px 5px;}
.frame9 .mt5 { transform: translateX(-50px) translateY(-5px); background-color: #fff; height: 305px; text-align: center; padding: 0 5px;}



.frame10 .right{ top: 25px; right: 150px; font-size: 70px; font-weight: bold;
text-shadow: 
-1px -1px 0 #fff,  
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;   
}
.frame10 .left { top: 190px; left: 16px; font-weight: bold;
    text-shadow: 
    -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;   
}


.frame11 .right { top: 22px; right: 35px; } 
.frame11 .left { top: 25px; left: 38px; }

.frame12 .right { top: 22px; right: 15px; } 
.frame12 .left { top: 25px; left: 18px; }

.frame13 .right { top: 10px; right: 135px; font-size: 14px;} 

.frame14 {
    width: 336px;
    height: 100px;
}
.frame14 .right { top: 14px; right: 155px; font-size: 24px; font-weight: bold; } 



.frame15 .right { top: 18px; right: 15px; font-size: 14px; } 
.frame15 .left { top: 65px; left: 67px; font-size: 14.5px;
text-shadow: 
-1px -1px 0 #fff,  
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;   
}

.frame16 span { position: relative; display: inline-block;}
.frame16 .mt1 { transform: translateX(-10px) translateY(-6px); color: #fff;}
.frame16 .mt2 { transform: translateX(-95px) translateY(10px);
font-size: 18px;
font-weight: bold;
line-height: 24px;
}

.frame16 .mt3 { transform: translateX(-180px) translateY(-6px); font-size: 16px; font-weight: bold; color: #fff;}



.frame17-18 {
    display: flex; /* フレックスボックスコンテナとして設定 */
    width: 340px; /* コンテナの全体の幅 */
}

.frame17 {
    width: 160px; /* 右側のdivの幅 */
    height: 600px; /* 高さ */
    border-right: none;
    /* 必要に応じて追加のスタイルを設定 */
}

.frame17 img {
    width: 160px; /* 右側のdivの幅 */
    height: 600px; /* 高さ */
}


.frame18 {
    width: 180px; /* 左側のdivの幅 */
    height: 600px; /* 高さ */
}

.frame18 .right { 
    top: 25px;
    right: 10px;
    font-size: 14px;
    font-weight: bold;
} 

.frame18 .center { 
    top: 25px;
    left: 65px;
    font-size: 22px;
    font-weight: bold;
    line-height: 30px;
    text-shadow: 
-1px -1px 0 #fff,  
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;   

} 

.frame18 .left { 
    top: 200px;
    left: 0px;
    font-size: 11px;
} 


.frame18 .manga-img {
    width: 174px; /* 画像の幅をフレームに合わせる */
}



.frame19 .right { 
    top: 25px;
    right: 25px;
    font-size: 15px;
} 


.frame19 .left { 
    top: 25px;
    left: 25px;
    font-size: 15px;
} 








@media screen and (max-width: 768px) {
    .manga_container {
        /* 画面幅が768px以下の場合でもサイズを変更しない */
    }
}