@charset "utf-8";

/* H2, H3 の details が閉じている時， */
/* 見出しを明滅させるためのコード。 */
/* 意図通りの動きを実現できたが， */
/* 鈍い明滅が怪しくて，触るのが */
/* 怖くなりそうだったのでやめておいた。 */
/*
@keyframes h2-blinking {
	0% {
		background-color: var(--h2-blink-bg-color);
	}
	4% {
		background-color: var(--h2-blink-bg-color);
	}
	25% {
		background-color: #fff0;
	}
	100% {
		background-color: #fff0;
	}
}

@keyframes h3-blinking {
	0% {
		background-color: var(--h3-blink-bg-color);
	}
	4% {
		background-color: var(--h3-blink-bg-color);
	}
	25% {
		background-color: #fff0;
	}
	100% {
		background-color: #fff0;
	}
}
*/
h1, h2, h3 {
	font-weight: normal;
}

div#mainview-area {
	background-color: #000d;
	font-family: var(--reg-font);
	max-width: 640px;

	/* 本当は margin-bottom は 0 としたいが， */
	/* それだと Android の Chrome で */
	/* 文書の下端まで表示されないため， */
	/* やむなく大きめに取っている。 */
	/* 吹き出しツールチップ内で長い行があると */
	/* 前述の不具合が出る模様。 */
	margin: 0 auto 8rem;

	padding: 0 0 1px;
	border-radius: 0 0 8px 8px;
}

div#mainview-area details summary {
	cursor: pointer;
}

div#mainview-area h1 {
	color: #49206f;
	--tshadow-radius: 4px;
	--tshadow-color: #e7d4ff;
	text-shadow:
		 1px	 1px	var(--tshadow-radius) var(--tshadow-color),
		-1px	-1px	var(--tshadow-radius) var(--tshadow-color),
		-1px	 1px	var(--tshadow-radius) var(--tshadow-color),
		 1px	-1px	var(--tshadow-radius) var(--tshadow-color),
		 0		 2px	var(--tshadow-radius) var(--tshadow-color),
		 0		-2px	var(--tshadow-radius) var(--tshadow-color),
		-2px	 0		var(--tshadow-radius) var(--tshadow-color),
		 2px	 0		var(--tshadow-radius) var(--tshadow-color);
	padding: 5rem 0 3rem;
	margin: 1rem 0 0;
	text-align: center;
	font-size: 1.8em;
	font-family: var(--cap-font);
	line-height: 1.5em;
	background: radial-gradient(rgba(64, 48, 160, 0.6) 0%, rgba(112, 80, 168, 0.5) 16%, rgba(208, 176, 240, 0.4) 24%, rgba(72, 56, 144, 0.6) 37%, rgba(16, 16, 96, 0.8) 50%, rgba(0, 0, 0, 1) 70%);
}

div#mainview-area div.intro-version {
	text-align: right;
	color: #94cd;
	font-size: 0.9em;
	margin: 0 1.6rem 0;
}
/*
div#mainview-area div.section {
	padding: 5px 1rem;
	border-radius: 5px;
	background: #111111;
	box-shadow: inset -3px 0px 3px #888888, inset 3px 0px 3px #444444;
	border: none;
}
*/
div#mainview-area details.h2 {
	margin: 1rem 0.7rem 1.5rem;
}

div#mainview-area details.h2[open] {
	margin-bottom: 3rem;
}

div#mainview-area details.h2:last-child {
	margin-bottom: 3.5rem;
}

div#mainview-area details.h2 > summary {
/*
	--h2-blink-bg-color: #8df2;
	animation: h2-blinking 1.8s ease-in-out infinite alternate;
*/
	background: linear-gradient(175deg, #c000ff70, #0060ff50, #8000ff70);
	border-radius: 8px;
	box-shadow: inset 3px 3px 3px #e090ffa0, inset -3px -3px 3px #6000c0;
	font-family: var(--cap-font);
	color: #aa90e0;
	vertical-align: top;
	margin-left: 0em;
	padding: 0.2rem 0.5rem 0.2rem 0.5rem;
	list-style: none;
	position: relative;
}

div#mainview-area details.h2 > summary::before {
	content: "➕️";
	font-size: 0.75em;
	position: absolute;
	top: 1.3em;
}

div#mainview-area details.h2[open] > summary::before {
	content: "➖️";
}
/*
div#mainview-area details.h2[open] summary {
	--h2-blink-bg-color: #fff0;
}
*/
div#mainview-area details.h2 h2 {
	display: inline-block;
	padding: 0.4em 0.4em 0.2em 1em;
	font-size: 1.25em;
}

div#mainview-area div.chapter-inner {
	border-left: 1px solid #4400bb;
	padding-bottom: 0.5rem;
	border-image: repeating-linear-gradient(0deg, #605099, #9178e5, #605099 3em) 1;
}

div#mainview-area details.h3 {
	margin: 0.3rem 0.3rem 0.3rem 0.7rem;
	padding-top: 0.9rem;
}

