:root {
	--text: #010101;
	--muted: #767676;
	--link: #0053b4;
	--accent: #a50000;
	--footer-h: clamp(120px, 18.75vw, 240px);
	--fs-base: 0.8125rem;
	--fs-title: 1.3125rem;
	--fs-logo: 3rem;
	--fs-footer: 0.75rem;
}

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

html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { display: flex; flex-direction: column; min-height: 100dvh; margin: 0; background-color: #fff; color: var(--text); font-family: "Kosugi", sans-serif; font-size: var(--fs-base); font-weight: 400; line-height: 1.8; }

::selection { background: #fe57a1; color: #fff; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

img { max-width: 100%; height: auto; vertical-align: middle; }

button, input, textarea { margin: 0; color: inherit; font-family: inherit; font-size: 100%; font-weight: inherit; }
button, input { line-height: normal; }
button { cursor: pointer; }
textarea { overflow: auto; vertical-align: text-top; resize: vertical; }
label { cursor: pointer; }

nav ul { margin: 0; padding: 0; list-style: none; }

.wrapper { flex: 1 0 auto; padding-bottom: 70px; }
.container { margin-inline: auto; width: 90%; max-width: 800px; }

#header { display: flex; align-items: flex-end; height: clamp(60px, 15.625vw, 200px); padding-bottom: 6px; }
.logo { margin: 0; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: var(--fs-logo); line-height: 1.2; }
.logo a { color: #000; text-decoration: none; }

#contents { display: grid; grid-template-columns: 73% 1fr 17%; grid-template-areas: "main . nav"; align-items: start; width: calc(90% + 40px); max-width: 840px; margin-block: 20px 30px; padding: 20px 20px 0; }

#globalnavi { grid-area: nav; margin-top: -4px; }
#globalnavi li { margin-bottom: 8px; min-width: 9em; }
#globalnavi a { display: inline-block; padding: 4px 2px; }
#globalnavi a[aria-current="page"] { color: var(--muted); }

#main { grid-area: main; margin-bottom: 40px; }
#main p { margin: 0; }
#main ul { margin: 20px 0 30px; padding: 0 0 0 15px; }
#main li { margin: 0 0 10px; }
#main .fr { float: right; margin-left: 10px; }
#main .pDate { margin-top: 20px; text-align: right; }
#main .notes { margin-top: 20px; text-align: right; }
#main dl { display: grid; grid-template-columns: max-content 1fr; margin: 0; border-top: 1px solid #e6e6e6; }
#main dt, #main dd { margin: 0; padding: 10px 0; border-bottom: 1px solid #e6e6e6; }
#main dt { padding-right: 2em; }

#main .title { margin: 0 0 20px; font-size: var(--fs-title); font-weight: 400; }
h2 { margin: 20px 0 10px; font-size: 100%; font-weight: 400; }
#main .title ~ h2 { margin-top: 30px; }
#main h2[class^="icon-"] { display: flex; align-items: center; gap: 0.5em; }
#main h2[class^="icon-"]::before { content: ""; flex: none; width: 1.1em; height: 1.1em; background-color: var(--accent); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-users { --icon: url(../images/icons/users.svg); }
.icon-server { --icon: url(../images/icons/server.svg); }
.icon-headset { --icon: url(../images/icons/headset.svg); }
.icon-template { --icon: url(../images/icons/template.svg); }
.icon-git-branch { --icon: url(../images/icons/git-branch.svg); }

em.red { padding-right: 0.3em; color: var(--accent); font-style: normal; }

#pagefooter { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: var(--footer-h); border-top: 1px solid #ebebeb; background-color: #fff; color: var(--text); font-size: var(--fs-footer); text-align: center; }
#pagefooter p { margin: 8px 0 0; }
#pagefooter a { padding: 4px clamp(4px, calc(1.5vw - 3px), 16px); }
#pagefooter a[aria-current="page"] { color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; }
.footer-links li + li::before { content: "\a0|\a0\a0"; }
.crow { position: absolute; bottom: calc(100% - 8px); left: calc(50% - 25px); width: 50px; }

@media (width < 768px) {
	:root { --fs-title: 1.0375rem; --fs-footer: 0.681rem; }
	#header { display: block; height: auto; padding-block: 24px 16px; }
	#contents { display: block; width: 90%; margin-top: 0; padding: 0; }
	#globalnavi { margin: 0; }
	#globalnavi ul { display: flex; flex-wrap: wrap; gap: 0 1.5em; margin-bottom: 20px; border-block: 1px dotted #ddd; }
	#globalnavi li { min-width: 0; margin-bottom: 0; }
	#globalnavi a { display: block; padding: 8px 0; }
}

@media print {
	* { background: transparent !important; color: #000 !important; box-shadow: none !important; }
	a { text-decoration: underline; }
	a[href]:not([href^="#"])::after { content: " (" attr(href) ")"; }
	tr, img { break-inside: avoid; }
	p, h1, h2 { orphans: 3; widows: 3; }
	h1, h2 { break-after: avoid; }
	@page { margin: 0.5cm; }
}