@charset "utf-8";
body.looped {
	overflow: hidden;
}

header {
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.4));
}

#loading {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}
	.loading__mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		transition: .6s;
	}
		.loading_mask__progress {
			width: 100%;
			height: auto;
			font-family: "din-2014", sans-serif;
			font-size: 20px;
			font-weight: 700;
			line-height: 1.5;
			letter-spacing: 0em;
			color: var(--color--black);
			text-align: center;
			position: absolute;
			top: calc((50% + 100px));
			left: 0;
			z-index: 2;
		}
	.loading__inner {
		width: 100%;
		height: 100%;
		position: relative;
	}
		.loading__taiyo__container {
			width: 100%;
			height: 100%;
			background-color: var(--color--white);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;

			--mask-size: 0%;

			mask-image: radial-gradient(circle at center, transparent var(--mask-size), black calc(var(--mask-size) + 0%));
			mask-mode: alpha;
			mask-repeat: no-repeat;
			mask-size: 100% 100%;
			mask-position: center;

			-webkit-mask-image: radial-gradient(circle at center, transparent var(--mask-size), black calc(var(--mask-size) + 0%));
			-webkit-mask-mode: alpha;
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: 100% 100%;
			-webkit-mask-position: center;
		}
			.loading__taiyo__image {
				width: 100px;
				height: 84px;
				position: absolute;
				top: calc(50% + 36px);
				left: 50%;
				transform: translate(-50%,-50%);
				z-index: 1;
			}
				.loading__taiyo {
					width: 100%;
					height: auto;
					aspect-ratio: 1 / 1;
					border-radius: 9999px;
					background-color: var(--color--red);
					position: absolute;
					top: 134px;
					left: 50%;
					transform: translate(-50%,-50%);
					z-index: 1;
					/* transition: transform 0.6s, width 1.2s; */
					transition: transform 0.6s, width 3.2s;
				}
				.loading__taiyo.loaded_step01 {
					transform: translate(-50%,calc(-50% - 120px));
				}
				.loading__taiyo.loaded_step02 {
					width: 200vmax;
				}
				.loading__taiyo__wave {
					width: calc(100% + 2px);
					height: auto;
					position: absolute;
					bottom: 0;
					left: -1px;
					z-index: 2;
				}
					.loading__taiyo__wave::after {
						content: '';
						display: block;
						width: 100%;
						height: 100px;
						background-color: var(--color--white);
						position: absolute;
						bottom: 0;
						left: 0;
						transform: translate(0%,100%);
					}
		.loading__copy__wrap {
			width: calc((600 / 1366) * 100%);
			min-width: 600px;
			height: auto;
			aspect-ratio: 600 / 268;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%) scale(1.4);
			z-index: 2;
			opacity: 0;
		}
		.loading__copy__wrap.loaded_step02 {
			animation: copyfadeIn .5s ease forwards;
		}
		@keyframes copyfadeIn {
			0% {
				transform: translate(-50%,-50%) scale(1.4);
				opacity: 0;
			}
			100% {
				transform: translate(-50%,-50%) scale(1);
				opacity: 1;
			}
		}
		.loading__copy {
			width: 100%;
			height: auto;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translate(0%,-50%);
			transition: .6s;
		}
		.loading__copy.loaded_step03 {
			top: 0;
			left: 0;
			transform: translate(0%,0%);
		}

