@charset "UTF-8";

/* ================================================================================

		基幹のスタイル調整

================================================================================ */

* {
	margin: 0;
	padding: 0;
}

body {
	text-align: center;
	padding-bottom: 4em;
}

/* ================================================================================

		ブロックレベル要素のスタイル調整

================================================================================ */

/* ========================================

		見出し要素のスタイル調整

======================================== */

h1 {
	background-color: #333;
	line-height: 100%;
	padding: 2em 0;
	color: #eee;
}

h2 {
	font-size: 4em;
}

/* ========================================

		段落要素のスタイル調整

======================================== */

p#OLDINFO {
	margin: 0 20% 3em;
	text-align: right;
}


/* ========================================

		リスト要素のスタイル調整

======================================== */

ul, ol {
	margin-bottom: 2%;
}

dl {
	margin: 0 20% 1em;
	text-align: justify;
	line-height: 1.5em;
}

dt {
	font-weight: bold;
}

dd+dt {
	margin-top: 0.5em;
}

dd {
	margin-left: 2em;
}

@media screen and (min-width: 800px) {
	li {
		display: inline-block;
	}

	ol li:first-child {
		width: 340px !important;
	}

	ol li:nth-child(even) {
		vertical-align: top;
		position: absolute;
		width: 170px;
	}

	ol li:nth-child(odd) {
		width: 170px;
		margin-right: 0.5em;
	}

	ol li:last-child {
		position: static;
	}

	ul#CONTENTS {
		background-color: #fff;
		margin: 0 0 15px 0;
		font-size: 0;
		border-top: solid 1px #333;
		border-bottom: solid 1px #333;
	}

	ul#CONTENTS li {
		font-size: 1rem;
		border-left: solid 1px #333;
	}

	ul#CONTENTS li:last-child {
		border-right: solid 1px #333;
	}
}

/* ================================================================================

		インラインレベル要素のスタイル調整

================================================================================ */

strong {
	font-size: 150%;
}

/* ========================================

		アンカー要素のスタイル調整

======================================== */

a {
	color: #00f;
	text-decoration: underline;
}

a:visited {
	color: #606;
}

a:hover {
	text-decoration: none;
}

@media screen and (min-width: 800px) {
ul#CONTENTS li a {
	background-color: #fff;
	display: block;
	padding: 1em 2em;
	color: #00f;
	text-decoration: underline;
}

ul#CONTENTS li a:visited {
	color: #606;
}

ul#CONTENTS li a:hover {
	background-color: #333;
	color: #fff;
	text-decoration: none;
}
}

a:hover img {
	opacity: 0.7;
	transition: 0.2s;
}

ol li a {
	font-size: 0;
}

/* ========================================

		イメージ要素のスタイル調整

======================================== */

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

ol li a img {
	font-size: 1rem;
}

h1 img {
	border: none;
}

@media screen and (min-width: 800px) {
img {
	border: solid 1px #000;
}
}