@charset "utf-8";


/* u > stack */
.u-stack{
	& > *{
		margin-block: 0;
		
		& + *{
			margin-top: var(--stack, 0);
		}
	}
	
	&:where(.u-stack-page) > *{
		--stack: 7.5rem;
	}
	
	&:where(.u-stack-section) > *{
		--stack: 3.75rem;
	}
	
	&:where(.u-stack-content) > *{
		--stack: 1rem;
	}
	
	&:where(.u-stack-emomemo) > *{
		--stack: 1rem;
	}
	
	&:where(.u-stack-events) > *{
		--stack: 1.25rem;
	}
}


/* c > ttl */
.c-ttl{
	font-size: 1em;
	font-weight: bold;
	
	&[data-ruby]{
		display: grid;
		
		&::after{
			content: attr(data-ruby);
		}
	}
	
	&:where(.c-ttl-section){
		font-size: 1.6em;
		text-align: center;
		background: linear-gradient(.25turn, #404040 67%, #896743 0) no-repeat center top / 6.25rem 3px;
		padding-top: .5em;
	}
	
	&:where(.c-ttl-content){
		font-size: 1.6em;
	}
}


/* c > link */
.c-link{
	color: inherit;
	transition: 333ms ease;
	
	&:not(:hover){
		text-decoration-color: transparent;
	}
}

.c-link-block{
	display: block;
}



/* c > cards */
.c-cards{
	display: grid;
	grid-template-columns: var(--cards-columns, repeat(var(--cards-repeat, 2), 1fr) );
	gap: var(--cards-gap, 1em);
	
	&:where(ul, ol){
		list-style: none;
		padding-left: 0;
	}
}


/* c > box */
.c-box{
	padding: 1em;
}


/* c > modal */
.c-modal{
	background: #fefdfa;
	border: 1px solid #B3B3B3;
	border-radius: 1.25em;
	box-shadow: 0 4px 4px rgb(0 0 0 / .25);
	
	max-width: min(80dvw, 980px);
	max-height: 90dvh;
	box-sizing: border-box;
	
	&::backdrop{
		background: rgb(0 0 0 / .25);
		-webkit-backdrop-filter: blur(.25em);
		backdrop-filter: blur(.25em);
	}
}

.c-modal__header{
	text-align: right;
	position: sticky;
	top: 0;
	
	margin-inline: .5em;
}

.c-modal__close{
	text-indent: -100vmax;
	overflow: hidden;
	color: white;
	background:
		linear-gradient(currentcolor 0 0) no-repeat center / 1em 3px,
		linear-gradient(currentcolor 0 0) no-repeat center / 3px 1em;
	background-color: #506983;
	border: 0;
	border-radius: 100vmax;
	
	width: 1.875em;
	height: 1.875em;
	rotate: .125turn;
}

.c-box--modal{
	padding: 3.75em;
}
@media (max-width: 768px){
	.c-box--modal{
		padding: 1.875em;
	}
}


/* Anniversary */
.anniversary30th{
	margin-bottom: 7.5em;
}

.anniversary-bg{
	background: url(./img/bg.png) no-repeat top / 100% auto;
}
@media (max-width: 768px){
	.anniversary-bg{
		background-position: center top;
		background-size: auto 64%;
	}
}

.anniversary{
	text-align: center;
	padding-top: 5em;
}

.c-img--anniversary-logo{
	max-width: 64%;
}


/* history */
.c-scroll{
	overflow: auto;
	padding-inline: max((100cqw - 1260px + 2.5%) / 2, 2.5%);
}

.c-scroll--history{
	background: #6a9584;
}

.c-img-scroll{
	max-width: none;
}
@media (max-width: 768px){
	.c-img-scroll{
		max-height: 64dvh;
	}
}

.c-note--history-more{
	text-align: right;
}



/* emomemo */
.c-note--emomemo-more{
	text-align: right;
}

.c-box--emomemo{
	border: 1px solid #B3B3B3;
	border-radius: 1.25em;
	background: #fefdfa;
	
	padding: .625em 1.25em;
	
	& .c-fig--emomemo{
		margin-inline: -1.25em;
	}
	
	& :where(.c-link--emomemo, .u-stack-emomemo){
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
}

.c-box--emomemo-heading{
	background: #f9f7e8;
	border-radius: 1.25em;
	padding: 2.5em;
	
	grid-column: span 2;
	display: grid;
	place-items: center;
}

.c-link--emomemo{
	background: none;
	border: none;
	padding: 0;
}

.c-cards--emomemo{
	--cards-repeat: 3;
	--cards-gap: 2.5em 5.625em;
}
@media (max-width: 768px){
	.c-cards--emomemo{
		--cards-repeat: 2;
		--cards-gap: 1.25em;
	}
}

.c-img--emomemo{
	aspect-ratio: 360 / 202.5;
	object-fit: cover;
}


/* events */
.c-cards--events{
	--cards-gap: 3.75em 1.875em;
}
@media (max-width: 768px){
	.c-cards--events{
		--cards-repeat: 1;
	}
}

.c-fig--events{
	position: relative;
	z-index: 0;
	
	& .c-icon--schedule{
		position: absolute;
		inset: 0 auto auto 0;
		translate: 50% -50%;
	}
}

.c-img--events{
	border-radius: 1.25em;
}