/*-----------------------------------------
  #list
------------------------------------------*/
/*+++++----- for PC -----+++++*/
@media screen and (min-width:1025px) {
	#list {
		overflow:hidden;
		margin-bottom:50px;
		width:760px !important;
	}
	#list li {
		width:240px;
		float:left;
		margin:0px 15px 25px 0px;
		background:#000;
		padding:10px 10px 15px 10px;
	}
	#list li:nth-of-type(3n) {
		margin-right:0;
	}
	#list li figure {
		margin-bottom:10px;
		width:220px;
		height:150px;
		overflow:hidden;
		text-align:center;
	}
	#list li figure img {
		height:150px;
		margin:0px auto;
		width:auto;
	}
	#list li .case_ttl {
		font-size:14px;
		margin-bottom:10px;
		max-height:35px;
		overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}
	#list li a .case_ttl {
		color:#fff;
		text-decoration:underline;
	}
	#list li a:hover .case_ttl {
		text-decoration:none;
	}
	#list li .btn {
		width:160px;
		text-align:center;
		font-size:18px;
		margin:0 auto;
		font-family:'EB Garamond', serif;
	}
	#list li a .btn {
		background:#fff;
		color:#000;
		padding:8px 8px 10px 8px;
		transition:all 0.4s linear;
		-webkit-transition:all 0.4s linear;
	}
	#list li a:hover .btn {
		background:#999;
	}
}

/*+++++----- for tablet -----+++++*/
@media screen and (min-width:768px) and (max-width:1024px) {
	#list {
		overflow:hidden;
		margin:0 auto 5em auto;
		width:88%;
	}
	#list li {
		padding:0.3em 0.3em 1.2em 0.3em;
		width:30%;
		float:left;
		margin:0 5% 2em 0;
		background:#000;
	}
	#list li:nth-of-type(3n) {
		margin-right:0;
	}
	#list li figure {
		margin-bottom:0.3em;
		overflow:hidden;
		height:6em;
		text-align:center;
	}
	#list li figure img {
		margin:0px auto;
		height:6em;
		width:auto;
	}
	#list li .case_ttl {
		margin-bottom:1em;
		font-size:0.7em;
		max-height:2.5em;
		overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	#list li a .case_ttl {
		color:#fff;
		text-decoration:underline;
	}
	#list li .btn {
		width:55%;
		margin:0 auto;
		text-align:center;
		padding:0.1em 0.2em 0.3em 0.1em;
		font-family:'EB Garamond', serif;
	}
	#list li a .btn {
		background:#fff;
	}
}

/*+++++----- for SP -----+++++*/
@media screen and (max-width:767px) {
	#list {
		margin:0 auto 5em auto;
		width:90%;
	}
	#list li {
		background:#000;
		padding:0.8em 0.8em 1.2em 0.8em;
		margin-bottom:2em;
	}
	#list li figure {
		margin-bottom:1.5em;
	}
	#list li .case_ttl {
		margin-bottom:1.5em;
		max-height:2.5em;
		overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	#list li a .case_ttl {
		color:#fff;
		text-decoration:underline;
	}
	#list li .btn {
		width:60%;
		margin:0 auto;
		text-align:center;
		padding:0.2em 0.2em 0.3em 0.2em;
		font-family:'EB Garamond', serif;
		font-size:2em;
	}
	#list li a .btn {
		background:#fff;
	}
}

/*-----------------------------------------
  #detail
------------------------------------------*/
#detail {
	background:#000;
}
#detail .fotorama {
	text-align:center;
}
#detail .fotorama .fotorama__wrap {
	margin:0 auto;
}
#detail .fotorama__thumb-border {
	border-color:#AB2121;
}
#detail .case_ttl {
	color:#fff;
}
#detail .fotorama__caption__wrap {
	width:100%;
	background:rgba(0,0,0,0.8);
	color:#fff;
}
/*+++++----- for PC -----+++++*/
@media screen and (min-width:1025px) {
	#detail {
		padding:20px 30px;
	}
	#detail .case_ttl {
		font-size:24px;
		margin-bottom:15px;
	}
}

/*+++++----- for tablet -----+++++*/
@media screen and (min-width:768px) and (max-width:1024px) {
	#detail {
		padding:1.5em 2.5em;
	}
	#detail .case_ttl {
		font-size:1.4em;
		margin-bottom:0.5em;
	}
}

/*+++++----- for SP -----+++++*/
@media screen and (max-width:767px) {
	#detail {
		padding:1.5em 2.5em;
	}
	#detail .case_ttl {
		font-size:1.4em;
		margin-bottom:0.5em;
	}
}