@charset "utf-8";

:root{
}

#top_img{
	padding:60px 0 80px 0;
	position:relative;
	margin:20px auto 0 auto;
	z-index: 5;
	div{
		&:nth-of-type(1) {
			width: var(--container-width);
			aspect-ratio: 2 / 1;
			margin: 0 auto;
			background: url(grp/top_img.jpg);
			background-size: cover; /* 全体を埋める */
			background-position: center center;
			background-attachment: fixed; /* 背景を固定 */
			border-radius: 30px;
		}
	
		&:nth-of-type(2),
		&:nth-of-type(3) {
			width: min(380px, 33%);
			aspect-ratio: 3 / 2;
			background-size: cover;  /* これでボックス全体を埋める */
			background-position: center center;
			background-repeat: no-repeat;
			border-radius: 20px;
			position: absolute;
		}
	
		&:nth-of-type(2) {
			background-image: url(grp/top_img2.jpg);
			left: 20px;
			top: 0;
		}
	
		&:nth-of-type(3) {
			background-image: url(grp/top_img3.jpg);
			right: 20px;
			bottom: 0;
		}
	}
	@media (max-width: 768px) {
		div{
			&:nth-of-type(1) {
				aspect-ratio: 4 / 3;
				background-size: cover;
			}
			&:nth-of-type(2),
			&:nth-of-type(3) {
				display:none;
			}
		}
	}
}

.fade-in-text {
	margin:30px auto 0 auto;
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
    gap: 0.1em;
    --clamp-max: 40;
		--clamp-min: 35;
		font-size: var(--clamp);
    font-family: "Corinthia", serif;
					font-weight: 700;
	span {
    display: inline-block;
    opacity: 0;
    transform: scale(0.2);
    transition: opacity 0.5s, transform 0.5s;
}
}

/* フェードイン（0.2 → 1.2 → 1倍 & 不透明度 0 → 100） */
@keyframes fadeInScale {
	0% {
			opacity: 0;
			transform: scale(0.2);
	}
	50% {
			opacity: 1;
			transform: scale(1.2);
	}
	100% {
			opacity: 1;
			transform: scale(1);
	}
}

/* フェードアウト（サイズ変化なし！不透明度 100 → 0） */
@keyframes fadeOut {
	0% {
			opacity: 1;
			transform: scale(1); /* サイズ固定 */
	}
	100% {
			opacity: 0;
			transform: scale(1); /* サイズ固定 */
	}
}


.article_list{
	div{
		display:grid;
		grid-template-columns: repeat(auto-fill,minmax(min(270px,100%),1fr));
		gap:50px;

		font-family: var(--font-family-gothic);
		a{
			display:block;
			color:rgb(var(--baceFontColor));
			figure{
				position:relative;
				> span{
					display:block;
					border-radius: 0 20px 20px 20px;
					aspect-ratio: 1 / 1;
					background:#eee;
					overflow: hidden;
					position:relative;
					img{
						position: absolute;
  					inset: 0;
  					width: 100%;
  					height: 100%;
 						object-fit: cover;
						transition: all .5s ease-out;
					}
				}
				figcaption{
					text-align: left;
					font-weight: 500;
					margin:20px auto 0 auto;
					> span{
						position:absolute;
						top:5px;
						left:5px;
						font-family: var(--font-family-minchou);
						display:block;
						background:red;
						color:white;
						padding:0 .5em
					}
				}
			}
			p{
				text-align: right;
				font-size: .9em;
				font-weight: 500;
				margin:.5em auto 0 auto;
				span{
					font-size: .8em;
					margin:0 0 0 .3em;
				}
			}
			&:hover{
				figure{
					> span{
						img{
							transform: scale(1.1);
						}
					}
				}
			}
		}
	}
}

#info{
	> div{
		display:grid;
		grid-template-columns: repeat(4,1fr);
		gap:30px;
		> a{
			color:rgb(var(--baceFontColor));
			font-family: var(--font-family-gothic);

			display:grid;
			grid-template-rows: subgrid;
			grid-row: span 3;
			gap:0;
			> *{
				width:100%;
			}
			figure{
				position:relative;
				aspect-ratio:  4 / 3;
				border-radius: 10px;
				background:#eee;
				position:relative;
				overflow: hidden;
				img{
					min-width:100%;
					min-height:100%;
					object-fit: cover;
					position: absolute;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}
			time{
				display:block;
				font-size: .8em;
				text-align: left;
				margin:1em auto 0 auto;
			}
			h3{
				text-align: left;
				margin:.5em auto 0 auto;
				font-weight: 500;
			}
		}
	}
	@media (max-width: 768px) {
		> div{
			grid-template-columns: repeat(2,1fr);
		}
	}
}

#top_com{
	> div{
		width:min(1200px,100%);
		h3{
			font-weight: 500;
			font-size: 1.2em;
			inline-size: fit-content;
  		margin-inline: auto;
  		text-align: left;
		}
		p{
			width:min(760px,100%);
			text-align: left;
			margin:1em auto 0 auto;
		}
	}
}

#prf{
	> div{
		border:1px solid rgb(var(--mainColor));
		background:rgba(255 255 255 /.7);
		padding:30px;
		display:grid;
		grid-template-columns: repeat(auto-fill,minmax(min(400px,100%),1fr));
		gap:30px;
		align-items: center;
		> div{
			dl{
				border-bottom:1px solid #eee;
				div{
					display:grid;
					grid-template-columns: 7em 1fr;
					padding:10px;
					border-top:1px solid #eee;
					dd{
						text-align: left;
					}
				}
			}
		}
	}
}

aside.page_links{
	margin:20px auto 0 auto;
	text-align: right;
	a{
		display:inline-block;
		padding:.3em .7em;
		background:rgb(var(--mainColor));
		color:white;
		border-radius: 5px;
		&::after{
			display: inline-block;
      content: "";
      background-color: white;
        
      -webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="currentColor" stroke-width="2" class="ai ai-CircleChevronRightFill"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM9.793 8.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L13.086 12 9.793 8.707z"/></svg>');
      -webkit-mask-size: contain;
      mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="currentColor" stroke-width="2" class="ai ai-CircleChevronRightFill"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM9.793 8.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L13.086 12 9.793 8.707z"/></svg>');
      mask-size: contain;
      mask-repeat: no-repeat;
        
      height: 1em;
      width: 1em;
			vertical-align: -2px;
			margin:0 0 0 .3em;
		}
	}
}