@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--PageTop_top: 50%;
		--PageTop_transform: translateY(-50%);
		--ScrollNav_display: none;
		--ScrollNavX_display: block;
		--Top1_Line_width: 48px;
		--Top1_Center_padding: 0 14%;
		--Top1_Figure_aspect-ratio: 2 / 1;
		--Top1_Figure_PC_display: none;
		--Top1_Figure_SP_display: flex;
		--Top1_height: calc( 100vh - 0px );
		--Top1_H2_font-size: calc( var(--Size_10) * 1.9 );
		--Top1_P_text-align: left;
		--Top1_P_font-size: var(--Size_10);
		--Top1_Top1PC_bottom: 0px;
		--Top1_Top1PC_display: none;
		--Top1_Top1SP_bottom: 90px;
		--Top1_Top1SP_display: flex;
		--Top2_padding: 0 var(--Size_12) 0 var(--Size_36);
		--Top2_padding2: 0 var(--Size_12) 0 var(--Size_36);
		--Top2_height: calc( 100vh - 0px );
		--Top2_Box_Figure_justify-content: center;
		--Top2_Inner2_Box_A_flex-basis: auto;
		--Top2_Inner2_Box_Figure_Img_width: 60%;
		--Top3_padding: 0 0 0 var(--Margin_S);
		--Top3_height: calc( 100vh - 0px );
		--Top3_H2_margin: 0 0 var(--Gap_M);
		--Top3_H2_size: 6.2vw;
		--Top3_Icon_width: 100%;
		--Top4_margin: 0 0 var(--Margin_M) var(--Margin_S);
	}
}

@media screen and (min-width:769px) and ( max-width:1160px) {
	:root {
		--Top2_display: flex;
		--Top2X_display: none;
		--PageTop_top: 50%;
		--PageTop_transform: translateY(-50%);
		--ScrollNav_display: block;
		--ScrollNavX_display: none;
		--Top1_Line_width: 84px;
		--Top1_Center_padding: 0 10%;
		--Top1_Figure_aspect-ratio: 449 / 109;
		--Top1_Figure_PC_display: flex;
		--Top1_Figure_SP_display: none;
		--Top1_height: calc( 100vh - 0px );
		--Top1_H2_font-size: var(--Size_38);
		--Top1_P_text-align: center;
		--Top1_P_font-size: var(--Size_14);
		--Top1_Top1PC_bottom: 0px;
		--Top1_Top1PC_display: flex;
		--Top1_Top1SP_bottom: 0px;
		--Top1_Top1SP_display: none;
		--Top2_padding: 0 var(--padding);
		--Top2_padding2: 0 var(--Margin_S);
		--Top2_height: calc( 100vh - 0px );
		--Top2_Box_Figure_justify-content: flex-start;
		--Top2_Inner2_Box_A_flex-basis: calc( var(--Size_10) * 14);
		--Top2_Inner2_Box_Figure_Img_width: 100%;
		--Top3_padding: var(--Margin_S);
		--Top3_height: calc( 100vh - 0px );
		--Top3_H2_margin: 0 0 var(--Gap_L);
		--Top3_H2_size: var(--Size_22);
		--Top3_Icon_width: 420px;
		--Top4_margin: 0 0 var(--Margin_M);
	}
}

@media screen and (min-width:1161px) {
	:root {
		--Top2_display: flex;
		--Top2X_display: none;
		--PageTop_top: 50%;
		--PageTop_transform: translateY(-50%);
		--ScrollNav_display: block;
		--ScrollNavX_display: none;
		--Top1_Line_width: 84px;
		--Top1_Center_padding: 0 10%;
		--Top1_Figure_aspect-ratio: 449 / 109;
		--Top1_Figure_PC_display: flex;
		--Top1_Figure_SP_display: none;
		--Top1_height: calc( 100vh - 0px );
		--Top1_H2_font-size: var(--Size_38);
		--Top1_P_text-align: center;
		--Top1_P_font-size: var(--Size_14);
		--Top1_Top1PC_bottom: 0px;
		--Top1_Top1PC_display: flex;
		--Top1_Top1SP_bottom: 0px;
		--Top1_Top1SP_display: none;
		--Top2_padding: 0 var(--padding);
		--Top2_padding2: 0 var(--padding);
		--Top2_height: calc( 100vh - 0px );
		--Top2_Box_Figure_justify-content: flex-start;
		--Top2_Inner2_Box_A_flex-basis: calc( var(--Size_10) * 14);
		--Top2_Inner2_Box_Figure_Img_width: 100%;
		--Top3_padding: 0;
		--Top3_height: calc( 100vh - 0px );
		--Top3_H2_margin: 0 0 var(--Gap_L);
		--Top3_H2_size: var(--Size_22);
		--Top3_Icon_width: 480px;
		--Top4_margin: 0 0 var(--Margin_M);
	}
}

