@charset "UTF-8";
/*** 基本規則 */
body {
	line-height: 1.3;
	/*font-size:80%,padding:0.1em上下; line-height: 1.3→1.248 +( span上下border + ndcex上下padding = 5px)*/
	/*header:1em, h1:2rem * line-height + padding(5*2+20+10) */
	--head-h: calc(3em * 1.3 + 40px);
	--bks-bd: 12px;	/*bookshelf border width */
	--bg-bl: hsl(var(--cb-hue) var(--cb-sat) calc(var(--cb-lgh) * var(--cb-dr)) / 0.35);
	--main-w: 2200px;
	--rspace: 0;
	--idx-fs: 80%;
	--idx-h: 2.5em;/*;40px*/
	height: 100vh;
}
div.main {
	/*height: calc(100vh - var(--head-h) - var(--idx-h) - var(--foot-h) - 16px);*/ /*scrollbar ?*/
	/*overflow-y: auto;*/
	box-sizing: border-box;	/*これがないとcalc(100vh - 138)が必要*/
	/*margin-bottom: var(--idx-h);*/
}
/*header, footer*/
body > * {
	flex-shrink: 0;
}
/* footerは固定しない。最後もndcexの上に表示させるにはbookshelf.js参照 */
.ndcex {
	position: sticky;
	margin: 0;
	width: 100%;
}
/* .ndcexのheight, bottomは凡例セクション参照 */
footer {
	/*bottom: 0; footerは固定しないことに変更*/
	margin-top: auto;
}


/*** 書斎 */
/** shelf list table */
div.shelflist {
	width: 36em;
	float: left;
	margin-bottom: 1em;
}
/*
.shelflist table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
	border: solid 1px #333;
}
.shelflist td, .shelflist th {
	border: solid 1px #333;
}
.shelflist th {
	background: #eee;
}
*/
td.s_top {
	border-bottom: none;
}
td.s_rest {
	border: none;
	visibility: hidden;
}


