@charset "utf-8";
/* CSS Document */

/*主卡片*/
.hitocato {
	display: flex;
	max-width: 500px;
	width: 100%;
	position: relative;
	/* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); */
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-image: url('/web/image/9357-4645f66e/%E8%91%A3%E4%BA%8B%E9%80%B2%E4%BF%AE%E8%AA%B2%E7%A8%8B%E8%AC%9B%E5%B8%AB.jpg');
	background-size: cover;
	margin:0.5rem;
}

/*卡片文字區*/
.cato-hitari {
	flex: 3; /* 佔據 3/5 的寬度 */
	position: relative;
}

/*文字範圍*/
.hito-shiryo {
	position: absolute;
	left: 9%;
	top: 16.5%;
	width: 120%;
	color: white;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/*姓名*/
.hito-shiryo h1 {
	color: #FFFFFF;
	font-size: clamp(27px, 8.8vw, 44px);
	margin-top: 0;
	margin-bottom: clamp(0px, 0.5vw, 5px);
	line-height: 1.2;
}

/*經歷*/
.hito-shiryo p {
	font-size: clamp(10px, 3.2vw, 16px);
	margin-top: clamp(7px, 2.5vw, 12px); 
	margin-left: clamp(6px, 2vw, 10px);
	margin-bottom: -6px; 
	line-height: 1.5;
}


/*卡片人物圖片區*/
.cato-migi {
	flex: 2; /* 佔據 2/5 的寬度 */
	position: relative; /* 這是關鍵！讓子元素可以相對於此容器絕對定位 */
	overflow: hidden; /* 這是關鍵！隱藏所有超出此容器範圍的內容 */				
}

/*人物圖片設定*/
.hito-syashin {
	position: absolute;
	top: 30%;
	right: 0%;
	height: 70%;
	width: auto;
}	

.hitocato-area{
justify-content: center;
--gutter-x:0px;
}