@charset "utf-8";

:root{
}

#breadcrumb{
	display:none;
}

#isu{
	font-size: 1.1em;
	font-weight: 500;
	inline-size: fit-content;
  margin-inline: auto;
  text-align: left;
}


#mukyu{
	margin:20px auto 0 auto;
	hgroup{
		display:flex;
		justify-content: center;
		align-items: center;
		flex-wrap:wrap;
		gap:10px;
		h2{
			--clamp-max: 50;
			--clamp-min: 40;
			font-size: var(--clamp);
			font-weight: 600;
			color:red;
		}
		p{
			--clamp-max: 28;
			--clamp-min: 23;
			font-size: var(--clamp);
			font-weight: 600;
			line-height: 1em;
			span{
				font-size: .65em;
				display:block;
				font-weight: 500;
				line-height: 1.3em;
			}
		}
	}
	p{
		--clamp-max: 45;
		--clamp-min: 37;
		font-size: var(--clamp);
		font-weight: 600;
		svg{
			height:.8em;
			width:.8em;
		}
	}
}


#kaitori{
	margin:60px auto 0 auto;
	p#zaiko{
		font-size: 1.3em;
		text-align: left;
		font-weight: 500;
		color:red;
		> * + *{
			margin-left:.3em;
		}
		span{
			display:inline-block;
			font-weight: 600;
			padding:.2em .5em;
			border:2px solid red;
			border-radius: .3em;
			font-size: .8em;
			
		}
	}
	p#fuyou{
		margin:1em auto 0 auto;
		text-align: left;
	}
	figure{
		display:grid;
		grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
		gap:10px;
		margin:20px auto 0 auto;
		span{
			display:block;
			aspect-ratio: 4 / 3;
			background:#eee;
			border-radius: 10px;
			overflow: hidden;
		}
	}
	p#siharai{
		text-align: left;
		margin:20px auto 0 auto;
	}
	> div{
		margin:20px auto 0 auto;
		 h4{
			font-size: 1.3em;
			font-weight: 500;
			color:#ff8040;
			inline-size: fit-content;
			margin-inline: auto;
			text-align: left;
		 }
		 ul{
			display:grid;
			grid-template-columns: repeat(auto-fill,minmax(min(200px,100%),1fr));
			gap:10px;
			margin:20px auto 0 auto;
			li{
				a{
					display:block;
					aspect-ratio: 4 / 3;
					position:relative;
					overflow: hidden;
					border-radius: 10px;
					img {
						min-width:100%;
						min-height:100%;
						object-fit: cover;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
					&:hover{
						img{
							opacity: .75;
						}
					}
				}
			}
		 }
	}
}

#shuri{
	margin:60px auto 0 auto;
	p#genba{
			text-align: left;
			span{
				display:block;
				font-size: 1.1em;
				font-weight: 500;
				margin:.5em auto 0 auto;
			}
		}
	> div{
		display:grid;
		grid-template-columns: repeat(auto-fill,minmax(min(280px,100%),1fr));
		gap:20px;
		margin:20px auto 0 auto;
		
		section{
			h4{
				font-weight: 500;
				background:rgba(var(--mainColor));
				color:white;
				border-radius: .5em;
				padding:.3em 10px;
				text-align: left;
				span{
					font-size: .9em;
				}
			}
			dl{
				border-bottom:1px solid silver;
				font-size: .9em;
				margin:.5em auto 0 auto;
			div{
				display:flex;
				justify-content: space-between;
				padding:10px;
				border-top:1px solid silver;
				dd{
					span{
						font-size: .8em;
					}
				}
			}
		}
		}
	}
	aside{
		text-align-last: left;
		margin:1em auto 0 auto;
		font-size: .9em;
	}
}

#infobox{
	ul{
		li{
			display:grid;
			grid-template-columns: 7em 1fr;
			gap:10px;
			padding:10px 0;
			time{
			}
			div{
				text-align: left;
				a{
					text-decoration: revert;
					@media (any-hover: hover) {
						&:hover {
							text-decoration: none;
						}
					}
				}
			}
		}
	}
}

.for_contact{
	margin-top:60px;
	background:#eee;
	padding:20px;
	border-radius: .5em;
	h3{
		font-size: 1.2em;
		font-weight: 500;
		inline-size: fit-content;
  	margin-inline: auto;
  	text-align: left;
	}
	p{
		--clamp-max: 30;
		--clamp-min: 25;
		font-size: var(--clamp);
		font-weight: 600;
		svg{
			height:.8em;
			width:.8em;
		}
	}
	aside{
		margin:.5em auto 0 auto;
		font-size: .8em;
		text-align: left;
	}
}