/* ▼ 背景のしましまを消して、グレー単色にする ▼ */
body, .lower-main-bg {
    background-image: none !important; /* しましま画像を強制無効化 */
    background-color: #f0f0f0 !important; /* ジャンプ＋のようなダークグレー（お好みで #555555 などに変更可） */
    padding:0;
}


.txt35 { font-size: 35px; }

.container_mng {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

.manga-content {
    padding: 0;
    margin: 40px auto;
}

.manga-slider-wrapper {
    position: relative;
    background-color: transparent; /* ▼ 修正: 背景色を透明にしてbodyの色を透けさせる */
    max-width: 1500px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* ▼ 修正: center から flex-start（上揃え）に変更 */
}

/* ▼ 操作ガイド ▼ */
.manga-tutorial {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tutorial-box {
    background: #fff;
    padding: 30px 40px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.tutorial-box p {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}
.tutorial-box .tutorial-sub {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}
.tutorial-box button {
    background: #283593;
    color: #fff;
    border: none;
    padding: 10px 40px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
}
.tutorial-box button:hover {
    background: #cc9900;
}

.manga-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ▼ 左右の矢印エリア（常時表示） ▼ */
.manga-nav-area {
    position: absolute;
    top: 0;
    height: 100%;
    width: 15%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    opacity: 1;
}
.nav-left {
    left: 0;
    justify-content: flex-start;
    padding-left: 20px;
}
.nav-right {
    right: 0;
    justify-content: flex-end;
    padding-right: 20px;
}

.nav-icon {
    color: #283593a1;
    font-size: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
.manga-nav-area:hover .nav-icon {
    transform: scale(1.1);
}

/* ▼ スライド枠と各ページ ▼ */
.manga-slider-track {
    display: flex;
    width: 100%;
    align-items: flex-start; /* ▼ 修正: center から flex-start（上揃え）に変更 */
    transition: transform 0.4s ease-in-out;
}
.manga-slide {
    flex: 0 0 100%;
    width: 100%;
    padding: 0 60px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* ▼ 修正: center から flex-start（上揃え）に変更 */
}
/* =========================================
   修正：画面の高さに合わせて自動リサイズする（絶対に見切れない設定）
========================================= */
.manga-slide img {
    width: auto;
    height: auto;
    max-width: 50%; /* 横幅は最大でも半ページ分（50%）に抑える */
    object-fit: contain;
    /* ▼ 画面の高さの85%を上限にする（上下に少し余白を残す） ▼ */
    max-height: 99vh; 
    
    display: block;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* 画像にピッタリ影が沿います */
    background-color: #fff;
}

/* 1枚だけのページ（表紙など）は左半分に配置する（そのまま） 
.manga-slide img:only-child {
    margin-right: auto;
}*/

.modoru_work {
    display: inline-block;
    background-color: #faa200;
    color: #fff;
    border: solid 3px;
    padding: 10px 40px;
    font-size: 1rem;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
    line-height: 1.5;
}
.modoru_work:hover {
    background-color: #fa8500;
    transform: translateY(2px);
}

/* ▼▼ レスポンシブ対応（スマホ） ▼▼ */
@media (max-width: 768px) {
    .container_mng{padding: 0;}
    .manga-slider-wrapper { border-radius: 0; padding: 10px 0; }
    .manga-nav-area { display: none !important; }
    
    .manga-slider-container {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .manga-slider-container::-webkit-scrollbar { display: none; }
    .manga-slider-track {
        transition: none;
        gap: 15px;
    }
    .manga-slide {
        padding: 0;
        scroll-snap-align: center;
        justify-content: center;
    }
    
    /* ▼▼ ここを修正しました ▼▼ */
    .manga-slide img {
        width: auto; /* スマホ用にリセット */
        height: auto;
        max-width: 100%; /* ★超重要：PCの50%制限を解除して画面いっぱいに許可する */
    }
}

/* =========================================
   ▼ 追加：フルスクリーン時の矢印固定 ▼
========================================= */
/* ズームしても矢印が画面の左右から消えないように固定する */
.manga-slider-wrapper:fullscreen .manga-nav-area { position: fixed; }
.manga-slider-wrapper:-webkit-full-screen .manga-nav-area { position: fixed; }

/* =========================================
   上部の隙間（余白）を完全に強制ゼロにするリセットCSS
========================================= */

/* 1. ブラウザ標準の余白と、大枠の背景エリアの余白をすべてゼロに */
html, body, .lower-main-bg, .container_mng {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. 漫画コンテンツエリアの上の余白（40pxあったマージンをゼロに） */
.manga-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. スライダー外枠の上部余白をゼロに */
.manga-slider-wrapper {
    padding-top: 0 !important;
}

/* 4. 各スライド自体の上の余白をゼロに */
.manga-slide {
    padding-top: 0 !important;
}