#hero {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
}
	.hero__image_wrap {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
		.hero__image {
			width: 100%;
			height: 100vh;
			overflow: hidden;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
		}
			#hero__pattern {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: .2;
				z-index: 1;
			}
			.hero__image__frame {
				width: 100%;
				height: 125vh;
			}
				.hero__image__frame img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: top center;
					
				}
	.hero__inner {
		width: 100%;
		height: auto;
	}
		.hero__top {
			width: 100%;
			height: 100vh;
			position: relative;
			z-index: 2;
		}
			.hero__top__contents {
				width: calc((600 / 1366) * 100%);
				min-width: 600px;
				height: auto;
				aspect-ratio: 600 / 268;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				opacity: 0;
			}
				.hero__copy {
					width: 100%;
					height: auto;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translate(0%,-50%);
					transition: .6s;
				}
				.hero__copy.loaded_step03 {
					top: 0;
					left: 0;
					transform: translate(0%,0%);
				}
				.hero__txt_wrap {
					display: block;
					width: 100%;
					height: auto;
					position: absolute;
					bottom: 0;
					left: 0;
					opacity: 0;
					transition: .8s;
				}
					.hero__txt {
						display: block;
						width: 100%;
						height: auto;
					}
					.hero__txt:not(:first-of-type) {
						margin: calc((7 / 600) * 100%) auto 0;
					}
			.hero__top__scroll {
				width: auto;
				height: auto;
				padding-bottom: 36px;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%,0%);
				z-index: 1;
			}
				.hero__top__scroll__txt {
					font-size: 16px;
					font-weight: 700;
					line-height: calc(20 / 16);
					letter-spacing: 0.01em;
					text-align: center;
					color: var(--color--white);
				}
				.hero__top__scroll__bar {
					width: 1px;
					height: 30px;
					overflow: hidden;
					position: absolute;
					bottom: 0;
					left: 50%;
				}
					.hero__top__scroll__bar::before {
						content: '';
						display: block;
						width: 3px;
						height: 60px;
						background-color: var(--color--white);
						position: absolute;
						top: 0;
						left: -1px;
						animation: scr_ani 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
					}
					@keyframes scr_ani {
						0% {
							top: -70px;
						}
						100% {
							top: 70px;
						}
					}
		.hero__bottom {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100vh;
			overflow: hidden;
			position: relative;
			z-index: 2;
		}
			.hero__bottom__inner {
				width: 80%;
				max-width: 490px;
				height: auto;
				margin: 0 auto;
				position: relative;
			}
				.hero__bottom__image_wrap {
					height: auto;
					position: absolute;
				}
				.hero__bottom__image_wrap._01 {
					width: 288px;
					aspect-ratio: 288 / 268.24;
					top: 50px;
					right: calc((560 / 490) * 100%);
				}
				.hero__bottom__image_wrap._02 {
					width: 287.8px;
					aspect-ratio: 287.8 / 269.09;
					bottom: -56px;
					left: calc((520 / 490) * 100%);
				}
			@media all and (max-width: 920px){
				.hero__bottom__image_wrap._01 {
					right: 100%;
				}
				.hero__bottom__image_wrap._02 {
					left: 100%;
				}
			}
					.hero__bottom__image {
						height: auto;
						position: absolute;
						transform: scale(1.04);
						opacity: 0;
						transition: 1.2s;
						transform: scale(0.9);
					}
					.run .hero__bottom__image {
						opacity: 1;
						transform: scale(1);
					}
					.hero__bottom__image._01 {
						width: calc((266 / 288) * 100%);
						top: 0;
						left: 0;
						z-index: 1;
					}
					.hero__bottom__image._02 {
						width: calc((88.64 / 288) * 100%);
						bottom: 0;
						right: 0;
						z-index: 2;
						transition-delay: .2s;
					}
					.hero__bottom__image._03 {
						width: calc((177.05 / 287.8) * 100%);
						top: 0;
						right: 0;
						z-index: 1;
						transition-delay: .4s;
					}
					.hero__bottom__image._04 {
						width: calc((177.05 / 287.8) * 100%);
						bottom: 0;
						left: 0;
						z-index: 2;
						transition-delay: .5s;
					}
				.hero__bottom__contents {
					width: 100%;
					height: auto;
					margin: 0 auto;
				}
					.hero__bottom__txt_wrap {
						width: 100%;
						height: auto;
						margin: 0 auto 55px;
					}
						.hero__bottom__txt {
							width: 100%;
							height: auto;
							font-size: 20px;
							font-weight: 400;
							line-height: 1.9;
							letter-spacing: 0.005em;
							color: var(--color--white);
							opacity: 0;
							transition: 1.2s;
							transform: translate(0%,20px);
						}
						.hero__bottom__txt:not(:last-of-type) {
							margin-bottom: 24px;
						}
						.run.hero__bottom__txt {
							opacity: 1;
							transform: translate(0%,0px);
						}
					.hero__btn_wrap {
						width: 170px;
						height: 42px;
						margin: 0 auto 0 0;
						opacity: 0;
						transition: 1.2s;
						transition-delay: .8s;
					}
					.run.hero__btn_wrap {
						opacity: 1;
					}

