@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#gHeader .hInner {
	opacity: 0;
	transition: opacity .5s;
}
body.loadover #gHeader .hInner {
	opacity: 1;
	transition-delay: .3s;
}
#gHeader .logo {
	opacity: 0;
	transition: opacity .3s;
}
#gHeader .logo.show {
	opacity: 1;
}
#gHeader .logo a::after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: url(/sabae-world/img/common/logo03.png) no-repeat center / cover;
	opacity: 0;
}
#gHeader .logo a::after,
#gHeader .logo a img {
	transition: opacity .3s;
}
body:not(.fixed) #gHeader.black .logo a::after {
	opacity: 1;
}
body:not(.fixed) #gHeader.black .logo a img {
	opacity: 0;
}
body:not(.fixed) #gHeader.black .languageBox .txt,
body:not(.fixed) #gHeader.black .languageBox .list a {
	color: #000;
}
body:not(.fixed) #gHeader.black .menu span {
	background-color: #000;
}
#main .fvBox {
	position: relative;
	height: min(100vh,100svh);
	clip-path: inset(0);
	opacity: 0;
}
#main .fvBox .scrollBtn {
	position: absolute;
	left: calc(50% - 1rem);
	bottom: 0;
	width: 2rem;
	overflow: hidden;
}
#main .fvBox .scrollBtn a {
	display: block;
	height: 2.6rem;
}
#main .fvBox .scrollBtn a::before {
    width: 1px;
    height: 100%;
    position: absolute;
    left: 50%;
    top: -100%;
    background-color: #666;
    content: '';
}
body.loadover #main .fvBox .scrollBtn:not(.hide) a::before {
    animation: scroll 4s cubic-bezier(1, 0, 0, 1) infinite;
    animation-fill-mode: both;
}
@keyframes scroll {
	0% {
		top: -100%;
	}

	50% {
		top: 0;
	}
	100% {
		top: 100%;
	}
}
body.loadover:not(.immediately) #main .fvBox {
	opacity: 1;
	transition: opacity .3s,height 1s cubic-bezier(0.65, 0.07, 0.06, 1.01);
}
body.mvHide #main .fvBox {
	height: 0;
}
#main .fvBox .comSec {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	align-items: center;
	height: min(100vh,100svh);
}
#main .fvBox .content {
	max-width: 101.2rem;
	align-items: center;
	justify-content: space-between;
	display: flex;
}
#main .fvBox .logo {
	width: 15.8rem;
}
#main .fvBox .enTxt {
	font-size: 1.6rem;
	line-height: 2.5;
	font-family: 'ArnoPro-Regular';
	letter-spacing: 0.05em;
	margin-top: 0.4rem;
}
#main .fvBox .enTxt span {
	display: block;
}
#main .fvBox .title {
	position: relative;
	padding: 0 0 0.2rem 0.4rem;
}
#main .fvBox .title span {
	display: block;
}
#main .fvBox .title .img {
	filter: blur(3rem);
	opacity: 0;
	transition: opacity 2s,filter 2s;
}
body.loadover #main .fvBox .title .img {
	filter: blur(0);
	opacity: 1;
	transition-delay: .3s;
}
#main .fvBox .title .en {
	line-height: 1;
	font-family: 'ArnoPro-Regular';
	font-size: 1.2rem;
	width: 1rem;
	height: 1rem;
	position: absolute;
	top: 0;
	left: 100%;
	white-space: nowrap;
	font-weight: normal;
	transform: rotate(90deg);
	margin: 1px 0 0 2.2rem;
	letter-spacing: 0.12em;
}
#main .fvBox .logo,
#main .fvBox .title .en,
#main .fvBox .enTxt {
	opacity: 0;
	transition: opacity 1.5s;
}
body.loadover #main .fvBox .logo,
body.loadover #main .fvBox .title .en,
body.loadover #main .fvBox .enTxt {
	opacity: 1;
	transition-delay: 1.2s;
}
body.loadover #main .fvBox .enTxt span.en {
	letter-spacing: 0.03em;
}
@media all and (max-width: 999px) {
	#main .fvBox::before {
		width: 100%;
		height: 10rem;
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(to bottom,#001224 0%, rgba(0, 18, 36, 0) 100%);
		opacity: 0.4;
		/* content: ""; */
		z-index: 10;
	}
	#main .fvBox .scrollBtn {
		display: none;
	}
	#main .fvBox .content {
		justify-content: center;
		position: static;
	}
	#main .fvBox .enTxt {
		margin-top: -1.1rem;
		font-size: 1.3rem;
		line-height: 1.3;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 2rem;
		letter-spacing: 0.01em;
	}
	#main .fvBox .logo {
		position: absolute;
		bottom: 4rem;
		left: 50%;
		transform: translateX(-50%);
		width: 11rem;
	}
	#main .fvBox .title img {
		width: 2.1rem;
	}
	#main .fvBox .title {
		padding: 0 0 3.4rem 0;
	}
	#main .fvBox .title .en {
		margin: 0.2rem 0 0 2rem;
		letter-spacing: 0.05em;
	}
	#main .fvBox .enTxt span + span {
		margin-top: 0.8rem;
	}
}
@media all and (min-width: 701px) and (max-width: 999px) and (max-height: 1200px) {
    #main .fvBox .title img {
		width: 1.4rem;
	}
	#main .fvBox .title .en {
		font-size: 0.9rem;
	}
	#main .fvBox .logo {
		bottom: 4rem;
		width: 6rem;
	}
	#main .fvBox .enTxt {
		font-size: 1.1rem;
	}
}
#main .scroll01 {
	--text_video_dely: 0s;
}
#main .originBox {
	color: #fff;
}
#main .originBox .content {
	width: calc(50% - 18.6rem);
	max-width: inherit;
	margin: 0 0 0 auto;
	display: flex;
	gap: 7.6rem;
}
#main .originBox .comSec {
	align-items: flex-start;
	justify-content: flex-end;
	font-size: 1.5rem;
}
#main .originBox .comSec .content {
	position: fixed;
	top: 50%;
	transition: opacity 1.5s;
	transform: translateY(-50%);
}
#main .originBox .comSec .content:not(.inView) {
	user-select: none;
	pointer-events: none;
}
#main .originBox .comSec .content.hideEle {
	opacity: 0;
}
#main .originBox .comSec .secImg {
	height: 140%;
	top: auto;
	bottom: calc(-40% * var(--para));
}
#main .originBox .comSec .left p {
	line-height: 1.62;
	letter-spacing: 0.18em;
}
.originBox .comSec {
	height: 100vh;
	box-sizing: content-box;
}
#main .scrollBox > .comSec {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#main .scrollBox > .comSec .secImg {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
#main .showBox .originBox .animateCenter.inView .fadeIn {
	opacity: 1;
	transition: opacity 2s;
}
#main .showBox .originBox .animateCenter .headLine02 {
	letter-spacing: 0.2em;
}
#main .showBox .originBox .animateCenter.inView .left {
	transition-delay: .5s;
}
@media all and (min-width: 1000px){
	/* #main .originBox .comSec {
		margin-top: -50vh;
		height: calc(var(--video_height,0) + 150vh);
	}
	#main .originBox {
		padding-top: calc(50vh + var(--video_top));
	} */
}
@media all and (max-width: 999px) {
	body.fixed {
		overflow: hidden;
	}
	body.android.fixed {
		position: fixed;
		width: 100%;
		overflow: visible;
	}
	.originBox .comSec {
		height: calc(50vh + var(--video_height,0));
		padding-bottom: 0;
		box-sizing: content-box;
	}
	.originBox .comSec + .comSec {
		padding-bottom: 50vh;
	}
	#main .originBox {
		position: relative;
		z-index: 4;
	}
	#main .scrollBox > .comSec {
		/* height: 200vh; */
	}
	#main .originBox .comSec {
		font-size: 1.2rem;
		justify-content: center;
		position: static;
		align-items: flex-start;
	}
	#main .originBox .comSec .content {
		width: auto;
		margin: 0;
		top: 55%;
	}
	#main .originBox .comMovie {
		position: relative;
		z-index: 10;
	}
	#main .originBox .comSec .left p {
		line-height: 1.66;
	}
	#main .originBox .comTextBox {
		padding-right: 1.6rem;
	}
	#main .showBox .originBox .comTextBox.inView .fadeIn {
		opacity: 1;
	}
}






