body { 
    touch-action: manipulation; 
    background-repeat: repeat;
    background-position: top left;
    font-family: "nos", "MS PGothic", sans-serif; 
    font-size: 18px; 
    padding: 0; 
    margin: 0px;
    overflow-x: hidden; 
      background-image: url("img/stripe3.png");
  background-repeat: repeat;     /* ← タイル状に並べる */
  background-position: top left; /* ← 左上から開始 */
    /* background-size: 20px 20px; ← これを削除またはコメントアウト */
}
@font-face {
  font-family: "nos";
  src: url("font/Saitamaar.ttf") format("truetype");
}
.content { 
    gap: 10px; 
    padding: 15px; 
    padding-bottom: 30px; 
    min-height: 100vh; 
    display: flex;           /* GridからFlexに変更して高さの自動調整を防ぐ */
    flex-direction: column;  /* 縦に並べる */
    box-sizing: border-box; 
    max-width: 1200px; 
    margin: 0 auto; 
}
/* 外枠のコンテナ */
/* 外枠のコンテナの修正 */
.comic-container {
    width: 95%;            /* 100%から少し減らして余白を作る */
    max-width: 600px;
    margin: 20px auto;     /* 上下20px、左右は中央寄せ */
    font-size: 14px;
    box-sizing: border-box; /* パディングを含めたサイズ計算にする */
}

/* ラジオボタン自体は隠す */
input[name="comic-tab"] {
    display: none;
}

/* タブの並び */
.tab-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.tab-menu label {
    padding: 5px 15px;
    background: #e0e0e0;
    border: 1px solid #999;
    border-bottom: none;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    color: #666;
}

/* 選択されているタブの見た目 */
#tab1:checked ~ .tab-menu label[for="tab1"],
#tab2:checked ~ .tab-menu label[for="tab2"],
#tab3:checked ~ .tab-menu label[for="tab3"] {
    background: #ffffff;
    color: #000;
    font-weight: bold;
    border-bottom: 1px solid #fff; /* 下の枠線と繋がって見えるように */
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

/* コンテンツエリア */
.tab-content {
    display: none; /* 基本は隠す */
    padding: 10px;
    border: 1px solid #999;
    background: #fff;
    min-height: 200px;
}

/* 選択されたタブに対応するコンテンツを表示 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
    display: block;
}

/* リンク一覧の装飾 */
.episode-list {
    list-style: "・";
    padding-left: 20px;
}

.episode-list li {
    margin-bottom: 8px;
}

.episode-list a {
    color: #0000ee;
    text-decoration: none;
}

.episode-list a:hover {
    text-decoration: underline;
    background-color: #ffffcc;
}
/* リストの「・」を消して、画像とテキストを横並びにする */
.episode-list {
    list-style: none; /* サムネイルがあるのでポッチは消すのがおすすめ */
    padding-left: 0;
}

.episode-list li {
    margin-bottom: 12px; /* 少し間隔を広げると見やすい */
}

.episode-list a {
    display: flex;       /* 横並びにする */
    align-items: center; /* 垂直方向を真ん中に揃える */
    gap: 10px;          /* 画像と文字の間の隙間 */
    color: #0000ee;
    text-decoration: none;
    padding: 5px;
    border-radius: 4px;
    transition: background 0.2s;
}

/* サムネイルのサイズ指定 */
.episode-thumb {
    width: 60px;         /* お好みの幅に調整 */
    height: 40px;        /* お好みの高さに調整 */
    object-fit: cover;   /* 画像が歪まないように切り抜く */
    border: 1px solid #999;
    background: #eee;    /* 画像がない時の背景色 */
}

.episode-list a:hover {
    background-color: #ffffcc;
    text-decoration: none; /* ホバー時に下線を出さない（お好みで） */
}

.episode-title {
    font-weight: bold;
}
.episode-list a {
    display: flex;
    /* align-items: center; から以下に変更 */
    align-items: flex-start; /* 上端に揃える */
    
    gap: 10px;
    color: #0000ee;
    text-decoration: none;
    padding: 8px; /* 少し余白を広げるとスッキリします */
    border-radius: 4px;
    transition: background 0.2s;
}

/* タイトルの位置を微調整したい場合 */
.episode-title {
    font-weight: bold;
    line-height: 1.2; /* 行間を詰めると画像の上端と揃いやすくなります */
    padding-top: 2px; /* 画像と文字の「ツラ」を合わせるための微調整 */
}
/* 番外編を囲むボックス */
.extra-section {
    margin-top: 30px;
    padding: 15px;
    background-color: #f9f9f9; /* 本編と区別するための薄いグレー */
    border: 1px dashed #ccc;   /* 点線で囲むと「おまけ」感が出ます */
    border-radius: 8px;
}

/* 番外編の小見出し */
.extra-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
    color: #555;
    border-left: 4px solid #999; /* 左側に棒をつけて見出しっぽく */
    padding-left: 10px;
}

/* 番外編の中のリスト間隔を少し詰める（お好みで） */
.extra-section .episode-list li {
    margin-bottom: 10px;
}
/* 内側タブのコンテナ */
.sub-tab-container {
    margin-top: 15px;
}

/* スイッチを隠す */
input[name="sub-tab-nan"] {
    display: none;
}

/* 内側ボタンの並び */
.sub-tab-menu {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.sub-tab-menu label {
    padding: 6px 20px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 20px; /* 丸いボタン風 */
    cursor: pointer;
    font-size: 13px;
    color: #666;
    transition: all 0.2s;
}

/* 選択された時のボタン色（お好みの色に変えてください） */
#sub-main:checked ~ .sub-tab-menu label[for="sub-main"],
#sub-extra:checked ~ .sub-tab-menu label[for="sub-extra"] ,
#sub-etc:checked ~ .sub-tab-menu label[for="sub-etc"] {
    background: #00acc1; /* 少しアクセントになる色 */
    color: #fff;
    border-color: #00838f;
}

/* コンテンツの出し分け */
.sub-content {
    display: none;
}

#sub-main:checked ~ #main-list,
#sub-extra:checked ~ #extra-list,
#sub-etc:checked ~ #etc-list {
    display: block;
}
img {
  image-rendering: pixelated;
  max-width: 100%;
}