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


/* ----------------------------------------------
   ページタイトル
------------------------------------------------ */
#pageTitle {
	margin: 0;
}
#localNav {
	background: #fff;
	border-bottom: 1px solid var(--jk-neutral-color8);
	text-align: left;
}
#localNav #localNavSelect {
	display: none;
}


/* ----------------------------------------------
   収録コンテンツ一覧
------------------------------------------------ */
#contentsIndex {
	margin: 1rem 0 0;
	padding: 0 0 2rem;
}
#contentsIndex a {
	text-decoration: none;
}
#contentsIndex .fa-up-right-from-square,
#contentsIndex .fa-external-link-alt,
#contentsIndex .fa-file-pdf,
#contentsIndex .fa-download {
	color: var(--jk-text-sub-color);
}
#contentsIndex .pdfLink {
	float: right;
	line-height: 1.3;
}
#contentsIndex .pdfLink p {
	margin: 0;
}
#contentsIndex .courseNav {
	display: flex;
	line-height: 1.3;
	margin: 0 0 1.5rem;
}
#contentsIndex .courseNav h2 {
	font-size: 1em;
	margin: 0;
}
#contentsIndex .courseNav h2:before {
	font: var(--fa-font-solid);
	content: "\f007";
	margin-right: .5rem;
}
#contentsIndex .courseNav h2:after {
	color: var(--jk-text-sub-color);
	content: "：";
	margin: 0 .25rem;
}
#contentsIndex .courseNav ul {
	display: flex;
	margin: 0;
	padding: 0;
}
#contentsIndex .courseNav li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
}
#contentsIndex .courseNav li+li {
	margin-left: .5rem;
	padding-left: .5rem;
	border-left: 1px solid var(--jk-neutral-color8);
}
#contentsIndex .courseNav li button {
	color: var(--jk-text-sub-color);
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}
#contentsIndex .courseNav li button.active {
	font-weight: bold;
	color: var(--jk-text-color);
}
#contentsIndex .listNav {
	display: flex;
	line-height: 1.3;
	margin: 0 0 2rem;
}
#contentsIndex .listNav h2 {
	font-size: 1em;
	margin: 0;
}
#contentsIndex .listNav h2:before {
	font: var(--fa-font-solid);
	content: "\f03a";
	margin-right: .5rem;
}
#contentsIndex .listNav h2:after {
	color: var(--jk-text-sub-color);
	content: "：";
	margin: 0 .25rem;
}
#contentsIndex .listNav ul {
	display: flex;
	margin: 0;
	padding: 0;
}
#contentsIndex .listNav li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
}
#contentsIndex .listNav li+li {
	margin-left: .5rem;
	padding-left: .5rem;
	border-left: 1px solid var(--jk-neutral-color8);
}
#contentsIndex .listNav li button {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}
#contentsIndex .list {
	border-top: 1px solid var(--jk-neutral-color8);
}
#contentsIndex .head button {
	position: relative;
	width: 100%;
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1.5;
	margin: 0;
	padding: .75rem 0 .75rem 1.75rem;
	background: none;
	border: none;
	border-bottom: 1px solid var(--jk-neutral-color8);
	text-align: left;
}
#contentsIndex .head button:before {
	position: absolute;
	top: .85em;
	left: 0;
	font: var(--fa-font-solid);
	color: var(--jk-text-color);
	content: "\f146";
}
#contentsIndex .head button.collapsed:before {
	content: "\f0fe";
}
#contentsIndex .head span.jkb {
	display: inline-block;
	font-size: .875rem;
	font-weight: normal;
	line-height: 1.3;
}
#contentsIndex .body ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin: 0;
	padding: 2rem 0;
}
#contentsIndex .body li {
	font-size: .9375rem;
	line-height: 1.3;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#contentsIndex .body .contentsImg {
	float: left;
	width: 120px;
	min-height: 120px;
	margin-right: 1rem;
}
#contentsIndex .body .contentsImg img.border {
	border: 1px solid var(--jk-neutral-color8);
}
#contentsIndex .body .contentsTitle h2 {
	font-size: 1rem;
	margin: 0 0 .5rem;
}
#contentsIndex .body .contentsTitle h3 {
	font-size: 1em;
	margin: .5rem 0;
}
#contentsIndex .body .contentsBody {
	line-height: 1.8;
	margin-top: .5rem;
	overflow: hidden;
}
#contentsIndex .body .contentsBody p {
	margin: 0 0 .75rem;
}
#contentsIndex .body .contentsBody p.sample {
	position: relative;
	line-height: 1.8;
	padding-left: 1.5em;
}
#contentsIndex .body .contentsBody p.sample::before {
	position: absolute;
	top: .4em;
	left: 0;
	display: inline-block;
	width: 1.5em;
	font: var(--fa-font-solid);
	font-size: .75em;
	line-height: 1.5em;
	color: #fff;
	content: "\f105";
	margin-right: .5rem;
	background: var(--jk-neutral-color2);
	border-radius: 50%;
	text-align: center;
}

#contentsIndex.library .fa-up-right-from-square,
#contentsIndex.library .fa-external-link-alt,
#contentsIndex.library .fa-file-pdf,
#contentsIndex.library .fa-download,
#contentsIndex.library .courseNav h2::before,
#contentsIndex.library .listNav h2::before,
#contentsIndex.library .head button::before {
	color: var(--jk-lib-color2);
}
#contentsIndex.library .body .contentsBody p.sample::before {
	background-color: var(--jk-lib-color2);
}