/* showBox */
/* #main .showBox section:not(.evolutionBox,.reoriginBox,.presenceBox,.originBox) {
	clip-path: inset(0 0 0 0);
} */
#main .showBox .dotsUl {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	font-size: 1.1rem;
	font-weight: bold;
	z-index: 51;
	opacity: 0;
	transition: opacity .3s;
	mix-blend-mode: exclusion;
	user-select: none;
}
#main .showBox .dotsUl.show {
	opacity: 1;
}
#main .showBox .dotsUl li {
	color: #CCCCCC;
	margin-bottom: 1rem;
	padding-right: 1.5rem;
	position: relative;
	cursor: pointer;
	transition: 0.3s;
}
#main .showBox .dotsUl .ttl {
	position: relative;
	margin: 0 auto;
	width: 1.2rem;
	color: #fff;
	font-weight: 400;
	line-height: 1.6;
	overflow: hidden;
	max-height: 0;
	transition: .3s linear;
	padding: 0;
}
#main .showBox .dotsUl .ttl img {
	transition: .3s;
	display: block;
}
#main .showBox .dotsUl .ttl img + img {
	position: absolute;
	left: 0;
	top: 0.7rem;
	opacity: 0;
}
#main .showBox .dotsUl li.on .ttl {
	padding: 0.7rem 0 0.9rem 0;
	max-height: 5rem;
}
#main .showBox .dotsUl li:after {
	width: 0;
	height: 1px;
	position: absolute;
	top: 0.7rem;
	right: 0;
	background-color: #CCCCCC;
	content: "";
	transition: .3s;
}
#main .showBox .dotsUl li.on:after {
	width: 0.9rem;
}
@media all and (hover: hover) and (min-width: 1000px) {
	#main .showBox .dotsUl li:hover {
		opacity: 0.7;
	}
	#main .showBox .dotsUl li:hover .ttl {
		padding: 0.7rem 0 0.9rem 0;
		max-height: 5rem;
	}
}
@media all and (max-width: 999px) {
	#main .showBox .dotsUl {
		font-size: 1rem;
	}
	#main .showBox .dotsUl li {
		padding-right: 1rem;
	}
	#main .showBox .dotsUl li.on:after {
		width: 0.7rem;
	}
	#main .showBox .dotsUl .ttl {
		width: 1.1rem;
	}
	#main .showBox .dotsUl .on .ttl {
		padding: 0.5rem 0 0.6rem 0;
	}
}


/* inheritanceBox */
#main .inheritanceBox {
	--padding_top: -80rem;
	padding: calc(150rem + var(--padding_top)) 0 calc(100vh + 20rem);
	position: relative;
	color: #fff;
	z-index: 5;
}
#main .inheritanceBox .lineBg {
	width: 100%;
	position: absolute;
	left: 0;
	top: var(--padding_top);
	bottom: 100vh;
	overflow: hidden;
	clip-path: inset(0 0 calc(100% * var(--size)) 0);
	pointer-events: none;
	user-select: none;
}
#main .inheritanceBox .lineBg svg {
	width: auto;
	height: 161%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-60%);
}
#main .inheritanceBox .headLine01 {
	top: auto;
	right: -0.2rem;
	left: auto;
	bottom: calc(50% * var(--site) - 0.4rem * var(--site2));
	transform: translateY(calc(50% * var(--site)));
}
#main .inheritanceBox .blurIn.inView.fadeOut > * {
	filter: blur(10px);
}
#main .inheritanceBox .content {
	max-width: 136.6rem;
}
#main .inheritanceBox .flexBox {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 5rem 20.1rem;
	padding-left: 22.9rem;
	margin-bottom: 32rem;
}
#main .inheritanceBox .photoBox {
	width: 36rem;
	position: relative;
	/*transition-duration: 1s !important;*/
}
#main .inheritanceBox .photoBox .comMovie {
	aspect-ratio: 360/250;
	width: 100%;
	position: relative;
	transform: translateY(calc(0.5 * var(--para)));
}
#main .inheritanceBox .photoBox.box02 .comMovie {
	transform: translateY(calc(0.3 * var(--para)));
}
#main .inheritanceBox .photoBox.box03 .comMovie {
	transform: translateY(calc(0.5 * var(--para)));
}
#main .inheritanceBox .photoBox.box04 .comMovie {
	transform: translateY(calc(0.3 * var(--para)));
}
#main .inheritanceBox .photoBox.box05 .comMovie {
	transform: translateY(calc(0.4 * var(--para)));
}
#main .inheritanceBox .photoBox .comMovie::before {
	width: 17.5rem;
	height: 102%;
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: 0;
	background: linear-gradient(to right,#000 0%, rgba(84, 84, 84, 0) 100%);
	opacity: 0.69;
	content: "";
	z-index: 2;
}
#main .inheritanceBox .photoBox .name {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -9.9rem;
	z-index: 10;
	margin-top: 1.4rem;
}
#main .inheritanceBox .photoBox .name img {
	height: 2.6rem;
}
#main .inheritanceBox .photoBox .name .en {
	margin-top: 1.3rem;
	display: block;
	font-family: 'Cormorant-Regular';
	font-size: max(10px, 1rem);
	letter-spacing: 0.05em;
}
#main .inheritanceBox .photoBox.box01 {
	margin-right: 5rem;
}
#main .inheritanceBox .photoBox.box02 {
	margin-top: 20rem;
	margin-right: 5rem
}
#main .inheritanceBox .photoBox.box02 .name {
	left: -12.5rem;
}
#main .inheritanceBox .comTextBox {
	justify-content: center;
	gap: 7rem;
	padding-left: 0.4rem;
	margin-bottom: 32rem;
}
#main .inheritanceBox .comTextBox .left {
	gap: 3.1rem;
}
#main .inheritanceBox .comTextBox .left p {
	line-height: 1.7;
	letter-spacing: 0.29em;
}
#main .inheritanceBox .headLine02 {
	margin-top: -0.2rem;
	gap: 0.5rem;
}
#main .inheritanceBox .flexBox02 {
	padding: 0 24rem 0 0;
	margin-bottom: 0;
	gap: 7.6rem 40.6rem;
	position: relative;
}
#main .inheritanceBox .photoBox.box04 {
	margin-top: 10rem;
}
#main .inheritanceBox .photoBox.box05 {
	margin-right: 11.5rem;
	margin-top: 5rem;
}
#main .inheritanceBox .photoBox.row .comMovie::before {
	left: auto;
	right: 0;
	background: linear-gradient(to left,#000 0%, rgba(84, 84, 84, 0) 100%);
}
#main .inheritanceBox .photoBox.row .name {
	left: auto;
	right: -6.9rem;
}
#main .inheritanceBox .photoBox.box04 .name {
	right: -14.3rem;
}
#main .inheritanceBox .photoBox.box05 .name {
	right: -4.4rem;
}
@media all and (min-width: 1000px) {
    #main .inheritanceBox .photoBox.box03 {
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    #main .inheritanceBox .photoBox.box04 {
        margin-left: auto;
    }
    #main .inheritanceBox .photoBox.box04,
    #main .inheritanceBox .photoBox.box05 {
        transition-delay: .3s;
    }
    #main .inheritanceBox .content {
        max-width: inherit;
    }
    #main .inheritanceBox .flexBox02 + .flexBox02 {
        margin-top: 7.5rem;
    }
	#main .inheritanceBox .headLine02 {
		line-height: 1.75;
	}
}
@media all and (max-width: 999px) {
	#main .inheritanceBox {
		overflow: visible;
	}
	#main .inheritanceBox .stickyBg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: opacity .5s;
	}
	#main .inheritanceBox .stickyBg.fullView {
		opacity: 0.15;
	}
	#main .inheritanceBox .stickyBg img,
	#main .inheritanceBox .stickyBg video {
		position: sticky;
		top: 0;
		width: 100%;
		height: 100vh;
		object-fit: cover;
	}
	#main .inheritanceBox .flexBox {
		display: block;
		padding-left: 0;
		margin-bottom: 6.1rem;
	}
	#main .inheritanceBox .photoBox .comMovie {
		aspect-ratio: 190/132;
	}
	#main .inheritanceBox .photoBox {
		width: 50.66%;
	}
	#main .inheritanceBox {
		padding: calc(150vh + var(--padding_top)) 0 calc(100vh + 8rem);
	}
	#main .inheritanceBox .lineBg {
		top: calc(100vh + var(--padding_top));
	}
	#main .inheritanceBox .lineBg svg {
		width: 100%;
		height: 100%;
		transform: none;
		left: 0;
	}
	#main .inheritanceBox .photoBox.box01 {
		margin-left: 8rem;
	}
	#main .inheritanceBox .photoBox .name img {
		height: 2rem;
	}
	#main .inheritanceBox .photoBox .name {
		left: -5.9rem;
		margin-top: 1.1rem;
	}
	#main .inheritanceBox .photoBox .name .en {
		font-size: 0.8rem;
		margin-top: 1rem;
	}
	#main .inheritanceBox .photoBox.box01 {
		margin-right: 0;
	}	
	#main .inheritanceBox .photoBox.box02 {
		margin: 10rem 0 0 auto;
	}
	#main .inheritanceBox .photoBox.box02 .name {
		left: -9.6rem;
	}
	#main .inheritanceBox .comTextBox .left {
		gap: 1.6rem;
	}
	#main .inheritanceBox .comTextBox {
		gap: 2.5rem;
		padding-left: 0rem;
		padding-right: 1rem;
		margin-bottom: 15rem;
		margin-top: 15rem;
	}
	#main .inheritanceBox .comTextBox .left p {
		line-height: 1.7;
		letter-spacing: 0.25em;
	}
	#main .inheritanceBox .flexBox02 {
		padding-right: 0;
		margin-bottom: 0;
	}
	#main .inheritanceBox .photoBox.box03 {
		margin: 0 9rem 0 auto;
	}
	#main .inheritanceBox .photoBox.box04 {
		margin-top: 7rem;
	}
	#main .inheritanceBox .photoBox.row .name {
		left: auto;
		right: -4.4rem;
	}
	#main .inheritanceBox .photoBox.box04 .name {
		right: -10.4rem;
	}
	#main .inheritanceBox .photoBox.box05 {
		margin: 7rem 12.8rem 0 auto;
	}
	#main .inheritanceBox .photoBox.box05 .name {
		right: -3.8rem;
	}
}


