@charset "utf-8";
/*BASE*/
main article {
	background-image:url(../images/tmpl/bgimg_section-paper.gif);
}

a.colorbox { display:none; position:relative; }
a.colorbox.main {
	display:block;
	width:100%;
	aspect-ratio: 4 / 3 ;
	overflow:clip;
}
a.colorbox.main::after {
	content:"";
	display:block;
	width:16%;
	aspect-ratio: 1 / 1 ;
	background:var(--color-logo) url(../images/tmpl/icon-open-lightbox-w.svg) no-repeat center center;
	background-size:60%;
	position:absolute;
	bottom:0;
	right:0;
	opacity:1;
}
a.colorbox.main img {
	object-fit: cover;
}

/*NAVI*/
header nav .works .en {
	color:rgba(72,143,187,1) !important;
}
/*HEADER*/
#factory-re .keyvisual {
	background-image:url(../images/works/factory-re/keyvisual.jpg);
}
#factory .keyvisual {
	background-image:url(../images/works/factory/keyvisual.jpg);
}
#house .keyvisual {
	background-image:url(../images/works/house/keyvisual.jpg);
}
#house .keyvisual {
	background-image:url(../images/works/house/keyvisual.jpg);
}

/*実績一覧*/
#works-list .content .content-box .txt-box .title {
	font-weight:700;
	color:var(--color-logo);
}

@media screen and (max-width: 767.98px) {
/*BASE*/

/*KeyVisual*/
.keyvisual .title-box h1 .ja span {
	display:inline-block;
	letter-spacing:normal;
	padding-left:.5rem;
	font-size:12px;
}
#house .keyvisual .title-box h1 .ja span {
	display:block;
	font-size:10px;
	line-height:1;
	padding-left:0;
}

/*実績一覧*/
#works-list h1.title.line {
	font-size:16px;
	background-color:rgba(255,255,255,1);
	text-align:center;
	padding:4rem 0;
	margin-bottom:0;
}
#works-list .content {
	padding:4rem 2rem;
}
#works-list ul.content > li:not(:last-child) {
	margin-bottom:3rem;
}
#works-list .content .content-box {
	background-color:rgba(255,255,255,1);
	padding:1rem;
	border-radius:10px;
	box-shadow:2px 4px 10px rgba(0, 0, 0, .2);
	overflow:crip;
	position:relative;
}
#works-list .content .content-box dl {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:1rem;
} 
#works-list .content .content-box .tag-box {
	grid-column: 1 / 4;
	color:#FFF;
	background-color: var(--color-logo);
	padding:.5rem 1rem;
}
#works-list .content .content-box .tag-box h2 {
	text-align:center;
	letter-spacing:.2em;
}
#works-list .content .content-box .tag-box p {
	display:flex;
	column-gap:1rem;
	justify-content:center;
	align-items:center;
	font-size:12px;
	text-align:center;
}
#works-list .content .content-box .photo .caption {
	display:none;
}
#works-list .content .content-box .photo img { width:100%; height:100%; object-fit: cover;}
#works-list .content .content-box .txt-box {
	font-size:12px;
	padding:1rem;
	border:solid 1px #CCC;
	grid-column: 1 / 4;
}
#works-list .content .content-box .txt-box .title {
	margin-bottom:1rem;
}

}

@media screen and (min-width: 768px), print {
/*BASE*/
a.colorbox { cursor:zoom-in; }
a.colorbox.main img {
	object-fit: cover;
	transform-origin: center center;
	transition: transform .4s ease-in;
}
a.colorbox.main:hover img {
	transform: scale(1.4);
}

/*実績一覧*/
#works-list h1.title.line {
	font-size:clamp(24px, 2.4vw, 32px);
	background-color:rgba(255,255,255,1);
	text-align:center;
	padding:100px 0;
	margin-bottom:0;
}
#works-list .content {
	padding:100px 80px;
}
#works-list ul.content > li {
	max-width:1440px;
	margin:auto;
}
#works-list ul.content > li:not(:last-child) {
	margin-bottom:60px;
}
#works-list .content .content-box {
	background-color:rgba(255,255,255,1);
	padding:calc(48px + 80px) 60px 60px;
	border-radius:10px;
	box-shadow:2px 4px 10px rgba(0, 0, 0, .2);
	overflow:crip;
	position:relative;
}
#works-list .content .content-box dl {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:2rem;
} 
#works-list .content .content-box .tag-box {
	display:flex;
	align-items:center;
	column-gap:2rem;
	height:48px;
	color:#FFF;
	background-color: var(--color-logo);
	padding:0 60px;
	position: absolute;
	top: 40px;
	left:0;
	clip-path: polygon(
		0 0,
    	100% 0,
    	calc(100% - 40px) 100%,
    	0 100%,
    	0 100%
	);
}
#works-list .content .content-box .tag-box h2 {
	letter-spacing:.2em;
}
#works-list .content .content-box .tag-box p {
	display:flex;
	column-gap:1rem;
	align-items:center;
	font-size:clamp(12px, 1.2vw, 14px);
}
#works-list .content .content-box .photo .caption {
	font-size:clamp(10px, 1.1vw, 12px);
	text-align:center;
	padding:.5em 0;
}
#works-list .content .content-box .photo .caption::before {
	content:"▲";
}
#works-list .content .content-box .photo img {
	width:100%;
}
#works-list .content .content-box .txt-box {
	font-size:clamp(12px, 1.2vw, 14px);
	padding:2em;
	border:solid 1px #CCC;
}
#works-list .content .content-box .txt-box.default {
	grid-column: 1 / 4;
}
#works-list .content .content-box .txt-box.column2 {
	grid-column: 2 / 4;
}
#works-list .content .content-box .txt-box .title {
	font-size:clamp(14px, 1.4vw, 16px);
	margin-bottom:1em;
}

}