@charset "Shift_JIS";

:root {
	--背景幅: 78rem;
	--本文幅: 62rem;
}

html {
	max-width: var(--背景幅); margin: auto; 
	box-shadow: 
		0 -5rem 5rem hsla(0, 0%, 0%, 0.25);
}

/*==== ヘッダー ====*/

header {
	--色-背景基本: hsl(203, 100%, 25%);
	color: #fff; 
	background: 
		url(hyousi.jpg) 50% 50% no-repeat,
		var(--色-背景基本)
	;
	background-image: url(hyousi.jpg); /* Safari バグ対策 */
	background-size: cover; position: relative;
	text-shadow: 0 0 0.25rem var(--色-背景基本);
}

header h1 {
	max-width: var(--本文幅); min-height: 2rem;
	margin: 0 auto; padding: 0.7rem 2rem;
	line-height: 2rem; font-size: 1.5rem; font-weight: 400; 
}

header #ul_kousin {
	position: absolute; width: 100%; 
	top: 0.5rem; text-align: right; 
	font-size: 0.85rem; line-height: 1.2rem; 
}
header #ul_kousin > li {
	max-width: var(--本文幅); 
	margin: 0 auto; padding: 0 2rem;
}

header nav {
	max-width: var(--本文幅); min-height: 1.5rem; 
	margin: 0 auto; padding: 0 2rem; 
	overflow: hidden;
	line-height: 1.5rem; font-size: 0.85rem;
	background: hsla(0, 0%, 0%, 0.1); 
	box-shadow: 
		6rem 0 0 hsla(0, 0%, 0%, 0.1), 
		-6rem 0 0 hsla(0, 0%, 0%, 0.1)
	;
}
header nav a { color: inherit !important; }

#ol_パン屑 {
	display: inline; border-right: 0.25rem solid hsla(0, 0%, 0%, 0.1); margin-right: 1em; padding: 0.3em 1em 0.3em 0;
}
#ol_パン屑 li { display: inline-block;}
#ol_パン屑 li:first-child::after { content: "→";}
#ol_パン屑 li a { display: inline-block; padding: 0 0.5em; min-width: 2em; text-align: center;}

#ol_sib { display: inline; padding: 0.3em 0;}
#ol_sib li { display: inline-block; margin-left: -0.3em;}
#ol_sib li a { display: inline-block; padding: 0 0.5em; min-width: 2em; text-align: center;}
#ol_sib li a.imano { color: #888; background: hsla(0, 0%, 0%, 0.25); text-shadow: none; border-radius: 0;}

/*==== 本文上位 ====*/

main {
	--見出しフォント: "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
	
	margin: 0 auto; padding: 5.4rem 0; overflow: hidden;
	max-width: var(--背景幅); 
	background: var(--色-背景基本);
}

main a {
	--ホバー枠なし1: 0 0 0 0.125rem transparent;
	--ホバー枠なし2: 0 0 10rem 0 hsla(0, 0%, 0%, 0);
	--ホバー枠あり1: 0 0 0 0.125rem var(--色-背景基本);
	--ホバー枠あり2: 0 0 0 0.25rem var(--色-色彩弱化);
}

main > section { /* h2 */
	max-width: var(--本文幅); 
	margin: 0 auto 10.8em; 
	padding: 0 2rem;
	clear: both;
}
main > section > section { /* h3 */
	margin: 0 0 5.4em;
	clear: both;
}

h2 {
	margin: 0 -2rem 1.6em; padding: 0 2rem 0.5rem; 
	line-height: 1.4; font-size: 150%; 
	font-weight: bold; font-family: var(--見出しフォント); text-align: center;
	background: 
		linear-gradient(
			135deg, 
			transparent 5%,
			var(--色-色彩主要) 5%, 
			var(--色-色彩主要) 60%, 
			var(--色-色彩補助) 60%,
			var(--色-色彩補助) 95%,
			transparent 95%
		) no-repeat 50% 100%
	;
	background-size: 5rem 0.25rem;
}
h3 {
	margin: 0 -2rem 0.8em; padding: 0 2rem 0.5rem; 
	line-height: 1.4; font-size: 125%; 
	font-weight: bold; font-family: var(--見出しフォント);
	background: 
		linear-gradient(
			135deg, 
			var(--色-色彩主要) 20%,
			var(--色-色彩補助) 20%, 
			var(--色-色彩補助) 95%, 
			transparent 95%
		) no-repeat 0% 100%
	;
	background-size: 10rem 0.25rem;
}

