@charset "UTF-8";
/* CSS Document */

i{
	margin: 0 0 0 0.6em;
	font-size: 1.2em;
}
.sec-inner-design{
	padding: 9vh 0vw;
	margin: 0 auto;
}

.design-list {
	width: calc(100% - 40px) ;
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
}

/*各画像の横幅などの設定*/
.item {
	width: calc(100%/5 - 12px) ;
	margin: 5px;
	border: 1px solid #c0c0c0;
	
	overflow:hidden; /*これを記述することではみ出た部分を非表示にします。*/
}

.design-list img{
	transition:1s all;
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}
.design-list img:hover{
	transform:scale(1.2,1.2);
	transition:1s all;
}


.design-image{
	width: 100%;
	margin-bottom: 10px;
}

.logogo{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
}
.logogo li{
	width: calc(100%/3 - 0px) ;
}
.logogo img{
	width: 100%;
	height: auto;
}


@media screen and (max-width: 900px) {
	.design-list .item{
		width: calc(100%/3 - 12px) ;
		margin: 5px;
	}
}

@media screen and (max-width: 450px) {
	.design-list .item{
		width: calc(100%/2 - 14px) ;
		margin: 6px;
	}
	.logogo li{
		width: calc(100%/2 - 0px) ;
	}
}