@charset "utf-8";

.l-footer--pagetop,
.l-footer {
	position: relative;
	z-index: 100;
}

:root {
	--ff_shippori: 'Shippori Mincho B1', serif;
	--ff_round: 'M PLUS Rounded 1c', sans-serif;
	--white: #fff;
	--black: #000;
	--blue: #005FCE;
	--blue_light: #00B2F0;
	--blue_dark: #21303C;
	--blue_grade_x: linear-gradient(to right, #005bd8 0%,#00b7fa 100%);
	--blue_grade_y: linear-gradient(to bottom, #005bd8 0%,#00b7fa 100%);
	--red: #D4000B;
	--orange: #FF7D1C;
	--gold: #90712B;
	--gray: #90989E;
	--gray_light: #F4F4F4;
	--gray_dark: #4B4B4B;
	--gray_line: #ccc;
	--header_h: 100px;
	--max_w: 1000px;
	--easing: cubic-bezier(.8,0,.4,1);
	--border_radius: 6px;
}

.u-show_tablet {
	display: none !important;
	
	@media screen and (max-width: 999px) {
		display: block !important;
	}
}

.u-hide_tablet {
	display: block !important;
	
	@media screen and (max-width: 999px) {
		display: none !important;
	}
}

.u-show_mobile {
	display: none !important;
	
	@media screen and (max-width: 767px) {
		display: block !important;
	}
}

.u-hide_mobile {
	display: block !important;
	
	@media screen and (max-width: 767px) {
		display: none !important;
	}
}

.u-inner {
	max-width: calc(var(--max_w) + (40px * 2));
	margin-inline: auto;
	padding-inline: 40px;
	
	@media screen and (max-width: 767px) {
		padding-inline: 20px;
	}
}

.u-button {
	text-align: center;
	
	&.-mini {
		
		a {
			height: 60px;
			border-radius: 15px;
			
			.u-button__inner {
				font-size: 20px;
				padding-right: 1.5em;
				border-radius: 15px;
				translate: 0 -8px;
				rotate: .05deg;
				
				@media screen and (max-width: 767px) {
					font-size: 16px;
					letter-spacing: 0;
				}
				
				&:hover {
					translate: 0 -11px;
				}
				
				&:after {
					width: 16px;
					margin-right: 20px;
					
					@media screen and (max-width: 767px) {
						margin-right: 15px;
					}
				}
				
				b {
					font-size: 20px;
					
					@media screen and (max-width: 767px) {
						font-size: 16px;
					}
				}
			}
		}
	}

	&.-cta {
		text-shadow: 0 6px 0 rgba(0,0,0,.25);
		width: 560px;
		margin: 60px auto 0;
		
		@media screen and (max-width: 767px) {
			width: 100%;
		}
		
		a {
			color: var(--white);
			
			@media screen and (max-width: 767px) {
				border-radius: 20px;
			}
			
			.u-button__inner {
				border: 0;
			
				@media screen and (max-width: 767px) {
					padding: .075em 0 0;
					border-radius: 20px;
				}
				
				&:after {
					background-image: url("../image/icon_arrow_white.svg");
				}
			}
			
			&[target='_blank'] {
				.u-button__inner {
					&:after {
						background-image: url("../image/icon_blank_white.svg");
					}
				}
			}
		}
	}
	
	a {
		color: #575757;
		width: 100%;
		height: 90px;
		display: block;
		background: #aaa;
		border-radius: 30px;
		position: relative;
		
		.u-button__inner {
			font-size: 34px;
			font-weight: 700;
			padding: 0 0 .2em;
			background: #F9F9F9;
			border: 1px solid #aaa;
			border-radius: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			translate: 0 -12px;
			position: absolute;
			inset: 0;
			
			@media screen and (max-width: 767px) {
				font-size: 6.2vw;
			}
			
			&:after {
				content: '';
				width: 22px;
				aspect-ratio: 1;
				margin: 0 20px 0 0;
				background: url("../image/icon_arrow_gray.svg") no-repeat center / contain;
				position: absolute;
				top: 50%;
				right: 0;
				translate: 0 -50%;
				
				@media screen and (max-width: 767px) {
					width: 14px;
				}
			}
		}
		
		&[target='_blank'] {
			.u-button__inner {
				&:after {
					background-image: url("../image/icon_blank_gray.svg");
				}
			}
		}
		
		&:hover {
			.u-button__inner {
				translate: 0 -16px;
				filter: brightness(110%);
				transition:
					translate .2s ease,
					filter .2s ease
				;
			}
		}
		
		&:active {
			.u-button__inner {
				translate: 0 0;
				transition: translate .1s ease;
			}
		}
		
		b {
			font-size: 40px;
			font-weight: 800;
			vertical-align: baseline;
			margin: 0 .075em;
			display: inline-block;
			
			@media screen and (max-width: 767px) {
				font-size: 8.5vw;
			}
		}
	}
}

.u-title__hi {
	text-align: center;
	margin: 60px 0 0;
}

.u-title__mid {
	color: var(--red);
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	margin: 60px 0 0;
	rotate: .05deg;
	
	@media screen and (max-width: 767px) {
		font-size: 24px;
	}
	
	& + * {
		margin-top: 40px;
		
		@media screen and (max-width: 767px) {
			margin-top: 20px;
		}
	}
}

.u-title__low {
	margin: 30px 0 0;
	rotate: .05deg;
	position: relative;
	
	& > * {
		font-style: normal;
		padding: 0 .35em 0 0;
		display: inline-block;
		background-color: var(--white);
		position: relative;
		z-index: 10;
	}
	
	&:after {
		content: '';
		width: 100%;
		height: 3px;
		display: block;
		background: rgba(0,0,0,.1);
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0-50%);
		z-index: 0;
	}
	
	& + * {
		margin-top: 5px;
	}
}

.u-text {
	line-height: 1.75;
	rotate: .05deg;
	
	& + & {
		margin-top: 20px;
	}
}

.u-list {
	
	li {
		line-height: 1.75;
		rotate: .05deg;
		margin: .25em 0 0;
		display: table;
		
		span {
			display: table-cell;
		}
	}
}

.u-anchor-section {
	margin-top: -128px;
	padding-top: 128px;
	
	@media screen and (max-width: 767px) {
		margin-top: -50px;
		padding-top: 50px;
	}
}

.p-local-page-logo {
	max-width: 260px;
	margin: 60px auto -30px;
	
	@media screen and (max-width: 767px) {
		max-width: 160px;
		margin: 40px auto -40px;
	}
}

.l-content {
	font-family: var(--ff_round);
	overflow: hidden;
}

.c-title-part {
	line-height: 1;
	height: 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: url("../image/title_01.webp") no-repeat center / auto 100%;
	
	@media screen and (max-width: 999px) {
		height: 7.4vw;
		
		@media screen and (max-width: 767px) {
			height: 17vw;
		}
	}
	
	.year {
		color: #FFE57D;
		font-size: 20px;
		font-style: normal;
		font-weight: 700;
		text-shadow: 0 2px 0 rgba(0,0,0,.75);
		padding: 10px 0 0;
		
		@media screen and (max-width: 999px) {
			font-size: 2vw;
			padding: 1% 0 0;
			
			@media screen and (max-width: 767px) {
				font-size: 3.73vw;
				padding: 3% 0 0;
			}
		}
	}
	
	.num {
		color: #D4000B;
		font-size: 22px;
		padding: 15px 0 0;
		font-weight: 700;
		
		@media screen and (max-width: 999px) {
			font-size: 2.2vw;
			
			@media screen and (max-width: 767px) {
				font-size: 4.26vw;
			}
		}
		
		b {
			font-size: 46px;
			font-weight: 700;
			display: inline-block;
			margin: 0 .05em;
			vertical-align: -.05em;
			
			@media screen and (max-width: 999px) {
				font-size: 4.6vw;
				
				@media screen and (max-width: 767px) {
					font-size: 9.6vw;
				}
			}
		}
	}
}


.c-event-period {
	margin-top: 40px;
	position: relative;
	
	@media screen and (max-width: 999px) {
		margin-top: 4%;
		
		@media screen and (max-width: 999px) {
			margin-top: 12%;
		}
	}
	
	.c-event-period__wrap {
		line-height: 1;
		padding: 15px 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--white);
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50% 0;
		
		@media screen and (max-width: 767px) {
			width: 100%;
			padding: 1.75em 0 1.65em;
			display: block;
		}
		
		&:after {
			content: '';
			width: 36px;
			height: 18px;
			background: var(--white);
			clip-path: polygon(100% 0, 0 0, 50% 100%);
			position: absolute;
			bottom: 0;
			left: 50%;
			translate: -50% calc(100% - 1px);
		}
	}
	
	.c-event-period__title {
		font-size: 15px;
		white-space: nowrap;
		background: var(--white);
		padding: .5em 1em .6em 1.25em;
		border: 1px solid var(--black);
		border-radius: 100vmax;
		
		@media screen and (max-width: 767px) {
			font-size: 3.2vw;
			padding: .5em 2em .6em 2.25em;
			position: absolute;
			top: 0;
			left: 50%;
			translate: -50% -50%;
		}
	}
	
	.c-event-period__body {
		font-size: 16px;
		font-weight: 700;
		white-space: nowrap;
		padding: 0 0 0 12px;
		
		@media screen and (max-width: 767px) {
			font-size: 3vw;
			text-align: center;
			white-space: nowrap;
			padding-left: 0;
		}
		
		& b {
			font-size: 22px;
			font-weight: 700;
		
			@media screen and (max-width: 767px) {
				font-size: 5vw;
			}
		}
	}
	
}

