@charset "utf-8";


/* ============================================================================================== */
/* curriculum                                                                                     */
/* ============================================================================================== */

/* basic layout */
.bottom-space {
	padding-bottom: 60px;
}

.bottom-space:last-child {
	padding-bottom: 160px;
}

/* rongo */
.rongo {
	position: relative;
	margin-top: 140px;
}

.rongo .card-state > .inner {
	padding-top: 120px;
}

.rongo .about-rongo,
.rongo .lines .inner {
	position: relative;
}

.rongo .about-rongo:before {
	content: "";
	width: 120px;
	height: 120px;
	background: url(../images/curriculum/rongo_illust.png) no-repeat left top;
	background-size: 100%;
	position: absolute;
	right: -20px;
	top: -105px;
}

.rongo .lines .inner:before {
	content: "";
	width: 160px;
	height: 130px;
	background: url(../images/curriculum/rongo_lines.png) no-repeat left top;
	background-size: 100%;
	position: absolute;
	right: -105px;
	top: -110px;
}

.rongo .about-rongo img {
	width: 100%;
}

.rongo .floating-container + .floating-container {
	margin-top: 2em;
}


/* ============================================================================================== */
/* food                                                                                           */
/* ============================================================================================== */

/* food */
.food .img-area ul {
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
}

.food .img-area li {
	width: calc(50% - 10px);
	margin-bottom: 20px;
}

.food .img-area li.double {
	width: 100%;
}

.food .txt-area {
	position: relative;
}

.food .part-title {
	position: relative;
	margin-bottom: 1em;
}

.food .part-title.large {
	top: 0;
}


/* ============================================================================================== */
/* gymnastics                                                                                     */
/* ============================================================================================== */

.gymnastics .txt-area {
	position: relative;
}

.gymnastics .part-title {
	position: relative;
	margin-bottom: 1em;
}

.gymnastics .part-title.large {
	top: 0;
}


/* ============================================================================================== */
/* Media query                                                                                    */
/* ============================================================================================== */

@media screen and (max-width: 960px) {

	/* rongo */
	.rongo .about-rongo {
		order: -1;
		margin-bottom: 2em;
	}

	.rongo .lines {
		margin-top: 2em;
	}

	.rongo .lines .inner:before {
		content: none;
	}

	/* food */
	.food .img-area {
		margin-top: 2em;
	}

	/* gymnastics */
	.gymnastics .txt-area {
		margin-bottom: 2em;
	}


}

@media screen and (max-width: 600px) {

	/* basic layout */
	.bottom-space ,
	.bottom-space:last-child {
		padding-bottom: 120px;
	}

	.card-state > .inner {
		padding-top: 80px;
	}

	/* rongo */
	.rongo {
		margin-top: 90px;
	}

	.rongo .card-state > .inner {
		padding-top: 80px;
	}

	.rongo .about-rongo {
		margin-bottom: 1em;
	}

	.rongo .about-rongo:before {
		width: 80px;
		height: 80px;
		right: -15px;
		top: -65px;
	}

	/* food */
	.food .img-area li {
		width: calc(50% - 5px);
	}

	.food .img-area li {
		margin-bottom: 10px;
	}

	.food .img-frame.small:before {
		background: url(../images/common/corner-left_sp_s.png) no-repeat left top;
		background-size: 25px;
		left: -3px;
		top: -3px;
	}

	.food .img-frame.small:after {
		background: url(../images/common/corner-right_sp_s.png) no-repeat right bottom;
		background-size: 25px;
		right: -3px;
		bottom: -3px;
	}

	.food .part-title {
		position: absolute;
		margin-bottom: 0;
	}

	.food .part-title.large {
		top: -155px;
	}

	/* gymnastics */
	.gymnastics .part-title {
		position: absolute;
		margin-bottom: 0;
	}

	.gymnastics .part-title.large {
		top: -155px;
	}

}

@media screen and (max-width: 320px) {

}