/* evolutionBox */
#main .evolutionBox {
	padding-bottom: calc(100vh + var(--padding_bottom,0));
	position: relative;
	color: #fff;
	background-color: #0e0e0e;
	z-index: 2;
	margin-bottom: -100vh;
}
#main .evolutionBox .heightBox {
	margin-top: 5rem;
	height: 100vh;
}
#main .evolutionBox .comMovie {
	height: auto;
	top: 100vh;
	bottom: -100vh;
	overflow: visible;
	z-index: -1;
}
#main .evolutionBox .comMovie video,
#main .evolutionBox .comMovie img {
	position: sticky;
	top: 0;
	height: var(--winH);
}
#main .evolutionBox .comTextBox.cols .headLine02 {
	margin-bottom: 10rem;
}
#main .evolutionBox .listBox {
	position: relative;
	margin-bottom: 50rem;
	height: calc(100vh + 0rem);
	transition: filter .5s;
}
#main .evolutionBox .listBox.isSticky {
	height: calc(100vh + 80rem);
}
#main .evolutionBox .listBox.hide {
	filter: brightness(0.7);
}
/*#main .evolutionBox .listBox::before {
	width: 58.1rem;
	height: 39.5rem;
	position: absolute;
	top: 0;
	left: 0;
	background: url("/sabae-world/img/index/bg03.png") no-repeat left top / 100% 100%;
	content: "";
	z-index: 10;
}*/
#main .evolutionBox .listBox .imgUl {
	position: sticky;
	top: 0;
	left: 0;
	display: flex;
	background-color: #000;
}
#main .evolutionBox .listBox .imgUl li {
	width: 33.33%;
}
#main .evolutionBox .listBox .imgUl.inView li {
	transition-delay: var(--dely);
}
#main .evolutionBox .listBox .imgUl.inView li:nth-child(2) {
	transition-delay: calc(var(--dely) + 0.2s);
}
#main .evolutionBox .listBox .imgUl.inView li:nth-child(3) {
	transition-delay: calc(var(--dely) + 0.4s);
}
#main .evolutionBox .listBox .imgUl .image {
	height: 100vh;
	overflow: hidden;
}
#main .evolutionBox .listBox .imgUl .image img,
#main .evolutionBox .listBox .imgUl .image video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .presenceBox .headLine01.hide {
	opacity: 0.1;
	z-index: -1;
}
#main .evolutionBox .headLine01 .en {
	/* opacity: 1; */
	letter-spacing: 0.05em;
	margin-left: 0.3rem;
}
#main .evolutionBox .content {
	max-width: 125rem;
	display: flex;
	justify-content: space-between;
}
#main .evolutionBox .comTextBox {
	flex: 1;
	margin-left: 12rem;
}
#main .evolutionBox .comTextBox .stickyInner {
	position: relative;
	transform: translateY(var(--para,-1));
}
#main .evolutionBox .comTextBox .text {
	margin-top: 7rem;
}
#main .evolutionBox .rightBox {
	width: 60rem;
}
#main .evolutionBox .imgList li {
	/* position: sticky; */
	display: flex;
	align-items: flex-end;
}
#main .evolutionBox .imgList .image {
	flex: 1;
	width: 100%;
	aspect-ratio: 864/488;
}
#main .evolutionBox .imgList .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .evolutionBox .imgList .txt {
	width: 15.4rem;
	flex-shrink: 0;
	font-family: 'ArnoPro-Regular';
	font-size: 1.8rem;
	line-height: 1;
	margin: 0 0 -1px 1.6rem;
	opacity: 1;
	transition: opacity .5s;
}
#main .evolutionBox .imgList .hideTxt .txt {
	opacity: 0;
}
#main .evolutionBox .imgList .txt small {
	margin-top: 0.8rem;
	display: block;
	font-size: 1.3rem;
	font-family: 'ArnoPro-Light';
	letter-spacing: 0.08em;
}
#main .evolutionBox .comMovie.btmMovie img,
#main .evolutionBox .comMovie.btmMovie video {
	opacity: calc(0.05 + 0.95*var(--video_opacity));
	transition: opacity 1s;
}

@media all and (max-width: 999px) {
	#main .evolutionBox .listBox .imgUl {
		display: block;
	}
	#main .evolutionBox .listBox .imgUl li {
		width: auto;
	}
	#main .evolutionBox .listBox .imgUl .image {
		height: calc(100vh / 3);
	}
	#main .evolutionBox .headLine01 {
		top: calc(50% * var(--site));
    	left: 0;
	}
	#main .evolutionBox.scrollOver .headLine01 {
		z-index: -1;
	}
	#main .evolutionBox .headLine01 img {
		width: 5.4rem;
	}
	#main .evolutionBox .listBox::before {
		width: 100%;
		height: 17rem;
	}
	#main .evolutionBox .content {
		max-width: inherit;
		display: block;
		margin: 0 4rem 0 2.5rem;
		width: auto;
	}
	#main .evolutionBox .listBox {
		margin-bottom: 15rem;
	}
	#main .evolutionBox .comTextBox {
		margin-left: 6rem;
	}
	#main .evolutionBox .comTextBox .stickyInner {
		transform: none;
	}
	#main .evolutionBox .comTextBox .text {
		margin-top: 5.1rem;
	}
	#main .evolutionBox .rightBox {
		width: auto;
		margin: 15rem 6rem 0 -2.5rem;
	}
	#main .evolutionBox .imgList .txt {
		white-space:nowrap;
		display: flex;
		font-size: 1.4rem;
		width: 1rem;
		height: 1rem;
		transform: rotate(90deg);
		position: absolute;
		top: 0;
		left: 100%;
		margin-left: 1.7rem;
		letter-spacing: 0.05em;
	}
	#main .evolutionBox .imgList .txt small {
		font-size: 1rem;
		letter-spacing: 0.08em;
		margin: 0.2rem 0 0 0.9rem;
	}
	#main .evolutionBox .imgList li {
		position: relative;
		display: block;
		top: 0 !important;
	}
	#main .evolutionBox {
		padding-top: 1px;
	}
}
@media all and (min-width: 801px) and (max-width: 999px) {
	#main .evolutionBox .imgList .txt {
		font-size: 1.3rem;
	}
}