.c-info-borad {
	padding: 7px;
	background: var(--white);
	border-radius: 60px;
	position: relative;
	
	@media screen and (max-width: 767px) {
		border-radius: 40px;
	}
	
	&:after {
		content: '';
		width: 120px;
		height: 60px;
		background: var(--white);
		clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50% calc(-100% + 1px);
		
		@media screen and (max-width: 767px) {
			width: 56px;
			height: 26px;
		}
	}
	
	.c-info-borad__inner {
		padding: 0 50px;
		border: 2px dashed var(--black);
		border-radius: 50px;
		
		@media screen and (max-width: 767px) {
			padding: 0 20px;
			border-radius: 32px;
		}
	}
	
	.c-info-borad__title {
		text-align: center;
		margin: 60px 0 0;
		
		@media screen and (max-width: 767px) {
			margin-top: 10%;
		}
		
		& + * {
			margin-top: 40px;
		}

		.name {
			font-size: 38px;
			font-weight: 700;
			line-height: 1.25;
			vertical-align: -.3em;
			padding-inline: 1.25em;
			position: relative;
			display: inline-block;
			
			@media screen and (max-width: 999px) {
				font-size: 3.8vw;
				
				@media screen and (max-width: 767px) {
					font-size: 6.4vw;
				}
			}
			
			&:before,
			&:after {
				content: '';
				width: .2em;
				height: 1.25em;
				margin: 0 .5em;
				background-color: var(--black);
				display: inline-block;
				clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
				position: absolute;
				top: 50%;
				translate: 0 -50%;
			}
			
			&:before {
				rotate: -15deg;
				left: 0;
			}
			
			&:after {
				rotate: 15deg;
				right: 0;
			}
		}
	}
	
	.c-info-borad__howto {
		.c-info-borad__title {
			& + * {
				margin-top: 40px;
				
				@media screen and (max-width: 767px) {
					margin-top: 10px;
				}
			}
		}
		
		.c-info-borad__items {
			padding-block: 30px;
			display: flex;
			justify-content: center;
			border-radius: 40px;
			
			@media screen and (max-width: 767px) {
				padding-block: 0;
				flex-direction: column;
			}
		}

		.c-info-borad__item {
			text-align: center;
			display: flex;
			flex-direction: column;
			position: relative;
			
			@media screen and (max-width: 767px) {
				margin-top: 10px;
			}

			&:not(:first-of-type):after {
				content: '';
				width: 1px;
				height: 100%;
				background: rgba(0,0,0,.2);
				position: absolute;
				top: 50%;
				left: 0;
				translate: 0 -50%;
				
				@media screen and (max-width: 767px) {
					display: none;
				}
			}

			.title {
				color: var(--white);
				font-size: 16px;
				font-weight: 700;
				line-height: 1;
				width: 80px;
				height: 96px;
				margin: -50px auto 0;
				padding: 10px 0 0;
				display: inline-block;
				background-size: contain;
				rotate: 7deg;
				
				@media screen and (max-width: 767px) {
					font-size: 9px;
					width: 55px;
					margin: -6px 0 0;
					position: absolute;
					top: 0;
					left: 0;
				}

				b {
					font-size: 42px;
					font-weight: 700;
					margin: 10px 0 0;
					display: block;
					
					@media screen and (max-width: 767px) {
						font-size: 26px;
					}
				}
			}

			.read {
				color: #444;
				font-size: 18px;
				font-weight: 700;
				line-height: 1.75;
				margin: 15px 0 0;
				display: table-cell;
				vertical-align: middle;
				
				@media screen and (max-width: 767px) {
					font-size: 3.6vw;
					text-align: left;
					line-height: 1.5;
					padding-left: 68px;
				}
				
				b {
					color: #ff7d1c;
				}
			}

			.image {
				margin-top: 10px;
				margin-inline: auto;
			}
		}
	}
	
	.c-info-borad__present {
		position: relative;
		
		@media screen and (max-width: 767px) {
			padding-bottom: 20px;
		}
		
		&:after {
			content: '';
			width: calc(100% + (120px * 2));
			aspect-ratio: 800 / 139;
			margin: -40px 0 0;
			display: block;
			background: url("../image/bg_present_01.webp") no-repeat center / 100% 100%;
			position: absolute;
			top: 0;
			left: 50%;
			translate: -50% 0;
			z-index: 10;
			
			@media screen and (max-width: 767px) {
				width: 140%;
				margin-top: -20%;
				aspect-ratio: 1265 / 514;
				background-image: url("../image/bg_present_01_mobile.webp");
			}
		}
		
		.c-info-borad__title {
			& + * {
				margin-top: -20px;
			}
		}
		
		.c-info-borad__items {
			padding-block: 30px;
			display: flex;
			justify-content: center;
			gap: 0 40px;
			
			@media screen and (max-width: 767px) {
				flex-direction: column;
			}
		}
		
		.c-info-borad__item {
			width: calc(100% / 2);
			display: flex;
			flex-direction: column;
			position: relative;
			
			@media screen and (max-width: 767px) {
				width: 100%;
				margin-top: 20px;
			}
			
			&:after {
				content: '';
				width: 100%;
				height: 100%;
				margin: 0 -10px -10px 0;
				display: block;
				background: rgba(0,0,0,.15);
				position: absolute;
				right: 0;
				bottom: 0;
				rotate: .05deg;
			}
			
			.label {
				color: var(--white);
				font-size: 21px;
				width: 76px;
				aspect-ratio: 1;
				padding: 0 0 0 .25em;
				display: flex;
				justify-content: center;
				align-items: center;
				background: var(--black);
				border-radius: 100vmax;
				position: absolute;
				top: -10px;
				z-index: 20;
				
				@media screen and (max-width: 767px) {
					translate: -50% 0;
				}
				
				b {
					font-size: 36px;
					display: inline-block;
					translate: 0 -.065em;
				}
			}
			
			.bg {
				text-align: center;
				padding: 70px 0 80px;
				flex-grow: 1;
				background: #777;
				inset: 0;
				position: relative;
				z-index: 10;
				
				@media screen and (max-width: 767px) {
					padding: 80px 0 60px;
				}
			}
			
			&:nth-child(odd) {
				
				&:after {
					clip-path: polygon(0 0, 100% 8%, 94% 94%, 8% 100%)
				}
				
				.label {
					left: 30px;
					
					@media screen and (max-width: 767px) {
						left: 50%;
					}
				}
				
				.bg {
					clip-path: polygon(0 0, 100% 8%, 94% 94%, 8% 100%)
				}
			}
			
			&:nth-child(even) {
				
				&:after {
					clip-path: polygon(0 14%, 100% 0, 93% 100%, 8% 88%)
				}
				
				.label {
					right: 50px;
					
					@media screen and (max-width: 767px) {
						right: auto;
						left: 50%;
					}
				}
				
				.bg {
					clip-path: polygon(0 14%, 100% 0, 93% 100%, 8% 88%)
				}
			}
			
			.image {
				padding: 0 15%;
				
				@media screen and (max-width: 767px) {
					padding: 0 10%;
				}
				
				& + * {
					margin-top: 15px;
				}
			}
			
			.read {
				font-size: 16px;
				margin-inline: 40px;
				
				@media screen and (max-width: 767px) {
					font-size: 14px;
				}
				
				& + .logo {
					margin-top: 5px;
				}
			}
			
			.logo {
				margin: 15px auto 0;
				
				img {
					max-width: 110px;
					
					@media screen and (max-width: 767px) {
						max-width: 90px;
					}
				}
				
				span,
				b {
					color: #444;
					font-size: 20px;
					font-weight: 900;
					display: inline-block;
					translate: 0 .15em;
					rotate: .05deg;
					
					@media screen and (max-width: 767px) {
						font-size: 18px;
					}
				}
			}
			
			.title {
				font-size: 26px;
				font-weight: 900;
				line-height: 1.25;
				letter-spacing: -.075em;
				margin: 10px 0 0;
				
				@media screen and (max-width: 767px) {
					font-size: 22px;
					letter-spacing: 0;
				}
				
				& + * {
					margin: 10px 0 0;
				}
				
				small {
					font-size: 18px;
					letter-spacing: 0;
					margin: 0 .25em;
					display: inline-block;
					
					@media screen and (max-width: 767px) {
						font-size: 14px;
					}
				}
			}
			
		}
	}
}

