/* ==========================================================================
   スタッフ紹介ページ
   - SP ファーストで記述し、840px 以上を PC レイアウトとしています。
   ========================================================================== */

.p-staff {
	--staff-cream: #fdf6ee;        /* メッセージセクションの背景 */
	--staff-label-bg: #fdf3ec;     /* プロフィール項目名の背景 */

	/*
	 * メインビジュアルの高さ。
	 * 内容（プロフィール項目や経歴）の量が増減しても、この高さは変わらない。
	 * 高さを変えたいときはこの 1 行だけを書き換える。
	 */
	--staff-mv-h: 560px;

	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   メインビジュアル
   -------------------------------------------------------------------------- */
.p-staff__mv {
	position: relative;
	display: grid;
	background-color: var(--color-bg);
}

/*
 * 内容と写真を同じマス目に重ね、内容を縦中央に置く。
 * min-height で高さを固定しているので、内容が少なくても多くても
 * 見た目の高さは変わらない（極端に多い場合だけ、切れないように伸びる）。
 */
.p-staff__mv-inner {
	grid-area: 1 / 1;
	z-index: 1;
	display: flex;
	align-items: center;          /* ← 内容を常に縦中央に */
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
	padding: 32px var(--header-pad-sp);
}

.p-staff__mv-body {
	width: 100%;
}

/* --- 肩書き --- */
.p-staff__role {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-primary);
	margin-top: 40px;
}

.p-staff__role-mark {
	flex: 0 0 auto;
	display: inline-flex;
	line-height: 0;
}

.p-staff__role-mark img,
.p-staff__role-mark .img-slot--empty {
	width: 24px;
	height: auto;
}

/* --- 氏名 --- */
.p-staff__name {
	margin: 10px 0 0;
	font-family: var(--font-mincho);
	/* 明朝体は太字にしない */
	font-weight: 400;
	font-size: 38px;
	line-height: 1.2;
	letter-spacing: .08em;
}

.p-staff__name-en {
	margin: 6px 0 0;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .32em;
	color: var(--color-text);
	font-family: var(--font-mincho);
}


/* --- プロフィール（出身地〜好きな言葉） --- */
.p-staff__profile {
	display: grid;
	gap: 8px;
	margin: 60px 0 0;
}
/* SP：出身地・趣味を横並び */
@media (max-width: 839px) {
	.p-staff__profile {
	  grid-template-columns: 1fr 1fr;
	  gap: 8px;
	}
  
	/* 3 つ目以降（好きな言葉・コメントなど）は全幅。項目が 5 つあるページでも最後が半分幅にならないよう n+3 で指定 */
	.p-staff__profile-row:nth-child(n+3) {
	  grid-column: 1 / -1;
	}

	/* 横並びの 2 項目で内容の長さが違っても、項目名の高さと書き出し位置を上で揃える */
	.p-staff__profile-row {
	  align-content: start;
	}
  }

.p-staff__profile-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
}

.p-staff__profile-label {
	margin: 0;
	padding: 4px 10px;
	border-radius: 3px;
	background-color: var(--staff-label-bg);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.p-staff__profile-value {
	margin: 0;
	padding: 2px 10px 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--color-text-body);
}

/* --- 主な経歴・活動 --- */
.p-staff__career {
	display: grid;
	grid-template-columns: 1fr;
	gap: 13px;
	margin-top: 20px;
	padding: 10px 16px 16px;
	border: 1px solid var(--color-primary);
	border-radius: 7px;
}

@media (max-width: 839px) {
	.p-staff__career-label {
		border-bottom: 1px solid var(--color-primary);
		text-align: left;
	}
}


.p-staff__career-label {
	margin: 0;
	padding-bottom: 7px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.p-staff__career-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-body);
}

/* 行頭の中黒 */
.p-staff__career-list li {
	padding-left: 1.1em;
	text-indent: -1.1em;
}

.p-staff__career-list li::before {
	content: "・";
}

/* --- 右側の写真 --- */
.p-staff__mv-photo {
	position: relative;
	grid-area: 1 / 1;
	z-index: 0;
	justify-self: end;
	align-self: stretch;
	width: 36%;
	min-width: 0;
	pointer-events: none;
}

