@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&family=Klee+One:wght@400;600&family=Shippori+Mincho&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@400;600&display=swap');

* {
	margin: 0;
	padding: 0;
}

body {
	overflow-x: clip;
	background-color: #faf4eb;
	font-size: 1vw;
	color: #3d3d3d;
}
a {
	color: #3d3d3d;
}

.bg {
	justify-content: center;
	align-items: center;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100lvh;
}
.bg__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}
.bg__image--pri {
	opacity: 1;
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	z-index: 10;
	inset: 0 auto auto 0;
	width: 100%;
}

.logo {
	position: absolute;
	inset: 1.5em auto auto 1.5em;
	padding: 1.8em;
	border-radius: .5em;
	background-color: #f08300;
}
.logo svg {
	fill: #fff;
}
.logo--v {
	width: 3.6em;
	font-size: 1em;
}
.logo--h {
	width: 12em;
	font-size: 1em;
}

.site-navi {
	display: flex;
	align-items: center;
	gap: 2em;
	position: absolute;
	inset: 1.5em 1.5em auto auto;
	z-index: 10;
	padding: 0 2.4em;
	border-radius: .5em;
	background-color: rgba(255,255,255,.9);
	backdrop-filter: blur(.25em);
	font-family: Zen Kaku Gothic New;
	/* font-size: 1.125em; */
}
.site-navi a {
	display: inline-block;
	font-weight: 500;
	text-decoration: none;
	line-height: 4.8;
}

.content {
	position: relative;
	width: 100%;
	height: 100lvh;
}

.catch {
	position: absolute;
	inset: 40% auto auto 30%;
	transform: translate(-50%, -50%);
	writing-mode: vertical-rl;
	font-family: "Klee One", sans-serif;
	font-weight: 600;
	font-size: 2em;
	letter-spacing: .2em;
	line-height: 2;
	filter: blur(1em);
	opacity: 0;
	will-change: transform;
	transition: all 2s;
}
.is-loaded .catch {
	filter: blur(0);
	opacity: 1;
	transform: translate(-50%, -50%);
}

.name {
	position: absolute;
	inset: auto 4% 4% auto;
	font-family: "Zen Old Mincho", sans-serif;
	font-size: 1em;
}

.section {
	position: relative;
	padding-bottom: 100lvh;
}
.section__bg {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100lvh;
	overflow: hidden;
	transform: scale(0);
}
.section__content {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 150lvh;
	background-color: rgba(250,244,235,1);
	/* background-color: rgba(240,131,0,.9); */
	/* backdrop-filter: blur(.25em); */
	/* clip-path: circle(50% at 50% 50%); */
}
.section__bg img {
	/* content: ""; */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* mix-blend-mode: multiply; */
	/* background-color: rgba(250,244,235,.9); */
	/* background-color: rgba(240,131,0,.9); */
	/* backdrop-filter: blur(.25em); */
	/* clip-path: circle(50% at 50% 50%); */
}
.more {
	text-align: center;
	font-family: "Zen Old Mincho", sans-serif;
	font-size: 3em;
}

.section--ter .section__content {
	background-color: #f08300;
	color: #ddd;
}