@charset "utf-8";

.docShow {

}

.postcontent a {
	text-decoration:none;
	color:#ea9920;
}

.topListBanner {
	position:relative;
	width:100%;
	height:360px;
	background:#ff000022;
	color:#fff;
	padding-inline:var(--maxLR);
	background-position:30% 50%;
	background-size:cover;
	background-image:linear-gradient(0deg, #00000080, #00000080), url(/img/lib.jpg);
}
.topListBanner .ein0 {
	padding-inline:max(3%, env(safe-area-inset-left));
	height:100%;
}
.topListBanner .ein1 {
	position:relative;
	height:100%;
}
.topListBanner h2 {
	position:absolute;
	display:block;
	inset:auto auto 0 0;
	padding:0 0 1em 0;
	line-height:1;
	font-size:44px;
	font-weight:700;
}
.topListBanner .dmy {
	display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
	opacity:.3;
	font-size:80px;
	line-height:1;
	height:calc(100% - 90px);
}
.topListBanner .dmy li {
	display:block;
}
.topListBanner .dmy li:first-child {
	padding-right:3vw;
}
@media (min-width: 640px) and (orientation: landscape) {
	.topListBanner h2 {
		font-size:50px;
	}
	.topListBanner {
		background-position:50% 10%;
	}
	.topListBanner .dmy {
		font-size:130px;
		height:100%;
	}
	.topListBanner .dmy li:first-child {
		padding-right:20vw;
	}
}

.breads {
	position:sticky;
	display:flex;
	padding:1em 0 1em max(3%, env(safe-area-inset-left));
	inset:calc(var(--fontsize) * 4);
	z-index:2;
	background:#fff;
	line-height:1;
	width:100%;
}
.breads li {
	display:block;
	white-space:nowrap;
	color:#555;
	font-weight: 300;
}
.breads li:last-child{
	text-overflow:ellipsis;
	overflow:hidden;
}
.breads li:not(:last-child):after {
	content:'/';
	display:inline-block;
	padding-inline:.5em;
}
.breads li a {
	text-decoration:none;
	color:#555;
}

.topbanner {
	position:relative;
	display:block;
	overflow:hidden;
	height:calc((100vw - var(--maxLR) * 2) / 1200 * 900);
	width:100%;
}
@media (min-width: 640px) and (orientation: landscape) {
	.topbanner {
		height:calc((100vw - var(--maxLR) * 2) / 1920 * 700);
	}
}
#toppageblock {
	display:none;
}
.topbanner img {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	margin:auto;
	inset:0;
}
.topbanner img:first-child {
	filter:blur(15px) brightness(0.8);
	transform:scale(1.3);
}
.topbanner img:last-child {
	#max-width:1800px;
	max-width:calc(100% - var(--maxLR) * 2);
	inset:0 var(--maxLR);
}

:root :where(p.has-background) {
    padding:1.25em 2.375em;
}

.has-text-align-center {
    text-align: center
}
.has-text-align-left {
    text-align: left
}
.has-text-align-right {
    text-align: right
}
.aligncenter {
    clear: both
}
.items-justified-left {
    justify-content: flex-start
}
.items-justified-center {
    justify-content: center
}
.items-justified-right {
    justify-content: flex-end
}
.items-justified-space-between {
    justify-content: space-between
}
.wp-block-image.alignfull img,
.wp-block-image.alignwide img {
	height: auto;
	width: 100%;
}

.docLists .postList .foot {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:1px;
	font-size:5vw;
}
.docLists .postList .foot .morepost {
	position:relative;
	margin:-0.05em;
	border-radius:0;
	width:auto;
	min-width:2em;
	border: 0.5px solid #d2d2d2;
	background:#fff;
}
.docLists .postList .foot b:after {
	content:'…';
	color:#e6e6e6;
	font-size:70%;
	line-height:3;
}
.docLists .postList .foot .morepost li {
	padding:1em;
}
.docLists .postList .foot .morepost:hover {
	background:var(--mainColor);
	color:#fff;
}
.docLists .postList .foot .morepost.unact {
	opacity:.5;
	pointer-events:none;
}
@media (min-width: 840px) {
	.docLists .postList .foot {
		font-size:var(--fontsize);
	}
}

