@charset "UTF-8";
@import "https://res.haraheri5ro.com/font/ayane-p-gothic-jp.css";

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-size: 100%;
	vertical-align: baseline;
	box-sizing: border-box;
	outline: none;
}

::before, ::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
	background: #FFFFFF;
	font-family: "あやねPゴシックJP", sans-serif;
	font-size: 16px;
	text-spacing-trim: space-all;
	color: #333333;
	line-height: 1.5;
	line-break: normal;
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: break-word;
}

button { background: none; cursor: pointer; }
img, svg { border: 0; vertical-align: top; }
ol, ul { list-style-type: none; }
ruby > rt { font-size: 50%; }
button, input { font: inherit; }
input[type=text] { min-width: 0; }
a { color: #000099; text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; border-spacing: 0; }
address { margin-block: 16px; padding: 4px 16px; background: #EEEEEE; font-style: normal; }
summary { cursor: pointer; }
.clearfix:after { content: ""; display: block; clear: both; }
.page-size { width: 1280px; max-width: 100%; margin-inline: auto; padding-inline: 32px; }

#page-header {
	height: 64px; top: 0; left: 0; right: 0; padding: 16px; background: #A77DB0; display: flex; position: sticky; z-index: 9999; color: #FFFFFF;
	h1 { height: 100%; }
	svg { height: 100%; fill: #FFFFFF; }
	a { transition: opacity 0.5s; }
	a:hover { opacity: 0.5; }
}

#page-header-menu {
	flex: 1;
	ul { height: 100%; display: flex; justify-content: right; align-items: center; gap: 16px; }
	a { color: #FFFFFF; }
	a:hover { text-decoration: none; }
}

#page-body-header { background: #E2D3E5; }
#page-body-header h1 { padding-block: 16px; font-size: 150%; }
#page-body-main { padding-bottom: 32px; }
.page-section { margin-top: 32px; }
.page-section h2 { margin-bottom: 24px; padding-bottom: 8px; border-bottom: 4px solid #A77DB0; font-size: 150%; }
.page-section h3 { margin-block: 16px; padding-bottom: 8px; border-bottom: 1px solid #CCCCCC; font-size: 125%; }
.page-section p { margin-block: 8px; }

.text-list {
	padding-left: 2em; list-style-position: outside;
	ol& { list-style-type: decimal; }
	li& { list-style-type: disc; }
	li { margin-block: 4px; }
}

.formal-list {
	padding-left: 3em; position: relative;
	&:not(:is(ul, ol) &) { margin-block: 16px; }
	> li { margin-block: 8px; }
	> li > .marker { width: 2em; left: 0.5em; position: absolute; text-align: right; }
}

.brackets { font-size: 75%; }
.example-sentence { background: #CCFFCC; }

.tutorial-section { margin-block: 16px; border-radius: 16px; background: #EEEEEE; }
.tutorial-section summary { padding: 12px 16px; border-radius: 16px; background: #333333; cursor: pointer; font-weight: bold; color: #FFFFFF; }
.tutorial-section > div { padding: 16px 24px; }

.tutorial-list {
	padding-left: 32px; position: relative;
	li { margin: 16px 0; position: relative; }
	.marker { top: 0; left: -32px; width: 24px; height: 24px; border-radius: 50%; background: #666666; position: absolute; text-align: center; color: #FFFFFF; }
	img { width: 320px; max-width: 100%; margin: 8px auto; border-radius: 16px; display: block; }
}

#revision { padding: 4px 16px; background: #F5CCCC; color: #CC0000; }

#reglation-footer { margin-top: 32px; text-align: right; }
#reglation-footer ol { margin-top: 16px; }