img {
	width: auto;
	max-width: 100%;
	height: auto;
}

canvas {
	position: absolute;
	inset: 0;
	width: 100vw;
	height: 100vh;
}


/* 
 .smilehohoemi-image
//////////////////////////////////////// */

.smilehohoemi-logo {
	aspect-ratio: 1320 / 330;
}

.smilehohoemi-caption {
	aspect-ratio: 1230 /216;
}

.smilehohoemi-figure {
	aspect-ratio: 1920 / 720;
}




/* ============================
// circle-image-gallery
// content-mobile
// ============================ */

.content-mobile {
	--mobile-max-width: calc(480px + var(--container-padding) * 2);
	overflow-x: clip;

	.container {
		width: 100%;
		max-width: var(--mobile-max-width);
		padding-inline: var(--container-padding);
		margin-inline: auto;
	}

	.svg-title {
		margin-block-start: 0;
	}

	.button-arrow-rotate {
		margin-block: 30px;

		&.link-location {
			--color-background: #FE5454;
			--color-text: var(--color-white);
		}

		&.link-archives {
			--color-background: #949090;
			--color-text: var(--color-white);
		}
	}

	.section-hero-area {
		margin-inline: -4px;

		.splide__track {
			overflow: visible;
		}

		.splide__slide {
			padding-inline: 4px;

			.slide__link {
				display: block;
			}

			.slide__image {
				aspect-ratio: 16 / 9;
				object-fit: cover;
			}
		}

		.splide__arrow {
			--position: 0;

			&.splide__arrow--prev {
				left: var(--position);
				translate: -50% 0;
			}

			&.splide__arrow--next {
				right: var(--position);
				translate: 50% 0;
			}
		}

		.splide__pagination {
			display: none;
		}
	}

	.site-links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 320px));
		justify-content: center;
		gap: 30px 10px;
		margin-block: 60px;

		.site-links-item {}

		.site-link {
			display: grid;
			gap: 10px;

			.site-link-image {
				aspect-ratio: 16 / 9;
				object-fit: cover;
			}

			.site-link-title {
				font-weight: var(--font-weight--Medium);
				color: #949090;
				text-decoration: underline;
			}
		}
	}

	.section-news {
		margin-block: 60px;
		padding-block: 50px;
		padding-inline: 30px;
		border-radius: 20px;
		background-color: var(--color-white);

		.recent-posts {
			display: grid;
			gap: 20px;
		}

		.recent-post {
			display: grid;
			gap: 10px;

			.recent-post-time {}

			.recent-post-link {
				text-decoration: underline;
			}
		}
	}

	.section-social-media {
		margin-block: 60px;

		.facebook-banners {
			display: grid;
			gap: 10px;
		}

		.facebook-banner {
			.facebook-banner-link {
				display: block;
			}

			.facebook-banner-image {}
		}
	}

	.site-banners {
		display: grid;
		gap: 10px;

		.site-banner {
			.site-banner-link {
				display: block;
			}

			.site-banner-image {}
		}
	}

	.full-bleed {
		width: 168%;
		height: auto;
		position: relative;
		left: 50%;
		translate: -50% 0;

		.full-bleed-image {
			aspect-ratio: 1920 / 720;
			object-fit: cover;
		}
	}
}



/* ============================
// circle-image-gallery
// content-desktop
// ============================ */

#canvas-container {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;

	.circle-categoryLabel {
		font-size: 20px;
		font-weight: var(--font-weight--Medium);
		line-height: 24px;
	}

	.focus-imageLabel {
		width: fit-content;
		height: 3em;
		padding-inline: 0.75em;
		align-content: center;
		background-color: color-mix(in srgb, var(--color-text) 80%, transparent);
		font-size: 20px;
		font-weight: var(--font-weight--Medium);
		line-height: 24px;
		color: var(--color-white);
		translate: 0 -2em;
	}
}


/* 
 .loaderAnimation
//////////////////////////////////////// */

.loaderAnimation {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
}

.loaderAnimation__center {
	display: grid;
	place-content: center;
	width: 100%;
	height: 100%;
}

.loaderAnimation .loaderBox {
	--base: 95vmin;
	--max: 1920px;
	/* 子要素に高さを伝播させるためheight必須 */
	width: min(var(--base), var(--max));
	height: min(var(--base), var(--max));
	/* optional: aspect-ratio 正方形 */
	aspect-ratio: 1 / 1;
	position: relative;
	display: grid;
	align-content: end;
	justify-items: center;
	opacity: 0;

	& .smilehohoemi-logo {
		position: absolute;
		/* width: 900px / 1920px; */
		width: 46%;
		margin-inline: auto;
	}

	& .smilehohoemi-caption {
		/* width: 1452px / 1920px; */
		width: 75%;
	}

	& .smilehohoemi-figure {
		/* width: 1920px / 1920px; */
		width: 100%;
	}
}

.loaderAnimation .progress-bar {
	position: relative;
	/* width: 1028px / 1920px; */
	/* height: 32px / 1920px; */
	--base-w: 53%;
	--base-h: 1.6vmin;
	width: clamp(180px, var(--base-w), 1028px);
	height: min(var(--base-h), 16px);
	/* margin-block: 80px / 1920px; */
	margin-block: 4%;
	border-radius: 9999px;
	background-color: #E1F3F7;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: #17BBEF;
		transform: scaleX(var(--progress));
		transform-origin: left;
		transition: transform 0.2s ease;
		border-radius: inherit;
	}
}