.docLists .lrlayer {
	width:100%;
	padding-inline:max(3%, env(safe-area-inset-left));
}
.docLists .postList {
	display:flex;
	justify-content:normal;
	gap:1em;
	width:auto;
	max-width:none;
	margin:0 0 auto;
}
.docLists .postList .topost {
	width:calc((100% - 1em) / 2);
	margin:0;
	box-sizing:border-box;
}
.docLists .xmenu {
	display:flex;
	gap:1em;
	position:sticky;
	top:calc(var(--fontsize) * 7);
	background:#fff;
	margin-bottom:1em;
	padding:1em 0;
	z-index:3;
}
.docLists .xmenu :where(.mainSel, .spmSel) {
	position:relative;
	width:calc((100% - 1em) / 2);
	height:calc(2.5em + 2px);
}
.docLists .xmenu :where(.mainSel, .spmSel) .polld {
	border:1px solid #999;
	border-radius:1em;
	overflow:hidden;
}
.docLists .xmenu :where(.mainSel, .spmSel) .polld > li {
	padding:0 .5em;
	background:#fff;
	min-height:2em;
}
.docLists .xmenu :where(.mainSel, .spmSel) .polld > li:before,
.docLists .xmenu :where(.mainSel, .spmSel) .polld > li:after {
	content:'';
	display:block;
	height:.25em;
}
.docLists :where(.xmenu .mainSel > .polld > li > a) {
	display:none;
}
.docLists .xmenu .spmSel .polld :where(label, a) {
	display:block;
	line-height:2;
	text-decoration:none;
	color:#444;
}
.docLists .xmenu :where(.spmSel):not(:has(.after input:checked)) .polld :where(label:not(:has(input:checked)),a:not([act])) {
	display:none;
}
.docLists .xmenu .spmSel .polld :where(label:has(input:checked)) {
	color:var(--subColor1);
}
.docLists .xmenu .spmSel .polld :where(label, a):hover {
	color:var(--mainColor);
}
.docLists .xmenu .mainSel {
	display:block;
	height:2em;
	border-radius:1em;
}
.docLists .xmenu :where(.relbtn, .selbtn) {
	display:block;
	line-height:1;
}
.docLists .xmenu :where(.relbtn, .selbtn) a {
	display:block;
	text-decoration:none;
	line-height:2;
	color:#444;
}
.docLists .xmenu :where(.relbtn, .selbtn) a[act] {
	color:var(--subColor1);
}
.docLists .xmenu :where(.spmSel):not(:has(.after input:checked)) ~ .mainSel .selbtn :where(.cont a:not([act])),
.docLists .xmenu :where(.spmSel):not(:has(.after input:checked)) ~ .mainSel .selbtn :where(label:not(:has(input:checked)) ~ .cont a) {
	display:none;
}
.docLists .xmenu :where(.relbtn, .selbtn) a:hover {
	color:var(--mainColor);
}
.docLists .xmenu label {
	cursor:pointer;
}
.docLists .xmenu .selbtn label {
	display:none;
}
.docLists .xmenu input {
	display:none;
}
.docLists :where(.mainSel .cont),
.docLists .polld
{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .28s ease;
}
.docLists .polld {
	grid-template-rows:2.5em;
}
.docLists .xmenu :where(.mainSel, .spmSel) .after {
	display:block;
	inset:0;
	position:absolute;
	pointer-events:auto;
	background:#f0000000;
}
.docLists .xmenu :where(.mainSel, .spmSel) label.after:after {
	content:'＞';
	display:block;
	line-height:1;
	aspect-ratio:1;
	margin:auto 1em auto auto;
	position:absolute;
	inset:0;
	height:1em;
	transform:rotate(90deg) scale(.7,1.4);
	transition:transform .28s ease;
}
/*
.docLists .xmenu :where(.spmSel):has(.after input:checked) .after:before,
.docLists .xmenu :where(.spmSel):has(.after input:checked) .after:after {
	content:'';
	inset:0;
	position:absolute;
	margin:auto;
	width:1em;
	height:.1em;
	background:#fff;
}
.docLists .xmenu :where(.spmSel) .after:before {
	transform:rotate(45deg);
}
.docLists .xmenu :where(.spmSel) .after:after {
	transform:rotate(-45deg);
}
*/
.docLists .xmenu :where(.spmSel:has(.after input:checked)) .polld,
.docLists .xmenu :where(.spmSel:has(.after input:checked)) ~ .mainSel .polld {
	grid-template-rows: 1fr;
	box-shadow:0 .2em .4em #00000077;
}
.docLists .xmenu :where(.spmSel):has(.after input:checked) .after {
	inset:-1px -1px -1px auto;
	border:50%;
	aspect-ratio:1;
	border-radius:2em;
	#box-shadow:0 .2em .4em #00000077;
}
.docLists .xmenu :where(.spmSel):has(.after input:checked) .after:after {
	transform:rotate(-90deg) scale(.7,1.4);
}
.docLists .xmenu :where(.spmSel):has(.after input:checked) + .mainSel .after {
	bottom:auto;
}
.docLists .xmenu :where(.mainSel, .spmSel):not(:hover) .polld {
	#pointer-events:none;
}
.docLists .mainSel .cont li,
.docLists .polld li
{
	overflow:hidden;
	display:block;
}
.docLists :where(
.spmSel:has(input[value="0"]:checked) ~ .mainSel .cont[value="0"],
.spmSel:has(input[value="1"]:checked) ~ .mainSel .cont[value="1"],
.spmSel:has(input[value="2"]:checked) ~ .mainSel .cont[value="2"],
.spmSel:has(input[value="3"]:checked) ~ .mainSel .cont[value="3"],
.spmSel:has(input[value="4"]:checked) ~ .mainSel .cont[value="4"],
.spmSel:has(input[value="5"]:checked) ~ .mainSel .cont[value="5"],
.spmSel:has(input[value="6"]:checked) ~ .mainSel .cont[value="6"],
.spmSel:has(input[value="7"]:checked) ~ .mainSel .cont[value="7"],
.spmSel:has(input[value="8"]:checked) ~ .mainSel .cont[value="8"]
) {
	grid-template-rows: 1fr;
}
@media (min-width: 640px) {
	.docLists .postList .topost {
		width:calc((100% - 2em) / 3 - 2px);
	}
}
@media (min-width: 840px) {
	.docLists .lrlayer {
		display: grid;
		grid-template-columns:calc((100% - 3em) / 4 - 2px) 1fr;
		gap:1em;
		align-items: start;
	}
	.docLists .xmenu {
		background:#f2f2f2;
		border-radius:1em;
		min-height:50vh;
		padding:0;
		gap:0;
	}
	.docLists .xmenu .mainSel .cont > li {
		padding:1em 0 0 0;
	}
	.docLists .xmenu .after {
		bottom:auto;
	}
	.docLists .xmenu :where(.spmSel):has(.after input:checked) .after {
		display:none;
	}
	.docLists .xmenu .spmSel label.after:after {
		content:none;
	}
	.docLists .xmenu .mainSel .selbtn .cont :is(a, a:not([act])) {
		display:inline-block;
		font-size:80%;
		margin:0 .5em 1em 0;
	}
	.docLists .xmenu .mainSel .selbtn .cont a:last-child {
		margin:0 0 2em;
	}
	.docLists .xmenu a {
		display:block;
		color:#000000;
		background:var(--subColor1);
		border:1.5px solid var(--subColor1);
		line-height:2;
		padding:0 1em;
		text-decoration:none;
		border-radius:1em;
		margin-bottom:1em;
		box-shadow:0 .2em .1em #00000044;
		transition:all .28s ease;
	}
	.docLists .xmenu a:hover {
		box-shadow:0 .3em .1em #00000044;
		background:#ffffff;
		color:#000000;
	}
	.docLists .xmenu a[act] {
		color:#ffffff;
		background:var(--mainColor);
		border: 1.5px solid var(--mainColor);
		/* border:none; */
		pointer-events:none;
	}
	.docLists .xmenu .spmSel {
		width:0;
	}
	.docLists .xmenu :is(.spmSel, .mainSel) .polld {
		border:none;
		grid-template-rows:1fr;
		box-shadow:none;
	}
	.docLists .xmenu .mainSel .polld > li {
		background:none;
	}
	.docLists .xmenu .mainSel {
		width:100%;
		padding:1em 0.5em;
		height:auto;
		border-radius:0;
		overflow:visible;
	}
	.docLists .xmenu .selbtn {
		background:#00000000;
		margin-bottom:0.6rem;
	}
	.docLists .xmenu .selbtn label {
		display:block;
		position:relative;
	}
	.docLists .xmenu .selbtn label:after {
		position:absolute;
		content:'＞';
		display:block;
		inset:0 0 0 auto;
		transform:rotate(90deg) scale(.7,1.4);
		transition:transform .28s ease;
	}
	.docLists .xmenu .selbtn label:has(input:checked):after {
		transform:rotate(-90deg) scale(.7,1.4);
	}
	.docLists .mainSel .cont {
		grid-template-rows:0fr;
	}
	.docLists .xmenu .selbtn label:has(input:checked) ~ .cont {
		grid-template-rows:1fr;
	}
	.docLists .postList .topost {
		width:calc((100% - 2em) / 3 - 2px);
	}
	.docLists  .postList .morepost {
		width:5em;
	}
}
@media (min-width:1400px) {
	.docLists .lrlayer {
		grid-template-columns:calc((100% - 4em) / 5 - 2px) 1fr;
	}
	.docLists .postList .topost {
		width:calc((100% - 3em) / 4 - 2px);
	}
}



