@charset "UTF-8";
#contentHeader {
	margin-bottom : 0;
}
#breadcrumb {
	border-bottom : 0;
}

#archive {
	width : 100%;
	max-width : 100%;
	margin : 0 auto 0;
	padding : 0;
}
#archive img {
	width : 100%;
}

#caselist > li {
	display : grid;
	grid-template-columns : 1fr 1fr;
	margin-bottom : 20px;
}
#caselist > li:nth-child(2n) .img {
	grid-column : 2/2;
	grid-row : 1/2;
	height : 100%;
}
#caselist > li:nth-child(2n) .content {
	grid-column : 1/2;
	grid-row : 1/2;
}
#caselist > li .img {
	background-color : #eeeeee;
}
#caselist > li .img img {
	width : 100%;
}

#caselist > li .content {
	padding : 40px;
}
#caselist > li .content h2 {
	font-size : 1.6em;
	font-weight : bold;
	margin-bottom : 0.5em;
	text-decoration : none;
}
#caselist > li .content h2 a {
	text-decoration : none;
}
/* taxonomy */
#category_list {
	margin-bottom : 0;
}
#category_list h2 {
	font-size : 2em;
	font-weight : bold;
	margin-bottom : 1em;
	text-decoration : none;
}
#category_list ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr;
	grid-gap : 24px;
}

#category_list ul a {
	transition : all 0.2s ease-out;
	text-decoration : none;
}
#category_list ul a:hover {
	opacity : 0.7;
}
#category_list ul .img {
	overflow : hidden;
	height : 14vw;
	max-height : 320px;
	margin-bottom : 0.5em;
}
#category_list ul .img img {
	width : 100%;
	height : 100%;
	transition : all 0.2s ease-out;
	object-fit : cover;
}
#category_list ul a:hover img {
	transform : scale(1.1);
}
#category_list .title {
	font-weight : bold;
	margin-bottom : 0.5em;
	padding-bottom : 0.5em;
	color : #2d64af;
	border-bottom : 1px solid #eeeeee;
}
#category_list .material,
#category_list .hardness,
#category_list .size {
	display : flex;
	font-size : 0.725em;
	font-weight : bold;
	align-items : center;
	margin-bottom : 8px;
}
#category_list .material span,
#category_list .hardness span,
#category_list .size span {
	display : inline-block;
	font-size : 0.85em;
	width : 4em;
	margin-right : 1em;
	padding : 0.25em;
	text-align : center;
	letter-spacing : 0.1em;
	background-color : #eeeeee;
}


/* detail */
#detail article {
	display : grid;
	grid-template-columns : 30% 1fr;
	grid-gap : 40px;
}
#detail article .imgs > li {
	overflow : hidden;
	margin-bottom : 32px;
	border : 1px solid #eeeeee;
}
#detail article .imgs img {
	width : 100%;
}
#detail article .content h2 {
	font-size : 2em;
	font-weight : bold;
	padding-bottom : 0.5em;
	color : #2d64af;
	border-bottom : 1px solid #2d64af;
}

#detail article .spec {
	margin-bottom : 32px;
	padding : 24px 0;
	border-bottom : 1px solid #cccccc;
}
#detail article .spec > p {
	display : flex;
	font-weight : bold;
	align-items : center;
	margin-bottom : 8px;
}
#detail article .spec > p span {
	display : inline-block;
	font-size : 0.85em;
	width : 4em;
	margin-right : 1em;
	padding : 0.25em;
	text-align : center;
	letter-spacing : 0.1em;
	background-color : #eeeeee;
}
#detail article .content .description > p:not(:last-of-type) {
	margin-bottom : 1em;
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
}
@media screen and (max-width: 767px) {
	section {
		margin : 0 20px 0;
		padding : 0;
	}
	#smp {
		margin : 0;
		padding : 0 0;
	}
	#archive {
		width : 100%;
		max-width : 100%;
		margin : 0 auto 0;
		padding : 0;
	}
	#archive img {
		object-fit : cover;
	}
	#caselist > li {
		margin-top : 30px;
	}
	#caselist > li .content {
		padding : 20px;
	}


	#caselist > li {
		display : grid;
		grid-template-columns : 1fr;
		margin-bottom : 20px;
	}
	#caselist > li .img {
		height : 200px;
	}
	#caselist > li:nth-child(2n) .img {
		height : 200px;
	}
	#caselist > li:nth-child(2n) .img {
		display : block;
		height : 200px;
	}
	#caselist > li:nth-child(2n) .content {
		display : block;
	}#category_list {
		margin-bottom : 0;
	}


	#category_list ul {
		display : grid;
		grid-template-columns : 1fr 1fr;
		grid-gap : 24px;
	}
	#detail article {
		display : grid;
		grid-template-columns : 1fr;
		grid-gap : 40px;
	}
}