@charset "UTF-8";

/*

	"MW 源柔ゴシックLP" ("MW GenJyuu Gothic L-P") is licensed under the SIL Open Font License Version 1.1.
	© 2015 M+ FONTS PROJECT
	© 2014, 2015 Adobe Systems Incorporated
	© 2015 自家製フォント工房 <http://jikasei.me/font/genjyuu/>
	© 2024 Bymnet1845 <https://www.haraheri5ro.com/>
	
	SIL Open Font License Version 1.1 is copied below, and is also available with a FAQ at: https://openfontlicense.org/

*/

@font-face {
	font-family: "MW 源柔ゴシックLP";
	font-weight: 400;
	src: local("源柔ゴシックLP"), url("https://res.haraheri5ro.com/font/GenJyuu-Gothic-L-P-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "MW 源柔ゴシックLP";
	font-weight: 700;
	src: local("源柔ゴシックLP"), url("https://res.haraheri5ro.com/font/GenJyuu-Gothic-L-P-Bold.woff2") format("woff2");
}

body { width: 100%; max-width: 960px; margin: 0 auto; padding: 48px; font-family: "MW 源柔ゴシックLP", sans-serif; text-align: justify; line-height: 1.5; color: #333333; }
h1 { font-size: 200%; margin-bottom: 32px; text-align: center; }
h2 { font-size: 200%; margin: 32px 0 16px; padding-bottom: 4px; border-bottom: 1px solid #CCCCCC; }
h3 { font-size: 150%; margin: 24px 0 16px; }
h4 { font-size: 125%; margin: 24px 0 16px; }
p { margin: 8px 0; }
ul, ol { padding: 0; list-style: none; }
a { color: #000099; text-decoration: underline; }
a:hover { text-decoration: none; }

details {
	border-radius: 16px; background: #EEEEEE;
	section { margin: 24px 0 8px; }
	section + section { border-top: 2px solid #999999; }
	h5 { margin: 24px 0 16px; }
}

summary { padding: 16px; border-radius: 16px; background: #333333; cursor: pointer; font-weight: bold; color: #FFFFFF; }
.details-body { padding: 16px 24px; }

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

.brackets { font-size: 75%; }

.notice {
	border: 1px solid var(--border-color); background: var(--background-color); --border-color: #9999FF; --background-color: #CCCCFF; --heading-background-color: #0000FF;
	&.warning { --border-color: #FF9999; --background-color: #FFCCCC; --heading-background-color: #FF0000; }
	&.example { --border-color: #66FF66; --background-color: #CCFFCC; --heading-background-color: #00FF00; }
	
	section& {
		margin: 46px 0 16px; padding: 8px 16px; border-radius: 0 16px 16px; position: relative;
		
		h5 {
			top: -31px;
			left: -1px;
			padding: 8px 16px;
			border-radius: 16px 16px 16px 0;
			background: var(--heading-background-color);
			position: absolute;
			color: #FFFFFF;
		}
	}

	ul& {
		margin: 8px 0 8px 32px; padding: 0; border-width: 0;
		li { margin: 0; padding: 8px 16px; }
		li + li { border-top: 1px solid var(--border-color); }
	}
}

.tutorial {
	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; }
}

nav {
	margin: 24px 0; padding: 16px 32px; background: #EEEEEE; display: table;
	ol ol { padding-left: 32px; }
}

footer {
	margin-top: 32px; text-align: right;
	address { margin-top: 24px; }
	.signature { font-size: 24px; }
	p:last-child { margin-bottom: 0; }
}

.revision { margin-bottom: 32px; padding: 16px; background: #FFCCCC; text-align: center; }

@media (width < 640px) {
	body { padding: 48px 16px; }
	nav { width: 100%; }
	.details-body { padding: 16px; }
}