.pagetitle {
	/* margin-top:2em; */
	width:100%;
	/* padding-inline:max(calc(var(--maxLR) + 2em), env(safe-area-inset-left)); */
	max-width:90%;
	background: #faf7f2;
	padding: 1.4em 2em 0;
}
.postcontent {
	width:100%;
	max-width:90%;
	text-align: left;
}
.postcontent .inr {
	padding:50px max(2em, 40px, env(safe-area-inset-left));
	color:#555;
	letter-spacing: 1px;
	line-height: 1.5;
}
:where(.postcontent figure) {
	margin:0;
}
:where(.mainSec h1) {
	font-size: 2em;
	margin-bottom: 20px;
	line-height: 1.2em;
	text-transform: none;
	font-weight:600;
	letter-spacing:1.5px;
}
:where(.postcontent h2) {
	font-size: 1.4em !important;
	margin-bottom: 20px;
	line-height: 1.2em;
	font-weight: 400;
	text-transform: none
}
:where(.postcontent h3) {
	font-size: 1em;
	margin-bottom: 20px;
	line-height: 1.2em;
	font-weight: 400;
	text-transform: none;
}
:where(.postcontent h4) {
	font-size:24px;
}
:where(.postcontent h5) {
	font-size:20px;
}
:where(.postcontent h4,.postcontent h5,.postcontent h6) {
	margin-bottom:20px;
}
:where(.postcontent ol,.postcontent ul) {
	margin:0 0 1.5em 3em;
}
:where(.postcontent ul) {
	list-style:disc;
}
:where(.postcontent ol) {
	list-style:decimal;
}
:where(.postcontent li>ol,.postcontent li>ul) {
	margin-bottom:0;
	margin-left:1.5em
}
:where(.postcontent img) {
	max-width:100%;
	height:auto;
}
:where(.postcontent p) {
	margin-bottom:1.5em;
}
:where(.postcontent h1, .postcontent h2, .postcontent h3, .postcontent h4, .postcontent h5, .postcontent h6) {
	color:rgb(30, 115, 190);
	color:var(--mainColor);
	font-size: 1.6em;
}
.postcontent li::marker {
	color:#a2b088;
	color:var(--mainColor);
	font-weight:700;
}


