@charset "Shift_JIS";

* {
	margin: 0; padding: 0; 
	border-width: 0; list-style: inherit;
	font-size: 100%; font-weight: inherit; 
	font-style: inherit; font-family: inherit;
	text-decoration: none; text-align: inherit; 
}

:root {
	--色-背景基本: hsl(48, 15%, 90%); 
	--色-背景強調: hsl(48, 12%, 85%);
	--色-本文基本: hsla(0, 0%, 0%, 0.9);
	--色-本文弱化: hsla(0, 0%, 0%, 0.5);
	--色-本文無効: hsla(0, 0%, 0%, 0.3);
	--色-色彩主要: hsl(185, 90%, 45%);
	--色-色彩補助: hsl(203, 100%, 40%);
	--色-色彩弱化: hsla(185, 90%, 45%, 0.5);
	--色-リンク通常: hsl(249, 54%, 43%);
	--色-リンク既読: hsl(200, 50%, 40%);
	--光沢: 
		linear-gradient(
			hsla(0, 0%, 100%, 0.36) 8%, 
			hsla(0, 0%, 100%, 0.24) 32%, 
			hsla(0, 0%, 100%, 0.12) 35%, 
			hsla(0, 0%, 100%, 0.00) 70%
		);
	--光沢押下: 
		linear-gradient(
			hsla(0, 0%, 100%, 0.00),
			hsla(0, 0%, 100%, 0.36) 2%, 
			hsla(0, 0%, 100%, 0.24) 28%, 
			hsla(0, 0%, 100%, 0.12) 31%, 
			hsla(0, 0%, 100%, 0.00) 70%
		);
	--集光: 
		linear-gradient(
			hsla(0, 0%, 0%, 0.05) 96%,
			hsla(0, 0%, 0%, 0.00)
		);
	-webkit-text-size-adjust: 100%;
}

html {
	font-family: sans-serif;
	color: var(--色-本文基本); 
	background: 
		 linear-gradient(
		 	hsla(0, 0%, 0%, 0.125), 
		 	hsla(0, 0%, 0%, 0.0625) 25%, 
		 	hsla(0, 0%, 0%, 0.03125) 50%, 
		 	hsla(0, 0%, 0%, 0)
		 ) no-repeat,
		 url(mokume_t.png) 50% 0%,
		#fed
	;
	background-attachment: fixed; 
	background-size: 100% 2.5rem, 8rem 16rem; 
	line-height: 1.75; text-align: left; 
	list-style: none; overflow-wrap: break-word;
}
body {}
table { border-spacing: 0; }