#brand {
	width: 100%;
	height: auto;
	padding: 0 0 120px;
	background-color: var(--color--bg_gray);
	position: relative;
	z-index: 2;
}
	.brand__inner {
		width: 100%;
		height: auto;
		margin: 0 auto;
		position: relative;
	}
		.brand__video_wrap {
			width: 100%;
			height: 495px;
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
	@media all and (max-width: 1100px){
		.brand__video_wrap {
			height: calc((495 / 1100) * 100vw);
		}
	}
			.brand__video {
				width: calc(100vw + 2px);
				height: 495px;
				clip-path: polygon(0 0, 100% 0, 100% 100%, 0 65.2525%);
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%,0%);
				z-index: 1;
			}
		@media all and (max-width: 1100px){
			.brand__video {
				width: calc(100vw + 2px);
				height: calc((495 / 1100) * 100vw);
			}
		}
				.brand__video video {
					width: calc((1674 / 1366) * 100%);
					height: auto;
					position: absolute;
					top: 55%;
					right: 0;
					z-index: 1;
					transform: translate(0%,-50%);
				}
		.brand__contents {
			width: 100%;
			height: auto;
			position: relative;
			z-index: 2;
		}
			.brand__contents__inner {
				width: 90%;
				max-width: 1000px;
				height: auto;
				margin: 0 auto;
			}
				.brand__contents__product_image_wrap {
					width: 100%;
					height: auto;
					aspect-ratio: 1000 / 592.5;
					position: relative;
					z-index: 3;
				}
					.brand__contents__product_image {
						width: calc((980 / 1000) * 100%);
						height: auto;
						position: absolute;
						top: calc((205.5 / 592.5) * -100%);
						right: calc((74.7 / 1000) * -100%);
						z-index: 2;
						pointer-events: none;
						opacity: 0;
						transition: opacity .8s;
					}
					.run .brand__contents__product_image {
						opacity: 1;
					}
						.brand__contents__product_image img {
							transform: rotate(-9deg);
						}
				.brand__contents__product_details {
					width: 100%;
					height: auto;
					position: relative;
					z-index: 4;
				}
					.brand__contents__product_details__heading {
						width: 100%;
						height: auto;
						margin: 0 auto 16px;
						color: var(--color--black);
						opacity: 0;
						transition: 1.2s;
						transition-delay: .1s;
						transform: translate(0%,20px);
					}
					.run .brand__contents__product_details__heading {
						opacity: 1;
						transform: translate(0%,0px);
					}
					.brand__contents__product_details__name {
						width: 100%;
						height: auto;
						margin: 0 auto 16px;
						font-size: 44px;
						font-weight: 700;
						line-height: calc(64 / 44);
						letter-spacing: 0.01em;
						color: var(--color--black);
						opacity: 0;
						transition: 1s;
						transition-delay: .2s;
						transform: translate(0%,20px);
					}
					.run .brand__contents__product_details__name {
						opacity: 1;
						transform: translate(0%,0px);
					}
						.brand__contents__product_details__name br {
							display: none;
						}
					.brand__contents__product_details__txt {
						width: 100%;
						height: auto;
						margin: 0 auto 28px;
						font-size: 20px;
						font-weight: 500;
						line-height: calc(32/ 20);
						letter-spacing: 0.005em;
						color: var(--color--black);
						opacity: 0;
						transition: 1s;
						transition-delay: .3s;
						transform: translate(0%,20px);
					}
					.run .brand__contents__product_details__txt {
						opacity: 1;
						transform: translate(0%,0px);
					}
					.brand__contents__product_details__btn_wrap {
						width: 170px;
						height: 42px;
						margin: 0 auto 0 0;
						opacity: 0;
						transition: 1s;
						transition-delay: .4s;
						transform: translate(0%,20px);
					}
					.run .brand__contents__product_details__btn_wrap {
						opacity: 1;
						transform: translate(0%,0px);
					}
					.brand__contents__product_details__bg_txt {
						width: auto;
						height: auto;
						font-size: 174px;
						font-weight: 600;
						line-height: calc(130 / 174);
						letter-spacing: 0em;
						color: var(--color--black);
						opacity: .05;
						position: absolute;
						top: -190px;
						left: 40px;
						z-index: -1;
					}
						.brand__contents__product_details__bg_txt p {
							width: auto;
							height: auto;
							overflow: hidden;
						}
							.brand__contents__product_details__bg_txt p span {
								display: block;
								opacity: 0;
								transform: translate(0%,120%);
								transition: 1s;
							}
							.run .brand__contents__product_details__bg_txt p span {
								opacity: 1;
								transform: translate(0%,0%);
							}
				@media all and (max-width: 1100px){
					.brand__contents__product_details__bg_txt {
						font-size: calc((174 / 1100) * 100vw);
						line-height: calc(130 / 174);
						top: calc((190 / 1100) * -100vw);
						left: calc((40 / 1100) * 100vw);
					}
				}