.wordsWithPic {
	display:block;
}
.wordsWithPic > :where(.left, .right) {
	display:block;
	border:1px dashed #000;
}
@media (min-width: 640px) and (orientation: landscape) {
	.wordsWithPic {
		display:flex;
	}
	.wordsWithPic > :where(.left, .right) {
	}
}
/*
has-media-on-the-right
is-stacked-on-mobile
is-vertically-aligned-top

wp-block-media-text
is-stacked-on-mobile
is-vertically-aligned-top
*/

.alignnone {
    margin: 5px 20px 20px 0;
	display:block;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.wp-block-columns {
	align-items:normal;
	box-sizing:border-box;
	display:flex;
	flex-wrap:wrap;
	gap:2em;
	line-height:1.5;
	font-weight:400;
}
.wp-block-column.is-vertically-aligned-center {
	align-self: center;
}
.wp-block-column.is-vertically-aligned-top {
    align-self: flex-start;
}
.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {
	max-width: 100%;
	height: auto;
}
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
	flex-basis:0;
	flex-grow:1;
}
@media (max-width: 781px) {
	:where(.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column) {
		flex-basis:100%!important;
	}
}
@media (min-width: 782px) {
    .wp-block-columns {
        flex-wrap:nowrap;
    }
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis] {
		#flex-basis:unset!important;
	}
}



