@charset "utf-8";
/*

**-- CNT CSS
*/

/*-- フロント設定 -----------------------------------------------*/

/* トップメニュー */
body {
	--maxW:100vw;
	--maxLR:calc((100vw - var(--maxW)) / 2);
	--hovcolor:#5BF;
	--fontsize:16px;
	--menuW:calc(var(--fontsize) * 4);
	--menuH:calc(var(--fontsize) * 4);
	text-align:justify;
	--mainColor:#5F4A8B;
	--mainFColor:#FFFFFF;
	--subColor1:#ffaa00;
	--subColor2:#E25D3E;
	--buttonLinear:linear-gradient(90deg, var(--subColor1), var(--subColor2));
	--buttonFColor:#FFFFFF;
	--bubColor1:#DDC18F;
	--bubColor2:#B1915E;
	--bubbleLinear:linear-gradient(90deg, var(--bubColor1), var(--bubColor2));
	font-family: "PingFang TC", /* macOS / iOS 蘋方繁體 */
	"Microsoft JhengHei", /* Windows 微軟正黑體 */
	"PingFang SC", /* macOS / iOS 蘋方簡體（防萬一） */
	"Hiragino Sans GB", /* macOS 舊版簡體字體 */
	"Heiti TC", /* macOS 舊版黑體 */
	"Noto Sans CJK TC", /* Google Noto Sans 繁體 */
	"Source Han Sans TC", /* 思源黑體 繁體 */
	sans-serif;
}
@media screen and (min-width:1800px) {
	body {
		--maxW:90vw;
	}
}