/*==== 行内要素 ====*/
a { padding: 0.1em 0; border-radius: 0.2em; }
a:link { color: var(--色-リンク通常); }
a:visited { color: var(--色-リンク既読); }
a:hover, 
a:focus,
_ { color: #fff; background: var(--色-リンク通常); }
a:hover:visited, 
a:focus:visited,
_ { background: var(--色-リンク既読); }
a:hover img, 
a:focus img,
_ { opacity: 0.75; }
a:active img { opacity: 0.25; }

*, a:hover * {
	transition: 
		outline-offset 0.25s cubic-bezier(0.14, 1.66, 0.47, 0.79), 
		outline 0.125s cubic-bezier(0, 0.7, 0.3, 1),
		box-shadow 0.125s ease-out
	;
}
:not(:hover) {
	transition: 
		outline-offset 0.25s cubic-bezier(0.14, 1.66, 0.47, 0.79), 
		outline 0.125s cubic-bezier(0, 0.8, 0.2, 1),
		box-shadow 0.125s ease-out,
		background-color 0.125s ease-out,
		color 0.125s ease-out,
		opacity 0.125s ease-out,
		transform 0.125s ease-out
	;
}

ruby {}
rb {}
rt { font-size: 50%; }
rp {}
ruby:hover > rt {
	transform: scale(2); 
	background: #fff; border-radius: 0.5em;
	box-shadow: 
		0 0 0 0.125em #fff, 
		0 0 3em hsla(0, 0%, 0%, 0.1); 
	transition: transform 0.05s;
}

code {
	font-family: "Nu Nimonade", "Nu Nimono", monospace; 
	font-weight: 500;
}
var { color: var(--色-本文無効); }
em { 
	padding: 0.25em 0;
	background: rgba(0, 0, 0, 0.1);
	background: linear-gradient(
		hsla(0, 0%, 0%, 0) 66.7%,
		var(--色-色彩弱化) 66.7%
	);
}
strong { font-weight: 700; }
small { font-size: 83.33%; }
small.kakko { font-size: 90%; font-weight: 400; }
sup, sub { font-size: 80%; }
b { font-weight: bold; }
i { font-style: italic; }
.toki { font-family: "Georgia", serif; }

.style-bold { font-weight: bold;}
.style-italic { font-style: italic;}
.style-oblique { font-style: oblique;}
.style-left { text-align: left;}
.style-center { text-align: center;}
.style-right { text-align: right;}
.mark-aka { background: #fcc;}
.mark-midori { background: #cfc;}
.mark-ao { background: #ccf;}
.mark-hai { background: #ccc;}

.accent-takai { position: relative; top: -0.2em;}
.accent-hikui { position: relative; top: 0.2em;}

img { vertical-align: bottom; }
textarea { vertical-align: bottom; }

@keyframes フォーカス減衰 {
	from { outline-color: var(--色-色彩弱化); }
	to { outline-color: transparent; }
}

:not(:focus),
label :focus,
_ {
	outline: 12px dotted transparent; 
	outline-offset: 36px;
}
:focus, 
label:focus-within,
_ {
	outline: 4px dotted var(--色-色彩弱化); 
	outline-offset: 8px;
	animation: フォーカス減衰 0.25s ease-out 2s 1 forwards;
}

/*==== form 要素 ====*/

label, input[type=file] { cursor: pointer; }

select,
button,
_ {
	margin: 1px; padding: 0.1em 0.8em; 
}

select,
button,
.button,
_ {
	--明地色: hsla(0, 0%, 50%, 0.1);
	--暗地色: var(--色-色彩弱化);
	
	border: none; border-radius: 0.2em;
	cursor: pointer; user-select: none;
	color: hsla(0, 0%, 0%, 0.667);
	background: #eee;
	background: 
		var(--光沢) no-repeat left top, 
		var(--集光) left bottom, 
		var(--明地色)
	;
	background-size: 
		100% min(3em, 100%),
		100% min(30em, 1000%)
	;
	box-shadow: 
		0 0 1px 1px hsla(0, 0%, 0%, 0.25),
		inset 0 0 2px 1px hsla(0, 0%, 100%, 0.25),
		inset 0 0 8px 4px hsla(0, 0%, 100%, 0.25)
	;
}

select.強調,
button.強調,
.button.強調,
_ {
	--明地色: var(--色-色彩弱化);
}

select:active,
button:active,
.button:active,
_ {
	background: 
		var(--光沢押下) no-repeat left top, 
		var(--集光) no-repeat left bottom, 
		var(--暗地色)
	;
	background-size: 
		100% min(3em, 100%),
		100% min(30em, 1000%)
	;
	box-shadow: 
		0 0 0 1px hsla(0, 0%, 0%, 0.5),
		inset 0 0 1em 0.5em hsla(0, 0%, 0%, 0.03),
		inset 0 0 1.2px 0.6px hsla(0, 0%, 0%, 0.2)
	;
}

input[type=text],
input[type=number],
textarea:not(:focus),
textarea:focus,
_ {
	margin: 0; padding: 0.25em 0.5em; background: #fff;
	box-shadow: inset 0 0 8rem 0 hsla(0, 0%, 0%, 0);
	outline: none;
}
input[type=text]:focus,
input[type=number]:focus,
textarea:focus,
_ {
	box-shadow: inset 0 0 0 0.125rem var(--色-色彩弱化);
}
input[type=number] {
	text-align: start;
}

.hidden { display: none;}