/*==================== main ====================*/

.main h2 {
	color: #ea0039;
	font-weight: normal;
	font-size: 1.8rem;
}
.main h2 small {
	font-size: 50%;
}
.main [lang="en"] h2 {
	font-size: 1.2rem;
}

@media all and (max-width: 640px) {
	.main h2 {
		margin-bottom: 0;
		line-height: 1.2;
		text-align: center;
	}
	.main h2 small {
		display: block;
	}
	.main figure {
		margin: 1em auto;
		width: 60%;
	}

}

@media all and (min-width: 641px) {
	.main .body {
		position: relative;
	}
	.main .shoko {
		padding-left: 16rem;
	}
	.main .yasuko {
		padding-right: 16rem;
	}

	.main h2 {
		margin-bottom: 0;
	}
	.main h2 small {
		display: inline-block;
		margin-left: 0.5em;
	}
	.main figure {
		margin: 0;
		position: absolute;
		top: 0;
	}
	.main figure img[src*="shoko"] {
		width: 14.65rem;
	}
	.main figure img[src*="shoko"] {
		width: 13.95rem;
	}
	.main .shoko figure {
		left: 0;
	}
	.main .yasuko figure {
		right: 0;
	}
}

/* ==================== photos  ====================*/

.photos {
	margin-top: 3rem;
}

.photos figure img {
	width: 100%;
}

.photos figure {
	display: inline-block;
	margin: 0 1% 1% 0;
}

@media all and (max-width: 640px) {
	.photos figure {
		width: 49%;
	}
	.photos figure:nth-of-type(even) {
		margin-right: 0;
	}
}

@media all and (min-width: 641px) {
	.photos figure {
		width: 32.5%;
	}
	.photos figure:nth-of-type(3n) {
		margin-right: 0;
	}
}

/* ==================== history  ====================*/

.history {
	margin-top: 2rem;
}

.history table {
	box-sizing: border-box;
	width: 100%;
}
.history table th {
	font-weight: normal;
	text-align: left;
}
.history table th small::before {
	content: '（';
}
.history table th small::after {
	content: '）';
}

.history ul {
	margin: 0;
	padding: 0;
	list-style-position: inside;
}
.history li {
	margin-left: 1em;
	text-indent: -1em;
}
.history .media {
	color: #ea0039;
}
.history .publish {
	color: #0079cf;
}

@media all and (max-width: 640px) {
	.history table {
		padding: 1rem;
	}
	.history table th,
	.history table td {
		display: block;
	}
	.history table th {
		font-size: 140%;
	}
	.history table td {
		border-left: 1px solid rgba(255,92,124,0.3);
		margin-left: 1em;
		padding: 1em 0 2em 1em;
	}
	.history table tr:last-child td {
		padding-bottom: 1em;
	}
	.history table th small {
		margin-left: 0.25em;
		vertical-align: middle;
		font-size: 60%;
	}
	.history table figure {
		margin: 1em 0;
		text-align: center;
	}
	.history table figure:last-child {
		margin-bottom: 0;
	}
	.history table figure img {
		max-width: 16rem;
		max-height: 16rem;
	}
}

@media all and (min-width: 641px) {
	.history {
		padding: 0.5rem;
	}
	.history table {
		padding: 0.5rem;
		background: white;
	}
	.history table th,
	.history table td {
		vertical-align: top;
		padding: 1em 0 1em 1em;
	}
	.history table th {
		border-right: 1px solid rgba(255,92,124,0.3);
		width: 8.5em;
	}
	.history table td {
		position: relative;
	}
	.history table figure {
		margin: 0;
	}
	.history table figure img {
		position: absolute;
		right: 0;
		width: auto;
		height: auto;
		vertical-align: top;
	}

	.history table figure img[src*="history_1"] {
		top: 0;
		width: 14.9rem;
	}
	.history table figure img[src*="history_2"] {
		top: 100%;
		width: 11.75rem;
	}
	.history table figure img[src*="history_3"] {
		bottom: 0;
		width: 11.45rem;
		-webkit-transform: translateY(50%);
		transform: translateY(50%);
	}
	.history table figure img[src*="history_4"] {
		bottom: 50%;
		width: 15rem;
	}
	.history table figure img[src*="history_5"] {
		bottom: 0;
		width: 11.65rem;
	}
	.history table figure img[src*="history_6"] {
		bottom: 0;
		width: 11.65rem;
		-webkit-transform: translateY(10%);
		transform: translateY(10%);
	}

}