#news {
	width: 100%;
	height: auto;
	padding: 0 0 120px;
	background-color: var(--color--bg_gray);
	position: relative;
	z-index: 2;
}
	.news__inner {
		width: 80%;
		max-width:817px;
		height: auto;
		margin: 0 auto;
	}
		#news .section_heading {
			width: 100%;
			height: auto;
			margin: 0 auto 40px;
			text-align: center;
		}
		.news__swiper__wrap {
			width: 100%;
			height: auto;
			margin: 0 auto 40px;
		}
			.news__swiper {
				width: 100%;
				height: auto;
				padding: 0 0 30px;
			}
				.news__swiper .swiper-slide {
					padding: 10px;
				}
				.news__swiper__slide {
					width: 100%;
					height: auto;
					border-radius: 18px;
					background-color: var(--color--white);
					position: relative;
					opacity: 0;
					transition: .8s;
					transform: translate(0%,20px);
				}
				.swiper-slide:nth-of-type(2) .news__swiper__slide {
					transition-delay: .1s;
				}
				.swiper-slide:nth-of-type(3) .news__swiper__slide {
					transition-delay: .2s;
				}
				.run .news__swiper__slide {
					opacity: 1;
					transform: translate(0%,0px);
				}
					.news__swiper__slide__link {
						width: 100%;
						height: 100%;
						border-radius: 18px;
						box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0);
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
					}
				@media (any-hover: hover) {
					.news__swiper__slide__link {
						transition: .3s;
					}
					.news__swiper__slide__link:hover {
						box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
					}
				}
					.news__swiper__slide__image {
						width: 100%;
						height: auto;
						border-radius: 18px 18px 0 0;
						overflow: hidden;
						aspect-ratio: 235 / 157;
						overflow: hidden;
					}
						.news__swiper__slide__image img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							object-position: center;
						}
					.news__swiper__slide__contents {
						width: 100%;
						height: auto;
						padding: 16px 20px;
						border-radius: 0 0 18px 18px;
						overflow: hidden;
					}
						.news__swiper__slide__date {
							width: 100%;
							height: auto;
							margin: 0 auto 5px;
							font-family: "din-2014", sans-serif;
							font-size: 12px;
							font-weight: 400;
							line-height: calc(15 / 12);
							letter-spacing: 0.02em;
							color: var(--color--black);
						}
						.news__swiper__slide__ttl {
							width: 100%;
							height: auto;
							margin: 0 auto 5px;
							font-size: 14px;
							font-weight: 400;
							line-height: calc(23 / 14);
							letter-spacing: 0.005em;
							color: var(--color--black);
						}
						.news__swiper__slide__cat {
							display: flex;
							justify-content: flex-end;
							align-items: flex-start;
							flex-wrap: wrap;
							row-gap: 3px;
							column-gap: 5px;
							width: 100%;
							height: auto;
							font-family: "Inter", sans-serif;
							font-size: 12px;
							font-weight: 300;
							line-height: calc(15 / 12);
							letter-spacing: 0em;
						}
							.news__swiper__slide__cat__item {
								width: auto;
								height: auto;
							}
								.news__swiper__slide__cat__item a {
									display: block;
									border-radius: 9999px;
									background-color: #F4F4F4;
									padding: 2px 6px 3px 8px;
									color: var(--color--black);
									position: relative;
									z-index: 2;
								}
							@media (any-hover: hover) {
								.news__swiper__slide__cat__item a {
									transition: .3s;
								}
								.news__swiper__slide__cat__item a:hover {
									background-color: var(--color--black);
									color: #F4F4F4;
								}
							}
				.news_swiper_pagination {
					display: flex;
					justify-content: center;
					align-items: center;
					column-gap: 8px;
					background-color: #EBEBEB;
					width: 100%;
					height: auto;
					top: initial !important;
					bottom: 10px !important;
					opacity: 0;
					transition: .8s;
					transform: translate(0%,20px);
				}
				.run .news_swiper_pagination {
					opacity: 1;
					transform: translate(0%,0px);
				}
					.news_swiper_pagination .swiper-pagination-bullet {
						display: block;
						width: 8px !important;
						height: 8px !important;
						margin: 0 !important;
						background: #EBEBEB !important;
						opacity: 1 !important;
						mix-blend-mode: multiply;
					}
					.news_swiper_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
						background: var(--color--red) !important;
						mix-blend-mode: initial;
					}
				.news_swiper_prev,
				.news_swiper_next {
					width: 28px;
					height: 28px;
					border-radius: 9999px;
					background-color: var(--color--dark_gray) !important;
					opacity: 1;
					top: initial !important;
					left: initial !important;
					bottom: 0 !important;
					opacity: 0;
					transition: .8s;
					transform: translate(0%,20px);
				}
				.run .news_swiper_prev,
				.run .news_swiper_next {
					opacity: 1;
					transform: translate(0%,0px);
				}
				.run .news_swiper_prev.swiper-button-disabled,
				.run .news_swiper_next.swiper-button-disabled {
					opacity: .35;
				}
				.news_swiper_prev {
					right: 46px !important;
				}
				.news_swiper_next {
					right: 10px !important;
				}
					.news_swiper_prev::before,
					.news_swiper_next::before {
						content: '';
						display: block;
						width: 6px;
						height: 6px;
						position: absolute;
						top: 50%;
					}
					.news_swiper_prev::before {
						border-top: solid 2px var(--color--black);
						border-left: solid 2px var(--color--black);
						transform: translate(-50%,-50%) rotate(-45deg);
						left: 55%;
					}
					.news_swiper_next::before {
						border-top: solid 2px var(--color--black);
						border-right: solid 2px var(--color--black);
						transform: translate(-50%,-50%) rotate(45deg);
						left: 45%;
					}
			@media (any-hover: hover) {
				.news_swiper_prev,
				.news_swiper_next {
					transition: .3s !important;
				}
				.news_swiper_prev::before,
				.news_swiper_next::before {
					transition: .3s;
				}
				.news_swiper_prev:hover,
				.news_swiper_next:hover {
					background-color: var(--color--white) !important;
				}
					.news_swiper_prev:hover::before,
					.news_swiper_next:hover::before {
						border-color: var(--color--dark_gray) !important;
					}
			}
					.news_swiper_prev::after,
					.news_swiper_next::after {
						display: none;
					}
		.news__btn_wrap {
			width: 170px;
			height: 42px;
			margin: 0 auto;
			opacity: 0;
			transition: .8s;
			transform: translate(0%,20px);
		}
		.run .news__btn_wrap {
			opacity: 1;
			transform: translate(0%,0px);
		}