/* main visual */
.p-mv {
	padding-bottom: 240px;
	position: relative;
	overflow: hidden;
	
	@media screen and (max-width: 999px) {
		padding-bottom: 24%;
		
		@media screen and (max-width: 767px) {
			padding-bottom: 30%;
		}
	}
	
	&:after {
		content: '';
		width: 100%;
		height: 400px;
		display: block;
		background: linear-gradient(to bottom, #ffccd3 0%, #fff 100%);
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		opacity: 0;
		transition: opacity 1s 1s ease;
		
		@media screen and (max-width: 999px) {
			height: auto;
			padding-top: 40%;
			
			@media screen and (max-width: 767px) {
				padding-top: 125%;
			}
		}
	}
	
	.p-mv__inner {
		height: 940px;
		
		@media screen and (max-width: 999px) {
			height: 94vw;
			
			@media screen and (max-width: 767px) {
				height: 122vw;
			}
		}
	}
	
	.p-mv__title {
		width: 460px;
		margin: 120px 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50% 0;
		z-index: 50;
		
		@media screen and (max-width: 999px) {
			width: 46%;
			margin: 12% 0 0;
			
			@media screen and (max-width: 767px) {
				width: 69%;
				margin: 21.6% 0 0;
			}
		}
		
		& .mark {
			width: 200px;
			display: inline-block;
			opacity: 0;
			translate: 0 20px;
			transition: all .6s .6s ease;
			
			@media screen and (max-width: 999px) {
				width: 43.5%;
				
				@media screen and (max-width: 767px) {
					width: 45%;
				}
			}
		}
		
		& .title {
			width: 100%;
			margin: 40px 0 0;
			display: inline-block;
			opacity: 0;
			translate: 0 20px;
			transition: all .6s .7s ease;
			
			@media screen and (max-width: 999px) {
				margin: 4% 0 0;
				
				@media screen and (max-width: 767px) {
					margin: 5.8% 0 0;
				}
			}
		}
	}
	
	.p-mv__pattern {
		width: 3920px;
		margin: -280px 0 0 -40px;
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50% 0;
		opacity: 0;
		filter: brightness(150%);
		scale: .95;
		transition: all 3s 3.2s ease;
		
		@media screen and (max-width: 999px) {
			width: 392%;
			margin: -28% 0 0 -4%;
			
			@media screen and (max-width: 767px) {
				width: 236%;
				margin: -19% 0 0 -3%;
			}
		}
		
		& img {
			transform-origin: 50% 25%;
			animation: a-mv_pattern 20s ease-in-out infinite;
			
			@media screen and (max-width: 767px) {
				transform-origin: 50% 20%;
			}
		}
	}
	
	.p-mv__images {
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 10;
		
		& .image {
			position: absolute;
			top: 0;
			left: 50%;
			translate: -50% -30px;
			opacity: 0;
			transition:
				opacity .6s 1.3s ease,
				translate 1s 1.3s ease
			;
			will-change: translate;
			
			span {
				display: block;
			}
			
			figure {
				display: block;
			}
			
			img {
				transition: 2s;
			}
			
			&.-package1 {
				width: 350px;
				margin: 450px 0 0 -10px;
				z-index: 60;
				
				@media screen and (max-width: 999px) {
					width: 35%;
					margin: 45% 0 0 -1%;
					
					@media screen and (max-width: 767px) {
						width: 36.5%;
						margin: 70% 0 0 -1%;
					}
				}
			}
			
			&.-package2 {
				width: 320px;
				margin: 360px 0 0 -420px;
				z-index: 50;
				
				@media screen and (max-width: 999px) {
					width: 32%;
					margin: 36% 0 0 -42%;
					
					@media screen and (max-width: 767px) {
						width: 33.3%;
						margin: 68% 0 0 -39%;
					}
				}
				
				span {
					animation: a-fluffy-y1 8s ease-in-out infinite;
				}

				figure {
					animation: a-fluffy-x1 6s ease-in-out infinite;
				}
			}
			
			&.-package3 {
				width: 280px;
				margin: 400px 0 0 390px;
				z-index: 40;
				
				@media screen and (max-width: 999px) {
					width: 28%;
					margin: 40% 0 0 39%;
					
					@media screen and (max-width: 767px) {
						width: 28%;
						margin: 67% 0 0 38%;
					}
				}
				
				span {
					animation: a-fluffy-y2 5s ease-in-out infinite;
				}

				figure {
					animation: a-fluffy-x2 4s ease-in-out infinite;
				}
			}
			
			&.-package4 {
				width: 220px;
				margin: 170px 0 0 430px;
				z-index: 30;
				
				@media screen and (max-width: 999px) {
					width: 22%;
					margin: 17% 0 0 43%;
					
					@media screen and (max-width: 767px) {
						width: 20%;
						margin: 20% 0 0 36%;
					}
				}
				
				span {
					animation: a-fluffy-y2 12s ease-in-out infinite;
				}

				figure {
					animation: a-fluffy-x2 10s ease-in-out infinite;
				}
			}
			
			&.-package5 {
				width: 240px;
				margin: -8px 0 0 -330px;
				z-index: 20;
				
				@media screen and (max-width: 999px) {
					width: 24%;
					margin: -.8% 0 0 -33%;
					
					@media screen and (max-width: 767px) {
						margin: 7% 0 0 -33%;
					}
				}
				
				span {
					animation: a-fluffy-y1 16s ease-in-out infinite;
				}

				figure {
					animation: a-fluffy-x1 12s ease-in-out infinite;
				}
			}
			
			&.-package6 {
				width: 170px;
				margin: -10px 0 0 270px;
				z-index: 10;
				
				@media screen and (max-width: 999px) {
					width: 17%;
					margin: -1% 0 0 27%;
					
					@media screen and (max-width: 999px) {
						width: 18%;
						margin: 2% 0 0 23%;
					}
				}
				
				span {
					animation: a-fluffy-y2 6s ease-in-out infinite;
				}

				figure {
					animation: a-fluffy-x2 20s ease-in-out infinite;
				}
			}
		}
	}
	
	.p-mv__greeting {
		font-family: var(--ff_shippori);
		text-align: center;
		position: relative;
		z-index: 50;
		
		& .title {
			font-size: 34px;
			font-weight: 600;
			letter-spacing: .15em;
			opacity: 0;
			translate: 0 10px;
			transition: all .6s 1s ease;
			
			@media screen and (max-width: 999px) {
				font-size: 3.4vw;
				
				@media screen and (max-width: 767px) {
					font-size: 6.9vw;
					letter-spacing: .05em;
				}
			}
			
			& + * {
				margin-top: 30px !important;
			}
			
			&.scroll_active {
				opacity: 1;
				translate: 0 0;
			}
		}
		
		& .read {
			margin: 1em 0 0;
			opacity: 0;
			translate: 0 10px;
			transition: all .6s 1.2s ease;
			
			&.scroll_active {
				opacity: 1;
				translate: 0 0;
			}
			
			& .line {
				font-size: 18px;
				font-weight: 500;
				line-height: 2.5;
				letter-spacing: .15em;
				padding: 0 .25em;
				display: inline-block;
				background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 98%, rgba(0,0,0,.5) 100%);
				background-repeat: repeat-y;
				background-size: 100% 2.5em;
				
				@media screen and (max-width: 999px) {
					font-size: 1.8vw;
					
					@media screen and (max-width: 767px) {
						font-size: 4.265vw;
						letter-spacing: .05em;
						background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 97.5%, rgba(0,0,0,.5) 100%);
					}
				}
			}
		}
	}
}

