@charset "utf-8";
/*-----------------------------------------------
 * deco.css
 * ページ共通バブルパーティクル（fixed レイヤ）
-------------------------------------------------*/
@keyframes decoRise {
	from {
		transform: translate3d(0, 100vh, 0);
	}
	to {
		transform: translate3d(var(--deco-drift, 0), calc(-100vh - 10%), 0);
	}
}
@keyframes decoSpin {
	from {
		transform: rotate(var(--deco-rotate, 0deg));
	}
	to {
		transform: rotate(calc(var(--deco-rotate, 0deg) + 360deg));
	}
}

#fullWrap > .main,
#fullWrap > .footer {
	position: relative;
	z-index: 1;
}

.deco-bubble-layer {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	contain: strict;
}
.deco-bubble-layer .deco-item {
	position: absolute;
	left: var(--deco-x);
	bottom: 0;
	animation: decoRise var(--deco-rise-duration, 30s) linear infinite;
	animation-delay: calc(var(--deco-rise-delay, 0s) * -1);
}
.is-deco-trail .deco-bubble-layer .deco-item {
	will-change: transform;
}
.deco-bubble-layer.is-paused .deco-item,
.deco-bubble-layer.is-paused .deco-item__shape {
	animation-play-state: paused;
}
.deco-item.is-twinkle {
	width: min(calc(26 / var(--vw-min) * 100vw), 26px);
	height: min(calc(26 / var(--vw-min) * 100vw), 26px);
	margin-left: min(calc(-13 / var(--vw-min) * 100vw), -13px);
}
.deco-item.is-triangle-fill,
.deco-item.is-triangle-stroke {
	width: min(calc(18 / var(--vw-min) * 100vw), 18px);
	height: min(calc(18 / var(--vw-min) * 100vw), 18px);
	margin-left: min(calc(-9 / var(--vw-min) * 100vw), -9px);
}
@media screen and (max-width:768px){
	.deco-item.is-twinkle {
		width: min(calc(39 / var(--vw-min) * 100vw), 39px);
		height: min(calc(39 / var(--vw-min) * 100vw), 39px);
		margin-left: min(calc(-20 / var(--vw-min) * 100vw), -20px);
	}
	.deco-item.is-triangle-fill,
	.deco-item.is-triangle-stroke {
		width: min(calc(27 / var(--vw-min) * 100vw), 27px);
		height: min(calc(27 / var(--vw-min) * 100vw), 27px);
		margin-left: min(calc(-14 / var(--vw-min) * 100vw), -14px);
	}
}
@media screen and (min-width:769px){
	.deco-item__body {
		display: block;
		width: 100%;
		height: 100%;
		transform: translate3d(
			calc(var(--deco-mx, 0) * var(--deco-depth, 0.5) * var(--deco-strength, 28) * -1px),
			0,
			0
		);
	}
	.is-deco-trail .deco-item__body {
		will-change: transform;
	}
}
.deco-item__shape {
	display: block;
	width: 100%;
	height: 100%;
	animation: decoSpin var(--deco-spin-duration, 6s) linear infinite;
	animation-direction: var(--deco-spin-direction, normal);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.deco-item__shape.is-twinkle {
	-webkit-mask-image: url(../img/common/parts/twinkle.svg);
	mask-image: url(../img/common/parts/twinkle.svg);
}
.deco-item__shape.is-triangle-fill {
	-webkit-mask-image: url(../img/common/parts/triangle_fill.svg);
	mask-image: url(../img/common/parts/triangle_fill.svg);
}
.deco-item__shape.is-triangle-stroke {
	-webkit-mask-image: url(../img/common/parts/triangle_stroke.svg);
	mask-image: url(../img/common/parts/triangle_stroke.svg);
}
.deco-item__shape.is-color-gold {
	background-color: var(--color-gold);
}
.deco-item__shape.is-color-pink {
	background-color: var(--color-pink);
}
.is-reduced-motion .deco-bubble-layer {
	display: none;
}