/* ==========================================================
	single.css
	投稿詳細ページ（single-post.php）用スタイル.
	========================================================== */

body {
	background: var(--bg);
}

.pd-page-hero-header { 
	background: linear-gradient(rgba(0,40,90,0.65), rgba(0,25,60,0.85)), url('../../images/main/page_main.jpg') center/cover; 
	color: var(--wh);
	padding: 60px 0;
	text-align: left;
}
.pd-page-hero-header h1 {
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	font-family: "Shippori Mincho", serif;
}
.pd-cpt-hero-eyebrow {
	font-family: "Jost", sans-serif;
}

.pd-breadcrumb-bar {
	background: var(--wh);
	padding: 15px 0;
	font-size: 0.85rem;
	color: var(--tm);
}
.pd-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	gap: 8px;
}
.pd-breadcrumb-list a {
	text-decoration: none;
	color: var(--p);
	font-weight: 600;
}
.pd-breadcrumb-list a:hover {
	text-decoration: underline;
}
.pd-breadcrumb-list li:not(:last-child)::after {
	content: '>';
	margin-left: 8px;
	color: #cbd5e1;
}
.pd-breadcrumb-list li:last-child {
	color: var(--td);
	font-weight: 500;
}
.pd-client-detail {
	padding: 50px 0 100px;
}
.pd-client-detail-card {
	/*background: var(--wh);
	border: 1px solid #edf2f6;
	box-shadow: 0 4px 25px rgba(0,0,0,0.03);
	padding: 45px;*/
}

/* ★【大修正】PC時はメイン画像（左）とサムネイル（右）を横並びの2列にする特製コンテナ */
.pd-gallery-layout { 
	display: flex; 
	gap: 40px; 
	align-items: flex-start; 
	margin-bottom: 50px; 
	width: 100%;
}

/* 左側：メイン画像エリア（横長感を解消し、1画面に収まる縦横比に最適化） */
.pd-gallery-main { 
	position: relative; 
	flex: 2.5; /* 左側を広く取る */
	width: 100%; 
}
.pd-gallery-main-photo { 
	width: 100%; 
	height: 430px; /* 高さを430pxに抑えて1画面に完全収容 */
	overflow: hidden; 
	border-radius: 4px; 
	box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
	background-color: #1a1a1a; 
}
.pd-gallery-main-photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* メイン画像の左右の矢印 */
.pd-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.7);
	color: var(--pd);
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
	z-index: 10;
}
.pd-gallery-arrow:hover {
	background: var(--wh);
	color: var(--pd); 
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.pd-gallery-arrow.prev { left: 15px; }
.pd-gallery-arrow.next { right: 15px; }

/* サムネイルエリア：3列配置にし、高さ430pxを超えたら自動で縦スクロールする設定 */
.pd-gallery-grid { 
	flex: 1.2; /* 右側の幅を3列が綺麗に収まるサイズに微調整 */
	display: grid; 
	grid-template-columns: repeat(3, 1fr); /* ★【修正】2列から「3列（3カラム）」に変更 */
	gap: 12px; 
	width: 100%; 
	max-height: 430px; /* ★【重要】メイン画像（430px）の高さと完全に同期させます */
	overflow-y: auto; /* ★【重要】9個（3行）を超えて10個目以降が入ると、自動で縦スクロールバーが出現 */
	padding-right: 8px; /* スクロールバーと画像の間のすき間 */
	
	/* 縦スクロールバーの見た目をスマートに整える装飾 */
	scrollbar-width: thin;
	scrollbar-color: var(--p) #f1f5f9;
}
/* スクロールバーの細部調整（Chrome / Safari用） */
.pd-gallery-grid::-webkit-scrollbar {
	width: 5px;
}
.pd-gallery-grid::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 3px;
}
.pd-gallery-grid::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 3px;
}

/* ★【修正】3列×3行でメイン高430pxにぴったり美しく収まる正方形サイズに最適化 */
.pd-gallery-item { 
	width: 100%; 
	aspect-ratio: 1 / 1; 
	height: auto; 
	overflow: hidden; 
	border: 1px solid #edf2f6; 
	border-radius: 4px; 
	cursor: pointer; 
	transition: all 0.3s ease;
}
.pd-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pd-gallery-item:hover {
	opacity: 0.8;
	border-color: var(--p);
}
.pd-gallery-item.is-active {
	border: 3px solid var(--p);
	box-shadow: 0 4px 12px rgba(0,91,172,0.25);
}

/* タイトル・文章エリア */
.pd-client-info {
	/*max-width: 950px;
	margin: 0 auto; */
	text-align: center;
}
.pd-client-name {
	font-size: 2rem;
	font-weight: 800;
	color: var(--pd);
	margin-bottom: 35px;
	letter-spacing: 0.03em;
	display: inline-block;
	position: relative;
	padding-bottom: 15px;
}
.pd-client-name::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 25%;
	width: 50%;
	height: 3px;
	background: var(--pd);
}
.pd-client-description {
	font-size: 1rem;
	color: #333;
	line-height: 1.9;
	text-align: left;
	letter-spacing: 0.02em;
	margin-bottom: 60px;
}

/* 一覧を見るボタン */
.pd-back-nav-wrapper {
	text-align: center;
	border-top: 1px solid #f0f4f8;
	padding-top: 50px;
}
.pd-back-button { 
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #333333;
	background: transparent;
	color: #333333;
	padding: 15px 65px;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	border-radius: 30px; 
	transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	will-change: transform, background-color, box-shadow;
	transform: translateZ(0);
}
.pd-back-button:hover {
	background-color: #333333;
	color: var(--wh);
	transform: translateY(-3px) translateZ(0);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	text-decoration: none;
}

@media (max-width: 992px) {
	.pd-gallery-layout {
		flex-direction: column;
		gap: 20px;
	}
	.pd-gallery-main-photo {
		height: 340px;
	}
	.pd-gallery-grid { 
		display: flex; 
		max-height: none;
		overflow-y: visible;
		overflow-x: auto; 
		padding-bottom: 10px; 
	}
	.pd-gallery-item {
		width: 90px;
		height: 90px;
		flex-shrink: 0;
	}
}
@media (max-width: 576px) {
	.pd-gallery-main-photo {
		height: 230px;
	}
	.pd-gallery-item {
		width: 80px;
		height: 80px;
	}
}