@charset "utf-8";

/*
 * 共通部品「監修・運営」（template-parts/credit.php）専用。
 *
 * 公開ページ（トップ・LCTとは・検定の流れ・よくある質問・受講する）と
 * 受講者エリア（講義詳細・マイページ）で使う。
 * about.css の .about-*・subpage.css の .sub-* どちらの変数も参照できないので、
 * 罫線と本文幅はこの部品の中で持つ。値はどちらとも同じものを使っている。
 * 地色だけは base.css の :root（--lct-color-sink）から取る。
 * フッター上辺の帯と同じ色でないと、この部品で終わるページに継ぎ目が出るため。
 */

/*
 * #blog_wrapper を使うページ（受講する など）は本文の下に余白を持つ。
 * この部品でページが終わる場合は、その余白ぶんを戻してフッターに接地させる。
 * 値は base.css の --lct-content-bottom と対になっている。
 */
#blog_wrapper > .lct-credit:last-child {
	margin-bottom: calc(-1 * var(--lct-content-bottom, 0px));
}

.lct-credit {
	/* about.css / subpage.css と同じ値。 */
	--credit-gray: var(--lct-color-sink); /* 淡いグレー。フッターの境目と同じ値 */
	--credit-line: #dcdcdc; /* 罫線 */

	/* 補足情報なので、本文のセクションより上下は狭く取る。 */
	padding-block: clamp(46px, 4.4vw, 62px);
	background: var(--credit-gray);
}

/* 本文と同じ幅（base.css の --lct-wrapper）。 */
.lct-credit__inner {
	width: 100%;
	max-width: var(--lct-wrapper);
	margin-inline: auto;
	padding-inline: 40px;
}

.lct-credit__list {
	display: grid;
	grid-template-columns: 10em 1fr;
	margin: 0;
	padding: clamp(30px, 3.2vw, 46px);
	background: #fff;
	border-radius: 16px;
}

.lct-credit__list > dt,
.lct-credit__list > dd {
	margin: 0;
	padding: 0;
}

/*
 * 区切り線は「監修」と「運営会社」の間だけ。ボックスの上下端には引かない。
 * 2 組目以降の行頭（dt・dd の両方）に引くことで、2 列にまたがる 1 本に見せている。
 */
.lct-credit__list > dt:not(:first-of-type),
.lct-credit__list > dd:not(:first-of-type) {
	margin-top: clamp(28px, 2.8vw, 38px);
	padding-top: clamp(28px, 2.8vw, 38px);
	border-top: 1px solid var(--credit-line);
}

.lct-credit__list > dt {
	color: black;
}

/* 監修者の写真＋名前・肩書き。文字の塊は写真の高さに対して上下中央に置く。 */
.lct-credit__person {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	align-items: center;
	gap: 40px;
}

/*
 * 写真の横の名前・肩書き。写真の高さに釣り合うよう、名前を一段大きく、
 * 肩書きの行間を少し詰める。スマホは下のメディアクエリで別に組むので PC だけ。
 */
@media (min-width: 768px) {
	.lct-credit__person .lct-credit__name {
		margin-bottom: 14px;
		font-size: clamp(19px, 1.6vw, 22px);
		letter-spacing: 0.04em;
	}

	.lct-credit__person .lct-credit__detail {
		line-height: 1.9;
	}
}

/*
 * images/nakayama.jpg が無いときは template-parts/credit.php が
 * img ごと出さないので、写真の列も畳む。
 * ★グレーのダミー枠を復活させないこと。公開面が作りかけに見える。
 */
.lct-credit__person--nophoto {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

/* 比率は支給写真（400×461）に合わせてある。差し替えで比率が変わったら直すこと。 */
.lct-credit__photo {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 400 / 461;
	object-fit: cover;
}

/* 略歴。写真の下に全幅で置く。文字はコメント（__message）とそろえる。 */
.lct-credit__bio {
	margin: clamp(22px, 2.2vw, 30px) 0 0;
	font-size: clamp(13px, 1.1vw, 15px);
	line-height: 2;
}

.lct-credit__name {
	margin: 0 0 10px;
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 700;
}

.lct-credit__detail {
	margin: 0;
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 2;
}

/*
 * 監修者・運営会社それぞれからのコメント。
 * 名義や連絡先（上の .lct-credit__name / __detail）とは性質が違う読み物なので、
 * 細い罫線で一段落として、本文よりわずかに小さく置く。
 */
.lct-credit__message {
	margin: clamp(20px, 2vw, 26px) 0 0;
	padding-top: clamp(20px, 2vw, 26px);
	border-top: 1px solid var(--credit-line);
	font-size: clamp(13px, 1.1vw, 15px);
	line-height: 2;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1200px) {
	.lct-credit__inner {
		padding-inline: 24px;
	}
}

@media (max-width: 900px) {
	/* メールリンクは行内だが実質単独行なので、タップできる高さを確保する。 */
	.lct-credit__detail a {
		display: inline-block;
		padding-block: 12px;
	}
}

/*
 * スマホ。
 *
 * ★ここは補足情報なので、狭い画面では本文より先に詰めること。
 * 2 列が 1 列に落ちるぶん縦に伸びるうえ、ページの最後尾にあるので、
 * PC と同じ余白のままだとフッターまでが遠くなりすぎる。
 * 余白・文字サイズ・写真の幅をまとめて一段落とし、
 * 「読ませる本文」ではなく「確認できる注記」の見え方に寄せる。
 */
@media (max-width: 767px) {
	.lct-credit {
		padding-block: 32px;
	}

	.lct-credit__inner {
		padding-inline: 16px;
	}

	.lct-credit__list {
		grid-template-columns: 1fr;
		padding: 20px;
		border-radius: 12px;
	}

	/* 1 列では「監修」「運営会社」は見出しではなく小さなラベルとして置く。 */
	.lct-credit__list > dt {
		font-size: 14px;
		font-weight: 700;
		line-height: 1.5;
	}

	/* 1 列では dt の真下に dd が来る。組の中で切れて見えないよう、線は dt 側だけに残す。 */
	.lct-credit__list > dd {
		margin-top: 10px;
	}

	.lct-credit__list > dt:not(:first-of-type) {
		margin-top: 18px;
		padding-top: 18px;
	}

	.lct-credit__list > dd:not(:first-of-type) {
		margin-top: 10px;
		padding-top: 0;
		border-top: none;
	}

	.lct-credit__person {
		grid-template-columns: 92px minmax(0, 1fr);
		gap: 14px;
	}

	.lct-credit__person--nophoto {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.lct-credit__message {
		margin-top: 14px;
		padding-top: 14px;
		font-size: 12px;
		line-height: 1.9;
	}

	.lct-credit__name {
		margin-bottom: 6px;
		font-size: 16px;
	}

	.lct-credit__detail {
		font-size: 13px;
		line-height: 1.75;
	}

	.lct-credit__bio {
		margin-top: 14px;
		font-size: 12px;
		line-height: 1.9;
	}
}