/* main visual anime */
.p-mv.is-load_active {

	&:after {
		opacity: 1;
	}
	
	.p-mv__title {
		
		& .mark {
			opacity: 1;
			translate: 0;
		}
		
		& .title {
			opacity: 1;
			translate: 0;
		}
	}
	
	.p-mv__pattern {
		opacity: 1;
		scale: 1;
		filter: brightness(100%);
	}
	
	.p-mv__images {
		
		& .image {
			opacity: 1;
			translate: -50% 0;
			
			&.-package1 { transition-delay: 2s; }
			&.-package2 { transition-delay: 2.1s; }
			&.-package3 { transition-delay: 2.2s; }
			&.-package4 { transition-delay: 2.3s; }
			&.-package5 { transition-delay: 2.5s; }
			&.-package6 { transition-delay: 2.7s; }
		}
	}
}

/* meeting */
.p-meeting {
	margin: -120px 0 0;
	padding: 120px 0 240px;
	clip-path: polygon(50% 0%, 100% 100px, 100% 100%, 0 100%, 0 100px);
	background: linear-gradient(150deg, #ffebc9 0%, #f6e2ff 24%, #f6e2ff 24%, #deffd6 50%,#deffd6 50%,#ffe6f8 75%,#ffe6f8 75%,#c1e4ff 100%);
	position: relative;
	z-index: 10;
	
	@media screen and (max-width: 999px) {
		margin: -12% 0 0;
		padding: 12% 0 24%;
		clip-path: polygon(50% 0%, 100% 2.5%, 100% 100%, 0 100%, 0 2.5%);
		
		@media screen and (max-width: 999px) {
			padding: 24% 0 24%;
			
			@media screen and (max-width: 767px) {
				padding-bottom: 45%;
				clip-path: polygon(50% 0%, 100% 1.25%, 100% 100%, 0 100%, 0 1.25%);
			}
		}
	}
	
	.u-inner {
		position: relative;
		z-index: 10;
	}
	
	.p-meeting__main {
		padding: 100px 0 0;
		position: relative;
		
		@media screen and (max-width: 767px) {
			padding: 25% 0 0;
			z-index: 10;
		}
	}
	
	.p-meeting__title {
		position: relative;
		
		.title {
			width: 620px;
			margin-inline: auto;
			
			@media screen and (max-width: 999px) {
				width: 62%;
				
				@media screen and (max-width: 767px) {
					width: calc(100% + (2.5% * 2));
					margin-inline: -2.5%;
				}
			}
		}
		
		.illust {
			position: absolute;
			z-index: 10;
			
			&:nth-of-type(1) {
				width: 180px;
				margin: -60px 0 0 -270px;
				top: 0;
				left: 50%;
				translate: -100% 0;
				
				@media screen and (max-width: 999px) {
					width: 18%;
					margin: -6% 0 0 -27%;
					
					@media screen and (max-width: 767px) {
						width: 34.9%;
						margin: -9% 0 0 39%;
					}
				}
				
				img {
					animation: a-meeting_illust1 3s ease-in-out infinite;
				}
			}
			
			&:nth-of-type(2) {
				width: 94px;
				margin: 30px -65px 0 0;
				top: 0;
				right: 50%;
				translate: 100% 0;
				
				@media screen and (max-width: 999px) {
					width: 9.4%;
					margin: 3% -6.5% 0 0;
					
					@media screen and (max-width: 767px) {
						width: 20%;
						margin: 47% 28% 0 0;
					}
				}
				
				img {
					animation: a-meeting_illust2 6s linear infinite;
				}
			}
		}
		
		.read {
			text-align: right;
			width: 550px;
			height: 166px;
			margin: 280px -370px 0 0;
			padding: 15px 0 0 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background: url("../image/meeting_05.svg") no-repeat left top / 100% auto;
			position: absolute;
			top: 0;
			right: 50%;
			
			@media screen and (max-width: 999px) {
				width: 55%;
				height: 15.2vw;
				margin: 28% -37% 0 0;
				padding: 1.5% 0 0 0;
				
				@media screen and (max-width: 767px) {
					width: 88.65%;
					height: 36.5vw;
					margin: 100% -40% 0 0;
					background-image: url("../image/meeting_05_mobile.svg");
				}
			}
			
			.text {
				color: var(--white);
				font-size: 36px;
				font-weight: 800;
				white-space: nowrap;
				text-shadow: 0 3px 0 rgba(0,0,0,.5);
				display: block;
				transform: skewX(-7deg) rotate(-7deg);
				
				@media screen and (max-width: 999px) {
					font-size: 3.2vw;
					
					@media screen and (max-width: 767px) {
						font-size: 6.6vw;
					}
				}
				
				&:nth-of-type(1) {
					padding-right: 4em;
					
					@media screen and (max-width: 767px) {
						padding-right: 1.5em;
					}
				}
				
				&:nth-of-type(2) {
					padding-right: 1.5em;
				}
			}
		}
	}
	
	.p-meeting__read {
		margin: 100px 0 0;
		padding: 0 0 0 40.5%;
		
		@media screen and (max-width: 999px) {
			margin: 10% 0 0;
			
			@media screen and (max-width: 767px) {
				margin-top: 42%;
				padding: 0 0 0 0;
			}
		}
		
		.text {
			color: #717171;
			font-size: 20px;
			font-weight: 700;
			margin: .5em 0 0;
			transform: skewX(-7deg) rotate(-7deg);
			
			@media screen and (max-width: 999px) {
				font-size: 2vw;
				
				@media screen and (max-width: 767px) {
					font-size: 4.6vw;
					text-align: center;
				}
			}
			
			.color1 {
				color: #B573E0;
			}
			
			.color2 {
				color: #E073C7;
			}
			
			.color3 {
				color: #4FAF33;
			}
		}
	}
	
	.p-meeting__image {
		position: relative;
		z-index: 10;
		
		.package {
			position: absolute;
			
			&.-num1 {
				width: 430px;
				margin: 20px 0 0 -580px;
				top: 0;
				left: 50%;
				animation: a-fluffy-y1 16s ease-in-out infinite;
				
				@media screen and (max-width: 999px) {
					width: 43%;
					margin: 2% 0 0 -58%;
					
					@media screen and (max-width: 767px) {
						width: 88%;
						margin: 82% 0 0 -8%;
						left: 0;
					}
				}
				
				img {
					animation: a-fluffy-x1 12s ease-in-out infinite;
				}
			}
			
			&.-num2 {
				width: 250px;
				margin: -20px -570px 0 0;
				top: 0;
				right: 50%;
				animation: a-fluffy-y2 8s ease-in-out infinite;
				
				@media screen and (max-width: 999px) {
					width: 25%;
					margin: -2% -57% 0 0;
					
					@media screen and (max-width: 767px) {
						width: 107%;
						margin: -45% 0 0 -8%;
						left: 0;
					}
				}
				
				img {
					animation: a-fluffy-x2 6s ease-in-out infinite;
				}
			}
			
			&.-num3 {
				width: 168px;
				margin: 44% -550px 0 0;
				top: 0;
				right: 50%;
				
				@media screen and (max-width: 999px) {
					width: 16.8%;
					margin: 44% -55% 0 0;
					
					@media screen and (max-width: 767px) {
						width: 27%;
						margin: 107% -52% 0 0;
					}
				}
			}
		}
		
		.spark {
			position: absolute;
			animation: a-spark .6s steps(1) infinite;
			
			&.-num1 {
				width: 110px;
				margin: -70px 0 0 90px;
				top: 0;
				left: 0;
				
				@media screen and (max-width: 767px) {
					width: 11%;
					margin: -13% 0 0 12%;
				}
			}
			
			&.-num2 {
				width: 72px;
				margin: 40px 90px 0 0;
				top: 0;
				right: 0;
				
				@media screen and (max-width: 767px) {
					width: 8%;
					margin: 27% 0 0 12%;
				}
			}
		}
		
		.star {
			position: absolute;
			
			&.-num1 {
				width: 62px;
				margin: 36.5% 0 0 17.5%;
				top: 0;
				left: 0;
			}
			
			&.-num2 {
				width: 52px;
				margin: 27.5% 13% 0 0;
				top: 0;
				right: 0;
			}
		}
		
		.comment {
			position: absolute;
			
			&.-num1 {
				width: 82px;
				margin: 8% 0 0 68%;
				top: 0;
				left: 0;
			}
			
			&.-num2 {
				width: 76px;
				margin: 41% -8% 0 0;
				top: 0;
				right: 0;
			}
			
			&.-num3 {
				width: 104px;
				margin: 57% 13% 0 0;
				top: 0;
				left: 0;
			}
		}
	}
	
	.c-event-period {
		.c-event-period__title {
			color: #8B67D4;
			border-color: #8B67D4;
		}
	}
	
	.c-info-borad {
		margin: 130px 0 0;
		
		@media screen and (max-width: 767px) {
			margin: 15% 0 0;
		}
		
		.c-info-borad__inner {
			padding-bottom: 60px;
			border-color: var(--orange);
			
			@media screen and (max-width: 767px) {
				padding-bottom: 30px;
			}
		}
		
		.c-info-borad__title {
			.name {
				color: var(--orange);
				
				&:before,
				&:after {
					background-color: var(--orange);
				}
			}
		}
		
		.c-info-borad__howto {
			.c-info-borad__items {
				justify-content: space-around;
				border: 3px solid #FFFF99;
				
				@media screen and (max-width: 767px) {
					border: 0;
				}
			}

			.c-info-borad__item {
				width: calc(100% / 2);
				
				@media screen and (max-width: 767px) {
					width: 100%;
				}

				.title {
					background-image: url("../image/title_03.svg");
				}

				.image {
					width: 160px;
					
					@media screen and (max-width: 999px) {
						width: 41%;
					}
				}
			}
		}
		
		.c-info-borad__present {
			.c-info-borad__item {
				.label {
					background-color: var(--orange);
				}
					
				.bg {
					background: #FFFF99;
				}
				
				.title {
					color: var(--orange);
				}
			}
		}
	}
	
	.u-button {
		&.-mini {
			max-width: 360px;
			margin-inline: auto;
			position: relative;
			z-index: 10;
		}
		
		&.-cta {
			
			a {
				background-color: #714CBB;
				
				.u-button__inner {
					background-color: #8B67D4;
				}
			}
		}
	}
	
	.p-meeting_bg {
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 0;
		overflow: hidden;
		
		.cloud {
			width: 460px;
			position: absolute;
			top: 0;
			animation: a-meeting_mokumoku 4s ease-in-out infinite;
			
			&:nth-of-type(1) {
				width: 688px;
				margin: 920px 0 0 -120px;
				left: 0;
			}
			
			&:nth-of-type(2) {
				width: 688px;
				margin: 920px -160px 0 0;
				right: 0;
			}
			
			&:nth-of-type(3) {
				margin: 1410px 0 0 40px;
				left: 0;
			}
			
			&:nth-of-type(4) {
				margin: 1730px 40px 0 0;
				right: 0;
			}
			
			&:nth-of-type(5) {
				width: 688px;
				margin: 2030px 0 0 -120px;
				left: 0;
			}
			
			&:nth-of-type(6) {
				width: 688px;
				margin: 2270px -160px 0 0;
				right: 0;
			}
		}
	}
}

/* election */
.p-election {
	margin: -120px 0 0;
	padding: 120px 0 0;
	background: var(--white);
	clip-path: polygon(50% 0%, 100% 100px, 100% 100%, 0 100%, 0 100px);
	position: relative;
	z-index: 10;
	overflow: hidden;
	transform: translateZ(0);
	
	@media screen and (max-width: 999px) {
		clip-path: polygon(50% 0%, 100% 2.5%, 100% 100%, 0 100%, 0 2.5%);
		
		@media screen and (max-width: 767px) {
			padding-top: 80px;
			padding-bottom: 40px;
			clip-path: polygon(50% 0%, 100% 1.25%, 100% 100%, 0 100%, 0 1.25%);
		}
	}
	
	&:after {
		content: '';
		width: 150%;
		aspect-ratio: 1;
		margin: -15% 0 0;
		display: block;
		background: url("../image/election_01.webp") no-repeat center / 100% 100%;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%,0) rotate(0deg);
		animation: a-election_bg 180s linear infinite;
	}
	
	.u-inner {
		position: relative;
		z-index: 10;
	}
	
	.c-event-period {
		.c-event-period__wrap {
			border: 1px solid rgba(0,0,0,.15);
			
			&:after {
				background: url("../image/election_00.webp") no-repeat top center / contain;
			}
		}
		
		.c-event-period__title {
			color: var(--red);
			border-color: var(--red);
		}
	}
	
	.p-election__main {
		padding: 100px 0 0;
	}
	
	.p-election__title {
		text-align: center;
		display: flex;
		flex-direction: column;
		
		.text {
			font-size: 22px;
			font-weight: 700;
			line-height: 1.5;
			display: block;
			
			@media screen and (max-width: 767px) {
				font-size: 4vw;
			}
		}
		
		.logo {
			width: 578px;
			margin-top: -1.5%;
			margin-inline: auto;
			display: block;
			
			@media screen and (max-width: 999px) {
				width: 57.8%;
				
				@media screen and (max-width: 767px) {
					width: calc(100% - (10px * 2));
					margin-top: 1.5%;
				}
			}
		}
	}
	
	.p-election__slide {
		width: 100%;
		margin: 30px 0 0;
		position: relative;
		overflow: hidden;
		z-index: 10;

		.slide-scroll {
			width: 100%;
			display: flex;
			width: fit-content;
			
			@media screen and (max-width: 999px) {
				width: max-content;
			}
			
			&.-front {
				margin: -50px 0 0;
				position: relative;
				z-index: 20;
				animation: a-election__slide1 120s linear infinite;
				
				@media screen and (max-width: 999px) {
					margin: -6% 0 0;
					
					@media screen and (max-width: 767px) {
						margin: -6% 0 0;
					}
				}
				
				img {
					width: 4943px;
					aspect-ratio: 4943 / 200;
					object-fit: contain;
					display: block;
					
					@media screen and (max-width: 999px) {
						flex-shrink: 0;
						
						@media screen and (max-width: 767px) {
							width: 2000px;
						}
					}
				}
			}

			&.-back {
				animation: a-election__slide2 180s linear infinite;
				
				@media screen and (max-width: 999px) {
				}
				
				img {
					width: calc(4943px * .65);
					object-fit: contain;
					display: block;
					
					@media screen and (max-width: 999px) {
						flex-shrink: 0;
						
						@media screen and (max-width: 767px) {
							width: 1320px;
						}
					}
				}
			}
		}
	}
	
	.read {
		color: #222;
		font-size: 20px;
		line-height: 1.5;
		font-weight: 500;
		text-align: center;
		margin: 30px 0 0;
		
		@media screen and (max-width: 999px) {
			font-size: 2vw;
			
			@media screen and (max-width: 767px) {
				font-size: 4.2vw;
				line-height: 1.75;
				letter-spacing: 0;
			}
		}
	}
	
	.c-info-borad {
		margin: 130px 0 0;
		background: #FFEAA5;
		
		@media screen and (max-width: 767px) {
			margin-top: 12.5%;
		}
		
		&:after {
			background: #FFEAA5;
		}
		
		.c-info-borad__inner {
			padding-bottom: 60px;
			border-color: var(--orange);
			
			@media screen and (max-width: 767px) {
				padding-bottom: 30px;
			}
		}
		
		.c-info-borad__title {
			.name {
				color: var(--red);
				
				&:before,
				&:after {
					background-color: var(--red);
				}
			}
		}
		
		.c-info-borad__howto {
			.c-info-borad__items {
				padding-bottom: 0;
				justify-content: space-around;
				background: var(--white);
				
				@media screen and (max-width: 767px) {
					margin-inline: -10px;
					padding: 20px;
					border-radius: 12px;
				}
			}

			.c-info-borad__item {
				width: calc(100% / 3);
				padding-inline: 1em;
				
				@media screen and (max-width: 767px) {
					width: 100%;
					padding-inline: 0;
				}

				.title {
					background-image: url("../image/title_02.svg");
				}
				
				.read {
					font-size: 16px;
					min-height: 125px;
					
					@media screen and (max-width: 999px) {
						font-size: 1.8vw;
						
						@media screen and (max-width: 767px) {
							font-size: 4.2vw;
							min-height: 0;
						}
					}
					
					b {
						color: #f6654d;
						display: inline;
					}
				}

				.image {
					width: 160px;
					
					@media screen and (max-width: 999px) {
						width: 50%;
						
						@media screen and (max-width: 767px) {
							width: 27.5%;
						}
					}
				}
				
				&:not(:first-of-type):after {
					top: calc(50% - 15px);
					height: calc(100% - 30px);
				}
				
				&:nth-child(2) .read {
					font-size: 18px;
					
					@media screen and (max-width: 999px) {
						font-size: 1.8vw;
						
						@media screen and (max-width: 767px) {
							font-size: 4.2vw;
							min-height: 0;
						}
					}
				}
				
				&:nth-child(3) .read {
					font-size: 22px;
					
					@media screen and (max-width: 999px) {
						font-size: 1.8vw;
						
						@media screen and (max-width: 767px) {
							font-size: 4.2vw;
							min-height: 0;
						}
					}
				}
			}
		}
		
		.c-info-borad__present {
			.c-info-borad__item {
				
				&:after {
					background: var(--black);
				}
				
				.label {
					background-color: var(--black);
				}
					
				.bg {
					background: var(--white);
				}
				
				.title {
					color: var(--red);
				}
			}
		}
		
		& + * {
			margin-top: 60px;
		}
	}
	
	.u-button {
		&.-mini {
			max-width: 360px;
			margin-inline: auto;
			position: relative;
			z-index: 10;
		}
		
		&.-cta {
			
			a {
				background-color: #AA000D;
				
				.u-button__inner {
					background-color: var(--red);
				}
			}
		}
	}
	
}

