/* ==================== #type-list/<h3>.css ==================== */

#type-list h3 {
	display: flex;
	align-items: center;
	color: var(--color-brown);
	background: white;
	height: 2.5em;
	margin: 0;
	padding: 0 1em;
	border-radius: 1.25em;
	font-size: 110%;
}

#type-list h3:nth-of-type(2) {
	margin-top: 1em;
}



/* ==================== #type-list/> p.css ==================== */

#type-list > p {
	margin: 0;
	color: #a12300;
	font-weight: bold;
}


@media (max-width: 640px) {

	#type-list > p {
		font-size: 95%;
	}

}


@media (min-width: 641px) {

	#type-list > p {
		font-size: 105%;
	}

}



/* ==================== #type-list/@.css ==================== */

#type-list {
	display: grid;
	grid-gap: 1em;
	justify-items: center;
	padding-bottom: 2em;
	background: url(../images/common/back_pink.png);
}


@media (max-width: 640px) {

	#type-list {
		margin-top: 5em;
	}

}


@media (min-width: 641px) {

	#type-list {
		margin-top: 4em;
	}
}



/* ==================== #type-list/<h2>/<small>.css ==================== */

#type-list h2 small {
	display: flex;
	align-items: center;
	color: #ff3700;
	line-height: 1;
}
#type-list h2 small::before,
#type-list h2 small::after {
	content: '';
	display: block;
	width: 1.5em;
	height: 1.25em;
	background: linear-gradient(#ff3700, #ff3700) no-repeat center center / 1px 100%;
}
#type-list h2 small::before {
	transform: rotate(-25deg);
}
#type-list h2 small::after {
	transform: rotate(25deg);
}


@media (max-width: 640px) {

	#type-list h2 small {
		font-size: 90%;
	}

}


@media (min-width: 641px) {

	#type-list h2 small {
		font-size: 105%;
	}

}



/* ==================== #type-list/<h2>/@.css ==================== */

#type-list h2 {
	justify-self: stretch;
	display: grid;
	grid-gap: 0.5em;
	justify-items: center;
	margin: 0;
	background: linear-gradient(white,white) no-repeat center top / 100% calc(100% - 1.5em);
	font-size: inherit;
}


@media (max-width: 640px) {

	#type-list h2 img {
		height: 2.5em;
	}

}


@media (min-width: 641px) {

	#type-list h2 img {
		height: 3em;
	}

}



/* ==================== #type-list/types/@.css ==================== */

@media (max-width: 640px) {

	#type-list .types {
		display: grid;
		grid-gap: 1em;
		padding: 0 3%;
	}

}


@media (min-width: 641px) {

	#type-list .types {
		display: flex;
		flex-wrap: wrap;
		gap: 1em;
		max-width: 920px;
	}

}



/* ==================== #type-list/types/type/<h4>.css ==================== */

#type-list .types .type h4 {
	margin: 0;
	color: #ff3700;
	font-size: 120%;
	line-height: 1.4;
}

#type-list .types .type h4 span {
	display: block;
}

#type-list .types .type h4 small {
	font-size: 80%;
}


@media (max-width: 640px) {

	#type-list .types .type h4 {
		font-size: 110%;
	}

}


@media (min-width: 641px) {

	#type-list .types .type h4 {
		font-size: 130%;
	}

	#type-list .types .type.type3 h4 span {
		display: inline-block;
	}

}



/* ==================== #type-list/types/type/@.css ==================== */

#type-list .types .type {
	position: relative;
	display: grid;
	grid-template-areas:
	'h4 image'
	'age image'
	'text text';
	grid-template-columns: 1fr auto;
	grid-gap: 1em 0.5em;
	align-content: start;
	border-radius: 1em;
	padding: 1em;
	padding-bottom: 4.5em;
	background: white;
}

#type-list .types .type h4 { grid-area: h4; }
#type-list .types .type .image { grid-area: image; }
#type-list .types .type .age { grid-area: age; }
#type-list .types .type .text { grid-area: text; }


@media (min-width: 641px) {

	#type-list .types .type {
		box-sizing: border-box;
		width: 450px;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	#type-list .types .type:hover {
		background-color: #fffbad;
	}

}



/* ==================== #type-list/types/type/age.css ==================== */

#type-list .types .type .age {
	align-self: end;
}

#type-list .types .type .age dl {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 0.5em;
	align-items: center;
	margin: 0;
	color: #732a00;
	font-size: 90%;
	justify-content: start;
}

#type-list .types .type .age dt {
	display: flex;
	align-items: center;
	height: 2em;
	background-color: #ffea82;
	border-radius: 1em;
	padding: 0 0.75em;
	font-size: 80%;
}

#type-list .types .type .age dd {
	margin: 0;
	font-weight: bold;
}



/* ==================== #type-list/types/type/image.css ==================== */

#type-list .types .type .image {
	width: 7em;
}

#type-list .types .type .image img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: contain;
}



/* ==================== #type-list/types/type/link.css ==================== */

#type-list .types .type .link {
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	width: 100%;
	height: 3.5em;
	border-radius: 0 0 1em 1em;
	background-color: #117ce0;
}

#type-list .types .type .link a {
	display: flex;
	gap: 0.5em;
	align-items: center;
	height: 100%;
	padding: 0 0.75em;
	color: white;
	text-decoration: none;
	line-height: 1.25;
}

#type-list .types .type .link span {
	text-align: left;
}

#type-list .types .type .link a::after {
	flex-shrink: 0;
	content: '';
	display: block;
	width: 1.5em;
	margin-left: auto;
	aspect-ratio: 1/1;
	background: url(../images/common/arrow_w.png) no-repeat center center / contain;
}

#type-list .types .type .link a small {
	display: inline-block;
	font-size: 70%;
}


@media (max-width: 640px) {

	#type-list .types .type .link a {
		font-size: 110%;
	}

}


@media (min-width: 641px) {

	#type-list .types .type .link {
		transition: all 0.2s ease;
	}

	#type-list .types .type .link a {
		font-size: 120%;
	}

	#type-list .types .type:hover .link {
		background-color: #009dff;
	}

}



/* ==================== #type-list/types/type/text.css ==================== */

#type-list .types .type .text ul {
	display: grid;
	grid-gap: 0.5em;
	margin: 0;
	padding: 0 0 0 0.25em;
	list-style-position: none;
}

#type-list .types .type .text li {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 0.5em;
	justify-content: start;
}

#type-list .types .type .text li::before {
	content: '・';
}


@media (min-width: 641px) {

	#type-list .types .type .text ul {
		font-size: 90%;
	}

}