/* ==================== hw-home/@.css ==================== */

.hw-home {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 2em;
}



/* ==================== hw-home/head-menu.css ==================== */

.hw-home .head-menu {
	margin-top: 2em;
}

.hw-home .head-menu ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: end;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.hw-home .head-menu li img {
	transition: 150ms;
}
.hw-home .head-menu li img:hover {
	transform: scale(1.05);
}

.hw-home .head-menu li img {
	width: 5.8em;
}

@media (max-width: 640px) {

	.hw-home .head-menu ul {
		width: 23em;
		grid-gap: 0.5em;
	}

}


@media (min-width: 641px) {
	.hw-home .head-menu ul {
		grid-gap: 1.5em;
	}
	.hw-home .head-menu ul::after {
		content: none;
	}
}



/* ==================== hw-home/home-new.css ==================== */

.hw-home .home-new {
	position: relative;
	border: 2px solid #ffd16e;
	border-radius: 1em;
	padding: 1em;
}

.hw-home .home-new h2 {
	position: absolute;
	margin: 0;
}
.hw-home .home-new h2 img {
	width: 3.1em;
	height: 3.1em;
}

.hw-home .home-new ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: grid;
}

.hw-home .home-new li {
	display: flex;
	font-weight: bold;
}
.hw-home .home-new li::before {
	content: '★';
	color: #ff3c00;
	margin-right: 0.5em;
}

.hw-home .home-new li a {
	color: #0087db;
	text-decoration: none;
}
.hw-home .home-new li a:hover {
	text-decoration: underline;
}


@media (max-width: 640px) {

	.hw-home .home-new {
		margin-top: 3em;
		padding-top: 1.5em;
		box-sizing: border-box;
		width: calc(100% - 2em);
	}

	.hw-home .home-new h2 {
		left: 0;
		bottom: 100%;
		transform: translate(0.5em, 0.75em);
	}

	.hw-home .home-new ul {
		grid-gap: 0.75em;
		font-size: 90%;
	}

}


@media (min-width: 641px) {

	.hw-home .home-new {
		margin-top: 1.5em;
		padding-left: 2em;
	}

	.hw-home .home-new h2 {
		left: 0;
		top: 0;
		transform: translate(-30%, -60%);
	}

	.hw-home .home-new ul {
		grid-gap: 0.5em;
		font-size: 75%;
	}
	.hw-home .home-new ul::after {
		content: none;
	}

}



/* ==================== hw-home/home-title.css ==================== */

.hw-home .home-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: no-repeat center top / contain;
}

.hw-home .home-title h1 {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-size: inherit;
}

.hw-home .home-title h1 img {
	position: absolute;
	width: 100%;
}

.hw-home .home-title h2 {
	margin: 0.5em 0 0;
	text-align: center;
	font-size: inherit;
}

.hw-home .home-title p {
	margin: 0.75em 0 0;
}


@media (max-width: 640px) {
	.hw-home .home-title {
		margin-top: 1em;
		padding-top: 6.25em;
		background-image: url(../images/home/title_back_sp.jpg);
	}

	.hw-home .home-title h1 {
		width: 96vw;
		height: 32.533333333333vw;
	}

	.hw-home .home-title h2 img {
		width: 22em;
	}
	.hw-home .home-title p {
		padding: 0 1.5em;
		font-size: 90%;
		font-weight: bold;
		text-align: justify;
	}

	.hw-home .home-title p br {
		display: none;
	}

}


@media (min-width: 641px) {
	.hw-home .home-title {
		width: 47.5em;
		margin-top: 1.5em;
		padding-top: 3.75em;
		background-image: url(../images/home/title_back_pc.jpg);
	}

	.hw-home .home-title h1 {
		width: 32em;
		height: 10.75em;
	}

	.hw-home .home-title p {
		width: 40em;
		font-size: 80%;
		text-align: center;
	}
	.hw-home .home-title p span {
		display: inline-block;
	}

}



/* ==================== hw-home/home-main/@.css ==================== */

.hw-home .home-main {
	width: 100%;
}



.hw-home .home-main hr {
	border: none;
	margin: 0;
	width: 100%;
	height: 4em;
	background: repeat-x center center / auto 100%;
}

.hw-home .home-main hr:nth-of-type(1) {
	background-image: url(../images/home/home_contents_border_1.png);
}
.hw-home .home-main hr:nth-of-type(3) {
	background-image: url(../images/home/home_contents_border_3.png);
}
.hw-home .home-main hr:nth-of-type(4) {
	background-image: url(../images/home/home_contents_border_4.png);
}
.hw-home .home-main hr:nth-of-type(5) {
	background-image: url(../images/home/home_contents_border_5.png);
}
.hw-home .home-main hr:nth-of-type(6) {
	background-image: url(../images/home/home_contents_border_6.png);
}