/* presenceBox */
#main .presenceBox {
	--title_stay: 80rem;
	padding: 0;
	position: relative;
	z-index: 3;
}
#main .presenceBox .headLine01 {
	right: auto;
	left: -0.7rem;
	z-index: 10000;
}
#main .presenceBox .headLine01 img {
	transform: translateX(0.3rem);
}
#main .presenceBox .headLine01 .en {
	/* opacity: 1; */
	color: #000000;
	left: 58%;
}
#main .presenceBox .content {
	position: relative;
	max-width: inherit;
	width: auto;
	padding: calc(110rem + var(--img_top,0)) 0 45rem;
	opacity: var(--opacity);
	/* clip-path: inset(0); */
}
#main .presenceBox .imgBox {
	font-size: max(10px,1rem);
	text-align: right;
	z-index: 10;
}
#main .presenceBox .imgBox .imgUl li {
	position: relative;
	margin-bottom: 2.3rem;
	transform: translateY(calc(var(--para) * -2));
}
#main .presenceBox .imgBox .imgUl li:last-child {
	margin-bottom: 0;
}
#main .presenceBox .imgBox .imgUl li .image {
	clip-path: inset(0 100% 100% 0);
	transition: clip-path .5s;
	overflow: hidden;
	aspect-ratio: 1220/812;
	width: 100%;
}
#main .presenceBox .imgBox .imgUl li .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .presenceBox .imgBox .imgUl li.inView .image {
	clip-path: inset(0 0 0 0);
}
#main .presenceBox .imgBox .imgUl img {
	width: 100%;
	transform: scale(1.1);
	transition: transform .5s;
}
#main .presenceBox .imgBox .imgUl li.inView .image img {
	transform: scale(1);
}
#main .presenceBox .imgBox .imgUl a {
	display: block;
	color: #444;
}
#main .presenceBox .imgBox p {
	letter-spacing: 0.05em;
  	margin-top: 0.5rem;
	font-size: 1.1em;
}
#main .presenceBox .comTextBox {
	margin: 0 auto 18rem;
	justify-content: center;
	max-width: 70rem;
}
#main .presenceBox .comTextBox .left {
	justify-content: center;
	gap: 3.8rem;
	transition: opacity 2s,transform 2s;
}
#main .presenceBox .subTitle {
	margin-bottom: 18rem;
	padding-right: 0.8rem;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	font-size: 3rem;
	font-weight: 500;
	letter-spacing: 0.4em;
	position: relative;
	z-index: 10;
	min-height: inherit;
	transform: translateY(0);
	transition: opacity 2s;
}
#main .presenceBox .subTitle.inView {
	opacity: 1;
}
#main .presenceBox .subTitle .rl {
	position: sticky;
	top: calc(50% - var(--thisH)*0.5);
	display: block;
}
#main .presenceBox .subTitle .dot {
	display: inline-block;
	text-align: right;
	margin: -1.1rem 0.6rem 0.8rem 0;
	vertical-align: top;
	font-size: 2.1rem;
}
#main .presenceBox .enTitle {
	position:fixed;
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: center;
	font-size: 6.4rem;
	font-family: 'Cormorant-Light';
	font-weight: normal;
	line-height: 1;
	letter-spacing: 0;
	transform: translate(-50%,-50%);
	transition: opacity .8s;
	user-select: none;
	pointer-events: none;
}
#main .presenceBox .enTitle.hide {
	opacity: 0.03;
}
#main .presenceBox .enTitle span {
	display: block;
	margin: 0 -0.8rem;
	transition: opacity 1.5s;
	opacity: 0;
}
#main .presenceBox .enTitle .num01 {
	margin-top: 11.2rem;
}
#main .presenceBox .enTitle .num02 {
	margin-top: -0.3rem;
}
#main .presenceBox .enTitle .num03 {
	margin-top: 12.6rem;
}
#main .presenceBox .enTitle .num04 {
	margin-top: 4.3rem;
}
#main .presenceBox .enTitle .num05 {
	margin-top: 7rem;
}
#main .presenceBox .enTitle .num06 {
	margin-top: 0rem;
}
#main .presenceBox .enTitle .num01,
#main .presenceBox .enTitle .num03,
#main .presenceBox .enTitle .num05 {
	--para2: calc(var(--para)*-0.1);
	transform: translateY(var(--para2));
}
#main .presenceBox .enTitle .num02,
#main .presenceBox .enTitle .num04,
#main .presenceBox .enTitle .num06 {
	--para2: calc(var(--para)*0.1);
	transform: translateY(var(--para2));
}
body.whiteBg #main .presenceBox .enTitle span {
	opacity: 1;
}
body.whiteBg #main .presenceBox .enTitle .num01,
body.whiteBg #main .presenceBox .enTitle .num03,
body.whiteBg #main .presenceBox .enTitle .num05 {
	position: relative;
	animation: placeIn01 1.5s forwards;
}
@keyframes placeIn01 {
	0% {
		top: 4rem;
	}
	100% {
		top: 0;
	}
}
body.whiteBg #main .presenceBox .enTitle .num02,
body.whiteBg #main .presenceBox .enTitle .num04,
body.whiteBg #main .presenceBox .enTitle .num06 {
	position: relative;
	animation: placeIn02 1.5s forwards;
}
@keyframes placeIn02 {
	0% {
		top: -4rem;
	}
	100% {
		top: 0;
	}
}
#main .presenceBox .comTextBox .left p {
	line-height: 1.75;
}
#main .presenceBox .photoBox {
	position: relative;
	margin-left: auto;
	width: calc(50% + 48.7rem);
	z-index: 10;
}
#main .presenceBox .photoBox .image {
	position: relative;
	z-index: 2;
	aspect-ratio: 2340/1240;
	overflow: hidden;
}
#main .presenceBox .photoBox .image img,
#main .presenceBox .photoBox .image video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .presenceBox .photoBox .txt {
	font-size: 2.5rem;
	font-family: 'ArnoPro-Regular';
	white-space: nowrap;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -10rem;
	letter-spacing: 0.05em;
}
#main .presenceBox .photoBox .image .txt {
	color: #fff;
	mix-blend-mode: difference;
	z-index: 1;
}
#main .presenceBox .imgBox02 {
	text-align: left;
}
@media all and (min-width: 1000px) {
	#main .presenceBox .imgBox {
		width: 30rem;
		position: absolute;
		top: calc(150rem + var(--img_top,0));
		left: 0;
	}
	#main .presenceBox .imgBox02 {
		left: auto;
		right: 0;
	}
}
@media all and (hover: hover) and (min-width: 1000px) {
	#main .presenceBox .imgBox .imgUl li.inView a:hover .image img {
		transform: scale(1.1);
	}
}
@media all and (max-width: 999px) {
	#main .presenceBox .headLine01 {
		z-index: -1;
	}
	#main .presenceBox .headLine01 img {
		width: 5.8rem;
	}
	#main .presenceBox .content {
		padding: calc(15.6rem + 100vh + var(--img_top,0)) 0 18rem;
	}
	#main .presenceBox .enTitle {
		font-size: 4rem;
	}
	/* #main .presenceBox {
		padding: 0 0 20rem;
	} */
	#main .presenceBox .enTitle span {
		margin: 0 -0.5rem;
	}
	#main .presenceBox .enTitle .num01 {
		margin-top: 7.1rem;
	}
	#main .presenceBox .enTitle .num03 {
		margin-top: 7.9rem;
	}
	#main .presenceBox .enTitle .num04 {
		margin-top: 2.7rem;
	}
	#main .presenceBox .enTitle .num05 {
		margin-top: 4.4rem;
	}
	#main .presenceBox .enTitle .num06 {
		margin-top: 0;
	}
	#main .presenceBox .subTitle {
		margin-bottom: 13rem;
		font-size: 2.2rem;
		letter-spacing: 0.4em;
		padding: 0;
	}
	#main .presenceBox .subTitle .dot {
		margin: -0.8rem 0 1.4rem 0;
		font-size: 2.1rem;
	}
	#main .presenceBox .imgBox .imgUl li {
		width: 23.6rem !important;
		margin: 0 0.5rem;
		transform: none;
	}
	#main .presenceBox .imgBox p {
		letter-spacing: 0.05em;
		margin-top: 0.6rem;
		font-size: 1em;
	}
	#main .presenceBox .imgBox {
		font-size: 1rem;
		margin: 0 0 12rem;
	}
	#main .presenceBox .comTextBox .left {
		gap: 1.4rem;
	}
	#main .presenceBox .comTextBox .left p {
		line-height: 1.6;
	}
	#main .presenceBox .comTextBox {
		margin: 0 auto 7rem;
		max-width: inherit;
	}
	#main .presenceBox .imgBox02 {
		margin: 13rem 0 0 0;
	}
	#main .presenceBox .photoBox {
		width: calc(50% + 12.1rem);
		margin: 0 0 0 auto;
	}
	#main .presenceBox .photoBox .image {
		aspect-ratio: 308/392;
	}
	#main .presenceBox .photoBox .txt {
		font-size: 1.8rem;
		left: -4.9rem;
		margin-top: 0.7rem;
		line-height: 1.66;
	}
}
#main .presenceSection {
	margin-top: -100vh;
	position: relative;
	z-index: 10;
}
#main .presenceSection::before {
	position: absolute;
	left: 0;
	top: -500vh;
	bottom: 0;
	width: 100%;
	z-index: -1;
	background-color: #fff;
	content: "";
	opacity: 0;
	user-select: none;
	pointer-events: none;
	transition: 2s;
}
body.whiteBg {
	background-color: #fff;
}
body.whiteBg #main .presenceSection::before {
	opacity: 1;
}