.p-staff__mv-photo-img,
.p-staff__mv-photo-img img,
.p-staff__mv-photo-img .img-slot--empty {
	width: 100%;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   ストーリー（写真＋本文）
   -------------------------------------------------------------------------- */
   .p-staff__story {
	position: relative;
	padding: 48px 0 0;
	background-color: var(--color-bg);
}

.p-staff__story-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 28px;
}

/*
 * 見出し
 * SPでは文字量に左右されず、共通の横長サイズにする。
 */
.p-staff__story .c-heading {
	width: 100%;
	min-height: 100px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * 写真の白枠とドロップシャドウ。
 * 画像は中に入れるだけで、枠と影は CSS で付いている。
 */
.p-staff__story-photo {
	margin: 0;
	padding: 10px;
	border-radius: 12px;
	background-color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .13);
}

@media (max-width: 839px) { 
	.p-staff__story-photo { 
		width: 70vw;
		margin-inline: auto; } 
}

.p-staff__story-photo img,
.p-staff__story-photo .img-slot--empty {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 58 / 65;
	border-radius: 6px;
	object-fit: cover;
}

.p-staff__story-text {
	position: relative;
	z-index: 1;
}

.p-staff__story-text::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: #FFF5EF;
	filter: blur(35px);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.p-staff__story-text p {
	margin: 0 0 1.6em;
	font-size: 14px;
	line-height: 2;
	color: var(--color-text-body);
}

.p-staff__story-text p:last-child {
	margin-bottom: 0;
}

/* ウェーブの分の余白（ウェーブ自体は .c-wave-divider が描く） */
.p-staff__story .c-wave-divider {
	margin-top: 40px;
}

/* --------------------------------------------------------------------------
   メッセージ（中央寄せ）
   -------------------------------------------------------------------------- */
.p-staff__message {
	padding: 8px 0 56px;
	background-color: var(--staff-cream);
}

.p-staff__message-heading {
	line-height: 1.5;
}

.p-staff__message-body {
	margin-top: 28px;
	text-align: center;
}

.p-staff__message-body p {
	margin: 0 0 1.8em;
	font-size: 13px;
	line-height: 2.1;
	color: var(--color-text-body);
}

/* --------------------------------------------------------------------------
   PC（840px 以上）
   -------------------------------------------------------------------------- */
@media (min-width: 840px) {

	/* ...既存のPC設定... */

	/* --- ストーリー --- */
	.p-staff__story {
		padding-top: 88px;
	}

    .p-staff__story-body {
        grid-template-columns: 430px 560px;
        gap: 64px;
        width: fit-content;
        max-width: calc(100% - 80px);
        align-items: center;
        margin: 56px auto 0;
    }

    .p-staff__story-photo {
        width: 450px;
        height: 420px;
        padding: 12px;
        box-sizing: border-box;
    }

	.p-staff__story-photo img,
	.p-staff__story-photo .img-slot--empty {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}

	/*
	 * 本文側の装飾。
	 */
	.p-staff__story-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.p-staff__story-text::before {
		width: 300px;
		height: 300px;
		filter: blur(40px);
	}

	.p-staff__story-text p {
		font-size: 16px;
		line-height: 2.1;
	}

	.p-staff__story .c-wave-divider {
		margin-top: 72px;
	}

	/* --- メッセージ --- */
	/* 以下既存の設定 */
}

/* --------------------------------------------------------------------------
   メッセージ（中央寄せ）
   -------------------------------------------------------------------------- */
.p-staff__message {
	padding: 40px 0 50px;
	background-color: var(--staff-cream);
}

.p-staff__message-heading {
	line-height: 1.5;
}

.p-staff__message-body {
	margin-top: 28px;
	text-align: center;
}

.p-staff__message-body p {
	margin: 0 0 1.8em;
	font-size: 13px;
	line-height: 2.1;
	color: var(--color-text-body);
}

.p-staff__message-body p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   PC（840px 以上）
   -------------------------------------------------------------------------- */
