@charset "UTF-8";

/*--------------------------------------------------------------------------------
 *
 *
 *
 * 博物館登録審査に関するレクチャー動画
 *
 *
 *
--------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------
 *
 * Breadcrumb
 *
--------------------------------------------------------------------------------*/

/* 固定ヘッダー（PC 116px）の裏に入らないよう、#main の上余白（3%）との差だけ下げる
   パンくずはコメントアウト中なので MV を下げる。パンくずを戻すときは #lecture_breadcrumb に付け替える */
#sec_lecture_mv {
	margin-top: calc( 116px - 3% );
}

#lecture_breadcrumb > .inner {
	width: calc( 100% - 80px );
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 0 18px;
}

#lecture_breadcrumb ol {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 14px;
}

#lecture_breadcrumb li {
	color: #33456b;
}

#lecture_breadcrumb li + li::before {
	content: '＞';
	margin: 0 .75em;
	color: #8ba0c9;
	font-size: 12px;
}

#lecture_breadcrumb li a {
	color: #556cc1;
}

#lecture_breadcrumb li a:hover {
	text-decoration: underline;
}

/*--------------------------------------------------------------------------------
 *
 * MV
 *
--------------------------------------------------------------------------------*/

/* 背景色はメインビジュアル画像の地色と同値。変更すると画像の四角が浮くので合わせて調整すること */
#sec_lecture_mv {
	background: #e6f0f9;
	position: relative;
	overflow: hidden;
}

#sec_lecture_mv > .inner {
	width: calc( 100% - 80px );
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 40px;
	padding: 60px 0 0;
}

.lecture_mv_text {
	padding: 0 0 50px;
}

.lecture_mv_hl {
	font-size: 40px;
	line-height: 1.5;
	color: #33456b;
	margin: 0 0 30px;
}

.lecture_mv_sub {
	display: block;
	font-size: 22px;
	line-height: 1.6;
	color: #556cc1;
	letter-spacing: .08em;
	margin: 6px 0 0;
}

.lecture_mv_lead {
	font-size: 15px;
	line-height: 2;
	color: #4d4d4d;
}

.lecture_mv_lead p + p {
	margin-top: .6em;
}

.lecture_mv_img {
	width: 48%;
	max-width: 600px;
	flex-shrink: 0;
	align-self: flex-end;
}

/* タブレット幅は本文の幅が足りずタイトルが3行に割れるため縮小する */
@media (min-width: 769px) and (max-width: 1080px) {

	#sec_lecture_mv > .inner {
		column-gap: 24px;
		padding-top: 40px;
	}

	.lecture_mv_hl {
		font-size: 30px;
		margin: 0 0 20px;
	}

	.lecture_mv_sub {
		font-size: 18px;
	}

	.lecture_mv_lead {
		font-size: 14px;
	}

	.lecture_mv_img {
		width: 44%;
	}

}

.lecture_mv_img img {
	display: block;
	width: 100%;
}

@media (max-width: 768px) {

	/* SP はヘッダー 60px、#main の上余白 6% */
	#sec_lecture_mv {
		margin-top: calc( 60px - 6% );
	}

	#lecture_breadcrumb > .inner {
		width: calc( 100% - 60px );
		padding: 14px 0 12px;
	}

	#lecture_breadcrumb ol {
		font-size: 12px;
	}

	#sec_lecture_mv > .inner {
		width: calc( 100% - 60px );
		display: block;
		padding: 30px 0 0;
	}

	.lecture_mv_text {
		padding: 0;
	}

	.lecture_mv_hl {
		font-size: 24px;
		margin: 0 0 16px;
	}

	.lecture_mv_sub {
		font-size: 15px;
		margin-top: 2px;
	}

	.lecture_mv_lead {
		font-size: 13px;
	}

	.lecture_mv_img {
		width: 82%;
		max-width: 400px;
		margin: 10px auto 0;
	}

}

/*--------------------------------------------------------------------------------
 *
 * 動画ナビ（各動画へのアンカー）
 *
--------------------------------------------------------------------------------*/