/* sns */
.p-sns {
	margin: 120px 0 0;
	padding: 30px 0 15px;
	
	@media screen and (max-width: 767px) {
		margin-top: 60px;
	}
	
	.u-inner {
		position: relative;
	}
	
	.p-sns__title {
		font-size: 22px;
		letter-spacing: .15em;
		text-align: center;
		
		@media screen and (max-width: 767px) {
			font-size: 16px;
		}
	}
	
	.p-sns__items {
		margin: 30px 0 0;
		display: flex;
		justify-content: center;
		gap: 40px;
		
		@media screen and (max-width: 767px) {
			gap: 20px;
		}
	}
	
	.p-sns__item {
		width: 60px;
		
		& > * {
			transition: .2s;
			display: block;
			
			&:hover {
				scale: 1.1;
			}
		}
	}
	
	.image {
		width: 100px;
		margin: -20px 0 0 180px;
		position: absolute;
		top: 0;
		left: 50%;
		animation: a-sns_image 10s steps(1) infinite;
		
		@media screen and (max-width: 767px) {
			width: 66px;
			margin: -30px 0 0 120px;
		}
	}
}

/*p-return-top*/
.p-return-top {
	margin: 60px 0 -125px;
	padding: 60px 0 100px;
	background: #f5f5f5;
	
	@media screen and (max-width: 767px) {
		margin-bottom: 0;
		padding-bottom: 60px;
	}
	
	.-mini {
		max-width: 460px;
		margin: 0 auto;
	}
}