#contentsIndex.personal .fa-up-right-from-square,
#contentsIndex.personal .fa-external-link-alt,
#contentsIndex.personal .fa-file-pdf,
#contentsIndex.personal .fa-download,
#contentsIndex.personal .courseNav h2::before,
#contentsIndex.personal .listNav h2::before,
#contentsIndex.personal .head button::before {
	color: var(--jk-personal-color2);
}
#contentsIndex.personal .body .contentsBody p.sample::before {
	background-color: var(--jk-personal-color2);
}
/* ライト：plusR対象を薄くするがクリックは可能 */
#contentsIndex.personal.is-light .body ul li.plusR {
	position: relative;
	pointer-events: auto;
}
#contentsIndex.personal.is-light .body ul li.plusR::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18rem;
	line-height: 3rem;
	content: "スタンダードコースでご利用可能です";
	margin: -1.5rem 0 0 -9rem;
	background: rgba(255,255,255,.9);
	text-align: center;
	pointer-events: none;
border: solid 2px var(--jk-personal-color4);
border-radius: 4px;
}

/* 画像・説明文・出版社名を薄くする */
#contentsIndex.personal.is-light .body ul li.plusR .contentsImg,
#contentsIndex.personal.is-light .body ul li.plusR .contentsBody,
#contentsIndex.personal.is-light .body ul li.plusR .contentsTitle h3 {
	opacity: .25;
}

/* コンテンツタイトルだけ通常表示 */
#contentsIndex.personal.is-light .body ul li.plusR .contentsTitle h2 {
	opacity: 1;
}
/*#contentsIndex.personal .body ul li .mark {
	display: none;
}*/
#contentsIndex.personal .list.plusR .body ul li.plusR {
	pointer-events: inherit;
}
/* スタンダード：通常表示 */
#contentsIndex.personal .list.plusR .body ul li.plusR::after {
	display: none;
}
#contentsIndex.personal .list.plusR .body ul li.plusR > div {
	opacity: 1;
}


/* ----------------------------------------------
   Media Queries
------------------------------------------------ */
@media (any-hover: hover) {
	
	#localNav li a:not(.active):hover::after {
		background: var(--jk-neutral-color8);
	}
	#contentsIndex a:hover {
		text-decoration: underline;
	}
	
}

@media print, screen and (min-width: 1200px) {
	
	/* ページタイトル */
	#localNav ul {
		display: flex;
		margin: 0;
		padding: 0;
	}
	#localNav li {
		position: relative;
		flex: 1;
		display: flex;
		line-height: 1.3;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	#localNav li+li::before {
		position: absolute;
		top: 1.5rem;
		left: -1px;
		width: 2px;
		height: calc(100% - 3rem);
		content: "";
		background: var(--jk-neutral-color8);
	}
	#localNav li a {
		position: relative;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: var(--jk-text-color);
		padding: 1.5rem 1rem;
		text-decoration: none;
	}
	#localNav li a::after {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 4px;
		content: "";
		transition: .15s;
	}
	#localNav li a.active::after {
		background: var(--jk-neutral-color2);
	}
	#localNav li.library a.active::after {
		background: var(--jk-lib-color2);
	}
	#localNav li.personal a.active::after {
		background: var(--jk-personal-color2);
	}
	#localNav li a span {
		display: block;
	}
	
}

@media only screen and (max-width: 1199px) {
	
	/* ページタイトル */
	#localNav {
		position: relative;
	}
	#localNav #localNavSelect {
		position: relative;
		display: block;
		width: 100%;
		height: 3rem;
		font-weight: bold;
		color: var(--jk-text-sub-color);
		line-height: 1;
		padding: 0 2rem 0 1rem;
		background: #fff;
		border: none;
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		cursor: pointer;
	}
	#localNav #localNavSelect:after {
		position: absolute;
		right: .75rem;
		font: var(--fa-font-solid);
		font-weight: 900;
		color: var(--jk-neutral-color2);
		content: "\f067";
		-webkit-text-stroke: 1px var(--jk-neutral-color2);
		text-stroke: 1px var(--jk-neutral-color2);
	}
	#localNav #localNavSelect.open:after {
		content: "\f068";
	}
	#localNav ul {
		display: none;
		width: 100%;
		margin: 0;
		padding: 0 0 1rem;
		background: #fff;
	}
	#localNav ul li {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	#localNav ul li a {
		position: relative;
		display: block;
		line-height: 1.5;
		color: var(--jk-text-color);
		padding: .5rem 1rem .5rem 2.25rem;
		text-decoration: none;
	}
	#localNav ul li a::before {
		position: absolute;
		top: .7rem;
		left: 1rem;
		display: inline-block;
		font: var(--fa-font-solid);
		color: var(--jk-neutral-color2);
		content: "\f105";
	}
	#localNav ul li a.active {
		display: none;
	}
	
	/* 収録コンテンツ一覧 */
	#pageTitle h1 {
		text-align: center;
	}
	#contentsIndex .pdfLink {
		float: none;
		font-size: .875rem;
		margin: 1rem;
		text-align: right;
	}
	#contentsIndex {
		margin: 1rem 0 0;
	}
	#contentsIndex .courseNav {
		font-size: .875rem;
		margin: 1rem;
	}
	#contentsIndex .listNav {
		font-size: .875rem;
		margin: 1rem;
	}
	#contentsIndex .list {
		margin: 1rem;
	}
	#contentsIndex .head button {
		font-size: 1.125rem;
		padding: .5rem 0 .5rem 1.5rem;
	}
	#contentsIndex .head button:before {
		top: .65em;
	}
	#contentsIndex .body ul {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1.5rem 0;
	}
	#contentsIndex .body li {
		font-size: .875rem;
	}
	#contentsIndex .body .contentsImg {
		width: 60px;
		min-height: 120px;
	}
	
}