/* ==================== カレンダー ==================== */

.calendar {
	border: 1px solid #0079e3;
	border-radius: 1.5em;
	margin-top: 2em;
	overflow: hidden;
}
.calendar h3 {
	margin: 0;
	padding: 0.75em 0;
	background: #0079e3;
	color: white;
	line-height: 1;
	text-align: center;
}
.calendar h3 small {
	display: block;
	margin-top: 1em;
	font-size: 0.7em;
}

.calendar .list {
	display: table;
	border-spacing: 1em 0.5em;
	text-align: left;
}
.calendar .list h5 {
	color: #de0000;
	white-space: nowrap;
}
.calendar .list h5 small {
	display: block;
	margin-top: 0.5em;
	font-size: 70%;
}

.calendar .list::after {
	content: none;
}
.calendar .list > div {
	display: table-row-group;
}
.calendar .list > div h5,
.calendar .list > div p {
	display: table-cell;
	vertical-align: middle;
	line-height: 1.4;
}


	.calendar .body {
		margin: 0 1em;
	}
	.calendar .body > div:nth-of-type(n+2) {
		border-top: 1px solid #99c9f4;
	}



@media all and (max-width: 640px) {
	.calendar .list {
		display: inline-block;
	}
}

@media all and (min-width: 641px) {
	.calendar .m {
		display: table;
		position: relative;
		width: 100%;
	}
	.calendar .m::before {
		content: '';
		display: table-cell;
		width: 0;
		height: 9em;
	}

	.calendar .m > div {
		display: table-cell;
		vertical-align: middle;
	}

	.calendar .m > div:nth-of-type(1) {
		width: 7em;
	}

	.calendar h4 {
		margin: 0;
		text-align: center;
	}

	.calendar .list h5 {
		color: #de0000;
		font-size: 0.8em;
	}
	.calendar .list p {
		font-size: 0.65em;
	}

	.calendar .list p strong {
		font-size: 114%;
	}

	.calendar .m figure {
		position: absolute;
		z-index: 1;
		right: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		margin: 0;
	}
	.calendar .m figure img {
		max-width: none;
	}

	.calendar .m1 figure {
		margin-top: 1.5em;
	}
	.calendar .m2 figure {
		margin-right: 14em;
	}
	.calendar .m3 figure {
		margin-top: -1.5em;
		margin-right: -1.5em;
	}
	.calendar .m5 figure {
		margin-top: 3.5em;
		margin-right: -1.5em;
	}
	.calendar .m7 figure {
		margin-right: 12em;
	}
	.calendar .m9 figure {
		margin-top: 1em;
	}
	.calendar .m12 figure {
		margin-right: 12em;
	}
}


/* ==================== お正月料理 ==================== */

.s2 .title {
	margin-bottom: 2.5em;
}

.s2 .title > div:nth-of-type(2) {
	position: relative;
}
.s2 .title > div:nth-of-type(2) img {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

/* ==================== おせち料理 ==================== */

.osechi p {
	color: #8f0000;
}

@media all and (max-width: 640px) {
	.osechi p {
		padding: 0 2em;
	}
}
@media all and (min-width: 641px) {
	.osechi > div {
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		width: 33%;
		padding: 0 0.5em;
	}
	.osechi > div:nth-of-type(3n+2) {
		-webkit-transform: translateY(-2em);
		transform: translateY(-2em);
	}
}