.hw-home .home-main hr:nth-of-type(2) {
	background:
		no-repeat center center / auto 100%,
		repeat-x center center / auto 100%;
}


@media (max-width: 640px) {
	.hw-home .home-main hr:nth-of-type(2) {
		background-image:
			url(../images/home/home_contents_border_2_2_sp.png),
			url(../images/home/home_contents_border_2_sp.png);
	}
}



@media (min-width: 641px) {
	.hw-home .home-main hr:nth-of-type(2) {
		background-image:
			url(../images/home/home_contents_border_2_2.png),
			url(../images/home/home_contents_border_2.png);
	}
}



/* ==================== hw-home/home-main/home-content/&.css ==================== */

.hw-home .home-main .home-content {
	display: grid;
	grid-gap: 1em;
	justify-items: center;
}
.hw-home .home-main .home-content::after {
	content: none;
}

.hw-home .home-main .home-content.experiment {
	background-color: #ceefff;
}
.hw-home .home-main .home-content.observation {
	background-color: #b3e033;
}
.hw-home .home-main .home-content.craft {
	background-color: #ffb2b2;
}
.hw-home .home-main .home-content.study {
	background-color: #ffe489;
}



/* ==================== hw-home/home-main/home-content/body/&.craft.css ==================== */

.hw-home .home-main .home-content .body.craft p {
	color: #d40000;
}

.hw-home .home-main .home-content .body.craft ul {
	display: grid;
	margin: 0;
	padding: 0;
	list-style-type: none;
	align-items: start;
}


@media (max-width: 640px) {

	.hw-home .home-main .home-content .body.craft ul {
		grid-gap: 0.5em;
	}

}


@media (min-width: 641px) {

	.hw-home .home-main .home-content .body.craft ul {
		grid-gap: 1.5em;
		grid-template-columns: repeat(3, 1fr);
	}

	.hw-home .home-main .home-content .body.craft ul::after {
		content: none;
	}

}



/* ==================== hw-home/home-main/home-content/body/&.css ==================== */

.hw-home .home-main .home-content .body {
	position: relative;
	display: grid;
	grid-gap: 1em;
	justify-items: center;
}

.hw-home .home-main .home-content .body::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background: white;
}


.hw-home .home-main .home-content .body > * {
	position: relative;
}

.hw-home .home-main .home-content .body h2 {
	margin: 0;
	text-align: center;
	font-size: inherit;
}

.hw-home .home-main .home-content .body p {
	margin: 0;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}

.hw-home .home-main .home-content .body p span {
	display: inline-block;
}


@media (max-width: 640px) {
	.hw-home .home-main .home-content .body {
		margin: 0 1em;
		padding: 0 1.5em 1.5em;
	}
	.hw-home .home-main .home-content .body::before {
		border-radius: 1.5em;
	}

	.hw-home .home-main .home-content .body.experiment::before {
		height: calc(100% - 4.25em);
	}
	.hw-home .home-main .home-content .body.observation::before {
		height: calc(100% - 4.75em);
	}
	.hw-home .home-main .home-content .body.craft::before {
		height: calc(100% - 4em);
	}

	.hw-home .home-main .home-content .body.study.greatman::before {
		height: calc(100% - 4.25em);
	}
	.hw-home .home-main .home-content .body.study.nutrients::before {
		height: calc(100% - 3.25em);
	}


	.hw-home .home-main .home-content .body h2 img {
		font-size: 85%;
	}
}


@media (min-width: 641px) {
	.hw-home .home-main .home-content .body {
		box-sizing: border-box;
		width: 42em;
		padding: 0 2em 2em;
	}
	.hw-home .home-main .home-content .body::after {
		content: none;
	}

	.hw-home .home-main .home-content .body::before {
		height: calc(100% - 1.75em);
		border-radius: 2em;
	}
	.hw-home .home-main .home-content .body.craft::before {
		height: calc(100% - 1em);
	}

	.hw-home .home-main .home-content .body.study.greatman::before {
		height: calc(100% - 3em);
	}
	.hw-home .home-main .home-content .body.study.nutrients::before {
		height: calc(100% - 1.25em);
	}

	.hw-home .home-main .home-content .body h2 img {
		font-size: 90%;
	}

	.hw-home .home-main .home-content .body p {
		font-size: 90%;
	}

}



/* ==================== hw-home/home-main/home-content/body/&.experiment.css ==================== */

.hw-home .home-main .home-content .body.experiment p {
	color: var(--color-exp-blue);
}

/* .hw-home .home-main .home-content .body.experiment ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: grid;
} */

