:root {


	--pink-color: #E08686;
	--pink-color: #ea5454;
	--purple-color: #464B9A;
	--yellow-color: rgba(255, 180, 0, 1);
	--yellow-opacity: rgba(255, 180, 0, 0.1);
	--yellow-line: rgba(255, 180, 0, 0.55);

	--blue-color: #1A9EA1;
	--green-color: #91A725;

	--black-hover: #2a2b2e;
	--black-bk: #1c1c1c;

	--black-active: #444950;
	--black-checked: #9199a5;


	font-size: 16px;

	/* 12px */
	--fs-xs: 0.75rem;
	/* 14px */
	--fs-s: 0.875rem;
	/* 16px */
	--fs-m: 1rem;
	/* 20px */
	--fs-l: 1.25rem;
	/* 36px */
	--fs-xl: 2rem;
	/* 40px */
	--fs-xxl: 2.5rem;

	--color-bk: black;
	--color-opacity: rgba(24, 26, 31, 0.9);
	--color-key: #464B9A;
	--color-active: #babbc7;
	--color-hover: #40414e;
	--hcolor-k: #545460;
	--tcolor-k: #333;
	--tcolor-w: #fff;
	--lcolor-w: #c1c1c1;

	--icon-tool: 20px;
	--icon-r: 0.25rem;
	--img-r: 8px;

	--side-s: 1.25rem;

	--pad-l: 90px;
	--pad-def: 60px;
	--pad-b: constant(safe-area-inset-bottom);
	--pad-b: env(safe-area-inset-bottom);
	--pad-side: 60px;
	--scorll-b: 4.75rem;
	--corner: 1.5rem;

	--top-h: 90px;
	--text-max-w: 720px;
	--btn-w: min(320px, 80vw);

	--navi-w: max(15vw, 200px);
	--navi-h: calc(var(--navi-w) / 297 * 210);
}

@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	src: url('/source/fonts/noto-sans-jp-v56-japanese_latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 600;
	src: url('/source/fonts/noto-sans-jp-v56-japanese_latin-600.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'BIZ UDPMincho';
	font-style: normal;
	font-weight: 400;
	src: url('/source/fonts/biz-udpmincho-v11-japanese_latin-regular.woff2') format('woff2');
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Noto Sans JP', sans-serif;
}

a,
*[onclick] {
	text-decoration: none;
	cursor: pointer;
	color: var(--tcolor-w);
}

a {
	display: inline-block;
}

ul li {
	list-style: none;
}

h1,
h2 {
	font-weight: bold;
}

h1 {
	font-size: var(--fs-xxl);
	line-height: 1.4em;
}

h2 {
	font-size: var(--fs-xl);
	line-height: 1.4em;
}

h3 {
	font-size: var(--fs-l);
	line-height: 1.4em;
}

#thanks a[target="_blank"] {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

label input {
	display: none;
}

figcaption {
	font-size: var(--fs-s);
}

/* width */
::-webkit-scrollbar {
	width: 15px;
}

/* Track */
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
	background: var(--color-bk);
}

/* Handle */
::-webkit-scrollbar-thumb {
	border-radius: 100px;
	background: var(--color-active);
	border: 4.5px solid var(--color-bk);
}

@-moz-document url-prefix() {}


/*----------------------*/
/*BASIC*/
/*----------------------*/
html,
body {
	margin: 0;
	padding: 0;
	color: var(--tcolor-w);
	background-color: var(--color-bk);
}

/*----------------------*/
/*BUTTON*/
/*----------------------*/
button {
	border: none;
	background-color: transparent;
	color: var(--tcolor-w);
}

*[data-action] {
	cursor: pointer;
}

.text-btn {
	font-size: var(--fs-s);
	padding: 0.5em 1em;
	border-radius: var(--icon-r);
	border: 1px solid var(--lcolor-w);
	background-color: var(--color-bk);
	cursor: pointer;
}

.text-btn:active {
	background-color: var(--hcolor-k);
}

/*with icon*/
.text-btn[class*='i-']:not(label),
.rubyswitch {
	padding-right: 2.25em;
	background-repeat: no-repeat;
	background-size: 1em;
	background-position: right 0.75em center;
}

/*toogle type*/
.rubyswitch {
	padding-right: 1em;
	transition: padding 0.3s;
}

#reader:has(.rubyful-rt:not(.hidden)) .rubyswitch {
	padding-right: 2.5em;
	background-image: url(/source/icons/icon-check.svg);
	background-color: var(--black-active);
	background-position: center right 1em;
}

/*toogle type*/
.text-btn:has(input[type="checkbox"]) span {
	display: flex;
	align-items: center;
}