.wp-block-media-text {
	direction:ltr;
	display:grid;
	grid-template-rows:auto;
	grid-template-columns:100%;
}
.wp-block-media-text__media {
	grid-column: 1;
	grid-row: 1;
}
.wp-block-media-text__content {
	grid-column:1;
	grid-row:2;
	direction: ltr;
	padding: 0 8%;
	word-break: break-word;
}
.wp-block-media-text__media img {
	height:auto;
	max-width:unset;
	vertical-align:middle;
	width:100%;
}
@media (min-width: 640px) and (orientation: landscape) {
	.wp-block-media-text {
		grid-template-columns:50% 1fr;
	}
	.wp-block-media-text.has-media-on-the-right {
		grid-template-columns:1fr 50%;
	}
	.wp-block-media-text__content {
		grid-column:2;
		grid-row:1;
	}
	.wp-block-media-text__media {
		grid-column:1;
		grid-row:1;
	}
	.has-media-on-the-right .wp-block-media-text__content {
		grid-column:1;
		grid-row:1;
	}
	.has-media-on-the-right .wp-block-media-text__media {
		grid-column:2;
		grid-row:1;
	}
}

.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.aligncenter, .wp-block-image.alignleft, .wp-block-image.alignright {
	display:table;
}
.wp-block-image.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.wp-block-gallery {
	display:flex;
	flex-wrap:wrap;
	gap:1px;
	align-items:normal;
	margin:0;
	width:100%;
}
.wp-block-gallery.alignleft {
	justify-content:start;
}
.wp-block-gallery.alignright {
	justify-content:end;
}
.wp-block-gallery.aligncenter {
	justify-content:center;
}
.wp-block-gallery .wp-block-image {
	aspect-ratio:1;
	width:calc((100% - 1px) / 2);
	overflow:hidden;
}
.wp-block-gallery .wp-block-image img {
	height: 100%;
	object-fit:cover;
	object-position:center;
	width: 100%;
}
.blocks-gallery-caption {
	width:100%;
	order:-1;
	font-size:29px;
	color:var(--mainColor);
	font-weight:300;
	background-color:#fff;
	position:sticky;
	top:calc(var(--fontsize) * 4);
}
@media (min-width: 640px) and (orientation: landscape) {
	.wp-block-gallery .wp-block-image {
		width:calc((100% - 2px) / 3);
	}
}
@media (min-width: 1240px) and (orientation: landscape) {
	.wp-block-gallery .wp-block-image {
		width:calc((100% - 4px) / 5);
	}
}