body {
	min-height: 100vh;
}

header {
	position: absolute;
}

main article {
	margin: 0;
}

#factory {
	position: relative;
	padding: 0;
	height: 100vh;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	& > section {
		margin: 0;
		padding 70px 0 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		scroll-margin-top: 0px;
	}
	& #top01 {
		height: var(--Top1_height);
	}
	& #top02 {
		height: var(--Top2_height);
	}
	& #top03 {
		height: var(--Top3_height);
	}
	& #top04 {
		min-height: calc( 100vh - 0px );
		height: auto;
	}
	& .snap-section {
	}
	& .scroll-nav {
		position: fixed;
		top: 50%;
		left: var(--Gap_L);
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--Gap_L);
		width: var(--Size_09);
		height: calc( calc( var(--Size_09) * 4 ) + calc( var(--Gap_L) * 3 ) );
		z-index: 1000;
		& .scroll-link {
			display: block;
			width: var(--Size_06);
			height: var(--Size_06);
			aspect-ratio: 1 / 1;
			font-size: 0;
			border-radius: var(--Border-radius_L);
			box-sizing: content-box;
			background: var(--Color_R);
			transition: all 0.3s ease;
			& span {
				display: block;
				width: var(--Size_06);
				height: var(--Size_06);
			}
		}
		& .scroll-link.active {
			background: var(--Color_FF000);
			border: var(--Size_03) solid var(--Color_R);
		}
	}
}

.scroll-nav .top {
	display: block;
}

.scroll-nav .top2 {
	display: var(--ScrollNav_display) !important;
}

.scroll-animation-container {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	padding: 0 0 var(--Gap_L);
	width: 100%;
	& a {
		position: relative;
		width: 50px;
		height: 50px;
		text-decoration: none;
		color: inherit;
		& .circle {
			position: relative;
			width: 100%;
			height: 100%;
			border: 4px var(--Color_R100) solid;
			border-bottom-color: transparent;
			border-radius: 50%;
			box-sizing: border-box;
		}
		& .arrowI {
			position: absolute;
			top: 50%;
			left: calc( calc( 100% - -0.25px ) / 2 );
			width: 4px;
			height: 0;
			background-color: var(--Color_R100);
			transform: translateX(-50%);
			transform-origin: bottom;
			opacity: 0;
			animation: arrowPipe 5s infinite linear;
		}
		& .arrowV {
			position: absolute;
			top: 35%;
			left: calc( calc( 100% - var(--Size_10) ) / 2 );
			width: var(--Size_10);
			height: var(--Size_10);
			border-top: 4px var(--Color_R100) solid;
			border-right: 4px var(--Color_R100) solid;
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg);
			transform-origin: 50% 50%;
			opacity: 1;
			animation: arrowV 5s infinite linear;
		}
	}
}

#Top1SP.scroll-animation-container {
	bottom: var(--Top1_Top1SP_bottom);
	display: var(--Top1_Top1SP_display);
}

#Top1PC.scroll-animation-container {
	bottom: var(--Top1_Top1PC_bottom);
	display: var(--Top1_Top1PC_display);
}