.text-btn:has(input[type="checkbox"]:checked) span::before {
	--s: 0.5em;
	content: '';
	width: var(--s);
	height: var(--s);
	margin-right: 0.5em;
	border-radius: var(--s);
	background-color: var(--yellow-color);
}

.i-close {
	background-image: url(/source/icons/icon-close.svg);
}

.i-backto {
	background-image: url(/source/icons/icon-backto.svg);
}

.i-scroll {
	padding: 0.5em 1em;
	position: sticky;
	top: calc(100svh - 5.5em - var(--pad-b));
	left: 50%;
	font-size: var(--fs-s);
	transform: translateX(-50%);
	z-index: 99;
}

.i-scroll::after {
	content: '';
	position: absolute;
	width: 100%;
	height: calc(100% + var(--pad-def));
	left: -10em;
	top:-10em;
	padding: 10em;
	background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%);
	z-index: -1;
	pointer-events: none;
}

.i-scroll span::before {
	content: '';
	width: 1.6em;
	height: 1.6em;
	background: center 100% no-repeat url(/source/icons/icon-scroll.svg);
	display: block;
	position: absolute;
	bottom: -2em;
	left: calc(50% - 0.8em);
	animation: 1.5s ease-in-out 0s infinite alternate downsign;
	pointer-events: none;
}


@keyframes downsign {
	from {
		transform: translateY(5px);
	}

	to {
		transform: translateY(-5px);
	}
}

*:has(.btn-text) {
	position: relative;
}

.btn-text {
	position: absolute;
	bottom: 0;
	left: 50%;
	font-size: var(--fs-xs);
	transform: translateX(-50%);
	white-space: nowrap;
}

/*----------------------*/
/*MENU / CONTROL PANEL*/
/*----------------------*/
.menu-panel,
.control-panel {
	position: absolute;
	z-index: 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: content-box;
	user-select: none;
}

.control-panel {
	bottom: calc(var(--corner) * 2);
	right: calc(var(--corner) + 2px) !important;
}

.control-panel::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid var(--lcolor-w);
	background-color: var(--color-opacity);
	border-radius: var(--icon-r);
	pointer-events: none;
}

.control-panel > * {
	z-index: 1;
}

/*position*/
.panel-right {
	right: var(--corner);
}

.panel-left {
	left: var(--corner);
}

.control-panel hr {
	width: 80%;
	height: 1px;
	opacity: .3;
}

/*icon button*/
.icon-btn {
	width: var(--icon-tool);
	height: var(--icon-tool);
	color: white;
	cursor: pointer;
	padding: 10px 10px;
	border-radius: 4px;
	box-sizing: content-box;
}

.control-panel .icon-btn {
	min-width: var(--icon-tool);
	min-height: var(--icon-tool);
}

.control-panel > .btn-text {
	bottom: -2em;
}


.icon-btn.disable img {
	opacity: .2;
}

.icon-btn img {
	width: 100%;
	height: 100%;
}

#openPart span {
	max-width: 10em;
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/*----------------------*/
/*MENU*/
/*----------------------*/

#menu {
	top: var(--corner);
}

#menu:has(.menu-btn input:checked) {
	z-index: 101;
}

/*menu button*/
.menu-btn {
	display: flex;
	align-self: flex-end;
	z-index: 1;
}

.menu-btn .btn-text {
	bottom: calc(1.8em * -1);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

label:has(.sr-only:focus-visible) {
	outline: 2px solid red;
	outline-offset: 2px;
}

.menu-btn:has(input:checked) .btn-text {
	visibility: hidden;
}

.menu-btn .menu-icon {
	padding: 13px 11px;
	background-color: var(--color-opacity);
	border-radius: var(--icon-r);
	border: 1px solid var(--lcolor-w);
	cursor: pointer;
}

.menu-btn:has(input:checked) .menu-icon {
	padding: 11.5px;
	background-color: transparent;
	border: none;
}

.menu-btn .menu-icon span {
	width: 18px;
	height: 2px;
	border-radius: 2px;
	display: block;
	transition: 0.3s;
	background-color: var(--tcolor-w);
}

.menu-btn .menu-icon span:nth-of-type(2) {
	margin: 4px 0;
}

.menu-btn input:checked ~ .menu-icon > span:nth-of-type(1) {
	transform: translateY(8px) rotate(45deg);
}

.menu-btn input:checked ~ .menu-icon > span:nth-of-type(2) {
	transform: scaleX(0);
	margin: 6px 0;
}

.menu-btn input:checked ~ .menu-icon > span:nth-of-type(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/*menu list*/
#menu .menu-wrap {
	height: 100dvh;
	max-height: 100dvh;
	overflow-y: auto;
	position: fixed;
	top: 0;
	right: 0;
	padding: 24px 18px 24px 16px;
	background-color: var(--color-bk);
	border-left: 1px solid var(--lcolor-w);
	display: flex;
	flex-direction: column;
	font-size: var(--fs-s);
	opacity: 0;
	pointer-events: none;
	transform: translateX(100%);
	transition: transform 0.5s, opacity 0.3s;
	visibility: hidden;
}

#menu:has(#menuBtn:checked) .menu-wrap {
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

#menu .menu-wrap *[class*='title-'] {
	font-size: var(--fs-xs);
	font-weight: bold;
	text-transform: uppercase;
}

