@charset "UTF-8";
@import url(cmn.css);
@import url(base.css);

/*---------------------------------------------*/

.design_img{
	gap: 40px 2%;
	align-items: flex-start;
}
.design_img li{
	width: 31%;
}
.design_img figure{
	aspect-ratio: 1 / 1;
	border: 1px solid var(--black);
	margin-bottom: 20px;
}
.design_img figure img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: top center;
}
.design_img h3+p{
	text-align: center;
	color: #777;
	margin-bottom: 20px;
}

.design_img input.form-control{
	width: 80%;
	padding: .8rem;
	font-weight: 400;
	line-height: 1.5;
	font-size: 1.2rem;
	border: 1px solid var(--i_border_color);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 5px;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.design_img .copyBtn{
	width: 15%;
	margin-left: 5px;
	cursor: pointer;
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	border: 1px solid var(--i_main_color);
	color: var(--i_main_color);
	font-size: 1.2rem;
	padding: .3rem;
	border-radius: 5px;
	transition: .2s ease-in-out;
}
.design_img .copyBtn:hover{
	background: var(--i_main_color);
	color: #fff;
}
@media screen and (max-width: 768px){
	.design_img li{
		width: 100%;
	}
	.design_img figure{
		aspect-ratio: 4 / 3;
	}
	.design_img .img_url{
		width: 80%;
		margin: 0 auto;
	}
}