/*** 書棚 */
/** bookshelf */
h1 small {
	max-width: none;
	margin-left: 10px;
}
.bookshelf {
	min-height: 20em;
	min-width: 40em;
	border: var(--bks-bd) solid #7b560e;
	border-image: url(wood-dark.jpg) 12 / var(--bks-bd) repeat;
	/*box-shadow:  inset var(--bks-bd) 14px 22px rgb(87 87 87 / 60%);*//*2px 2px 5px rgb(87 87 87 / 60%),*/
	margin-bottom: -12px; /*- var(--bks-bd);*/
	font-size: 80%;
	position: relative;
	padding: 0.5em 0 1px;
	background-image: url(wood-vdark);/*url(woody.jpg);*/
	background-color: #533734;
	white-space: nowrap;
	overflow-x: hidden; /*scroll*/
}
.bookshelf .shelfslide {
	overflow-x: auto; /*scroll*/
	overflow-y: hidden;	/*.aboveでスクロールバーが生じる？*/
	position: relative;
	z-index: 10;
	/*padding-top: 2em;*/
	padding: 2em 0 0;
	margin: 0;
	display: flex;
	align-items: end;
}
.bsfloor {
	position: absolute;
	width: 100%;
	height: 3em;
	bottom: 0;
	opacity: 0.5;
	background: linear-gradient(3deg, transparent, #ddd calc(100% - 6em), var(--bg-dark));
}
.showB .bsfloor {
	opacity: 0.3;
}
/** 前後列を示すスタイル*/
.fbB > .shelfslide,
.fbA > .shelfslide {
	filter: grayscale(0);
	opacity: 1;
	transition: filter 0.6s, opacity 0.6s;
}
.showA.fbB > .shelfslide,
.showB .fbA > .shelfslide {
	/*z-index: 6;*/
	width: 100%;
	filter: grayscale(100%);
	pointer-events: none;
	padding-top:0;
}
.showA.fbB > .shelfslide {
	opacity: 0.25;	/*0.2;*/
}
.showB .fbA > .shelfslide {
	opacity: 0.4;
}
.bookshelf.showB .fbA {
	/*top: calc(100% - 3em);*/
	width: 100%;
	/*background: var(--bg-bl);linear-gradient(3deg, transparent, #ddd calc(100% - 6em), var(--bg-dark));*/
}
.bookshelf .fbA {
	position: absolute;
	width: 100%;
	bottom: 0;
	/*top: 5em;*/
	background: transparent;
	transition: bottom 0.6s ease, background 1s;
}

.bookshelf.fbB {
	overflow-y: hidden;
}
.bookshelf.fbB > .shelfslide {
	position: absolute;
	width: 100%;
	bottom: 3em;
}

.bookshelf.narrow {
	width: 60em;
}
.bookshelf.cardboard {
	border: 6px #bba696 solid;
	background: silver;
	background-image: url(cardbord.jpg);
	border-image: url(cardbord2.jpg) 6 / 6px repeat;;
	box-shadow: none;
	/*
	border-color: #d7b093;
	background-color: #eee;
	border-image: url(cardbord2.jpg) 12 / 12px repeat;;
	box-shadow: 2px 2px 5px rgb(87 87 87 / 60%), inset 6px 7px 16px rgb(87 87 87 / 40%);
	*/
	margin-top: 2em;
}
/*.bookshelf > span, .bookshelf > h2 
span.label, h2.label*/
.bookshelf > .label {
	font-size: 90%;
	margin: 0;
	font-weight: normal;
	position: absolute;
	padding: 1px 3px;
	top: 1px;
	left: 0;	/*2px;*/
	color: white;
	z-index: 20;
}
.target .label {
	background: #dd5d5d;
}
.target .label.hilite {
	background: #f88;
}
.ordered .label {
	border: 1px solid #ddc;
}
/** shelf image */
/*＠＠transitional*/
span.label[data-img], h2.label[data-img] 
.bookshelf > .label[data-img] {
	cursor: pointer;
}
figure.shelfimg {
	position: absolute;
	z-index: 1000;
	display: none;
	margin: 0;
	cursor: grab;
}
figure.shelfimg img {
	width: 1000px;
	max-width: 100%;
	box-shadow: 4px 6px 12px rgb(0 0 0 / 90%);
}
/*closer*/
figure.shelfimg span {
	position:absolute;
	top: 2px;
	left: 2px;
	line-height: 1;
	z-index: 10;
	color: white;
	cursor:pointer;
}
div.main {
	position: relative;
}
/** AB toggler */
.toggler {
	position: absolute;
	left: 46px;	/*4em on 90%*/
	top: 2px;
	z-index: 50;
	font-size: 95%;
}
.toggler span {
	margin: 0 1px;
	padding: 1px 6px 1px 0;
	letter-spacing: 2px;
	color: blue; /*black;*/
	text-shadow: 1px 1px 2px #f9f9f9;
	background: hsl(0deg 0% 90% / 0.5);
	background-image: url(woody.jpg);
	border: hsl(0deg 0% 82%) outset 1px;
	cursor: pointer;
	font-size: 95%;
}
.toggler span:after {
	content: "に切替";
	font-size: 90%;
	letter-spacing: 0;
}
.toggler span:before {
	content: "▶";
	font-size: 80%;
	letter-spacing: 0;
	padding-right: 2px;
	color: hsl(0deg 0% 90% / 0.1);
	text-shadow: none;
}
span[data-fb=A] span[data-fb=A],
span[data-fb=B] span[data-fb=B] {
	background: hsl(0deg 0% 100% / 0.67);
	/*background-image: url(woody.jpg);*/
	color: black;
	cursor: default;
	border: hsl(0deg 0% 51%) inset 1px; /*rgb(230 230 230 / 0.8) solid 1px;*/
	/*border: rgb(200 200 200 / 0.5) inset 1px;*/
}
span[data-fb=A] span[data-fb=A]:after,
span[data-fb=B] span[data-fb=B]:after {
	content: "表示中";
}

span[data-fb=A] span[data-fb=A]:before,
span[data-fb=B] span[data-fb=B]:before {
	content: "▶";
	color: #a44;
}

/*
div > ::-webkit-scrollbar {
	height: 12px;
	background: rgba(200, 155, 63, 0.5);
}
div > ::-webkit-scrollbar-thumb {
    background: rgba(145, 116, 99, 0.3);
}
*/

img.showpic {
	position: absolute;
	top: 2px;
	right: 6px;
	cursor: pointer;
	z-index: 100;
}

/*** 本 */
/** book */
:root {
	--bg-c0: hsl(0.0deg 0.0% 46.3%);
	--bg-c1: hsl(0.0deg 39.7% 50.6%);
	--bg-c2: hsl(35.1deg 100.0% 32.5%);
	--bg-c3: hsl(53.1deg 100.0% 23.9%);
	--bg-c4: hsl(113.0deg 39.0% 30.2%);
	--bg-c5: hsl(188.7deg 100.0% 22.9%);
	--bg-c6: hsl(219.1deg 53.0% 39.2%);
	--bg-c7: hsl(257.9deg 40.7% 37.1%);
	--bg-c8: hsl(12.6deg 40.0% 37.3%);
	--bg-c9: hsl(305.6deg 45.9% 36.3%);
	--bg-cn: hsl(206.4deg 14.8% 33.1%);
	/*--bg-cn: hsl(206deg 4% 43%);*/
	--bl-c0: hsl(60.0deg 3.2% 93.9%);
	--bl-c1: hsl(0.0deg 55.6% 91.2%);
	--bl-c2: hsl(35.4deg 60.0% 87.3%);
	--bl-c3: hsl(52.8deg 55.6% 91.2%);
	--bl-c4: hsl(115.0deg 23.1% 89.8%);
	--bl-c5: hsl(190.6deg 36.2% 90.8%);
	--bl-c6: hsl(218.8deg 45.9% 92.7%);
	--bl-c7: hsl(255.0deg 23.1% 89.8%);
	--bl-c8: hsl(16.4deg 15.1% 85.7%);
	--bl-c9: hsl(307.1deg 36.2% 90.8%);
	--bl-cn: hsl(207.3deg 15.1% 85.7%);
	/*--bl-cn: hsl(206deg 1% 80%);*/

}
.book {
	display: inline-flex;	/*blockだとa要素がセンタリングされない*/
	height: 20.5em;	/*.bookshelfのfont-sizeが90%のとき19em */
	min-width: 2.25em;
	writing-mode: vertical-rl;
	border: 1px black solid;
	box-shadow: inset -3px 0px 6px hsl(0deg 0% 65% / 0.67); /*3px 1px 3px rgb(128, 128, 128, 0.67);*/
	vertical-align: bottom;
	margin-right: 1px;	/*親をflexにするとそのままでは密接する*/
	
}
.book a {
	text-decoration: none;
	height: 100%;
	align-items: center;
	line-height: 1;
	position: relative;
	margin: 0;
	padding-top: 0.5em;
	display: grid;
	grid-template-columns: 1fr auto;
	box-shadow: inset 3px 0 3px hsl(0deg 0% 98% / 0.5);
}
/*＠＠transitional
li.book:after, div.book:after*/
.book:after {
	content: attr(data-ndc);
	height: 12px;
	font-size: 10px;
	line-height: 1.1;
	text-align: center;
	writing-mode: horizontal-tb;
	margin-top: 0.2em;
	padding-top: 1px;
	box-shadow: inset 2px 0 3px hsl(0deg 0% 78% / 0.5);
}
/** 背表紙*/
.book .title {
	color: black;
	overflow: hidden;
	margin-bottom: 0.3em;
	white-space: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
@supports (-webkit-backdrop-filter: none) {
	/* for Safari, horizontal-tb + -webkit-box has problems */
	.book .title {
		display: inline-block;
	}
}
.book .author {
	display: inline-block;
	max-height: 5em;
	color: black;
	text-align: end;
	white-space: nowrap;
	overflow: hidden;
	padding-right: 1px;	/*なぜか1px右にずれる*/
}
.title.short + .author,
.author.moreaut {
	max-height: 7em;
}
.title.vshort + .author {
	max-height: 10em;
}
/* 文庫新書、pamphlet */
.book.TB,
.book.TP {
	min-width: 1.75em;
}
.book.target {
	border: 1px red solid;
	position: relative;
}
.book.target:before {
	content: "▼";
	text-align: center;
	vertical-align: middle;
	position: absolute;
	top: -18px;
	left: calc(50% - 0.6em - 2px);
	color: red;
	z-index: 20;
}

.book.boxonly {
	border-style: dashed;
	background: hsl(0deg 0% 78% / 0.7);
	box-shadow: none;
}
.book.boxonly:after {
	opacity: 0.5;
}
.book.boxonly a {
	box-shadow: none;
}
.book.boxonly span {
	color: blue;
}
.book.GA {
	border-top: #6565d9 solid 3px;
}
.book.GA10 {
	border-top: #6565d9 solid 6px;
}
/** 変則配置 */
.runover {
	/*display: inline;*/
	display: flex;
	align-items: end;
	margin-left: 30px;
}
.runover .book {
	transform: rotate(10deg);
	transform-origin: bottom right;
}
.runover.above {
	position: absolute;
	left: 1em;
	bottom: calc(100% - 2em);
	transform: rotate(90deg);
	align-items: center;
	/*display: flex; .runover共通*/
	transform-origin: bottom left;
	margin: 0;
}
.runover.above.col2 {
	left: 21em;
}
.runover.above.col3 {
	left: 41em;
}
.runover.liedown .book,
.runover.above .book {
	transform: rotate(180deg);
	transform-origin: center;
	margin: 0;
}
.runover.liedown {
	transform: rotate(90deg) translate(-100%, 0);
	align-items: start; /*center;*/
	/*display: flex; .runover共通*/
	transform-origin: bottom left;
	margin-left: 0.5em;
}
.runover.straight .book {
	transform: none;
}

.reset .runover {
	position: static;
	transform: none;
	margin-left: auto;
	align-items: inherit;
}
.reset .runover .book {
	transform: none;
}

/* pamphlet */
.TP .title {
	max-width: 1.2em;
	-webkit-line-clamp: 1;
}
/*
.title.noresp {
	max-height: calc(100% - 1em);
}
.title.enaut {
	max-height: calc(100% - 6em);
}
.author.enaut {
	max-height: 6.5em;
}
.author.moreaut {
	max-height: 11em;
}
*/
.title.vshort {
	letter-spacing: 0.4em;
}
.title.short {
	letter-spacing: 0.2em;
}
span.lr {
	writing-mode: horizontal-tb;
	letter-spacing: normal;
}
/*** NDC */
/** NDC分類 */
.c1 span,
.c2 span,
.c3 span,
.c7 span,
.c8 span,
.c9 span {
	/*color: white;*/
}
.c0 {	/* 総記 */
	background: var(--bl-c0); /* #fde3de */
}
.c1 {	/* 哲学 */
	background: var(--bl-c1); /* #fde8d1 */
}
.c2 {	/* 歴史 */
	background: var(--bl-c2); /* #fcfcdc */
}
.c3 {	/* 社会科学 */
	background: var(--bl-c3); /* #e5eccd */
}
.c4 {	/* 自然科学 */
	background: var(--bl-c4); /* #d8ead7 */
}
.c5 {	/* 技術 */
	background: var(--bl-c5); /* #cfe8e5 */
}
.c6 {	/* 産業 */
	background: var(--bl-c6); /* #d1e3ed */
}
.c7 {	/* 芸術 */
	background: var(--bl-c7); /* #cdd4e4 */
}
.c8 {	/* 言語 */
	background: var(--bl-c8); /* #dcd4e3 */
}
.c9 {	/* 文学 */
	background: var(--bl-c9); /* #f7e2ec */
}
.c {	/* 分類なし */
	background: var(--bl-cn); /* #dcdbda */
}

/*＠＠transitional
li.book.c0:after, div.book.c0:after
*/
.book.c0:after {color: white; background: var(--bg-c0); }
.book.c1:after {color: white; background: var(--bg-c1); }
.book.c2:after {color: white; background: var(--bg-c2); }
.book.c3:after {color: white; background: var(--bg-c3); }
.book.c4:after {color: white; background: var(--bg-c4); }
.book.c5:after {color: white; background: var(--bg-c5); }
.book.c6:after {color: white; background: var(--bg-c6); }
.book.c7:after {color: white; background: var(--bg-c7); }
.book.c8:after {color: white; background: var(--bg-c8); }
.book.c9:after {color: white; background: var(--bg-c9); }
.book.c:after {color: white; background: var(--bg-cn); }


/** 凡例 */
.ndcex {
	/*margin: 2em 0 1em;*/
	/*margin: 0;*/
	/*padding: 3px calc(var(--lspace) + var(--bks-bd)) 1px;*/
	padding: 0.5em 5px 0.5em calc(var(--mdsp) + 5px) ;
	/*position: fixed;*/
	bottom: 0; /*var(--foot-h);*/
	/*left: 0;*/
	background: white;
	/*width: 100%;*/
	height: var(--idx-h);
	box-sizing: border-box;
	z-index: 100;
}
.ndcex div {
	display: inline-block;
	/*width: calc((98vw - var(--lspace) * 2) / 11);*/	/*7em;*/
	width: calc((100% - var(--mdsp)) / 11);
	max-width: 7.5em;
	margin: 0;
	font-size: var(--idx-fs);
}
.ndcex span {
	display: inline-block;
	padding: 0.1em 0.5em;
	border: solid gray 1px;
	text-align: center;
	margin-right: 0.5em;
	cursor: pointer;
}
.ndcex .c0 {color: var(--bg-c0); border-color: var(--bg-c0);}
.ndcex .c1 {color: var(--bg-c1); border-color: var(--bg-c1);}
.ndcex .c2 {color: var(--bg-c2); border-color: var(--bg-c2);}
.ndcex .c3 {color: var(--bg-c3); border-color: var(--bg-c3);}
.ndcex .c4 {color: var(--bg-c4); border-color: var(--bg-c4);}
.ndcex .c5 {color: var(--bg-c5); border-color: var(--bg-c5);}
.ndcex .c6 {color: var(--bg-c6); border-color: var(--bg-c6);}
.ndcex .c7 {color: var(--bg-c7); border-color: var(--bg-c7);}
.ndcex .c8 {color: var(--bg-c8); border-color: var(--bg-c8);}
.ndcex .c9 {color: var(--bg-c9); border-color: var(--bg-c9);}
.ndcex .c {color: var(--bg-cn); border-color: var(--bg-cn);}

/* test hilite */
body[data-ndc] .book {
	opacity: 0.4;
}
[data-ndc] .ndcex span {
	border-color: silver;
	opacity: 0.5;
}
body[data-ndc] .showA.fbB > .shelfslide,
body[data-ndc] .showB .fbA > .shelfslide {
	opacity: 0.85;
	filter: grayscale(20%);
}

body[data-ndc='c0'] .c0,
body[data-ndc='c1'] .c1,
body[data-ndc='c2'] .c2,
body[data-ndc='c3'] .c3,
body[data-ndc='c4'] .c4,
body[data-ndc='c5'] .c5,
body[data-ndc='c6'] .c6,
body[data-ndc='c7'] .c7,
body[data-ndc='c8'] .c8,
body[data-ndc='c9'] .c9 {
	opacity: 1;
	border-color: #d02626;
}

/*** media query */
@media (max-width: 1200px){
	div.main {
		padding-right: 0;
	}
}
@media (max-width: 780px){
	body {
		--idx-fs: 70%;
	}
	h1 {
		font-size: 1.6rem;
		white-space: nowrap;
	}
	div.main {
        padding-right: 10px;
    }
	.bookshelf {
		min-width: calc(100% - var(--lspace));
	}
}

/** container for ndcex */
/*body.bkshelfにcontainer-typeを適用するとSafariなどでページスクロールができなくなる*/
body.bkshelf div.ndcex {
	container-type: inline-size;
	container-name: ndc;
}

@container ndc (max-width: 990px){
	.ndcex div {
		/*font-size: 75%;*/
		width: 4.1em;
		margin-right: 1em;
		overflow: hidden;
		white-space: nowrap;
	}
	.ndcex div:nth-child(11) {
		width: 6em;
	}
	.ndcex span {
		margin-right: 0.3em;
	}
}
@container ndc (max-width: 780px){
	.ndcex {
		/*padding: 3px;*/
		white-space: nowrap;
	}
	.ndcex div {
		width: 4em;
		margin-right: 0.5em;
		overflow: hidden;
	}
	.ndcex div:nth-child(11) {
		width: 5.5em;
	}
	.ndcex span {
		margin-right: 0.2em;
		padding: 0.1em 0.35em;
	}
}