#recruit {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
}
	.recruit__inner {
		width: 100%;
		height: auto;
	}
		.recruit__wrap {
			width: 100%;
			height: 100vh;
			position: relative;
		}
			.recruit__swiper {
				width: 100%;
				height: auto;
				position: relative;
				z-index: 1;
			}
				.recruit__swiper__slide {
					width: 100%;
					height: 100vh;
				}
					.recruit__swiper__slide__image {
						width: 100%;
						height: 100%;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
					}
					.recruit__swiper__slide__image._01 {
						background-image: url('../image/index/recruit-image_01@pc.webp');
					}
					.recruit__swiper__slide__image._02 {
						background-image: url('../image/index/recruit-image_02@pc.webp');
					}
			.recruit__taiyo__container {
				width: 100%;
				height: 100vh;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
			}
				.recruit__taiyo_wrap {
					width: 100%;
					height: 100vh;
					position: absolute;
					top: 0;
					left: 0;
				}
					.recruit__taiyo {
						width: 100%;
						height: 100vh;
						position: absolute;
						top: 0;
						left: 0;
					}
						.recruit__taiyo__circle {
							width: 25vh;
							height: auto;
							aspect-ratio: 1 / 1;
							border-radius: 9999px;
							background: var(--color--red);
							position: absolute;
							top: 50%;
							right: -25vw;
							transform: translate(50%,-50%);
							z-index: 1;
						}
			.recruit__taiyo__circle__white__container {
				width: 100%;
				height: 100vh;
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translate(50%,-50%);
				z-index: 11;
				pointer-events: none;
			}
				.recruit__taiyo__circle__white__wrap {
					width: 100%;
					height: 100vh;
					position: absolute;
					top: 0;
					left: 0;
				}
					.recruit__taiyo__circle__white {
						width: 0;
						height: auto;
						aspect-ratio: 1 / 1;
						border-radius: 9999px;
						background-color: var(--color--white);
						position: absolute;
						top: 50%;
						right: 50%;
						transform: translate(50%,-50%);
					}
			.recruit__contents {
				width: auto;
				height: auto;
				position: absolute;
				bottom: calc((60 / 768) * 100vh);
				left: 50%;
				transform: translate(-50%,0%);
				z-index: 10;
			}
				#recruit .section_heading {
					margin: 0 auto 8px;
					color: var(--color--white);
					overflow: hidden;
				}
					#recruit .section_heading span {
						display: block;
						transform: translate(0%,100%);
						transition: .8s;
					}
					#recruit .run .section_heading span {
						transform: translate(0%,0%);
					}
				.recruit__copy {
					margin: 0 auto 8px;
					font-size: 92px;
					font-weight: 700;
					line-height: calc(133 / 92);
					letter-spacing: 0.005em;
					color: var(--color--white);
					white-space: nowrap;
					overflow: hidden;
				}
					.recruit__copy span {
						display: block;
						transform: translate(0%,100%);
						transition: .8s;
					}
					.run .recruit__copy span {
						transform: translate(0%,0%);
					}
				.recruit__txt {
					font-size: 20px;
					font-weight: 500;
					line-height: calc(32 / 20);
					letter-spacing: 0em;
					color: var(--color--white);
					opacity: 0;
					transition: .8s;
					transition-delay: .6s;
				}
				.run .recruit__txt {
					opacity: 1;
				}
				.recruit__btn_wrap {
					width: 170px;
					height: 42px;
					margin: 36px auto 0 0;
					opacity: 0;
					transition: .8s;
					transition-delay: .7s;
				}
				.run .recruit__btn_wrap {
					opacity: 1;
				}