#menu .menu-wrap *[class*='title-']:first-of-type {
	margin-top: 1em;
}

#menu .menu-wrap *[class*='title-']:nth-of-type(2) {
	margin-top: auto;
}

#menu .menu-wrap .title-link {
	font-weight: bold;
	padding-right: 2em;
	width: max-content;
	background: bottom 0 right/1.5em no-repeat url(/source/icons/icon-link.svg);
}

#menu .menu-wrap ul {
	display: flex;
	flex-direction: column;
	margin: 0.25em 0 2em 0;
}

#menu .menu-wrap ul:last-of-type {
	margin-bottom: 0;
}

#menu .menu-wrap ul li {
	border-radius: var(--icon-r);
	white-space: nowrap;
	padding: 0.5em;
}

#menu .menu-wrap ul li.is-active a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

#menu .menu-wrap ul li a {
	width: 100%;
}

#menu .menu-wrap ul li:not(.title-sub):active {
	background-color: var(--hcolor-k);
}

@media (hover: hover) {
	#menu .menu-wrap ul li:not(.title-sub):hover {
		cursor: pointer;
		background-color: var(--hcolor-k);
	}

	.text-btn:hover {
		background-color: var(--hcolor-k);
	}
}

/*----------------------*/
/*FULL PAGE*/
/*----------------------*/
.wrap-full {
	width: 100dvw;
	height: 100dvh;
	position: fixed;
	top: 0;
	left: 0;
	inset: 0;
}

.wrap-full[hidden] {
	visibility: hidden;
}

.wrap-full:not([hidden]) {
	opacity: 1;
	z-index: 999;
}

.wrap-full:not([hidden]) .overlay {
	opacity: 1;
	visibility: visible;
	backdrop-filter: blur(3px);
}

.wrap-full:has(.item-full) {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
}

.wrap-full .item-full {
	grid-column: 1;
	grid-row: 1;
}

.wrap-full:has(.full-popup) {
	padding: var(--top-h) var(--pad-side);
	display: flex;
	overflow: auto;
}

.wrap-full:has(.full-popup .i-close) .overlay {
	background: var(--color-opacity);
}

.wrap-full .full-popup {
	width: min(100%, 40rem);
	margin: auto;
	flex: 0 0 auto;
	padding: 32px;
	background-color: var(--black-bk);
	font-size: var(--fs-m);
	line-height: 2em;
	border: 1px solid var(--lcolor-w);
	border-radius: var(--icon-r);
	position: relative;
}

.wrap-full .full-popup .i-close {
	position: absolute;
	right: 0;
	top: 0;
	width: 20px;
	height: 20px;
	padding: 16px;
	z-index: 1;
	box-sizing: content-box;
	background-size: 20px;
	background-position: center;
	background-repeat: no-repeat;
}

.wrap-full .full-popup h4 {
	text-align: center;
	margin-bottom: 1em;
	font-size: var(--fs-l);
}

#thanks ul {
	margin-left: 1em;
}

/*----------------------*/
/*LOADING*/
/*----------------------*/
#loading {
	z-index: 99999;
	transition: opacity 0.5s;
}

#loading * {
	touch-action: none;
	transition: opacity 0.5s;
}

#loading[data-load='1'] {
	opacity: 1;
	pointer-events: auto;
}

#loading > div {
	gap: 1em;
	background-color: var(--color-bk);
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2em;
}

#loading > div > * {
	z-index: 1;
}

#loading > div::after {
	content: '';
	min-width: 100%;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	opacity: .5;
}


#loading > div::after,
#index {
	min-height: 100dvh;
	padding: var(--pad-def);
	background: no-repeat url(/source/uchuzu_bk.webp) center bottom/cover;
	font-size: var(--fs-s);
}

