@charset "utf-8";

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

Name: specialists.css

Description: specialists

Create: 2026.10.02
Update: 

Copyright 2026 Hitachi, Ltd.


***************************************************** */
#ProfileDetail {
	height: 512px;
	background-image: url("/products/it/CloudDX/modernization/specialists/image/profile_bg.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin-bottom: 48px;
	margin-inline: -15px;

	.ProfileWrap{
		display: flex;
		flex-wrap: wrap;
		align-content: center;
	}

	.ProfileImage{
		width: 50%;
	}

	.ProfileImage img{
		max-width: 100%;
	}

	.ProgileTextWrap{
		width: calc(50% - 25px);
		display: flex;
		align-items: center;

		.Position{
			margin-bottom: 4px;
		}

		.Name{
			margin-bottom: 1px;
		}

		.Ruby{
			margin-bottom: 24px;
		}

		.ProfileText{
			text-align: justify;
		}
	}
}
@media screen and (max-width: 1304px) {
	#ProfileDetail {
		height: auto;
	}
}
@media screen and (max-width: 994px) {
	#ProfileDetail {
		.ProfileWrap{
			justify-content: center;
		}
		.ProfileImage{
			width: auto;
		}

		.ProgileTextWrap{
			width: calc(100% - 30px);
			padding-top: 15px;
			padding-bottom: 30px;
		}
	}
}
@media screen and (max-width: 767px) {
	#Carousel .Grid4{
		margin-inline: 15px;
		width: calc(100% - 30px);
	}
}
@media screen and (max-width: 579px) {

}
@media screen and (max-width: 399px) {

}

/* ---- Carousel ---- */
#Carousel{
	h2{
		border-bottom: 1px solid var(--color-gray2);
		margin-bottom: 32px;
	}

	.wrap{
		max-width:1320px;
		margin:0 auto;
	}

	.carousel{
		margin-inline: -12px;
	}

	.SlideItem{
		padding:0 12px;
	}

	.Card{
			background:var(--color-gray1);
			display:flex;
			flex-direction:column;
			height:100%;
			border:1px solid var(--color-gray1);
			border-radius: 8px;
			position: relative;

			a{
				color: var(--color-black);
				text-decoration: none;
			}

			a:hover .AemTextTitle{
				color: var(--color-red2);
			}
	}
	.Card::after{
		content: '';
		display: inline-block;
		position: absolute;
		width: 24px;
		height: 24px;
		background-image: url("/products/it/CloudDX/modernization/specialists/image/btn_bk.svg");
		background-size: contain;
		vertical-align: middle;
		bottom: 15px;
		right: 15px;
	}

	.Card:hover::after{
		background-image: url("/products/it/CloudDX/modernization/specialists/image/btn_red.svg");
	}
	
	.CardMedia img {
		display: block;
		width: 100%;
		transition: transform 0.5s ease;
	}

	.CardMedia{
			position:relative;
			width:100%;
			aspect-ratio: 4 / 3;
			overflow:hidden;
	}

	.CardMedia img,
	.CardMedia .fallback-fill{
			width:100%;
			height:100%;
			object-fit:cover;
			display:block;
			border-radius: 8px 8px 0 0;
			transition: transform 0.3s ease;
	}
	a:hover .CardMedia img {
		transform: scale(1.05);
	}

	/* ---- Card body ---- */
	.CardBody{
			flex:1;
			display:flex;
			flex-direction:column;
			padding:20px 20px 50px;
			height: 100%;
	}
}

/* ---- Slick overrides ---- */
.slick-list{ margin:0 -12px; }
.slick-slide{ height:auto; }
.slick-slide > div{ height:100%; }
.slick-track{ display:flex !important; }
.slick-track .slick-slide{ display:flex !important; height:auto; }
.slick-prev, .slick-next{ display:none !important; } /* using custom nav below */

/* ---- Custom pager ---- */
.pager{
		display:flex;
		align-items:center;
		justify-content:center;
		gap:18px;
		margin-top:28px;
}

.pager-btn{
		width:34px;
		height:34px;
		border:none;
		border-radius:8px;
		background-color:var(--color-gray1);
		cursor:pointer;
		transition:.3s;
}

/* 前へ */
.pager-prev{
		background-image:url("/products/it/CloudDX/modernization/specialists/image/btn_page_prev.svg");
		background-repeat:no-repeat;
		background-position:center;
		background-size:32px;
}

.pager-prev:hover{
		background-image:url("/products/it/CloudDX/modernization/specialists/image/btn_page_prev_hover.svg");
}

.pager-prev:disabled{
		background-image:url("/products/it/CloudDX/modernization/specialists/image/btn_page_prev.svg");
		opacity:.4;
		cursor:default;
}

/* 次へ */
.pager-next{
		background-image:url("/products/it/CloudDX/modernization/specialists/image/btn_page_next.svg");
		background-repeat:no-repeat;
		background-position:center;
		background-size:32px;
}

.pager-next:hover{
		background-image:url("/products/it/CloudDX/modernization/specialists/image/btn_page_next_hover.svg");
}

.pager-next:disabled{
		background-image:url("/products/it/CloudDX/modernization/specialists/image/btn_page_next.svg");
		opacity:.4;
		cursor:default;
}

.pager-count{
		font-size:13px;
		letter-spacing:.04em;
		color:var(--color-black);
		min-width:34px;
		text-align:center;
}