@charset "utf-8";

html, body {
  overflow: auto; /* または scroll。スクロール可能にする */
  -ms-overflow-style: none;  /* IE/Edge（旧）対応 */
  scrollbar-width: none;     /* Firefox対応 */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge対応 */
}

#header {
	position: fixed;
}
body {
	padding-top: 50px;
}

section {
	.wrap {
		.contents {
			width: 100%;
			max-width: 100%;
		}
	}
}

section {
	.wrap {
		.contents {
			&.masonry-wrap {
				.grid-sizer {
					width:25%;
				}
				&.layout {
				.masonry-item {
					transition-duration: .5s!important;
				}
				}
				.masonry-item {
					width:25%;
					overflow:hidden;
					display:block;
					position:relative;
					opacity: 1;
					transform: translateY(0);
					/* transition-duration: .5s; */
					transition-duration: 0s!important;
					/* transition: none !important; */
					&.is-hidden {
						opacity: 0;
						transform: translateY(30px);
					}
					img {
						display:block;
						width:100%;
						height:100%;
						aspect-ratio:4/3;
						object-fit:cover;
					}
					&.size-vertical {
						aspect-ratio:4/6;
					}
					h2 {
						font-size:1.5rem;
						color:#FFFFFF;
						font-weight:600;
						width:100%;
						line-height:1.5;
						padding:0 1em;
						position:absolute;
						z-index:1;
						left:0;
						bottom:.5em;
						opacity:0;
					}
				}
			}
		}
	}
}

body {
	&.modalopen {
		overflow:hidden;
		.post-single {
			top:0;
			pointer-events: all;
			.post-wrap {
				& > .close {
					opacity: 1;
					pointer-events: all;
				}
			}
			.btns {
				right: 0;
				opacity: 1;
				pointer-events: all;
			}
		}
	}
}

.post-single {
	position:fixed;
	z-index:999;
	top:100vh;
	left:0;
	background-color:#000000;
	width:100%;
	height:100vh;
	height:100dvh;
	display:grid;
	align-items:center;
	justify-content:center;
	overflow-y:auto;
	overflow-x: hidden;
	padding:30px;
	pointer-events: none;
	transition:.3s;
	.post-wrap {
		max-width:900px;
		& > .close {
			display:block;
			cursor:pointer;
			width:20px;
			position:fixed;
			z-index:1;
			top:20px;
			right:20px;
			background: url(../img/common/oval.svg) no-repeat center center/auto 50px;
			transition-duration: .5s;
			transition-delay: .1s;
			opacity: 0;
			pointer-events: none;
		}
		.post-content {
			transition-duration: .5s;
			transition-delay: .1s;
			opacity: 1;
			pointer-events: all;
			position: relative;
			h2 {
				font-size:2.0rem;
				color:#FFFFFF;
				margin-bottom:1em;
				display:grid;
				grid-template-columns:repeat(2,auto);
				justify-content:start;
				align-items:center;
				.cpalette {
					width:.8em;
					height:.8em;
					border-radius:50%;
					margin-right:.5em;
					background-color: #FFFFFF!important;
				}
			}
			img {
				display:block;
				width:100%;
			}				
			.imgbox {
				img {
					display:block;
					margin-bottom:5px;
				}
				.mainimg {
					margin-bottom:5px;
					position:relative;
				}
				ul {
					display:flex;
					column-gap:3px;
					li {
						flex-grow:1;
						cursor:pointer;
						position:relative;
						max-width:calc(20% - 2.6px);
						&.active {
							&::before {
								content:'';
								display:block;
								width:calc(100% - 6px);
								aspect-ratio:4/3;
								border:3px solid #ff0000;
								position:absolute;
								z-index:1;
								left:0;
								top:0;
							}
						}
					}
				}
			}
			.description {
				p {
					font-size:1.6rem;
					color:#FFFFFF;
					line-height:1.6;
					margin:1em 0;
				}
			}
			.cat {
				display:flex;
				gap:5px;
				a {
					border:1px solid #FFFFFF;
					color:#FFFFFF;
					font-size:1.3rem;
					padding:.2em .6em;
				}
			}
			&.load {
				pointer-events: none;
				opacity: 0;
				transition-duration: 0s;
				transition-delay: 0s;
			}
		}
		.related-posts {
			padding-top:30px;
			position: relative;
			transition-duration: .5s;
			transition-delay: .1s;
			opacity: 1;
			pointer-events: all;
			&.load {
				pointer-events: none;
				opacity: 0;
				transition-duration: 0s;
				transition-delay: 0s;
			}
			h2 {
				font-size:2.4rem;
				color:#FFFFFF;
				font-weight:500;
				margin-bottom:.5em;
				display:grid;
				grid-template-columns:repeat(2,auto);
				justify-content:start;
				align-items:center;
				.cpalette {
					width:.7em;
					height:.7em;
					border-radius:50%;
					margin-right:.33em;
					background-color: #FFFFFF!important;
				}
			}
			.related-post {
				display:grid;
				grid-template-columns:repeat(5,1fr);
				grid-gap:5px;
				.item {
					overflow:hidden;
					position:relative;
					h3 {
						font-size:1.2rem;
						line-height:1;
						color:#FFFFFF;
						position:absolute;
						width:100%;
						padding:.66em .5em;
						z-index:1;
						background-color:rgba(0,0,0,.5);
						left:0;
						bottom:0;
					}
				}
			}
			&::before {
				content:'';
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top:0;
				z-index: 1;
				pointer-events: none;
				background: url(../img/common/oval.svg) no-repeat center center/auto 30px;
				transition:.3s;
				opacity: 0;
			}
			&.load {
				pointer-events: none;
				opacity: 0;
				&::before {
					pointer-events: all;
					opacity: 1;
				}
			}
		}
	}
	.btns {
		position:fixed;
		right:-50px;
		top:50%;
		transform:translateY(-50%);
		display:grid;
		grid-gap:2px;
		transition-duration: .5s;
		transition-delay: .1s;
		opacity: 0;
		pointer-events: none;
		li {
			height:50px;
			position:relative;
			& > span {
				background-color:#FFFFFF;
				height:50px;
				width:150px;
				display:grid;
				grid-template-columns:50px 1fr;
				align-items:center;
				justify-content:center;
				cursor: pointer;
				transitoin:.3s;
				position:absolute;
				top:0;
				left:-50px;
				img {
					width:25px;
					display:block;
					margin:0 auto;
				}
				.txt {
					text-align:center;
					font-size:1.5rem;
				}
			}
		}
	}
}