@keyframes arrowPipe {
	0% {
		height: 0;
		transform: translate(-50%, -10px);
		opacity: 0;
	}
	10% {
		height: 0;
		transform: translate(-50%, -10px);
		opacity: 1;
	}
	40% {
		height: 48px;
		transform: translate(-50%, -10px);
		opacity: 1;
	}
	60% {
		height: 0px;
		transform: translate(-50%, 36px);
		opacity: 1;
	}
	80% {
		height: 0px;
		transform: translate(-50%, 20px);
		opacity: 1;
	}
	100% {
		height: 0;
		transform: translate(-100%, 20px);
		opacity: 0;
	}
}

@keyframes arrowV {
	0% {
		transform: translate(0%, 0px) rotate(135deg);
		opacity: 0;
	}
	20% {
		transform: translate(0%, 0px) rotate(135deg);
		opacity: 1;
	}
	40% {
		transform: translate(0%, 30px) rotate(135deg);
		opacity: 1;
	}
	60% {
		transform: translate(0%, 30px) rotate(135deg);
		opacity: 1;
	}
	80% {
		transform: translate(0%, 30px) rotate(135deg);
		opacity: 0;
	}
	100% {
		transform: translate(0%, 30px) rotate(135deg);
		opacity: 0;
	}
}

#top01 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding 70px 0 0;
	& .line {
		display: flex;
		width: 100%;
		& .slick-list {
			& .slick-track {
				display: flex;
				align-items: center;
				& .slick-slide {
					display: flex;
					align-items: center;
					height: auto;
					aspect-ratio: 30 / 43;
					width: var(--Top1_Line_width) !important;
					flex: 0 0 var(--Top1_Line_width);
					& img {
						width: 100%;
					}
				}
			}
		}
	}
	& .top {
		padding: 70px 0 0;
	}
	& .bottom {
	}
	& .center {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: var(--Top1_Center_padding);
		& .top1 {
			width: 100%;
			& a {
				display: flex;
				flex-direction: column;
				& figure {
					width: 100%;
					background: var(--Color_1D040);
					aspect-ratio: var(--Top1_Figure_aspect-ratio);
					& img {
						width: 100%;
					}
					& .pc {
						display: var(--Top1_Figure_PC_display);
					}
					& .sp {
						display: var(--Top1_Figure_SP_display);
					}
				}
				& h2 {
					margin: 0 0 var(--Margin_S);
					padding: var(--Margin_S) 0 0;
					color: var(--Color_1D100);
					font-size: var(--Top1_H2_font-size);
					font-weight: 700;
					font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "Noto Sans JP", serif;
				}
				& p {
					text-align: var(--Top1_P_text-align);
					color: var(--Color_1D100);
					font-size: var(--Top1_P_font-size);
				}
			}
			& a:hover {
				& h2 {
					color: var(--Color_R100);
				}
				& p {
					color: var(--Color_R100);
				}
			}
			& .slick-arrow {
				position: absolute;
				bottom: -6px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: var(--Size_24);
				height: var(--Size_24);
				background: var(--Color_FF100);
				appearance: none;
				-webkit-appearance: none;
				cursor: pointer;
				border: none;
				outline: none;
				z-index: 10;
				background: var(--Color_1D100);
				border-radius: var(--Border-radius_L);
				& i {
					font-size: var(--Size_16);
					color: var(--Color_FF100);
				}
			}
			& .slick-track {
				display: flex;
				align-items: stretch;
			}
			& .slick-initialized .slick-slide {
				display: flex;
				flex-direction: column;
				height: auto;
			}
			& .slick-arrow:hover {
				background: var(--Color_R100);
			}
			& .slick-disabled {
				background: var(--Color_1D020);
			}
			& .slick-prev {
				left: 0;
			}
			& .slick-next {
				right: 0;
			}
			.slick-dots {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: var(--Gap_M);
				margin: var(--Gap_L) 0 0;
				& li {
					& button {
						display: flex;
						justify-content: center;
						padding: var(--Size_04) 0;
						width: var(--Size_20);
						font-size: var(--Size_08);
						color: var(--Color_FF100);
						background: var(--Color_1D100);
						border-radius: var(--Border-radius_L);
						appearance: none;
						-webkit-appearance: none;
						cursor: pointer;
						border: none;
						outline: none;
					}
					& button:hover {
						color: var(--Color_FF100);
						background: var(--Color_R100);
					}
				}
			}
		}
	}
	& .scroll-animation-container {
		bottom: var(--Size_70);
	}
}

