/* ==================== Contents.css ==================== */

.Contents {
	position: relative;
	margin: 2em auto;
	padding-bottom: 4em;
}

.Contents h2 {
	margin: 1em 0;
}

.Contents h3 {
	margin: 1.5em 0;
	font-family: 'Shin Maru Go DemiBold';
}

.Illust[data-category="human"] .Contents h3 {
	color: #ff6969;
}
.Illust[data-category="food"] .Contents h3 {
	color: #FF9900;
}
.Illust[data-category="events"] .Contents h3 {
	color: #2CB300;
}

.Contents .print a {
	display: inline-block;
	position: absolute;
	right: 1em;
	background: none;
	border: none;
	margin: 0;
	cursor: pointer;
}

.Contents .print a:nth-of-type(1) {
	top: 0;
	transform: translate(0, 50%);
}

.Contents .print a:nth-of-type(2) {
	bottom: 0;
}


@media all and (max-width: 640px) {
	.Contents h2 {
		margin: 1em;
		text-align: left;
	}
}


@media all and (min-width: 641px) {
	.Contents h3 {
		font-size: 150%;
	}
}



/* ==================== Menu.css ==================== */

.Menu {
	position: relative;
}

.Menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.Menu ul li {
	padding: 1em 0 0;
}

.Menu ul a {
	display: block;
	width: 100%;
	padding-bottom: 1em;
	color: #E0993C;
	transition: color 150ms ease;
}
.Menu ul a,
.Menu ul a small {
	font-family: 'Shin Maru Go Bold';
}

.Illust[data-category=all] .Menu ul a[href$="all/"],
.Illust[data-category=human] .Menu ul a[href$="human/"],
.Illust[data-category=food] .Menu ul a[href$="food/"],
.Illust[data-category=events] .Menu ul a[href$="events/"],
.Illust[data-category=plant] .Menu ul a[href$="plant/"] {
	background: url(../images/listmenu_on.svg) no-repeat center bottom;
	background-size: 90% auto;
}

.Illust[data-category=all] .Menu ul a[href$="all/"],
.Menu ul a[href$="all/"]:hover {
	color: #0065C4;
}
.Illust[data-category=human] .Menu ul a[href$="human/"],
.Menu ul a[href$="human/"]:hover {
	color: #FF6969;
}
.Illust[data-category=food] .Menu ul a[href$="food/"],
.Menu ul a[href$="food/"]:hover {
	color: #ff9900;
}
.Illust[data-category=events] .Menu ul a[href$="events/"],
.Menu ul a[href$="events/"]:hover {
	color: #2cb300;
}
.Illust[data-category=plant] .Menu ul a[href$="plant/"],
.Menu ul a[href$="plant/"]:hover {
	color: #219cff;
}

.Menu ul li.comingsoon a {
	position: relative;
	opacity: 0.6;
}

.Menu ul li.comingsoon a::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0.25em;
	width: 100%;
	height: 0.45em;
	background: url(../images/comingsoon.svg) no-repeat center center;
	background-size: contain;
	opacity: 0;
	transition: opacity 0.1s linear;
}

.Menu ul li.comingsoon a:hover::before {
	opacity: 1;
}

@media all and (max-width: 640px) {
	.Menu ul {
		display: none;
	}
	.Menu .totop {
		margin-top: 0.5em;
	}
	.Menu .totop img {
		width: 7em;
	}
}

@media all and (min-width: 641px) {
	.Menu {
		margin-top: 2em;
	}
	.Menu .totop {
		position: absolute;
		left: 0;
		top: 0;
		transform: translate(1.5em, -2.5em);
	}

	.Menu ul {
		display: inline-table;
		table-layout: fixed;
		width: 500px;
		background: url(../images/listmenu_border.png) no-repeat right center;
	}

	.Menu ul::after {
		content: none;
	}

	.Menu ul li {
		display: table-cell;
		vertical-align: middle;
		background: url(../images/listmenu_border.png) no-repeat left center;
	}

	.Menu ul a {
		font-size: 20px;
		line-height: 1.2;
		transform: rotate(0.1deg);
	}

	.Menu ul a[href$='season'],
	.Menu ul a[href$='school'] {
		font-size: 15px;
	}

	.Menu ul small {
		display: block;
		font-size: 14px;
	}
}



/* ==================== tab.css ==================== */

.TabMenu {
	margin: 1.5em 0 0;
}
.Illust[data-category="plant"] .TabMenu {
	display: none;
}

ul.TabContents {
	margin-top: -1px;
	padding: 1em;
	border-radius: 1em;
	background: #ffde7a;
}


.Tab:not(.selected) .TabContents,
.Tab:not(.selected) .TabContents + h3 {
	display: none;
}

@media all and (max-width: 640px) {
	.TabMenu {
		margin-bottom: 1em;
	}
}

@media all and (min-width: 641px) {
	.TabMenu .menu {
		position: relative;
		margin-bottom: 0.75em;
	}
	.Tab.selected .TabMenu {
		overflow: hidden;
		margin-bottom: 0;
		padding-bottom: 	1em;
	}
	.TabMenu .menu.selected::after {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		top: 100%;
		width: 2.5em;
		height: 2.5em;
		border-radius: 0.1em;
		transform: translate(-50%, 0.5em) rotate(45deg);
		background: #ffde7a;
	}
}