section.panel {
	> div {
		max-width: 1920px;
		margin-inline: auto;
		> picture {
			> img {
				max-width: 100%;
			}
		}
	}
}
section.title {
	padding: 60px 5% 0 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h1 {
			font-size: 2.0rem;
			line-height: 1.5;
			color: #9b4696;
			text-align: center;
			font-weight: 600;
		}
		> p {
			font-size: 1.2rem;
			line-height: 1.0;
			color: #9b4696;
			text-align: center;
			font-weight: 600;
		}
	}
}
section.category {
	padding: 40px 5% 0 5%;
	> div {
		max-width: 1300px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 38px 1fr 38px;
		column-gap: 15px;
		@media (width < 500px) {
			grid-template-columns: 18px 1fr 18px;
			column-gap: 10px;
		}
		> div.arrow {
			display: flex;
			align-items: center;
			cursor: pointer;
			padding-block: 5px;
			padding-inline: 10px;
			user-select: none;
			@media (width < 500px) {
				padding-inline: 0px;
			}
			&:hover {
				background-color: rgba(155,70,150,0.2);
			}
			> img {}
		}
		> div.category {
			display: flex;
			overflow-x: auto;
			scrollbar-color: #9b4696 #eee;
			scrollbar-width: thin;
			scroll-behavior: smooth;
			> label {
				justify-self: center;
				display: grid;
				cursor: pointer;
				user-select: none;
				width: 260px;
				min-width: 260px;
				@media (width < 900px) {
					width: 30vw;
					max-width: 30vw;
					min-width: 30vw;
				}
				@media (width < 500px) {
					width: 40vw;
					max-width: 40vw;
					min-width: 40vw;
				}
				> input[type="radio"] {
					display: none;
					&:checked + div.circle {
						display: block;
					}
				}
				> div.circle {
					display: none;
					grid-area: 1/1/2/2;
					background-color: rgba(155,70,150, 0.3);
					width: 210px;
					height: 210px;
					border-radius: 200px;
					justify-self: center;
					align-self: center;
					@media (width < 900px) {
						width: 90%;
						height: auto;
						aspect-ratio: 1/1;
					}
				}
				> figure {
					grid-area: 1/1/2/2;
					padding-top: 10px;
					display: flex;
					justify-content: center;
					max-width: 250px;
					margin-inline: auto;
					@media (width < 900px) {
						max-width: 30vw;
					}
					@media (width < 500px) {
						max-width: 40vw;
					}
					> img {
						max-width: 100%;
					}
				}
				> div.text {
					grid-area: 1/1/2/2;
					justify-items: center;
					margin-top: 60%;
					display: flex;
					align-self: center;
					justify-content: center;
					> h3 {
						align-self: start;
						background-color: #9b4696;
						color: #fff;
						font-size: min(1.0rem,5vw);
						padding-inline: 10px;
						white-space: nowrap;
						@media (width < 900px) {
							font-size: 0.8rem;
						}
					}
					> p {
						font-size: 1.1rem;
						color: #333;
						white-space: nowrap;
						background-color: rgba(255,255,255,0.6);
						padding-inline: 5px;
						@media (width < 900px) {
							font-size: 0.8rem;
						}
					}
				}
			}
		}
	}
}
section.type {
	padding: 60px 5% 0px 5%;
	&.hidden {
		display: none;
	}
	> div {
		max-width: 1600px;
		margin-inline: auto;
		> h2 {
			background-color: #9b4696;
			padding-block: 10px;
			padding-inline: 20px;
			color: #fff;
			font-size: 1.5rem;
			line-height: 1.4;
			> b {	/*type名*/
				font-size: 2.0rem;
				font-weight: 900;
				font-style: italic;
				white-space: nowrap;
				> small {
					padding-left: 5px;
					font-size: 1.3rem;
					font-weight: 500;
				}
			}
			> p {
				margin-left: 20px;
				display: inline-block;
				background-color: #fff;
				font-size: min(1.1rem,5vw);
				padding-inline: 10px;
				color: #333;
				font-style: normal;
				@media (width < 900px) {
					margin-left: 0px;
					margin-top: 5px;
					display: block;
					font-weight: 400;
				}
			}
		}
		> figure {
			padding-top: 60px;
			display: flex;
			justify-content: center;
			> img {
				max-width: 100%;
			}
		}
		> h3 {
			font-size: min(1.8rem,7vw);
			line-height: 1.3;
			color: #333;
			border-bottom: 3px solid #9b4696;
			padding-top: 40px;
			margin-bottom: 20px;
			padding-bottom: 10px;
			> small {
				font-size: min(1.4rem,5.5vw);
			}
		}
		> p {
			font-size: min(1.0rem,5vw);
			line-height: 1.5;
			color: #333;
		}
	   > h4 {
			margin-top: 60px;
			background-color: #adadad;
			padding: 20px 30px;
			font-size: 1.3rem;
			line-height: 1.0;
			color: #fff;
		}
		> div.block {
			padding-top: 20px;
			display: grid;
			grid-template-columns: 1fr 1.2fr;
			column-gap: 40px;
			@media (width < 650px) {
				 grid-template-columns: 1fr;
			}
			> figure {
				justify-self: center;
				align-self: center;
				> img {
					max-width: 100%;
				}
			}
			> div {
				> h4 {
					padding-top: 20px;
					font-size: min(1.4rem,6vw);
					line-height: 1.3;
					color: #9b4696;
				}
				> p {
					text-indent: -1em;
					padding-left: 1em;
					font-size: min(1.0rem,5vw);
					line-height: 1.5;
					color: #333;
					> small {
						font-size: min(0.9rem,4.5vw);
						line-height: 2;
					}
				}
				> div {
					padding-block: 6% 1%;
					display: grid;
					grid-template-columns: 1fr 1fr;
					column-gap: 20px;
					> figure {
						> img {
							max-width: 100%;
						}
					}
				}
				> figure {
					padding-top: 20px;
					justify-self: center;
					align-self: center;
					> img {
						max-width: 100%;
					}
				}
			}
		}
		> div.table {
			> div.table {
				margin-top: 20px;
				max-width: 100%;
				> div.scrolltable {
					max-width: 90vw;
					&.on {
						> div.guidance {
							display: block;
						}
					}
					> div.guidance {
						display: none;
						background-color: #ddd;
						font-size: 0.9rem;
						line-height: 1;
						color: #777;
						border-radius: 50px;
						padding-block: 3px;
						padding-inline: 10px;
					}
					> div.table {
						overflow: auto;
						> table {
							margin-top: 3px;
							width: 100%;
							height: 100%;
							border-collapse: collapse;
							> thead {
								> tr {
									> th {
										padding-block: 10px;
										padding-inline: 10px;
										background-color: #b97db5;
										color: #fff;
										font-size: min(1rem,5vw);
										line-height: 1.6;
										font-weight: normal;
										text-align: center;
										white-space: nowrap;
										border-right: solid 1px #b97db5;
										border-bottom: solid 1px #b97db5;
									}
								}
							}
							> tbody {
								> tr {
									&:nth-of-type(even) {
										> td {
											background-color: #f0e3ef;
										}
									}
									> th {
										padding-block: 10px;
										padding-inline: 10px;
										background-color: #cda2ca;
										color: #333;
										font-size: min(0.9rem,4.5vw);
										line-height: 1.4;
										font-weight: normal;
										text-align: center;
										white-space: nowrap;
										border: solid 1px rgba(255,255,255,0.5);
									}
									> td {
										padding-block: 5px;
										padding-inline: 10px;
										color: #222;
										font-size: min(0.9rem,4.5vw);
										line-height: 1.4;
										white-space: nowrap;
										border: solid 1px rgba(0,0,0,0.2);
										background-color: #fff;
									}
								}
							}
						}
					}
				}
			}
		}
		> div.behavior {
			padding-top: 30px;
			> p {
				font-size: min(1.2rem,5vw);
				line-height: 1.0;
				color: #333;
			}
			> div {
				display: grid;
				grid-template-columns: 1fr 45px 1fr 45px 1fr;
				align-items: center;
				justify-items: center;
				@media (width < 1130px) {
					grid-template-columns: 1fr;
					row-gap: 10px;
				}
				> figure {
					padding-bottom: 1.1rem;
					> img {
						max-width: 100%;
					}
				}
				> img {
					width: 35px;
					@media (width < 1130px) {
						transform: rotate(90deg);
					}
				}
				> div {
					> figure {
						> img {
							max-width: 100%;
						}
					}
					> p {
						font-size: min(0.9rem,4.5vw);
						line-height: 1.5;
						color: #333;
					}
				}
			}
		}
		> div.example01 {
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 20px;
			> article {
				border-radius: 10px;
				border: 1px solid #80bbbd;
				> h5 {
					border-top-left-radius: 7px;
					border-top-right-radius: 7px;
					background-color: #80bbbd;
					color: #fff;
					font-size: min(1.0rem, 5vw);
					line-height: 2;
					text-align: center;
				}
				> div {
					padding-block: 20px;
					display: grid;
					grid-template-columns: 1fr 35px 1fr;
					column-gap: 5px;
					align-items: center;
					justify-items: center;
					> figure {
						> img {
							max-width: 100%;
						}
					}
					> img {
						width: 25px;
					}
					> div {
						> figure {
							padding-top: 10px;
							> img {
								max-width: 100%;
							}
						}
						> p {
							text-align: center;
							font-size: min(1.0rem, 5vw);
							line-height: 1.5;
							color: #333;
						}
					}
				}
			}
		}
		 > div.example02 {
			margin-top: 40px;
			border-radius: 10px;
			border: 1px solid #80bbbd;
			> h5 {
				border-top-left-radius: 7px;
				border-top-right-radius: 7px;
				background-color: #80bbbd;
				color: #fff;
				font-size: min(1.0rem, 5vw);
				line-height: 2;
				text-align: center;
			}
			> div {
				padding-block: 20px;
				display: grid;
				grid-template-columns: 1fr 1fr;
				> article {
					display: grid;
					grid-template-columns: 1fr 35px 1fr;
					column-gap: 5px;
					align-items: center;
					justify-items: center;
					&:nth-of-type(1) {
						border-right: 2px dotted #231815;
					}
					> figure {
						> img {
							max-width: 100%;
						}
					}
					> img {
						width: 25px;
					}
					> div {
						> figure {
							padding-top: 10px;
							> img {
								max-width: 100%;
							}
						}
						> p {
							text-align: center;
							font-size: min(1.0rem, 5vw);
							line-height: 1.5;
							color: #333;
						}
					}
				}
			}
		}
	}
}
section.bottom {
	padding-top: min(120px,17vw);
	border-bottom: solid 1px #9b4696;
}