#main {
	padding-bottom: 100px;
}
.design-list {
	max-width: 100%; /* デザインプレート3列分(330px * 3) + プレート間の空白(30px * 2) = 1050px */
	margin-bottom: 75px;
	transition: all 0.5s;
}
.design-plate { /* すべてのデザインプレートの設定 */
	max-width: 31.428571%;     /* 330px = 1050pxの31.428571% */
	margin: 1.428571% 1.428571% 1.047619%;     /* 15px 15px 11px(ドロップシャドウの7px分を引く) */
	float: left;
	position: relative;
	transition: all 0.5s;
	-webkit-filter: drop-shadow(0 2px 2px #bbbbbb);
	filter: drop-shadow(0 2px 2px #bbbbbb); 
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	/* -webkit-tap-highlight-color:rgba(0,0,0,0); */
	will-change: max-width, margin;
	
	/* GPUを有効にする */
	-webkit-transform: translateZ(0px);
	transform: translateZ(0px);
}
.design-plate:nth-of-type(3n+1) { /* 1列目の左側のマージンを0に */
	margin-left: 0;
}
.design-plate:nth-of-type(3n) { /* 3列目の右側のマージンを0に */
	margin-right: 0;
}
.design-plate a {
	z-index: 8;
}
.design-plate span {
	z-index: 6;
	color: #ffffff;
	text-align: center;
	font-family: "秀英丸ゴシック L", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ丸ゴ ProN", "ヒラギノ角ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", sans-serif;
	width: 100%;
	display: inline-block;
	margin-top: 27%;
	font-size: 70%;
	transition: all 0.3s;
	opacity: 0;
	line-height: 1.6em;
	position: absolute;
	border-radius: 20px;
	will-change: opacity, transition, transition-delay;
}
.design-plate cite {
	font-size: 130%;
}
.design-plate:nth-of-type(2) cite { /* 欧文は和文より小さいので大きくする */
	font-size: 160%;
}
.design-plate:nth-of-type(4) cite { 
	font-size: 160%;
}
.design-plate img {
	width: 100%;
	transition: all 0.3s;
	will-change: transition, -webkit-filter, filter;
}


.hover-plate-img{ /* スマホ対策として基本はjsでホバーエフェクトをかける */
	-webkit-filter: brightness(30%);
	filter: brightness(30%);
}

.no-js .design-plate a:hover img{ /* JS無効時 */
	-webkit-filter: brightness(30%);
	filter: brightness(30%);
}
.no-js .design-plate a:hover span{ /* JS無効時 */
	opacity: 1;
	transition-delay: 0.2s;
}


/* ウインドウ幅の変化に対応----------------------------------------------- */

@media screen and (max-width: 980px) { /* #mainの幅が839-980pxの時 */
    .design-plate span {
	margin-top: 25%;
    }
}
@media screen and (max-width: 839px) { /* #mainの幅が600-839pxの時 */

    /* .design-listが690pxになったときにデザインプレートを2列にしてプレートの大きさを329pxにリセットする */
    
    .design-plate:nth-of-type(n) {
	max-width: 47.826%;                     /* 330px = 690pxの47.826%  */
	margin: 2.17391% 2.17391% 1.5942%;        /* (15px 15px 11px) / 690px */
    }
    .design-plate:nth-of-type(2n+1) {
	clear: both;
	margin-left: 0;
    }
    .design-plate:nth-of-type(2n) {
	margin-right: 0;
    }
    .design-plate span {
	margin-top: 26%;
    }
}
@media screen and (max-width: 600px) { /* #mainの幅が470-600pxの時 */
    .design-plate span {
	margin-top: 24.5%;
    }
}
@media screen and (max-width: 470px) { /* #mainの幅が0-470pxの時 */
    .design-list {
	max-width: 92%;
	margin-left: auto;
	margin-right: auto;
    }
    .design-plate:nth-of-type(n){ /* デザインプレートを一列にする */
	clear: both;
	max-width: 100%;
	margin: 2.93% 0 4.8%;
    }
    .design-plate span {
	margin-top: 27%;
    }
}
/* ------------------------------------------------------------------- */