.mainSec {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}
.mainSec > .outframe {
	display:block;
	width:100%;
	max-width:var(--maxW);
}
.mainSec > .outframe.outer {
	max-width:none;
	padding-inline:var(--maxLR);
}
.gotoop {
	position:sticky;
	inset:auto 0 0 auto;
	list-style:none;
	z-index:9;
}
.gotoop .pot {
	border-radius:50%;
	position:absolute;
	inset:auto var(--fontsize) var(--fontsize) auto;
	background:#36479b;
	color:#fff;
	line-height:1;
	font-size:6vw;
	padding:1em;
}
@media screen and (min-width:600px) {
	.gotoop .pot {
		font-size:1.5vw;
		right:max(var(--fontsize), calc(env(safe-area-inset-left) / 2 - 5em / 2));
		bottom:max(var(--fontsize), env(safe-area-inset-left));
	}
	.gotoop .pot:hover {
		background:var(--hovcolor);
		cursor:pointer;
	}
}
.pageHeader {
	font-size:var(--fontsize);
	height:4em;
	position:sticky;
	top:0;
	z-index:9;
	--sechW:auto;
	--sechH:3em;
	--labmW:3em;
	--menuShadow:0 .1em .5em #00000044;
	background-color:var(--mainColor);
}
.pageHeader > div {
	position:absolute;
	inset:0 var(--maxLR) 0;
	#border-radius:0 0 1em 1em;
	#box-shadow:var(--menuShadow);
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:ease;
}
:where(.topLogo, .topMenu .button) {
	position:absolute;
}
.topLogo {
	inset:0 max(3%, env(safe-area-inset-left));
	right:auto;
	color:var(--mainFColor);
	font-size:min(4vw, 1.5em);
	font-weight:bold;
	display:flex;
	justify-content:center;
	align-items:center;
	text-decoration:none;
}
.topLogo span {
	display:block;
}
.topLogo img {
	height:100%;
}
.topMenu {
	position:absolute;
	inset:0 0 auto auto;
	pointer-events:none;
}
.topMenu * {
	display:block;
	pointer-events:auto;
}
.topMenu .button {
	--inerW:2em;
	--inerH:1em;
	inset:0 env(safe-area-inset-left) 0 auto;
	width:var(--menuW);
	height:var(--menuH);
}
.topMenu .button ul {
	position:absolute;
	inset:calc((var(--menuH) / 2) - 1px) calc((var(--menuW) - var(--inerW)) / 2);
	left:auto;
	width:var(--inerW);
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:ease;
}
.topMenu input:not(:checked) ~ .button ul {
	transition-delay:.3s;
	inset:calc((var(--menuH) - var(--inerH)) / 2) calc((var(--menuW) - var(--inerW)) / 2);
	left:auto;
}
.topMenu .button li {
	position:absolute;
	width:var(--inerW);
	height:2px;
	background-color:var(--mainFColor);
	inset:0;
	margin:auto;
	transition-property:all;
	transition-delay:.3s;
	transition-duration:.3s;
	transition-timing-function:ease;
}
.topMenu .button:hover {
	color:var(--hovcolor);
}
.topMenu .button:before {
	transition-property:all;
	transition-duration:.3s;
}
.topMenu .button:hover li {
	background-color:var(--hovcolor);
}
.topMenu .button li:nth-child(1) {
	margin-top:0;
	transform:rotate(225deg);
}
.topMenu .button li:nth-child(2) {
	transform:rotate(225deg);
}
.topMenu .button li:nth-child(3) {
	margin-bottom:0;
	transform:rotate(315deg);
}
.topMenu input:not(:checked) ~ .button li {
	transition-delay:0s;
	transform:rotate(0deg);
}
.topMenu input[type='checkbox'] {
	display:none;
}
.topMenu .shadow {
	position:absolute;
	inset:0 0 auto auto;
	width:100vw;
	height:100vh;
	background:#00000088;
	pointer-events:auto;
	transition-property:all;
	transition-delay:.3s;
	transition-duration:.3s;
	transition-timing-function:ease;
}
.topMenu input:not(:checked) ~ .shadow {
	background:#00000000;
	transition-delay:0s;
	pointer-events:none;
}
.topMenu .menu {
	position:absolute;
	inset:0 0 auto auto;
	overflow-x:hidden;
	overflow-y:auto;
	width:100vw;
	max-width:500px;
	background:#fff;
	transition-property:all;
	transition-delay:.3s;
	transition-duration:.3s;
	transition-timing-function:ease;
}
.topMenu .menu ol {
	padding:6em 0 var(--menuH) 0;
	width:100vw;
	height:100vh;
	max-width:500px;
}
.topMenu :where(input:not(:checked)) ~ .menu {
	transition-delay:0s;
	width:0;
}
.topMenu .menu li {
	border-width:1px;
	border-color:#ccc;
}
.topMenu .menu li:not(:first-child) {
	border-top-style:solid;
}
.topMenu .menu a {
	padding:1em 1em 1em 3em;
	color:#333;
	text-decoration:none;
	line-height:1;
}
.topMenu .menu a:hover {
	color:var(--hovcolor);
}
.topSearch {
	position:absolute;
	inset:0 env(safe-area-inset-left) 5em auto;
	background-color:#f00;
}
.topSearch * {
	display:block;
	color:#888;
}
.topSearch .button:before,
.topSearch .ssub:before {
	position:absolute;
	display:block;
	content:'';
	line-height:1;
	inset:auto;
	width:1.3em;
	aspect-ratio:1;
	background:url('/img/search_w.svg');
}
.topSearch .ssub:before {
	background:url('/img/search_p.svg');
}
.topSearch input[type='checkbox'] {
	display:none;
}
.topSearch .button {
	position:absolute;
	inset:0 var(--menuW) auto auto;
	width:var(--menuW);
	height:var(--menuH);
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:ease;
}
.topSearch .search {
	position:absolute;
	inset:var(--menuH) 0 auto max(-500px, calc(-100vw + (env(safe-area-inset-left) + env(safe-area-inset-right))));
	width:var(--sechW);
	overflow:hidden;
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:ease;
}
.topSearch .siner {
	position:relative;
	margin:1em .5em .5em;
	padding:.5em;
	background-color:var(--mainColor);
	border-radius:1em;
	box-shadow:var(--menuShadow);
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:ease;
}
.topSearch input:not(:checked) ~ .search .siner {
	margin-top:-10em;
}
.topSearch .sinput {
	position:relative;
	display:block;
	height:var(--sechH);
	overflow:hidden;
	border:1px solid #888;
	border-radius:calc(var(--sechH) / 2);
	#margin-bottom:.5em;
}
.topSearch .siner:hover .sinput {
	border-color:var(--hovcolor);
}
.topSearch .sinput input {
	position:absolute;
	inset:-2px;
	border:none;
	padding:calc((var(--sechH) - 1em) / 2) var(--sechH);
}
.topSearch .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;
}
.topSearch .ssub input {
	display:none;
}
.topSearch .recom {
	display:flex;
	justify-content:center;
	align-items:center;
	overflow-x:auto;
}
.topSearch .recom li {
	display:block;
}
.topSearch .recom a {
	display:block;
	padding:0 1em;
	text-decoration:none;
	white-space:nowrap;
	text-overflow:ellipsis;
	line-height:var(--sechH);
}
.topSearch .recom a:hover {
	color:var(--hovcolor);
}
@media screen and (min-width:500px) {
	.pageHeader {
		--menuW:5em;
	}
	.topMenu .button {
		width:calc(var(--menuW) + var(--labmW));
	}
	.topMenu .button:before {
		position:absolute;
		content:'MENU';
		color:var(--mainFColor);
		line-height:1;
		inset:calc((var(--menuH) - 1em) / 2) auto auto .5em;
	}
	.topSearch .button {
		right:calc(var(--menuW) + var(--labmW));
	}
}
@media ((min-width:800px) and (min-height:600px)) or (min-width:1440px) {
	body {
		--menuW:calc(var(--fontsize) * 4);
		--menuH:calc(var(--fontsize) * 4);
	}
	.pageHeader {
		#height:6em;
		--sechW:16em;
		--sechH:2em;
	}
	.topSearch {
		right:max(3%, env(safe-area-inset-left));
	}
	.topSearch .button {
		top:-1em;
		height:1em;
	}
	.topSearch .search {
		inset:0 calc(var(--menuW) + var(--labmW)) auto auto;
	}
	.topSearch .siner,
	.topSearch input:not(:checked) ~ .search .siner {
		margin-top:.5em;
		margin-bottom:0;
		box-shadow:0 0 0 #00000000;
	}
}
@media screen and (min-width:800px) {
	.topMenu .menu ol {
		padding-top:7em;
	}
	.topMenu .button {
		right:max(3%, env(safe-area-inset-left));
	}
	.topMenu .button ul {
		left:auto;
		width:2em;
	}
	.topMenu .button:before {
		#inset:2.5em auto auto .5em;
	}
	.topMenu input:not(:checked) ~ .button ul {
		#inset:2.5em 2em;
		left:auto;
	}
}
@media screen and (min-width:1440px) {
	.topMenu {
		right:max(3%, env(safe-area-inset-left));
		right:auto;
		left:24em;
	}
	.topMenu .button {
		pointer-events:none;
		opacity:0;
	}
	.topMenu .shadow {
		background:#00000000;
		transition-delay:0s;
		pointer-events:none;
	}
	.topMenu * ~ .menu {
		#inset:.5em var(--sechW) auto auto;
		inset:.5em auto auto 0;
		overflow:auto;
		width:auto;
		max-width:none;
		background:var(--mainColor);
		position: fixed;
    left: 50%;
    transform: translateX(-50%);
	}
	.topMenu .menu ol {
		padding:0;
		width:max-content;
		height:auto;
		max-width:none;
	}
	.topMenu .menu li {
		float:left;
		padding:0;
		border:0;
	}
	.topMenu .menu a {
		padding:1em .5em;
		color:#fff;
	}
	.topSearch .search {
		right:0;
	}
}

