@charset "utf-8";
#bg{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 100svh;
	overflow: hidden;
	background-image: url("../img/comment/bg.jpg");
	background-color: #250911;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}

#comment{
	position: relative;
	margin: 0;
	width: 100%;
	z-index: 10;
	overflow: hidden;
}
#comment #ttl h2{
	position: absolute;
	top: 20px;
	right: 10px;
	color: #ffffff;
	font-size: min(3vw, 150%);
	height: 1em;
}
#comment #ttl h2 span {opacity: 0;}
@keyframes ttlAni {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
h3{
	position: relative;
	margin: 40px 0 10px 20px;
	width: calc(100% - 60px);
	max-width: 1200px;
}
h3 img{
	width: 100%;
	max-width: 530px;
}
.list{
	position: relative;
	margin: 0 0 20px 20px;
	width: calc(100% - 20px);
	overflow: scroll;
	scrollbar-width: none;
}
.list ul{
	position: relative;
	margin: 0 auto;
	width: 1200px;
}
.list ul li{
	position: relative;
	margin:  0 10px 20px 0;
}
.list li .Img{
	position: relative;
	margin: 0;
}
.list li .Img.H001 img{height: 298px;}
.list li .Img.H002-1 img{height: 152px;}
.list li .Img.H002-2 img{height: 255px;}
.list li .Img.H002-3 img{height: 226px;margin: 0 0 15px 0;}
.list li .Img.H002-4 img{height: 164px;}
.list li .Img.H002-5 img{height: 407px;}
.list li .Img.H002-1.marginBtm, .list li .Img.H002-3.marginBtm{margin:0;}
.list li .Img.H003-1 img{height: 161px;}
.list li .Img.H003-2 img{height: 221px;}
.list li .Img.H003-3 img{height: 385px;}
.list li .Img.H003-4 img{height: 385px;}



/* ----- pc ----- */
@media screen and (min-width: 799px) {
	
	#bg{background-image: url("../img/comment/bg_pc.jpg");}

	#comment #ttl{margin: 0 auto;}
	#comment #ttl h2{
		position: absolute;
		top: 2%;
		left: auto;
		right: 2%;
	}

	h3{margin: 60px auto 30px auto;}
	.list{
		margin: 0 auto 60px auto;
		width: calc(100% - 40px);
	}
}