#main .hiddenBox {
	clip-path: inset(0);
}
/* reoriginBox */
#main .reoriginBox {
	padding-bottom: 53.4rem;
	position: relative;
	z-index: 11;
}
@media all and (min-width: 1000px) {
	#main .reoriginBox {
		padding-bottom: 39.09vw;
	}
}
#main .reoriginBox::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";
	background-color: #fff;
	z-index: 10;
	opacity: 0;
	user-select: none;
	pointer-events: none;
	transition: opacity 1s;
}
body.whiteBg #main .reoriginBox::before {
	opacity: 1;
}
#main .reoriginBox::after {
	width: 100%;
	height: 49.4rem;
	position: absolute;
	bottom: -1px;
	left: 0;
	background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 0%, #000 100%);
	content: "";
	z-index: 1;
}
#main .reoriginBox .bgVideo {
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fff;
}
#main .reoriginBox .bgVideo img,
#main .reoriginBox .bgVideo video {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	object-fit: cover;
}
#main .reoriginBox .topBox {
	--bottom: 78.9rem;
	color: #fff;
	position: relative;
	height: calc(100vh + var(--bottom));
	z-index: 2;
	margin-bottom: calc(var(--bottom) * -1);
}
#main .reoriginBox .topBox::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	content: "";
	height: 60rem;
	/*background-image: linear-gradient(#0e0e0e 0%, rgba(0, 0, 0, 0) 100%);;*/
}
#main .reoriginBox .topBox .comSec {
	position: sticky;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	align-items: center;
	opacity: 0;
	transition: opacity .5s;
}
#main .reoriginBox .topBox.inView .comSec {
	opacity: 1;
}
#main .reoriginBox .headLine01 {
	position: relative;
	top: auto;
	left: auto;
	min-height: 10.8rem;
	transform: none;
}
#main .reoriginBox .topBox.inView .comSec .headLine01 > * {
	opacity: 1;
	filter: blur(0);
}
#main .reoriginBox .topBox .btmTxt {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	font-size: 1.7rem;
	letter-spacing: 0.03em;
	font-family: 'ArnoPro-Regular';
	line-height: 2;
	margin-top: 27.9rem;
	z-index: 5;
	opacity: 1;
	transition: opacity .5s;
}
#main .reoriginBox .topBox.hideEn .btmTxt {
	opacity: 0;
}
#main .reoriginBox .topBox .btmTxt span {
	letter-spacing: 0;
}
#main .reoriginBox .bgBox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 0.1rem);
	cursor: default;
	pointer-events: none;
	z-index: 1;
	opacity: var(--opacity,1);
}
#main .reoriginBox .bgBox .reoriginBoxBg {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 2732/3400;
	display: flex;
	align-items: flex-end;
	opacity: calc(1 - var(--black));
	background: linear-gradient(#3768A5 0%, #6E9EC7 60%,#6E9EC7 100%);
	clip-path: inset(
		calc(50vh * var(--rectangle) - 15rem * var(--square))
		calc(50% * var(--rectangle) - 15rem * var(--square))
		calc((100% - 50vh) * var(--rectangle) - 15rem * var(--square))
		calc(50% * var(--rectangle) - 15rem * var(--square))
	);
	transition: clip-path var(--time,1s);
}
#main .reoriginBox .bgBox img,
#main .reoriginBox .bgBox video {
	width: 100%;
	height: auto;
}
#main .reoriginBox .bgBox video {
	mask: url(/sabae-world/img/index/reorigin_bg.png) no-repeat center bottom / 100% 100%;
}
#main .reoriginBox .lineBg {
	width: 100%;
	height: 120%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	user-select: none;
	pointer-events: none;
	overflow: hidden;
}
#main .reoriginBox .lineBg svg {
	width: auto;
	height: 100%;
	position: absolute;
	top: 0;
	right: 50%;
	transform: translateX(20%);
	clip-path: inset(0 0 calc(100% * var(--size)) 0);
}
#main .reoriginBox .btmBox {
	color: #fff;
	padding: 50rem 0 35rem;
}
#main .reoriginBox .btmBox .headLine01 {
	width: fit-content;
	margin: 0 auto 70rem;
	opacity: 0;
}
#main .reoriginBox .comTextBox {
	margin: 0 auto;
	max-width: 50rem;
	padding-left: 6.7rem;
}
#main .reoriginBox .headLine02 small {
	margin-top: 1.3rem;
	display: block;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.1em;
}
#main .reoriginBox .headLine02 {
	margin-bottom: 10rem;
}
@media all and (max-width: 999px) {
	#main .reoriginBox .bgBox {
		top: 0;
		bottom: 0;
		height: auto;
	}
	#main .reoriginBox .bgBox .reoriginBoxBg {
		background: linear-gradient(#3768A5 0%, #81AED5 70%,#81AED5 100%);
		height: calc(100% - 100vh);
		clip-path: inset(
			calc(50vh * var(--rectangle) - 10rem * var(--square))
			calc(50% * var(--rectangle) - 10rem * var(--square))
			calc((100% - 50vh) * var(--rectangle) - 10rem * var(--square))
			calc(50% * var(--rectangle) - 10rem * var(--square))
		);
	}
	#main .reoriginBox .bgBox img {
		object-fit: cover;
	}
	#main .reoriginBox .btmBox {
		padding: 15rem 0 12rem;
	}
	#main .reoriginBox .headLine01 {
		position: relative;
		top: auto;
		left: auto;
		min-height: 0;
	}
	#main .reoriginBox .headLine01 img {
		width: 23.4rem;
	}
	#main .reoriginBox .btmBox .headLine01 {
		margin: 0 auto 60rem;
	}
	#main .reoriginBox .comTextBox {
		margin: 0 auto;
		max-width: 31rem;
		padding-left: 5.1rem;
	}
	#main .reoriginBox .headLine02 small {
		margin-top: 0.6rem;
		font-size: 1.2rem;
		letter-spacing: 0.05em;
	}
	#main .reoriginBox .headLine02 {
		margin-bottom: 3rem;
	}
	#main .reoriginBox .headLine02 {
		margin-bottom: 7rem;
	}
	#main .reoriginBox {
		padding-bottom: 23.2rem;
	}
	#main .reoriginBox::after {
		height: 17.3rem;
	}
	#main .reoriginBox .topBox {
		--bottom: 60rem
	}
	#main .reoriginBox .topBox .comSec {
		height: 100vh;
		padding-bottom: 0;
	}
	#main .reoriginBox .topBox .btmTxt {
		font-size: 1.2rem;
		line-height: 1.85;
		margin-top: 16rem;
	}
	#main .reoriginBox .lineBg svg {
		height: 100%;
		top: 0;
		transform: translateX(38%);
	}
}

