@charset "utf-8";
/* ブレイクポイント **********************/
@media only screen and (min-width:768px) {}
@media only screen and (min-width:1060px) {}
/***************************************/
/* main_img ****************************/
@keyframes arrow {
	0% { transform: translateY(0px); }
	45% { transform: translateY(0px); }
	65% { transform: translateY(10px); }
	80% { transform: translateY(10px); }
	100% { transform: translateY(0px); }
}
@keyframes layer1 {
	0% { opacity: 1; }
	5% { opacity: 0; }
	25% { opacity: 1; }
	45% { opacity: 0; }
	65% { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes layer2 {
	0% { opacity: 0; }
	5% { opacity: 1; }
	25% { opacity: 0; }
	45% { opacity: 1; }
	65% { opacity: 0; }
	100% { opacity: 0; }
}
#main_img {
	position: relative;
	h1 {
		position: relative;
		z-index: 3;
		transform: scale(0);
		transition: var(--duration) all;
		&.active {
			transform: scale(1);
		}
	}
	.back, .img, .character, .icon {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.img {
		width: 100%;
		height: 100%;
		mask: url(../img/fv/fv_01mask_sp.svg) center top/100% no-repeat;
		background: url(../img/fv/fv_02_sp.webp) center center/contain no-repeat;
		@media only screen and (min-width:768px) {
			mask-image: url(../img/fv/fv_01mask_pc.svg);
			background: url(../img/fv/fv_02_pc.webp) left top/contain no-repeat;
		}
	}
	.character {
		overflow: hidden;
		width: 100%;
		height: 100%;
		.layer {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
		.layer1 {
			animation: layer1 2.5s steps(1, end) infinite;
		}
		.layer2 {
			animation: layer2 2.5s steps(1, end) infinite;
		}
	}
	.name {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
	}
	.icon {
		z-index: 4;
		width: calc(105/375 * 100%);
		top: calc(85/722 * 100%);
		left: auto;
		right: 0;
		overflow: hidden;
		.layer {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			transition: var(--duration);
		}
		.layer2 {
			animation: arrow 1.5s infinite;
		}
		@media only screen and (min-width:768px) {
			width: calc(227/1350 * 100%);
			top: calc(52/800 * 100%);
			a:hover {
				.layer2 {
					transform: translateY(10px);
				}
			}
		}
	}
}
/***************************************/
/* statement ***************************/
#statement {
	margin-top: 40px;
	padding: 20px 0 40px 0;
	background-image: linear-gradient(#9bcb6c 30%, #8bbc5f);
	.block {
		margin: 0 auto 0 auto;
		width: var(--sp_width);
		max-width: var(--max_width);
		display: flex;
		flex-flow: wrap;
		row-gap: 20px;
		justify-content: center;
		position: relative;
		h2 {
			width: calc(140/337 * 100%);
		}
		.body {
			width: 100%;
			.character {
				aspect-ratio: 252.245765/419.118616;
				width: calc(174/337 * 100%);
				margin: calc(-50/337 * 100%) auto 0 auto;
				overflow: hidden;
				position: relative;
				.layer {
					position: absolute;
					width: 100%;
					top: 0;
					left: 0;
					&.layer1 {
						animation: layer1 2.5s steps(1, end) infinite;
					}
					&.layer2 {
						animation: layer2 2.5s steps(1, end) infinite;
					}
				}
			}
		}
	}
}
@media only screen and (min-width:768px) {
	#statement {
		margin-top: calc(40px + 60px);
		padding: 130px 0 110px 0;
		.block {
			h2 {
				width: 194px;
				position: absolute;
				top: calc(-130px - 60px);
				left: 0;
			}
			.body {
				width: calc(760/1200 * 100%);
				max-width: 760px;
				.character {
					width: calc(252/1200 * 100%);
					position: absolute;
					right: 0;
					bottom: 10%;
				}
			}
		}
	}
}
@media only screen and (min-width:1000px) {
	#statement {
		.block {
			.body {
				width: 100%;
			}
		}
	}
}
/***************************************/
/* public_relations ********************/
#public_relations {
	margin: 40px auto 0 auto;
	max-width: 1250px;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	row-gap: 40px;
	h2 {
		width: calc(135/375 * 100%);
		max-width: 326px;
	}
	ul {
		display: flex;
		flex-flow: wrap;
		justify-content: center;
		row-gap: 40px;
		padding: 40px 0 40px 0;
		background-image: linear-gradient(#9bcb6c 30%, #8bbc5f);
		>li {
			list-style: none;
			width: var(--sp_width);
		}
	}
}
@media only screen and (min-width:768px) {
	#public_relations{
		width: var(--sp_width);
		margin-top: 110px;
		row-gap: 60px;
		position: relative;
		&::before {
			content: "";
			display: block;
			aspect-ratio: 183.02993/272.050215;
			width: calc(182/1200 * 100%);
			background: url(../img/ilst02.svg) center center/contain no-repeat;
			position: absolute;
			top: 0;
			right: 20px;
		}
		ul {
			column-gap: calc(90/1250 * 100%);
			border-radius: 84px;
			padding: 110px 0 110px 0;
			row-gap: 80px;
			justify-content: flex-start;
			>li {
				display: flex;
				flex-flow: wrap;
				justify-content: flex-end;
				width: calc(500/1250 * 100%);
				width: calc((100% - (90/1250 * 100%))/2);
				&:nth-of-type(even) {
					justify-content: flex-start;
				}
				.play, .play_none {
					width: calc(500/580 * 100%);
				}
				&.full {
					width: 100%;
					justify-content: center;
					.play {
						width: calc(860/1250 * 100%);
					}
				}
			}
		}
	}
}
@media only screen and (min-width:1000px) {
	#public_relations{
		&::before {
			width: 182px;
		}
	}
}
/***************************************/
/* message *****************************/
#message {
	margin: 40px auto 0 auto;
	width: var(--sp_width);
	max-width: 1250px;
	background-color: #FFFFFF;
	border: 10px solid #F8F198;
	border-radius: 20px;
	padding: 30px 0 30px 0;
	display: flex;
	flex-flow: wrap;
	row-gap: 30px;
	justify-content: center;
	position: relative;
	&::before {
		content: "";
		display: block;
		aspect-ratio: 1/1;
		width: 85px;
		background: url(../img/imanisisan.svg) center center/contain no-repeat;
		position: absolute;
		right: 25px;
		top: calc(-10px - 10px);
	}
	>* {
		width: calc(260/(337 - 10*2) * 100%);
	}
	.introduction {
		font-size: 1.3rem;
		font-weight: var(--weight_r);
		line-height: 1.6;
	}
	.prof {
		display: flex;
		flex-flow: column;
		row-gap: 30px;
		.body {
			display: flex;
			flex-flow: column;
			row-gap: 20px;
			font-size: 1.4rem;
			font-weight: var(--weight_r);
			.name {
				font-size: 1.8rem;
				font-weight: var(--weight_m);
				text-box: trim-both cap alphabetic;
			}
			p {
				line-height: 1.8;
			}
		}
	}
}
@media only screen and (min-width:768px) {
	#message {
		border-width: 20px;
		border-radius: 84px;
		margin-top: 110px;
		padding: 50px 0 50px 0;
		row-gap: 50px;
		&::before {
			display: none;
		}
		>* {
			width: calc((1250 - 20*2 - 50*2)/(1250 - 20*2) * 100%);
		}
		.introduction {
			padding-left: calc(154px + 20px);
			font-size: 1.8rem;
			position: relative;
			&::before {
				content: "";
				display: block;
				aspect-ratio: 1/1;
				width: 154px;
				background: url(../img/imanisisan.svg) center center/contain no-repeat;
				position: absolute;
				left: 0;
				top: calc(50% - 154px/2);
				top: calc(-50px - 20px - 20px);
			}
		}
		.prof {
			flex-flow: wrap;
			justify-content: space-between;
			.body {
				width: 100%;
				row-gap: 20px;
				font-size: 1.6rem;
				.name {
					font-size: 2.6rem;
				}
				&:has(.play) {
				}
			}
			&:has(.play) .body {
				width: calc(490/(1250 - 20*2 - 50*2) * 100%);
			}
			.play {
				width: calc(546/(1250 - 20*2 - 50*2) * 100%);
			}
		}
	}
}
/***************************************/
/* donation ****************************/
#donation {
	width: var(--sp_width);
	max-width: var(--max_width);
	margin: 30px auto 0 auto;
	display: flex;
	flex-flow: column;
	row-gap: 30px;
	h2 {
		font-size: 1.4rem;
		font-weight: var(--weight_m);
		text-align: center;
	}
	ul {
		display: flex;
		flex-flow: wrap;
		justify-content: flex-start;
		align-items: stretch;
		column-gap: calc(3/337 * 100%);
		row-gap: 3px;
		>li {
			list-style: none;
			width: calc(167/337 * 100%);
		}
	}
}
@media only screen and (min-width:768px) {
	#donation {
		margin-top: 90px;
		row-gap: 60px;
		h2 {
			font-size: 1.8rem;
		}
		ul {
			column-gap: calc(5/1200 * 100%);
			row-gap: 5px;
			>li {
				width: calc(296/1200 * 100%);
			}
		}
	}
}
/***************************************/
/* footer ******************************/
footer {
	margin-top: 30px;
	padding: 30px 0 30px 0;
	background-color: #FFFFFF;
	.copyright {
		font-size: 1.6rem;
		font-weight: var(--weight_r);
		width: var(--sp_width);
		max-width: var(--max_width);
		margin: 0 auto 0 auto;
		display: flex;
		flex-flow: wrap;
		justify-content: center;
		align-items: center;
		column-gap: 20px;
		small {
			font-size: 1.2rem;
			a {
				text-decoration: none;
				color: #000000;
			}
		}
	}
}
@media only screen and (min-width:768px) {
	footer {
		margin-top: 60px;
		padding: 60px 0 60px 0;
		.copyright {
			font-size: 2.2rem;
			small {
				font-size: 1.6rem;
			}
		}
	}
}
/***************************************/
/* youtube *****************************/
.play_none {
	display: flex;
	flex-flow: column;
	row-gap: 20px;
}
.play {
	display: flex;
	flex-flow: column;
	row-gap: 20px;
	cursor: pointer;
	>p {
		text-align: center;
		font-size: 1.8rem;
		font-weight: var(--weight_m);
		line-height: 1.6;
	}
	>.img {
		position: relative;
		&::before {
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			background: url(../img/playbb.svg) center center/calc(128/500 * 100%) no-repeat;
			transition: var(--duration);
		}
	}
	&:hover {
		>.img {
			&::before {
				background: url(../img/playbb.svg) center center/calc(148/500 * 100%) no-repeat;
			}
		}
	}
	@media only screen and (min-width:768px) {
		row-gap: 15px;
	}
}
#movie {
	overflow: auto;
    overscroll-behavior: contain;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	display: none;
	flex-flow: wrap;
	justify-content: center;
	align-items: center;
	background-color: rgb(0, 0, 0, 0.7);
	.box {
		aspect-ratio: 16/9;
		width: calc(335/375 * 100%);
		max-width: 860px;
		position: relative;
		.close {
			cursor: pointer;
			aspect-ratio: 1/1;
			width: 26px;
			position: absolute;
			top: calc(0px - 26px - 10px);
			right: 0;
			background-color: #FFFFFF;
			clip-path: polygon(
				0 calc(50% - 1px), 
				calc(50% - 1px) calc(50% - 1px), 
				calc(50% - 1px) 0, 
				calc(50% + 1px) 0, 
				calc(50% + 1px) calc(50% - 1px), 
				100% calc(50% - 1px), 
				100% calc(50% + 1px), 
				calc(50% + 1px) calc(50% + 1px), 
				calc(50% + 1px) 100%, 
				calc(50% - 1px) 100%, 
				calc(50% - 1px) calc(50% + 1px), 
				0 calc(50% + 1px)
			);
			transform: rotate(45deg);
		}
	}
	&.active {
		display: flex;
	}
}
/***************************************/