/*********************************************
**********************************************/
section.switchpanel {
	background-color: #eee;
	> div {
		max-width: 1920px;
		margin: 0 auto;
		overflow: hidden;
		> #switchPanelImage {
			user-select: none;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 1fr;
			> div {
				grid-row: 1/2;
				grid-column: 1/2;
				&:nth-of-type(1) {
					z-index: 0;
				}
				&:nth-of-type(2) {
					z-index: 1;
					transition: 0.5s;
					cursor: ew-resize;
				}
				&:nth-of-type(3) {
					z-index: 2;
					justify-self: flex-end;
					align-self: end;
					display: flex;
					justify-content: center;
					align-items: center;
					column-gap: 5px;
					padding: 0 20px 20px 0;
					@media (width < 670px) {
						column-gap: 3px;
						padding: 0 3px 3px 0;
						> span {
							> img {
								width: 16px;
							}
						}
					}
					> span {
						transition: 0.3s;
						cursor: pointer;
						> img:nth-of-type(1) {
							display: block;
						}
						> img:nth-of-type(2) {
							display: none;
						}
						> img:nth-of-type(3) {
							display: none;
						}
						&.on {
							> img:nth-of-type(1) {
								display: none;
							}
							> img:nth-of-type(2) {
								display: block;
							}
							> img:nth-of-type(3) {
								display: none;
							}
						}
						&.next {
							> img:nth-of-type(1) {
								display: none;
							}
							> img:nth-of-type(2) {
								display: none;
							}
							> img:nth-of-type(3) {
								display: block;
							}
						}
					}
				}
				> a {
					> picture {
						> img {
							width: 100%;
						}
					}
				}
			}
		}
	}
}
/*********************************************
**********************************************
		workstitlewrapper
**********************************************
**********************************************/
#workstitlewrapper {
	padding: 5px 10px 0 10px;
	text-align: center;
}
#workstitlewrapper > p {
	margin: 0;
	font-size: 1.8rem;
	line-height: 1.2;
	color: #094;
	font-family: var(--font-serif);
}
#workstitlewrapper > h1 {
	margin: 5px 0 0 0;
	font-size: 2.0rem;
	line-height: 1.2;
	color: #222;
	font-weight: 500;
}
@media (max-width:399px) {
	#workstitlewrapper > h1 {
		font-size: 1.8rem;
	}
}

/*********************************************
**********************************************
		workswrapper
**********************************************
**********************************************/
#workswrapper {
	padding: 25px 0 0 0;
}
#workswrapper > .inner {
	max-width: 1700px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#workswrapper > .inner > a {
	text-decoration: none;
	margin: 20px;
	width: 300px;
}
#workswrapper > .inner > a:hover {
	opacity: 0.7;
}
#workswrapper > .inner > a > figure {
	margin: 0;
}
#workswrapper > .inner > a > figure > img {
	max-width: 100%;
}
#workswrapper > .inner > a > figure > figcaption {
	margin: 5px 0 0 0;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.4;
	color: #222;
	max-width: 300px;
}
@media (max-width:729px) {
	#workswrapper > .inner > a {
		margin: 10px;
	}
}
@media (max-width:679px) {
	#workswrapper > .inner > a {
		width: 45%;
		margin: 5px;
	}
	#workswrapper > .inner > a > figure > figcaption {
		font-size: 0.7rem;
	}
}

/*********************************************
**********************************************
		worksbottomwrapper
**********************************************
**********************************************/
#worksbottomwrapper {
	padding: 10px 20px 0 20px;
}
#worksbottomwrapper > .inner {
	max-width: 1700px;
	margin: 0 auto;
	border-top: solid 1px #aaa;
}
@media (max-width:519px) {
	#worksbottomwrapper {
		padding: 10px 10px 0 10px;
	}
}

/*********************************************
**********************************************
		slideimagewrapper
**********************************************
**********************************************/
#slideimagewrapper {
	padding: 30px 10px 0 10px;
}
#slideimagewrapper > h1 {
	text-align: center;
	margin: 0;
	font-size: 2.0rem;
	line-height: 1.2;
	color: #222;
	font-weight: 500;
}
#slideimagewrapper > #slideImageArea {
	max-width: 1598px;
	margin: 20px auto 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#slideimagewrapper > #slideImageArea > img:nth-of-type(1),