/* c-product_cards__items */
.c-product_cards {
	
	.c-product_cards__items {
		margin: -60px 0 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		@media screen and (max-width: 767px) {
			margin-top: 0;
		}
	}
	
	.c-product_cards__item {
		width: calc(100% / 2 - 30px);
		margin: 100px 0 0;
		border: 1px solid var(--gray_line);
		background: var(--white);
		border-radius: 30px;
		overflow: hidden;
		transform: translateZ(0);
		
		@media screen and (max-width: 999px) {
			width: calc(100% / 2 - 15px);
			
			@media screen and (max-width: 767px) {
				width: calc(100% / 2 - 7px);
				margin-top: 30px;
				border-radius: 15px;
			}
		}
		
		&:before {
			content: '';
			width: 100%;
			height: 100%;
			inset: 0;
			display: block;
			position: absolute;
			z-index: 10;
		}
		
		&:after {
			font-size: 12px;
			font-weight: 700;
			text-align: center;
			width: 80px;
			margin: 30px 30px 0 0;
			padding: .25em 0;
			border-radius: 100vmax;
			position: absolute;
			top: 0;
			right: 0;
			rotate: .05deg;
			
			@media screen and (max-width: 767px) {
				font-size: 9px;
				width: 60px;
				margin: 10px 10px 0 0;
			}
		}
		
		&[data-state='now']:after {
			content: '販売中';
			color: #444;
			background-color: #ffecef;
		}
		
		&[data-state='end']:after {
			content: '販売終了';
			color: #777;
			background-color: #e3e3e3;
		}
	}
	
	.inner {
		min-height: 200px;
		padding: 30px 10px 30px 50%;
		position: relative;
		
		@media screen and (max-width: 767px) {
			padding: 15px 15px 10px;
		}
	}
	
	.title {
		font-size: 19px;
		font-weight: 700;
		line-height: 1.45;
		min-height: 5em;
		margin: 35px 0 0;
		transform: rotate(.05deg);
		
		@media screen and (max-width: 767px) {
			font-size: 14px;
			margin-top: 15px;
			min-height: 4.5em;
		}
	}
	
	.image {
		text-align: center;
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		
		@media screen and (max-width: 767px) {
			width: 100%;
			margin: 25px 0 0;
			position: relative;
		}
		
		img {
			max-width: 150px;
			
			@media screen and (max-width: 999px) {
				max-width: 69%;
		
				@media screen and (max-width: 767px) {
					max-width: 60%;
					min-width: 110px;
				}
			}
		}
	}
	
	.time {
		font-size: 16px;
		font-weight: 700;
		
		@media screen and (max-width: 767px) {
			font-size: 12px;
		}
		
		&:before {
			content: '発売日';
			color: #777;
			font-size: 10px;
			font-weight: 700;
			display: block;
			
			@media screen and (max-width: 767px) {
				font-size: 9px;
				vertical-align: .05em;
				margin-right: .5em;
				display: inline-block;
			}
		}
	}
	
	.catch {
		color: var(--white);
		font-weight: 700;
		text-align: center;
		width: calc(100% + (1px * 2));
		height: calc(100% + 1px);
		margin: 0 -1px -1px;
		padding: 15px;
		background-color: var(--gray);
		rotate: .05deg;
		
		@media screen and (max-width: 767px) {
			font-size: 12px;
			text-align: left;
			letter-spacing: 0;
			padding: 10px 12px 15px;
		}
	}
}

