@font-face {
	font-family: 'noto';
	src: url('noto.woff') format('woff');
}

@font-face {
	font-family: 'fa';
	src: url('fa.woff') format('woff');
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	position: relative;
	line-height: 1.5;
	font-family: 'YuGothic', 'Meiryo', 'Hiragino Kaku Gothic Pro', sans-serif;
	-webkit-overflow-scrolling: touch;
}

a:hover {
	color: #2b8;
}


/* Menu */
.menu, .menu-label {
	display: none;
}


/* Drawer */
.drawer {
	position: absolute;
	top: 142px;
	z-index: 2;
}

.ul {
	margin: 14px 0 0 10px;
	padding: 0;
	list-style: none;
	overflow: auto;
}

.ul li {
	position: relative;
	border: 2px solid #666;
	border-radius: 3px;
	box-sizing: border-box;
	width: 168px;
	background: linear-gradient(135deg, #daefff, #b6e0ff 10%, #daefff, #b6e0ff 40%, #daefff, #b6e0ff 90%);
	margin-bottom: 12px;
}

.ul li a {
	display: block;
	color: #333;
	text-decoration: none;
	padding: 12px 0 6px;
	font-size: 13px;
	text-align: center;
	line-height: 16px;
}

.ul li i {
	position: absolute;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	top: 8px;
	left: 8px;
	padding: 2px;
	width: 1em;
	color: #fff;
	background: #69c;
}

.ul li b {
	position: absolute;
	left: 2em;
	font-size: 16px;
}

.ul li:nth-child(2) b,
.ul li:nth-child(3) b {
	letter-spacing: 0.7em;
	margin-right: -0.7em;
}

.ul li:nth-child(5) b,
.ul li:nth-child(8) b,
.ul li:nth-child(9) b {
	letter-spacing: 0.25em;
	margin-right: -0.25em;
}

.ul li a::before {
	border: 5px solid #fff;
	border-right-color: #809db3;
	border-bottom-color: #809db3;
	border-radius: 1px;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	content: "";
}

.ul li.active a {
	color: #537;
}

.ul li.active i {
	background: #537;
}

.ul li a:hover {
	color: #09f;
	transition: color .2s ease-out;
}

.ul li a:hover::before {
	opacity: 0.6;
}

.ul li a:hover i {
	background: #09f;
}

.ul li a:active::before {
	border: 0;
}


/* Icon Menu */
.i-menu {
	margin: 0 auto 10px;
	padding: 0;
	list-style: none;
	font-size: 0;
	text-align: center;
}

.i-menu li {
	display: inline-block;
	vertical-align: top;
	user-select: none;
}

.i-menu li a {
	display: inline-block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-image: linear-gradient(#def, #acf);
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
	border-bottom: solid 2px #aaa;
}

.i-menu li:nth-child(1) a {
	background-image: linear-gradient(#ffddee, #ffaacc);
}

.i-menu li:nth-child(2) a {
	background-image: linear-gradient(#fee6e6, #ffbebe);
}

.i-menu li:nth-child(3) a {
	background-image: linear-gradient(#ffeedd, #ffccaa);
}

.i-menu li:nth-child(4) a {
	background-image: linear-gradient(#ddffee, #aaffcc);
}

.i-menu li:nth-child(5) a {
	background-image: linear-gradient(#e6fee6, #beffbe);
}

.i-menu li:nth-child(6) a {
	background-image: linear-gradient(#eeffdd, #ccffaa);
}

.i-menu li:nth-child(7) a {
	background-image: linear-gradient(#ddeeff, #aaccff);
}

.i-menu li:nth-child(8) a {
	background-image: linear-gradient(#e6e6fe, #bebeff);
}

.i-menu li:nth-child(9) a {
	background-image: linear-gradient(#eeddff, #ccaaff);
}

.i-menu li a:hover {
	background-image: linear-gradient(#ffc, #ff9);
}

.i-menu li a:active {
	box-shadow: none;
}

.i-menu li svg {
	display: block;
	position: relative;
	top: 16px;
	left: 16px;
	width: 48px;
	height: 48px;
	overflow: hidden; /* for IE11 */
}

.i-menu li b {
	display: block;
	position: relative;
	top: 4px;
	font-size: 12px;
	font-weight: normal;
	width: 8em;
	height: 3em;
	line-height: 1.2;
}


/* Content */
.content {
	position: relative;
	height: 100%;
}


/* Header */
header {
	display: flex;
	align-items: center;
	position: relative;
	height: 142px;
	min-width: 480px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

header > img {
	margin-left: 8px;
	width: 177px;
	height: 96px;
}

header i {
	position: absolute;
	top: 0;
	left: 185px;
	bottom: 0;
	right: 0;
	background: linear-gradient(270deg, #195e21 390px, #fff);
}

header i img {
	display: block;
	margin-left: auto;
}

h1 {
	position: absolute;
	margin: 0;
	top: 13px;
	left: 185px;
	bottom: 0;
	right: 0;
	font-family: 'noto', sans-serif;
	text-shadow: 2px 2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff, -2px -2px 2px #fff;
	white-space: nowrap;
	font-weight: normal;
	text-align: center;
	color: #33c;
	font-size: 24.2px;
}

h1::first-line {
	color: #000;
	font-size: 52.8px;
}

.nav {
	width: 190px;
	min-height: 610px;
	background: #f3f3f3;
	box-shadow: 4px 0 4px -4px #333;
}


/* Breadcrumb Navigation */
.breadcrumb ul {
	margin: 4px 20px;
	padding: 4px 0 10px;
}

.breadcrumb li {
	display: inline;
	list-style: none;
}

.breadcrumb li:not(:first-child)::before {
	font-size: 14px;
	color: #363;
	content: '/';
	padding: 0 0.5em;
}


/* Main */
main {
	display: block; /* for IE11 */
	padding: 0 20px;
	min-width: 480px;
}

.label {
	display: flex;
	align-items: baseline;
}

.label .update {
	margin-left: auto;
	font-style: normal;
}

.tag {
	display: inline-block;
	color: #fff;
	background: #333;
	width: 5em;
	text-align: center;
	font-size: 1.3em;
}


/* Star Rating */
.rating {
	position: relative;
	display: inline-block;
	font-size: 20px;
	text-shadow: 0 1px 0 #aaa;
	font-style: normal;
	margin-left: 0.3em;
}

.rating i {
	position: absolute;
	overflow: hidden;
	font-style: normal;
	color: #fb0;
}

.rating i::after,
.rating::after {
	content: "\2605\2605\2605\2605\2605";
}

.rating::after {
	color: #ccc;
}

.rating.s0 i {width: 0%}
.rating.s1 i {width: 10%}
.rating.s2 i {width: 20%}
.rating.s3 i {width: 30%}
.rating.s4 i {width: 40%}
.rating.s5 i {width: 50%}
.rating.s6 i {width: 60%}
.rating.s7 i {width: 70%}
.rating.s8 i {width: 80%}
.rating.s9 i {width: 90%}
.rating.s10 i {width: 100%}


/* Data Title */
.title {
	margin-bottom: 6px;
	padding: 8px;
	padding-bottom: 5px;
	border: 1px #666 solid;
	border-bottom: 3px solid #6ae;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.title h2 {
	margin: 0;
	font-size: 20px; 
}

.title img {
	margin-top: 4px;
	max-width: 450px;
	max-height: 300px;
}


/* Main Table */
.table {
	margin: 0 auto;
	border-collapse: collapse;
}

.table th,
.table td {
	border: 1px #666 solid;
	padding: 10px;
}

.table th {
	text-align: left;
	white-space: nowrap;
	background: repeating-linear-gradient(45deg, #fff, #fff 2px, #eee 2px, #eee 4px);
}

.table td {
	width: 100%;
}

.author-info {
	display: block;
	margin-top: 2px;
	text-align: right;
	font-weight: normal;
}


/* Icon */
a[href$=".pdf"]::before,
.external::after,
.text::before,
.image::before,
.video::before,
.download::after {
	font-family: 'fa';
	vertical-align: -8%;
	width: 1.2em;
	text-align: center;
	display: inline-block;
	color: #09c;
}

a[href$=".pdf"]:hover::before,
.external:hover::after,
.text:hover::before,
.image:hover::before,
.video:hover::before,
.download:hover::after {
	opacity: 0.6;
}

a[href$=".pdf"]::before {
	content: "\e900";
	color: #f00;
}

.external::after {
	content: "\e901";
}

.text::before {
	content: "\e902";
}

.image::before {
	content: "\e903";
}

.video::before {
	content: "\e904";
}

.download::after {
	content: "\e905";
}

/* for IE11 */
a::before,a::after {text-decoration: underline;}
a::before,a::after {text-decoration: none;}


/* Footer */
footer {
	margin: 0;
	padding: 10px 0;
	text-align: center;
	color: #666;
	font-size: 14px;
}


/* ######################## */
/* #### for Index Page #### */
/* ######################## */
.index h2 {
	margin: 0;
	margin-bottom: 20px;
}

.index h2 i {
	display: inline-block;
	font-style: normal;
	color: #fff;
	background: #69c;
	width: 52px;
	line-height: 48px;
	text-align: center;
	margin: 0 0.5em 0 2px;
	font-size: 32px;
	border: 1px solid #fff;
	box-shadow: 0 0 0 2px #69c;
}

.index h2 b {
	font-size: 0.84em;
}

.index h3 {
	padding: 20px 10px;
	background: repeating-linear-gradient(45deg, #fff, #fff 2px, #eee 2px, #eee 4px);
	margin-bottom: 0;
	border: 1px solid #666;
	border-bottom: none;
}

.list {
	margin: 0 auto;
	border-collapse: collapse;
}

.list th,
.list td {
	border: 1px solid #666;
}

.list th {
	padding: 5px;
	min-width: 100px;
}

.list td {
	padding: 10px;
	width: 100%;
}

.list img {
	max-width: 100px;
	max-height: 70px;
}

.list .no-img {
	width: 70px;
}

.list .tag {
	margin-bottom: 1px;
	font-size: 1em;
}

.list .rating {
	font-size: 1em;
}

.list time {
	display: inline-block;
	margin-left: 0.5em;
	color: #69c;
	font-size: 0.8em;
	font-style: normal;
}

.list time::before {
	content: '[';
}

.list time::after {
	content: ']';
}

.list .author {
	color: #69c;
	font-weight: normal;
}


/* ###################### */
/* #### for Top Page #### */
/* ###################### */
.about {
	margin: 4px;
	padding: 20px;
	box-shadow: 0 0 4px #666;
	border-radius: 5px;
	font-size: small;
}

.about p {
	margin-top: 0;
	margin-bottom: 0;
	text-indent: 1em;
	color: #333;
}

.about p.ja {
	color: #00c;
}

.about p.en {
	font-family: 'Arial';
	line-height: 1.2;
}

.about p.mt1 {
	margin-top: 1em;
}

.about p.pl {
	padding-left: 6em;
	text-indent: 0;
	word-break: break-all;
}

.about hr {
	border-top: 1px solid #bbb;
	border-bottom: 0;
}


/* Grid (all) for IE11 */
.content {
	display: -ms-grid;
	-ms-grid-columns: auto 1fr;
	-ms-grid-rows: auto auto auto auto 1fr;
}

header {
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	-ms-grid-row: 1;
}

.nav {
	-ms-grid-column: 1;
	-ms-grid-row: 2;
	-ms-grid-row-span: 4;
}

.breadcrumb {
	-ms-grid-column: 2;
	-ms-grid-row: 2;
}

main {
	-ms-grid-column: 2;
	-ms-grid-row: 3;
}

footer {
	-ms-grid-column: 2;
	-ms-grid-row: 4;
}


/* Grid (all) */
.content {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto auto auto 1fr;
}

header {
	grid-column-start: 1;
	grid-column-end: span 2;
	grid-row-start: 1;
}

.nav {
	grid-column-start: 1;
	grid-row-start: 2;
	grid-row-end: span 4;
}

.breadcrumb {
	grid-column-start: 2;
	grid-row-start: 2;
}

main {
	grid-column-start: 2;
	grid-row-start: 3;
}

footer {
	grid-column-start: 2;
	grid-row-start: 4;
}


/* ################### */
/* #### .. 1111px #### */
/* ################### */
@media (max-width: 1111px) {

.i-menu {
	max-width: 560px;
}

} /* #### @media (.. 1111px) #### */


/* ##################### */
/* #### .. 959.98px #### */
/* ##################### */
@media (max-width: 959.98px) {

/* Menu */
.menu-label {
	display: block;
	position: absolute;
	top: 10px;
	left: 15px;
	z-index: 9;
	color: #579;
	width: 70px;
	height: 70px;
	border: 2px solid #579;
	border-radius: 50%;
	cursor: pointer;
	user-select: none;
}

.menu-label:hover {
	border-color: #2b8;
	color: #2b8;
}

.menu-label:hover i,
.menu-label:hover i::before,
.menu-label:hover i::after {
	background: #2b8;
}

.menu-label i,
.menu-label i::before,
.menu-label i::after {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 4px;
	width: 35px;
	background: #579;
	content: '';
	transition: all .3s ease-out;
}

.menu-label i {
	transform: translate(-50%, -2px);
}

.menu-label i::before {
	transform: translate(-50%, -14px);
}

.menu-label i::after {
	transform: translate(-50%, 10px);
}

.menu:focus ~ .menu-label,
.menu:checked ~ .menu-label {
	border-color: #2b8;
	color: #2b8;
}

.menu:checked ~ .menu-label i {
	background: transparent;
}

.menu:checked ~ .menu-label i::before,
.menu:checked ~ .menu-label i::after {
	top: 0;
}

.menu:checked ~ .menu-label i::before {
	transform: translateX(-50%) rotate(45deg);
}

.menu:checked ~ .menu-label i::after {
	transform: translateX(-50%) rotate(-45deg);
}


/* Overlay */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	opacity: 0;
	background: rgba(0, 0, 0, 0.2);
	transition: opacity .3s ease-out;
}

.menu:checked ~ .overlay {
	width: 100%;
	height: 100%;
	opacity: 1;
	z-index: 1;
}


/* Drawer */
.drawer {
	top: 0;
	left: 0;
	height: 100%;
	width: 220px;
	background: rgba(0, 0, 0, 0.8);
	transition: transform .2s ease-out;
	transform: translate(-100%, 0);
}

.menu:checked ~ .drawer {
	transform: translate(0, 0);
}


/* Content */
.menu:checked ~ .content {
	overflow: auto;
	-webkit-overflow-scrolling: auto;
}

header > img {
	display: none;
}

.nav {
	display: none;
}

/* Grid (..959.98px) for IE11 */
.content {
	-ms-grid-columns: 1fr;
}

header, .breadcrumb, main, footer {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
}

.breadcrumb {
	-ms-grid-row: 2;
}

main {
	-ms-grid-row: 3;
}

footer {
	-ms-grid-row: 4;
}

/* Grid (..959.98px) */
.content {
	grid-template-columns: 1fr;
}

header, .breadcrumb, main, footer {
	grid-column-start: 1;
	grid-column-end: span 1;
}

.breadcrumb {
	grid-row-start: 2;
}

main {
	grid-row-start: 3;
}

footer {
	grid-row-start: 4;
}


} /* #### @media (.. 959.98px) #### */


/* ######################### */
/* #### 600 .. 959.98px #### */
/* ######################### */
@media (min-width: 600px) and (max-width: 959.98px) {

.drawer ul {
	margin-top: 102px;
	height: calc(100vh - 102px);
}

header {
	height: 94px;
}

header i {
	left: 106px;
	background: linear-gradient(270deg, #195e21 260px, #fff);
}

header i img {
	width: 260px;
	height: 94px;
}

h1 {
	top: 10px;
	left: 80px;
	text-shadow: 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff;
	font-size: 16px;
}

h1::first-line {
	font-size: 34px;
}


} /* #### @media (600 .. 959.98px) #### */


/* ##################### */
/* #### .. 599.98px #### */
/* ##################### */
@media (max-width: 599.98px) {

.menu-label {
	top: 4px;
	left: 4px;
	width: 60px;
	height: 60px;
}

.menu-label i,
.menu-label i::before,
.menu-label i::after {
	width: 30px;
}

.drawer ul {
	margin-top: 79px;
	height: calc(100vh - 79px);
}

.i-menu li {
	padding: 6px 28px;
}

header {
	height: 71px;
}

header i {
	left: 72px;
	background: linear-gradient(270deg, #195e21 195px, #fff);
}

header i img {
	width: 195px;
	height: 71px;
}

h1 {
	top: 5px;
	left: 50px;
	text-shadow: 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff;
	font-size: 13px;
}

h1::first-line {
	font-size: 28px;
}

.breadcrumb ul {
	margin: 4px 12px;
}

main {
	padding: 0 12px;
}

.table tr,
.table th,
.table td {
	display: block;
}

.table {
	border: 1px solid #666;
	width: 100%;
}

.table th,
.table td {
	border-style: none;
	padding: 8px;
}

.table tr {
	margin-bottom: 16px;
}

.table th {
	border-bottom: 1px solid #ccc;
}

.table tr:not(:first-child) th {
	border-top: 1px solid #ccc;
}

.table th br {
	display: none;
}

.table td {
	width: auto;
}


/* for Top Page */
.about p.pl {
	padding-left: 3em;
}


} /* #### @media (.. 599.98px) #### */