/* conceptBox */
#main .conceptBox {
	color: #fff;
	background-color: #0d0d0d;
	position: relative;
	padding-bottom: calc(60rem + var(--top_margin,0));
}
#main .conceptBox .content {
	max-width: inherit;
	width: auto;
	margin: 0 6.5rem;
	z-index: 10;
	position: relative;
	padding-top: 1px;
}
#main .conceptBox .h2Title {
	text-align: center;
	font-family: 'ArnoPro-Light';
	font-size: 1.8rem;
	font-weight: normal;
	letter-spacing: 0.1em;
	margin-bottom: 13.5rem;
	margin-top:45rem;
}
#main .conceptBox .enTxt {
	text-align: center;
	font-size: 1.2rem;
	font-family: 'ArnoPro-Regular';
	letter-spacing: 0.1em;
	margin-bottom: 18rem;
}
#main .conceptBox .eyeImg {
	text-align: center;
	margin-bottom: 4.1rem;
	opacity: 0;
	filter: blur(10px);
	transition: opacity 1s,filter 1s;
}
#main .conceptBox .eyeImg.inView {
	filter: blur(0);
	opacity: max(0.3,var(--opacity));
}
#main .conceptBox .eyeImg img {
	width: 42.5rem;
	height: auto;
}
#main .conceptBox .comTextBox {
	justify-content: center;
	gap: 5rem;
	position: relative;
}
#main .conceptBox .comTextBox .left {
	gap: 3.1rem;
}
#main .conceptBox .comTextBox .left p {
	letter-spacing: 0.28em;
	line-height: 2.1;
}
#main .conceptBox .photoBox {
	margin-bottom: 23rem;
	position: relative;
}
#main .conceptBox .photoBox .image {
	aspect-ratio: 2472/1100;
	overflow: hidden;
}
#main .conceptBox .photoBox .image img,
#main .conceptBox .photoBox .image video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .conceptBox .h2Title.fadeUp,
#main .conceptBox .eyeImg.fadeUp,
#main .conceptBox .enTxt.fadeUp,
#main .conceptBox .photoBox.fadeUp,
#main .conceptBox .comTextBox .left.fadeUp,
#main .conceptBox .comTextBox .headLine02.fadeUp {
	transition: opacity 0.5s,transform 1s;
}
#main .conceptBox .comMovie.btmMovie {
	top: 0;
	height: auto;
	overflow: visible;
	background-color: #000;
}
#main .conceptBox .comMovie.btmMovie img,
#main .conceptBox .comMovie.btmMovie video {
	position: sticky;
	top: 0;
	width: 100%;
	height: var(--winH);
	filter: grayscale(1);
	opacity: calc(0.05 - 0.05*var(--to_black));
}
#main .conceptBox .eyeBg {
	position: absolute;
	top: 4rem;
	left: 50%;
	width: 104.5rem;
	max-width: 100%;
	transform: translateX(-50%);
}
#main .conceptBox .eyeBg img {
	width: 100%;
}
@media all and (max-width: 999px) {
	#main .conceptBox .h2Title {
		font-size: 1.3rem;
		margin-bottom: 8.5rem;
		margin-top: 30rem;
	}
	#main .conceptBox .content {
		margin: 0 2.7rem 10rem;
	}
	#main .conceptBox .eyeImg img {
		width: 100%;
		max-width: 28.7rem;
	}
	#main .conceptBox .eyeImg {
		margin-bottom: 2.6rem;
	}
	#main .conceptBox .enTxt {
		margin-bottom: 8rem;
		font-size: 1rem;
	}
	#main .conceptBox .photoBox .image {
		aspect-ratio: 325/180;
	}
	#main .conceptBox .comTextBox .left p {
		letter-spacing: 0.28em;
		line-height: 1.66;
	}
	#main .conceptBox .comTextBox .left {
		gap: 1.6rem;
	}
	#main .conceptBox .photoBox {
		margin-bottom: 12rem;
	}
	#main .conceptBox .comTextBox {
		gap: 2.5rem;
	}
	#main .conceptBox {
		padding-bottom: 0;
	}
}




/* brands */
#main .brands {
	padding-top: 0rem;
	position: relative;
	z-index: 20;
	color: #fff;
	background-color: #000;
}
#main .brands .headLine03 {
	 margin-bottom: 15rem;
}
#main .brands .brandsList {
	position: relative;
	display: flex;
}
#main .brands .brandsList:not(.allowed),
#main .brands .brandsList.moving {
	user-select: none;
	pointer-events: none;
}
#main .brands .brandsList li {
	flex: 1;
	height: calc(var(--winW) *  700 / 1366);
	position: relative;
	overflow: hidden;
	transition: flex .5s;
	will-change: flex;
	--dely: 0s;
}
#main .brands .brandsList li::after {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";
	background-color: #000;
	z-index: 99;
	transition: clip-path .5s;
	transition-delay: var(--dely);
	clip-path: inset(0 0 0 0);
}
#main .brands .brandsList li:nth-child(2)::after {
	transition-delay: calc(.2s + var(--dely));
}
#main .brands .brandsList li:nth-child(3)::after {
	transition-delay: calc(.3s + var(--dely));
}
#main .brands .brandsList li:nth-child(4)::after {
	transition-delay: calc(.4s + var(--dely));
}
#main .brands .brandsList li:nth-child(5)::after {
	transition-delay: calc(.5s + var(--dely));
}
#main .brands .brandsList.inView li::after {
	clip-path: inset(0 0 0 100%);
	user-select: none;
	pointer-events: none;
}
#main .brands .brandsList.open li {
	transition: flex 1s;
}
#main .brands .brandsList.open li:not(.active) {
	flex: 0;
}
#main .brands .brandsList li .bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#main .brands .brandsList li .bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 1s;
}
#main .brands .brandsList:not(.open) li .bg img {
	filter: grayscale(0.7);
}
#main .brands .brandsList li .outLogo {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	z-index: 2;
	cursor: pointer;
	transition: opacity .5s;
	transition-delay: .5s;
}
#main .brands .brandsList.open .outLogo {
	opacity: 0;
	user-select: none;
	pointer-events: none;
	transition-delay: 0s;
}
#main .brands .brandsList li.item01 .outLogo img {
	width: calc(141/1366 * 100vw);
}
#main .brands .brandsList li.item02 .outLogo img {
	width: calc(178/1366 * 100vw);
}
#main .brands .brandsList li.item03 .outLogo img {
	width: calc(136/1366 * 100vw);
}
#main .brands .brandsList li.item04 .outLogo img {
	width: calc(117/1366 * 100vw);
}
#main .brands .brandsList li.item05 .outLogo::before {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 40rem;
	height: 40rem;
	/*background-image: radial-gradient(circle at center, rgba(0,0,0,0.7), rgba(0,0,0,0), rgba(0,0,0,0));*/
	transform: translate(-50%,-50%);
	border-radius: 50%;
	content: "";
	z-index: -1;
}
#main .brands .brandsList li.item05 .outLogo img {
	width: calc(177/1366 * 100vw);
}
#main .brands .brandsList li.item01 .bg img {
	object-position: 50% 50%;
}
#main .brands .brandsList li.item02 .bg img {
	object-position: 38% 50%;
}
#main .brands .brandsList li.item03 .bg img {
	object-position: 8.5% 50%;
	transition: .5s;
	transition-delay: .2s;
}
#main .brands .brandsList li.item04 .bg img {
	object-position: 29% 100%;
}
#main .brands .brandsList li.item05 .bg img {
	object-position: 65% 50%;
}
#main .brands .brandsList li:not(.active) .innerBox {
	user-select: none;
	pointer-events: none;
	opacity: 0;
	transition-delay: 0s;
}
#main .brands .brandsList .innerBox {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	transition: opacity .5s;
	transition-delay: .5s;
	z-index: 10;
}
#main .brands .brandsList .innerBox .btnBox {
	display: flex;
	justify-content: center;
	position: relative;
	margin: 0 auto;
	max-width: 17.4rem;
}
#main .brands .brandsList .innerBox .close {
	width: 5rem;
	cursor: pointer;
	font-size: 1.4rem;
	font-family: 'Cormorant-Medium';
	transition: opacity 0.5s;
	margin: 3.2rem auto 0;
	color: #fff;
	letter-spacing: 0.12em;
}
#main .brands .brandsList .innerBox .prev {
	position: absolute;
	left: 0;
	bottom: 0.4rem;
	width: 1.3rem;
	cursor: pointer;
	font-size: 0;
	transform: rotate(180deg);
	transition: opacity 0.5s;
	mix-blend-mode: difference;
}
#main .brands .brandsList .innerBox .next {
	position: absolute;
	right: 0;
	bottom: 0.4rem;
	width: 1.3rem;
	cursor: pointer;
	font-size: 0;
	transition: opacity 0.5s;
	mix-blend-mode: difference;
}
#main .brands .brandsList .txtBox {
	padding-bottom: 3.4rem;
	margin-right: 8%;
	max-width: 52.7rem;
	width: 50%;
}
#main .brands .brandsList .txtBox .inLogo {
	margin: 0 auto;
	max-width: 100%;
}
#main .brands .brandsList .txtBox .txt {
	font-size: 1.4rem;
	color: #fff;
	line-height: 2.14;
	letter-spacing: 0.06em;
}
#main .brands .brandsList .item01 .innerBox {
	justify-content: flex-start;
}
#main .brands .brandsList .item01 .txtBox {
	margin-right: 0;
	margin-left: 7%;
	margin-top: 14%;
}
#main .brands .brandsList .item01 .txtBox .inLogo {
	margin-bottom: 8rem;
	width: 19.3rem;
}
#main .brands .brandsList .item02 .txtBox .inLogo {
	margin-bottom: 8rem;
	width: 30rem;
}
#main .brands .brandsList .item03 .txtBox .inLogo {
	margin-bottom: 8rem;
	width: 14.5rem;
}
#main .brands .brandsList .item04 .txtBox .inLogo {
	margin-bottom: 9rem;
	width: 17rem;
}
#main .brands .brandsList .item05 .innerBox {
	justify-content: flex-start;
}
#main .brands .brandsList .item05 .txtBox {
	margin-right: 0;
	margin-left: 7%;
	margin-top: 14%;
}
#main .brands .brandsList .item05 .txtBox .inLogo {
	margin-bottom: 8rem;
	width: 23.7rem;
}
#main .brands .brandsList li .bgShow::before {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: 0.4;
	content: "";
	z-index: 1;
	transition: opacity 1s;
}
#main .brands .brandsList.open li .bgShow::before {
	opacity: 0;
	user-select: none;
	pointer-events: none;
}
	