:where(.wp-block-group.has-background) {
	padding:30px;
}
:where(.wp-block-group.has-background p) {
	margin-bottom: 1.5em;
}
@media (min-width: 640px) or (orientation: landscape) {
	:where(.wp-block-group.has-background) {
		padding:40px;
	}
}

:where(.postcontent table:not(:has(thead))),
:where(.postcontent table:not(:has(thead))) :where(tbody, thead, tr, td, th) {
	display:block;
}
:where(.postcontent table, .postcontent td, .postcontent th) {
	border:0 solid #fff;
}
:where(.wp-block-table) {
	max-width:100%;
}
:where(.postcontent table:has(thead)) {
	display:block;
}
:where(.postcontent table) {
	overflow-x:auto;
	-webkit-overflow-scrolling:touch; /* 手機上滑動順暢 */
	border:0 solid rgba(0, 0, 0, .1);
	#border-width:1px 0 0 1px;
	margin:0 0 1.5em;
}
:where(.postcontent table:has(thead)) :where(thead, tbody) {
	display:table;
}
:where(.postcontent thead, .postcontent tbody) {
	border-collapse:separate;
	border-spacing:0;
	margin:0;
	width:100%;
	#min-width:640px;
}
:where(.postcontent tr > *) {
	border-width:0 1px 1px 0;
	background-color:var(--mainColor);
	background-image:linear-gradient(to bottom, #ffffffdd, #ffffffdd);
	min-width:10em;
}
:where(.postcontent tr > *:nth-child(1)) {
	#white-space:nowrap;
}
:where(.postcontent tr > *:first-child) {
	position:sticky;
	left:0;
	z-index:2;
	#background-color:#fff;
	background-image:linear-gradient(to bottom, #ffffff66, #ffffff66);
	color:var(--mainFColor);
}
:where(.postcontent tr:first-child > *:first-child) {}
:where(.postcontent thead tr > *:first-child) {
	background-image:linear-gradient(to bottom, #ffffffdd, #ffffffdd);
	color:var(--mainColor);
}
:where(.postcontent td, .postcontent th) {
	padding:8px;
}

.has-inline-color {
	background-image:linear-gradient(to bottom, #fff 0%, #fff 40%, #ffffff00 90%);
	line-height:normal;
	mix-blend-mode:multiply;
}
@media (min-width: 640px) or (orientation: landscape) {
	:where(.postcontent table) {
		display:table;
		overflow-x:auto;
	}
	:where(.postcontent thead) {
		display:table-header-group;
		border-collapse:separate;
	}
	:where(.postcontent tbody) {
		display:table-row-group;
		#border-collapse:separate;
	}
	:where(.postcontent tr) {
		display:table-row;
	}
	:where(.postcontent tr > *) {
		display:table-cell;
	}
}














.docLists .catlist1.sub {
	flex-wrap:wrap;
}
.docLists .catlist1 li:after {
	content:'';
	position:absolute;
	display:block;
	inset:100% 0 auto;
	border:1px solid #000;
	border-style:none solid;
	background-color:#fff;
}

.categs > li {
	overscroll-behavior:none;
}

.docLists .topost .date:after {
	content:none;
}
.docLists .topost .tags {
	position:absolute;
	inset:auto 1em 1em;
	width:100%;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	font-size:70%;
}
.docLists .topost .tags li {
	display:inline-block;
	line-height:1.6;
	padding:0.5em;
	border:1px solid var(--subColor1);
	border-radius:2em;
}
.docLists .topost .tags li:not(:last-child) {
	margin-right:.5em;
}


.blogShow {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	background:#fedd5929 radial-gradient(circle at left bottom, #ffeeb7, transparent 40%);
	padding-block:3em;
}
.blogShow h2 {
	font-size:1.4em;
}
.blogShow .topiner {
	font-size:5vw;
	padding:2em;
	text-align:center;
	width:100%;
	--sechH:2em;
}

.blogShow .topiner.bot {
	max-width:640px;
}
.blogShow .topiner .siner {
	position:relative;
	margin:1em .5em .5em;
	padding:.5em;
}
.blogShow .topiner input:not(:checked) ~ .search .siner {
	margin-top:-10em;
}
.blogShow .topiner .sinput {
	position:relative;
	display:block;
	height:var(--sechH);
	overflow:hidden;
	border:1px solid #888;
	border-radius:calc(var(--sechH) / 2);
	margin-bottom:.5em;
}
.blogShow .topiner .siner:hover .sinput {
	border-color:var(--hovcolor);
}
.blogShow .topiner .sinput input {
	position:absolute;
	inset:-2px;
	border:none;
	padding:calc((var(--sechH) - 1em) / 2) var(--sechH);
}
.blogShow .topiner .ssub:before {
	position:absolute;
	display:block;
	content:"🔍️";
	line-height:1;
	inset:auto;
}
.blogShow .topiner .ssub {
	position:absolute;
	inset:0 0 auto auto;
	height:calc(var(--sechH) + 1em);
	border-radius:50%;
	aspect-ratio:1;
	display:flex;
	justify-content:center;
	align-items:center;
}
.blogShow .topiner .ssub input {
	display:none;
}
.blogShow .topiner .siner:not(:hover) .recom {
	display:none;
}
.blogShow .topiner .recom {
	position:absolute;
	inset:3em 0 auto 0;
	display:block;
	overflow-y:auto;
	max-height:12em;
	background-color:#fff;
	border-radius:1em;
	box-shadow:0 .5em 1em #00000044;
	z-index:2;
}
.blogShow .topiner .recom li {
	display:block;
	text-align:left;
}
.blogShow .topiner .recom a {
	display:block;
	padding:.5em 1em;
	text-decoration:none;
	white-space:nowrap;
	text-overflow:ellipsis;
	line-height:var(--sechH);
	color:#888;
}
.blogShow .topiner .recom a:hover {
	color:var(--hovcolor);
}
.blogShow strong {
	font-weight:300;
}
.blogShow .topics {
	display:flex;
	justify-content:start;
	align-items:center;
	flex-wrap:wrap;
	list-style:none;
	gap:1px;
	max-width:320px;
}
.blogShow .topics a {
	position:relative;
	display:block;
	text-decoration:none;
	width:320px;
	max-width:100%;
	aspect-ratio:1;
	overflow:hidden;
}
.blogShow .topics img {
	position:absolute;
	display:block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.blogShow .topics h3 {
	position:absolute;
	inset:auto 0 0 0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	background:#00000088;
	color:#fff;
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:ease;
	padding:.5em;
	line-height:1;
}
.blogShow .topics small {
	position:absolute;
	inset:0;
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:ease;
	background:#00000088;
	color:#fff;
	padding:1em .5em;
}
.blogShow .topics b {
	display:block;
	margin-bottom:1em;
}
.blogShow .topics span {
	position:absolute;
	display:block;
	inset:auto 0 0 auto;
	width:fit-content;
}
.blogShow .topics li:after {
	position:absolute;
	display:block;
	inset:auto 0 0 auto;
	width:fit-content;
	content:'';
}
.blogShow .topics li:not(:hover) a {
	pointer-events:none;
}
.blogShow .topics li:hover h3 {
	transform:translateY(2em);
}
.blogShow .topics li:not(:hover) small {
	transform:translateY(100%);
}
@media (min-width: 640px), (orientation: landscape) {
	.blogShow .topiner {
		font-size:max(var(--fontsize), 1.3vw);
	}
}
@media screen and (min-width:700px) {
	.blogShow .topics {
		max-width:641px;
	}
}
@media screen and (min-width:1200px) {
	.blogShow .topics {
		max-width:962px;
	}
}
@media screen and (min-width:1440px) {
	.blogShow .topics {
		max-width:1283px;
	}
}