/*==== 本文中位 ====*/

blockquote { clear: both; margin: 2em 0; padding: 0 3em; color: var(--色-本文弱化); }

ol {}
ul {}
ol.simple { clear: left; margin: 2em 0; padding-left: 2em; list-style: decimal; }
ul.simple { clear: left; margin: 2em 0; padding-left: 2em; list-style: none; }
ul.simple > li::before {
	content: "●"; color: var(--色-色彩弱化); 
	margin-left: -1.5em; position: absolute;
}
li { list-style: inherit; }

table {
	clear: both; margin: 2em auto; min-width: 33.333%; 
	border-collapse: collapse; border-right: hidden; border-left: hidden; 
	line-height: 1.4;
}
caption { text-align: center; }
colgroup { border: solid var(--色-本文無効); border-width: 0 1px; }
thead { border-bottom: 1px solid var(--色-本文無効); }
tbody { border: solid var(--色-本文無効); border-width: 1px 0; }
td { padding: 0.1em 0.5em; vertical-align: top; }
th { padding: 0.1em 0.5em; vertical-align: top; font-weight: 600; }
th.zokusei { text-align: center; }
th[scope=col] {}
th[scope=row] {}

table.semai { font-size: 83.333%; }

dl { margin: 2em 0; padding-left: 2em; }
dt { font-weight: 600; float: left; }
dt::before {
	content: "●"; color: var(--色-色彩弱化); 
	margin-left: -1.5em; position: absolute;
}
dt::after {
	content: "―"; color: var(--色-色彩弱化);
	margin: 0 0.5em;
}
dd {}

/*==== 本文下位 ====*/

table blockquote,
li blockquote
	{ margin: 0.2em 0; padding: 0.2em 0.4em;}

blockquote ol.simple, 
blockquote ul.simple,
table ol.simple, 
table ul.simple,
li ol.simple, 
li ul.simple
	{ margin: 0.2em 0;}

blockquote li,
table li,
li li
	 { margin: 0;}

blockquote table,
li table
	{ margin: 0.2em 0;}

/*==== 本文最下位 ====*/

p { margin: 0 0 1.5em;}
.plain p { text-indent: 0; margin: 0;}
p.obj {
	clear: both; margin: 2em calc(-0.5 * (var(--背景幅) - var(--本文幅))); 
	text-indent: 0; text-align: center; overflow: auto;
}
p.obj.outerbounds { margin: 2em calc(-0.5 * (var(--背景幅) - var(--本文幅)));}
p.obj.innerbounds { margin: 2em 0;}
p.obj.shrink img { max-width: 100%;}
p.obj object { text-align: left;}
hr { height: 0; margin: 3.5em auto; visibility: hidden;}


div.obj {
	display: flex; overflow: auto show;
	justify-content: center;
	margin: 2em -2rem; flex-flow: row wrap;
}
div.obj figure {
	margin: calc(var(--本文幅) * 0.016);
}
div.obj figure a {
	display: flex; 
	align-items: center; justify-content: center;
	height: calc(var(--本文幅) * 0.3); 
	margin: 0; padding: 0; border-radius: 0.01px;
	background: var(--色-背景強調);
}
div.obj figure img {
	max-width: min(100%, calc(var(--本文幅) * 0.9)); 
	max-height: calc(var(--本文幅) * 0.3);
	opacity: 1; width: auto; height: auto;
}

div.obj figure a {
	box-shadow: var(--ホバー枠なし1), var(--ホバー枠なし2);
	outline: none;
}
div.obj figure a:hover,
div.obj figure a:focus,
_ {
	box-shadow: var(--ホバー枠あり1), var(--ホバー枠あり2);
	position: relative; 
	background: var(--色-背景強調);
}

div.obj figure figcaption {
	width: 100%; max-width: calc(var(--本文幅) * 0.3);
	margin: 0.5em auto; font-size: 83.33%;
}