#slideimagewrapper > #slideImageArea > img:nth-of-type(2) {
	cursor: pointer;
	transition: all 0.2s;
}
#slideimagewrapper > #slideImageArea > img:nth-of-type(1):hover,
#slideimagewrapper > #slideImageArea > img:nth-of-type(2):hover {
	opacity: 0.7;
}
#slideimagewrapper > #slideImageArea > div {
	max-width: 1518px;
	overflow: hidden;
}
#slideimagewrapper > #slideImageArea > div > div {
	display: flex;
	margin-left: -314px;
	transition: all 0.5s;
}
#slideimagewrapper > #slideImageArea > div > div > div > img {
	margin: 0 3px;
	cursor: pointer;
	transition: all 0.2s;
}
#slideimagewrapper > #slideImageArea > div > div > div > img:hover {
	opacity: 0.7;
}
@media (max-width:1639px) {
	#slideimagewrapper > #slideImageArea {
		max-width: 1295px;
	}
	#slideimagewrapper > #slideImageArea > div {
		max-width: 1215px;
	}
}
@media (max-width:1329px) {
	#slideimagewrapper > #slideImageArea {
		max-width: 987px;
	}
	#slideimagewrapper > #slideImageArea > div {
		max-width: 907px;
	}
}
@media (max-width:1019px) {
	#slideimagewrapper > #slideImageArea {
		max-width: 683px;
	}
	#slideimagewrapper > #slideImageArea > div {
		max-width: 603px;
	}
}
@media (max-width:719px) {
	#slideimagewrapper > #slideImageArea {
		max-width: 379px;
	}
	#slideimagewrapper > #slideImageArea > div {
		max-width: 299px;
	}
}
@media (max-width:399px) {
	#slideimagewrapper > #slideImageArea > img:nth-of-type(1),
	#slideimagewrapper > #slideImageArea > img:nth-of-type(2) {
		width: 15px;
		height: 140px;
	}
}

