/* >> Office Style
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
.officeList{
	@extend %flexBox; 
	align-items: stretch; 
	justify-content: center; 
	margin: 2rem auto;  
	padding: 0; 
	z-index: 3;
	.officeList__item{
		position: relative; 
		width: 100%; 
		max-width: 100%; 
		flex-basis: 100%; 
		margin-bottom: 2.5rem; 
		margin-right: 0;
		background-color: white; 
		border: 1px solid $color-border;
		@media #{$mq-tab_720}{
			width: 48%; 
			max-width: 48%; 
			flex-basis: 48%; 
			margin-right: 4%;
			&:nth-child(2n){margin-right: 0;}
		}
		@media #{$mq-pc_1280}{
			width: 31%; 
			max-width: 31%; 
			flex-basis: 31%; 
			margin-right: 3%;
			&:nth-child(2n){margin-right: 3%;}
			&:nth-child(3n){margin-right: 0;}
		}
		&:last-child{margin-right: 0;}
		.btn--sm{position: absolute; display: block; max-width: 120px; bottom: 1rem; left: 0; right: 0; margin: 0 auto;}
	}
	&.officeList__alt{
		.btn--sm{max-width: 220px;}
		.officeList__item{
			@media #{$mq-tab_720}{
				width: 48%; 
				max-width: 48%; 
				flex-basis: 48%; 
				margin-right: 4%;
				&:nth-child(2n){margin-right: 0;}
			}
			@media #{$mq-pc_1280}{
				width: 24%; 
				max-width: 24%; 
				flex-basis: 24%; 
				margin-right: 1%;
				&:nth-child(2n){margin-right: 1%;}
			}
			@media #{$mq-pc_1280}{margin-bottom: 1%;}
		}
	}
}

.officeList__item__image{@extend %flexBox; @include transition(); width: 100%; position: relative; overflow: hidden;
	img{@include transition(); object-fit: cover;}
	&:before{@include transition();content: ''; display: block; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; background-color: $color-secondary; opacity: 0;}
	&:hover{
		&:before{opacity: 0.3;}
		img{transform: scale(1.1);}
	}
}

.officeList__item__content{display: block; position: relative; padding: 1rem 1.5rem 4rem;}

.officeList__item__title{@include transition();display: block; position: relative; width: 100%; margin-bottom: 1rem; padding-bottom: 1rem; font-size: 1rem; line-height: 1.1; font-weight: 700; text-transform: none; text-align: center; color: $color-baseText;
	@media #{$mq-iPad_land}{font-size: 1.2rem;}
	@media #{$mq-pc_1280}{font-size: 1.5rem;}
	&:hover{color: $color-primary;}
    &:after{content: ''; display: block; position: absolute; width: 40px; height: 3px; bottom:0 ; left: 0; right: 0; margin: 0 auto; border-radius: $radius; background-color: $color-primary;}
}

.officeList__item__info{
	@include transition;
	position: relative;
	display: block;  
	margin-top: 1.5rem;  
	font-size: 0.9rem; 
	line-height: 1.4; 
	font-weight: 500; 
	color: $color-gray; 
	padding-left: 3rem;
	@media #{$mq-pc_1280}{
		margin-top: 1rem;  
		font-size: 1.1rem;
	}
	a{
		color: $color-primary;
	}
	&:before{
		content: ''; 
		@include shadow-depthSocial; 
		@include transition; 
		display: inline-block; 
		vertical-align: middle;
		position: absolute; 
		width: 30px; 
		height: 30px; 
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		margin-right: 0.5rem; 
		background-color: $color-primary; 
		border-radius: $radius-round;
		background-repeat: no-repeat; 
		background-position: center center; 
		background-size: 12px 12px;
	  }
	  &.officeList__item--location{
		&:before{background-image: url("../images/icons/contact-location.svg");}
	  }
	  &.officeList__item--tel{
		&:before{background-image: url("../images/icons/contact-phone.svg");}
	  }
	  &.officeList__item--email{
		&:before{background-image: url("../images/icons/contact-mail.svg");}
	  }
	  &.officeList__item--web{
		&:before{background-image: url("../images/icons/contact-web.svg");}
	  }
	  &.officeList__item--search{
		&:before{background-image: url("../images/icons/contact-search.svg");}
	  }
}

.officeList__item__address{ display: block; margin-top: 1rem; font-size: 0.9rem; line-height: 1.4; font-weight: 500; color: $color-gray; text-align: center;
	@media #{$mq-pc_1280}{font-size: 1.1rem;}
}

.section--static{
	.officeEnd{
		.statText{ margin: 0;
			&:before{display: none;}
		}
	}
}

.officeEnd{@extend %flexBox; justify-content: space-between; align-items: flex-start; margin-top: 1.5rem; background-color: white;
	.statText{ width: 100%;
		&:before{display: none;}
		@media #{$mq-iPad_land}{width: 40%;}
	}
	.officeEnd__image{width: 100%; border: 6px solid white;
		@media #{$mq-iPad_land}{width: 60%;}
	}
}