@charset "UTF-8";


/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////// Parts ///////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

.cate_date
{
	display: flex;
	font-size: .9em;
}

#works .cont
{
	margin: 0;
}

#works .cont .date:after
{
	content:"｜";
	display: inline-block;
	transform: translateX(.5rem);
}

.cont p.cate
{
	margin-bottom:1em;
}

.cont h1.transY
{
	color:rgb(0, 62, 52);
	font-size: clamp(1.2rem, 5vw, 1.5rem);

	margin-top: 1em;
	margin-bottom: 1.5em;
	padding-bottom: 1em;
	border-bottom: 2px solid rgb(255, 255, 255);
	
	transition-delay: .25s;
}

.cont .text
{
	display:flex;
}

.cont .text .data
{
	width: 15rem;
	font-size: .9em;
	font-family: R-R, GG-R, sans-serif;
	font-weight: 400;
}

.cont .text .desc
{
	width: calc(100% - 15rem);
}

.cont .text .data table td
{
	vertical-align: top;
	line-height: 1.5;
}

.cont .text .data table tr td:nth-of-type(1)
{
	padding-right: 1.5em;
	white-space: nowrap;
}

.cont .text .data table tr td > span
{
	margin-right:1em;
}

.img img
{
	cursor: zoom-in;
	width: 100%;
	height: 100%;
	max-height: calc(1056px * 3 / 4);
	object-fit: contain;
	object-position: center;
}

.main_img_title
{
	margin: 0 auto;
	width: 100%;
}


.main_img_title img,
.img_wrapper img
{
	max-width: 100%;
	height:auto;
}

.fixed_img
{
	display: flex;
	flex-wrap: wrap;
	margin: clamp(2.4rem, 10vw, 3rem) -.5rem 0;
	width:calc(100% + 1rem);
	
	font-size: .9em;
	font-family: R-R, GG-R, sans-serif;
	font-weight: 400;
}

.img_wrapper
{
	width: calc(50% - 1rem);
	margin: 0 .5rem 1rem;
}

#modalWindow .caption
{
	font-size: .9em;
	font-family: R-R, GG-R, sans-serif;
	font-weight: 400;
}

/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 900px)
{
	.cont .text
	{
		flex-direction: column;
		
	}
	
	.cont .text .data
	{
		width: 100%;
		margin-bottom: clamp(2.4rem, 10vw, 3rem);
	}
	
	.cont .text .desc
	{
		width: 100%;
	}
	
	.img_wrapper
	{
		width: 100%;
	}
}

@media screen and (max-width: 650px)
{
	#works .cont {
		width: calc(100% + 0rem);
	}
}

@media screen and (max-width: 500px)
{
	.data td
	{
		display:block;
	}
}