/*********************************************
**********************************************
		newestwrapper
**********************************************
**********************************************/
#newestwrapper {
	> .inner {
		max-width: 1330px;
		margin: 0 auto;
		padding: 15px 10px;
		&:empty {
			padding: 0;
		}
		display: flex;
		justify-content: center;
		@media (width < 1330px) {
			flex-direction: column;
		}
		@media (width < 1150px) {
			padding: 0 10px 15px 10px;
		}
		> a {
			display: flex;
			text-decoration: none;
			&:hover {
				opacity: 0.7;
			}
			&:nth-of-type(1) {
				margin-right: 10px;
				@media (width < 1330px) {
					margin-right: 0px;
				}
				> div:nth-of-type(1) {
					background-color: #037;
					border: solid 2px #037;
				}
				> div:nth-of-type(2) {
					border-color: #037;
				}
				> div:nth-of-type(3) {
					border-color: #037;
					> span {
						color: #037;
					}
				}
			}
			&:nth-of-type(2) {
				@media (width < 1330px) {
					margin-top: 3px;
				}
				> div:nth-of-type(1) {
					background-color: #070;
					border: solid 2px #070;
				}
				> div:nth-of-type(2) {
					border-color: #070;
				}
				> div:nth-of-type(3) {
					border-color: #070;
					> span {
						color: #070;
					}
				}
			}
			> div:nth-of-type(1) {
				font-size: 0.9rem;
				line-height: 1.2;
				color: #fff;
				padding: 3px 10px;
				white-space: nowrap;
				@media (width < 960px) {
					font-size: 0.8rem;
				}
			}
			> div:nth-of-type(2) {
				display: flex;
				flex-grow: 1;
				align-items: center;
				border-style: solid none;
				border-width: 2px;
				@media (width < 960px) {
					flex-wrap: wrap;
					> span {
						font-size: 0.8rem;
						padding: 2px 5px;
						&:nth-of-type(1) {
							padding-left: 5px;
						}
					}
				}
				> span {
					font-size: 0.9rem;
					line-height: 1.2;
					color: #222;
					padding: 3px 10px;
					&:nth-of-type(1) {
						padding-left: 20px;
						white-space: nowrap;
					}
					&:nth-of-type(2) {
						white-space: nowrap;
					}
					&:nth-of-type(3) {
						flex-grow: 1;
					}
				}
			}
			> div:nth-of-type(3) {
				display: flex;
				align-items: center;
				border-style: solid solid solid none;
				border-width: 2px;
				padding: 3px 10px;
				> span {
					font-size: 0.7rem;
					line-height: 1.2;
				}
			}
		}
	}
}
/*********************************************
**********************************************
		informwrapper
**********************************************
**********************************************/
#informwrapper {
	background-color: #eee;
	margin: 80px 0 0 0;
	> .inner {
		max-width: 1300px;
		margin: 0 auto;
		padding: 80px 10px;
		display: flex;
		justify-content: center;
		> .inform {
			background-color: #fff;
			padding: 30px;
			min-width: 860px;
			> div:nth-of-type(1) {
				display: flex;
				justify-content: space-between;
				align-items: center;
				> p {
					margin: 0;
					font-size: 1.8rem;
					line-height: 1.2;
					color: #aaa;
					font-family: var(--font-serif);
				}
				> a {
					font-size: 0.9rem;
					line-height: 1.2;
					color: #222;
					text-decoration: none;
					padding: 0 23px 0 0;
					background-image: url(./common/image/icon_chevron_round_right_095.svg);
					background-position: 100% 0%;
					background-repeat: no-repeat;
					&:hover {
						opacity: 0.7;
					}
				}
			}
			> div:nth-of-type(2) {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin: 5px 0 0 0;
				> h2 {
					margin: 0;
					font-size: 2.0rem;
					line-height: 1.2;
					color: #222;
					font-weight: 500;
				}
				> div {
					> input[type="radio"] {
						display: none;
						&:checked + label {
							> img {
								&:nth-of-type(1) {
									display: none;
								}
								&:nth-of-type(2) {
									display: block;
								}
							}
						}
					}
					> label {
						margin-left: 3px;
						display: inline-block;
						cursor: pointer;
						&:hover {
							opacity: 0.7;
						}
						> img {
							border-radius: 5px;
							box-shadow: -2px 2px 3px rgba(0,0,0,0.3);
							&:nth-of-type(1) {
								display: block;
							}
							&:nth-of-type(2) {
								display: none;
							}
						}
					}
				}
			}
			> div:nth-of-type(3) {
				margin: 20px 0 0 0;
				> .informDocument {
					text-align: left;
					min-width: 800px;
					> a {
						display: flex;
						border-top: dotted 1px #ddd;
						padding: 10px 5px 8px 5px;
						margin: 0;
						background-image: url(./common/image/icon_chevron_right_aaa.svg);
						background-repeat: no-repeat;
						background-position: 99% 50%;
						text-decoration: none;
						> .category {
						}
						> .date {
							font-size: 0.9rem;
							line-height: 22px;
							color: #888;
							margin: 0 5px 0 8px;
							white-space: nowrap;
						}
						> .mark {
							line-height: 22px;
							width: 34px;
							margin: 0 5px 0 0;
							> span {
								display: inline-block;
								min-width: 34px;
								font-size: 0.7rem;
								line-height: 1;
								color: #fff;
								border-radius: 3px;
								padding: 4px 0 2px 0;
								text-align: center;
								&.pdf {
									background-color: #e64a48;
								}
								&.ext {
									background-color: #99b;
								}
								&.new {
									background-color: #f57d23;
								}
							}
						}
						> .subject {
							font-size: 0.9rem;
							line-height: 22px;
							margin: 0 30px 0 0;
							color: #222;
							max-width: 710px;
						}
						&:hover {
							background-color: #f6f6f6;
							background-image: url(./common/image/icon_chevron_right_095.svg);
							> .date {
								color: #000;
							}
						}
					}
					&:last-child > a {
						border-bottom: dotted 1px #ddd;
					}
				}
			}
		}
		> .banner {
			margin: 0 0 0 35px;
			> a {
				display: inline-block;
				margin: 10px 0 0 0;
				box-shadow: 0 0 7px rgba(0,0,0,0.3);
				&:nth-of-type(1) {
					margin: 0 0 0 0;
				}
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
			> div {
				margin: 10px 0 0 0;
				width: 320px;
				> div {
					position: relative;
					padding-bottom: 55%;
					height: 0;
					> iframe {
						position: absolute;
						width: 100%;
						height: 100%;
						border: 0;
					}
				}
				> p {
					margin: 0;
					font-size: 0.8rem;
					line-height: 1.3;
					color: #222;
				}
			}
		}
	}
}
@media (max-width:1269px) {
	#informwrapper {
		> .inner {
			display: block;
			> .inform {
				min-width: 0px;
				> div:nth-of-type(2) {
					> .informDocument {
						> a {
							> .subject {
								max-width: calc(100% - 20px);
							}
						}
					}
				}
			}
			> .banner {
				margin: 30px 0 0 0;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				align-items: flex-start;
				> a {
					margin: 10px;
					&:nth-of-type(1) {
						margin: 10px;
					}
				}
				> div {
					margin: 10px;
				}
			}
		}
	}
}
@media (max-width:999px) {
	#informwrapper {
		> .inner {
			> .inform {
				padding: 10px;
				> div:nth-of-type(2) {
					flex-wrap: wrap;
					> h2 {
						order: 1;
					}
					> div {
						order: 3;
						width: 100%;
						margin-top: 20px;
					}
					> a {
						order: 2;
					}
				}
				> div:nth-of-type(3) {
					> .informDocument {
						min-width: 0px;
						> a {
							flex-wrap: wrap;
							> .subject {
								font-size: 0.9rem;
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
}
@media (max-width:589px) {
	#informwrapper {
		> .inner {
			> .inform {
				> div:nth-of-type(2) {
					> div {
						> label {
							> img {
								width: 37px;
								height: 37px;
							}
						}
					}
				}
			}
			> .banner {
				> a {
					margin: 10px 0;
					&:nth-of-type(2) {
						margin: 10px 0;
					}
				}
				> div {
					margin: 10px 0;
				}
			}
		}
	}
}
@media (max-width:419px) {
	#informwrapper {
		> .inner {
			> .inform {
				> div:nth-of-type(1) {
					flex-direction: column;
					> p {
					}
					> a {
						margin-top: 5px;
					}
				}
				> div:nth-of-type(2) {
					justify-content: center;
					> div {
						> label {
							margin-left: 0;
						}
					}
				}
			}
		}
	}
}