@charset "utf-8";
/*** 基本規則 */
/** 大原則*/
body.snorql {
	--bg-res-l: 86%;
	--bg-res: hsl(from var(--bg-basic) h s var(--bg-res-l) / 0.8);
	/*--bg-res: hsl(var(--cb-hue) 20% 98%);*/
	/*--bg-dark: hsl(var(--cb-hue) var(--cb-sat) calc(var(--cb-lgh) * var(--cb-mul-d)));*/
	--dsw-pt: 0.4em;

}

body.describe {
	--bg-res-l: 97%;
	--cb-sat: 2%;	/*この設定でheader以外はほとんど色を付けないようにする*/
	--cb-mul-lg: 1.15;
	--bgr-h: 69%;
	--bgr-l: 82%;	/*追加表のセル背景色を固定的に明るくする*/
	--bgth-l: 78%;
	
	--bg-ha-alph: 0.6;
	--bg-he-alph: 0.5;
	/*--bg-table: hsl(from var(--bg-basic) h s 88%);*/

}
/* データ種別の色スキーム定義は共有するためcommon.jsに移動 */
body[data-type=DigitalDocument] td .switcher {display: inline-block; float: none; margin: 0 0 0 2em;}
body[data-type=Annotation] #ressection figure.primimage img {max-height: 250px;}
body[data-type=Annotation] #ressection figure.primimage img:active,
body[data-type=Annotation] #ressection figure.primimage.zoomed img {max-height: calc(100vh - 4.5em);}

.snorql h2 {
	font-size: 1.2rem;
}
/** id on table */
.describe .atid td.term {
	background: var(--bg-s-type);
}
.atid td.term span:first-child {
	display: inline-block;
	margin-right: 8px;
	/*padding-left: 4px;
	min-width: calc(4em - 4px);*/
	min-width: 4em;
	text-align-last: justify;
	/*letter-spacing: 3px;*/
}
.atid td.term span:last-child {
	color: gray;
	font-size: 12px;
}
.simple .atid td.term span:last-child {
	display: none;
}

.simple .uri a:before,
.simple td.uri a:after {
	content: "";
}

/** simple mode */
/*.simple td:nth-child(2) a.qname span:first-child*/
.simple a.qname span:first-child,
.simple .uri a span:first-child,
.simple a.extlink {
	display: none;
}
.simple tbody.det,
.simple td tbody.subdet,
.simple td span.literal::before,
.simple td span.literal::after {
	display: none;
}
.simple td tbody.subshow {
	display: table-row-group;
}
.simple span[data-pfx=ndlid] a.qname span:first-child {
	display: inline;
	font-size: 85%;
}
.simple td tbody.type a,
.simple h2 span.uri:last-child {
	pointer-events: none;
	color: black;
}

/** describer */
.describe div.main {
	/*padding-right: 1em;*/
}
.describe #dswitcher {
	/*margin-left: var(--s-mg-l);*/
	margin-top: 0.5em;
	margin-bottom: -0.8em;
	padding-left: var(--secpad);
}
.describe #dswitcher span {
	display: inline-block;
	width: 6em;
	padding: var(--dsw-pt) var(--wd-term-pad);
	/*text-align: center;*/
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
#dswitcher.simple span.simple,
#dswitcher.detail span.detail {
	border-bottom-color: #a22;
}


/* ＠＠色が変わってちらつくのを防ぐ実験 */
body.snorql.prepare > hgroup,
body.snorql.prepare h1 {
	background: var(--bg-body);
	color: var(--bg-body);
}
/* h1→common */
h1 small {
	margin-right: 10px;
	/*color: var(--bg-res);*/
	font-size: 50%;
	border: solid 1px var(--bg-l2);
	border-radius: 5px;
	padding: 5px;
	text-align: center;
	text-align-last: justify;
	line-height: 1;
	min-width: 3em;
	max-width: 4em;
	display: inline-block;
	vertical-align: middle;
	/*vertical-align: 0.42em;*/
	white-space: normal;
	
}
/** sections */
.snorql #ressection,
.snorql #qsection {
	/*--bg-res: hsl(var(--cb-hue) var(--cb-sat) 98%);*/
	background: var(--bg-res);
}

.queryresults {
	min-width: 100%;
}
#qsection .switcher {
	color: var(--bg-header);
}
#moreform {
	margin: 0;
	background: var(--bg-basic);
}
#result .empty {
	margin: 0;
}

/** res table */
.describe table,
.describe tbody,
table.describe table {
	border-style: none;
}
div > table.describe {
	border-bottom-style: solid;
}
table.describe th:first-child,
table.describe td:first-child {
	border-left: none;
}
table.describe th:last-child,
table.describe td:last-child {
	border-right: none;
}
table.describe td.extraval {
	padding-right: 0;	/* 入れ子テーブルの罫線の右端を親と揃える */
}

span[data-pdesc]:before {
	color: black;
}
table.describe .ats > tr > td:nth-child(2),
table.describe .type > tr > td:nth-child(2),
table.describe .label > tr > td:nth-child(2) {
	background: white;
}
table.describe .subtext,
table.queryresults .subtext {
	user-select: auto !important;
}

/** prim image */
#ressection td figure.primimage img {
	max-width: 140px;
}