.subFooter {
	font-size:5vw;
	background:#faf7f2;
}
.subFooter .outframe {
	padding:3em 0 8em;
}
.subFooter h2 {
	font-size:130%;
	text-align:center;
	font-weight:normal;
	color:var(--subColor1);
}
.subFooter .word {
	display:block;
	text-align:center;
	font-size:80%;
	padding:1em 0;
}
.subFooter .word li {
	display:block;
}
.subFooter .bubble {
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:80%;
	margin-bottom:1em;
}
.subFooter .bubble .bk {
	display:block;
	position:absolute;
	inset:0;
}
.subFooter .bubble .bk svg {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.subFooter .bubble .bk .bubbleC1 {
	stop-color:var(--bubColor1);
}
.subFooter .bubble .bk .bubbleC2 {
	stop-color:var(--bubColor2);
}
.subFooter .bubble .bk path {
	#fill:var(--bubbleLinear);
}
.subFooter .bubble .wd {
	position:relative;
	display:block;
	line-height:3.5;
	color:var(--buttonFColor);
	text-shadow:0 .1em .15em #00000088;
}
.subFooter .menu {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:.7em;
	flex-wrap:wrap;
	padding-bottom:3em;
	font-size:3.5vw;
}
.subFooter .menu li {
	display:block;
}
.subFooter .menu .img {
	position:relative;
	aspect-ratio:1;
	border-radius:50%;
	width:8em;
	overflow:hidden;
	box-shadow:2px 2px 4px #00000055;
}
.subFooter .menu .img img {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.subFooter .menu .svg {
	position:relative;
	aspect-ratio:1;
	border-radius:50%;
	width:8em;
	background-color:#fff;
	overflow:hidden;
	border:.1em solid var(--mcolor);
}
.subFooter .menu .svg svg {
	position:absolute;
	width:70%;
	inset:45% 0 auto;
	margin:0 auto auto;
}
.subFooter .menu .svg p {
	position:absolute;
	width:70%;
	inset:auto 0 55%;
	margin:auto auto 0;
	font-size:3vw;
	text-align:center;
	padding-block:.5em;
	line-height:1;
}
.subFooter .menu a {
	position:relative;
	display:block;
	color:#000;
}
.subFooter .menu a:before {
	content:'';
	position:absolute;
	inset:0 0 -3em 0;
	display:block;
}
.subFooter .menu h3 {
	position:absolute;
	background:var(--buttonLinear);
	color:var(--mainFColor);
	line-height:1;
	padding:.5em 2em .5em 1em;
	border-radius:1em;
	inset:auto 0 -.5em 0;
	margin:auto;
	width:fit-content;
}
.subFooter .menu h3 img {
	position:absolute;
	display:block;
	width:auto;
	height:66%;
	inset:0 .5em 0 auto;
	margin:auto 0;
}
.subFooter .menu small {
	position:absolute;
	display:block;
	inset:calc(100% + 1em) 0 auto 0;
	margin:auto;
	width:fit-content;
	font-size:80%;
}
.subFooter .menu h4 {
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	background:#00000088;
	inset:0;
	color:#fff;
	font-size:60%;
}
.subFooter .menu .ribbon {
	position:relative;
	color:#000;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:.5em;
	height:auto;
}
.subFooter .menu .ribbon div {
	position:relative;
	padding:.5em 0 .7em;
	line-height:1;
}
.subFooter .menu .ribbon svg {
	position:absolute;
	inset:auto;
	width:auto;
	height:100%;
}
.subFooter .menu .ribbon svg path {
	fill:#ffc1b6;
	fill-rule:evenodd;
}
.subFooter .menu .ribbon svg path:first-child {
	display:none;
}
.subFooter .menu h4 .pen {
	color:#fedcae;
}
.subFooter .menu h4 .big {
	font-size:120%;
}
@media (min-width: 640px) and (orientation: landscape) {
	.subFooter {
		font-size:min(var(--fontsize), 1.2vw);
	}
	.subFooter .outframe {
		padding:5em 0 10em;
	}
	.subFooter h2 {
		font-size:160%;
	}
	.subFooter .word {
		font-size:140%;
	}
	.subFooter .bubble {
		font-size:140%;
	}
	.subFooter .menu {
		gap:2em;
		padding-bottom:0;
		font-size:inherit;
		padding:3em 0;
	}
	.subFooter .menu .svg,
	.subFooter .menu .svg * {
		transition:all .3s cubic-bezier(.22,.61,.36,1);
	}
	.subFooter .menu .svg {
		width:16em;
		border-width:2.5px;
		box-shadow:2px 2px 4px #00000055;
	}
	.subFooter .menu .svg p {
		font-size:120%;
	}
	.subFooter .menu .svg:hover {
		box-shadow:0 0 0 #00000000;
		background-color:var(--mcolor);
	}
	.subFooter .menu .svg:hover p {
		color:#ffffff;
	}
	.subFooter .menu .svg:hover svg * {
		fill:#ffffff;
	}
	.subFooter .menu .img {
		box-shadow:0px 0px 0px #00000000;
		transition-property:all;
		transition-duration:.3s;
		transition-timing-function:ease;
		transform:scale(.97);
		#margin-bottom:0;
	}
	.subFooter .menu a:not(:hover) .img {
		transform:scale(.9);
		box-shadow:2px 2px 4px #00000055;
	}
	.subFooter .menu h3 {
		box-shadow:0px 2px 3px #00000088;
		transition-property:all;
		transition-duration:.3s;
		transition-timing-function:ease;
		transform:translate(-1px, -1px);
		font-size:150%;
	}
	.subFooter .menu a:not(:hover) h3 {
		box-shadow:0px 0px 0px #00000000;
		transform:translate(0px, 0px);
	}
	.subFooter .menu h4 {
		font-size:120%;
	}
	.subFooter .menu .img {
		width:16em;
	}
	.subFooter .menu small {
		font-size:100%;
	}
}

.outframe.flobutt {
	position:sticky;
	#top:20%;
	bottom:0;
	z-index:4;
	pointer-events:none;
	height:0;
}
.flobutt a {
	position: absolute;
#	border:1px dashed #000;
	display:block;
	text-decoration:none;
	color:var(--mainColor);
	text-align:center;
	font-weight:700;
	font-size:min(100%, 2.5vw, 2.5vh);
	overflow:hidden;
}
.flobutt .gototop {
	inset: -9em 0 0;
}
.flobutt .healthcheck {
	inset: -17em 0 9em;
}
.flobutt ol {
	position:relative;
	display:block;
	padding:.5em;
	width:fit-content;
	margin:auto 1em auto auto;
	pointer-events:all;
}
.flobutt .gototop ol {
	margin-top:1.5em;
}
.flobutt .gototop div {
	position:relative;
	width:2.2em;
	aspect-ratio: 1/1;
	border:.2em solid var(--mainColor);
	border-radius:1.1em;
	margin:auto 2.8em auto auto;
	background:#fff;
	pointer-events:all;
}
.flobutt .gototop b {
	display:block;
	position:absolute;
	inset:0;
	margin:auto;
	width:.9em;
	aspect-ratio:1;
	border:.2em solid var(--mainColor);
	border-color:var(--mainColor) var(--mainColor) transparent transparent;
	border-radius:.2em;
	transform:translateY(.2em) rotate(-45deg);
}
.flobutt .healthcheck ol {
}
.flobutt ol:before {
	content:'';
	position:absolute;
	inset:0;
	border-radius:50% 50% 0 50%;
	background:var(--mainColor);
}
.flobutt .gototop ol:before {
	transform:rotate(-135deg);
}
.flobutt .healthcheck ol:before {
	transform:rotate(45deg);
}
.flobutt li {
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	white-space:nowrap;
	background:var(--mainFColor);
	border-radius:50%;
	width:5em;
	aspect-ratio:1;
	vertical-align:middle;
}
.flobutt span {
	display:block;
	#padding-bottom:.5em;
}
@media (min-width: 640px) or (orientation: landscape) {
	.flobutt ol {
		margin-right:1em;
	}
}

.pageFooter {
	#background:linear-gradient(360deg, #0d1026, #37416c);
	background-color:var(--mainColor);
	color:#fff;
	padding:3em calc(var(--maxLR) + env(safe-area-inset-left));
	font-size:4vw;
	white-space:nowrap;
}
.pageFooter .outr {
	width:fit-content;
	margin-inline:auto;
}
.pageFooter .inner {
	display:flex;
	justify-content:center;
	align-items:start;
	flex-wrap:wrap;
	#gap:3em;
}
.pageFooter .hhead h2 {
	font-weight:700;
	font-size:150%;
	margin-bottom:.5em;
}
.pageFooter .hhead small {
	font-weight:500;
}
.pageFooter .hhead b:first-child {
	display:block;
	width:fit-content;
	margin-inline:auto;
}
.pageFooter .hhead b:last-child {
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:5em;
}
.pageFooter :where(ol, li),
.pageFooter :where(.sns, .menu) a  {
	display:block;
	text-decoration:none;
	color:inherit;
}
.pageFooter .secs {
	width:100%;
	border-top:1px solid var(--mainFColor);
	padding-block:2em;
}
.pageFooter .secs .head {
	border-bottom:1px solid var(--mainFColor);
	line-height:3em;
	font-weight:bold;
}
.pageFooter :where(.secs .head) {
	padding-inline:1em;
}
.pageFooter .profile li {
	line-height:2;
	padding-inline:1em;
}
.pageFooter .profile a {
	text-decoration:none;
	color:inherit;
}
.pageFooter .secs .head {
	margin-bottom:1em;
}
.pageFooter .profile .head b {
	font-size:150%;
	line-height:1;
}
.pageFooter .sns img {
	width:1.4em;
	margin-right:.5em;
	vertical-align:middle;
}
.pageFooter :where(.menu, .sns) a {
	padding:1em;
	position:relative;
}
.pageFooter :where(.menu, .sns) a:after {
	content:'';
	position:absolute;
	inset:0 1em 0 auto;
	display:block;
	margin:auto 0;
	width:.8em;
	height:.8em;
	line-height:0;
	border:.5em solid var(--mainFColor);
	border-color:var(--mainFColor) var(--mainFColor) #ffffff00 #ffffff00;
	transform:scaleY(0.5) rotate(45deg);
}

/*@media ((min-width:800px) and (min-height:340px)) or (min-width:1440px) {*/
@media (min-width: 640px) and (orientation: landscape) {
	.pageFooter {
		font-size:min(3vh, var(--fontsize));
	}
	.pageFooter .inner {
		flex-wrap:nowrap;
		padding:1em 0;
	}
	.pageFooter .hhead {
		display:flex;
		justify-content:space-between;
	}
	.pageFooter .hhead b:first-child {
		width:auto;
		margin-inline:unset;
	}
	.pageFooter .hhead b:last-child {
		font-size:150%;
		min-height:unset;
	}
	.pageFooter .secs {
		width:auto;
		padding:2em 3em 2em 0;
	}
	.pageFooter .secs .head {
		border-bottom:none;
	}
	.pageFooter .secs a {
		line-height:1;
	}
	.pageFooter .profile li,
	.pageFooter .secs .head {
		padding-inline:0;
	}
	.pageFooter .menu ol {
		display:flex;
		flex-wrap:wrap;
		max-width:24em;
	}
	.pageFooter .menu li {
		min-width:7em;
	}
	.pageFooter .menu a {
		width:100%;
	}
	.pageFooter .sns ol {
		max-width:15em;
	}
	.pageFooter :where(.menu, .sns) a:after {
		content:none;
	}
	.pageFooter :where(.menu) a {
		padding:.5em 0;
	}
	.pageFooter :where(.sns) a {
		padding:.3em 0;
	}
}


.pagetop .morepost {
	display:block;
	width:calc(14em * 3 + 2em);
	max-width:90%;
	padding:0;
	background:#e6e6e6;
	color:#666666;
	border-radius:1.5em;
	text-align:center;
	text-decoration:none;
	margin:auto;
}
.pagetop .morepost span {
	display:block;
	line-height:3;
	font-size:70%;
}


.lineTitle {
	position:relative;
	width:fit-content;
	margin-block:1.5em;
}
.lineTitle b {
	display:block;
	line-height:1;
	padding:1em 2.5em;
	font-size:120%
}
.lineTitle ol {
	display:block;
}
.lineTitle li {
	position:absolute;
	display:block;
	height:1.7em;
	inset:auto 0;
	border:1px none #000;
}
.lineTitle li:nth-child(1) {
	top:0;
	right:5em;
	border-top-style:solid;
	transform-origin:left bottom;
	transform:skewX(-45deg);
}
.lineTitle li:nth-child(2) {
	bottom:0;
	left:5em;
	border-bottom-style:solid;
	transform-origin:right top;
	transform:skewX(-45deg);
}
.lineTitle li:before {
	content:'';
	position:absolute;
	display:block;
	width:3px;
	height:100%;
	border:1px solid #000;
}
.lineTitle li:nth-child(1):before {
	border-top-style:none;
}
.lineTitle li:nth-child(2):before {
	border-bottom-style:none;
	inset-inline:auto 0;
}


.postList {
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:1em;
	max-width:1000px;
	margin-inline:auto;
	isolation:isolate;
}
.postList h3 {
	#width:calc(14em * 3 + 2em);
}
.postList > div {
	width:100%;
}
.postList .temp {
	#display:none;
	position:relative;
	height:1em;
	width:100%;
}
.postList .topost {
	display:block;
#	position:sticky;
	position:relative;
#	bottom:2em;
	text-decoration:none;
	width:14em;
	min-height:17em;
	overflow:hidden;
	border:.5px solid #000;
	border-radius:1.5em;
	box-shadow:.2em .3em 0 #00000011;
	margin-inline:auto;
	margin-bottom:1em;
}
.postList :where(.topost:nth-of-type(3n + 1)) {
#	transform:translate(calc(1 * .7em), calc(0 * -.5em));
}
.postList :where(.topost:nth-of-type(3n + 2)) {
#	transform:translate(calc(0 * .7em), calc(-1 * -.5em));
}
.postList :where(.topost:nth-of-type(3n)) {
#	transform:translate(calc(-1 * .7em), calc(-2 * -.5em));
}

@media (min-width: 640px) or (orientation: landscape) {
	.postList {
		display:flex;
	}
	.postList .temp {
		height:0;
	}
	.postList .head {
		display:block;
		width:calc(14em * 3 + 2em);
		max-width:90%;
	}
	.postList .topost {
		position:relative;
		transform:none;
		margin:0;
		top:0;
		bottom:0;
		font-size:min(100%, 2vw);
	}
	.postList .topost .img {
		position:relative;
	}
	.postList .topost > div.img > img {
		position:absolute;
		transition:all .3s cubic-bezier(.22,.61,.36,1);
		margin:auto;
		inset:-1em;
		max-width:none;
	}
	.postList .topost:hover > div.img > img {
		width:calc(100% + 2em);
		height:calc(100% + 2em);
		filter:brightness(.5);
	}
}


.pagetop .docLists {

}
.pagetop .docLists .head .allCate {
	display:none;
}
.docLists .lineTitle {
	margin-inline:auto;
}
.docLists .categs {
	display:flex;
	flex-wrap:wrap;
	margin:auto;
}
.docLists .categs > li {
	display:block;
	flex:1 1 auto;
	#min-width: max-content;
	padding:.5em;
	text-align:right;
}
.docLists .categs > li:nth-child(1) {
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}
.docLists .categs > li h4 {
	display:inline-block;
	padding:.5em 0;
	text-align:center;
	margin-inline:auto;
}
.docLists .categs > li.tags h4 {
	display:block;
	position:sticky;
	left:calc(50% - 4.5em);
	width:9em;
}
.docLists .catlist1 {
	display:flex;
	#justify-content:center;
	gap:.5em;
	padding:0 0 .5em;
}
.docLists .catlist1.main {
	overflow-x:auto;
	width:calc(100% - 3.5em);
	margin-inline:auto;
}
.docLists .catlist1 li {
	position:relative;
	display:block;
	white-space:nowrap;
}
.docLists .catlist1 :is(li[active], li:hover) a {
	border-color:var(--mainColor);
	background-color:var(--mainColor);
	color:var(--mainFColor);
}
.docLists .catlist1 :where(a, label),
.docLists .categs select,
.docLists .categs input {
	padding:1em;
	line-height:1;
	border:1px solid #000;
	border-radius:1.5em;
	color:#000;
	background-color:#fff;
	box-sizing:border-box;
	min-width:100px;
	height:3em;
}
.docLists .catlist1 :where(a, label) {
	display:block;
	text-decoration:none;
	text-align:center;
}
.docLists .categs select,
.docLists .categs input {
	padding:.5em 1em;
	max-width:9em;
	#margin:auto;
	#display:block;
}
.docLists .catlist1 label {
	cursor:pointer;
}
.docLists .catlist1 label input {
	display:none;
}
.docLists .catlist1 label:has(input:checked) {
	border-radius:1.5em 1.5em 0 0;
	border-bottom:none;
}
.docLists .catlist1 li:has(input:checked):after {
	height:calc(.5em);
}
.docLists .catlist1.sub:not(:empty) {
	border:1px solid #000;
	border-radius:1.5em;
	padding:.5em;
}
@media (min-width: 640px) or (orientation: landscape) {
	.docLists .catlist1.main {
		overflow-x:visible;
		width:calc(100% - 3.5em);
		margin-inline:auto;
	}
	.docLists .categs > li {
		text-align:center;
	}
	.docLists .catlist1 li:has(input:checked):after {
		height:calc(.5em + 1px);
	}
	.docLists .categs > li h4 {
		display:block;
	}
	.docLists .categs select,
	.docLists .categs input {
		max-width:12em;
	}
}




.docLists .postLibry {
	position:relative;
	display:flex;
	overflow-x:auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}
.docLists .postLibry input {
	position:absolute;
	inset:0;
	width:0;
	margin:auto;
	border:none;
}
.docLists .postLibry .topost {
	position:relative;
	display:block;
	flex:0 0 100%;
	scroll-snap-align:center;
	scroll-snap-stop:always;
	width:100%;
	overflow:hidden;
	max-width:1200px;
	aspect-ratio:4 / 3;
}
.docLists .postLibry .topost a {
	position:absolute;
	display:block;
	inset:2px;
}
.docLists .postLibry .underd {
	display:none;
	position:relative;
	width:0;
	z-index:1;
}
.docLists .postLibry .underd div {
	position:absolute;
	inset:0;
	margin:auto;
	line-height:1;
	padding:1em;
	width:3em;
	height:3em;
	border-radius:1.5em;
	background:#fff;
	cursor:pointer;
}
.docLists .postLibry .underd div:before {
	content:'';
	display:block;
	width:1em;
	height:1em;
	border:.3em solid #000;
	border-width:.3em .3em 0 0;
}
.docLists .postLibry .underd.left div {
	margin-right:1em;
}
.docLists .postLibry .underd.left div:before {
	transform:translateX(-.2em) rotate(45deg);
}
.docLists .postLibry .underd.right div {
	margin-left:1em;
}
.docLists .postLibry .underd.right div:before {
	transform:translateX(.2em) rotate(-135deg);
}
.docLists .postLibry .topost:empty {
	display:none;
	background-color:#fff;
}
.docLists .postLibry .img {
	position:relative;
	width:100%;
	height:100%;
}
.docLists .postLibry .img img {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.docLists .postLibry .words {
	position:absolute;
	display:block;
	inset:auto 0 0;
	background-color:#00000088;
	color:#fff;
	height:3em;
	width:100%;
}
.docLists .postLibry a:hover .words {
	#height:100%;
}
.docLists .postList {
	#max-width:1200px;
	width:90%;
	max-width:calc(14em * 3 + 2em);
	margin:auto;
}
.docLists .libDot {
	display:flex;
	justify-content:center;
}
.docLists .libDot label {
	display:block;
	padding:1em;
	color:#aaa;
	cursor:pointer;
}
.docLists .postLibry:has(:nth-child(1 of .chkt) input:checked) ~ .libDot :nth-child(1 of .underdot),
.docLists .postLibry:has(:nth-child(2 of .chkt) input:checked) ~ .libDot :nth-child(2 of .underdot),
.docLists .postLibry:has(:nth-child(3 of .chkt) input:checked) ~ .libDot :nth-child(3 of .underdot) {
	color:#000;
}
.docLists .postLibry:has(:nth-child(1 of .chkt) input:checked) .underd[for="doclib0"],
.docLists .postLibry:has(:nth-child(2 of .chkt) input:checked) .underd[for="doclib1"],
.docLists .postLibry:has(:nth-child(3 of .chkt) input:checked) .underd[for="doclib2"] {
	display:none;
}
.docLists .head {
	display:none;
	width:90%;
	max-width:calc(14em * 3 + 2em);
	padding:2em 0 1em;
	margin:auto;
}
.docLists .postList .foot {
	width:100%;
	padding:1em 0 2em;
}
.docLists .topost {
	text-decoration:none;
	color:#000;
	background:#fff;
}
.docLists .topost .img {
	width:100%;
	aspect-ratio:4 / 3;
}
.docLists .topost .img img {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.docLists .topost .words {
	aspect-ratio:4 / 2;
	padding:1em;
}
.docLists .topost h4 {
	font-weight:700;
	line-height: 1.4;
	height:2.8em;
	overflow:hidden;
	text-overflow:ellipsis;
}
.docLists .postLibry .topost h4 {
	white-space:nowrap;
	width:calc(100vw - 2em);
}
.docLists .topost .words .conts {

}
.docLists .topost .conts {
	display: none;
}
.docLists .topost .date {
	position:absolute;
	font-size:80%;
	padding:1em 0;
	inset:auto 1em .5em;
	line-height:1;
}
.docLists .topost .date:after {
	position:absolute;
	content:'＞';
	aspect-ratio:1;
	height:2em;
	padding:.5em 0;
	text-align:center;
	line-height:1;
	inset:auto 0 .5em auto;
	border:1px solid #aaa;
	color:#aaa;
	border-radius:1em;
}
@media (min-width: 640px) or (orientation: landscape) {
	.docLists .categs {
		max-width:1200px;
		overflow:hidden;
		flex-wrap:nowrap;
	}
	.docLists .catlist1 {
		display:flex;
		justify-content:center;
	}
	.docLists .catlist1 li {
		display:block;
		flex:0 1 auto; /* 可以平均分空間，但不會壓縮小於內容寬度 */
	}
	.docLists .postLibry .underd {
		display:block;
	}
	.docLists .catlist1 :where(a, label) {
		display:block;
	}
	.docLists .postLibry .topost {
		aspect-ratio:1920 / 700;
	}
	.docLists .postLibry .topost:empty {
		display:block;
		width:calc((100% - 1200px) / 2);
		flex:none;
	}
	.docLists .topost {
		#width:23em;
	}
	.docLists .topost .img {
		overflow:hidden;
	}
}

.pagetop .newsLists {
	position:relative;
	padding-block:3em 6em;
	overflow:hidden;
}
.newsLists:before {
	content:'';
	position:absolute;
	inset:0;
	display:block;
	background-image:url(/img/blockback.png);
	background-repeat:repeat;
}
.pagetop .newsLists.seeing:before {
	top:calc(-20em * (var(--center-pct)) / 100);
}
.newsLists .thistitle {
	padding-block:0 2em;
}
.newsLists .thistitle .lineTitle {
	margin:auto;
	width:20em;
	text-align:center;
}
.newsLists .postList {
	flex-direction:column;
}
.newsLists .postList .topost {
	position:relative;
	width:90%;
	inset:auto;
	margin:auto;
	transform:none;
}
.newsLists .topost {
	display:flex;
	flex-direction:column;
	background:#fff;
	color:#333333;
}
.newsLists .topost .img {
	flex-basis:55%;
	overflow:hidden;
}
.newsLists .topost .words {
	position:relative;
	flex-basis:45%;
	padding:2em;
}
.newsLists .topost .img img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.newsLists .topost b {
	display:block;
	height:fit-content;
	#width:12em;
	text-align:center;
	border-radius:1.5em;
	line-height:1;
	padding:.5em 1em;
	background:var(--buttonLinear);
	color:var(--buttonFColor);
	margin:1.5em auto 0;
}
.newsLists .topost :where(figure,blockquote) {
	display:block;
	margin:0;
}
.newsLists .topost blockquote p {
	color:var(--mainColor);
	font-size:120%;
	margin-bottom:.5em;
	font-weight:700;
}
@media (min-width: 640px) or (orientation: landscape) {
	.newsLists .topost {
		width:calc(14em * 3 + 2em);
		max-width:90%;
		flex-direction:row;
	}
	.newsLists .topost b {
		position:absolute;
		inset:auto 2em 2em;
		margin:auto;
		transition:all .2s cubic-bezier(.22,.61,.36,1);
	}
	.newsLists .topost:hover b {
		transform:translate(-2px, -2px) scale(1.1);
		box-shadow:2px 2px 2px #00000044;
	}
	.newsLists .topost b:after {
		position:absolute;
		content:'';
		background-image:url(/img/finger.svg);
		aspect-ratio:1;
		inset:2em auto auto 60%;
		opacity:0;
		width:2em;
		transition:all .2s cubic-bezier(.22,.61,.36,1);
	}
	.newsLists .topost:hover b:after {
		top:1em;
		opacity:1;
	}
}
@media (min-width: 1000px){
	.newsLists .thistitle .lineTitle{
		width:20em;
	}
	.lineTitle b{
		padding: 1em 2.5em;
    font-size: 150%;
	}
}

/*
.pageFooter .bottomLinks {
	margin-top:-4em;
	padding:0 1em;
}
.pageFooter .bottomLinks ul {
	display:grid;
	grid-template-columns:1fr;
	list-style:none;
}
.pageFooter .bottomLinks li {
	display:block;
	background:#fdc629;
	width:100%;
}
.pageFooter .bottomLinks .rblok {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	text-decoration:none;
	background-color:var(--backs);
}
.pageFooter .bottomLinks h2 {
	font-size:unset;
	text-align:left;
	padding:2.5em;
}
.pageFooter .bottomLinks a {
	padding:3em 1em;
}
.pageFooter .bottomLinks .grd {
	display:grid;
	width:100%;
	max-width:305px;
	grid-template-columns:1fr 3em;
	grid-template-areas:
	"a b"
	"c c";
}
.pageFooter .bottomLinks h2 b {
	display:block;
	font-size:160%;
	line-height:1.6;
}
.pageFooter .bottomLinks h2 span {
	display:inline-block;
}
.pageFooter .bottomLinks h2 small {
	display:block;
	margin-top:1em;
}
.pageFooter .bottomLinks .grd .img {
	grid-area:a;
	display:flex;
	justify-content:start;
	align-items:center;
}
.pageFooter .bottomLinks .grd .img img {
	display:block;
	max-width:70%;
	width:183px;
}
.pageFooter .bottomLinks .grd .img b {
	display:inline-block;
	text-align:left;
	font-size:130%;
}
.pageFooter .bottomLinks .grd .arow {
	grid-area:b;
	display:flex;
	justify-content:center;
	align-items:center;
}
.pageFooter .bottomLinks .grd .arow:before {
	position:relative;
	display:block;
	content:'→';
	line-height:1;
	padding:.5em;
	font-weight:bold;
	font-style:normal;
	background:#5c6bbf;
	color:#fff;
	border-radius:50%;
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:ease;
}
.pageFooter .bottomLinks .rblok:hover .arow:before {
	background:var(--hovcolor);
}
.pageFooter .bottomLinks .grd .spell {
	grid-area:c;
	padding:.5em 0 0;
}
.pageFooter .bottomLinks .grd .spell {
}
.pageFooter .bottomLogo {
	position:relative;
}
.pageFooter .bottomLogo .logo {
	display:flex;
	justify-content:center;
	align-items:center;
	height:10em;
}
.pageFooter .bottomLogo img {
	max-width:200px;
	display:block;
}
.pageFooter .bottomMenu {
	padding:0 1em;
}
.pageFooter .bottomMenu .wrap {
	display:grid;
	width:100%;
	list-style:none;
	grid-template-columns:1fr;
	grid-template-areas:
	"a"
	"b"
	"c";
}
.pageFooter .bottomMenu .menuW .menu {
	list-style:none;
	padding:1em 0;
}
.pageFooter .bottomMenu .menuW a {
	display:block;
	text-decoration:none;
	color:#fff;
	padding:1.5em 1em;
	line-height:1;
	border:1px none #fff;
	text-align:center;
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:ease;
}
.pageFooter .bottomMenu .menuW a:hover {
	color:var(--hovcolor);
}
.pageFooter .bottomMenu .menuW :where(.menu > li:not(:first-child)) a {
	border-top-style:solid;
}
.pageFooter .bottomMenu .snsButtons {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	grid-area:c;
}
.pageFooter .bottomMenu .snsButtons .menu {
	display:grid;
	list-style:none;
	width:100%;
	max-width:350px;
	gap:1.5em;
	padding:2em 1.5em;
	grid-template-columns:1fr 1fr 1fr 1fr;
	grid-template-areas:
	"a b c d";
}
.pageFooter .bottomMenu .snsButtons .menu a {
	position:relative;
	display:block;
	text-decoration:none;
}
.pageFooter .bottomMenu .snsButtons .menu a:before {
	position:absolute;
	display:block;
	content:'';
	inset:50%;
	border-radius:50%;
	width:0;
	aspect-ratio:1;
	transition-property:all;
	transition-duration:.1s;
	transition-timing-function:ease;
	background:var(--hovcolor);
	opacity:0;
}
.pageFooter .bottomMenu .snsButtons .menu a:hover:before {
	width:130%;
	inset:-15%;
	opacity:.5;
}
.pageFooter .bottomMenu .snsButtons img {
	position:relative;
	display:block;
	width:100%;
}
.pageFooter .copyright {
	width:100%;
	font-size:75%;
	color:#aaa;
	text-align:center;
}
.pageFooter .copyright a {
	display:block;
	text-decoration:none;
	margin:1em 0 1em;
	color:inherit;
	border:1px solid #666;
	border-radius:.5em;
	padding:1em;
}

@media screen and (min-width:650px) {
	.pageFooter .bottomLinks h2 small {
		text-align:center;
		margin-top:.5em;
	}
	.pageFooter .bottomLinks .grd .arow:before {
		font-size:120%;
	}
	.pageFooter .bottomLinks .rblok:hover .arow:before {
		font-size:140%;
	}
	.pageFooter .bottomMenu {
		padding:2em 1em 0;
	}
	.pageFooter .bottomMenu .wrap {
		grid-template-columns:200px 1fr;
		grid-template-areas:
		"a b"
		"c c";
	}
	.pageFooter .bottomMenu .menuW {
		display:flex;
		justify-content:start;
		align-items:center;
	}
	.pageFooter .bottomMenu .menuW .menu {
		display:flex;
		justify-content:start;
		align-items:center;
		flex-wrap:wrap;
		padding:0;
		height:6em;
		max-width:22em;
	}
	.pageFooter .bottomMenu .menuW li {
		width:50%;
	}
	.pageFooter .bottomMenu .menuW a {
		padding:0 1em;
		line-height:1.5;
		text-align:left;
		font-size:90%;
	}
	.pageFooter .bottomMenu .menuW .menu a {
		border:none;
	}
	.pageFooter .bottomLogo .logo {
		height:9em;
	}
	.pageFooter .bottomLogo img {
		width:80%;
		max-width:none;
	}
	.pageFooter .bottomMenu .snsButtons{
		justify-content:start;
	}
	.pageFooter .bottomMenu .snsButtons .menu {
		display:flex;
		padding-bottom:0;
	}
	.pageFooter .bottomMenu .snsButtons img {
		width:2em;
	}
	.pageFooter .copyright {
		text-align:left;
		padding:0 1em;
	}
	.pageFooter .copyright a {
		display:inline-block;
		text-decoration:none;
		color:inherit;
		border:none;
		border-radius:.5em;
	}
	.pageFooter .copyright a:hover {
		color:var(--hovcolor);
	}
}
@media screen and (min-width:800px) {
	.pageFooter .bottomLinks {
		padding:0 5%;
	}
	.pageFooter .bottomMenu {
		padding:2em 5% 0;
	}
	.pageFooter .bottomLinks ul {
		grid-template-columns: repeat(2, 1fr);
	}
	.pageFooter .bottomLinks li:first-child {
		grid-column: span 2;
	}
	.pageFooter .bottomLinks .grd {
		max-width:375px;
	}
	.pageFooter .bottomLinks .grd .img {
		text-align:center;
		height:3em;
	}
}
@media screen and (min-width:1000px) {
	.pageFooter .bottomLinks .grd {
		grid-template-areas:
		"a b"
		"c b";
	}
	.pageFooter .bottomLinks .grd .img img {
		max-width:none;
	}
	.pageFooter .bottomMenu .wrap {
		grid-template-columns:200px 1fr 1fr;
		grid-template-areas:
		"a b c";
	}
	.pageFooter .bottomMenu .snsButtons {
		justify-content:end;
	}
	.pageFooter .bottomMenu .snsButtons .menu {
		justify-content:end;
	}
	.pageFooter .copyright {
		text-align:right;
	}
}
@media screen and (min-width:1400px) {
	.pageFooter .bottomMenu .wrap {
		grid-template-columns:300px 1fr 300px;
	}
	.pageFooter .bottomMenu .menuW .menu {
		max-width:36em;
	}
	.pageFooter .bottomMenu .menuW li {
		width:33%;
	}
}
*/