@media all and (min-width: 1000px) {
	#main .brands .brandsList:not(.open) li:not(.active):hover {
		flex: 2;
		flex-shrink: 0;
	}
	#main .brands .brandsList:not(:hover,.open) li:nth-child(3) {
		flex: 1.79;
		flex-shrink: 0;
	}
	#main .brands .brandsList:not(.open) li:not(.active) {
		transition-delay: .2s !important;
	}
	#main .brands .brandsList .innerBox {
		width: var(--winW);
	}
	#main .brands .brandsList .innerBox .arrow:hover {
		opacity: 0.7;
	}
	#main .brands .brandsList .innerBox .btnBox {
		max-width: 23.6rem;
	}
	#main .brands .brandsList .innerBox .close {
		margin: 5.2rem auto 0;
	}
	#main .brands .brandsList .innerBox .close:hover {
		opacity: 0.7;
	}
	#main .brands .brandsList .innerBox .prev,
	#main .brands .brandsList .innerBox .next {
		width: 1.6rem;
	}
	#main .brands .brandsList li.item03:hover .bg img {
		object-position: 6.8% 17.3%;
	}
}

@media all and (max-width: 999px) {
	#main .brands .headLine03 {
	 	margin-bottom: 10rem;
	}
	#main .brands .brandsList {
		height: 100vh;
		flex-direction: column;
	}
	#main .brands .brandsList.open {
		height: 100vh;
	}
	#main .brands .brandsList.row {
		flex-direction: row;
	}
	#main .brands .brandsList .item05 {
		order: 10;
	}
	#main .brands .brandsList .item01 {
		order: 9;
	}
	#main .brands .brandsList .item02 {
		order: 8;
	}
	#main .brands .brandsList .item04 {
		order: 7;
	}
	#main .brands .brandsList .item03 {
		order: 6;
		flex: 2;
	}
	#main .brands .brandsList.row li .bg {
		left: 50%;
		width: 100vw;
		max-width: 100vw;
		transform: translateX(-50%);
	}
	#main .brands .brandsList li:nth-child(1)::after {
		transition-delay: calc(.6s + var(--dely));
	}
	#main .brands .brandsList li:nth-child(2)::after {
		transition-delay: calc(.4s + var(--dely));
	}
	#main .brands .brandsList li:nth-child(3)::after {
		transition-delay: var(--dely);
	}
	#main .brands .brandsList li:nth-child(4)::after {
		transition-delay: calc(.2s + var(--dely));
	}
	#main .brands .brandsList li:nth-child(5)::after {
		transition-delay: calc(.8s + var(--dely));
	}
	#main .brands .brandsList li.item03 .outLogo img {
		width: calc(126/375* 100vw);
	}
	#main .brands .brandsList li.item03 .bg img {
		object-position: 8.5% 18.5%;
	}
	#main .brands .brandsList li.item04 .outLogo img {
		width: calc(121/375 * 100vw);
	}
	#main .brands .brandsList li {
		height: auto;
	}
	#main .brands .brandsList li.item04 .bg img {
		object-position: 0 28%;
	}
	#main .brands .brandsList li.item02 .outLogo img {
		width: calc(210/375 * 100vw);
	}
	#main .brands .brandsList li.item02 .bg img {
		object-position: 52% 30%;
	}
	#main .brands .brandsList li.item01 .outLogo img {
		width: calc(130/375 * 100vw);
	}
	#main .brands .brandsList li.item01 .bg img {
		object-position: 0% 16.5%;
	}
	#main .brands .brandsList li.item05 .outLogo img {
		width: calc(177/375 * 100vw);
	}
	#main .brands .brandsList li.item05 .bg img {
		object-position: 8.8% 33%;
	}
	#main .brands .brandsList .txtBox .txt {
		font-size: 1.2rem;
		line-height: 2.08;
		letter-spacing: 0.06em;
	}
	#main .brands .brandsList .txtBox {
		margin-right: 0;
		max-width: 100vw;
		width: 100vw;
		padding: 0 3rem 12rem;
	}
	#main .brands .brandsList .innerBox {
		align-items: flex-end;
		width: 100vw;
	}
	#main .brands .brandsList .innerBox .arrow::after {
		position: absolute;
		left: -1rem;
		top: -1rem;
		right: -1rem;
		bottom: -1rem;
		content: "";
	}
	#main .brands .brandsList .item03 .txtBox .inLogo {
		margin-bottom: 5rem;
		width: 12.6rem;
	}
	#main .brands .brandsList .item01 .txtBox{
		margin-left: 0;
	}
	#main .brands .brandsList .item01 .txtBox .inLogo {
		margin-bottom: 5rem;
		width: 17rem;
	}
	#main .brands .brandsList .item02 .txtBox .inLogo {
		margin-bottom: 4.5rem;
		width: 25rem;
	}
	#main .brands .brandsList .item04 .txtBox {
		margin-right: 0;
		margin-left: 0;
	}
	#main .brands .brandsList .item04 .txtBox .inLogo {
		margin-bottom: 4.5rem;
		width: 17rem;
	}
	#main .brands .brandsList .item05 .txtBox{
		margin-left: 0;
	}
	#main .brands .brandsList .item05 .txtBox .inLogo {
		margin-bottom: 4.5rem;
		width: 22.4rem;
	}
	#main .brands .brandsList:not(.open) li .bgShow::before {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.6;
		content: "";
		z-index: 1;
	}
}


/* popBox */
.popBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	overflow-y: auto;
	transition: opacity 0.5s;
	opacity: 0;
}
.popBox:not(.show) {
	user-select: none;
	pointer-events: none;
}
.popBox.show {
	opacity: 1;
}
.popBox .close {
	position: absolute;
	top: 0.9rem;
	right: 1.9rem;
	font-size: 1.2rem;
	line-height: 1;
	padding: 1rem 0;
	cursor: pointer;
	transition: 0.3s;
	z-index: 20;
	color: #fff;
	letter-spacing: 0.08em;
}
.popBox .cover {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
}
.popBox .innerBox {
	margin: 0 auto;
	width: 100%;
	max-height: 80svh;
	max-width: 120.6rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}