html {
	scroll-behavior: smooth;
}

#sec_lecture_nav > .inner {
	width: calc( 100% - 80px );
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 0 0;
}

.lecture_nav_list {
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr; /* 段をまたいで全ボタン同じ高さにする */
	gap: 12px;
}

.lecture_nav_list > li {
	display: flex;
}

.lecture_nav_list a {
	flex: 1;
	display: flex;
	align-items: center;
	column-gap: 10px;
	padding: 12px 30px 12px 14px;
	background: #fff;
	border: 1px solid #b9cde5;
	border-radius: 8px;
	color: #33456b;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	word-break: auto-phrase;
	text-wrap: balance;
	position: relative;
	transition: .25s ease;
}

/* 下向き矢印 */
.lecture_nav_list a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 14px;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 2px solid #556cc1;
	border-bottom: 2px solid #556cc1;
	transform: rotate(45deg);
	transition: .25s ease;
}

.lecture_nav_list a:hover {
	background: #eef4fb;
	border-color: #556cc1;
}

.lecture_nav_list a:hover::after {
	margin-top: -2px;
}

/* 固定ヘッダー（PC: ヘッダー60px＋グロナビ28px）分だけ着地位置を下げる */
.lecture_item {
	scroll-margin-top: 108px;
}

@media (min-width: 769px) and (max-width: 1080px) {

	.lecture_nav_list {
		grid-template-columns: repeat(3, 1fr);
	}

}

@media (max-width: 768px) {

	#sec_lecture_nav > .inner {
		width: calc( 100% - 60px );
		padding: 30px 0 0;
	}

	.lecture_nav_list {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.lecture_nav_list a {
		padding: 11px 24px 11px 12px;
		font-size: 12px;
	}

		.lecture_nav_list a::after {
		right: 10px;
		width: 6px;
		height: 6px;
	}

	.lecture_item {
		scroll-margin-top: 80px;
	}

}

/*--------------------------------------------------------------------------------
 *
 * 動画一覧
 *
--------------------------------------------------------------------------------*/

#sec_lecture_list > .inner {
	width: calc( 100% - 80px );
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 0 90px;
}

/* 動画カード
--------------------------------------------*/

.lecture_list {
	list-style-type: none;
}

.lecture_item {
	position: relative;
	display: flex;
	column-gap: 40px;
	background: #f0f6fc;
	background-image: radial-gradient(#dde9f5 1.5px, transparent 1.6px);
	background-size: 22px 22px;
	border: 1px solid #d8e5f2;
	border-radius: 10px;
	box-shadow: 0 10px 26px rgba(51, 69, 107, .10);
	padding: 40px 45px;
	margin: 0 0 40px;
}

.lecture_item:last-of-type {
	margin-bottom: 0;
}

/* 額縁風のコーナー飾り */
.lecture_item::before,
.lecture_item::after {
	content: '';
	position: absolute;
	width: 26px;
	height: 26px;
	pointer-events: none;
}

.lecture_item::before {
	top: 10px;
	left: 10px;
	border-top: 3px solid #aec6e4;
	border-left: 3px solid #aec6e4;
	border-radius: 6px 0 0 0;
}

.lecture_item::after {
	bottom: 10px;
	right: 10px;
	border-bottom: 3px solid #aec6e4;
	border-right: 3px solid #aec6e4;
	border-radius: 0 0 6px 0;
}

/* サムネイル／YouTube埋め込み
--------------------------------------------*/

.lecture_thumb {
	width: 30%;
	max-width: 340px;
	flex-shrink: 0;
}

.lecture_thumb a {
	display: block;
}

/* 16:9の枠。中身はimg・iframeのどちらでも可 */
.lecture_thumb_frame {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	background: #c3c6ca;
	overflow: hidden;
}

.lecture_thumb_frame img,
.lecture_thumb_frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.lecture_thumb_frame img {
	object-fit: cover;
}

.lecture_thumb_frame {
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(51, 69, 107, .16);
}

.lecture_thumb_frame img {
	transition: transform .5s ease;
}

.lecture_thumb a:hover .lecture_thumb_frame img {
	transform: scale(1.04);
}

/* サムネイルは全面に文字が入っているため、再生ボタンは半透明にして文字を透かす。ホバーで暗幕と一緒に濃くする */
.lecture_thumb_frame::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(26, 35, 60, .38);
	opacity: 0;
	transition: opacity .3s ease;
}

