/** global */
:root {
	--box-gap: 0.5em;
	--bdrad: 5px;
	--bg-clean: rgb(255 255 255 / 0.86);;
	--bg-accent: rgb(240 240 240 / 0.86);;
	--swpad: calc(var(--secpad) - 2px);
}
.common #result :is(.incCtrl, .ctrl0),
.common #itemres :is(.incCtrl, .ctrl0) {
	display: none;
}
.common #result h2 {
	float: none;
}

#dswitcher {
	margin-top: 1em;
}
/*
#dswitcher > span {
	display: inline-block;
	width: fit-content;
	padding: 0.5em var(--swpad);
	text-align: center;
	border: #eee 1px solid;
	border-bottom: none;
	cursor: pointer;
	background: var(--bg-dark);
	color: white;
}
*/
#dswitcher > button {
	padding: 0.5em var(--swpad);
	text-align: center;
	text-shadow: 1px 1px 2px rgb(50 50 50 / 0.4);
}
#dswitcher > button.current {
	background: var(--bg-res);
	color: var(--cg-accent);
	color: black;
	/*font-weight: bolder;*/
	cursor: default;
	text-shadow: none;
}
#dswitcher > button:before {
	content: "❯";
	margin-right: 0.4em;
	color: var(--cg-theme);
	text-shadow: none;
}
#dswitcher > button.current:before {
	color: var(--cg-accent);
}
/*
#foritem, #forbook {
	margin: 0;
	padding: 0;
	background: transparent;
}
*/
#ressection, #forbook {
	margin-top: 0;
	padding-top: 0.5em;
	background: var(--bg-res);
}

/** #ressection table*/
table.queryresults {background: transparent;}
.common table.gallery tr{background: white; margin: 0 1em 1em 0;}
.digt table.gallery tr {
	--tdw: 256px;
}
.digt table.gallery tr {
	width: calc(var(--tdw) + 13px);
	grid-template-columns: 80px 40px auto;
}
.digt table.gallery td {
	width: var(--tdw);
}
.digt table.gallery img.thumb {
	max-width: var(--tdw);
	filter: contrast(1.1) saturate(1.12);
}

/** 資料検索方法 */
div.indp {
	margin-top: 1em;
	border-top: 1px solid silver;
	padding-top: 1em;
}

.indp h2 {
	border-left: none;
	padding-left: 0;
}

#freqwords ol li,
#catkw td {
	padding: 0.4em 0.4em 0.4em 0.6em;
	border: gray 1px solid;
}

#freqwords ol {
	margin: 1em 0;
	list-style-position: inside;
	padding-left: 0;
}
#freqwords ol li {
	float:left;
	width: 8em;
	margin: 0 1em var(--box-gap) 0;
	background: var(--bg-clean);
	border-radius: var(--bdrad);
}
#freqwords ol li::marker {
	color: var(--tx-link);
}

#catkw {
	margin-bottom: 1.5em;
}
#catkw tbody {
	display: flex;
	flex-wrap: wrap;
	gap: var(--box-gap);
}
#kwdlist tbody {
	height: calc((2.8em + 2px) * 4 - 2px);	/*line-height:1.5 + 2paddings:0.8 + gap:0.5 + 2border*/
	overflow-y: hidden;	/*scroll;*/
}
#catkw tbody {
	/*background: rgb(255 255 255 / 0.86);*/
}
#catkw dfn {
	font-weight: normal;
	padding: 0 0.5em;
}
#catkw table.open tbody {
	height: auto;
}
#catkw tr {
	display: flex;
	width: 11.5em; /* 各項目の幅 */
}
#catkw td {
	/*padding, borderは#freqwords ol liと共通定義*/
	line-height: 1.5;
}
#catkw td:first-child {
	border-radius: var(--bdrad) 0 0 var(--bdrad);
	flex: 0 0 7.2em;
	border-right-style: dotted;
	background: var(--bg-accent);
}