@media (min-width: 840px) {

	.p-staff {
		/*
		 * 内容が最も多いページ（苅谷）でも収まる高さにしている。
		 * これより内容が少なくても高さは変わらず、内容は縦中央に置かれる。
		 */
		--staff-mv-h: 790px;
	}

	/* --- メインビジュアル --- */
	.p-staff__mv {
		min-height: 0;
	}

	.p-staff__mv-inner {
		padding: 40px var(--header-pad-pc);
	}

	/* 内容は左半分に収める（右半分は写真）。写真の領域と重ならない幅にする */
	.p-staff__mv-body {
		width: min(75%, 800px);
	}

	.p-staff__role {
		font-size: 16px;
		gap: 10px;
	}

	.p-staff__role-mark img,
	.p-staff__role-mark .img-slot--empty {
		width: 28px;
	}

	.p-staff__name {
		margin-top: 14px;
		font-size: 67px;
		letter-spacing: .1em;
	}

	.p-staff__name-en {
		margin-top: 8px;
		font-size: 19px;
		letter-spacing: .38em;
	}

	.p-staff__profile {
		gap: 5px;
		margin-top: 25px;
	}

	/* 項目名を左、内容を右に並べる */
	.p-staff__profile-row {
		grid-template-columns: 180px 1fr;
		gap: 20px;
		align-items: stretch;
	}

	.p-staff__profile-label {
		padding: 8px 12px;
		font-size: 16px;
	}

	.p-staff__profile-value {
		padding-top: 6px;
		font-size: 16px;
		line-height: 1.6;
	}

	.p-staff__career {
		grid-template-columns: 180px 1fr;
		gap: 20px;
		align-items: center;
		margin-top: 28px;
		padding: 22px 24px;
	}

	.p-staff__career-label {
		font-size: 16px;
	}

	/* 項目名と内容のあいだの縦線 */
	.p-staff__career-list {
		padding-left: 24px;
		border-left: 1px solid var(--color-primary);
		font-size: 15px;
	}


	/* --- ストーリー --- */
	.p-staff__story {
		padding-top: 150px;
	}

	.p-staff__story-body {
		grid-template-columns: 430px 1fr;
		gap: 160px;
		align-items: center;
		max-width: 1100px;
		margin: 56px auto 0;
		position: relative;
	}
		/* --- ストーリー --- */
		.p-staff__story {
			padding-top: 150px;
		}
	
		.p-staff__story-body {
			position: relative;
			grid-template-columns: 430px 1fr;
			gap: 160px;
			align-items: center;
			max-width: 1100px;
			margin: 56px auto 0;
		}
	
		/* 左側のオレンジの丸 */
		.p-staff__story-body::before {
			content: "";
			position: absolute;
			z-index: 0;
			top: 50%;
			left: -150px;
			width: 500px;
			height: 500px;
			border-radius: 50%;
			background: #FFF5EF;
			filter: blur(40px);
			transform: translateY(-60%);
			pointer-events: none;
		}
	
		.p-staff__story-photo {
			position: relative;
			z-index: 1;
			width: 500px;
			height: 470px;
			padding: 12px;
			box-sizing: border-box;
		}
	
		.p-staff__story-text {
			position: relative;
			z-index: 1;
		}
	
		.p-staff__story-text::before {
			width: 300px;
			height: 300px;
			filter: blur(50px);
		}
	
		.p-staff__story-text p {
			font-size: 16px;
			line-height: 2.1;
		}
	
		.p-staff__story .c-wave-divider {
			margin-top: 72px;
		}
	
	.p-staff__story-photo {
		width: 500px;
		height: 470px;
		padding: 12px;
		box-sizing: border-box;
	}

	.p-staff__story-text p {
		font-size: 16px;
		line-height: 2.1;
	}

	.p-staff__story .c-wave-divider {
		margin-top: 72px;
	}

	/* --- メッセージ --- */
	.p-staff__message {
		padding: 60px 0 80px;
	}

	.p-staff__message-body {
		margin-top: 40px;
	}

	.p-staff__message-body p {
		font-size: 16px;
		line-height: 2;
	}
}