div#mainview-area details.h3[open] {
	margin-bottom: 1.5rem;
}

div#mainview-area details.h3 summary {
/*
	--h3-blink-bg-color: #8df2;
	animation: h3-blinking 1.8s ease-in-out infinite alternate;
*/
	border: 0;
	border-top: 2px solid;
	border-bottom: 2px solid;
	border-color: #bbaaff80;
	border-image: linear-gradient(160deg, #8000ffa0, #6080ff80, #8000ffa0);
	border-image-slice: 1;
	background: linear-gradient(160deg, #8070d640, #6080ff40, #8070d640);
	padding: 0.3em 0.4em 0.25em;
	vertical-align: top;
	position: relative;
}
/*
div#mainview-area details.h3[open] summary {
	--h3-blink-bg-color: #fff0;
}
*/
div#mainview-area details.h3 summary::marker {
	color:#c0c0f0;
	font-size: 1em;
	display: inline-block;
	line-height: 1.6em;
}

div#mainview-area details.h3:first-child {
	margin-top: 0.5rem;
}

div#mainview-area details.h3:last-child {
	margin-bottom: 0.6rem;
}

div#mainview-area details.h3 h3 {
	font-family: var(--cap-font);
	font-size: 1em;
	color:#c0c0f0;
	display: inline-block;
	vertical-align: bottom;
}

div#mainview-area p {
	text-indent: 0;
	margin: 1.4rem 0.5rem 0.7rem;
	color:#d4e6fd;
	font-size: 0.9em;
	line-height: 1.8em;
}

div#mainview-area div.chapter-inner > p.core-entrance {
	color:#e4c6fd;
	text-align: center;
	line-height: 1.5em;
	margin: 0.5rem;
	padding: 0.5rem;
}

div#mainview-area div.chapter-inner > p.core-entrance:first-of-type {
	padding-top: 0.8rem;
}

div#mainview-area div.chapter-inner > p.core-entrance:last-of-type {
	padding-bottom: 0;
	margin-bottom: 0;
}

div#mainview-area .p-from {
	margin-bottom: 0.3em;
}

div#mainview-area .p-middle {
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}

div#mainview-area .p-to {
	margin-top: 0.3em;
}

div#mainview-area span.emp1 {
	color: #dae4a4;
}

div#mainview-area span.emp2 {
	color: #e3ef94;
}

div#mainview-area span.emp3 {
	color: #ef94ea;
}

div#mainview-area span.highlight {
	background-color: #fff30044;
	padding-left: 0.2em;
	padding-right: 0.2em;
	padding-top: 0.2em;
	border-bottom: 2px solid #FFff0080;
	border-radius: 0.2em 0.2em 0 0;
	line-height: 1.9em;
}

div#mainview-area p.answer {
	color: #ef94ea;
	font-size: 1.6em;
	line-height: 2em;
	letter-spacing: 0.15em;
	font-family: "HG創英角ﾎﾟｯﾌﾟ体", "Windows TV 太丸ゴシック", var(--cap-font);
	margin-top: 2rem;
	margin-left: 0.8rem;
}

div#mainview-area span.large {
	font-size: 1.1em;
}

div#mainview-area span.Large {
	font-size: 1.2em;
}

div#mainview-area span.bold {
	font-family: var(--cap-font);
}

div#mainview-area span.emp-var {
	color: #33dddd;
}

div#mainview-area p span.mumble {
	font-size: 0.9em;
	color: #a4b6cd;
}

div#mainview-area p span.mumble-top {
	font-size: 0.9em;
	color: #a9a2b5;
}

div#mainview-area p.farewell {
	text-align: right;
	font-size: 1.2em;
	color: #dea7d0;
	line-height: 1.6em;
	font-family: "Windows TV 太丸ゴシック", var(--cap-font);
}

div#mainview-area div.section-inner > p:last-child {
	margin-bottom: 0.5rem;
}

div#mainview-area ul {
	font-size: 0.9em;
	background-color: #aa88ff30;
	padding: 0.5rem 0.5rem 0.5rem 2rem;
	border-radius: 0.3rem;
} 

div#mainview-area li {
	color:#e8e5fd;
	margin: 0.7em 0;
}

div#mainview-area ul.annotation {
	font-size: 0.9em;
	background-color: #0000;
	padding: 0em 0.5em;
	border-radius: 0.3rem;
	list-style-type: none;
	margin: 1em 0;
} 

div#mainview-area ul.annotation > li {
	/* text-indent: -1.5em; */
	position: relative;
	padding-left: 1.5em;
}

div#mainview-area ul.annotation.top-guidance > li {
	color: #daf;
}

div#mainview-area ul.annotation > li::before {
	content: "※";
	position: absolute;
	left: 0;
	width: 1em;
	text-align: right;
	font-size: 1em;
}

div#mainview-area details.annotation {
	border: 1px solid #554080d0;
	border-radius: 8px;
	background-color: #eeeeff20;
	margin: 1.4rem 0.2rem 2rem;
}

div#mainview-area details.annotation.near {
	margin-top: 0.7rem;
}

