#container {
	@media(width>1250px) {
		padding-top: 0;
	}
}

.scrT {
	position: relative;
	pointer-events: none;
	div {
		position: absolute;
		top: -70px;
	}
	@media(width>1250px) {
		div {
			top: -80px;
		}
	}
}

#homeMain {
/*-------------------------------*/
padding-bottom: 0;

.title-1 {
	max-width: var(--width-max);
	margin: 0 auto;
	padding: 0;
	.en {
		white-space: nowrap;
	}
}

.block {
	max-width: var(--width-max);
	margin: 0 auto;
}


section {
	padding: 0 clamp(20px, calc(40/750*100%), 60px);
}


.visual {
	height: calc(1030/750*100cqw);
	margin-bottom: calc(140/750*100cqw);
	background: var(--color-pink);
	position: relative;
	@media(width>768px) {
		height: 600px;
		margin-bottom: 120px;
	}
	@media(width>1250px) {
		height: 830px;
		margin-bottom: 210px;
		padding-top: 140px;
		box-sizing: border-box;
	}
}
.sine {
	padding: 0 calc(36/750*100cqw) 0 calc(43/750*100cqw);
	position: relative;
	z-index: 10;
	#text {
		mask: url(#mask);
	}
	.sineName {
		width: 100%;
		height: auto;
	}
	.sineName_text {
		fill: #fff;
	}
	.sineName_mask {
		fill: none;
		stroke: #fff;
		stroke-width: 8px;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-dasharray: 6000px;
		animation: handwriting 2s linear forwards;
	}
	.copy {
		position: absolute;
		bottom: calc(-13/750*100cqw);
		left: calc(304/750*100cqw);
		z-index: 10;
		img {
			display: block;
		}
	}
	.copy1 {
		width: calc(211/750*100cqw);
		aspect-ratio: 211/78;
		animation: slideUp .4s 2.3s ease-out forwards;
		opacity: 0;
	}
	.copy2 {
		width: calc(187/750*100cqw);
		aspect-ratio: 187/60;
		position: absolute;
		top: calc(47/750*100cqw);
		left: calc(105/750*100cqw);
		animation: slideUp .4s 2.5s ease-out forwards;
		opacity: 0;
	}
	.heart {
		width: calc(128/750*100cqw);
		aspect-ratio: 128/198;
		background: url(../img/visual_heart.png) no-repeat 0 0 / 100% auto; 
		display: block;
		position: absolute;
		top: calc(-50/750*100cqw);
		left: calc(197/750*100cqw);
		animation: slideUp .4s 3s ease-out forwards;
		opacity: 0;
	}
	@media(width>768px) {
		transform: scale(.6);
		transform-origin: 0 0;
	}
	@media(width>1250px) {
		width: 765px;
		transform: scale(1);
		padding: 0;
		position: absolute;
		left: 50%;
		top: 179px;
		margin-left: -646px;
		.copy {
			bottom: -37px;
			left: 287px;
		}
		.copy1 {
			width: 225px;
		}
		.copy2 {
			width: 200px;
			top: 50px;
			left: 103px;
		}
		.heart {
			width: 159px;
			top: -63px;
			left: 184px;
		}
	}
}
.slide {
	width: calc(670/750*100cqw);
	height: calc(670/750*100cqw);
	border-radius: 9999px 0 0 9999px;
	position: absolute;
	bottom: calc(-102/750*100cqw);
	right: 0;
	z-index: 5;
	overflow: hidden;
	div {
		position: absolute;
		top: 0;
		right: 0;
		opacity: 0;
		animation: slide 15s infinite;
	}
	img {
		height: calc(670/750*100cqw);
	}
	.slide-1 { animation-delay: 0s; }
	.slide-2 { animation-delay: 3s; }
	.slide-3 { animation-delay: 6s; }
	.slide-4 { animation-delay: 9s; }
	.slide-5 { animation-delay: 12s; }
	@media(width>768px) {
		width: 85%;
		height: 600px;
		bottom: -50px;
		img {
			width: 100%;
			height: 760px;
			object-fit: cover;
			object-position: center center;
		}
	}
	@media(width>1250px) {
		width: calc(50% + 240px);
		height: 760px;
		max-width: 1200px;
		bottom: -83px;
		left: 50%;
		right: auto;
		margin-left: -240px;
	}
}
.fly {
	width: calc(473/750*100cqw);
	aspect-ratio: 473/341;
	background: url(../img/visual_fly.png) no-repeat 0 0 / 100% auto; 
	display: block;
	position: absolute;
	bottom: calc(-4/750*100cqw);
	left: calc(209/750*100cqw);
	z-index: 10;
	animation: slideUp .5s 4s ease-out forwards;
	opacity: 0;
	@media(width>768px) {
		width: 498px;
		bottom: 30px;
		right: 50px;
		left: auto;
	}
	@media(width>1250px) {
		right: 50%;
		margin-right: -650px;
	}
}
.scrdw {
	line-height: 1;
	position: absolute;
	bottom: 0;
	left: 1em;
	opacity: 0;
	animation: slideDw .8s 4.5s ease-out forwards;
	.f-en {
		margin-bottom: 10px;
		font-size: 10px;
		writing-mode: vertical-rl;
		display: block;
		color: #fff;
	}
	.bar {
		width: 1px;
		height: 90px;
		margin: 0 auto;
		display: block;
		background: #fff;
		position: relative;
		&::before {
			content: "";
			display: block;
			width: 9px;
			height: 9px;
			border-radius: 50%;
			background: #fff;
			position: absolute;
			top: 0;
			left: -3.5px;
			opacity: 0;
			animation: scrbar 4.5s 5.2s ease-out infinite forwards;
		}
	}
	@media(width>1250px) {
		max-width: 1200px;
		left: 0;
		right: 0;
		margin: auto;
		.f-en {
			font-size: 11px;
		}
		.bar {
			margin: 0 0 0 5px;
			height: 120px;
		}
	}
}