/* p-election_page */
.p-election_page {
	margin: 0 0 calc(-125px - 40px);
	padding-bottom: 125px;
	position: relative;
	z-index: 10;
	
	@media screen and (max-width: 767px) {
		margin-bottom: -60px;
		padding-bottom: 0;
	}
	
	.c-election_title {
		padding: 60px 0 0;
		
		.title {
			max-width: 460px;
			margin: 0 auto;
			
			& + * {
				margin-top: 30px;
			}
		}
		
		.read {
			font-size: 18px;
			font-weight: 700;
			text-align: center;
			rotate: .05deg;
			
			@media screen and (max-width: 767px) {
				font-size: 16px;
			}
		}
	}
	
	.c-election_cta {
		margin: 120px 0 0;
		
		@media screen and (max-width: 767px) {
			margin-top: 80px;
		}
		
		.u-button {

			&.-mini {
				max-width: 360px;
				margin: 0 auto;
			}

			&.-cta {

				a {
					background-color: #AA000D;

					.u-button__inner {
						background-color: var(--red);
					}
				}
			}
		}
	}
}

.c-election_bg {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;

	&:after {
		content: '';
		width: 150%;
		aspect-ratio: 1;
		margin: -15% 0 0;
		display: block;
		background: url(../image/election_01.webp) no-repeat center / 100% 100%;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0) rotate(0deg);
		animation: a-election_bg 180s linear infinite;
	}
}

/*p-terms_page*/
.p-terms_page {
	margin: 0 0 calc(-125px - 40px);
	padding-bottom: 125px;
	position: relative;
	z-index: 10;
	
	@media screen and (max-width: 767px) {
		margin-bottom: -60px;
		padding-bottom: 0;
	}
}

/*p-local_page*/
.p-local_page {
	
}