#loading .ring {
	--s: 3em;
	width: var(--s);
	height: var(--s);
	border-radius: var(--s);
	border: 5px solid var(--black-active);
	border-top-color: white;
}

#loading[data-load='1'] .ring {
	animation: 2s ease infinite loading;
}

@keyframes loading {
	to {
		transform: rotate(360deg);
	}
}

.copyright {
	width: 90vw;
	font-size: 10px;
	margin: 0;
	text-align: center;
}

/*----------------------*/
/*IMAGE VIEWER*/
/*----------------------*/
img[viewable] {
	cursor: zoom-in;
}

*[linkable] {
	cursor: alias;
}

.overlay {
	height: 100dvh;
	width: 100dvw;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s;
	background: var(--color-opacity) no-repeat top 28px right 30px/var(--icon-tool) url(/source/icons/icon-close.svg);
}

.pswp__button img {
	--s: 20px;
	height: var(--s);
	width: var(--s);
}

.pswp__custom-caption {
	width: min(max-content, 80vw);
	min-width: 40vw;
	padding: 8px;
	border-radius: var(--img-r);
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.pswp__custom-caption p:nth-of-type(1) {
	font-size: var(--fs-s);
}

.pswp__custom-caption p:nth-of-type(2) {
	font-size: var(--fs-xs);
	opacity: .5;
}

/*----------------------*/
/*NAVI WINDOWS*/
/*----------------------*/
#navi {
	--s: 42px;
	--mask-w: 50%;
	--mask-h: 10%;
	--mask-x: 30%;
	--mask-y: 30%;
	width: auto;
	height: auto;
	min-width: var(--s);
	min-height: var(--s);
	background: var(--color-opacity) no-repeat url(/source/icons/icon-navi.svg) center/1.25em;
	cursor: pointer;
	position: fixed;
	top: var(--corner);
	left: var(--corner);
	border-radius: var(--icon-r);
	border: 1px solid var(--lcolor-w);
	transition: 0.3s;
	z-index: 100;
}

#reader:has(> .is-active) ~ #navi {
	--s: 2.25rem;
	background: var(--color-opacity)
}

#reader:has(> .is-active) ~ #navi .btn-text {
	position: static;
	font-size: var(--fs-s);
	transform: none;
	padding: 0.5em 1em;
	padding-right: 2.25em;
	display: block;
	background: no-repeat url(/source/icons/icon-navi.svg) center right 0.75em/1em;
}

.navi-btn input {
	display: none;
}

#navi.disable:not(#reader:has(> .is-active) ~ #navi) {
	opacity: 0;
	pointer-events: none;
}

#navi:has(input:checked) {
	top: 0;
	left: 0;
	border-radius: var(--icon-r);
	overflow: hidden;
}

#navi .btn-text {
	bottom: -2em;
}

#navi:has(input:checked) .btn-text {
	display: none !important;
}

#navi-poster {
	width: var(--navi-w);
	height: var(--navi-h);
	max-height: 0;
	max-width: 0;
	overflow: hidden;
	background: url(../source/x500.jpg) no-repeat top center/contain;
	opacity: 0;
	transition: 0.3s;
}

#navi:has(input:checked) #navi-poster {
	max-width: var(--navi-w);
	max-height: var(--navi-h);
	opacity: 1;
}

#navi:has(input:checked) #navi-poster:after {
	content: '';
	position: absolute;
	width: var(--mask-w);
	height: var(--mask-h);
	top: var(--mask-y);
	left: var(--mask-x);
	border: 2px solid var(--yellow-color);
	transition: 0.1s;
}

@media only screen and (min-width: 1440px) {
	:root {
		font-size: 18px;
	}
}

@media only screen and (max-width: 768px) {
	:root {
		--pad-def: 6vw;
		--navi-w: 40vw;
		--pad-side: 5vw;
		--corner: min(5vw, 1rem);
	}

	.copyright {
		width: 92vw;
	}

	.copyright br {
		display: none;
	}

	h1,
	h2 {
		font-size: 24px;
	}

	h3 {
		font-size: 18px;
	}

	.i-scroll {
		left: 50vw;
	}

	#menu .menu-wrap {
		width: 100dvw;
		font-size: var(--fs-m);
		padding: 2em 4.5em 2em 1.5em;
		border-left: none;
	}

	.wrap-full .full-popup {
		padding: 3rem 5vw;
	}

	#reader:has(> .is-active) ~ #navi {
		--s: calc(var(--fs-s)*2.6 + 2px);
		background: var(--color-bk) no-repeat url(/source/icons/icon-navi.svg) center/1em !important;
	}

	#reader:has(> .is-active) ~ #navi .btn-text {
		display: none;
	}

}