#catkw td:nth-child(2) {
	border-radius: 0 var(--bdrad) var(--bdrad) 0;
	flex: 1;
	min-width: 0;
	border-left-style: none;
	background: var(--bg-clean);
}
/* link style */
#catkw td a,
#freqwords ol a {
	color: black;
	display: block;
	text-decoration: none;
}
#freqwords ol a {
	display: inline-block;
	width: calc(100% - 2em);
}
#catkw td a {
	display: block;
}
#catkw td:first-child:active,
#freqwords ol li:active {
	background: rgb(240 240 255 / 0.8);
}
#catkw td a:hover,
#freqwords ol a:hover {
}

/* kwd toggler */
p.toggler {
	margin-top: 0.5em;
}
p.toggler button {
	border: none;
	background: transparent;
	color: #009;
	cursor: pointer;
	font-size: 1em;
}


#itemhier tr {
	margin-bottom: 0.5em;
}
#itemhier td img {
	max-width: 200px;
}

.extra-intro {
	clear: both;
	margin-top: 1em;
}
#freqwords .extra-intro {
	padding-top: 0.5em;
}
#itemhier .extra-intro {
	margin-top: 0.5em;
}
.extra-intro a {
	text-decoration: none;
}
.extra-intro a:hover {
	text-decoration: underline;
}
.extra-intro a:after {
	content: "❯";
	margin-left: 0.5em;
	color: #636363;
}

:target:not(#qsection) > h2 {
	background: rgba(127, 127, 255, 0.1);
	display: inline-block;
}

/** メディアクエリ */
@media (min-width:400px) and (max-width: 600px){
	.digt table.gallery tr {
		--tdw: 156px;
		--thbw: 256px;
		width: calc(100% - 10px);
		grid-template-columns: calc(var(--thbw) + 20px) 1fr;
		grid-template-rows: 1.5em minmax(1.5em, 2.6em) 1.5em 1.5em auto;
	}
	.digt table.gallery td {
		grid-column: 2;
		width: calc(100% - 10px);
	}
	.digt .gallery tr > td.thumb {
		/*max-height: 250px;*/
		width: calc(var(--thbw) + 6px);
		grid-column: 1;
		grid-row: 1 / 6;
		border-bottom: none;
		margin-bottom: 0;
	}
	.digt table.gallery img.thumb {
		max-width: var(--thbw);
	}
	.digt .gallery tr > td:nth-child(1) {
		grid-column: 2;
		grid-row: 1;
		position: relative;
		overflow: visible;
	}
	.digt .gallery tr > td:nth-child(2) {
		grid-column: 2;
		grid-row: 3;
	}
	.digt .gallery tr > td:nth-child(3) {
		grid-column: 2;
		grid-row: 2;
		text-wrap-mode: wrap;
	}
	.digt .gallery tr >  td:nth-child(4) {
		grid-column: 2;
		grid-row: 4;
	}
	.digt .gallery tr >  td:nth-child(5) {
		grid-column: 2;
		grid-row: 5;
	}
}
@media (max-width: 400px){
	:root {
		--mtdw: calc(100% - 10px);
	}
	label:has(input[name='gallery']) {
		font-size: 90%;
	}
	#dswitcher > button {
		font-size: 93%;
		width: 49.2%;
		box-sizing: border-box;
		text-align: left;
		margin-right: 0;
	}
	.digt table.gallery tr {
		--tdw: var(--mtdw);
		grid-template-columns: 140px 1fr;
	}
	.digt table.gallery td,
	.digt td img.thumb{
		max-height: 250px;
	}
	.digt .gallery tr > td:nth-child(2) {
	    grid-column: 2;
	}
	table.gallery tr {
		width: calc(50% - 10px);
		margin-right: 10px !important;
	}
	table.gallery td ,
	div:not(.digt) > table tr > td.thumb {
		width: var(--mtdw);
		overflow: hidden;
		text-overflow: ellipsis;
	}
	div:not(.digt) > table td img.thumb {
		/*width: 100%;*/
	}
	#freqwords li,
	#catkw tbody {
		font-size: 95%;
		/*width: 11em;*/ /* なぜか少し足りない */
	}
	#itemhier td img {
		max-width: var(--mtdw);
	}

}