body {
	background-color: rgb(252, 252, 244);
	
	font-family: system-ui, -apple-system, BlinkMacSystemFont, Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-feature-settings: "palt";
	letter-spacing: 0.05em;
/*	font-weight: 500;	*/
/*
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
*/
	text-autospace: normal;
}

a:not(:hover):not(:focus) {
	text-decoration: none;
}

a:link {
/*	color: #0044cc;	*/	/* #0044cc (Bing) */
						/* #0000ee (Firefox) */
/*	color: hsl(220,100%,40%);	*/
/*	color: hsl(220,100%,50%);	*/
/*	color: hsl(230,100%,50%);	*/
	color: hsl(230,100%,45%);
}
a:visited {
/*	color: #551a8b;	*/	/* #551a8b (Firefox :visited) */
/*	color: hsl(220,70%,50%);	*/
/*	color: hsl(230,100%,40%);	*/
/*	color: hsl(260,60%,40%);	*/
	color: hsl(260,60%,45%);
}
a:hover {
/*	color: #3b99fc;	*/	/* #3b99fc (Firefoxチェックボックス) */
						/* #274cea (今のButton) */
/*	color: hsl(220,100%,70%);	*/
/*	color: hsl(230,100%,60%);	*/
}
a[href]:active {
/*	color: #ee0000;	*/	/* #ee0000 (Firefox :active) */
/*	color: hsl(0,100%,70%);	*/
	color: hsl(0,100%,45%);
}

header {
	margin-top: 4em;
	margin-bottom: 4em;
}
header .title {
	display: inline-block;
	font-size: 250%;
	font-weight: bold;
	position: relative;
	letter-spacing: 0px;
}
@media (max-device-width:480px)
{
	header .title {
		font-size: 200%;
	}
}
#about {
	text-align: left;
	max-width: 40rem;
	line-height: 1.5;
}
section {
	margin-top: 3em;
	margin-bottom: 1.5em;
	margin-left: 5%;
	margin-right: 5%;
	border-bottom: 1px solid black;
}
section .title {
	display: block;
	font-size: 150%;
	font-weight: bold;
}
footer {
	margin-top: 4em;
}

ol, ul {
	padding-left: 2em;
}
/*
li {
	padding-left: 0.5em;
}
*/

ul.navigation {
/*	display: inline-block;	*/
	text-align: left;
	font-size: 150%;
	font-weight: bold;
	padding-left: 0em;
}
ul.navigation li {
/*	display: block;	*/
	list-style-type: none;
	margin-top: 0.4em;
/*	text-align: left;	*/
}
ul.navigation > li:first-child {
	margin-top: 0px;
}
ul.navigation li ul {
/*	padding-left: 1em;	*/
	padding-left: min(1em, 2vw);
}
ul.navigation li > a::before {
	content: "";
	border-left: 4px solid;
/*	padding-left: 1em;	*/
	padding-left: min(1em, 2vw);
}
ul.navigation li > a[href]:hover:not(:active)::before {
/*	border-left-color: #22aa22;	*/
	border-left-style: double;
}
ul.navigation li ul li > a::before {
	border-left-width: 3px;
}
ul.navigation li ul li ul li > a::before {
	border-left-width: 2px;
}
ul.navigation li > a {
	display: block;
/*	letter-spacing: 0px;	*/
/*
	text-indent: -1.5em;
	margin-left: 1.5em;
*/
	word-break: break-all;
}

button[popovertarget] {
/*	anchor-name: --popover-anchor;   */
	appearance: none;
}
nav[popover="auto"] {
/*
	position: relative;
	margin: 0;
	inset: auto;
	top: 3em;
	left: 0px;
*/
	position: absolute;
	position-area: bottom span-left;
	margin: 1em 0px;
	inset: auto;
/*
	position-anchor: --popover-anchor;
	top: calc(anchor(top) + 3em);
*/
	transition-property: overlay, display, opacity, transform;
	transition-duration: 0.2s;
	transition-behavior: allow-discrete;
	opacity: 0.0;
	transform: translateY(-3em);
	
	white-space: nowrap;
	font-size: 120%;
	border: none;
	border-radius: 1em;
	corner-shape: squircle;
	background-color: white;
	box-shadow: 1px 2px 8px rgba(0,0,0,0.5);
	line-height: 2.0em;
	padding: 0.5em 1em;
	text-align: left;
}
@supports not (corner-shape: squircle) {
	nav[popover="auto"] {
		border-radius: 0.5em;
	}
}
nav[popover="auto"]:popover-open {
	opacity: 1.0;
	transform: translateY(0px);
	
	@starting-style {
		opacity: 0.0;
		transform: translateY(-3em);
	}
}
nav[popover="auto"] ul {
	list-style-type: none;
	padding-left: 0.8em;
	margin: 0px;
}
nav[popover="auto"] > ul {
	padding-left: 0px;
}
nav[popover="auto"] ul li a {
	display: block;
}
nav[popover="auto"] ul li a[hidden] {
	display: none;
}

dialog::backdrop {
	background-color: rgba(0,0,0,0.4);
}
dialog {
	font-size: 120%;
	border: none;
	border-radius: 1em;
	corner-shape: squircle;
	background-color: white;
	box-shadow: 1px 2px 8px rgba(0,0,0,0.5);
	padding: 0.8em;
}
@supports not (corner-shape: squircle) {
	dialog {
		border-radius: 0.5em;
	}
}

.wraptext {
	text-indent: initial;
}
.wraptext-wrap {
	display: inline-block;
	white-space: pre-wrap;
}
.wraptext-container {
	display: inline-block;
}
.wraptext-head {
	display: block;
}
.wraptext-sub {
}
a .wraptext, a .wraptext * {
	text-decoration: inherit;
}