.top02 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--Color_FF);
	& #inner {
		padding: var(--Top2_padding);
	}
	& #inner2 {
		padding: var(--Top2_padding2);
		& .box {
			align-items: center;
			padding: 0;
			width: 100%;
			& > a {
				flex-basis: var(--Top2_Inner2_Box_A_flex-basis);
				& > figure {
					aspect-ratio: 96 / 47;
					overflow: visible;
					& img {
						width: var(--Top2_Inner2_Box_Figure_Img_width);
						scale: 1;
						transition: var(--Transition);
						-o-transition: var(--Transition);
						-moz-transition: var(--Transition);
						-webkit-transition: var(--Transition);
					}
				}		
				& p {
					padding: var(--Gap_S) 0 0;
					text-align: center;
					font-size: var(--Size_10);
					white-space: nowrap;
				}
			}
			& > a:hover {
				& figure {
					& img {	
						scale: 1.04;
						opacity: .7;
					}
				}
			}
			& div {
				& h2 {
					margin: 0;
					text-align: left;
					font-size: var(--Size_14);
					font-weight: 700;
				}
				& a {
					margin: var(--Gap_L) 0 0;
				}
			}
		}
		& .box:nth-of-type(2) {
			margin: var(--Size_12) 0;
			& > figure {
				flex-basis: var(--Top2_Inner2_Box_A_flex-basis);
				justify-content: var(--Top2_Box_Figure_justify-content);
			}
		}
	}
}

#top03 {
	display: flex;
	padding: 0 var(--padding);
	background: var(--Color_K);
	& > figure {
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		height: 100%;
		& img {
			height: 100%;
		}
	}
	& #inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		& > div {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: var(--Top3_padding);
			& h2 {
				margin: var(--Top3_H2_margin);
				text-align: left;
				font-size: var(--Top3_H2_size);
				color: var(--Color_FF);
				font-weight: 600;
			}
			& p {
				color: var(--Color_FF);
			}
			& > a {
				position: relative;
				display: inline-flex;
				align-items: center;
				margin: var(--Gap_L) 0 0;
				padding: 0 var(--Margin_S) var(--Gap_S) 0;
				font-size: var(--Size_12);
				color: var(--Color_FF);
				font-weight: 600;
				border-bottom: 3px var(--Color_FF) solid;
			}
			& > a:before {
				content: '';
				position: absolute;
				bottom: -2px;
				right: -2px;
				width: var(--Size_30);
				height: 3px;
				border-radius: var(--Border-radius_L);
				background-color: var(--Color_FF);
				transform: rotate(50deg);
				transform-origin: calc(100% - 2px) 50%;
			}
			& #icon {
				display: flex;
				gap: var(--Gap_M);
				padding: var(--Margin_S) 0 0;
				width: var(--Top3_Icon_width);
				& a {
					& figure {
						display: flex;
						justify-content: center;
						align-items: center;
						aspect-ratio: 284 / 231;
						background: var(--Color_1D000);
						& img {
							width: 100%;
							scale: 1;
							transition: var(--Transition);
							-o-transition: var(--Transition);
							-moz-transition: var(--Transition);
							-webkit-transition: var(--Transition);
						}
					}
				}
				& a:nth-of-type(2) {
					& figure {
						& img {
							filter: drop-shadow(0px 0px 4px var(--Color_FF060));
						}
					}
				}
				
				& a:hover {
					& figure {
						& img {	
							scale: 1.04;
							opacity: .7;
						}
					}
				}
			} 
		}
	}
	& > div:before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: var(--Size_48);
			height: 100%;
			background: linear-gradient( to left, var(--Color_1D000), var(--Color_1D100) );
	}
}

#top04 {
	display: flex;
	flex-direction: column;
	padding: 70px 0 0;
	& .wrap {
		flex: 1;
		padding: var(--Top4_margin);
		width: auto;
		& #news {
		}
	}
}