/* ============================================================
   Floating Logo Parts
   .site-body 内でランダムに漂う背景デコレーション
   ============================================================ */

/* site-body を基準にするために relative を付与 */
.site-body {
	position: relative;
	overflow: hidden; /* はみ出た画像を隠す */
	background: #f6f6f7;
	min-height: 500px;
}

/* 共通スタイル */
.floating-logo {
	position: absolute;
	pointer-events: none; /* クリックを通過させる */
	z-index: 0;
	opacity: 0.08;
	will-change: transform, left, top;

	/* ランダム移動のなめらかトランジション */
	transition:
		left  6s  cubic-bezier(0.45, 0.05, 0.55, 0.95),
		top   14s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* 画像サイズ */
.floating-logo--1 {
	width: 320px;
	animation: float-spin-scale 28s linear infinite;
}

.floating-logo--2 {
	width: 260px;
	animation: float-spin-scale 20s linear infinite reverse;
	animation-delay: -9s; /* 位相をずらす */
}

/* 回転 ＋ 縮小を繰り返すアニメーション */
@keyframes float-spin-scale {
	0%   { transform: rotate(0deg)   scale(1.0); }
	25%  { transform: rotate(90deg)  scale(0.6); }
	50%  { transform: rotate(180deg) scale(1.0); }
	75%  { transform: rotate(270deg) scale(0.6); }
	100% { transform: rotate(360deg) scale(1.0); }
}


.home .floating-logo {
	display: none;
}