/*スマホ表示の時の右側の余白を消す*/
	.wrap {
		overflow: hidden;
	}
/*スマホでのリンクタップ青色を消す*/
	*:focus {outline: none;
	}
	a {
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		cursor:pointer;
	}	
/*HP全体*/
		body{ 
			margin: 0;padding: 0;/*HP全体のマージン消す*/
			background-color: #FFFFFF;}

		p{
			margin: 0;
		}	

/*スクロールふわっとcss*/
	.scroll-up {
		opacity: 0; 
		visibility: hidden;
		transform: translateY(50px);
		transition: all 1s;  
		overflow: visible;
	}
	.scroll-up.is-show {
		opacity: 1;
		visibility: visible;
		transform: translateY(0px);
		overflow: visible; 
	}

/*漫画のサイズ(Bibi)*/	
		.manga {
			width: 100%;
			height: 70%;
			margin-right: auto;
			margin-left: auto;
		}
		@media(min-width: 1100px){
			.manga {width: 100%;
				height: 88%;
				margin-right: auto;
				margin-left: auto;}
		}

/*一番下にある読みやすさを説明する文章*/			
		.yomiyasusa{
			text-align: justify;
			font-size: 12px;
			width: 260px;
			margin: auto;
			padding-top: 20px;	
		}

/*話数と日付*/
		.TOPnumber{
			width: 100%;          /* ← 1100px を 100% に変更 */
			max-width: 1100px;    /* ← max-width で上限を設定 */
			margin: auto;
			padding-left: 20px;
			 box-sizing: border-box; 
			}
		 .top-episode-number{
		 	font-size: 20px;
		 	margin-top: 40px;
		 	margin-bottom: 5px;
		 }

		 .top-episode-date{
		 	color:#555;
		 	font-size: 14px;
		 	margin: 0;
		 }

		 .number-boder{
		 	border-bottom: 2px solid #333333;
		 	margin-top: 40px;
		 }

/* 全体 */
.syosekisita{
    width: 100%;          /* ← 1100px を 100% に変更 */
    max-width: 1100px;    /* ← max-width で上限を設定 */
    margin: auto;
    display: flex;
    column-gap: 30px;
    row-gap: 60px; 
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 0 20px;        /* ← 追加 */
    box-sizing: border-box; /* ← 追加 */
}

/* 左 */
	.left{
		width:250px;
	}

	.left img{
		width:250px;
		display: block;
		margin: auto;
	}

	.sakuhin-title{
		font-size:26px;
		font-weight:bold;
		margin-top:10px;
	}

	.author{
		color:#555;
		margin-top: 10px;
	}

	.description{
		margin-top: 16px;
		line-height:1.6;
		font-size:14px;
	}


/* 中央 */
.center{
	flex:1;
	max-width: 550px; 
}


.zenwa{
	font-size: 14px;
	margin-left: 20px;
	margin-bottom: 5px;
}

.episode-top-border{
	border-top:1px solid #ddd;
}

.episode{
	display:flex;
	gap:15px;
	border-bottom:1px solid #ddd;
	padding:15px 0;
	text-decoration: none;
	padding-left: 20px;
	padding-right: 20px;
}
.episode:hover{
	background-color: #F4F4F4;}

	.episode img{
		width:180px;
		height:100px;
		object-fit:cover;
	}

	.ep-info{
		flex:1;
	}

	.date{
		color:#777;
		font-size:13px;
	}

	.Number{
		margin: 0;
		font-size:18px;
		font-weight:bold;
		margin:5px 0;
		color: #000;
	}

	.ep-title{
		margin: 0;
		color:#777;
		font-size:14px;
	}

/* 右 */
	.right{
		width:180px;
	}

	.right img{
		width:180px;
		display: block;
		margin: auto;
	}
	.rightmoji{
		margin: 10px;
		color:#000;
		font-size:13px;
	}
	@media (max-width: 1099px) {
		.TOPnumber {
			width: 100%;
		}
		.syosekisita {
			width: 100%;
			display: grid;
			grid-template-columns: 250px 1fr;
			grid-template-areas:
			"left  center"
			"right right";
		}
		.left {
			grid-area: left;
			width: 250px;
		}
		.center {
			grid-area: center;
		}
		.right {
			grid-area: right;
			max-width: 300px;
		}
	}

	@media (max-width: 700px) {
		.syosekisita {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "left"
            "center"
            "right";
    }
    .left {
        max-width: 500px;
        margin: auto;
    }
    .right {
        max-width: 500px;
        margin: auto;
    }
}