#of_wrap {
	width: 100%;
	height: auto;
	z-index: 1;
}

#office {
	width: 100%;
	height: auto;
	padding: 0px 0 calc((140 / 1366) * 100vw);
	position: relative;
	z-index: 2;
}
	.office__inner {
		width: 80%;
		max-width: 760px;
		height: auto;
		margin: 0 auto;
		opacity: 0;
	}
		#office .section_heading {
			margin: 0 auto 60px;
			text-align: center;
		}
		.office__contents {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: auto;
			margin: 0 auto 40px;
		}
			.office__contents__details {
				width: 50%;
			}
				.office__contents__details__heading {
					width: 100%;
					height: auto;
					margin: 0 auto 16px;
					font-size: 22px;
					font-weight: 700;
					line-height: calc(28 / 22);
					letter-spacing: 0em;
					color: var(--color--black);
				}
				.office__contents__details__address {
					width: 100%;
					height: auto;
					margin: 0 auto 16px;
					font-size: 16px;
					font-weight: 500;
					line-height: calc(30 / 16);
					letter-spacing: 0.005em;
					color: var(--color--black);
				}
				.office__contents__details__note {
					width: 100%;
					height: auto;
					font-size: 12px;
					font-weight: 300;
					line-height: calc(20 / 12);
					letter-spacing: 0.005em;
					color: var(--color--black);
				}
					.office__contents__details__note a {
						color: var(--color--black);
						text-decoration: underline;
					}
				@media (any-hover: hover) {
					.office__contents__details__note a:hover {
						text-decoration: none;
					}
				}
			.office__contents__map {
				width: 50%;
				height: auto;
				aspect-ratio: 380 / 253;
			}
				.office__contents__map iframe {
					display: block;
					width: 100%;
					height: 100%;
				}
		.office__contact {
			width: 100%;
			height: auto;
		}
			.office__btn_wrap {
				width: 280px;
				height: 50px;
				margin: 0 auto;
			}

