/* ==================== ShokuikuCalendarSubwin/&.overflow.css ==================== */

.ShokuikuCalendarSubwin.overflow {
	align-items: start;
	height: 100%;
}


.ShokuikuCalendarSubwin.overflow .frame {
	height: 100%;
}


.ShokuikuCalendarSubwin.overflow .frame .content {
	height: 100%;
	overflow: scroll;
}



/* ==================== ShokuikuCalendarSubwin/@.css ==================== */

.ShokuikuCalendarSubwin {
	display: flex;
	position: fixed;
	z-index: 9001;
	left: 0;
	top: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 100%;
	padding: 1em;
	background: rgba(1,1,1,0.3);
	color: black;
}

.ShokuikuCalendarSubwin.foods {
	padding-top: 1.5em;
}



/* ==================== ShokuikuCalendarSubwin/@animation.css ==================== */

.ShokuikuCalendarSubwin:not(.show) {
	height: 100%;
}

.ShokuikuCalendarSubwin:not(.show)::before {
	content: '';
	display: block;
	position: absolute;
	left: calc(50% - 2em);
	top: calc(50% - 2em);
	width: 4em;
	height: 4em;
	background: url(../images/loading.svg) no-repeat center center;
	background-size: contain;

	-webkit-animation-name: loading;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;

	animation-name: loading;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.ShokuikuCalendarSubwin:not(.show) .frame {
	transform: scale(0.96);
	opacity: 0;
}

.ShokuikuCalendarSubwin.show .frame {
	transform: none;
	opacity: 1;
	transition: all 150ms ease 50ms;
}


@-webkit-keyframes loading {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes loading {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}



/* ==================== ShokuikuCalendarSubwin/@responsive.css ==================== */

@media (max-width: 640px) {
	.ShokuikuCalendarSubwin,
	.ShokuikuCalendarSubwin img {
		font-size: 4vw;
	}
}


@media (min-width: 641px) {
	.ShokuikuCalendarSubwin,
	.ShokuikuCalendarSubwin img {
		font-size: 20px;
	}
}



/* ==================== ShokuikuCalendarSubwin/body/@.css ==================== */

@media (max-width: 640px) {

	.ShokuikuCalendarSubwin .body {
		padding: 0 1em;
		text-align: center;
	}

}


@media (min-width: 641px) {

	.ShokuikuCalendarSubwin .body {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: max-content 1fr;
		grid-template-columns: max-content 1fr;
		align-items: start;
		padding: 0 1.5em;
	}

	.ShokuikuCalendarSubwin.events .body,
	.ShokuikuCalendarSubwin.foods .body {
		width: 29em;
	}
	.ShokuikuCalendarSubwin.anniversaries .body {
		width: 33em;
	}

	.ShokuikuCalendarSubwin .body .text {
		-ms-grid-column: 2;
		-ms-grid-row: 1;
		grid-column: 2;
		grid-row: 1;
		margin-left: 1em;
	}

	.ShokuikuCalendarSubwin .body .image {
		-ms-grid-column: 1;
		-ms-grid-row: 1;
		grid-column: 1;
		grid-row: 1;
	}

	.ShokuikuCalendarSubwin .body .recipes {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		-ms-grid-row: 2;
		grid-column: 1/3;
		grid-row: 2;
	}

	.ShokuikuCalendarSubwin .body.hasBanner .text {
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		grid-row: 1/3;
	}

	.ShokuikuCalendarSubwin .body.hasBanner .recipes {
		-ms-grid-row: 3;
		grid-row: 3
	}

}



/* ==================== ShokuikuCalendarSubwin/body/banner.css ==================== */

@media (min-width: 641px) {

	.ShokuikuCalendarSubwin .body .banner {
		margin: 1em 0;
		text-align: center;
	}
	.ShokuikuCalendarSubwin .body .banner img {
		width: 16em;
	}

}

.ShokuikuCalendarSubwin .body#anniversary151 .banner {
	border: 1px solid #ccc;
}


@media (max-width: 640px) {

	.ShokuikuCalendarSubwin .body .banner {
		-ms-grid-column: 1;
		-ms-grid-row: 2;
		grid-column: 1;
		grid-row: 2;
		-ms-grid-row-align: center;
		align-self: center;
		margin: 1em 0;
		text-align: center;
	}
	.ShokuikuCalendarSubwin .body .banner img {
		width: 12.8em;
	}

}


@media (min-width: 641px) {

	.ShokuikuCalendarSubwin .body .banner img {
		width: 14em;
	}

}



/* ==================== ShokuikuCalendarSubwin/body/image.css ==================== */

.ShokuikuCalendarSubwin .body .image figure {
	margin: 0;
}


@media (max-width: 640px) {
	.ShokuikuCalendarSubwin .body .image figure {
		padding: 1em;
	}
	.ShokuikuCalendarSubwin .body .image img {
		width: 100%;
	}

	.ShokuikuCalendarSubwin .body .image img[src*="events"] {
		width: 80%;
	}
}


@media (min-width: 641px) {


	.ShokuikuCalendarSubwin.anniversaries .body .image img {
		width: 14em;
	}

}



/* ==================== ShokuikuCalendarSubwin/body/recipes/@.css ==================== */

.ShokuikuCalendarSubwin .body .recipes {
	margin-top: 1em;
	padding: 1em;
	background: url(../images/recipes_back.png);
	background-size: 1.5em;
	text-align: center;
}

.ShokuikuCalendarSubwin .body .recipes > * {
	display: inline-block;
	vertical-align: top;
}

.ShokuikuCalendarSubwin .body .recipes h4 {
	margin: 0;
	text-align: center;
}


@media (max-width: 640px) {

	.ShokuikuCalendarSubwin .body .recipes h4 {
		width: 100%;
	}

}

@media (min-width: 641px) {


	.ShokuikuCalendarSubwin .body .recipes.wrap {
		text-align: left;
	}

	.ShokuikuCalendarSubwin .body .recipes > * {
		width: 31%;
	}

}



/* ==================== ShokuikuCalendarSubwin/body/recipes/recipe/@.css ==================== */

.ShokuikuCalendarSubwin .body .recipes .recipe {
	text-align: center;
}
.ShokuikuCalendarSubwin .body .recipes .recipe a {
	color: inherit;
	text-decoration: none;
}
.ShokuikuCalendarSubwin .body .recipes .recipe .base {
	padding: 0.5em;
	background: white;
	box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

.ShokuikuCalendarSubwin .body .recipes .recipe .pic figure {
	margin: 0;
}

.ShokuikuCalendarSubwin .body .recipes .recipe .name {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6em;
	margin-top: 0.5em;
	line-height: 1.3;
}
.ShokuikuCalendarSubwin .body .recipes .recipe .name span {
	text-align: left;
}

.ShokuikuCalendarSubwin .body .recipes .recipe .link {
	margin-top: 0.5em;
}


@media (max-width: 640px) {
	.ShokuikuCalendarSubwin .body .recipes .recipe {
		margin-top: 1em;
		width: 48%;
	}
	.ShokuikuCalendarSubwin .body .recipes .recipe:nth-of-type(even) {
		margin-left: 4%;
	}
	.ShokuikuCalendarSubwin .body .recipes .recipe .name {
		font-size: 80%;
	}
}


@media (min-width: 641px) {
	.ShokuikuCalendarSubwin .body .recipes .recipe:nth-of-type(n+3) {
		margin-top: 0.5em;
	}
	.ShokuikuCalendarSubwin .body .recipes .recipe:not(:nth-of-type(3n)) {
		margin-left: 3.5%;
	}

	.ShokuikuCalendarSubwin .body .recipes .recipe .name {
		font-size: 60%;
	}
}



/* ==================== ShokuikuCalendarSubwin/body/text/<h3>.css ==================== */

.ShokuikuCalendarSubwin .body .text h3 {
	margin: 0;
}
.ShokuikuCalendarSubwin .body .text h3 time {
	display: block;
}
.ShokuikuCalendarSubwin .body .text h3 ruby {
	margin-top: 0.75em;
}

.ShokuikuCalendarSubwin .body[data-month="1"] .text h3 time {
	color: #F04F4F;
}
.ShokuikuCalendarSubwin .body[data-month="2"] .text h3 time {
	color: #788FFF;
}
.ShokuikuCalendarSubwin .body[data-month="3"] .text h3 time {
	color: #88BA00;
}
.ShokuikuCalendarSubwin .body[data-month="4"] .text h3 time {
	color: #FF87AF;
}
.ShokuikuCalendarSubwin .body[data-month="5"] .text h3 time {
	color: #4791FF;
}
.ShokuikuCalendarSubwin .body[data-month="6"] .text h3 time {
	color: #E3A300;
}
.ShokuikuCalendarSubwin .body[data-month="7"] .text h3 time {
	color: #4ABF06;
}
.ShokuikuCalendarSubwin .body[data-month="8"] .text h3 time {
	color: #17ABEB;
}
.ShokuikuCalendarSubwin .body[data-month="9"] .text h3 time {
	color: #F78D00;
}
.ShokuikuCalendarSubwin .body[data-month="10"] .text h3 time {
	color: #16AD73;
}
.ShokuikuCalendarSubwin .body[data-month="11"] .text h3 time {
	color: #D17A00;
}
.ShokuikuCalendarSubwin .body[data-month="12"] .text h3 time {
	color: #D94EE6;
}


/* foods */

.foods.ShokuikuCalendarSubwin .body .text h3 img {
	position: absolute;
	z-index: 1;
	top: 0;
}

.foods.ShokuikuCalendarSubwin .body .text h3::before {
	display: inline-block;
	margin-right: -0.2em;
	content: '●';
	transform: scale(0.9);
}
.foods.ShokuikuCalendarSubwin .body[data-season="1"] .text h3::before {
	color: #ffa1d1;
}
.foods.ShokuikuCalendarSubwin .body[data-season="2"] .text h3::before {
	color: #6ec700;
}
.foods.ShokuikuCalendarSubwin .body[data-season="3"] .text h3::before {
	color: #ff9900;
}
.foods.ShokuikuCalendarSubwin .body[data-season="4"] .text h3::before {
	color: #85abff;
}


@media (max-width: 640px) {

	.foods.ShokuikuCalendarSubwin .body .text h3 img {
		left: 50%;
		transform: translate(-50%, -40%);
		font-size: 110%;
	}

}


@media (min-width: 641px) {

	.foods.ShokuikuCalendarSubwin .body .text h3 img {
		left: calc(1.5em + (12.8em/2));
		transform: translate(-50%, -40%);
	}

}



/* ==================== ShokuikuCalendarSubwin/body/text/<p>.css ==================== */

.ShokuikuCalendarSubwin .body .text p {
	margin: 1em 0 0;
	line-height: 1.8;
}


@media (max-width: 640px) {

	.ShokuikuCalendarSubwin .body .text p {
		text-align: left;
	}

}


@media (min-width: 641px) {

	.ShokuikuCalendarSubwin .body .text p {
		font-size: 70%;
	}

}



/* ==================== ShokuikuCalendarSubwin/frame/<button>.css ==================== */

.ShokuikuCalendarSubwin .frame button {
	position: absolute;
	right: 0;
	top: 0;
	border: none;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	transform: translate(30%, -30%);
}

.ShokuikuCalendarSubwin .frame button img:hover {
	transform: scale(1.1);
	transition: transform 150ms ease;
}



/* ==================== ShokuikuCalendarSubwin/frame/@.css ==================== */

.ShokuikuCalendarSubwin .frame {
	position: relative;
	box-sizing: border-box;
	border-radius: 1em;
	background: white;
}



@media (max-width: 640px) {
	.ShokuikuCalendarSubwin .frame {
		padding: 1em 0;
	}
}


@media (min-width: 641px) {
	.ShokuikuCalendarSubwin .frame {
		padding: 1.5em 0;
	}
}



/* ==================== ShokuikuCalendarSubwin/frame/content.css ==================== */