@media (max-width: 640px) {
	/* .hw-home .home-main .home-content .body.experiment ul {
		grid-gap: 0.5em;
	}

	.hw-home .home-main .home-content .body.experiment li:nth-of-type(1) {
		display: grid;
		grid-gap: 0.25em;
		justify-items: center;
		margin-bottom: 1em;
	}

	.hw-home .home-main .home-content .body.experiment li .chara img {
		width: 15.8em;
	} */
}

@media (min-width: 641px) {
	/* .hw-home .home-main .home-content .body.experiment ul {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1em 1.5em;
	}
	.hw-home .home-main .home-content .body.experiment li:nth-of-type(1) {
		grid-column: span 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.hw-home .home-main .home-content .body.experiment li:nth-of-type(1) img {
		width: 22.9em;
	}
	.hw-home .home-main .home-content .body.experiment li .chara img {
		width: 13.3em;
	} */
}



/* ==================== hw-home/home-main/home-content/body/&.observation.css ==================== */

.hw-home .home-main .home-content .body.observation p {
	color: var(--color-obs-brown);
}

.hw-home .home-main .home-content .body.observation ul {
	display: grid;
	margin: 0;
	padding: 0;
	list-style-type: none;
}


@media (max-width: 640px) {

	.hw-home .home-main .home-content .body.observation ul {
		grid-gap: 0.5em;
	}

}


@media (min-width: 641px) {

	.hw-home .home-main .home-content .body.observation ul {
		grid-gap: 2em;
		grid-template-columns: repeat(2, 1fr);
		width:  70%;
		margin: 0 auto;
	}

	.hw-home .home-main .home-content .body.observation ul::after {
		content: none;
	}

}



/* ==================== hw-home/home-main/home-content/body/hover.css ==================== */

.hw-home .home-main .home-content .body .hover {
	transition: 150ms;
}

.hw-home .home-main .home-content .body .hover:hover {
	transform: scale(1.05);
}



/* ==================== hw-home/home-main/home-content/body/more.css ==================== */

.hw-home .home-main .home-content .body .more img {
	transition: 150ms;
}

.hw-home .home-main .home-content .body .more img:hover {
	opacity: 0.7;
}

.hw-home .home-main .home-content .body.experiment .more {
	display: grid;
	grid-gap: 0.5em;
	justify-items: center;
}

.hw-home .home-main .home-content .body.experiment .more::before {
	content: '';
	width: 8em;
	aspect-ratio: 160/16;
	background: url(../images/home/btn_more_text.svg) no-repeat center center;
}



/* ==================== hw-home/home-main/home-content/body/&.study/@.css ==================== */

.hw-home .home-main .home-content .body.study.greatman p {
	color: #d8271c;
	text-align: left;
}
.hw-home .home-main .home-content .body.study.nutrients p {
	color: #53ab00;
}

.hw-home .home-main .home-content .body.study .link img {
	width: 15.6em;
}


@media (max-width: 640px) {

	.hw-home .home-main .home-content .body.study.nutrients h2 img {
		width: 13.7em;
	}
	.hw-home .home-main .home-content .body.study.greatman h2 img {
		width: 15.6em;
	}

	.hw-home .home-main .home-content.study p br {
		display: none;
	}

	/* new */
	.hw-home .home-main .home-content .body.study.nutrients.new::after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 3.1em;
		height: 3.1em;
		transform: translate(1.75em, 1.75em);
		background: url(../images/home/new_icon.svg) no-repeat center center / contain;
	}

}



@media (min-width: 641px) {

	.hw-home .home-main .home-content .body.study.nutrients h2 img {
		width: 35.6em;
	}
	.hw-home .home-main .home-content .body.study.greatman h2 img {
		width: 35.8em;
	}

	.hw-home .home-main .home-content .body.study .image {
		width: 29.5em;
	}

	/* new */
	.hw-home .home-main .home-content .body.study.nutrients.new p {
		display: flex;
		align-items: center;
		margin-bottom: -0.5em;
	}

	.hw-home .home-main .home-content .body.study.nutrients.new p > span {
		width: 28em;

	}

	.hw-home .home-main .home-content .body.study.nutrients.new p::before {
		content: '';
		display: 72ock;
		width: 3.6em;
		height: 3.6em;
		margin-right: 0.5em;
		transform: translateY(1em);
		background: url(../images/home/new_icon.svg) no-repeat center center / contain;
	}

}



/* ==================== hw-home/home-main/home-content/body/&.study/level.css ==================== */

.hw-home .home-main .home-content .body.study.nutrients .level img { width: 11.1em; }
.hw-home .home-main .home-content .body.study.greatman .level img { width: 12.2em; }