/* PC ================================================== */
@media all and (min-width: 769px){
					.hero__txt._04 {
						display: none;
					}
}

/* Tablet ================================================== */
@media all and (max-width: 768px){
#loading {
	height: 100dvh;
}
				.loading__taiyo {
					transition: transform 0.6s, width 3s;
				}
					.loading__taiyo__wave::after {
						width: calc(100% + 2px);
						height: 110px;
						bottom: 1px;
						left: -1px;
					}
		.loading__copy__wrap {
			width: calc((314 / 390) * 100%);
			min-width: initial;
			aspect-ratio: 314 / 201;
		}

/* hero */
		.hero__image {
			height: 100vh;
		}
			.hero__image__frame {
				height: 140svh;
			}
		.hero__top {
			height: 100svh;
		}
			.hero__top__contents {
				width: calc((314 / 390) * 100%);
				min-width: initial;
				aspect-ratio: 314 / 201;
			}
					.hero__txt:not(:first-of-type) {
						margin: calc((8 / 390) * 100vw) auto 0;
					}
		.hero__bottom {
			height: auto;
			padding: 40px 0 80px;
		}
			.hero__bottom__inner {
				width: calc((282 / 390) * 100%);
			}
				.hero__bottom__image_wrap {
					position: relative;
				}
				.hero__bottom__image_wrap._01 {
					width: 202px;
					aspect-ratio: 202 / 188.14;
					margin: 0 auto 16px calc((35 / 390) * -100vw);
					top: initial;
					right: initial;
				}
				.hero__bottom__image_wrap._02 {
					width: 202px;
					aspect-ratio: 202 / 188.87;
					margin: -17px calc((35 / 390) * -100vw) 0 auto;
					bottom: initial;
					left: initial;
				}
					.hero__bottom__image._01 {
						width: calc((186.56 / 202) * 100%);
					}
					.hero__bottom__image._02 {
						width: calc((62.2 / 202) * 100%);
					}
					.hero__bottom__image._03 {
						width: calc((124.32 / 202) * 100%);
					}
					.hero__bottom__image._04 {
						width: calc((124.32 / 202) * 100%);
					}
				.hero__bottom__contents {
					width: 100%;
					max-width: initial;
				}
					.hero__bottom__txt_wrap {
						margin: 0 auto 35px;
					}
						.hero__bottom__txt {
							font-size: 18px;
							font-weight: 400;
							line-height: calc(36 / 18);
						}
						.hero__bottom__txt:not(:last-of-type) {
							margin-bottom: 16px;
						}

#brand {
	padding: 0 0 95px;
	overflow: hidden;
}
		.brand__video_wrap {
			height: calc((495 / 390) * 100vw);
		}
	@media all and (max-width: 1100px){
		.brand__video_wrap {
			height: calc((495 / 390) * 100vw);
		}
	}
			.brand__video {
				height: calc((495 / 390) * 100vw);
				clip-path: polygon(0 0, 100% 0, 100% 100%, 0 65.8586%);
			}
		@media all and (max-width: 1100px){
			.brand__video {
				height: calc((495 / 390) * 100vw);
			}
		}
				.brand__video video {
					width: calc((1182 / 390) * 100%);
					top: 38%;
					right: auto;
					left: 68%;
					transform: translate(-50%,-50%);
				}
			.brand__contents__inner {
				width: calc((350 / 390) * 100%);
			}
				.brand__contents__product_image_wrap {
					aspect-ratio: 350 / 533;
				}
					.brand__contents__product_image {
						width: calc((430 / 350) * 100%);
						top: calc((141 / 533) * 100%);
						right: calc((10 / 350) * -100%);
					}
					.brand__contents__product_details__name {
						margin: 0 auto 14px;
						font-size: 44px;
						line-height: calc(53 / 44);
					}
					@media all and (max-width: 460px){
						.brand__contents__product_details__name br {
							display: inline-block;
						}
					}
					.brand__contents__product_details__txt {
						margin: 0 auto 26px;
					}
					.brand__contents__product_details__bg_txt {
						font-size: 87px;
						line-height: calc(72 / 87);
						opacity: .05;
						position: absolute;
						top: -110px;
						left: 10px;
					}