.profile {
	padding-bottom: 50px;
	h2 {
		margin-top: 28px;
		font-size: 12px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		line-height: 1.2;
		.name-1 {
			width: 100%;
			margin-bottom: 5px;
		}
		.name-2 {
			margin-right: .55em;
			font-size: 24px;
		}
	}
	p, dl, .link-arrow {
		margin-top: 1.5em;
	}
	dt, dd {
		display: inline;
	}
	.block {
		display: flex;
		flex-wrap: wrap;
	}
	.text {
		width: 100%;
	}
	.photo {
		order: -1;
		width: 100%;
		margin-top: 29px;
		img {
			width: 100%;
			border-radius: min(calc(60/750*100cqw), 60px);
		}
	}
	@media(width>768px) {
		.block {
			justify-content: space-between;
		}
		.photo {
			width: min(49%, 460px);
			width: 46%;
		}
		.text {
			width: min(49%, 660px);
			width: 47%;
		}
	}
	@media(width>1000px) {
		padding-bottom: 164px;
		h2 {
			margin-top: 70px;
			font-size: 14px;
			padding-bottom: 5px;
			.name-2 {
				font-size: 32px;
			}
			.name-3 {
				padding-top: .5em;
			}
		}
		.block {
			align-items: center;
		}
		.photo {
			width: min(38.33%, 460px);
		}
		.text {
			width: min(55%, 660px);
		}
	}
	@media(width>1250px) {
		.photo {
			margin: 0;
		}
	}
}


.gallery {
	padding-bottom: 65px;
	.photoList {
		margin-top: 30px;
		display: flex;
		flex-wrap: wrap;
		gap: calc(40/750*100cqw);
		.photo, img {
			width: 100%;
		}
	}
	.row {
		display: flex;
		flex-wrap: wrap;
		gap: calc(40/750*100cqw);
	}
	.row1 {
		width: calc(315/750*100cqw);
	}
	.row2 {
		width: calc(315/750*100cqw);
		display: flex;
		flex-wrap: wrap;
	}
	.row3 {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.photo {
			width: calc(315/750*100cqw);
		}
	}
	.row4 {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.photo {
			width: calc(137/750*100cqw);
		}
		.photo8 {
			width: calc(315/750*100cqw);
		}
	}
	@media(width>900px) {
		padding-bottom: 130px;
		.photoList {
			margin: 52px clamp(-60px, calc(-40/750*100%), -20px) 0;
			justify-content: center;
			gap: calc(40/1920*100cqw);
		}
		.row {
			gap: calc(40/1920*100cqw);
		}
		.row1 {
			width: calc(400/1920*100cqw);
		}
		.row2 {
			width: calc(400/1920*100cqw);
		}
		.row3 {
			width: calc(400/1920*100cqw);
			.photo {
				width: 100%;
			}
		}
		.row4 {
			width: calc(400/1920*100cqw);
			.photo {
				width: calc(180/1920*100cqw);
			}
			.photo8 {
				width: 100%;
			}
		}
	}
}


.news {
	padding-bottom: 59px;
	.newslist {
		margin-top: 30px;
		border-top: 1px solid #e9e4e4;
		li {
			padding: 18px 0 24px;
			border-bottom: 1px solid #e9e4e4;
		}
		time {
			margin-bottom: 9px;
			display: block;
			color: #a7a7a7;
		}
		span {
			display: block;
		}
	}
	@media(width>768px) {
		padding-bottom: 120px;
		.block {
			display: flex;
		}
		.title-1 {
			width: 26.5%;
		}
		.newslist {
			width: calc(100% - 26.5%);
			margin: 12px  0 0;
			li {
				padding: 43px 0 44px;
				display: flex;
			}
			time {
				width: 127px;
				margin: 0;
			}
			span {
				width: calc(100% - 127px);
			}
		}
	}
}