.loading {
	position:fixed;
	z-index:20;
	bottom:20px;
	left:50%;
	transform:translateX(-50%);
	transition:.5s;
	opacity: 0;
	pointer-events: none;
	&.show {
		opacity: 1;
	}
	img {
		width:50px;
	}
}

@media (hover:hover) {

	section {
		.wrap {
			.contents {
				&.masonry-wrap {
					.masonry-item {
						img {
							transition-duration:.3s;
						}
						h2 {
							transition-duration:.3s;
						}
						&:hover {
							img {
								filter:brightness(.33);
							}
							h2 {
								opacity:1;
							}
						}
					}
				}
			}
		}
	}


	.post-single {
		.post-wrap {
			& > .close {
				transition:.3s;
				&:hover {
					transform:rotate(90deg);
				}
			}
			.post-content {
				.cat {
					a {
						&:hover {
							opacity:1;
							background-color:#FFFFFF;
							color:#000000;
						}
					}
				}
			}
			.related-posts {
				.related-post {
					.item {
						img {
							transition:.3s;
						}
						&:hover {
							opacity:1;
							img {
								transform:scale(1.05);
							}
						}
					}
				}
			}
		}
		.btns {
			li {
				& > span {
					transition:.3s;
					&:hover {
						left:-150px;
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:1200px) {

}

@media screen and (max-width:1024px) {

	section {
		.wrap {
			.contents {
				&.masonry-wrap {
					.grid-sizer {
						width:calc(100% / 3);
					}
					.masonry-item {
						width:calc(100% / 3);
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:768px) {

	section {
		.wrap {
			.contents {
				&.masonry-wrap {
					.grid-sizer {
						width:50%;
					}
					.masonry-item {
						width:50%;
					}
				}
			}
		}
	}

}

@media screen and (max-width:640px) {

	section {
		.wrap {
			.contents {
				&.masonry-wrap {
					.grid-sizer {
						width:100%;
					}
					.masonry-item {
						width:100%;
					}
				}
			}
		}
	}

	.post-single {
		padding:50px 20px 20px;
		.post-wrap {
			& > .close {
				display:none;
			}
			.post-content {
				h2 {
					font-size:1.8rem;
				}
				.description {
					p {
						font-size:1.4rem;
					}
				}
				.cat {
					a {
						font-size:1.2rem;
					}
				}
			}
			.related-posts {
				padding-top:20px;
				h2 {
					font-size:2.0rem;
				}
				.related-post {
					grid-template-columns:repeat(2,1fr);
					.item {
						&:last-child {
							display:none;
						}
					}
				}
			}
		}
		.btns {
			top:0;
			right:-100px;
			transform:translateY(0);
			width:100%;
			grid-template-columns:repeat(3,auto);
			justify-content:end;
			li {
				height:30px;
				overflow:hidden;
				width:30px;
				&:first-child {
					order:2;
				}
				&:nth-child(2) {
					order:1;
				}
				& > span {
					height:30px;
					grid-template-columns:30px 1fr;
					left:0;
					img {
						width:15px;
					}
				}
			}
		}
	}

}