#news {
	padding: 0 0 50px;
}
	.news__inner {
		width: 100%;
		overflow: hidden;
	}
		#news .section_heading {
			margin: 0 auto 27px;
		}
			.news__swiper {
				padding: 0 calc((61 / 390) * 100vw) 44px;
				overflow: initial;
			}
				.news__swiper .swiper-slide {
					padding: 0px;
				}
				.news__swiper__slide {
					border-radius: 16px;
				}
					.news__swiper__slide__link {
						border-radius: 16px;
					}
					.news__swiper__slide__image {
						border-radius: 16px 16px 0 0;
						aspect-ratio: 268 / 179;
					}
					.news__swiper__slide__contents {
						border-radius: 0 0 16px 16px;
					}
						.news__swiper__slide__date {
							margin: 0 auto 13px;
							line-height: calc(17 / 12);
							letter-spacing: 0em;
						}
						.news__swiper__slide__ttl {
							margin: 0 auto 18px;
							font-size: 16px;
							line-height: calc(24 / 16);
							letter-spacing: 0em;
						}
						.news__swiper__slide__cat {
							row-gap: 2px;
							column-gap: 4px;
							font-weight: 400;
							line-height: calc(17 / 12);
						}
								.news__swiper__slide__cat__item a {
									padding: 2px 8px 3px 8px;
								}
				.news_swiper_prev {
					right: calc(((20 / 390) * 100vw) + 36px) !important;
				}
				.news_swiper_next {
					right: calc((20 / 390) * 100vw) !important;
				}
		.news__btn_wrap {
			margin: 0 auto 30px;
		}

/* recruit */
		.recruit__wrap {
			height: auto;
		}
				.recruit__swiper__slide {
					height: 100vh;
				}
					.recruit__swiper__slide__image {
						width: 100%;
						height: 100%;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
					}
			.recruit__taiyo__container {
				display: none;
			}
			.recruit__taiyo__circle__white__container {
				display: none;
			}
			.recruit__contents {
				width: calc((314 / 390) * 100vw);
				width: 100%;
				padding-top: calc((25 / 390) * 100vw);
				padding-bottom: 0;
				padding: calc((38 / 390) * 100vw);
				margin: 0 auto;
				background: rgba(31, 31, 31, 0.3);
				bottom: 0;
			}
				#recruit .section_heading {
					padding-left: 0.05em;
					margin: 0 auto 8px;
				}
				.recruit__copy {
					margin: 0 auto 6px -0.06em;
					font-size: 34px;
					font-style: italic;
					font-weight: 900;
					line-height: calc(57 / 40);
					letter-spacing: 0.1em;
				}
				.recruit__txt {
					font-size: 14px;
					font-weight: 400;
					line-height: calc(26 / 14);
				}
				.recruit__txt._01 {
					margin-bottom: 12px;
				}

#office {
	padding: 80px 0 0;
	background-color: var(--color--white);
}
	.office__inner {
		width: 100%;
		max-width: initial;
		opacity: 1;
	}
		#office .section_heading {
			margin: 0 auto 22px;
		}
		.office__contents {
			display: block;
			margin: 0 auto;
		}
			.office__contents__details {
				width: calc((350 / 390)* 100vw);
				padding: 0 0 101px;
				margin: 0 auto;
			}
				.office__contents__details__heading {
					font-size: 16px;
					line-height: calc(24 / 16);
				}
				.office__contents__details__address {
					font-weight: 500;
					line-height: calc(24 / 16);
					letter-spacing: 0em;
				}
				.office__contents__details__note {
					font-weight: 400;
					line-height: calc(24 / 12);
					letter-spacing: 0em;
				}
					.office__contents__details__note a {
						color: var(--color--red);
					}
			.office__contents__map {
				width: 100%;
				aspect-ratio: 390 / 257;
			}
		.office__contact {
			width: 100%;
			height: auto;
			padding: 80px 0 100px;
			background-color: var(--color--bg_gray);
		}
}

/* SP ================================================== */
@media all and (max-width: 575px){
/* recruit */
					.recruit__swiper__slide__image._01 {
						background-image: url('../image/index/recruit-image_01@sp.webp');
					}
					.recruit__swiper__slide__image._02 {
						background-image: url('../image/index/recruit-image_02@sp.webp');
					}
}