@charset "utf-8";

#main_body{
	--valBorderRadius: 10px;
	--colSelectBG : #faf5ed;
}

#sidebar1 {
	display: none;
}

.side1 #main {
	width: auto;
	flex: 1;
}

#main_body{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 10px;
}
#main_body .toc_link_wrap{
	width: 100%;
}
#content_header {
	width: auto;
	flex: 1;
}

#main_body .detail_html:has(.tagbox){
	width: 100%;
}
/* ギャラリー写真を囲むdiv. */
.detail_free_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 10px;
	width: 100%;
	box-sizing: border-box;
}

.lightBox{
	z-index: 1000;
	border: none;
	padding: 0px;
}

.tagbox{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
	justify-content: center;
	font-size: 2rem;
	line-height: 1em;
	padding: 20px 0px;
	width: 100%;
}
.tagbox a{
	display: inline-block;
	color: currentColor;
}
.tagbox details{
	position: relative;
	cursor: pointer;
}
.tagbox :is(p,details) {
	padding: 15px;
	border-radius: var(--valBorderRadius);
	background: var(--colSelectBG);
	border: none;
}
.tagbox details summary + *{
	position: absolute;
	z-index: 10;
	top: 100%;
	background: var(--colSelectBG);
	white-space: nowrap;
	border: none;
	left: 0;
}
.tagbox details[open]{
	border-radius: var(--valBorderRadius) var(--valBorderRadius) 0px 0px;
}
.tagbox details ul{
	margin: 0px;
	padding: 10px;
	list-style: none;
	border-radius: 0px var(--valBorderRadius) var(--valBorderRadius) var(--valBorderRadius);
}
.tagbox details ul li{
	padding: 5px 0px;
}
#main_body div:not(.detail_free){
	/* width: 100%; */
}
#main_body p{
	margin: 0px;
}
div[class^="detail_"]::before, div[class^="detail_"]::after{
	display: none;
}
#main_body div.detail_free:has(img){
	position: relative;
	overflow: hidden;
	cursor: pointer;
	width: auto;
	margin: 0;
	max-width: 150px;
}
#main_body div.detail_free:not(:has(img)){
	width: 100%;
}
#main_body div.detail_free p{
	margin: 0px;
	padding: 0px;
}
#main_body div.detail_free p:has(img){
	display: grid;
	place-content: center center;
	border-radius: var(--valBorderRadius);
	overflow: hidden;
}
#main_body div.detail_free img{
	display: block;
	margin: 0px;
	padding: 0px;
	width: auto !important;
	height: 150px !important;
	border-radius: var(--valBorderRadius);
	object-fit: contain;
}
#main_body .detail_free:has(img) p:nth-child(2){
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
	background: #0008;
	color: #fff;
	transform: translateY(100%);
	transition: transform 0.2s ease;
	text-align: center;
	font-size: 1.4rem;
	display: none;
}
#main_body .detail_free:has(img) p:nth-child(n+3){
	display: none;
}
#main_body .detail_free:has(img):hover p:nth-child(2){
	display: block;
	transform: translateY(0%);
}
#main_body.tagSelectWrap div.detail_free:not(.hasTag){
	display: none;
}
dialog#lightBox.imageFirst #lightBoxPrev,
dialog#lightBox.imageLast #lightBoxNext{
	display: none;
}

dialog#lightBox[open] {
	display: grid;
	place-content: center;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: none;
	background: #0008;
	color: #fff;
}
dialog#lightBox[open]::backdrop{
	background: #0008;
}
#imageArea{
	/* display: flex; */
	/* justify-content: center; */
	/* align-items: center; */
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 10px;
}
#imageArea .imagebox_image {
	display: grid;
	place-content: center center;
}

#main_body div[class*="detail"] #imageArea img{
	display: block;
	max-width: 90vw;
	max-height: 90vh;
	box-shadow:
		0px 1.6px 0.9px rgba(0, 0, 0, 0.039),
		0px 3.8px 2.2px rgba(0, 0, 0, 0.056),
		0px 6.9px 3.9px rgba(0, 0, 0, 0.069),
		0px 11.4px 6.4px rgba(0, 0, 0, 0.081),
		0px 18.8px 10.6px rgba(0, 0, 0, 0.094),
		0px 32.8px 18.5px rgba(0, 0, 0, 0.111),
		0px 71px 40px rgba(0, 0, 0, 0.15);
}
#imageArea p{
	/* background: #000; */
	text-align: center;
}
dialog#lightBox button[id^="lightBox"]{
	position: absolute;
	display: block;
	text-align: left;
	text-indent: -9999em;
	overflow: hidden;
	z-index: 100;
	margin: 0px;
	padding: 15px;
	background: transparent;
	box-sizing: content-box;
}
dialog#lightBox :is(button#lightBoxPrev,button#lightBoxNext) {
	padding-bottom: 1.75em;
}
#lightBoxClose,
#lightBoxNext,
#lightBoxPrev{
	width: 40px;
	height: 40px;
	border: none;
	background: #ccc;
}
#lightBoxNext,
#lightBoxPrev{
	top: calc(50% - 20px);
}
#lightBoxNext{
	right: 10px;
}
#lightBoxPrev{
	left: 20px;
}
#lightBoxClose{
	top: 20px;
	right: 20px;
}
button#lightBoxClose::before,
button#lightBoxPrev::before,
button#lightBoxNext::before{
	content: '';
	display: block;
	width: 40px;
	height:  40px;
	background :#fff;	
}
button#lightBoxClose::before {
	clip-path: polygon(10% 0, 0 10%, 40% 50%, 0 90%, 10% 100%, 50% 60%, 90% 100%, 100% 90%, 60% 50%, 100% 10%, 90% 0, 50% 40%);
}
button#lightBoxPrev::before {
	clip-path: polygon(40% 0%, 40% 30%, 100% 30%, 100% 70%, 39% 70%, 40% 100%, 0% 50%);
}
button#lightBoxNext::before{
	clip-path: polygon(0 30%, 60% 30%, 60% 0%, 100% 50%, 60% 100%, 60% 70%, 0 70%);
}


@media (orientation: portrait){
	#lightBoxNext, #lightBoxPrev{
		top: auto;
		bottom: 10px;
	}
}


.tagSelectWrap .detail_free_wrap:not(:has(.hasTag))::before {
	content: 'キーワードに該当する画像が見つかりません';
	display: block;
	text-align: center;
	outline: 1px solid currentColor;
	padding: 10px;
}