/* >> REFERENCE Style
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
.referenceList{
	@extend %flexBox; 
	align-items: stretch; 
	justify-content: flex-start;
	max-width: 1400px;
	width: 90%;
	margin: 0 auto;  
	padding: 0; 
	z-index: 3;
	.reference__item{
		position: relative; 
		width: 100%; 
		max-width: 100%; 
		flex-basis: 100%;
		max-height: 380px;
		margin-bottom: 0.75rem; 
		margin-right: 0;
		background-color: white;
		border: 1px solid $color-border;
		@media #{$mq-iPad_land}{
			width: 49.5%; 
			max-width: 49.5%; 
			flex-basis: 49.5%;
			max-height: 480px;
			margin-right: 1%;
			&:nth-child(2n){margin-right: 0;}
			&:last-child{margin-right: 0;}
		}
		.reference__item__img{
			@extend %flexBox; height: 100%; overflow: hidden;
			img{object-fit: cover;}
			&:before{transition: all 0.5s cubic-bezier(0.7, 0, 0.3,1); content:''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: $color-darkBlue; z-index: 2; opacity: 0.65;}
			&:hover{
			  &:before{opacity: 0.2;}
			}
		}
			.reference__item__caption{
				@extend %flexBox;
				justify-content: center;
				align-items: center; 
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				z-index: 3;
				padding: 1rem;
				.reference__icon{
					display: inline-block;
					vertical-align: middle;
					width: 90px;
					@media #{$mq-pc_1280}{
						width: 128px;
					}
				}
				.reference__lead{
					@include transition;
					display: block;
					width: calc(100% - 92px);
					position: relative;
					padding-left: 3rem;
					font-size: 1rem;
					line-height: 1.2;
					font-weight: 500;
					color: white;
					@media #{$mq-pc_1280}{
						width: calc(100% - 130px);
					}
					&:before{@include transition; content: '';display: block; position: absolute; top: calc(50% - 1px); left: 0.75rem; width: 1.5rem; height: 2px; background-color: white;}
					&:hover{color: $color-active;
						&:before{background-color: $color-active;}
					}
				}
			}
	}
}
	.reference__item__tags{ padding: 0.2rem; position: absolute; top: 0.5rem; left: 0.5rem; z-index: 3;
		.tag__item{display: inline-block; vertical-align: middle; padding: 0.3rem 1rem; font-size: 0.9rem; line-height: 1; font-weight: 600; text-align: center; background-color: $color-primary; color: white;
			&.ref-color-2{background-color: $color-active;}
		}
	}