.art {
	background: url(../img/bg.jpg) repeat-y center 0 / 100% auto;
	main {
		padding-bottom: 0;
	}
	.text{
		h2 {
			margin-top: 3em;
			font-weight: 600;
		}
		p {
			margin-top: 2em;
		}
		.btn {
			margin-top: 10px;
			margin-left: 0;
		}
		.btn-in {
			gap: 0 10px;
			.icon {
				width: 18px;
				aspect-ratio: 1/1;
				mask: url(../../common/img/sns_in_black.svg) no-repeat 0 0 / 100% 100%;
				background-color: #585353;
			}
		}
		@media(width>1250px) {
			max-width: 500px;
			padding-bottom: 100px;
			h2 {
				padding-bottom: 10px;
			}
			.btn {
				width: 280px;
			}
		}
		@media (any-hover:hover) {
			.btn-in {
				.icon {
					transition: background .3s;
				}
				&:hover .icon {
					background-color: var(--color-pink);
				}
			}
		}
	}
	.block01 {
		@media(width>1250px) {
			display: flex;
			justify-content: space-between;
		}
	}
	.artBlock {
		height: min(calc(900/750*100cqw), 900px);
		margin-top: min(calc(100/750*100cqw), 100px);
		position: relative;
		img, .azuma {
			position: absolute;
			left: 50%;
		}
		.art1 {
			width: min(calc(199/750*100cqw), 199px);
			top: min(calc(32/750*100cqw), 32px);
			margin-left: max(-292px, calc(-292/750*100cqw));
		}
		.art2 {
			width: min(calc(252/750*100cqw), 252px);
			margin-left: min(calc(40/750*100cqw), 40px);
		}
		.art3 {
			width: min(calc(205/750*100cqw), 205px);
			top: min(calc(411/750*100cqw), 411px);
			margin-left: min(calc(128/750*100cqw), 128px);
		}
		.art4 {
			width: min(calc(182/750*100cqw), 182px);
			top: min(calc(544/750*100cqw), 544px);
			margin-left: max(-336px, calc(-336/750*100cqw));
		}
		.azuma {
			width: min(calc(335/750*100cqw), 335px);
			aspect-ratio: 338/453;
			background: url(../img/azumaruka.png) no-repeat 0 0 / 100% 100%;
			top: auto;
			bottom: max(-22px, calc(-22/750*100cqw));
			margin-left: max(-109px, calc(-109/750*100cqw));
			&::before {
				content: "";
				display: block;
				width: min(calc(280/750*100cqw), 280px);
				height: min(calc(146/750*100cqw), 146px);
				background: url(../img/sign.png) no-repeat 0 0 / min(calc(280/750*100cqw), 280px) auto;
				position: absolute;
				left: max(-180px, calc(-180/750*100cqw));
				top: max(-146px, calc(-146/750*100cqw));
			}
		}
		@media(width>1250px) {
			height: auto;
			min-height: 1013px;
			margin: 0;
			img, .azuma {
				left: auto;
				margin-left: 0 !important;
			}
			.art1 {
				top: 60px;
				right: 400px;
			}
			.art2 {
				width: 280px;
				right: 0;
			}
			.art3 {
				width: 285px;
				right: -51px;
				bottom: 283px;
				top: auto;
			}
			.art4 {
				width: 228px;
				bottom: 178px;
				right: 480px;
				top: auto;
			}
			.azuma {
				width: 378px;
				bottom: -52px;
				right: 140px;
				&::before {
					left: -147px;
					top: -155px;
				}
			}
		}
		@media(width>1300px) {
			.art4 {
				right: 538px;
			}
		}
	}
}


.art1 { animation: floatUpDown1 8s ease-in-out infinite;}
.art2 { animation: floatUpDown2 5s ease-in-out infinite;}
.art3 { animation: floatUpDown2 6s ease-in-out infinite;}
.art4 { animation: floatUpDown1 5s ease-in-out infinite;}
.art .azuma.anime {
	&::before {
		width: 0;
		opacity: 0;
		transition: opacity .5s .3s, width .5s .3s;
	}
	&.active::before {
		opacity: 1;
		width: min(calc(280/750*100cqw), 280px);
	}
}
@keyframes floatUpDown1 {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}
@keyframes floatUpDown2 {
	0%   { transform: translateY(-10px); }
	50%  { transform: translateY(0); }
	100% { transform: translateY(-10px); }
}