@charset "UTF-8";

#updated-at::before {
	content: "更新:";
	margin-right: 0.5ex;
	color: var(--color-theme);
}

dl#history {
	margin : 0;
	padding: 0;
}
dl#history dt {
	padding-left: 1.5em;
}
dl#history dd {
	padding-left: 1em;
}
dl#history dt:first-of-type {
	background-image : url("branches-closed.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size  : auto 1.5ex;
	cursor: pointer;
}
dl#history dt:not(:first-of-type),
dl#history dt:nth-of-type(2) ~ dd {
	display: none;
}
dl#history dt.recent,
dl#history dt:nth-of-type(2) ~ dd.recent {
	display: block;
}

dl#history dt:first-of-type {
	margin-top: 0;
}
dl#history.all dt:first-of-type {
	background-image : url("branches-open.svg");
}
dl#history.all dt,
dl#history.all dt:nth-of-type(2) ~ dd {
	display: block;
}

figure.popping figcaption::after {
	content: "［クリックで拡大］";
	display: inline-block;
	color: silver;
	font-weight: normal;
}

/** 画像の拡大表示 **/

#PoppingImageFrame {
	position: fixed;
	top : 0;
	left: 0;
	margin : 0;
	padding: 0 calc(100vw - 100%) 0 0;
	height: 100vh;
	width : 100vw;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items    : center;
}
#PoppingImageFrame img {
	object-fit: scale-down;
	max-width : calc(100% - 2rem);
	max-height: calc(100% - 2rem);
	filter: drop-shadow(1ex 1ex 0.5ex rgba(0, 0, 0, 0.5));
	animation: imagePopping;
	animation-duration: 400ms;
}
#PoppingImageFrame svg#Close {
	position: fixed;
	top   : 1.5rem;
	right : 1.5rem;
	width : 1.5rem;
	height: 1.5rem;
	color: whitesmoke;
	filter: drop-shadow(0 0 0.4ex rgba(0, 0, 0, 0.8));
}
#PoppingImageFrame svg#Close:hover {
	color: white;
	filter: drop-shadow(0 0 0.5ex rgba(0, 0, 0, 1));
	transition: color 200ms, filter 200ms;
	cursor: pointer;
}
@keyframes imagePopping {
	  0% {opacity: 0;}
	100% {opacity: 1;}
}