.lecture_play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	background: rgba(26, 26, 26, .45);
	transition: .3s ease;
}

.lecture_play::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -12px 0 0 -8px;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
}

.lecture_thumb a:hover .lecture_thumb_frame::after,
.lecture_thumb a:focus-visible .lecture_thumb_frame::after {
	opacity: 1;
}

.lecture_thumb a:hover .lecture_play,
.lecture_thumb a:focus-visible .lecture_play {
	background: #556cc1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	transform: scale(1.08);
}


/* テキスト
--------------------------------------------*/

.lecture_body {
	flex: 1;
	min-width: 0;
}

.lecture_speaker {
	margin: 0 0 8px;
	line-height: 1.6;
}

/* 博士帽アイコン */
.lecture_speaker_name::before {
	content: '';
	display: inline-block;
	width: 22px;
	height: 22px;
	background: url(../images/lecture/icon_cap.svg) no-repeat center center / contain;
	vertical-align: -4px;
	margin: 0 8px 0 0;
}

.lecture_speaker_label {
	display: block;
	font-size: 12px;
	color: #556cc1;
	letter-spacing: .05em;
	margin: 0 0 2px;
}

.lecture_speaker_name {
	font-size: 18px;
	color: #33456b;
}

.lecture_speaker_role {
	font-size: 13px;
	color: #4d4d4d;
	margin-left: 4px;
}

/* 代理講師。名前のアイコン幅だけ下げて名前と頭を揃える */
.lecture_speaker_proxy {
	display: block;
	font-size: 13px;
	color: #4d4d4d;
	padding-left: 30px;
}

.lecture_series {
	font-size: 13px;
	color: #556cc1;
	letter-spacing: .05em;
	line-height: 1.6;
	margin: 14px 0 2px;
}

.lecture_ttl {
	font-size: 22px;
	line-height: 1.6;
	margin: 0 0 14px;
}

.lecture_ttl a {
	color: #33456b;
}

.lecture_ttl a:hover {
	color: #556cc1;
	text-decoration: underline;
}

/* 動画時間・スライド資料 */

.lecture_meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 14px;
	row-gap: 10px;
	margin: 0 0 18px;
}

.lecture_time {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid #b9cde5;
	border-radius: 16px;
	padding: 3px 16px 3px 12px;
	font-size: 14px;
	color: #33456b;
	line-height: 1.6;
}

/* 時計アイコン */
.lecture_time::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(../images/lecture/icon_clock.svg) no-repeat center center / contain;
	margin: 0 6px 0 0;
	flex-shrink: 0;
}

.lecture_slide a {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid #b9cde5;
	border-radius: 16px;
	padding: 3px 14px 3px 12px;
	font-size: 14px;
	color: #556cc1;
	line-height: 1.6;
}

.lecture_slide a::before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url(../images/lecture/icon_pdf.svg) no-repeat center center / contain;
	margin: 0 6px 0 0;
	flex-shrink: 0;
}

.lecture_slide a::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	background: url(../images/lecture/icon_blank.svg) no-repeat center center / contain;
	margin: 0 0 0 6px;
	flex-shrink: 0;
}

.lecture_slide a:hover {
	background: #eef4fb;
	text-decoration: underline;
}

/* 講義内容 */

.lecture_content_hl {
	font-size: 15px;
	color: #33456b;
	line-height: 1.75;
	margin: 14px 0 6px;
}

.lecture_content_hl:first-child {
	margin-top: 0;
}

.lecture_content_list {
	list-style-type: none;
	font-size: 14px;
	line-height: 1.9;
}