.maintype.hilite {
	color: var(--tx-blink);/*#a00;*/
	/*text-shadow: 1px 1px 1px #ddd;*/
}
figure.primimage {
	background:white;
}
figure.primimage div {
	position: absolute;
	top: 0;
	background:white;
}
#ressection figure.primimage div img:hover {
	cursor: pointer;
}
.primimage span.maintype,
.primimage span.ititle {
	position: absolute;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	cursor: default;
}
.primimage span.ititle {
	color: black; /*var(--bg-dark);*/
	font-size: 1rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	top: 0;
	overflow: hidden;
	padding: 5px;
	max-height: calc(2.8rem + 6px);	/*2.8remはline-height * font-size * line-clamp、6pxはpadding * 2 - 4 ← -4がなければautoと同じ。この場合なぜか僅かに3行目の最上部が見えてしまう */
	line-height: 1.4;
	background: rgb(252 252 252 / 0.88);
}

.primimage span.maintype {
	color: var(--bg-dark);
	text-shadow: 1px 1px 1px var(--bg-dark);
	background: var(--bg-l1);
	font-size: 1.5em;
	top: 40%;
	display: none;
}
.primimage div span.maintype {
	font-size: 0.8em;
}
.primimage span.maintype.hilite {
	display: block;
}
.primimage.zoomed span.maintype.hilite,
.primimage.zoomed div.maintype {
	display: none;
}

.primimage.hide .maintype {
	display: none !important;
}

a.extlink, a.extlink img {
	filter: grayscale(100%);
}
.ops small {
	color: gray;
	font-size: 14px;
	display: inline-block;
	max-width: 28em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: middle;
}
.simple .ops small {
	display: none;
}

td img.ticon {
	float: right;
}
td img.sig {
	/*margin-top: -2px;*/ /*24pxのアイコンなら-2pxずらしてちょうどよい*/
	margin-right: 2px;
	float: left;
}
.shadow {
	display: none;
}

/*** メディアクエリ */

/** narrower screen arrangement */
@media (max-width: 600px){
	td img.ticon {
		display: none;
	}
}
/* 840px for tablet */
@media (max-width: 840px){
	body {
		--pimg-w: 160px;
	}
	body.snorql {
		--dsw-pt: 0.3em;
	}
	.simple table {
		/* 項目セルの幅の固定のため（のはず）*/
		table-layout: fixed;
	}
	.simple tr td:nth-child(1) {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.simple tr td:nth-child(1) span {
		white-space: nowrap;
	}
	.simple span[data-pdesc]::before {
		min-width: auto;
		margin-right: 4px;
	}
	.simple [data-pdesc] a {
		display: inline;
	}
	.simple table.queryresults {
		/* opsで追加する一覧テーブルは幅を固定しない */
		table-layout: auto;
	}
	#ressection figure.primimage img.still,
	.primimage span.ititle {
		/*max-width: 100px;
		max-height: 100px;*/
		display: none;
	}
	.primimage span.maintype {
		font-size: 1em;
	}
}
/** wider screen arrangement */
@media (min-width: 840px) {
	body {
		--wd-term: min(round(calc((100vw - var(--s-mg-l))* 0.2), 1px), 300px);
	}
	/*[data-dbase]*/.describe {
		--s-mg-l: 180px;	/* margin righとして扱う→rightに変更2024-11-08 */
		--pm-wdif: 20px;
	}
	/*[data-dbase]*/.describe .section,
	/*[data-dbase]*/.describe section,
	/*[data-dbase]*/.describe #moreform {
		margin-right: var(--s-mg-l);
		margin-left: 0; /*1em;*/	/* 右は固定したまま→左固定 */
	}
	div table.describe {	/* 840px未満はdiv > table.describeで入れ子テーブルには適用しない */
		border-bottom-style: solid;
	}
	table.describe table.describe {
		margin-bottom: 0.5em;
	}
	table.describe th, table.describe td {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}
	.snorql h2 span.uri,
	table.describe th:last-child,
	table.describe td:last-child {
		padding-left: 10px;
	}
	#ressection > div > figure.primimage {
		right: calc( -1 * (var(--s-mg-l) - var(--pm-wdif) + 20px));	/* +10pxだと.gateのformの右と揃わない*/
		left: auto;
		top: var(--msec-pt);
	}
	#ressection > div > figure.primimage > img,
	#ressection figure.primimage img.still:active {
		max-width: calc(var(--s-mg-l) - var(--pm-wdif));
		max-height: 300px;
	}
	[data-type=Annotation] #ressection > div > figure.primimage > img {
		max-height: 450px;
	}
	/*[data-dbase]*/.describe #ressection > div > figure.primimage.zoomed > img {
		max-width: calc(100vw - 3em);
		max-height: calc(100vh - 4.5em);
	}
	span.ititle small {
		font-size: 75%;
		color: var(--bg-dark);
	}
	/* 最後の行が1文字になってしまうことを避ける行頭禁則 */
	span.ititle.orphans {
		letter-spacing: -2px;
	}
	#result > .primimage .wbar {
		display: none;
	}
}
@media (min-width: 1200px) {
	.describe {
		--s-mg-l: 230px;	/* margin rightのみ広げる */
		--pm-wdif: 30px;
	}
	.describe .section,
	.describe section,
	.describe #moreform {
		max-width: 1300px;
	}
	.describe div.main {
		padding-right: var(--rspace);
	}
	span.ititle.orphans {
		letter-spacing: -1px;
	}
	span.ititle.orphans small {
		letter-spacing: normal;
	}
	.snorql #qsection.toggle {
		margin-right: 0;
	}
	.snorql #qsection.toggle.hide {
		margin-right: var(--s-mg-l);
	}
}
@media (min-width: 1580px) {
	.snorql #qsection.toggle {
		margin-right: var(--s-mg-l);
	}
}