:root {
	--work-all-text-padding-top: calc(4rem + 0rem);
	--work-all-text-padding-top-first-child: calc(4rem + 4rem);
	--work-all-text-padding-top-mobile: 2rem;
}


.grid-item-wrapper {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 100%;
}

.grid-item {
	position: relative;
}

.grid-item a {
	opacity: 1.0;
}

/*
.grid-item a,
.grid-item a:link,
.grid-item a:visited,
.grid-item a:active {
	display: block;
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);

	opacity: 1.0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);

	-o-transition:.4s;
	-ms-transition:.4s;
	-moz-transition:.4s;
	-webkit-transition:.4s;
	transition:.4s;

}

.grid-item a:hover {
	display: block;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);

	opacity: 1.0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);

	-o-transition:.4s;
	-ms-transition:.4s;
	-moz-transition:.4s;
	-webkit-transition:.4s;
	transition:.4s;

}

*/

/* ************************************************************************** */
/* image layer */

.grid-item-img {
	display: block;
	width: 100%;
	height: auto;
	border: none;

	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;

	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.grid-item-wrapper:hover .grid-item-img {

}

.grid-item-wrapper.grid-item-hover-omit:hover .grid-item-img {
	filter: unset;
}

/* ************************************* */

@media only screen and (max-width: 767.98px) {
	.grid-item-img {
		height: 100vw;/* square format */
		min-width: 100vw;
		width: auto;
		object-fit: cover;
	}
}

/* ************************************************************************** */

/* overlay image layer */
.grid-overlay-image {
	margin: auto;
	z-index: 11;
	position: absolute;
	display:block;

	width: 100%;
	height: auto;

	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	filter: alpha(opacity=0);/* IE */
	opacity: 0;

	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

.grid-overlay-image img {
	width: auto;
	height: 100%;
	display: block;
	opacity: 0;
	object-fit: cover;
}

.grid-overlay-image img.reveal {
	opacity: 1;
	-webkit-animation: FadeIn 2s;
       -moz-animation: FadeIn 2s;
        -ms-animation: FadeIn 2s;
         -o-animation: FadeIn 2s;
            animation: FadeIn 2s;
}

.grid-item-wrapper:hover .grid-overlay-image {
	filter: alpha(opacity=100);/* IE */
	opacity: 1.0;
}

/* ************************************************************************** */

/* overlay layer */
.grid-overlay-color {
	margin: auto;
	z-index: 10;
	position: absolute;
	display:block;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	background: #000000;

	filter: alpha(opacity=0);/* IE */
	opacity: 0;

	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

.grid-item-wrapper:hover .grid-overlay-color {
/* 	z-index: 15; */
	filter: alpha(opacity=50);/* IE */
	opacity: 0.5;
}

/* ************************************************************************** */

/* overlay text */
.grid-overlay-text {
	margin: 0 0 0 0;
	padding: 0 var(--pad-side) 1rem 0;
	z-index: 12;
	position: absolute;
	top: var(--work-all-text-padding-top);
	left: var(--pad-side);

/* 
	display: flex;
	align-items: center;
	justify-content: center;
 */

	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;

}

/* 
.grid-overlay-text-hide {
	display: none;
}
.grid-item-wrapper:hover .grid-overlay-text {
	filter: alpha(opacity=0);
	opacity: 0;
}
*/

.div-content-title {
	padding: 0 0 1rem;
	color: var(--color-01);
	font-family: var(--font-bold);
	font-weight: var(--font-bold-weight);
	font-size: var(--font-4l);
	text-align: left;
	letter-spacing: var(--letter-spacing);
	line-height: 100%;
}

.grid-overlay-text p {
	padding: 0;
	font-size: var(--font-s);
}

/* ************************************* */

/* overlay text - first-child */

.grid-item-wrapper:first-child .grid-overlay-text {
	top: var(--work-all-text-padding-top-first-child);
}

/* ************************************* */

@media only screen and (max-width: 767.98px) {
	.grid-item-wrapper:first-child .grid-overlay-text,
	.grid-item-wrapper .grid-overlay-text {
		top: var(--work-all-text-padding-top-mobile);
	}
	.div-content-title {
		font-size: var(--font-2l-mobile);
	}
}

/* ************************************************************************** */

/* hover text */
.grid-hover-text {
	margin: 0 0 0 0;
	padding: 0 var(--pad-side) var(--pad-side) 0;
	z-index: 15;

/* 
	position: absolute;
	top: var(--pad-side);
	left: var(--pad-side);
 */

/* 
	display: flex;
	align-items: center;
	justify-content: center;
 */

	filter: alpha(opacity=0);/* IE */
	opacity: 0;
	display: none;

	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;

}

/* 
.grid-hover-text-hide {
	display: none;
}
 */

.grid-item-wrapper:hover .grid-hover-text {
	filter: alpha(opacity=100);/* IE */
	opacity: 1.0;
	display: block;
}

.div-hover-content-title {
	padding: 0 0 1rem 0;
	color: var(--color-01);
	font-family: var(--font-bold);
	font-weight: var(--font-bold-weight);
	font-size: var(--font-l);
	text-align: left;
	letter-spacing: var(--letter-spacing);
	line-height: 100%;
}

/* ************************************* */

@media only screen and (max-width: 767.98px) {
	.grid-hover-text {
		padding: 0 0 var(--pad-side) 0;
	}
}

/* ************************************************************************** */

/* award */

.div-hover-content-award-wrapper {
	padding: 1rem 0 2rem;
	display: flex;
}
.div-hover-content-award-wrapper-left {
	margin-right: 1rem;
	justify-content: flex-start;
	border-right: 1px #FFF solid;
}
.div-hover-content-award-wrapper-left img {
	padding-right: 1rem;
	width: 100%;
	max-width: 85px;
}
.div-hover-content-award-wrapper-right {
	justify-content: flex-start;
}
.div-hover-content-award-wrapper-right {
	margin: 0;
	padding: 0 2rem 0.5rem 0;
	display: block;
}

/* ************************************* */

@media only screen and (max-width: 767.98px) {
	.div-hover-content-award-wrapper {
		padding: 0 0 1rem;
	}
	.div-hover-content-award-wrapper-left img {
		width: 50px;
	}
	.div-hover-content-award-wrapper-right {
		padding: 0 0rem 0.5rem 0;
	}
}

/* ************************************************************************** */

/* caption */
.grid-caption {
	display: none;
	padding: 0.5rem 1rem 1rem 1rem;
	z-index: 20;

	box-sizing: border-box;

	width: 100%;
	text-align: center;

	font-size: var(--font-s);
	font-family: inherit;
	font-weight: normal;
	line-height: 125%;

	color: #000000;

	filter: alpha(opacity=70);/* IE */
	opacity: 0.7;

	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

.grid-caption-show {
	display: block;
}

.grid-item-wrapper:hover .grid-caption {
	filter: alpha(opacity=100);/* IE */
	opacity: 1.0;
}


.ratio {
	display:block;
	width:100%;
	height:auto;
}

/* ************************************************************************** */