.popBox .innerBox .slick-slider {
	user-select: auto;
	-webkit-user-select: auto;
}
.popBox .subBox {
	color: #fff;
	position: relative;
} 
.popBox .flexInner {
	display: flex;
	background-color: rgba(0, 0, 0, 0.75);
}
.popBox .flexInner .photo {
	width: 61rem;
	aspect-ratio: 610/406;
	overflow: hidden;
}
.popBox .flexInner .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.popBox .flexInner .textBox {
	flex: 1;
	font-size: 1.3rem;
	padding: 13.5rem 2rem 2rem 6.5rem;
}
.popBox .flexInner .textBox p {
	line-height: 1.69;
	letter-spacing: 0.05em;
}
.popBox .flexInner .textBox .title {
	font-size: 2rem;
	letter-spacing: 0.05em;
	margin-bottom: 1.4rem;
}
.popBox .arrowUl {
	margin-top: 3rem;
	position: relative;
	height: 1.5rem;
}
.popBox .arrowUl img {
	height: 1.5rem;
}
.popBox .arrowUl li {
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	transition: 0.3s;
}
.popBox .arrowUl .next {
	left: auto;
	right: 0;
}
.popBox .comBtn {
	margin-top: 4.3rem;
	text-align: left;
}
.popBox .comBtn a {
	padding: 0 0 0.6rem;
	color: #fff;
	letter-spacing: 0.05em;
	font-size: 1.2rem;
}
.popBox .comBtn a::before {
	background-color: #fff;
	opacity: 0;
}
.popBox .comBtn img {
	margin: -0.3rem 0 0 0.6rem;
  	width: 1rem;
}
@media all and (hover: hover) and (min-width: 1000px) {
	.popBox .arrowUl li:hover {
		opacity: 0.7;
	}
	.popBox .close:hover {
		opacity: 0.7;
	}
	.popBox .comBtn a:hover {
		opacity: 0.7;
	}
}
@media all and (max-width: 999px) {
	.popBox .flexInner {
		display: block;
	}
	.popBox .flexInner .photo {
		width: auto;
	}
	.popBox .innerBox {
		padding: 0 1.5rem;
	}
	.popBox .close {
		top: 0;
		padding: 0;
		width: 4.3rem;
		right: 0;
		font-size: 1.1rem;
	}
	.popBox .flexInner .textBox {
		font-size: 1.2rem;
		padding: 3.7rem 3rem 6rem;
		min-height: 23rem;
		box-sizing: border-box;
	}
	.popBox .flexInner .textBox p {
		line-height: 1.41;
	}
	.popBox .flexInner .textBox .title {
		font-size: 1.4rem;
		margin-bottom: 1.4rem;
	}
	.popBox .comBtn {
		margin-top: 3.3rem;
	}
	.popBox .comBtn img {
		margin: -0.4rem -0.6rem 0 0.6rem;
	}
	.popBox .arrowUl {
		margin-top: 2.5rem;
	}
	.popBox .subBox {
		padding-top: 2.5rem;
	}
}
#main .scrollBox {
	position: relative;
	z-index: 2;
	--size: 0;
}
#main .scrollBox .stickyBox {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	user-select: none;
}
body.toTop #main .scrollBox .stickyBox {
	display: none;
}
#main .scrollBox .stickyBox .comMovie {
	position: sticky;
	top: 0;
	height: var(--winH);
	background-color: transparent;
	clip-path: inset(50% 50% 50% 50%);
	transition: clip-path 1.5s;
	overflow: hidden;
	will-change: clip-path;
	outline: none;
}
#main .scrollBox .stickyBox.small .comMovie {
	clip-path: inset(calc(50% - var(--textH,20rem)) calc(50% - var(--videoW,9rem)) calc(50% - var(--textH,20rem)) calc(50% - var(--videoW,9rem)));
}
@media all and (min-width: 1000px) {
	#main .scrollBox .stickyBox.small:not(.big) .comMovie::before {
		opacity: 0;
		transition: opacity 1.5s;
	}
	#main .scrollBox .stickyBox.small:not(.big) .comMovie > video,
	#main .scrollBox .stickyBox.small:not(.big) .comMovie > img {
		--innerW: calc(var(--videoW,9rem) - 1px);
		--innerH: calc(var(--textH,20rem) - 1px);
		clip-path: inset(calc(50% - var(--innerH)) calc(50% - var(--innerW)) calc(50% - var(--innerH)) calc(50% - var(--innerW)));
		transition: clip-path 1.5s;
	}
}
#main .scrollBox .stickyBox.big .comMovie {
	clip-path: inset(0 0 0 0);
	transition-delay: 0s;
	transition: clip-path 1s;
	background: #000;
}
#main .scrollBox .stickyBox .comMovie > img,
#main .scrollBox .stickyBox .comMovie > video {
	clip-path: inset(0 0 0 0);
	height: calc(100% + 10px);
	transition: opacity 0.5s;
	transform: translateY(-5px);
}
#main .scrollBox .stickyBox.big.black .comMovie.btmMovie > img,
#main .scrollBox .stickyBox.big.black .comMovie.btmMovie > video {
	opacity: 0.12;
}
#main .scrollBox .stickyBox.big.black.hide .comMovie.btmMovie > img,
#main .scrollBox .stickyBox.big.black.hide .comMovie.btmMovie > video {
	opacity: 0;
}
#main .scrollBox.scroll01 .secImg img,
#main .scrollBox.scroll01 .secImg video {
	position: absolute;
	opacity: 0.6;
	height: 110%;
	bottom: calc(var(--para) * 10% - 10%);
	
}
#main .scrollBox .stickyBox .comMovie.btmMovie img,
#main .scrollBox .stickyBox .comMovie.btmMovie video{
	opacity: 1;
}
@media all and (max-width: 999px) {
	#main .scrollBox .stickyBox .comMovie {
		height: 100vh;
	}
	#main .scrollBox .stickyBox.small .comMovie {
		clip-path: inset(calc(50% - 15.3rem) calc(50% - 6.6rem) calc(50% - 15.3rem) calc(50% - 6.6rem));
	}
	#main .scrollOver:not(.reoriginBox) .headLine01 {
		opacity: 0.1;
	}
}
#main .brandsTop {
	position: relative;
	height: calc(100vh + var(--video_height,0));
}
#main .brandsTop .fadeUp {
	transform: translateY(0);
	transition: opacity 1s;
}
#main .brandsTop .headLine03.fadeUp {
	transition: 2s;
	transition-delay: .5s;
}
#main .brandsTop.inView .fadeUp {
	opacity: 1;
}
#main .brandsTop .stickBox {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	padding: calc(50vh - var(--titleH,0)) 0 1px;
	z-index: 2;
}
#main .brandsTop .bgVideo {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#main .brandsTop .bgVideo img,
#main .brandsTop .bgVideo video {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	object-fit: cover;
}
#main .reoriginBox .comTextBox .animate {
	mask-image: linear-gradient(to right,#fff 0%,#fff 33%,transparent 66%,transparent 100%);
	mask-size: 300% 100%;
	mask-position: 100% 0%;
	transition: mask-position 2s;
}
#main .reoriginBox .comTextBox .animate.inView {
	mask-position: 0% 0%;
}

@media all and (max-width: 999px) {
/* SPバージョンの各種アクションのタイミング */
#main .brandsTop .headLine03.fadeUp {
	transition-duration: 1s;
}
#main .showBox .originBox .animateCenter.inView .fadeIn {
	transition-duration: 2s;
}
.blurIn > * {
	transition-duration: 1s;
}
#main .scrollBox .stickyBox .comMovie > img,
#main .scrollBox .stickyBox .comMovie > video {
	filter: blur(2px);
	height: calc(100% + 10px);
}
#main .inheritanceBox .headLine01 > * {
	filter: blur(10px);
	transition-duration: 1s;
}
#main .inheritanceBox .headLine01.inView > * {
	filter: blur(0);
}
#main .evolutionBox .headLine01 > * {
	filter: blur(10px);
	transition-duration: 1s;
}
#main .evolutionBox .headLine01.inView > * {
	filter: blur(0);
}
#main .presenceBox .headLine01 > * {
	filter: blur(10px);
	transition-duration: 1s;
}
#main .presenceBox .headLine01.inView > * {
	filter: blur(0);
}
#main .evolutionBox .listBox {
	height: calc(150vh + 50rem);
	margin-top: -50rem;
}
#main .evolutionBox .listBox.hide {
	filter: brightness(0.7);
}
/* spivvy */
#main .brands .brandsList:not(.row) li.item01:not(.active) .bg img {
	transform: scale(1);
	transform-origin: 50% 50%;
}
/* optical */
#main .brands .brandsList:not(.row) li.item02:not(.active) .bg img {
	transform: scale(1);
	transform-origin: 50% 50%;
}
/* kaneko */
#main .brands .brandsList:not(.row) li.item03:not(.active) .bg img {
	transform: scale(1);
	transform-origin: 50% 50%;
}
/* shokunin */
#main .brands .brandsList:not(.row) li.item04:not(.active) .bg img {
	transform: scale(1.1);
	transform-origin: 61% 26%;
}
/* issey */
#main .brands .brandsList:not(.row) li.item05:not(.active) .bg img {
	transform: scale(1.4);
	transform-origin: 100% 50%;
}
}


#main .accessBox {
	margin-left: -3rem;
	position: absolute;
	bottom: 2rem;
	left: 50%;
	color: #fff;
	z-index: 20;
	width: fit-content;
	text-align: left;
	transform: translateX(-50%);
	letter-spacing: 0.05em;
}
#main .accessBox .comBtn {
	margin-top: 1.7rem;
	text-align: left;
}
#main .accessBox .comBtn a {
	text-align: left;
	padding: 0;
	color: #fff;
	font-size: 1.2rem;
	font-family: 'ArnoPro-Regular';
}
#main .accessBox .comBtn a:before {
	display: none;
}
#main .accessBox .title {
	font-size: 3rem;
	font-weight: 400;
	margin-bottom: 2.3rem;
  	letter-spacing: 0.08em;
	font-family: 'Cormorant-Regular';
}
#main .accessBox p {
	letter-spacing: 0.1em;
}
@media all and (hover: hover) and (min-width: 1000px) {
	#main .accessBox .comBtn a:hover {
		opacity: 0.7;
	}
}
@media all and (max-width: 999px) {
	#main .accessBox {
		margin-left: 0;
		text-align: center;
		bottom: -10rem;
	}
	#main .accessBox .comBtn {
		margin-top: 2.5rem;
		text-align: center;
	}
	#main .accessBox .title {
		font-size: 2.8rem;
	}
	#main .accessBox p {
		line-height: 2;
	}
}

@media all and (min-width: 500px) and (max-width: 999px) and (max-height: 1100px) {
	#main .originBox .comSec {
		font-size: 1rem;
	}
	#main .originBox .comSec .left p {
		letter-spacing: 0.1em;
		line-height: 1.6;
	}
	#main .originBox {
		min-height: 150vh;
	}
}