.contact {
	padding-bottom: 130px;
	.title-1 {
		margin-bottom: 24px;
	}
	.btn {
		margin-top: 25px;
		margin-left: 0;
	}
	@media(width>1250px) {
		.title-1 {
			margin-bottom: 42px;
		}
	}
}


.art {
	padding-top: 42px;
	background: url(../img/art_bg.jpg) repeat-y center 0/ 100% auto;
	@media(width>1000px) {
		padding-top: 67px;
	}
	.block {
		@media(width>1000px) {
			display: flex;
			justify-content: space-between;
			
		}
	}
	.textBlock {
		max-width: 300px;
		h2 {
			margin-top: 34px;
			margin-bottom: -8px;
			font-weight: 600;
		}
		p {
			margin-top: 1.67em;
		}
		.link-arrow {
			margin-top: 1.45em;
		}
		@media(width>1000px) {
			h2 {
				margin-top: 50px;
				margin-bottom: -5px;
			}
			p {
				margin-top: 1.9em;
			}
			.link-arrow {
				margin-top: 1.8em;
			}
		}
	}
	.artBlock {
		height: min(calc(900/750*100cqw), 900px);
		margin-top: min(calc(10/750*100cqw), 10px);
		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/art_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(264/750*100cqw), 264px);
				height: min(calc(116/750*100cqw), 116px);
				background: url(../img/art_sign.png) no-repeat 0 0 / min(calc(264/750*100cqw), 264px) auto;
				position: absolute;
				left: max(-224px, calc(-224/750*100cqw));
				top: max(-100px, calc(-100/750*100cqw));
			}
		}
		@media(width>1000px) {
			width: calc(100% - 300px);
		}
		@media(width>1250px) {
			height: 724px;
			margin-top: -42px;
			img, .azuma {
				left: auto;
				margin-left: 0 !important;
			}
			.art1 {
				top: 0;
				right: 357px;
			}
			.art2 {
				width: 280px;
				right: 0;
				top: 63px;
			}
			.art3 {
				width: 285px;
				right: 573px;
				top: 404px;
			}
			.art4 {
				width: 182px;
				right: 642px;
				top: 26px;
			}
			.azuma {
				width: 317px;
				bottom: -27px;
				right: 215px;
				&::before {
					width: 236px;
					height: 104px;
					background-size: 236px auto;
					left: -238px;
					top: -64px;
				}
			}
		}
	}
}


/*animation*/
.anime {
	opacity: 0;
	&.active {
		animation: slideUp .3s ease-in-out forwards;
	}
}
.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;}
.artBlock .azuma.anime {
	&::before {
		width: 0;
		opacity: 0;
		transition: opacity .5s .3s, width .5s .3s;
	}
	&.active::before {
		opacity: 1;
		width: min(calc(264/750*100cqw), 264px);
		background-size: min(calc(264/750*100cqw), 264px);
		@media(width>1250px) {
			width: 236px;
			background-size: 236px auto;
		}
	}
}
.gallery.active {
	.photo {
		opacity: 0;
		transform: translateY(10px);
		animation: photo 1.2s ease-out .3s forwards;
		img {
			opacity: 1;
			transition: opacity 0.8s ease-out;
		}
	}
}
.photo1 { animation-delay: 0.1s; }
.photo2 { animation-delay: 0.2s; }
.photo3 { animation-delay: 0.3s; }
.photo4 { animation-delay: 0.4s; }
.photo5 { animation-delay: 0.5s; }
.photo6 { animation-delay: 0.6s; }
.photo7 { animation-delay: 0.7s; }
.photo8 { animation-delay: 0.8s; }
/*-------------------------------*/
}


@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); }
}
@keyframes handwriting {
	0% { stroke-dashoffset: 6000px;	}
	100% { stroke-dashoffset: 0; }
}
@keyframes slide {
	0% { opacity: 0; }
	10% { opacity: 1; }
	25% { opacity: 1; }
	35% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes slideUp {
	0% { opacity: 0; transform: translateY(min(calc(20/750*100cqw), 20px));}
	100% { opacity: 1; transform: translateY(0);}
}
@keyframes slideDw {
	0% { opacity: 0; transform: translateY(max(-20px, calc(-20/750*100cqw)));}
	100% { opacity: 1; transform: translateY(0);}
}
@keyframes scrbar {
	0% { opacity: 0; top: 0;}
	10% { opacity: 1; top: 0;}
	40% { opacity: 1; top: 100%;}
	70% { opacity: 1; top: 100%;}
	80% { opacity: 0; top: 100%;}
	100% { opacity: 0; top: 0;}
}
@keyframes photo {
	0% { opacity: 0; transform: translateY(10px); }
	100% { opacity: 1; transform: translateY(0); }
}