@charset "utf-8";

.fancybox__container {
	figcaption {
		h2 {
			font-size:2.0rem;
			line-height:1.5;
			color:#FFFFFF;
			text-align:center;
			margin-bottom:.5em;
		}
		font-size:1.6rem;
		line-height:1.5!important;
	}
}

#case {
	.wrap {
		.contents {
			.link {
				display:flex;
				flex-wrap:wrap;
				align-items:center;
				justify-content:flex-start;
				grid-gap:20px;
				margin-bottom:60px;
				li {
					flex-grow:1;
					a {
						display:grid;
						background-color:#E5F0DE;
						height:3em;
						align-items:center;
						justify-content:center;
						padding:0 1em;
						white-space:nowrap;
					}
					&.active {
						a {
							background-color:var(--color_main);
							color:#FFFFFF;
						}
					}
				}
			}
			.cases {
				display:grid;
				grid-template-columns:repeat(4,1fr);
				grid-gap:30px 20px;
				li {
					a {
						display:block;
						.img {
							position:relative;
							img {
								display:block;
								width:100%;
								aspect-ratio:3/2;
								object-fit:cover;
							}
							.cat {
								position:absolute;
								z-index:1;
								background-color:var(--color_main);
								left:0;
								top:0;
								font-size:1.2rem;
								color:#FFFFFF;
								padding:.5em 1em;
							}
						}
						p {
							line-height:1.5;
							font-size:1.8rem;
							padding-top:.5em;
						}
					}
					figcaption {
						display:none;
					}
				}
			}
		}
	}
}

@media (hover:hover) {
	
}

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

}

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

	.fancybox__container {
		figcaption {
			h2 {
				font-size:1.8rem;
			}
			font-size:1.5rem;
			line-height:1.5!important;
		}
	}
	
	#case {
		.wrap {
			.contents {
				.link {
					grid-gap:15px;
					li {
						flex-grow:1;
						a {
							font-size:1.5rem;
						}
						&.active {
							a {
								background-color:var(--color_main);
								color:#FFFFFF;
							}
						}
					}
				}
				.cases {
					grid-gap:20px 15px;
					li {
						a {
							p {
								font-size:min(1.8vw,1.6rem);
							}
						}
					}
				}
			}
		}
	}
	
}

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

	.fancybox__container {
		figcaption {
			h2 {
				font-size:1.6rem;
			}
			font-size:1.4rem;
		}
	}
	
	#case {
		.wrap {
			.contents {
				.link {
					grid-gap:10px;
					margin-bottom:30px;
					li {
						flex-grow:1;
						a {
							height:2.4em;
							font-size:1.4rem;
						}
					}
				}
				.cases {
					grid-template-columns:repeat(2,1fr);
					grid-gap:20px 10px;
					li {
						a {
							.img {
								.cat {
									font-size:1.1rem;
								}
							}
							p {
								font-size:1.4rem;
							}
						}
					}
				}
			}
		}
	}

}