
:root {
	--_container-margin: var(--_global--container-margin);
}

body.home .l-contents,
body.page_demo .l-contents {
	position: relative;
}

.fadein-text span {
	display: inline-block;
}

.home .l-1row-header__branding,
.page_demo .l-1row-header__branding {
	display: none;
}

@media ( min-width: 769px ) {
	.sticky_logo {
		position: absolute;
		top: 32px;
		left: calc(32px + env(safe-area-inset-left));
		width: 160px;
		height: 214px;
		z-index: 1000;
		transition: transform 0.3s ease-in-out;
	}

	.sticky_logo a.logo_front-page {
		object-fit: contain; 
		display: block;
		background-color: #fff;
	}

	.sticky_logo figure a.logo_front-page img {
		max-width: 100%;
		height: auto;
	}

	body.logged-in .sticky_logo {
		top: var(--wp-admin--admin-bar--height);
	}

	.sticky_logo.logo-min {
		transform-origin: top left;
		transform: translateX(-30px) scale(0.8);
	}

	.first_view {
		height: 50dvh;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.main_catch {
		font-family: "Midashi Go MB31", sans-serif;
		letter-spacing: .25em;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		font-size: 2.25rem;
		line-height: 2;
	}

	.scroll {
		position: absolute;
		right: var(--_margin1);
		writing-mode: vertical-rl;
		bottom: 180px;
		color: #D06A63;
		font-size: 12px;
	}


	.scroll::before {
		animation: scroll 2s infinite;
		background-color: #D06A63;
		bottom: -115px;
		content: "";
		height: 100px;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		width: 1px;
		z-index: 2;
	}

	.scroll::after {
		background-color: #ccc;
		bottom: -115px;
		content: "";
		height: 100px;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		width: 1px;
	}



}


.target-items .wp-block-snow-monkey-blocks-items-item-free {
	display: flex;
	justify-content: center;
	align-items: center;
}

.target-items .wp-block-snow-monkey-blocks-items-item-free > div {
	border-radius: 20px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.l-header__content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}



@media ( max-width: 768px ) {
	.sticky_logo {
		position: absolute;
		top: 16px;
		left: calc( 16px + env(safe-area-inset-left));
		width: 25%;
		height: auto;
		z-index: 1000;
		transition: transform 0.3s ease-in-out;
	}

	.sticky_logo a.logo_front-page {
		object-fit: contain; 
		display: block;
		background-color: #fff;
	}

	.sticky_logo figure a.logo_front-page img {
		max-width: 100%;
		height: auto;
	}


	.sticky_logo.logo-min {
		transform-origin: top left;
		transform: translateX(-30px) scale(0.8);
	}

	.first_view {
		height: 100dvh;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.main_catch {
		font-family: "Midashi Go MB31", sans-serif;
		letter-spacing: .25em;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		font-size: 2.25rem;
		line-height: 2;
	}

	.scroll {
		position: absolute;
		right: var(--_margin1);
		writing-mode: vertical-rl;
		bottom: 180px;
		color: #D06A63;
		font-size: 12px;
	}


	.scroll::before {
		animation: scroll 2s infinite;
		background-color: #D06A63;
		bottom: -115px;
		content: "";
		height: 100px;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		width: 1px;
		z-index: 2;
	}

	.scroll::after {
		background-color: #ccc;
		bottom: -115px;
		content: "";
		height: 100px;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		width: 1px;
	}

}


@keyframes scroll {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	51% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}