.lecture_content_list > li {
	position: relative;
	padding: 0 0 0 1.2em;
	margin: 0 0 2px;
}

.lecture_content_list > li::before {
	content: '・';
	position: absolute;
	top: 0;
	left: 0;
	color: #556cc1;
	font-weight: 600;
}

/* チャプター。説明が2行になっても時刻の下に回り込まないよう、時刻と説明を横並びにする */
.lecture_chapter > li {
	display: flex;
}

/* タイムスタンプ */
.lecture_ts {
	flex-shrink: 0;
	color: #556cc1;
	font-weight: 600;
	margin: 0 .6em 0 0;
}

/* 番号付きリスト（No.7） */
.lecture_content_list_num {
	counter-reset: lecture_num;
	list-style-type: none;
	font-size: 14px;
	line-height: 1.9;
}

.lecture_content_list_num > li {
	position: relative;
	padding: 0 0 0 1.6em;
	margin: 0 0 2px;
	counter-increment: lecture_num;
}

.lecture_content_list_num > li::before {
	content: counter(lecture_num) '.';
	position: absolute;
	top: 0;
	left: 0;
	color: #556cc1;
	font-weight: 600;
}

@media (max-width: 768px) {

	#sec_lecture_list > .inner {
		width: calc( 100% - 60px );
		padding: 40px 0 55px;
	}

	.lecture_item {
		display: block;
		padding: 24px 20px;
		margin: 0 0 30px;
		background-size: 18px 18px;
	}

	.lecture_item::before,
	.lecture_item::after {
		width: 18px;
		height: 18px;
		border-width: 2px;
	}

	.lecture_thumb {
		width: 100%;
		max-width: 340px;
		margin: 0 auto 20px;
	}

	.lecture_play {
		width: 52px;
		height: 52px;
		margin: -26px 0 0 -26px;
	}

	.lecture_play::before {
		margin: -10px 0 0 -7px;
		border-width: 10px 0 10px 17px;
	}

	.lecture_speaker_name::before {
		width: 18px;
		height: 18px;
		vertical-align: -3px;
		margin-right: 6px;
	}

	.lecture_speaker_name {
		font-size: 15px;
	}

	.lecture_speaker_role {
		font-size: 11px;
	}

	.lecture_speaker_label {
		font-size: 11px;
	}

	.lecture_speaker_proxy {
		font-size: 11px;
		padding-left: 24px;
	}

	.lecture_series {
		font-size: 12px;
		margin-top: 12px;
	}

	.lecture_ttl {
		font-size: 17px;
		margin: 0 0 12px;
	}

	.lecture_meta {
		margin: 0 0 14px;
	}

	.lecture_time,
	.lecture_slide a {
		font-size: 12px;
	}

	.lecture_content_hl {
		font-size: 13px;
	}

	.lecture_content_list,
	.lecture_content_list_num {
		font-size: 12px;
	}

}

/*--------------------------------------------------------------------------------
 *
 * 配布資料・参考文献
 *
--------------------------------------------------------------------------------*/

#sec_lecture_docs {
	background: #eef4fb;
}

/* 上余白は動画一覧セクションの下余白と同値。境目の上下が同じ間隔になるよう揃えること */
#sec_lecture_docs > .inner {
	width: calc( 100% - 80px );
	max-width: 1200px;
	margin: 0 auto;
	padding: 90px 0 70px;
}

.lecture_docs_box {
	position: relative;
	background: #fff;
	border: 1px solid #d8e5f2;
	border-radius: 10px;
	box-shadow: 0 10px 26px rgba(51, 69, 107, .10);
	padding: 32px 45px 36px;
	margin: 0 0 30px;
}

.lecture_docs_box:last-of-type {
	margin-bottom: 0;
}

/* カードと揃えたコーナー飾り */
.lecture_docs_box::before,
.lecture_docs_box::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	pointer-events: none;
}

.lecture_docs_box::before {
	top: 8px;
	left: 8px;
	border-top: 3px solid #aec6e4;
	border-left: 3px solid #aec6e4;
	border-radius: 6px 0 0 0;
}