div#mainview-area details.annotation > summary {
	border: 2px solid #8866ff50;
	border-radius: 8px;
	background-color: #33224430;
	color: #ddddf0;
	padding: 0.3em 0.3em 0.1em;
	font-size: 0.9em;
}

div#mainview-area details.annotation > summary:hover {
	cursor: pointer;
}

div#mainview-area details.annotation div.annotation-inner {
	padding: 0.2rem 0.7rem 0.2rem 0.5rem;
}

div#mainview-area details.annotation p {
	color: #ddddf0;
	font-size: 0.85em;
}

div#mainview-area details.annotation p:first-child {
	margin-top: 1em;
}

div#mainview-area details.annotation.top-guidance {
	border: 1px solid #800080d0;
	border-radius: 8px;
	background-color: #ffe0ff20;
	margin: 1.3rem 0.7rem;
	padding: 0;
}

div#mainview-area details.annotation.top-guidance > summary {
	border: 2px solid #ff00ff50;
	border-radius: 8px;
	background-color: #44004430;
	color: #c8b0e3;
	padding: 0.2em 0.3em 0.1em;
}

div#mainview-area details.annotation.top-guidance > div.annotation-inner {
	padding: 0.6rem 1rem 0.7rem;
	font-size: 0.9em;
	color: #eee0fa;
	line-height: 1.7em;
}

div#mainview-area details.annotation.top-guidance > div.annotation-inner p {
	color: inherit;
	margin: 1.6em 0 0.6em;
}

div#mainview-area details.annotation.top-guidance > div.annotation-inner p:first-child {
	color: inherit;
	margin: 0.6em 0 0.6em;
}

div#mainview-area details.annotation.top-guidance > div.annotation-inner ul {
	background: none;
	color: inherit;
	padding: 0 0 0 1.5rem;
}

div#mainview-area details.annotation.top-guidance > div.annotation-inner li {
	line-height: inherit;
	color: #daef;
	font-size: 0.9em;
	line-height: 1.7em;
}

div.annotation-box {
	background-color: #a7f2;
	border: #fff8 dashed 1px;
	padding: 0 0.7rem;
	margin: 1rem 0.2rem;
	font-size: 0.9em;
}

div#mainview-area div.annotation-box > p {
	margin: 1.2rem 0.2rem 0.7rem;
}

div#mainview-area div.annotation-box > p:first-child {
	margin-top: 0.9rem;
}

/* 数式表示関連 */
div#mainview-area table.equation {
	border: none;
	margin: 0 auto 0 1.5rem;
	text-align: center;
}

@media (max-width: 479px) {
	div#mainview-area table.equation.last {
		font-size: 0.85em;
	}
}

div#mainview-area table.equation tr > td {
	color: #dd9;
}

div#mainview-area table.equation td {
	text-align: center;
	margin: 0;
	padding: 0;
}

div#mainview-area span.sub {
	font-size: 0.65em;
}

div#mainview-area span.math-label-1 {
	background-color: #ffc4;
	color: #fff;
	padding: 1px 3px;
	font-size: 0.9em;
}

div#mainview-area span.math-label-2 {
	background-color: #fff;
	color: #000;
	font-family: var(--cap-font);
	padding: 1px 3px;
}


/* 概説ページのツールチップ関連 */
.super {
	vertical-align: super;
	font-size: 1.2em;
	margin: 0;
	padding: 0;
	pointer-events: auto;
	cursor: none;
	user-select: none;
}
	
.tooltip {
	position: relative;
	padding: 0 2px;
	white-space: nowrap;
	user-select: none;
}

.tooltip .balloon_body {
	width: fit-content;
	white-space: nowrap;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.5em 0.7em 0.3em;
	border-radius: 4px;
	border: 1px solid #aa7;
	background-color: #2d3314;
	font-size: 0.8em;
	line-height: 1.6em;
	color: #fffaf4;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	text-indent: 0;
}
 
.tooltip.balloon_top_temp .balloon_body {
	bottom: 80%;
	margin-bottom: 20px;
}
 
.tooltip.balloon_bottom_temp .balloon_body {
	top: 60%;
	margin-top: 14px;
}

.tooltip .super {
	font-size: 0.9em;
}

.tooltip .super::before {
	content: "";
	width: 0px;
	height: 0px;
	border: 8px solid transparent;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
}
 
.tooltip.balloon_top_temp .super::before {
	border-top: 8px solid #aa7;
	padding-top: 6px;
	bottom: 80%;
}
 
.tooltip.balloon_bottom_temp .super::before {
	border-bottom: 8px solid #aa7;
	top: 60%;
}
 
.tooltip .super:hover+.balloon_body {
	visibility: visible;
	opacity: 1;
}

.tooltip .super:hover::before {
	opacity: 1;
}

@media (max-width: 719px) {
	div#mainview-area {
		font-size: 1.2em;
	}
}

@media (max-width: 599px) {
	div#mainview-area {
		font-size: 1em;
	}
}


::selection {
	background-color: #eef2;
}