.lecture_docs_box::after {
	bottom: 8px;
	right: 8px;
	border-bottom: 3px solid #aec6e4;
	border-right: 3px solid #aec6e4;
	border-radius: 0 0 6px 0;
}

.lecture_docs_hl {
	display: flex;
	align-items: center;
	font-size: 20px;
	color: #33456b;
	padding: 0 0 12px;
	border-bottom: 2px solid #556cc1;
	margin: 0 0 22px;
}

.lecture_docs_hl::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0 10px 0 0;
	flex-shrink: 0;
	background: no-repeat center center / contain;
}

.lecture_docs_hl_doc::before {
	background-image: url(../images/lecture/icon_pdf.svg);
}

.lecture_docs_hl_book::before {
	background-image: url(../images/lecture/icon_book.svg);
}

.lecture_docs_list {
	list-style-type: none;
}

.lecture_docs_list > li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	padding: 10px 0 10px 28px;
	border-bottom: 1px dashed #c5d6e8;
	font-size: 15px;
	line-height: 1.75;
}

.lecture_docs_list > li:last-of-type {
	border-bottom: none;
}

/* 四角のマーカー */
.lecture_docs_list > li::before {
	content: '';
	position: absolute;
	top: 18px;
	left: 4px;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: #556cc1;
}

.lecture_docs_name {
	font-weight: 600;
	margin: 0 30px 0 0;
}

.lecture_docs_note {
	font-size: 13px;
	font-weight: 400;
	color: #4d4d4d;
}

/* 書名が語の途中で割れないよう文節で改行する */
.lecture_docs_name,
.lecture_docs_note {
	word-break: auto-phrase;
}

.lecture_docs_nowrap {
	white-space: nowrap;
}

/* 書誌情報は書名の下の行に出す */
.lecture_docs_list > li > .lecture_docs_note {
	flex-basis: 100%;
}

.lecture_docs_link a {
	color: #556cc1;
	text-decoration: underline;
}

.lecture_docs_link a::after {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	background: url(../images/lecture/icon_blank.svg) no-repeat center center / contain;
	margin: 0 0 0 6px;
	vertical-align: -1px;
}

.lecture_docs_link a:hover {
	text-decoration: none;
}

@media (max-width: 768px) {

	#sec_lecture_docs > .inner {
		width: calc( 100% - 60px );
		padding: 55px 0 50px;
	}

	.lecture_docs_box {
		padding: 24px 20px 26px;
		margin: 0 0 24px;
	}

	.lecture_docs_box::before,
	.lecture_docs_box::after {
		width: 16px;
		height: 16px;
		border-width: 2px;
	}

	.lecture_docs_hl {
		font-size: 16px;
		padding-bottom: 10px;
		margin: 0 0 16px;
	}

	.lecture_docs_hl::before {
		width: 20px;
		height: 20px;
		margin-right: 8px;
	}

	.lecture_docs_list > li {
		display: block;
		padding: 8px 0 8px 22px;
		font-size: 13px;
	}

	.lecture_docs_note {
		font-size: 12px;
	}

	.lecture_docs_list > li > .lecture_docs_note {
		display: block;
	}

	.lecture_docs_list > li::before {
		top: 15px;
		left: 2px;
		width: 8px;
		height: 8px;
	}

	.lecture_docs_name {
		display: block;
		margin: 0;
	}

	.lecture_docs_link {
		display: block;
		word-break: break-all;
	}

}

/*--------------------------------------------------------------------------------
 *
 * ページトップボタン（このページのみ青系に上書き。共通は画像の灰色）
 *
--------------------------------------------------------------------------------*/

.body_lecture #page_top a {
	background: #556cc1;
	opacity: 1;
	box-shadow: 0 6px 16px rgba(51, 69, 107, .25);
	transition: background .3s ease;
}

/* 上向きシェブロン */
.body_lecture #page_top a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -4px 0 0 -7px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotate(45deg);
}

.body_lecture #page_top a:hover {
	background: #33456b;
}